{children} {client && createPortal(

, outer ?? document.body)}

); } export { NOTCHSET_ROOT, OWN_SOUND } from "@/lib/beautiful-ui/notchset/root"; // --------------------------------------------------------------------------------------------- // Parts // --------------------------------------------------------------------------------------------- export type NodeState = "off" | "on" | "live" | "signal"; /** The node: a 9×9 ring whose dot blooms on (`on`), blinks (`live`) or turns signal. */ function Node({ state = "off", delay, className, style, ...props }: Omit, "children"> & { state?: NodeState; delay?: number }) { return ( ); } /** A small solid round mark (the node where a leader meets a popup, a pointer): SVG, round at every DPR. */ function Dot({ size = 7, className, style }: { size?: number; className?: string; style?: React.CSSProperties }) { return ( ); } /** The legend: a mono label above a control, with an optional node (or any trailing reading). */ function Legend({ label, node, children, className, ...props }: React.ComponentProps<"div"> & { label?: React.ReactNode; node?: NodeState }) { return (

{label} {(children != null || node) && ( {children} {node && } )}

); } /** A key on its plate: the plate is an offset frame behind the child; `--notchset-plate-color` tints it. */ function Plated({ className, children, ...props }: React.ComponentProps<"span">) { return ( {children} ); } /** * The success check. Mounted, it traces itself in over --notchset-check (instant under reduced * motion); pass `drawn` to drive the trace yourself. */ function Check({ drawn, size = 16 }: { drawn?: boolean; size?: number }) { return ( ); } /** The scanner: five 1px ticks fading in turn while something works (static, centre lit, when motion is off). */ function Scanner({ height = 12 }: { height?: number }) { return ( {[0.82, 0.66, 1, 0.66, 0.82].map((h, i) => ( ))} ); } // --------------------------------------------------------------------------------------------- // Glyph flip: each character cycles through glyphs and lands at 110 + i·14ms, left to right // --------------------------------------------------------------------------------------------- const GLYPHS = "ABCDEFGHJKLMNPRSTUVWXYZ0123456789#/+="; const STILL = new Set([" ", "·", "/", ".", ":"]); const FLIP_CHARS = 24; export function scramble(text: string, elapsed: number) { let out = ""; for (let i = 0; i < text.length; i++) { const ch = text[i]!; // Characters past the 24th land with the 24th, so a long label flips as briefly as a short one. out += STILL.has(ch) || elapsed >= 110 + Math.min(i, FLIP_CHARS) * 14 ? ch : GLYPHS[(Math.floor(elapsed / 36) * 5 + i * 11) % GLYPHS.length]; } return out; } /** * The text to show for `text`: when it changes, a few frames of glyphs that land left to right. * Runs on requestAnimationFrame only while a flip is active; the settled text is never state. Off * under reduced motion, inside data-motion="off" (pass the element) or with `off`. */ export function useGlyphFlip(text: string, { off = false, el }: { off?: boolean; el?: React.RefObject } = {}) { const [frame, setFrame] = React.useState<{ for: string; shown: string } | null>(null); const first = React.useRef(true); React.useEffect(() => { if (first.current) { first.current = false; return; } if (off || motionOff(el?.current)) return; let raf = 0; const t0 = performance.now(); const end = 110 + Math.min(text.length, FLIP_CHARS) * 14 + 40; const step = (now: number) => { const elapsed = now - t0; if (elapsed >= end) { setFrame(null); return; } setFrame({ for: text, shown: scramble(text, elapsed) }); raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [text, off, el]); // Turned off mid-flip, the label shows its text at once (the cancelled frame never lingers). return !off && frame && frame.for === text ? frame.shown : text; } /** A label that flips when its text changes; screen readers read the final text only. */ function FlipText({ children, off, className, ref: refProp, ...props }: Omit, "children"> & { children: string; off?: boolean }) { const ref = React.useRef(null); const refs = useComposedRefs(refProp, ref); const shown = useGlyphFlip(children, { off, el: ref }); return ( {shown} {children} ); } // --------------------------------------------------------------------------------------------- // Sound: Notchset components announce cues; the page's beautiful-ui-sound layer (opt-in) plays them. // --------------------------------------------------------------------------------------------- /** The Notchset cues, in the shared sound layer's names (played in the mechanical voice). */ export const NOTCHSET_CUES = { tap: "tap", latch: "lock", signal: "destructive", confirm: "halt", done: "success", tick: "tick" } as const; export type NotchsetCue = keyof typeof NOTCHSET_CUES; export function playCue(el: Element | null, cue: NotchsetCue) { if (!el || typeof CustomEvent === "undefined" || el.closest('[data-sound="off"]')) return; el.dispatchEvent(new CustomEvent("beautiful-ui:sound", { bubbles: true, detail: { cue: NOTCHSET_CUES[cue] } })); } // --------------------------------------------------------------------------------------------- // Shortcuts: "⌘↵" → "Meta+Enter Control+Enter" (aria-keyshortcuts) // --------------------------------------------------------------------------------------------- const KEY_NAMES: Record = { "⌘": "Meta", "⌃": "Control", "⌥": "Alt", "⇧": "Shift", "↵": "Enter", "⏎": "Enter", "⎋": "Escape", "⌫": "Backspace", "⇥": "Tab", "␣": "Space" }; export function kbdToShortcut(kbd: string | undefined): string | undefined { if (!kbd) return undefined; const parts = [...kbd.replace(/\s+/g, "")].map((c) => KEY_NAMES[c] ?? c.toUpperCase()); if (!parts.length) return undefined; const combo = parts.join("+"); // ⌘ on a Mac is Ctrl elsewhere: announce both. return combo.includes("Meta") ? `${combo} ${combo.replace("Meta", "Control")}` : combo; } /** * Digits that roll: each digit is a 0–9 strip; the ones digit moves first and each digit to its left * 40ms later, counting digits only (620ms, a small overshoot). `delay` offsets the whole text. Other * characters (",", "$", "%", letters) sit still. Screen readers get the plain text. The one * implementation behind RollingNumber and the calendar's RollingLabel. */ export function DigitRoll({ text, height, delay = 0, className }: { text: string; height: number; delay?: number; className?: string }) { const chars = [...text]; let k = 0; const order = chars.map((_, i) => (/\d/.test(chars[chars.length - 1 - i]!) ? k++ : 0)).reverse(); return ( {text} {chars.map((d, i) => /\d/.test(d) ? ( {Array.from({ length: 10 }, (_, n) => ( {n} ))} ) : ( {d} ), )} ); } /** A number that rolls (DigitRoll at the readout's own size). `delay` offsets it (rows 60ms apart). */ function RollingNumber({ value, height = 32, delay = 0, className }: { value: string | number; height?: number; delay?: number; className?: string }) { return ; } export { Check, Dot, FlipText, Legend, Node, Plated, RollingNumber, Scanner }; ``` ### lib/beautiful-ui/notchset/root.ts ```tsx /* * Notchset's root attributes, server-safe (no client directive), so server components can spread * them too. Every Notchset root (and portalled popup) carries data-notchset (the motion policy's * scope), plays its own cues in the mechanical voice, and keeps the page's click layer out. */ export const NOTCHSET_ROOT = { "data-notchset": "", "data-sound": "none", "data-sound-voice": "analogue" } as const; /** On every interactive element: it plays its own cues, so the page's click layer adds no tap. */ export const OWN_SOUND = { "data-sound": "none" } as const; ``` ### lib/beautiful-ui/notchset/calendar.tsx ```tsx "use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { DigitRoll, OWN_SOUND, motionOff, playCue, GLIDE } from "@/lib/beautiful-ui/notchset/instrument"; /* * Notchset calendar core, shared by Calendar, Date Picker and Date Range Picker. Days * are whole numbers (days since 1970-01-01 of the local date), so moving and comparing is arithmetic. * A 6-week grid of square cells (44px or 40px) starting on Monday, with an optional ISO week column. * Single mode has one ink block that stretches to the picked day: the leading edge moves first and * the trailing edge 85ms later (300ms). Range mode paints its two ends ink and the days between, * rippling out from the start. A month change slides the grid 14px away and fades (110ms), then * settles it in from the other side (380ms) while the title rolls 8px. */ const TRAVEL = "cubic-bezier(.7,0,.25,1)"; const SETTLE = "cubic-bezier(.34,1.3,.5,1)"; export type Day = number; /** The UTC time of a calendar date. Date.UTC would read years 0–99 as 1900–1999; setUTCFullYear doesn't. */ const utc = (y: number, m: number, d: number) => new Date(0).setUTCFullYear(y, m, d); export const toDay = (d: Date): Day => Math.round(utc(d.getFullYear(), d.getMonth(), d.getDate()) / 864e5); export const dayOf = (y: number, m: number, d: number): Day => Math.round(utc(y, m, d) / 864e5); export const fromDay = (n: Day) => { const u = new Date(n * 864e5); return new Date(u.getUTCFullYear(), u.getUTCMonth(), u.getUTCDate()); }; /** [year, month (0–11), date, weekday (Monday 0 … Sunday 6)]. */ export const fields = (n: Day): [number, number, number, number] => { const u = new Date(n * 864e5); return [u.getUTCFullYear(), u.getUTCMonth(), u.getUTCDate(), (u.getUTCDay() + 6) % 7]; }; export const isoDay = (n: Day) => { const [y, m, d] = fields(n); return `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`; }; /** Parses YYYY-MM-DD (month and day may be one digit); null if it is not a real date. */ export const parseIsoDay = (t: string): Day | null => { const m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(t.trim()); if (!m) return null; const y = +m[1]!; const mo = +m[2]! - 1; const d = +m[3]!; if (mo < 0 || mo > 11 || d < 1 || d > 31) return null; const n = dayOf(y, mo, d); return fields(n)[2] === d ? n : null; }; /** ISO 8601 week number. */ export const isoWeek = (n: Day) => { const wd = fields(n)[3]; const th = n - wd + 3; const j4 = dayOf(fields(th)[0], 0, 4); return Math.floor((n - wd - (j4 - fields(j4)[3])) / 7) + 1; }; /** A month as one number (year × 12 + month), for comparing and stepping. */ export const monthIndex = (n: Day) => { const [y, m] = fields(n); return y * 12 + m; }; const noSubscribe = () => () => {}; /** * This month, hydration-safe: the server and the hydrating client agree on the UTC month, then React * re-renders with the browser's local month (no mismatch, even across a month boundary). */ export function useThisMonth(): number { return React.useSyncExternalStore( noSubscribe, () => monthIndex(toDay(new Date())), () => { const now = new Date(); return now.getUTCFullYear() * 12 + now.getUTCMonth(); }, ); } /** A month index kept inside optional bounds. */ export const clampMonth = (m: number, start?: number, end?: number) => Math.min(end ?? m, Math.max(start ?? m, m)); const monthStart = (mi: number) => dayOf(Math.floor(mi / 12), mi % 12, 1); /** Today, as a day; null while rendering on the server, so the first client render matches it. */ const noop = () => () => {}; export function useToday(): Day | null { return React.useSyncExternalStore( noop, () => toDay(new Date()), () => null, ); } const fmt = (locale: string, o: Intl.DateTimeFormatOptions) => new Intl.DateTimeFormat(locale, { timeZone: "UTC", ...o }); export function monthTitle(mi: number, locale = "en-US") { return `${fmt(locale, { month: "long" }).format(new Date(monthStart(mi) * 864e5)).toUpperCase()} ${Math.floor(mi / 12)}`; } /** THU · OCT 08 · 2026 */ export function longLabel(n: Day, locale = "en-US") { const d = new Date(n * 864e5); const wd = fmt(locale, { weekday: "short" }).format(d).toUpperCase().replace(".", ""); const mo = fmt(locale, { month: "short" }).format(d).toUpperCase().replace(".", ""); const [y, , dd] = fields(n); return `${wd} · ${mo} ${String(dd).padStart(2, "0")} · ${y}`; } /** OCT 08 */ export function shortLabel(n: Day, locale = "en-US") { const mo = fmt(locale, { month: "short" }).format(new Date(n * 864e5)).toUpperCase().replace(".", ""); return `${mo} ${String(fields(n)[2]).padStart(2, "0")}`; } /** "Today", "In 6 days", "3 days ago": the distance from today, in caps. */ export function relLabel(n: Day, today: Day | null) { if (today == null) return ""; const d = n - today; if (!d) return "TODAY"; const k = Math.abs(d); return d > 0 ? `IN ${k} DAY${k > 1 ? "S" : ""}` : `${k} DAY${k > 1 ? "S" : ""} AGO`; } export type CalendarEvents = Readonly>; export type CalendarGridProps = { size?: 44 | 40; locale?: string; /** Single: the picked day. */ selected?: Day | null; /** Range: the two ends, in pick order (b is null while the second end is being chosen). */ range?: { a: Day | null; b: Day | null } | null; onPick: (n: Day, el: HTMLElement | null) => void; /** The month shown (year × 12 + month) and its change. */ month: number; onMonthChange: (mi: number) => void; /** First and last months that can be shown. */ startMonth?: number; endMonth?: number; isDisabled?: (n: Day) => boolean; events?: CalendarEvents; eventLabel?: (count: number) => string; showWeekNumber?: boolean; showToday?: boolean; /** Focus the tabbable day when mounted (the pickers' popups). */ autoFocus?: boolean; className?: string; }; type Phase = "idle" | "out" | "pre" | "in"; export function CalendarGrid({ size = 44, locale = "en-US", selected = null, range = null, onPick, month, onMonthChange, startMonth, endMonth, isDisabled, events, eventLabel = (n) => `${n} event${n > 1 ? "s" : ""}`, showWeekNumber = false, showToday = false, autoFocus = false, className, }: CalendarGridProps) { const root = React.useRef(null); const today = useToday(); // The month on screen lags the asked-for month by the slide-out (110ms). const [view, setView] = React.useState<{ shown: number; ph: Phase; nd: 1 | -1; asked: number }>({ shown: month, ph: "idle", nd: 1, asked: month }); const timers = React.useRef[]>([]); React.useEffect(() => () => timers.current.forEach(clearTimeout), []); if (view.asked !== month) { // A month set by the owner (not by this grid's own controls) is shown at once. setView((v) => ({ ...v, asked: month, shown: month, ph: "idle" })); } React.useEffect(() => { const target = view.asked; timers.current.forEach(clearTimeout); const at = (ms: number, f: (v: typeof view) => typeof view) => setTimeout(() => setView((v) => (v.asked === target ? f(v) : v)), ms); timers.current = [ at(110, (v) => (v.shown === target ? v : { ...v, shown: target, ph: "pre" })), at(140, (v) => (v.ph === "pre" ? { ...v, ph: "in" } : v)), at(560, (v) => (v.ph === "idle" ? v : { ...v, ph: "idle" })), ]; }, [view.asked]); /** This grid's own month changes (arrows, keys, picking a day in the next month) slide. */ const goTo = (mi: number) => { const still = motionOff(root.current); setView((v) => still ? { ...v, asked: mi, shown: mi, ph: "idle" } : { ...v, asked: mi, nd: mi > v.asked ? 1 : -1, ph: v.shown === mi ? (v.ph === "idle" ? "idle" : "in") : "out" }, ); onMonthChange(mi); }; const shown = view.shown; const start = monthStart(shown) - fields(monthStart(shown))[3]; const inShown = (n: Day) => monthIndex(n) === shown; const dis = (n: Day) => Boolean(isDisabled?.(n)); // The focus day: roving tabindex across the grid. Kept when it is in the shown month. const fallback = selected ?? range?.b ?? range?.a ?? (today != null && monthIndex(today) === shown ? today : monthStart(shown)); const [fcState, setFc] = React.useState(null); // A focus day in the month being moved to is kept: its cell takes focus once the grid shows it. const fc = fcState != null && monthIndex(fcState) === view.asked ? fcState : inShown(fallback) ? fallback : monthStart(shown); const wantFocus = React.useRef(autoFocus); React.useLayoutEffect(() => { if (!wantFocus.current) return; const cell = root.current?.querySelector(`[role=gridcell][data-day="${fc}"]`); if (cell) { cell.focus({ preventScroll: true }); wantFocus.current = false; } }); // Selection block (single mode): edges in grid steps; which edges lead comes from the move. const [move, setMove] = React.useState({ dx: 0, dy: 0 }); const S = size; const si = selected != null ? selected - start : -1; const blockOn = range == null && si >= 0 && si < 42; const jump = view.ph !== "idle"; const edge = (lead: boolean) => `300ms ${GLIDE} ${lead ? 0 : 85}ms`; const blockStyle: React.CSSProperties = blockOn ? { // Columns shrink on narrow screens, so across is a share of the width; rows keep their height. // Logical sides, so the block sits on the selected day in right-to-left grids too. insetInlineStart: `${((si % 7) / 7) * 100}%`, top: Math.floor(si / 7) * S, insetInlineEnd: `${((6 - (si % 7)) / 7) * 100}%`, bottom: (5 - Math.floor(si / 7)) * S, opacity: 1, transition: jump ? "opacity 120ms linear" : `inset-inline-start ${edge(move.dx <= 0)}, inset-inline-end ${edge(move.dx >= 0)}, top ${edge(move.dy <= 0)}, bottom ${edge(move.dy >= 0)}, opacity 120ms linear`, } : { inset: 0, opacity: 0, transition: "none" }; const pick = (n: Day, el: HTMLElement | null) => { if (dis(n)) return; playCue(el, "tick"); setFc(n); if (range == null && selected != null && inShown(n)) { const o = selected - start; const k = n - start; setMove({ dx: Math.sign((k % 7) - (((o % 7) + 7) % 7)), dy: Math.sign(Math.floor(k / 7) - Math.floor(o / 7)) }); } else setMove({ dx: 0, dy: 0 }); if (!inShown(n)) { // A spillover day from a month outside the bounds isn't pickable. const m = monthIndex(n); if ((startMonth != null && m < startMonth) || (endMonth != null && m > endMonth)) return; goTo(m); } onPick(n, el); }; const prevOff = startMonth != null && shown <= startMonth; const nextOff = endMonth != null && shown >= endMonth; const nav = (d: 1 | -1, el: HTMLElement) => { // Bounds apply to the month asked for, so presses during a slide can't walk past them. const to = view.asked + d; if ((startMonth != null && to < startMonth) || (endMonth != null && to > endMonth)) return; playCue(el, "tick"); goTo(view.asked + d); }; const clampMonth = (n: Day) => { if (startMonth != null && monthIndex(n) < startMonth) return monthStart(startMonth); if (endMonth != null && monthIndex(n) > endMonth) return monthStart(endMonth + 1) - 1; return n; }; const onKeyDown = (e: React.KeyboardEvent) => { const steps: Record = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }; let n = fc; if (steps[e.key] != null) n += (e.key === "ArrowLeft" || e.key === "ArrowRight") && getComputedStyle(e.currentTarget).direction === "rtl" ? -steps[e.key]! : steps[e.key]!; else if (e.key === "Home") n -= fields(n)[3]; else if (e.key === "End") n += 6 - fields(n)[3]; else if (e.key === "PageUp" || e.key === "PageDown") { const [y, m, d] = fields(n); const mi = y * 12 + m + (e.key === "PageUp" ? -1 : 1); const last = fields(monthStart(mi + 1) - 1)[2]; n = dayOf(Math.floor(mi / 12), mi % 12, Math.min(d, last)); } else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); pick(fc, e.target as HTMLElement); return; } else return; e.preventDefault(); n = clampMonth(n); setFc(n); wantFocus.current = true; if (!inShown(n)) goTo(monthIndex(n)); }; // Range painting: ends ink; between them a hover tint while choosing, a fill once chosen. const [hover, setHover] = React.useState(null); const A = range?.a ?? null; const B = range?.b ?? (A != null ? hover : null); const lo = A != null && B != null ? Math.min(A, B) : A; const hi = A != null && B != null ? Math.max(A, B) : A; const complete = range?.b != null; const set = view.ph === "pre"; const gridMotion: React.CSSProperties = { opacity: view.ph === "out" || view.ph === "pre" ? 0 : 1, transform: `translateX(${view.ph === "out" ? -view.nd * 14 : view.ph === "pre" ? view.nd * 14 : 0}px)`, transition: set ? "none" : view.ph === "out" ? `opacity 110ms linear, transform 110ms ${TRAVEL}` : `opacity 220ms linear, transform 380ms ${SETTLE}`, }; const titleMotion: React.CSSProperties = { opacity: gridMotion.opacity, transform: `translateY(${view.ph === "out" ? -view.nd * 8 : view.ph === "pre" ? view.nd * 8 : 0}px)`, transition: gridMotion.transition, }; const title = monthTitle(shown, locale); const wdFmt = fmt(locale, { weekday: "short" }); const wdLong = fmt(locale, { weekday: "long", month: "long", day: "numeric", year: "numeric" }); const cells = Array.from({ length: 42 }, (_, i) => start + i); const navClass = cn(`notchset-focus`, "[--notchset-focus-inset:-3px] flex size-7 flex-none cursor-pointer items-center justify-center border border-solid border-[var(--notchset-rule,var(--border))] bg-transparent p-0 text-foreground aria-disabled:cursor-not-allowed aria-disabled:text-[var(--notchset-rule,var(--border))]"); return (

