@jjlmoya/utils-chrono 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-chrono",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -12,6 +12,7 @@ import { lumeColorSimulator } from '../tool/lume-color-simulator/entry';
 import { moonPhaseVisualizer } from '../tool/moon-phase-visualizer/entry';
 import { tachymeterCalculator } from '../tool/tachymeter-calculator/entry';
 import { serviceIntervalTracker } from '../tool/service-interval-tracker/entry';
+import { strapLengthCalculator } from '../tool/strap-length-calculator/entry';
 
 export const chronoCategory: ChronoCategoryEntry = {
   icon: 'mdi:clock-outline',
@@ -29,6 +30,7 @@ export const chronoCategory: ChronoCategoryEntry = {
     moonPhaseVisualizer,
     tachymeterCalculator,
     serviceIntervalTracker,
+    strapLengthCalculator,
   ],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),

package/src/entries.ts

@@ -26,6 +26,8 @@ export { tachymeterCalculator } from './tool/tachymeter-calculator/entry';
 export type { TachymeterCalculatorUI, TachymeterCalculatorLocaleContent } from './tool/tachymeter-calculator/entry';
 export { serviceIntervalTracker } from './tool/service-interval-tracker/entry';
 export type { ServiceIntervalTrackerUI, ServiceIntervalTrackerLocaleContent } from './tool/service-interval-tracker/entry';
+export { strapLengthCalculator } from './tool/strap-length-calculator/entry';
+export type { StrapLengthCalculatorUI, StrapLengthCalculatorLocaleContent } from './tool/strap-length-calculator/entry';
 export { chronoCategory } from './category';
 
 import { watchAccuracyTracker } from './tool/watch-accuracy-tracker/entry';
@@ -42,6 +44,7 @@ import { lumeColorSimulator } from './tool/lume-color-simulator/entry';
 import { moonPhaseVisualizer } from './tool/moon-phase-visualizer/entry';
 import { tachymeterCalculator } from './tool/tachymeter-calculator/entry';
 import { serviceIntervalTracker } from './tool/service-interval-tracker/entry';
+import { strapLengthCalculator } from './tool/strap-length-calculator/entry';
 
-export const ALL_ENTRIES = [watchAccuracyTracker, wristPresenceCalculator, demagnetizingTimer, watchSavingsPlanner, crownReferenceGuide, powerReserveEstimator, beatRateConverter, waterResistanceConverter, strapTaperCalculator, watchSizeComparator, lumeColorSimulator, moonPhaseVisualizer, tachymeterCalculator, serviceIntervalTracker];
+export const ALL_ENTRIES = [watchAccuracyTracker, wristPresenceCalculator, demagnetizingTimer, watchSavingsPlanner, crownReferenceGuide, powerReserveEstimator, beatRateConverter, waterResistanceConverter, strapTaperCalculator, watchSizeComparator, lumeColorSimulator, moonPhaseVisualizer, tachymeterCalculator, serviceIntervalTracker, strapLengthCalculator];
 

package/src/index.ts

@@ -14,6 +14,7 @@ export { lumeColorSimulator, LUME_COLOR_SIMULATOR_TOOL } from './tool/lume-color
 export { moonPhaseVisualizer, MOON_PHASE_VISUALIZER_TOOL } from './tool/moon-phase-visualizer';
 export { tachymeterCalculator, TACHYMETER_CALCULATOR_TOOL } from './tool/tachymeter-calculator';
 export { serviceIntervalTracker, SERVICE_INTERVAL_TRACKER_TOOL } from './tool/service-interval-tracker';
+export { strapLengthCalculator, STRAP_LENGTH_CALCULATOR_TOOL } from './tool/strap-length-calculator';
 
 export type {
   KnownLocale,

package/src/tests/locale_completeness.test.ts

@@ -22,7 +22,7 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(14);
+    expect(ALL_TOOLS.length).toBe(15);
   });
 
 });

package/src/tests/tool_validation.test.ts

