@jjlmoya/utils-chrono 1.2.0

package/src/tool/water-resistance-converter/water-resistance-converter.css

@@ -0,0 +1,254 @@
+.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.5rem;
+  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;
+}
+
+.input-unit-group {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.depth-input {
+  flex: 1;
+  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: 1rem;
+  font-weight: 700;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+  -moz-appearance: textfield;
+}
+
+.depth-input::-webkit-inner-spin-button,
+.depth-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.depth-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.unit-select {
+  min-width: 8rem;
+  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.8125rem;
+  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.6rem center;
+  padding-right: 1.75rem;
+}
+
+.unit-select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.conversions-card {
+  background: var(--bg-page);
+  border: 1px solid var(--border-base);
+  border-radius: 1rem;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.conversions-header {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--text-base);
+  opacity: 0.5;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.conversions-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.conv-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  padding: 0.4rem 0.5rem;
+  background: var(--bg-surface);
+  border-radius: 0.5rem;
+}
+
+.conv-label {
+  font-size: 0.65rem;
+  color: var(--text-base);
+  opacity: 0.5;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.conv-value {
+  font-size: 1rem;
+  font-weight: 800;
+  color: var(--accent);
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+}
+
+.rating-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
+  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-base));
+  border-radius: 1rem;
+}
+
+.rating-label {
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--text-base);
+  opacity: 0.5;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.rating-name {
+  font-size: 1.125rem;
+  font-weight: 800;
+  color: var(--accent);
+  text-align: center;
+}
+
+.usage-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.usage-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.625rem 0.75rem;
+  background: var(--bg-page);
+  border: 1px solid var(--border-base);
+  border-radius: 0.75rem;
+  opacity: 0.35;
+  transition: all 0.3s ease;
+}
+
+.usage-card.active {
+  opacity: 1;
+  background: var(--bg-surface);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+
+.usage-icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  border-radius: 50%;
+  color: var(--accent);
+  margin-top: 0.05rem;
+}
+
+.usage-title {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-base);
+  margin-bottom: 0.1rem;
+}
+
+.usage-desc {
+  font-size: 0.7rem;
+  color: var(--text-base);
+  opacity: 0.6;
+  line-height: 1.35;
+}
+
+.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;
+  }
+
+  .input-unit-group {
+    flex-direction: column;
+  }
+
+  .unit-select {
+    min-width: 100%;
+  }
+}

package/src/tool/wrist-presence-calculator/bibliography.astro

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

package/src/tool/wrist-presence-calculator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Horology Design and Proportions Guide',
+    url: 'https://en.wikipedia.org/wiki/Watch_size',
+  },
+  {
+    name: 'The Aesthetics of Watch Sizing',
+    url: 'https://www.nytimes.com/watch-aesthetics',
+  },
+];

package/src/tool/wrist-presence-calculator/client.ts

