@jjlmoya/utils-chrono 1.2.0

package/src/tool/crown-reference-guide/seo.astro

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

package/src/tool/demagnetizing-timer/bibliography.astro

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

package/src/tool/demagnetizing-timer/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'How to Demagnetize a Watch Movement',
+    url: 'https://en.wikipedia.org/wiki/Demagnetization',
+  },
+  {
+    name: 'How to Demagnetize A Watch',
+    url: 'https://teddybaldassarre.com/en-int/blogs/watches/how-to-demagnetize-a-watch',
+  },
+];

package/src/tool/demagnetizing-timer/client.ts

@@ -0,0 +1,221 @@
+import { MagneticField } from './helpers/field';
+
+const mainEl = document.querySelector('.tool-main-card') as HTMLElement;
+const ui = mainEl ? JSON.parse(mainEl.dataset.ui || '{}') : {};
+
+let duration = 1;
+let elapsed = 0;
+let running = false;
+let animFrameId: number | null = null;
+let startTimestamp: number | null = null;
+
+const fieldCanvas = document.getElementById('field-canvas') as HTMLCanvasElement;
+const field = new MagneticField(fieldCanvas);
+
+const circle = document.getElementById('timer-circle') as HTMLElement;
+const glowRing = document.getElementById('timer-glow-ring') as HTMLElement;
+const progressRing = document.getElementById('timer-progress-ring') as SVGElement;
+const timerValue = document.getElementById('timer-value') as HTMLElement;
+const timerStatus = document.getElementById('timer-status') as HTMLElement;
+const startBtn = document.getElementById('start-btn') as HTMLButtonElement;
+const stopBtn = document.getElementById('stop-btn') as HTMLButtonElement;
+const resetBtn = document.getElementById('reset-btn') as HTMLButtonElement;
+const chips = document.querySelectorAll('.chip') as NodeListOf<HTMLButtonElement>;
+
+const circumference = 326.73;
+let audioCtx: AudioContext | null = null;
+
+function getAudioContext(): AudioContext {
+  if (!audioCtx) {
+    audioCtx = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)();
+  }
+  return audioCtx;
+}
+
+function playBeep(frequency: number, durationMs: number, volume = 0.25, type: OscillatorType = 'sine') {
+  try {
+    const ctx = getAudioContext();
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.type = type;
+    osc.frequency.value = frequency;
+    gain.gain.value = volume;
+    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + durationMs / 1000);
+    osc.connect(gain);
+    gain.connect(ctx.destination);
+    osc.start(ctx.currentTime);
+    osc.stop(ctx.currentTime + durationMs / 1000);
+  } catch {
+  }
+}
+
+function playStartBeep() {
+  playBeep(523, 80, 0.2);
+  setTimeout(() => playBeep(659, 80, 0.2), 80);
+  setTimeout(() => playBeep(784, 120, 0.25), 160);
+}
+
+function playEndBeep() {
+  playBeep(784, 100, 0.25);
+  setTimeout(() => playBeep(659, 100, 0.2), 100);
+  setTimeout(() => playBeep(523, 200, 0.25), 200);
+}
+
+function playTickBeep() {
+  playBeep(880, 30, 0.12);
+}
+
+let pulseAnimFrame: number | null = null;
+
+function startPulseAnimation() {
+  let phase = 0;
+  const step = 0.05;
+
+  function tick() {
+    phase += step;
+    const s = 1 + Math.sin(phase * Math.PI * 2) * 0.02;
+    glowRing.style.transform = `translate(-50%, -50%) scale(${s})`;
+    glowRing.style.opacity = String(0.3 + Math.sin(phase * Math.PI * 2) * 0.15);
+    pulseAnimFrame = requestAnimationFrame(tick);
+  }
+
+  if (pulseAnimFrame) cancelAnimationFrame(pulseAnimFrame);
+  pulseAnimFrame = requestAnimationFrame(tick);
+}
+
+function stopPulseAnimation() {
+  if (pulseAnimFrame) {
+    cancelAnimationFrame(pulseAnimFrame);
+    pulseAnimFrame = null;
+  }
+  glowRing.style.transform = 'translate(-50%, -50%) scale(1)';
+  glowRing.style.opacity = '0';
+}
+
+function setPhase(phase: 'ready' | 'pressing' | 'releasing' | 'complete') {
+  circle.className = 'timer-circle';
+
+  if (phase === 'pressing') {
+    circle.classList.add('phase-pressing');
+    timerStatus.textContent = ui.holdPhase || 'Hold the button...';
+    timerStatus.className = 'timer-status-pill status-pressing';
+    startPulseAnimation();
+  } else if (phase === 'releasing') {
+    circle.classList.add('phase-releasing');
+    timerStatus.textContent = ui.releasePhase || 'Release now!';
+    timerStatus.className = 'timer-status-pill status-releasing';
+    stopPulseAnimation();
+    glowRing.style.opacity = '0.6';
+  } else if (phase === 'complete') {
+    circle.classList.add('phase-complete');
+    timerStatus.textContent = ui.completePhase || 'Done!';
+    timerStatus.className = 'timer-status-pill status-complete';
+    glowRing.style.opacity = '0.2';
+  } else {
+    timerStatus.textContent = ui.ready || 'Ready';
+    timerStatus.className = 'timer-status-pill';
+    stopPulseAnimation();
+    glowRing.style.opacity = '0';
+  }
+}
+
+function updateDisplay(time: number) {
+  timerValue.textContent = time.toFixed(1);
+  const progress = Math.min(time / duration, 1);
+  const offset = circumference * (1 - progress);
+  progressRing.setAttribute('stroke-dashoffset', offset.toString());
+}
+
+function stopTimer() {
+  running = false;
+  if (animFrameId !== null) {
+    cancelAnimationFrame(animFrameId);
+    animFrameId = null;
+  }
+  startBtn.disabled = false;
+  stopBtn.disabled = true;
+}
+
+let lastTickSecond = -1;
+
+function tick(timestamp: number) {
+  if (!startTimestamp) {
+    startTimestamp = timestamp;
+  }
+
+  const rawElapsed = (timestamp - startTimestamp) / 1000;
+  elapsed = Math.min(rawElapsed, duration);
+
+  updateDisplay(elapsed);
+
+  const currentSecond = Math.floor(elapsed);
+  if (currentSecond > lastTickSecond) {
+    lastTickSecond = currentSecond;
+    if (elapsed < duration) {
+      playTickBeep();
+    }
+  }
+
+  if (elapsed >= duration) {
+    setPhase('releasing');
+    playEndBeep();
+    stopTimer();
+    setTimeout(() => {
+      setPhase('complete');
+    }, 1000);
+    return;
+  }
+
+  animFrameId = requestAnimationFrame(tick);
+}
+
+function startTimer() {
+  if (running) return;
+  running = true;
+  elapsed = 0;
+  startTimestamp = null;
+  lastTickSecond = -1;
+  startBtn.disabled = true;
+  stopBtn.disabled = false;
+  field.resize();
+  field.start();
+  setPhase('pressing');
+  playStartBeep();
+  updateDisplay(0);
+  animFrameId = requestAnimationFrame(tick);
+}
+
+function resetTimer() {
+  stopTimer();
+  field.stop();
+  elapsed = 0;
+  startTimestamp = null;
+  lastTickSecond = -1;
+  updateDisplay(0);
+  setPhase('ready');
+  circle.className = 'timer-circle';
+}
+
+startBtn.addEventListener('click', startTimer);
+
+stopBtn.addEventListener('click', () => {
+  field.stop();
+  stopTimer();
+  setPhase('ready');
+});
+
+resetBtn.addEventListener('click', resetTimer);
+
+chips.forEach((chip) => {
+  chip.addEventListener('click', () => {
+    if (running) return;
+    chips.forEach((c) => c.classList.remove('active'));
+    chip.classList.add('active');
+    duration = parseInt(chip.dataset.duration || '1', 10);
+    resetTimer();
+  });
+});
+
+window.addEventListener('resize', () => field.resize());
+
+resetTimer();