@@ -5,7 +5,7 @@ import { chronoCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(14);
+      expect(ALL_TOOLS.length).toBe(15);
     });
 
 

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

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

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

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Delugs Watch Strap Size Guide',
+    url: 'https://delugs.com/pages/strap-length-guide',
+  },
+  {
+    name: 'Strapcode Watch Band Size Guide',
+    url: 'https://www.strapcode.com/pages/watchband-size-guide',
+  },
+];

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

@@ -0,0 +1,151 @@
+import { calculateStrap, toMillimeters, formatLength } from './helpers';
+import { drawFlatLayout, drawWristProfile } from './drawing';
+
+const container = document.querySelector('.str') as HTMLElement;
+const UI = JSON.parse(container.dataset.ui || '{}');
+
+const wristIn = document.getElementById('str-wrist') as HTMLInputElement;
+const lugIn = document.getElementById('str-lug') as HTMLInputElement;
+const fitIn = document.getElementById('str-fit') as HTMLSelectElement;
+const unitIn = document.getElementById('str-unit') as HTMLSelectElement;
+const wristUnitLabel = document.getElementById('str-wrist-unit-label') as HTMLElement;
+
+const standardVal = document.getElementById('str-standard-val') as HTMLElement;
+const standardDesc = document.getElementById('str-standard-desc') as HTMLElement;
+const bespokeLong = document.getElementById('str-bespoke-long') as HTMLElement;
+const bespokeShort = document.getElementById('str-bespoke-short') as HTMLElement;
+const natoVal = document.getElementById('str-nato-val') as HTMLElement;
+
+const svgFlat = document.getElementById('str-svg-flat') as unknown as SVGSVGElement;
+const svgWrist = document.getElementById('str-svg-wrist') as unknown as SVGSVGElement;
+
+const STORAGE_KEY = 'jjlmoya_chrono_strap_calc';
+
+let currentUnit: 'mm' | 'in' = 'mm';
+
+interface StrapState {
+  wrist: string;
+  lug: string;
+  fit: string;
+  unit: string;
+}
+
+function saveState(): void {
+  const state: StrapState = {
+    wrist: wristIn.value,
+    lug: lugIn.value,
+    fit: fitIn.value,
+    unit: unitIn.value,
+  };
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+}
+
+function setUnitDisplay(unit: 'mm' | 'in'): void {
+  currentUnit = unit;
+  if (unit === 'in') {
+    wristIn.min = '4.5';
+    wristIn.max = '9.5';
+    wristIn.step = '0.05';
+    wristUnitLabel.textContent = UI.inches || 'in';
+  } else {
+    wristIn.min = '110';
+    wristIn.max = '240';
+    wristIn.step = '1';
+    wristUnitLabel.textContent = UI.millimeters || 'mm';
+  }
+}
+
+function loadState(): void {
+  let raw: string | null;
+  try {
+    raw = localStorage.getItem(STORAGE_KEY);
+  } catch {
+    return;
+  }
+  if (!raw) return;
+  let state: StrapState;
+  try {
+    state = JSON.parse(raw);
+  } catch {
+    return;
+  }
+
+  const fits = ['tight', 'regular', 'loose'] as const;
+  const units = ['mm', 'in'] as const;
+  if (state.wrist) wristIn.value = state.wrist;
+  if (state.lug) lugIn.value = state.lug;
+  if (fits.includes(state.fit as typeof fits[number])) fitIn.value = state.fit;
+  if (units.includes(state.unit as typeof units[number])) {
+    unitIn.value = state.unit;
+    setUnitDisplay(state.unit);
+  }
+}
+
+function update() {
+  const wrist = parseFloat(wristIn.value) || 170;
+  const lug = parseFloat(lugIn.value) || 45;
+  const fit = fitIn.value as 'tight' | 'regular' | 'loose';
+  const unit = unitIn.value as 'mm' | 'in';
+
+  const res = calculateStrap({ wrist, lug, fit, unit });
+
+  standardVal.textContent = res.standardText;
+  standardDesc.textContent = UI[`size${res.sizeKey.toUpperCase()}`] || res.sizeKey;
+  bespokeLong.textContent = formatLength(res.bespokeLong, unit);
+  bespokeShort.textContent = formatLength(res.bespokeShort, unit);
+  natoVal.textContent = res.natoText;
+
+  const wristMm = toMillimeters(wrist, unit);
+  let fitAllowance = 37;
+  if (fit === 'tight') {
+    fitAllowance = 32;
+  } else if (fit === 'loose') {
+    fitAllowance = 42;
+  }
+  const totalStrap = wristMm - lug + fitAllowance;
+
+  drawFlatLayout({
+    svg: svgFlat,
+    wrist: wristMm,
+    lug,
+    totalStrap,
+    bespokeLong: res.bespokeLong,
+    bespokeShort: res.bespokeShort,
+  });
+  drawWristProfile(svgWrist, wristMm, lug);
+
+  saveState();
+}
+
+function handleUnitChange() {
+  const nextUnit = unitIn.value as 'mm' | 'in';
+  if (nextUnit === currentUnit) {
+    return;
+  }
+
+  const prevVal = parseFloat(wristIn.value) || 170;
+  if (nextUnit === 'in') {
+    wristIn.min = '4.5';
+    wristIn.max = '9.5';
+    wristIn.step = '0.05';
+    wristIn.value = (prevVal / 25.4).toFixed(2);
+    wristUnitLabel.textContent = UI.inches || 'in';
+  } else {
+    wristIn.min = '110';
+    wristIn.max = '240';
+    wristIn.step = '1';
+    wristIn.value = Math.round(prevVal * 25.4).toString();
+    wristUnitLabel.textContent = UI.millimeters || 'mm';
+  }
+
+  currentUnit = nextUnit;
+  update();
+}
+
+wristIn.addEventListener('input', update);
+lugIn.addEventListener('input', update);
+fitIn.addEventListener('change', update);
+unitIn.addEventListener('change', handleUnitChange);
+
+loadState();
+update();

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

