@jjlmoya/utils-chrono 1.2.0

package/src/tests/tool_exports.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { validateToolExports } from './shared-test-helpers';
+
+describe('Tool Exports Pattern Validation', () => {
+  describe('Component Exports Format', () => {
+    ALL_TOOLS.forEach((tool) => {
+      it(`${tool.entry.id}: Component should be a lazy-loaded function`, () => {
+        expect(typeof tool.Component).toBe('function');
+        expect(tool.Component).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: SEOComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.SEOComponent).toBe('function');
+        expect(tool.SEOComponent).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: BibliographyComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.BibliographyComponent).toBe('function');
+        expect(tool.BibliographyComponent).toBeInstanceOf(Function);
+      });
+    });
+  });
+
+  describe('Dynamic Import Validation', () => {
+    it('all tools must have functional dynamic imports', async () => {
+      const result = await validateToolExports(ALL_TOOLS);
+      if (!result.passed) {
+        throw new Error(`Tool export validation failed:\n${result.failures.join('\n')}`);
+      }
+      expect(result.passed).toBe(true);
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { chronoCategory } from '../data';
+
+describe('Tool Validation Suite', () => {
+  describe('Library Registration', () => {
+    it('should have tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(9);
+    });
+
+
+    it('chronoCategory should be defined', () => {
+      expect(chronoCategory).toBeDefined();
+      expect(chronoCategory.i18n).toBeDefined();
+    });
+  });
+});
+

package/src/tool/beat-rate-converter/beat-rate-converter.css

@@ -0,0 +1,301 @@
+.tool-main-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  border-radius: 1.25rem;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 1.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+  box-shadow: var(--shadow-base);
+  position: relative;
+  overflow: hidden;
+}
+
+.converter-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  position: relative;
+  z-index: 1;
+}
+
+.panel-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.section-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-base);
+  opacity: 0.7;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.movement-select {
+  width: 100%;
+  padding: 0.65rem 0.75rem;
+  background: var(--bg-page);
+  border: 1px solid var(--border-base);
+  border-radius: 0.75rem;
+  color: var(--text-base);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2rem;
+}
+
+.movement-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.stepper-wrap {
+  display: flex;
+  align-items: center;
+  background: var(--bg-page);
+  border: 1px solid var(--border-base);
+  border-radius: 0.75rem;
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+
+.stepper-wrap:focus-within {
+  border-color: var(--accent);
+}
+
+.stepper-input {
+  width: 100%;
+  padding: 0.6rem 0.25rem;
+  border: none;
+  background: transparent;
+  color: var(--text-base);
+  font-size: 0.875rem;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  box-sizing: border-box;
+  -moz-appearance: textfield;
+}
+
+.stepper-input::-webkit-inner-spin-button,
+.stepper-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.stepper-input:focus {
+  outline: none;
+}
+
+.stepper-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 3rem;
+  padding: 0.5rem;
+  border: none;
+  background: transparent;
+  color: var(--text-base);
+  opacity: 0.5;
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+.stepper-btn:hover {
+  background: var(--bg-page);
+  color: var(--accent);
+  opacity: 1;
+}
+
+.stepper-btn:active {
+  background: var(--border-base);
+  transform: scale(0.95);
+}
+
+.result-card {
+  background: var(--bg-page);
+  border: 1px solid var(--border-base);
+  border-radius: 1rem;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.result-grid {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.result-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.1rem;
+}
+
+.result-value {
+  font-size: 2.25rem;
+  font-weight: 800;
+  color: var(--accent);
+  letter-spacing: -0.03em;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.result-unit {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-base);
+  opacity: 0.6;
+  text-transform: uppercase;
+}
+
+.result-label {
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--text-base);
+  opacity: 0.5;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-top: 0.2rem;
+}
+
+.result-divider {
+  width: 1px;
+  height: 4rem;
+  background: var(--border-base);
+  flex-shrink: 0;
+}
+
+.impact-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-base);
+  border-radius: 0.875rem;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.impact-header {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-base);
+  opacity: 0.7;
+}
+
+.impact-result {
+  display: flex;
+  align-items: baseline;
+  gap: 0.3rem;
+}
+
+.impact-value {
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--color-warning, #f59e0b);
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+
+.impact-unit {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--text-base);
+  opacity: 0.6;
+}
+
+.impact-note {
+  font-size: 0.75rem;
+  color: var(--text-base);
+  opacity: 0.6;
+  line-height: 1.4;
+  margin: 0;
+}
+
+.steps-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  padding: 1rem 1.125rem;
+  background: var(--bg-page);
+  border-radius: 0.875rem;
+  border: 1px solid var(--border-base);
+}
+
+.step-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.step-marker {
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--text-on-primary, #fff);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.step-text {
+  font-size: 0.8125rem;
+  color: var(--text-base);
+  opacity: 0.85;
+  line-height: 1.4;
+}
+
+.tip-row {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-page);
+  border-radius: 0.75rem;
+  border: 1px solid var(--border-base);
+}
+
+.tip-icon {
+  flex-shrink: 0;
+  margin-top: 0.1rem;
+  color: var(--accent);
+}
+
+.tip-text {
+  font-size: 0.8rem;
+  color: var(--text-base);
+  opacity: 0.85;
+  line-height: 1.5;
+}
+
+@media (max-width: 520px) {
+  .tool-main-card {
+    padding: 1rem;
+    gap: 1.25rem;
+  }
+
+  .result-value {
+    font-size: 1.75rem;
+  }
+}