@@ -0,0 +1,180 @@
+import {
+  calculateCaseToWristRatio,
+  estimateWristWidth,
+  getIdealCaseRange,
+  getRatioClass,
+  getCoverageClass
+} from './utils';
+import { drawFitVisualizer } from './helpers/canvas';
+import { getRatioText, getCoverageText, getVerdictHtml, formatWristValue, formatRecValue } from './helpers/results';
+
+const mainEl = document.querySelector('.tool-main-card') as HTMLElement;
+const ui = mainEl ? JSON.parse(mainEl.dataset.ui || '{}') : {};
+
+const wristCircSlider = document.getElementById('wrist-circumference') as HTMLInputElement;
+const wristCircDisplay = document.getElementById('wrist-circumference-display') as HTMLElement;
+const caseDiamSlider = document.getElementById('case-diameter') as HTMLInputElement;
+const caseDiamDisplay = document.getElementById('case-diameter-display') as HTMLElement;
+const lugToLugSlider = document.getElementById('lug-to-lug') as HTMLInputElement;
+const lugToLugDisplay = document.getElementById('lug-to-lug-display') as HTMLElement;
+const autoEstimateCheckbox = document.getElementById('auto-estimate-width') as HTMLInputElement;
+const customWidthGroup = document.getElementById('custom-width-group') as HTMLElement;
+const wristWidthSlider = document.getElementById('wrist-width') as HTMLInputElement;
+const wristWidthDisplay = document.getElementById('wrist-width-display') as HTMLElement;
+const btnUnitCm = document.getElementById('btn-unit-cm') as HTMLButtonElement;
+const btnUnitIn = document.getElementById('btn-unit-in') as HTMLButtonElement;
+const ratioValEl = document.getElementById('ratio-value') as HTMLElement;
+const ratioVerdictBadge = document.getElementById('ratio-verdict-badge') as HTMLElement;
+const coverageValEl = document.getElementById('coverage-value') as HTMLElement;
+const coverageVerdictBadge = document.getElementById('coverage-verdict-badge') as HTMLElement;
+const verdictDescEl = document.getElementById('verdict-description') as HTMLElement;
+const recClassicCase = document.getElementById('rec-classic-case') as HTMLElement;
+const recClassicLug = document.getElementById('rec-classic-lug') as HTMLElement;
+const recSweetCase = document.getElementById('rec-sweet-case') as HTMLElement;
+const recSweetLug = document.getElementById('rec-sweet-lug') as HTMLElement;
+const recBoldCase = document.getElementById('rec-bold-case') as HTMLElement;
+const recBoldLug = document.getElementById('rec-bold-lug') as HTMLElement;
+const fitCanvas = document.getElementById('fit-canvas') as HTMLCanvasElement;
+
+let unit: 'cm' | 'in' = 'cm';
+
+function getWristCircMm(): number {
+  const val = parseFloat(wristCircSlider.value);
+  return unit === 'in' ? val * 25.4 : val * 10;
+}
+
+function getWristWidthMm(): number {
+  if (autoEstimateCheckbox.checked) {
+    return estimateWristWidth(getWristCircMm());
+  }
+  return parseFloat(wristWidthSlider.value);
+}
+
+function updateInputs() {
+  const circ = parseFloat(wristCircSlider.value);
+  wristCircDisplay.textContent = `${circ.toFixed(1)} ${unit}`;
+
+  const caseD = parseFloat(caseDiamSlider.value);
+  caseDiamDisplay.textContent = formatRecValue(caseD, unit);
+
+  const l2l = parseFloat(lugToLugSlider.value);
+  lugToLugDisplay.textContent = formatRecValue(l2l, unit);
+
+  const wristWMm = getWristWidthMm();
+  const displayVal = formatWristValue(wristWMm, unit);
+
+  if (autoEstimateCheckbox.checked) {
+    customWidthGroup.style.display = 'none';
+    wristWidthDisplay.textContent = `${displayVal} (${ui.estimatedLabel || 'estimated'})`;
+  } else {
+    customWidthGroup.style.display = 'block';
+    wristWidthDisplay.textContent = displayVal;
+  }
+}
+
+function updateRecommendations(circMm: number) {
+  const ideal = getIdealCaseRange(circMm);
+  recClassicCase.textContent = formatRecValue(ideal.min, unit);
+  recClassicLug.textContent = formatRecValue(ideal.maxLugToLug, unit);
+  recSweetCase.textContent = formatRecValue(ideal.sweetSpot, unit);
+  recSweetLug.textContent = formatRecValue(ideal.maxLugToLug, unit);
+  recBoldCase.textContent = formatRecValue(ideal.max, unit);
+  recBoldLug.textContent = formatRecValue(ideal.maxLugToLug, unit);
+}
+
+function updateResults() {
+  const circMm = getWristCircMm();
+  const caseD = parseFloat(caseDiamSlider.value);
+  const l2l = parseFloat(lugToLugSlider.value);
+  const wristW = getWristWidthMm();
+
+  const ratio = calculateCaseToWristRatio(circMm, caseD);
+  ratioValEl.textContent = ratio.toFixed(2);
+  const ratioClass = getRatioClass(ratio);
+  ratioVerdictBadge.className = `verdict-badge ${ratioClass}`;
+  ratioVerdictBadge.textContent = getRatioText(ratioClass, ui);
+
+  const coverage = (l2l / wristW) * 100;
+  coverageValEl.textContent = `${Math.round(coverage)}%`;
+  const coverageClass = getCoverageClass(coverage);
+  coverageVerdictBadge.className = `verdict-badge ${coverageClass}`;
+  coverageVerdictBadge.textContent = getCoverageText(coverageClass, ui);
+
+  verdictDescEl.innerHTML = getVerdictHtml(coverage, ratio, ui);
+  updateRecommendations(circMm);
+}
+
+function triggerDraw() {
+  if (!fitCanvas) return;
+  drawFitVisualizer({
+    canvas: fitCanvas,
+    wristW: getWristWidthMm(),
+    caseD: parseFloat(caseDiamSlider.value),
+    l2l: parseFloat(lugToLugSlider.value),
+    unit,
+    ui
+  });
+}
+
+interface SliderConfig {
+  slider: HTMLInputElement;
+  min: number;
+  max: number;
+  step: number;
+  val: number;
+}
+
+function setupSlider(config: SliderConfig) {
+  config.slider.min = config.min.toString();
+  config.slider.max = config.max.toString();
+  config.slider.step = config.step.toString();
+  config.slider.value = config.val.toFixed(1);
+}
+
+function handleUnitChange(newUnit: 'cm' | 'in') {
+  if (unit === newUnit) return;
+  const prevCircMm = getWristCircMm();
+  unit = newUnit;
+
+  if (unit === 'cm') {
+    btnUnitCm.classList.add('active');
+    btnUnitIn.classList.remove('active');
+    setupSlider({ slider: wristCircSlider, min: 12, max: 24, step: 0.1, val: prevCircMm / 10 });
+  } else {
+    btnUnitCm.classList.remove('active');
+    btnUnitIn.classList.add('active');
+    setupSlider({ slider: wristCircSlider, min: 4.7, max: 9.5, step: 0.1, val: prevCircMm / 25.4 });
+  }
+
+  updateInputs();
+  updateResults();
+  triggerDraw();
+}
+
+btnUnitCm.addEventListener('click', () => handleUnitChange('cm'));
+btnUnitIn.addEventListener('click', () => handleUnitChange('in'));
+
+[wristCircSlider, caseDiamSlider, lugToLugSlider, wristWidthSlider].forEach(input => {
+  input.addEventListener('input', () => {
+    updateInputs();
+    updateResults();
+    triggerDraw();
+  });
+});
+
+autoEstimateCheckbox.addEventListener('change', () => {
+  updateInputs();
+  updateResults();
+  triggerDraw();
+});
+
+window.addEventListener('resize', triggerDraw);
+
+updateInputs();
+updateResults();
+setTimeout(triggerDraw, 100);
+
+const observer = new MutationObserver(() => {
+  triggerDraw();
+});
+observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });

