Calendar Twin

1"use client";
2 
3import { useRef, useState, useCallback } from "react";
4import { motion, AnimatePresence } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7/**
8 * Calendar Twin — dual-month range picker.
9 *
10 * Two months sit side by side. Click a day to start
11 * a range, hover to preview, click again to confirm.
12 * A continuous band connects start to end — rounding
13 * at row edges, brightening at endpoints.
14 *
15 * The band IS the selection.
16 */
17 
18/* ── Types ── */
19 
20export interface CalendarTwinProps {
21  defaultStart?: string;
22  defaultEnd?: string;
23  onRangeChange?: (start: string | null, end: string | null) => void;
24  sound?: boolean;
25}
26 
27/* ── Constants ── */
28 
29const CELL = 36;
30const DOW = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
31 
32/* ── Helpers ── */
33 
34function pad2(n: number): string {
35  return String(n).padStart(2, "0");
36}
37 
38function toKey(y: number, m: number, d: number): string {
39  return `${y}-${pad2(m + 1)}-${pad2(d)}`;
40}
41 
42function parseKey(key: string): [number, number, number] {
43  const [y, m, d] = key.split("-").map(Number);
44  return [y, m - 1, d];
45}
46 
47function formatDate(key: string): string {
48  const [y, m, d] = parseKey(key);
49  return new Date(y, m, d).toLocaleDateString("en-US", {
50    month: "short",
51    day: "numeric",
52  });
53}
54 
55function daysBetween(a: string, b: string): number {
56  const [ay, am, ad] = parseKey(a);
57  const [by, bm, bd] = parseKey(b);
58  const da = new Date(ay, am, ad);
59  const db = new Date(by, bm, bd);
60  return Math.round((db.getTime() - da.getTime()) / 86400000) + 1;
61}
62 
63function ordered(a: string, b: string): [string, string] {
64  return a <= b ? [a, b] : [b, a];
65}
66 
67/* ── Audio ── */
68 
69let _ctx: AudioContext | null = null;
70let _buf: AudioBuffer | null = null;
71 
72function audioCtx() {
73  if (!_ctx) {
74    _ctx = new (window.AudioContext ||
75      (window as unknown as { webkitAudioContext: typeof AudioContext })
76        .webkitAudioContext)();
77  }
78  if (_ctx.state === "suspended") _ctx.resume();
79  return _ctx;
80}
81 
82function ensureBuf(ac: AudioContext): AudioBuffer {
83  if (_buf && _buf.sampleRate === ac.sampleRate) return _buf;
84  const rate = ac.sampleRate;
85  const len = Math.floor(rate * 0.003);
86  const buf = ac.createBuffer(1, len, rate);
87  const ch = buf.getChannelData(0);
88  for (let i = 0; i < len; i++) {
89    const t = i / len;
90    ch[i] = (Math.random() * 2 - 1) * (1 - t) ** 4;
91  }
92  _buf = buf;
93  return buf;
94}
95 
96function playTick(last: React.MutableRefObject<number>) {
97// … truncated