package/src/tool/beat-rate-converter/bibliography.astro

@@ -0,0 +1,16 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { beatRateConverter } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props as Props;
+const loader = beatRateConverter.i18n[locale] || beatRateConverter.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/beat-rate-converter/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'What Is a Beat Rate? — Crown & Caliber',
+    url: 'https://henryarcher.com/en-eu/blogs/blog/beat-rates',
+  },
+  {
+    name: 'Oscillations, Vibrations and Hertz in Watchmaking',
+    url: 'https://monochrome-watches.com/glossary/oscillation/',
+  },
+];

package/src/tool/beat-rate-converter/client.ts

@@ -0,0 +1,46 @@
+const movementSelect = document.getElementById('movement-select') as HTMLSelectElement;
+const vphInput = document.getElementById('vph-input') as HTMLInputElement;
+const customSection = document.getElementById('custom-section') as HTMLElement;
+const freqValue = document.getElementById('freq-value') as HTMLElement;
+const tpsValue = document.getElementById('tps-value') as HTMLElement;
+const impactValue = document.getElementById('impact-value') as HTMLElement;
+function getVph(): number {
+  if (movementSelect.value === 'custom') {
+    return parseInt(vphInput.value, 10) || 28800;
+  }
+  return parseInt(movementSelect.value, 10) || 28800;
+}
+
+function update() {
+  const vph = getVph();
+  const hz = vph / 7200;
+  const tps = vph / 3600;
+  const sPerDay = 86400 / vph;
+
+  freqValue.textContent = hz.toFixed(3);
+  tpsValue.textContent = String(tps);
+  impactValue.textContent = sPerDay < 1 ? sPerDay.toFixed(1) : String(Math.round(sPerDay));
+}
+
+function toggleCustom() {
+  const show = movementSelect.value === 'custom';
+  customSection.style.display = show ? 'flex' : 'none';
+  if (!show) update();
+}
+
+movementSelect.addEventListener('change', () => { toggleCustom(); update(); });
+vphInput.addEventListener('input', update);
+
+document.querySelectorAll('.stepper-btn').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    const step = parseInt(btn.getAttribute('data-step') || '1200', 10);
+    const dir = btn.textContent?.includes('+') ? 1 : -1;
+    const val = parseInt(vphInput.value, 10) || 28800;
+    const next = val + dir * step;
+    vphInput.value = String(Math.max(3600, Math.min(360000, next)));
+    update();
+  });
+});
+
+toggleCustom();
+update();

package/src/tool/beat-rate-converter/component.astro

@@ -0,0 +1,15 @@
+---
+import ConverterPanel from './components/ConverterPanel.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <ConverterPanel labels={ui} />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/beat-rate-converter/components/ConverterPanel.astro

