@jjlmoya/utils-chrono 1.2.0

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

@@ -0,0 +1,402 @@
+.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;
+}
+
+.estimator-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-dimmed);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.label-sub {
+  font-size: 0.65rem;
+  color: var(--text-base);
+  opacity: 0.35;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.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);
+}
+
+.input-row {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-end;
+}
+
+.input-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.input-label {
+  font-size: 0.75rem;
+  color: var(--text-dimmed);
+  font-weight: 600;
+}
+
+.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: 2.2rem;
+  padding: 0.5rem 0.4rem;
+  border: none;
+  background: transparent;
+  color: var(--text-dimmed);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+.stepper-btn:hover {
+  background: var(--bg-page);
+  color: var(--accent);
+}
+
+.stepper-btn:active {
+  background: var(--border-base);
+  transform: scale(0.95);
+}
+
+.chip-group {
+  display: flex;
+  gap: 0.25rem;
+  background: var(--bg-page);
+  padding: 0.25rem;
+  border-radius: 2rem;
+  border: 1px solid var(--border-base);
+}
+
+.chip {
+  flex: 1;
+  padding: 0.3rem 0.4rem;
+  border: none;
+  border-radius: 1.5rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  cursor: pointer;
+  background: transparent;
+  color: var(--text-dimmed);
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.chip:hover {
+  color: var(--text-base);
+}
+
+.chip.active {
+  background: var(--accent);
+  color: var(--text-on-primary, #fff);
+}
+
+.calc-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  width: 100%;
+  padding: 0.7rem;
+  border: none;
+  border-radius: 2rem;
+  background: var(--accent);
+  color: var(--text-on-primary, #fff);
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.25);
+}
+
+.calc-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
+}
+
+.calc-btn:active {
+  transform: scale(0.97);
+}
+
+.result-card {
+  background: var(--bg-page);
+  border: 1px solid var(--border-base);
+  border-radius: 1rem;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  animation: fade-slide-in 0.3s ease;
+}
+
+.result-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--accent);
+  font-size: 0.8125rem;
+  font-weight: 700;
+}
+
+.gauge-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.gauge-track {
+  width: 100%;
+  height: 14px;
+  background: var(--border-base);
+  border-radius: 7px;
+  overflow: hidden;
+}
+
+.gauge-fill {
+  height: 100%;
+  border-radius: 6px;
+  transition: width 0.6s ease, background 0.6s ease;
+}
+
+.gauge-marks {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0.1rem;
+}
+
+.gauge-mark {
+  font-size: 0.6rem;
+  font-weight: 700;
+  color: var(--text-base);
+  opacity: 0.4;
+}
+
+.gauge-mark.gauge-danger {
+  color: var(--color-danger, #ef4444);
+  opacity: 0.9;
+  font-weight: 800;
+}
+
+.gauge-mark.gauge-warning {
+  color: var(--color-warning, #f59e0b);
+  opacity: 0.85;
+  font-weight: 800;
+}
+
+.gauge-mark.gauge-ok {
+  color: var(--color-success, #22c55e);
+  opacity: 0.85;
+  font-weight: 800;
+}
+
+.charge-stats {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.charge-stat {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.15rem;
+}
+
+.stat-value {
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: var(--text-base);
+  letter-spacing: -0.02em;
+}
+
+.stat-label {
+  font-size: 0.6rem;
+  font-weight: 600;
+  color: var(--text-dimmed);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  text-align: center;
+}
+
+.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);
+  line-height: 1.4;
+  opacity: 0.85;
+}
+
+.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);
+  line-height: 1.5;
+  opacity: 0.85;
+}
+
+@keyframes fade-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 520px) {
+  .tool-main-card {
+    padding: 1rem;
+    gap: 1.25rem;
+  }
+
+  .input-row {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .charge-stats {
+    flex-wrap: wrap;
+  }
+
+  .charge-stat {
+    min-width: 30%;
+  }
+}

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

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

package/src/tool/strap-taper-calculator/bibliography.astro

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

package/src/tool/strap-taper-calculator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Watch Strap Taper Guide',
+    url: 'https://artemstraps.com/pages/strap-taper-guide',
+  },
+  {
+    name: 'How to Size Your Watch Strap',
+    url: 'https://www.rsmwatchstrap.com/blogs/news/how-to-size-your-watch-strap',
+  }
+];