package/src/tool/wrist-presence-calculator/component.astro

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

package/src/tool/wrist-presence-calculator/components/CalculatorInputs.astro

@@ -0,0 +1,97 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="inputs-section">
+  <div class="section-header">
+    <h3>{labels.title || "Wrist Sizing"}</h3>
+    <div class="unit-selector">
+      <button type="button" class="unit-btn active" id="btn-unit-cm">{labels.unitCm || "CM"}</button>
+      <button type="button" class="unit-btn" id="btn-unit-in">{labels.unitInches || "IN"}</button>
+    </div>
+  </div>
+
+  <div class="input-row">
+    <div class="input-group">
+      <div class="input-header">
+        <label class="input-label" for="wrist-circumference">{labels.wristCircumferenceLabel || "Wrist Circumference"}</label>
+        <span class="value-display" id="wrist-circumference-display">17.0 cm</span>
+      </div>
+      <input
+        type="range"
+        id="wrist-circumference"
+        class="slider-control"
+        min="12"
+        max="24"
+        step="0.1"
+        value="17.0"
+      />
+    </div>
+
+    <div class="input-group">
+      <div class="input-header">
+        <label class="input-label" for="case-diameter">{labels.caseDiameterLabel || "Case Diameter"}</label>
+        <span class="value-display" id="case-diameter-display">40 mm</span>
+      </div>
+      <input
+        type="range"
+        id="case-diameter"
+        class="slider-control"
+        min="28"
+        max="52"
+        step="1"
+        value="40"
+      />
+    </div>
+
+    <div class="input-group">
+      <div class="input-header">
+        <label class="input-label" for="lug-to-lug">{labels.lugToLugLabel || "Lug-to-Lug"}</label>
+        <span class="value-display" id="lug-to-lug-display">47 mm</span>
+      </div>
+      <input
+        type="range"
+        id="lug-to-lug"
+        class="slider-control"
+        min="34"
+        max="60"
+        step="1"
+        value="47"
+      />
+    </div>
+
+    <div class="input-group">
+      <div class="toggle-container">
+        <input
+          type="checkbox"
+          id="auto-estimate-width"
+          class="checkbox-control"
+          checked
+        />
+        <label class="toggle-label" for="auto-estimate-width">
+          {labels.autoEstimateWidthLabel || "Auto-estimate flat wrist width (30%)"}
+        </label>
+      </div>
+    </div>
+
+    <div class="input-group" id="custom-width-group" style="display: none;">
+      <div class="input-header">
+        <label class="input-label" for="wrist-width">{labels.wristWidthLabel || "Flat Wrist Width"}</label>
+        <span class="value-display" id="wrist-width-display">51 mm</span>
+      </div>
+      <input
+        type="range"
+        id="wrist-width"
+        class="slider-control"
+        min="30"
+        max="80"
+        step="1"
+        value="51"
+      />
+    </div>
+  </div>
+</div>

