Apple Keyboard

"use client";

import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";

// ─── Layout ──────────────────────────────────────────────────────────────────
// Everything is measured in key pitches (`--p`, one key plus one gap), so the
// keyboard scales with its container and keeps Apple's proportions at any width.
// Rows are 14.5 pitches wide, like the compact Magic Keyboard.

const GAP = 0.13;
const PAD = 0.15;
// Corner radii, measured off the Magic Keyboard. Keys have tight corners, but
// the four keys at the corners of the case take the case's curve, shrunk by
// PAD, so case, well and cap all bend around one centre.
const CASE_RADIUS = 0.48;
const RADIUS = 0.085;
const CORNER = CASE_RADIUS - PAD;
const RING = 0.024;
const ROW = 0.98;
const WIDTH = 14.5 - GAP + PAD * 2;
const KEY_H = ROW - GAP;

type Size = "letter" | "pair" | "word" | "fn";