@@ -0,0 +1,46 @@
+---
+import CalculatorInputs from './components/CalculatorInputs.astro';
+import Visualizer from './components/Visualizer.astro';
+import BespokeResults from './components/BespokeResults.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="str" data-ui={JSON.stringify(ui)}>
+  <header class="str-top">
+    <h2 class="str-h">{ui.title || "Strap Length Calculator"}</h2>
+  </header>
+
+  <div class="str-body">
+    <CalculatorInputs
+      wristLabel={ui.wristLabel || "Wrist circumference"}
+      wristPlaceholder={ui.wristPlaceholder || "e.g. 170"}
+      lugLabel={ui.lugLabel || "Watch lug-to-lug"}
+      lugPlaceholder={ui.lugPlaceholder || "e.g. 45"}
+      fitLabel={ui.fitLabel || "Preferred fit"}
+      fitTight={ui.fitTight || "Tight"}
+      fitRegular={ui.fitRegular || "Regular"}
+      fitLoose={ui.fitLoose || "Loose"}
+      unitLabel={ui.unitLabel || "Unit"}
+      millimeters={ui.millimeters || "mm"}
+      inches={ui.inches || "in"}
+    />
+
+    <Visualizer />
+
+    <BespokeResults
+      standardLabel={ui.standardLabel || "Standard retail size"}
+      bespokeLabel={ui.bespokeLabel || "Bespoke custom size"}
+      natoLabel={ui.natoLabel || "NATO strap length"}
+      longSide={ui.longSide || "Long side"}
+      shortSide={ui.shortSide || "Short side"}
+      totalLength={ui.totalLength || "Total length"}
+    />
+  </div>
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/strap-length-calculator/components/BespokeResults.astro