package/src/tool/demagnetizing-timer/component.astro

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

package/src/tool/demagnetizing-timer/components/TimerPanel.astro

@@ -0,0 +1,92 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="timer-panel">
+  <div class="timer-display-section">
+    <div class="timer-circle-wrapper">
+      <canvas class="field-canvas" id="field-canvas"></canvas>
+      <div class="timer-circle" id="timer-circle">
+        <svg class="timer-svg" viewBox="0 0 120 120">
+          <defs>
+            <filter id="glow">
+              <feGaussianBlur stdDeviation="2.5" result="blur" />
+              <feMerge>
+                <feMergeNode in="blur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+          <circle class="timer-bg-ring" cx="60" cy="60" r="52" />
+          <circle class="timer-progress-ring" id="timer-progress-ring" cx="60" cy="60" r="52"
+            stroke-dasharray="326.73" stroke-dashoffset="0" filter="url(#glow)" />
+        </svg>
+        <div class="timer-text" id="timer-text">
+          <span class="timer-value" id="timer-value">0.0</span>
+          <span class="timer-unit" id="timer-unit">{labels.seconds || "s"}</span>
+        </div>
+        <div class="timer-glow-ring" id="timer-glow-ring"></div>
+      </div>
+    </div>
+    <div class="timer-status-pill" id="timer-status">{labels.ready || "Ready"}</div>
+  </div>
+
+  <div class="timer-controls">
+    <button type="button" class="timer-btn start-btn" id="start-btn">
+      <svg class="btn-icon" viewBox="0 0 24 24" width="18" height="18">
+        <path d="M8 5v14l11-7z" fill="currentColor" />
+      </svg>
+      {labels.startButton || "Start"}
+    </button>
+    <button type="button" class="timer-btn stop-btn" id="stop-btn" disabled>
+      <svg class="btn-icon" viewBox="0 0 24 24" width="18" height="18">
+        <rect x="6" y="6" width="12" height="12" rx="1" fill="currentColor" />
+      </svg>
+      {labels.stopButton || "Stop"}
+    </button>
+    <button type="button" class="timer-btn reset-btn" id="reset-btn">
+      <svg class="btn-icon" viewBox="0 0 24 24" width="18" height="18">
+        <path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" fill="currentColor" />
+      </svg>
+    </button>
+  </div>
+
+  <div class="duration-selector">
+    <div class="chip-group-label">{labels.durationLabel || "Pulse"}</div>
+    <div class="chip-group">
+      <button type="button" class="chip active" data-duration="1">1s</button>
+      <button type="button" class="chip" data-duration="2">2s</button>
+      <button type="button" class="chip" data-duration="3">3s</button>
+    </div>
+  </div>
+
+  <div class="steps-section">
+    <div class="step-row">
+      <div class="step-marker">1</div>
+      <span class="step-text">{labels.step1 || "Place watch on demagnetizer."}</span>
+    </div>
+    <div class="step-row">
+      <div class="step-marker">2</div>
+      <span class="step-text">{labels.step2 || "Press Start, hold button for set duration."}</span>
+    </div>
+    <div class="step-row">
+      <div class="step-marker">3</div>
+      <span class="step-text">{labels.step3 || "Release button, move watch away slowly."}</span>
+    </div>
+    <div class="step-row">
+      <div class="step-marker">4</div>
+      <span class="step-text">{labels.step4 || "Repeat 2–3 times, rotating the watch."}</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.tipContent || "Keep the watch at least 1 meter away when powered on."}</span>
+  </div>
+</div>