Add Metronome tool

[02karthik]

What is this tool?

Metronome — a single-file, fully offline metronome for the Focus / Rhythm category. Set a tempo, choose a beat, and practise to an accurate click. It's for musicians, but also anyone who works or focuses better to a steady pulse. Nothing in the catalog currently covers rhythm or tempo, so this fills a clear gap in the "fun / focus" space.

Highlights:

• Accurate timing via a Web Audio lookahead scheduler — the click is synthesised with an oscillator (no audio files), so it runs under the app's strict CSP with nothing loaded over the network.
• Tempo 40–240 BPM via slider, +/− steps, and tap tempo, with Italian tempo markings (Largo … Prestissimo).
• Beats per measure (1 / 2 / 3 / 4 / 6) with an accented downbeat (higher-pitched click + amber light).
• Swinging pendulum and beat lights for visual timing, a volume control, and spacebar start/stop.
• State (BPM, beats, volume) persists in a namespaced localStorage key (metronome:v1).
• Follows the Hillnote design system: azure primary, cool-mist canvas, Manrope display, 24px card radius. Respects prefers-reduced-motion.

Checklist

• It's a single file: metronome/index.html with all CSS + JS inline.
• It is fully self-contained / offline — no remote fonts, scripts, styles, images, fetch, or import (audio is synthesised in-browser via the Web Audio API).
• No analytics, trackers, or phone-home behavior.
• Added a screenshot at screenshots/metronome.webp (via npm run screenshot metronome).
• Registered the tool in tools.json (dir matches the folder name).
• Bumped the top-level catalogVersion (19 → 20).
• For an update to an existing tool: N/A — new tool at version: 1.
• npm run validate passes locally (26 tools, catalogVersion 20).

Notes for reviewers

• Timing approach: uses the classic "A Tale of Two Clocks" pattern — a setInterval tick (25 ms) schedules audio events ~120 ms ahead against AudioContext.currentTime, so tempo stays accurate even if the main thread is busy. Visuals (beat lights, pendulum) are driven off the same scheduled-note queue in requestAnimationFrame, so they stay in sync with the audio rather than drifting.
• AudioContext is created lazily on the first Start (a user gesture) and resumed if suspended, per browser autoplay rules.
• CSP / offline: there are no assets — the click is a short square-wave envelope. This mirrors how ambient-sounds produces sound without any network egress.
• The accented downbeat only triggers when beats-per-measure > 1 (a "1" setting is a plain repeating click).

---

Generated by Claude Code