@jjlmoya/utils-chrono 1.5.0 → 1.7.0

package/src/tool/service-interval-tracker/utils.ts

@@ -0,0 +1,58 @@
+export interface WatchEntry {
+  id: string;
+  name: string;
+  movement: 'automatic' | 'manual' | 'quartz' | 'kinetic';
+  lastService: string | null;
+  intervalYears: number;
+  notes: string;
+  createdAt: string;
+}
+
+export type WatchStatus = 'healthy' | 'due' | 'overdue' | 'unknown';
+export type MovementType = 'automatic' | 'manual' | 'quartz' | 'kinetic';
+
+export function generateId(): string {
+  return crypto.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export function getStatus(w: WatchEntry): WatchStatus {
+  if (!w.lastService) return 'unknown';
+  const last = new Date(w.lastService).getTime();
+  const next = last + w.intervalYears * 31536000000;
+  const now = Date.now();
+  const sixMonths = 180 * 86400000;
+  if (next < now) return 'overdue';
+  if (next - now < sixMonths) return 'due';
+  return 'healthy';
+}
+
+export function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+export function daysFrom(iso: string): number {
+  return Math.round((Date.now() - new Date(iso).getTime()) / 86400000);
+}
+
+export function progressPct(w: WatchEntry): number {
+  if (!w.lastService) return 0;
+  const elapsed = Date.now() - new Date(w.lastService).getTime();
+  const total = w.intervalYears * 31536000000;
+  return Math.min(100, Math.round((elapsed / total) * 100));
+}
+
+export function nextServiceDate(w: WatchEntry): string | null {
+  if (!w.lastService) return null;
+  const d = new Date(new Date(w.lastService).getTime() + w.intervalYears * 31536000000);
+  return d.toISOString().split('T')[0];
+}
+
+export function movementIcon(type: MovementType): string {
+  const icons: Record<MovementType, string> = {
+    automatic: '\u2699',
+    manual: '\u23F0',
+    quartz: '\u26A1',
+    kinetic: '\u21BB',
+  };
+  return icons[type] || '\u2699';
+}

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>

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

@@ -0,0 +1,265 @@
+function createSvgElement(tag: string, attrs: Record<string, string>): SVGElement {
+  const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
+  Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
+  return el;
+}
+
+export interface FlatLayoutParams {
+  svg: SVGSVGElement;
+  wrist: number;
+  lug: number;
+  totalStrap: number;
+  bespokeLong: number;
+  bespokeShort: number;
+}
+
+function drawShortStrap(
+  svg: SVGSVGElement,
+  startX: number,
+  centerY: number,
+  shortWidth: number,
+): void {
+  svg.appendChild(createSvgElement('rect', {
+    x: startX.toString(),
+    y: (centerY - 12).toString(),
+    width: shortWidth.toString(),
+    height: '24',
+    rx: '4',
+    fill: 'rgba(160, 110, 80, 0.85)',
+    stroke: 'rgba(160, 110, 80, 0.95)',
+    'stroke-width': '1.5',
+  }));
+  svg.appendChild(createSvgElement('rect', {
+    x: (startX - 14).toString(),
+    y: (centerY - 16).toString(),
+    width: '14',
+    height: '32',
+    rx: '3',
+    fill: 'var(--border-color, #ccc)',
+    stroke: 'var(--text-base, #888)',
+    'stroke-width': '1.5',
+  }));
+}
+
+function drawWatchCase(
+  svg: SVGSVGElement,
+  watchX: number,
+  centerY: number,
+  watchWidth: number,
+): void {
+  svg.appendChild(createSvgElement('rect', {
+    x: watchX.toString(),
+    y: (centerY - 22).toString(),
+    width: watchWidth.toString(),
+    height: '44',
+    rx: '22',
+    fill: 'rgba(230, 230, 235, 0.15)',
+    stroke: 'var(--border-color, #bbb)',
+    'stroke-width': '2',
+  }));
+  svg.appendChild(createSvgElement('circle', {
+    cx: (watchX + watchWidth / 2).toString(),
+    cy: centerY.toString(),
+    r: '16',
+    fill: 'rgba(255, 255, 255, 0.05)',
+    stroke: 'var(--border-color, #bbb)',
+    'stroke-width': '1.5',
+  }));
+}
+
+function drawLongStrap(
+  svg: SVGSVGElement,
+  longX: number,
+  centerY: number,
+  longWidth: number,
+): void {
+  svg.appendChild(createSvgElement('rect', {
+    x: longX.toString(),
+    y: (centerY - 12).toString(),
+    width: longWidth.toString(),
+    height: '24',
+    rx: '4',
+    fill: 'rgba(160, 110, 80, 0.85)',
+    stroke: 'rgba(160, 110, 80, 0.95)',
+    'stroke-width': '1.5',
+  }));
+}
+
+function drawStrapHoles(
+  svg: SVGSVGElement,
+  longX: number,
+  centerY: number,
+  holeParams: { scale: number; longWidth: number },
+): void {
+  const holeCount = 7;
+  const holeSpacing = 6.5 * holeParams.scale;
+  const firstHoleOffset = 35 * holeParams.scale;
+  for (let i = 0; i < holeCount; i++) {
+    const hx = longX + firstHoleOffset + (i * holeSpacing);
+    if (hx < longX + holeParams.longWidth - 8) {
+      svg.appendChild(createSvgElement('circle', {
+        cx: hx.toString(),
+        cy: centerY.toString(),
+        r: '2',
+        fill: 'rgba(0, 0, 0, 0.4)',
+      }));
+    }
+  }
+}
+
+function drawPinIndicator(
+  svg: SVGSVGElement,
+  pinX: number,
+  label: string,
+): void {
+  svg.appendChild(createSvgElement('line', {
+    x1: pinX.toString(),
+    y1: '15',
+    x2: pinX.toString(),
+    y2: '105',
+    stroke: 'var(--accent, #f43f5e)',
+    'stroke-width': '2',
+    'stroke-dasharray': '4 3',
+  }));
+  const pinLabel = createSvgElement('text', {
+    x: pinX.toString(),
+    y: '10',
+    fill: 'var(--accent, #f43f5e)',
+    'font-size': '10',
+    'font-weight': '700',
+    'text-anchor': 'middle',
+  });
+  pinLabel.textContent = label;
+  svg.appendChild(pinLabel);
+}
+
+export function drawFlatLayout(params: FlatLayoutParams): void {
+  const { svg, lug, bespokeLong, bespokeShort, totalStrap } = params;
+  svg.innerHTML = '';
+
+  const scale = 2.2;
+  const centerY = 60;
+  const watchWidth = lug * scale;
+  const shortWidth = bespokeShort * scale;
+  const longWidth = bespokeLong * scale;
+
+  const startX = 300 - (watchWidth / 2) - shortWidth;
+  const watchX = startX + shortWidth;
+  const longX = watchX + watchWidth;
+
+  drawShortStrap(svg, startX, centerY, shortWidth);
+  drawWatchCase(svg, watchX, centerY, watchWidth);
+  drawLongStrap(svg, longX, centerY, longWidth);
+  drawStrapHoles(svg, longX, centerY, { scale, longWidth });
+
+  const pinDistance = totalStrap - bespokeShort;
+  const pinX = longX + (pinDistance * scale);
+  drawPinIndicator(svg, pinX, 'Active Fit');
+}
+
+function drawWristBackground(
+  svg: SVGSVGElement,
+  cx: number,
+  cy: number,
+  dims: { rx: number; ry: number },
+): void {
+  svg.appendChild(createSvgElement('ellipse', {
+    cx: cx.toString(),
+    cy: cy.toString(),
+    rx: dims.rx.toString(),
+    ry: dims.ry.toString(),
+    fill: 'rgba(230, 230, 235, 0.05)',
+    stroke: 'var(--border-color, #ccc)',
+    'stroke-width': '1.5',
+    'stroke-dasharray': '4 4',
+  }));
+}
+
+function drawWristWatchHead(
+  svg: SVGSVGElement,
+  cx: number,
+  watchParams: { watchX: number; watchY: number; watchWidth: number },
+): void {
+  const { watchX, watchY, watchWidth } = watchParams;
+  svg.appendChild(createSvgElement('rect', {
+    x: watchX.toString(),
+    y: (watchY - 6).toString(),
+    width: watchWidth.toString(),
+    height: '12',
+    rx: '3',
+    fill: 'rgba(230, 230, 235, 0.15)',
+    stroke: 'var(--border-color, #bbb)',
+    'stroke-width': '2',
+  }));
+  svg.appendChild(createSvgElement('ellipse', {
+    cx: cx.toString(),
+    cy: (watchY - 6).toString(),
+    rx: (watchWidth * 0.35).toString(),
+    ry: '5',
+    fill: 'rgba(255, 255, 255, 0.05)',
+    stroke: 'var(--border-color, #bbb)',
+    'stroke-width': '1.5',
+  }));
+}
+
+function drawWristStraps(
+  svg: SVGSVGElement,
+  cx: number,
+  cy: number,
+  strapParams: { watchX: number; watchY: number; watchWidth: number; rx: number; ry: number },
+): void {
+  const { watchX, watchY, watchWidth, rx, ry } = strapParams;
+  svg.appendChild(createSvgElement('path', {
+    d: `M ${watchX} ${watchY} Q ${cx - rx - 10} ${cy - 10} ${cx} ${cy + ry}`,
+    fill: 'none',
+    stroke: 'rgba(160, 110, 80, 0.85)',
+    'stroke-width': '4',
+  }));
+  svg.appendChild(createSvgElement('path', {
+    d: `M ${watchX + watchWidth} ${watchY} Q ${cx + rx + 10} ${cy - 10} ${cx} ${cy + ry}`,
+    fill: 'none',
+    stroke: 'rgba(160, 110, 80, 0.85)',
+    'stroke-width': '4',
+  }));
+}
+
+function drawWristBuckle(
+  svg: SVGSVGElement,
+  cx: number,
+  cy: number,
+  ry: number,
+): void {
+  svg.appendChild(createSvgElement('rect', {
+    x: (cx - 6).toString(),
+    y: (cy + ry - 4).toString(),
+    width: '12',
+    height: '8',
+    rx: '1.5',
+    fill: 'var(--border-color, #ccc)',
+    stroke: 'var(--text-base, #888)',
+    'stroke-width': '1',
+  }));
+}
+
+export function drawWristProfile(
+  svg: SVGSVGElement,
+  wrist: number,
+  lug: number,
+): void {
+  svg.innerHTML = '';
+
+  const cx = 150;
+  const cy = 100;
+  const rx = 85;
+  const ry = 52;
+
+  drawWristBackground(svg, cx, cy, { rx, ry });
+
+  const watchY = cy - ry;
+  const watchWidth = Math.min(80, lug * 1.5);
+  const watchX = cx - watchWidth / 2;
+
+  drawWristWatchHead(svg, cx, { watchX, watchY, watchWidth });
+  drawWristStraps(svg, cx, cy, { watchX, watchY, watchWidth, rx, ry });
+  drawWristBuckle(svg, cx, cy, ry);
+}