package/src/tool/wrist-presence-calculator/components/FitResult.astro

@@ -0,0 +1,68 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="results-wrapper">
+  <div class="results-section">
+    <div class="section-header">
+      <h3>{labels.fitAnalysisTitle || "Wrist Fit Assessment"}</h3>
+    </div>
+
+    <div class="metrics-summary-grid">
+      <div class="metric-box">
+        <span class="metric-lbl">{labels.caseWristRatioLabel || "Case-to-Wrist Ratio"}</span>
+        <span class="metric-val" id="ratio-value">4.25</span>
+        <span class="verdict-badge verdict-golden" id="ratio-verdict-badge">Golden Fit</span>
+      </div>
+
+      <div class="metric-box">
+        <span class="metric-lbl">{labels.wristCoverageLabel || "Wrist Lug Coverage"}</span>
+        <span class="metric-val" id="coverage-value">92%</span>
+        <span class="verdict-badge coverage-bold" id="coverage-verdict-badge">Bold Coverage</span>
+      </div>
+    </div>
+
+    <div class="verdict-box" id="verdict-description">
+      <strong>Rolex Superlative Fit:</strong> Loading recommendation...
+    </div>
+  </div>
+
+  <div class="recommendations-section">
+    <div class="section-header">
+      <h3>{labels.idealSizesTitle || "Ideal Sizing Guidelines"}</h3>
+    </div>
+
+    <div class="recommendations-table-wrapper">
+      <table class="recommendations-table">
+        <thead>
+          <tr>
+            <th>{labels.sweetSpotTitle || "Fit Style"}</th>
+            <th>{labels.caseDiameterLabel || "Case Diameter"}</th>
+            <th>{labels.lugToLugLabel || "Max Lug-to-Lug"}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="rec-target">{labels.minClassicLabel || "Vintage / Classic Fit"}</td>
+            <td class="rec-value" id="rec-classic-case">34.0 mm</td>
+            <td class="rec-value" id="rec-classic-lug">51.0 mm</td>
+          </tr>
+          <tr>
+            <td class="rec-target">{labels.sweetSpotLabel || "Aesthetic Sweet Spot"}</td>
+            <td class="rec-value" id="rec-sweet-case">37.8 mm</td>
+            <td class="rec-value" id="rec-sweet-lug">51.0 mm</td>
+          </tr>
+          <tr>
+            <td class="rec-target">{labels.maxBoldLabel || "Modern / Bold Fit"}</td>
+            <td class="rec-value" id="rec-bold-case">42.5 mm</td>
+            <td class="rec-value" id="rec-bold-lug">51.0 mm</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

package/src/tool/wrist-presence-calculator/components/Visualizer.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="visualizer-section">
+  <div class="section-header">
+    <h3>{labels.visualizerTitle || "Live Fit Simulator"}</h3>
+  </div>
+  <div class="canvas-wrapper">
+    <canvas id="fit-canvas" class="fit-canvas"></canvas>
+  </div>
+</div>