@@ -0,0 +1,60 @@
+---
+interface Props {
+  standardLabel: string;
+  bespokeLabel: string;
+  natoLabel: string;
+  longSide: string;
+  shortSide: string;
+  totalLength: string;
+}
+
+const {
+  standardLabel,
+  bespokeLabel,
+  natoLabel,
+  longSide,
+  shortSide,
+} = Astro.props;
+---
+
+<div class="str-results">
+  <div class="str-result-card">
+    <div class="str-result-icon">
+      <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+    </div>
+    <div class="str-result-info">
+      <span class="str-result-title">{standardLabel}</span>
+      <span class="str-result-value" id="str-standard-val">—</span>
+      <span class="str-result-desc" id="str-standard-desc">—</span>
+    </div>
+  </div>
+
+  <div class="str-result-card str-result-bespoke">
+    <div class="str-result-icon">
+      <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
+    </div>
+    <div class="str-result-info">
+      <span class="str-result-title">{bespokeLabel}</span>
+      <div class="str-result-split-values">
+        <div class="str-split-item">
+          <span class="str-split-lbl">{longSide}</span>
+          <span class="str-split-val" id="str-bespoke-long">—</span>
+        </div>
+        <div class="str-split-item">
+          <span class="str-split-lbl">{shortSide}</span>
+          <span class="str-split-val" id="str-bespoke-short">—</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="str-result-card">
+    <div class="str-result-icon">
+      <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
+    </div>
+    <div class="str-result-info">
+      <span class="str-result-title">{natoLabel}</span>
+      <span class="str-result-value" id="str-nato-val">—</span>
+    </div>
+  </div>
+</div>

package/src/tool/strap-length-calculator/components/CalculatorInputs.astro

@@ -0,0 +1,64 @@
+---
+interface Props {
+  wristLabel: string;
+  wristPlaceholder: string;
+  lugLabel: string;
+  lugPlaceholder: string;
+  fitLabel: string;
+  fitTight: string;
+  fitRegular: string;
+  fitLoose: string;
+  unitLabel: string;
+  millimeters: string;
+  inches: string;
+}
+
+const {
+  wristLabel,
+  wristPlaceholder,
+  lugLabel,
+  lugPlaceholder,
+  fitLabel,
+  fitTight,
+  fitRegular,
+  fitLoose,
+  unitLabel,
+  millimeters,
+  inches,
+} = Astro.props;
+---
+
+<div class="str-inputs">
+  <div class="str-field">
+    <label class="str-label" for="str-wrist">{wristLabel}</label>
+    <div class="str-input-wrapper">
+      <input class="str-input" id="str-wrist" type="number" min="100" max="300" step="1" value="170" placeholder={wristPlaceholder} />
+      <span class="str-input-unit" id="str-wrist-unit-label">{millimeters}</span>
+    </div>
+  </div>
+
+  <div class="str-field">
+    <label class="str-label" for="str-lug">{lugLabel}</label>
+    <div class="str-input-wrapper">
+      <input class="str-input" id="str-lug" type="number" min="20" max="70" step="1" value="45" placeholder={lugPlaceholder} />
+      <span class="str-input-unit">{millimeters}</span>
+    </div>
+  </div>
+
+  <div class="str-field">
+    <label class="str-label" for="str-fit">{fitLabel}</label>
+    <select class="str-input str-select" id="str-fit">
+      <option value="tight">{fitTight}</option>
+      <option value="regular" selected>{fitRegular}</option>
+      <option value="loose">{fitLoose}</option>
+    </select>
+  </div>
+
+  <div class="str-field">
+    <label class="str-label" for="str-unit">{unitLabel}</label>
+    <select class="str-input str-select" id="str-unit">
+      <option value="mm" selected>{millimeters}</option>
+      <option value="in">{inches}</option>
+    </select>
+  </div>
+</div>

package/src/tool/strap-length-calculator/components/Visualizer.astro

@@ -0,0 +1,8 @@
+<div class="str-visualizer-container">
+  <div class="str-vis-block">
+    <svg id="str-svg-flat" viewBox="0 0 600 120" width="100%" height="auto" class="str-svg"></svg>
+  </div>
+  <div class="str-vis-block">
+    <svg id="str-svg-wrist" viewBox="0 0 300 200" width="100%" height="auto" class="str-svg"></svg>
+  </div>
+</div>