{title} {showToday && ( )}

{showWeekNumber && }

{cells.slice(0, 7).map((n, i) => ( {wdFmt.format(new Date(n * 864e5)).slice(0, 2).toUpperCase()} ))}

{showWeekNumber && (

{Array.from({ length: 6 }, (_, r) => ( W{String(isoWeek(start + r * 7)).padStart(2, "0")} ))}

)}

setHover(null)} className="relative grid min-w-0" style={{ gridTemplateColumns: `repeat(7, minmax(0, ${S}px))`, gridAutoRows: S, ...gridMotion }} > {Array.from({ length: 6 }, (_, r) => (

{cells.slice(r * 7, r * 7 + 7).map((n) => { const [, , d] = fields(n); const inM = inShown(n); const off = dis(n); const ev = events?.[isoDay(n)] ?? []; const isToday = n === today; const end = range != null && A != null && (n === A || n === range.b); const mid = range != null && lo != null && hi != null && n > lo && n < hi; const on = range != null ? end : n === selected; const dl = complete && lo != null ? Math.min(320, Math.abs(n - lo) * 10) : 0; return ( ); })}

))}

); } /** The pickers' 40px trigger icon. */ export function CalendarIcon() { return ( ); } export function PickerChevron() { return ( ); } export const pickerTriggerClass = cn( "group/picker relative flex h-10 w-full min-w-0 cursor-pointer items-center gap-2.5 border border-solid border-[var(--notchset-control-edge,var(--input))] bg-background px-3 text-start text-foreground outline-none transition-[border-color] duration-(--notchset-fade) ease-(--notchset-ease-fade) [--notchset-focus-inset:-4px] pointer-coarse:h-11", "data-[popup-open]:border-foreground data-[state=open]:border-foreground data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40", ); /** The 8px leader from the trigger down to the popup's edge, 16px in. */ export function PickerLeader() { return ; } /** The popup: an ink frame that unrolls (grid rows, 380ms after 80ms) and rolls up (180ms). */ export const pickerContentClass = cn( "relative z-50 grid grid-rows-[1fr] border border-solid border-foreground bg-background text-foreground outline-none", "transition-[grid-template-rows] duration-(--notchset-unfold) ease-(--notchset-ease-unfold) delay-(--notchset-unfold-delay)", "data-[starting-style]:grid-rows-[0fr] data-[ending-style]:grid-rows-[0fr] data-[ending-style]:delay-0 data-[ending-style]:duration-(--notchset-fold) data-[ending-style]:ease-(--notchset-ease-fold)", "motion-safe:data-[state=open]:animate-[notchset-unfold_var(--notchset-unfold)_var(--notchset-ease-unfold)_var(--notchset-unfold-delay)_both] motion-safe:data-[state=closed]:animate-[notchset-fold_var(--notchset-fold)_var(--notchset-ease-fold)_both]", ); /** A 24px preset chip; ink when it is the current value. */ export function PresetChip({ on, className, ...props }: React.ComponentProps<"button"> & { on?: boolean }) { return (