package/src/tool/strap-taper-calculator/client.ts

@@ -0,0 +1,129 @@
+const mainEl = document.querySelector('.tool-main-card') as HTMLElement;
+const ui = mainEl ? JSON.parse(mainEl.dataset.ui || '{}') : {};
+
+const caseInput = document.getElementById('case-input') as HTMLInputElement;
+const lugInput = document.getElementById('lug-input') as HTMLInputElement;
+const buckleInput = document.getElementById('buckle-input') as HTMLInputElement;
+const taperChips = document.querySelectorAll('.taper-chip') as NodeListOf<HTMLButtonElement>;
+const customSection = document.getElementById('custom-section') as HTMLElement;
+const strapShape = document.getElementById('strap-shape') as SVGPolygonElement;
+const labelLug = document.getElementById('label-lug') as SVGTextElement;
+const labelBuckle = document.getElementById('label-buckle') as SVGTextElement;
+const resultLug = document.getElementById('result-lug') as HTMLElement;
+const resultBuckle = document.getElementById('result-buckle') as HTMLElement;
+const resultTaper = document.getElementById('result-taper') as HTMLElement;
+const resultRatio = document.getElementById('result-ratio') as HTMLElement;
+const scoreBadge = document.getElementById('score-badge') as HTMLElement;
+
+const mm = ui.mmUnit || 'mm';
+const arr = ui.arrow || '\u2192';
+
+let currentTaper = 'straight';
+
+function getTaperBuckle(lug: number, taper: string): number {
+  switch (taper) {
+    case 'straight': return lug;
+    case 'classic': return Math.max(lug - 4, 6);
+    case 'aggressive': return Math.max(lug - 6, 6);
+    case 'custom': return parseInt(buckleInput.value, 10) || lug;
+    default: return lug;
+  }
+}
+
+function isBalanced(r: number, c: number): boolean {
+  return r >= 0.78 && r <= 0.85 && c >= 1.8 && c <= 2.2;
+}
+
+function unbalanced(r: number): boolean {
+  return r > 1 || r < 0.65;
+}
+
+function goodRatio(c: number): boolean {
+  return c >= 1.5 && c <= 2.5;
+}
+
+function getScore(lug: number, buckle: number, caseD: number): { label: string; cls: string } {
+  const r = buckle / lug;
+  const c = caseD / lug;
+  if (unbalanced(r)) return { label: ui.proportionUnbalanced || 'Unbalanced', cls: 'score-unbalanced' };
+  if (isBalanced(r, c)) return { label: ui.proportionExcellent || 'Excellent', cls: 'score-excellent' };
+  if (goodRatio(c)) return { label: ui.proportionGood || 'Good', cls: 'score-good' };
+  return { label: ui.proportionFair || 'Fair', cls: 'score-fair' };
+}
+
+function updateChips(lug: number) {
+  taperChips.forEach((chip) => {
+    const sub = chip.querySelector('.taper-chip-sub') as HTMLElement;
+    if (!sub) return;
+    const t = chip.dataset.taper;
+    const classicBuckle = Math.max(lug - 4, 6);
+    const aggressiveBuckle = Math.max(lug - 6, 6);
+    if (t === 'straight') sub.textContent = lug + ' ' + arr + ' ' + lug + ' ' + mm;
+    else if (t === 'classic') sub.textContent = lug + ' ' + arr + ' ' + classicBuckle + ' ' + mm;
+    else if (t === 'aggressive') sub.textContent = lug + ' ' + arr + ' ' + aggressiveBuckle + ' ' + mm;
+    else if (t === 'custom') sub.textContent = lug + ' ' + arr + ' ? ' + mm;
+  });
+}
+
+function updateSvg(lug: number, buckle: number) {
+  const topW = lug * 3.5;
+  const botW = buckle * 3.5;
+  const cx = 100;
+  const top = 5;
+  const bot = 110;
+  const halfTop = topW / 2;
+  const halfBot = botW / 2;
+  strapShape.setAttribute('points', `${cx - halfTop},${top} ${cx + halfTop},${top} ${cx + halfBot},${bot} ${cx - halfBot},${bot}`);
+  labelLug.textContent = lug + ' ' + mm;
+  labelBuckle.textContent = buckle + ' ' + mm;
+}
+
+function update() {
+  const lug = parseInt(lugInput.value, 10) || 20;
+  const caseD = parseInt(caseInput.value, 10) || 40;
+  const buckle = getTaperBuckle(lug, currentTaper);
+  const taper = lug - buckle;
+  const ratio = lug > 0 ? (buckle / lug) : 0;
+  const score = getScore(lug, buckle, caseD);
+
+  resultLug.textContent = String(lug);
+  resultBuckle.textContent = String(buckle);
+  resultTaper.textContent = String(taper);
+  resultRatio.textContent = ratio.toFixed(2);
+  scoreBadge.textContent = score.label;
+  scoreBadge.className = 'score-badge ' + score.cls;
+
+  updateChips(lug);
+  updateSvg(lug, buckle);
+}
+
+function setTaper(taper: string) {
+  currentTaper = taper;
+  const show = taper === 'custom';
+  customSection.style.display = show ? 'flex' : 'none';
+  taperChips.forEach((c) => c.classList.toggle('active', c.dataset.taper === taper));
+  update();
+}
+
+taperChips.forEach((chip) => {
+  chip.addEventListener('click', () => setTaper(chip.dataset.taper || 'straight'));
+});
+
+document.querySelectorAll('.stepper-btn').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    const target = document.getElementById(btn.getAttribute('data-target') || '') as HTMLInputElement;
+    const step = parseInt(btn.getAttribute('data-step') || '1', 10);
+    const dir = btn.textContent?.includes('+') ? 1 : -1;
+    const val = parseInt(target.value, 10) || 0;
+    const min = parseInt(target.min, 10) || 0;
+    const max = parseInt(target.max, 10) || 100;
+    target.value = String(Math.max(min, Math.min(max, val + dir * Math.abs(step))));
+    update();
+  });
+});
+
+[caseInput, lugInput, buckleInput].forEach((el) => {
+  el.addEventListener('input', update);
+});
+
+setTaper('classic');

