@jjlmoya/utils-chrono 1.2.0

package/src/tool/strap-taper-calculator/strap-taper-calculator.css

@@ -0,0 +1,320 @@
+.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;
+}
+
+.calculator-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-row {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.input-group {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.input-label {
+  font-size: 0.75rem;
+  color: var(--text-base);
+  opacity: 0.6;
+  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;
+  border: none;
+  background: transparent;
+  color: var(--text-base);
+  opacity: 0.5;
+  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);
+  opacity: 1;
+}
+
+.stepper-btn:active {
+  background: var(--border-base);
+  transform: scale(0.95);
+}
+
+.taper-chips {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.375rem;
+}
+
+.taper-chip {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.6rem 0.5rem;
+  border: 1px solid var(--border-base);
+  border-radius: 0.75rem;
+  background: var(--bg-page);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.taper-chip:hover {
+  border-color: var(--accent);
+}
+
+.taper-chip.active {
+  background: var(--bg-surface);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+
+.taper-chip-label {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-base);
+}
+
+.taper-chip-sub {
+  font-size: 0.65rem;
+  color: var(--text-base);
+  opacity: 0.5;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.strap-visual {
+  display: flex;
+  justify-content: center;
+  padding: 0.5rem 0;
+}
+
+.strap-visual svg {
+  display: block;
+}
+
+.strap-visual polygon {
+  transition: all 0.4s ease;
+}
+
+.result-card {
+  background: var(--bg-page);
+  border: 1px solid var(--border-base);
+  border-radius: 1rem;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.result-header {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--text-base);
+  opacity: 0.5;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.result-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.result-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.1rem;
+}
+
+.result-value {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--accent);
+  letter-spacing: -0.02em;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.result-unit {
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--text-base);
+  opacity: 0.5;
+}
+
+.result-label {
+  font-size: 0.6rem;
+  font-weight: 600;
+  color: var(--text-base);
+  opacity: 0.5;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.score-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--border-base);
+}
+
+.score-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-base);
+  opacity: 0.6;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.score-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 2rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.score-excellent {
+  background: color-mix(in srgb, var(--color-success, #22c55e) 15%, transparent);
+  color: var(--color-success, #22c55e);
+  border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 30%, transparent);
+}
+
+.score-good {
+  background: color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent);
+  color: var(--color-warning, #f59e0b);
+  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 30%, transparent);
+}
+
+.score-fair {
+  background: color-mix(in srgb, var(--color-danger, #ef4444) 15%, transparent);
+  color: var(--color-danger, #ef4444);
+  border: 1px solid color-mix(in srgb, var(--color-danger, #ef4444) 30%, transparent);
+}
+
+.score-unbalanced {
+  background: color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent);
+  color: var(--color-warning, #f59e0b);
+  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 30%, transparent);
+}
+
+.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-row {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .taper-chips {
+    grid-template-columns: 1fr 1fr;
+  }
+}

package/src/tool/watch-accuracy-tracker/bibliography.astro

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

package/src/tool/watch-accuracy-tracker/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Contrôle Officiel Suisse des Chronomètres (COSC) Standards',
+    url: 'https://www.cosc.swiss/en',
+  },
+  {
+    name: 'Understanding Mechanical Watch Regulation and Accuracy',
+    url: 'https://en.wikipedia.org/wiki/Mechanical_watch',
+  },
+];

package/src/tool/watch-accuracy-tracker/chart.ts

@@ -0,0 +1,126 @@
+import type { LogEntry } from './logger';
+
+interface Point {
+  x: number;
+  y: number;
+  log: LogEntry;
+}
+
+interface ZeroLineParams {
+  ctx: CanvasRenderingContext2D;
+  minVal: number;
+  valRange: number;
+  padding: { top: number; left: number };
+  graphWidth: number;
+  graphHeight: number;
+}
+
+function drawBackgroundAndMessage(
+  ctx: CanvasRenderingContext2D,
+  w: number,
+  h: number,
+  logs: LogEntry[]
+): boolean {
+  ctx.fillStyle = '#0f172a';
+  ctx.fillRect(0, 0, w, h);
+
+  if (logs.length < 2) {
+    ctx.fillStyle = '#94a3b8';
+    ctx.font = '12px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('Add at least 2 logs to visualize trend', w / 2, h / 2);
+    return true;
+  }
+  return false;
+}
+
+function drawZeroLine(params: ZeroLineParams) {
+  const { ctx, minVal, valRange, padding, graphWidth, graphHeight } = params;
+  ctx.strokeStyle = '#334155';
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  const zeroY = padding.top + graphHeight * (1 - (0 - minVal) / valRange);
+  if (zeroY >= padding.top && zeroY <= padding.top + graphHeight) {
+    ctx.moveTo(padding.left, zeroY);
+    ctx.lineTo(padding.left + graphWidth, zeroY);
+    ctx.stroke();
+    ctx.fillStyle = '#64748b';
+    ctx.font = '10px monospace';
+    ctx.textAlign = 'right';
+    ctx.fillText('0s', padding.left - 8, zeroY + 3);
+  }
+}
+
+function drawLineTrend(ctx: CanvasRenderingContext2D, points: Point[]) {
+  ctx.strokeStyle = '#f43f5e';
+  ctx.lineWidth = 2.5;
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+  ctx.beginPath();
+  points.forEach((p, i) => {
+    if (i === 0) {
+      ctx.moveTo(p.x, p.y);
+    } else {
+      ctx.lineTo(p.x, p.y);
+    }
+  });
+  ctx.stroke();
+}
+
+function drawPoints(ctx: CanvasRenderingContext2D, points: Point[]) {
+  points.forEach(p => {
+    ctx.fillStyle = '#10b981';
+    ctx.strokeStyle = '#0f172a';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, 5, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.stroke();
+
+    const entry = p.log;
+    if (entry.position) {
+      ctx.fillStyle = '#94a3b8';
+      ctx.font = '8px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(entry.position, p.x, p.y - 8);
+    }
+  });
+}
+
+export function drawTrendChart(canvas: HTMLCanvasElement, logs: LogEntry[]) {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  const rect = canvas.getBoundingClientRect();
+  canvas.width = rect.width * window.devicePixelRatio;
+  canvas.height = 180 * window.devicePixelRatio;
+  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
+  const w = rect.width;
+  const h = 180;
+
+  if (drawBackgroundAndMessage(ctx, w, h, logs)) return;
+
+  const offsets = logs.map(l => l.offset);
+  const minVal = Math.min(...offsets, -5) - 2;
+  const maxVal = Math.max(...offsets, 5) + 2;
+  const valRange = maxVal - minVal;
+
+  const times = logs.map(l => new Date(l.date).getTime());
+  const timeRange = times[times.length - 1] - times[0] || 1;
+
+  const padding = { top: 20, right: 30, bottom: 25, left: 40 };
+  const graphWidth = w - padding.left - padding.right;
+  const graphHeight = h - padding.top - padding.bottom;
+
+  drawZeroLine({ ctx, minVal, valRange, padding, graphWidth, graphHeight });
+
+  const points = logs.map((log, i) => {
+    const x = padding.left + ((times[i] - times[0]) / timeRange) * graphWidth;
+    const y = padding.top + graphHeight * (1 - (log.offset - minVal) / valRange);
+    return { x, y, log };
+  });
+
+  drawLineTrend(ctx, points);
+  drawPoints(ctx, points);
+}