@@ -0,0 +1,87 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="converter-panel">
+  <div class="panel-section">
+    <div class="section-label">{labels.vphLabel || "Movement"}</div>
+    <select class="movement-select" id="movement-select">
+      <option value="28800" data-vph="28800">ETA 2824-2 / SW200 — 28,800 vph</option>
+      <option value="28800" data-vph="28800">ETA 2892-A2 / SW300 — 28,800 vph</option>
+      <option value="28800" data-vph="28800">Valjoux 7750 / SW500 — 28,800 vph</option>
+      <option value="21600" data-vph="21600">Miyota 8215 / 8315 — 21,600 vph</option>
+      <option value="28800" data-vph="28800">Miyota 9015 — 28,800 vph</option>
+      <option value="21600" data-vph="21600">Seiko NH35 / 4R35 — 21,600 vph</option>
+      <option value="21600" data-vph="21600">Seiko 6R35 — 21,600 vph</option>
+      <option value="18000" data-vph="18000">Unitas 6497 / 6498 — 18,000 vph</option>
+      <option value="28800" data-vph="28800">Rolex 3135 — 28,800 vph</option>
+      <option value="28800" data-vph="28800">Rolex 3235 — 28,800 vph</option>
+      <option value="25200" data-vph="25200">Omega 8500 / 8900 — 25,200 vph</option>
+      <option value="36000" data-vph="36000">Zenith El Primero 400 — 36,000 vph</option>
+      <option value="custom">{labels.customMovement || "Custom"}</option>
+    </select>
+  </div>
+
+  <div class="panel-section" id="custom-section" style="display: none;">
+    <div class="section-label">{labels.customVph || "Vibrations per hour"}</div>
+    <div class="stepper-wrap">
+      <button type="button" class="stepper-btn" data-step="1200">−1200</button>
+      <input type="number" class="stepper-input" id="vph-input" min="3600" max="360000" value="28800" />
+      <button type="button" class="stepper-btn" data-step="1200">+1200</button>
+    </div>
+  </div>
+
+  <div class="result-card" id="result-card">
+    <div class="result-grid">
+      <div class="result-item">
+        <span class="result-value" id="freq-value">4.000</span>
+        <span class="result-unit">Hz</span>
+        <span class="result-label">{labels.frequency || "Frequency"}</span>
+      </div>
+      <div class="result-divider"></div>
+      <div class="result-item">
+        <span class="result-value" id="tps-value">8</span>
+        <span class="result-unit">/s</span>
+        <span class="result-label">{labels.ticksPerSec || "Ticks per second"}</span>
+      </div>
+    </div>
+
+    <div class="impact-card">
+      <div class="impact-header">
+        <svg viewBox="0 0 24 24" width="16" height="16">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="currentColor" />
+        </svg>
+        <span>{labels.lostTickImpact || "If it loses 1 tick per hour"}</span>
+      </div>
+      <div class="impact-result">
+        <span class="impact-value" id="impact-value">3</span>
+        <span class="impact-unit">s/d</span>
+      </div>
+      <p class="impact-note" id="impact-note">
+        {labels.lostTickExplainer || "One missed tick per hour means ~3 seconds lost per day at 28,800 vph."}
+      </p>
+    </div>
+  </div>
+
+  <div class="steps-section">
+    <div class="step-row">
+      <div class="step-marker">1</div>
+      <span class="step-text">{labels.step1 || "Select your movement or enter a custom VPH."}</span>
+    </div>
+    <div class="step-row">
+      <div class="step-marker">2</div>
+      <span class="step-text">{labels.step2 || "Read the Hz frequency, ticks per second, and the impact of a lost tick."}</span>
+    </div>
+  </div>
+
+  <div class="tip-row">
+    <svg class="tip-icon" viewBox="0 0 24 24" width="16" height="16">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor" />
+    </svg>
+    <span class="tip-text">{labels.tipContent || "Higher beat rates (36,000 vph) give smoother hand sweep and better precision, but also more wear on the escapement."}</span>
+  </div>
+</div>

package/src/tool/beat-rate-converter/entry.ts

@@ -0,0 +1,42 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type BeatRateConverterUI = {
+  title: string;
+  vphLabel: string;
+  selectMovement: string;
+  customMovement: string;
+  customVph: string;
+  resultsTitle: string;
+  frequency: string;
+  ticksPerSec: string;
+  lostTickImpact: string;
+  lostTickExplainer: string;
+  step1: string;
+  step2: string;
+  tipTitle: string;
+  tipContent: string;
+};
+
+export type BeatRateConverterLocaleContent = ToolLocaleContent<BeatRateConverterUI>;
+
+export const beatRateConverter: ChronoToolEntry<BeatRateConverterUI> = {
+  id: 'beat-rate-converter',
+  icons: { bg: 'mdi:tune-variant', fg: 'mdi:sine-wave' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};