package/src/tool/strap-taper-calculator/component.astro

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

package/src/tool/strap-taper-calculator/components/CalculatorPanel.astro

@@ -0,0 +1,114 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="calculator-panel">
+  <div class="panel-section">
+    <div class="section-label">{labels.caseLabel || "Watch Dimensions"}</div>
+    <div class="input-row">
+      <div class="input-group">
+        <label class="input-label" for="case-input">{labels.caseInput || "Case diameter (mm)"}</label>
+        <div class="stepper-wrap">
+          <button type="button" class="stepper-btn" data-target="case-input" data-step="-1">−</button>
+          <input type="number" class="stepper-input" id="case-input" min="20" max="60" value="40" />
+          <button type="button" class="stepper-btn" data-target="case-input" data-step="1">+</button>
+        </div>
+      </div>
+      <div class="input-group">
+        <label class="input-label" for="lug-input">{labels.lugInput || "Lug width (mm)"}</label>
+        <div class="stepper-wrap">
+          <button type="button" class="stepper-btn" data-target="lug-input" data-step="-1">−</button>
+          <input type="number" class="stepper-input" id="lug-input" min="10" max="30" value="20" />
+          <button type="button" class="stepper-btn" data-target="lug-input" data-step="1">+</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="panel-section">
+    <div class="section-label">{labels.taperLabel || "Taper Style"}</div>
+    <div class="taper-chips" id="taper-chips">
+      <button type="button" class="taper-chip active" data-taper="straight">
+        <span class="taper-chip-label">{labels.straight || "Straight"}</span>
+        <span class="taper-chip-sub"></span>
+      </button>
+      <button type="button" class="taper-chip" data-taper="classic">
+        <span class="taper-chip-label">{labels.classic || "Classic"}</span>
+        <span class="taper-chip-sub"></span>
+      </button>
+      <button type="button" class="taper-chip" data-taper="aggressive">
+        <span class="taper-chip-label">{labels.aggressive || "Aggressive"}</span>
+        <span class="taper-chip-sub"></span>
+      </button>
+      <button type="button" class="taper-chip" data-taper="custom">
+        <span class="taper-chip-label">{labels.customTaper || "Custom"}</span>
+        <span class="taper-chip-sub"></span>
+      </button>
+    </div>
+  </div>
+
+  <div class="panel-section" id="custom-section" style="display: none;">
+    <label class="input-label" for="buckle-input">{labels.buckleWidth || "Buckle width (mm)"}</label>
+    <div class="stepper-wrap">
+      <button type="button" class="stepper-btn" data-target="buckle-input" data-step="-1">−</button>
+      <input type="number" class="stepper-input" id="buckle-input" min="6" max="30" value="16" />
+      <button type="button" class="stepper-btn" data-target="buckle-input" data-step="1">+</button>
+    </div>
+  </div>
+
+  <div class="strap-visual" id="strap-visual">
+    <svg viewBox="0 0 200 120" width="200" height="120">
+      <defs>
+        <linearGradient id="strap-gradient" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.8" />
+          <stop offset="100%" stop-color="var(--accent)" stop-opacity="0.4" />
+        </linearGradient>
+      </defs>
+      <polygon id="strap-shape" fill="url(#strap-gradient)" rx="3" />
+      <line id="strap-center" x1="100" y1="5" x2="100" y2="115" stroke="var(--border-base)" stroke-width="1" stroke-dasharray="3,3" opacity="0.4" />
+      <text id="label-lug" x="100" y="15" text-anchor="middle" fill="var(--text-base)" font-size="9" font-weight="700" opacity="0.7">20 mm</text>
+      <text id="label-buckle" x="100" y="112" text-anchor="middle" fill="var(--text-base)" font-size="9" font-weight="700" opacity="0.7">16 mm</text>
+    </svg>
+  </div>
+
+  <div class="result-card" id="result-card">
+    <div class="result-header">{labels.resultsTitle || "Proportions"}</div>
+    <div class="result-grid">
+      <div class="result-item">
+        <span class="result-value" id="result-lug">20</span>
+        <span class="result-unit">mm</span>
+        <span class="result-label">{labels.lugWidth || "Lug width"}</span>
+      </div>
+      <div class="result-item">
+        <span class="result-value" id="result-buckle">16</span>
+        <span class="result-unit">mm</span>
+        <span class="result-label">{labels.buckleWidthResult || "Buckle width"}</span>
+      </div>
+      <div class="result-item">
+        <span class="result-value" id="result-taper">4</span>
+        <span class="result-unit">mm</span>
+        <span class="result-label">{labels.taperAmount || "Taper"}</span>
+      </div>
+      <div class="result-item">
+        <span class="result-value" id="result-ratio">0.80</span>
+        <span class="result-unit">&mdash;</span>
+        <span class="result-label">{labels.taperRatio || "Ratio"}</span>
+      </div>
+    </div>
+    <div class="score-row">
+      <span class="score-label">{labels.proportionScore || "Proportion"}</span>
+      <span class="score-badge" id="score-badge">Excellent</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.noteContent || "A classic taper of 4 mm (e.g., 20 to 16 mm) suits dress watches. Divers and tool watches often look better with a straight or 2 mm taper for a robust feel."}</span>
+  </div>
+</div>