62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 64:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 65:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 66:T7206,"use client" import * as React from "react" import { cn } from "@/lib/utils" type DialValue = string | number type DialOption = DialValue | { value: DialValue; label?: string } type DialProps = Omit, "defaultValue" | "onChange"> & { /** arc: a few choices on a half circle, no script. tuner: a long scale on the rim of a wheel you turn. dynamics: the number's type size is its loudness, from niente to fff. tumbler: set figure by figure, the one you turn held in parentheses. */ variant?: "arc" | "tuner" | "dynamics" | "tumbler" /** The form field's name. */ name?: string /** The question, as a small label over the dial. It also names the range. */ legend: React.ReactNode /** The choices, in order. The arc takes up to nine; the tuner any number. */ options?: DialOption[] /** Tuner without options, and dynamics: the scale runs from min to max by step. Tumbler: whole numbers from min to max. */ min?: number max?: number step?: number /** Tuner: a numeral every this many steps, with a half-length tick halfway between. */ major?: number value?: DialValue defaultValue?: DialValue onValueChange?: (value: DialValue) => void /** Small words for the number, e.g. "weeks": under the arc, after the tuner's reading. */ unit?: string /** Pins a state for documentation ("hover", "focus"); set on the root. */ "data-force"?: string } const valueOf = (o: DialOption) => (typeof o === "object" ? o.value : o) const labelOf = (o: DialOption) => (typeof o === "object" ? (o.label ?? String(o.value)) : String(o)) /** * A number you turn to. The arc is a radio on a half circle, with no script: the chosen * number swells into italic and the dot travels. The tuner is a native range drawn as the * rim of a wheel you turn, for more numbers than fit in view. */ function Dial({ variant = "arc", ...props }: DialProps) { if (variant === "dynamics") return if (variant === "tumbler") return return variant === "arc" ? : } function Arc({ name, legend, options = [], value, defaultValue, onValueChange, unit, className, style, ...props }: Omit) { const generated = React.useId() return (

{legend}

{options.map((option, i) => { const v = valueOf(option) const text = labelOf(option) const mine = (x: DialValue | undefined) => x !== undefined && String(x) === String(v) return ( onValueChange?.(v)} /> {text} ) })}

) } type Kind = "minor" | "half" | "major" /** The numbers a turning dial runs through, by index: from the options, or from min to max by step. */ function scaleOf(options: DialOption[] | undefined, min: number, max: number, step: number, major: number) { if (options) { const labels = options.map(labelOf) return { numeric: false, count: options.length, valueAt: (i: number) => valueOf(options[i]), label: (i: number) => labels[i] ?? "", mark: (i: number) => labels[i] ?? "", indexOf: (v: DialValue) => Math.max(0, options.findIndex((o) => String(valueOf(o)) === String(v))), kind: (i: number): Kind => (i % major === 0 ? "major" : major % 2 === 0 && i % (major / 2) === 0 ? "half" : "minor"), } } const digits = (String(step).split(".")[1] ?? "").length const count = Math.max(1, Math.floor((max - min) / step + 1e-9) + 1) const at = (i: number) => Number((min + i * step).toFixed(digits)) // Marks fall on round numbers (88, 89 on a 87.5 to 108 scale), not on min plus a count. const on = (i: number, every: number) => Math.abs(at(i) / every - Math.round(at(i) / every)) < 1e-6 return { numeric: true, count, valueAt: at, label: (i: number) => (i >= 0 && i < count ? at(i).toFixed(digits) : ""), mark: (i: number) => String(at(i)), indexOf: (v: DialValue) => Math.min(count - 1, Math.max(0, Math.round((Number(v) - min) / step))), kind: (i: number): Kind => (on(i, major * step) ? "major" : major % 2 === 0 && on(i, (major / 2) * step) ? "half" : "minor"), } } type Live = { wheel: HTMLElement | null drum: HTMLElement | null input: HTMLInputElement | null last: number label: (i: number) => string commit: (i: number) => void recentre: (i: number) => void } // ponytail: hand-tuned; the feel lives in these four numbers. const SPRING = [121, 13.6] // ω 11, ζ 0.62: it lands with one small swing past (about 8%), the house spiccato const CATCH = [676, 52] // ω 26, critically damped: the wheel catches up with a scroll without swinging const COAST = 0.32 // seconds for a flick's speed to fall to a third const STRETCH = 64 // px the rim gives under the hand past either end /** * The wheel's physics, outside React. One position, in steps, that a hand, a scroll or a key * moves; each frame it's written to the face as --pos and CSS places every mark from it. */ function createTurn(start: number) { let live: Live = { wheel: null, drum: null, input: null, last: 0, label: String, commit: () => {}, recentre: () => {} } let pos = start let vel = 0 let target = start let scrolled = start let mode: "rest" | "held" | "coast" | "spring" | "wheel" = "rest" let follow = false // a hand or a scroll is turning it, so the value follows the wheel let committed = start let centre = start let raf = 0 let then = 0 let timer = 0 let pitch = 24 let k = 1 let dir = 1 let still = false let grip: { x: number; from: number; moved: boolean; halted: boolean; trail: [number, number][] } | null = null const clamp = (i: number) => Math.min(live.last, Math.max(0, i)) // Read at the start of each gesture, so a resize, a direction or a motion setting is always current. const measure = () => { const wheel = live.wheel if (!wheel) return const cs = getComputedStyle(wheel) pitch = parseFloat(cs.getPropertyValue("--ot-dial-pitch")) || 24 k = parseFloat(cs.getPropertyValue("--k")) || 1 dir = cs.direction === "rtl" ? -1 : 1 still = matchMedia("(prefers-reduced-motion: reduce)").matches } const paint = () => { const { wheel, drum, last, label } = live wheel?.parentElement?.style.setProperty("--pos", pos.toFixed(4)) const near = clamp(Math.round(pos)) if (near !== centre) { centre = near live.recentre(near) } if (follow && near !== committed) { committed = near live.commit(near) } if (drum) { // The drum turns with the wheel like a counter: between two numbers, both show. const p = Math.min(last, Math.max(0, pos)) const i = still ? Math.round(p) : Math.floor(p) drum.dataset.a = label(i) drum.dataset.b = label(i + 1) drum.style.setProperty("--f", still ? "0" : (p - i).toFixed(4)) } } const frame = (now: number) => { const dt = Math.min(0.05, (now - then) / 1000) then = now const n = Math.max(1, Math.ceil(dt / 0.008)) for (let j = 0; j < n; j++) { const h = dt / n if (mode === "coast") { vel *= Math.exp(-h / COAST) pos += vel * h // Slow enough, or past an end: catch the step it's heading for. if (pos < 0 || pos > live.last || Math.abs(vel) * pitch < 90) { mode = "spring" target = clamp(Math.round(pos + vel / 11)) } } else { const [stiff, damp] = mode === "wheel" ? CATCH : SPRING vel += (-stiff * (pos - (mode === "wheel" ? scrolled : target)) - damp * vel) * h pos += vel * h } } if (mode === "spring" && Math.abs(pos - target) < 0.001 && Math.abs(vel) < 0.01) { pos = target vel = 0 mode = "rest" } paint() raf = mode === "rest" || mode === "held" ? 0 : requestAnimationFrame(frame) } const run = () => { if (raf) return then = performance.now() raf = requestAnimationFrame(frame) } const land = (i: number) => { target = clamp(i) if (still) { pos = target vel = 0 mode = "rest" paint() return } mode = "spring" run() } /** A key or a tap: the value is set now, and the wheel turns to it. */ const set = (i: number) => { measure() follow = false const to = clamp(i) if (to !== committed) { committed = to live.commit(to) } land(to) } const held = (el: Element, on: boolean) => el.closest("fieldset")?.toggleAttribute("data-held", on) return { /** React hands over the current elements, range and callbacks after every render. */ sync(next: Live) { live = next }, committed: () => committed, set, /** The value changed from outside: the wheel turns to it. */ to(i: number) { // While a hand or a scroll turns it, the wheel leads and React's renders trail it: ignore their echo. if (follow && mode !== "rest") return measure() follow = false committed = i land(i) }, down(e: React.PointerEvent) { const input = live.input if (e.button !== 0 || !input || input.matches(":disabled")) return e.preventDefault() // keeps the focus given below, and stops text selection input.focus({ preventScroll: true }) measure() e.currentTarget.setPointerCapture(e.pointerId) const halted = mode !== "rest" && Math.abs(vel) > 1 // still settling counts as still cancelAnimationFrame(raf) raf = 0 clearTimeout(timer) mode = "held" follow = true vel = 0 grip = { x: e.clientX, from: pos, moved: false, halted, trail: [[e.timeStamp, e.clientX]] } held(e.currentTarget, true) }, move(e: React.PointerEvent) { if (!grip) return const dx = e.clientX - grip.x if (!grip.moved && Math.abs(dx) < 4) return grip.moved = true const last = live.last const raw = grip.from - (dx * dir) / pitch const over = raw < 0 ? raw : raw > last ? raw - last : 0 const give = STRETCH / pitch // Past an end the rim stretches, less the further you pull. pos = over ? (over < 0 ? 0 : last) + Math.sign(over) * give * (1 - 1 / ((Math.abs(over) * 0.55) / give + 1)) : raw grip.trail.push([e.timeStamp, e.clientX]) while (grip.trail.length > 2 && e.timeStamp - grip.trail[0][0] > 100) grip.trail.shift() paint() }, up(e: React.PointerEvent) { if (!grip) return const g = grip grip = null held(e.currentTarget, false) if (!g.moved) { // A tap turns the wheel to the mark under it; a tap on a moving wheel only stops it. const wheel = live.wheel if (e.type !== "pointerup" || g.halted || !wheel) return land(Math.round(pos)) const r = wheel.getBoundingClientRect() const x = Math.max(-1, Math.min(1, (e.clientX - r.left - r.width / 2) / (pitch * k))) return set(Math.round(pos + Math.asin(x) * k * dir)) } const [t0, x0] = g.trail[0] const [t1, x1] = g.trail[g.trail.length - 1] vel = e.timeStamp - t1 < 60 && t1 > t0 ? (-((x1 - x0) / (t1 - t0)) * 1000 * dir) / pitch : 0 if (still) return land(Math.round(pos)) mode = "coast" run() }, wheel(e: WheelEvent) { const { input, last } = live // A smooth scroller on the page (Lenis) leaves a wheel alone that carries this mark, as the scrollbar's host does. const claim = (on: boolean) => (e.currentTarget as Element).toggleAttribute("data-lenis-prevent-wheel", on) // A sideways swipe always turns it; the plain wheel only once it has focus, so the page still scrolls past it. const sideways = Math.abs(e.deltaX) > Math.abs(e.deltaY) measure() const d = (sideways ? e.deltaX * dir : e.deltaY) * (e.deltaMode === 0 ? 1 / pitch : e.deltaMode === 1 ? 1 : 10) const from = mode === "wheel" ? scrolled : mode === "spring" ? target : pos // a scroll adds to where it is heading const ours = input && !input.matches(":disabled") && (sideways || document.activeElement === input) // At an end, the page scrolls on. if (!ours || (from <= 0 && d < 0) || (from >= last && d > 0)) { claim(false) return } claim(true) e.preventDefault() follow = true scrolled = clamp(from + d) clearTimeout(timer) timer = window.setTimeout(() => land(Math.round(scrolled)), 140) if (still) { pos = Math.round(scrolled) paint() return } mode = "wheel" run() }, stop() { cancelAnimationFrame(raf) clearTimeout(timer) }, } } function Turning({ variant, name, legend, options, min = 0, max = 100, step = 1, major = 10, value, defaultValue, onValueChange, unit, className, ...props }: Omit & { variant: "tuner" }) { const scale = React.useMemo(() => scaleOf(options, min, max, step, major), [options, min, max, step, major]) const last = scale.count - 1 const [own, setOwn] = React.useState(() => (defaultValue === undefined ? 0 : scale.indexOf(defaultValue))) const index = value === undefined ? own : scale.indexOf(value) const [start] = React.useState(index) const [base, setBase] = React.useState(index) const legendId = React.useId() const wheel = React.useRef(null) const drum = React.useRef(null) const input = React.useRef(null) const [turn] = React.useState(() => createTurn(start)) React.useLayoutEffect(() => { turn.sync({ wheel: wheel.current, drum: drum.current, input: input.current, last, label: scale.label, commit: (i) => { if (value === undefined) setOwn(i) onValueChange?.(scale.valueAt(i)) }, recentre: setBase, }) }, [turn, last, scale, value, onValueChange]) // The wheel listener can't be passive: a turn claims the scroll. React.useEffect(() => { const face = wheel.current?.parentElement const onWheel = (e: WheelEvent) => turn.wheel(e) face?.addEventListener("wheel", onWheel, { passive: false }) return () => { face?.removeEventListener("wheel", onWheel) turn.stop() } }, [turn]) React.useEffect(() => { if (index !== turn.committed()) turn.to(index) }, [turn, index]) // Only the marks near the top exist; the rest of the scale is made as the wheel brings it round. // ponytail: a fixed reach covers the half turn in view while the stylesheet's --k stays under 21. const reach = 34 const marks: number[] = [] for (let i = Math.max(0, base - reach); i <= Math.min(last, base + reach); i++) marks.push(i) const chars = scale.numeric ? Math.max(scale.label(0).length, scale.label(last).length) : Math.max(...Array.from({ length: scale.count }, (_, i) => scale.label(i).length)) const jump = major return (

{legend} turn.set(scale.numeric ? scale.indexOf(e.target.value) : Number(e.target.value))} onKeyDown={(e) => { // A native range jumps a tenth of its length; a dial jumps a major mark. if (e.key !== "PageUp" && e.key !== "PageDown") return e.preventDefault() turn.set(turn.committed() + (e.key === "PageUp" ? jump : -jump)) }} /> {!scale.numeric && name ? : null}

) } const EXHALE = "cubic-bezier(.16,1,.3,1)" // --ot-exhale const still = () => matchMedia("(prefers-reduced-motion: reduce)").matches const clampTo = (lo: number, hi: number, n: number) => Math.min(hi, Math.max(lo, n)) // The score's dynamics, quietest first. The type scale is named after them already (--ot-pp … --ot-fff), so the dial // sets its number at the size its loudness would be printed. const DYNAMICS = [ ["ppp", "pianississimo"], ["pp", "pianissimo"], ["p", "piano"], ["mp", "mezzo piano"], ["mf", "mezzo forte"], ["f", "forte"], ["ff", "fortissimo"], ["fff", "fortississimo"], ] as const const dynamicOf = (u: number) => (u <= 0 ? (["niente", "niente"] as const) : DYNAMICS[Math.min(7, Math.ceil(u * 8) - 1)]) /** * Dynamics: a native range under a number whose size is its loudness. Drag it (right or up is louder), scroll it * once it has focus, or use the keys; the marking under it names the dynamic. */ function Dynamics({ name, legend, min = 0, max = 100, step = 1, value, defaultValue, onValueChange, unit, className, style, ...props }: Omit) { const [own, setOwn] = React.useState(() => Number(defaultValue ?? min)) const snap = (n: number) => clampTo(min, max, Number((Math.round((n - min) / step) * step + min).toFixed(6))) const v = snap(Number(value ?? own)) const u = max > min ? (v - min) / (max - min) : 0 const [mark, word] = dynamicOf(u) const legendId = React.useId() const input = React.useRef(null) const face = React.useRef(null) const grip = React.useRef<{ x: number; y: number; from: number } | null>(null) const live = React.useRef<{ v: number; set: (n: number) => void }>({ v, set: () => {} }) const set = (n: number) => { const next = snap(n) if (next === v) return if (value === undefined) setOwn(next) onValueChange?.(next) } React.useLayoutEffect(() => { live.current = { v, set } }) // The wheel turns it only once it has focus, so the page still scrolls past; at either end it hands the scroll back. React.useEffect(() => { const el = face.current const onWheel = (e: WheelEvent) => { const { v: now, set: to } = live.current const d = Math.sign(Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : -e.deltaY) if (!d || document.activeElement !== input.current || input.current?.disabled || (d < 0 && now <= min) || (d > 0 && now >= max)) return e.preventDefault() to(now + d * step) } el?.addEventListener("wheel", onWheel, { passive: false }) return () => el?.removeEventListener("wheel", onWheel) }, [min, max, step]) // The whole range is a short drag: about 260px, right or up for louder. const travel = 260 / Math.max(1, (max - min) / step) return (

{legend}

{ if (e.button !== 0 || !input.current || input.current.disabled) return e.preventDefault() input.current.focus({ preventScroll: true }) e.currentTarget.setPointerCapture(e.pointerId) grip.current = { x: e.clientX, y: e.clientY, from: v } e.currentTarget.closest("fieldset")?.setAttribute("data-held", "") }} onPointerMove={(e) => { const g = grip.current if (!g) return const dx = (e.clientX - g.x) * (getComputedStyle(e.currentTarget).direction === "rtl" ? -1 : 1) set(g.from + Math.round((dx - (e.clientY - g.y)) / travel) * step) }} onPointerUp={(e) => { grip.current = null e.currentTarget.closest("fieldset")?.removeAttribute("data-held") }} onPointerCancel={(e) => { grip.current = null e.currentTarget.closest("fieldset")?.removeAttribute("data-held") }} > {v} {unit ? {unit} : null} {mark}

set(Number(e.target.value))} />

) } /** * Tumbler: a whole number set figure by figure, like the wheels of a lock. The figure you turn stands in * parentheses, as "20(25)" holds the part that changes. Underneath, a native number input. */ function Tumbler({ name, legend, min = 0, max = 100, value, defaultValue, onValueChange, unit, className, ...props }: Omit) { const lo = Math.max(0, Math.ceil(min)) // ponytail: whole numbers from zero up; negatives and decimals wait for a need const hi = Math.max(lo, Math.floor(max)) const n = String(hi).length const [own, setOwn] = React.useState(() => Number(defaultValue ?? lo)) const v = clampTo(lo, hi, Math.round(Number(value ?? own))) const [at, setAt] = React.useState(n - 1) // which figure the parentheses hold, from the left const text = String(v).padStart(n, "0") const lead = n - String(v).length const legendId = React.useId() const hintId = React.useId() const input = React.useRef(null) const face = React.useRef(null) const figs = React.useRef<(HTMLSpanElement | null)[]>([]) const was = React.useRef(text) const grip = React.useRef<{ y: number; from: number; k: number } | null>(null) const live = React.useRef<{ v: number; at: number; set: (n: number) => void }>({ v, at, set: () => {} }) const place = (k: number) => 10 ** (n - 1 - k) const set = (next: number) => { const to = clampTo(lo, hi, Math.round(next)) if (to === v) return if (value === undefined) setOwn(to) onValueChange?.(to) } React.useLayoutEffect(() => { live.current = { v, at, set } }) // A changed figure turns in from below when the number grew, from above when it fell: the units first, the carry a // step behind, as a counter's wheels do. React.useLayoutEffect(() => { const before = was.current was.current = text if (before === text || still()) return const dir = Number(text) > Number(before) ? 1 : -1 let order = 0 for (let k = n - 1; k >= 0; k--) { if (before[k] === text[k]) continue figs.current[k]?.animate([{ translate: `0 ${dir * 0.45}em`, opacity: 0 }, { translate: "0 0", opacity: 1 }], { duration: 320, easing: EXHALE, delay: order++ * 36, fill: "backwards" }) // --ot-moderato, --ot-arpeggio } }, [text, n]) React.useEffect(() => { const el = face.current const onWheel = (e: WheelEvent) => { const { v: now, at: k, set: to } = live.current const d = -Math.sign(e.deltaY) if (!d || document.activeElement !== input.current || input.current?.disabled || (d < 0 && now <= lo) || (d > 0 && now >= hi)) return e.preventDefault() to(now + d * 10 ** (n - 1 - k)) } el?.addEventListener("wheel", onWheel, { passive: false }) return () => el?.removeEventListener("wheel", onWheel) }, [lo, hi, n]) const keys = (e: React.KeyboardEvent) => { const k = e.key let handled = true if (k === "ArrowUp" || k === "ArrowDown") set(v + (k === "ArrowUp" ? 1 : -1) * place(at)) else if (k === "ArrowLeft" || k === "ArrowRight") setAt(clampTo(0, n - 1, at + (k === "ArrowLeft" ? -1 : 1))) else if (k === "Home" || k === "End") set(k === "Home" ? lo : hi) else if (/^[0-9]$/.test(k)) { // Typing sets the held figure and moves on to the next, as a code is entered. set(Number(text.slice(0, at) + k + text.slice(at + 1))) setAt(Math.min(n - 1, at + 1)) } else handled = false if (handled) e.preventDefault() } return (

{legend}

{ const fig = (e.target as Element).closest("[data-k]") if (e.button !== 0 || !input.current || input.current.disabled) return e.preventDefault() input.current.focus({ preventScroll: true }) const k = fig ? Number(fig.dataset.k) : at setAt(k) e.currentTarget.setPointerCapture(e.pointerId) grip.current = { y: e.clientY, from: v, k } e.currentTarget.closest("fieldset")?.setAttribute("data-held", "") }} onPointerMove={(e) => { const g = grip.current if (!g) return set(g.from + Math.trunc((g.y - e.clientY) / 24) * place(g.k)) // a figure a finger's width up or down }} onPointerUp={(e) => { grip.current = null e.currentTarget.closest("fieldset")?.removeAttribute("data-held") }} onPointerCancel={(e) => { grip.current = null e.currentTarget.closest("fieldset")?.removeAttribute("data-held") }} > {[...text].map((f, k) => ( void (figs.current[k] = el)} data-k={k} data-lead={k < lead && k < n - 1 ? "" : undefined} className="ot-dial-figure"> {f} ))} {unit ? {unit} : null}

e.target.value !== "" && set(Number(e.target.value))} onKeyDown={keys} /> Up and down turn the figure in parentheses; left and right choose another.

) } export { Dial, type DialProps, type DialOption, type DialValue } 67:T3324,@layer components { /* ── ot-dial ── a radio on an arc. The whole dial rolls to what you choose: --sel is animated, and size, colour and italic all follow its distance. */ @property --sel { syntax: ""; inherits: true; initial-value: 0; } .ot-dial { --r: min(13rem, 32vw); border: 0; margin: 0; padding: 0; min-width: 0; } .ot-dial > legend { padding: 0; margin-bottom: var(--ot-space-5); } .ot-dial-face { position: relative; width: calc(2 * var(--r) + 3em); height: calc(var(--r) + 3.5em); transition: --sel var(--ot-andante) var(--ot-spiccato); } .ot-dial > .ot-dial-face { font-size: var(--ot-mp); } .ot-dial:has(label:nth-of-type(1) > input:checked) .ot-dial-face { --sel: 0; } .ot-dial:has(label:nth-of-type(2) > input:checked) .ot-dial-face { --sel: 1; } .ot-dial:has(label:nth-of-type(3) > input:checked) .ot-dial-face { --sel: 2; } .ot-dial:has(label:nth-of-type(4) > input:checked) .ot-dial-face { --sel: 3; } .ot-dial:has(label:nth-of-type(5) > input:checked) .ot-dial-face { --sel: 4; } .ot-dial:has(label:nth-of-type(6) > input:checked) .ot-dial-face { --sel: 5; } .ot-dial:has(label:nth-of-type(7) > input:checked) .ot-dial-face { --sel: 6; } .ot-dial:has(label:nth-of-type(8) > input:checked) .ot-dial-face { --sel: 7; } .ot-dial:has(label:nth-of-type(9) > input:checked) .ot-dial-face { --sel: 8; } .ot-dial > .ot-dial-face > label { --a: calc(170deg - 160deg * var(--i) / (var(--n) - 1)); --d: max(var(--i) - var(--sel), var(--sel) - var(--i)); --near: max(0, 1 - var(--d)); position: absolute; left: calc(50% + cos(var(--a)) * var(--r)); top: calc(1.75em + var(--r) - sin(var(--a)) * var(--r)); translate: -50% -50%; scale: calc(1 + 1.4 * var(--near)); display: grid; place-items: center; cursor: pointer; font-variant-numeric: lining-nums; color: color-mix(in srgb, var(--ot-ink) calc(100% - min(var(--d), 3) * 33%), var(--ot-pencil)); -webkit-tap-highlight-color: transparent; } .ot-dial label > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .ot-dial label > span, .ot-dial label::after { grid-area: 1 / 1; } .ot-dial label > span { opacity: calc(1 - var(--near)); } .ot-dial label::after { content: attr(data-text) / ""; opacity: var(--near); font-family: var(--ot-expression); font-style: italic; font-size: calc(var(--ot-expression-scale) * 1em); line-height: 1; } .ot-dial label:hover { color: var(--ot-ink); } .ot-dial label:has(input:focus-visible) { outline: var(--ot-stroke) solid var(--ot-accent); outline-offset: 4px; border-radius: 50%; } .ot-dial-arc, .ot-dial-dot { position: absolute; pointer-events: none; } .ot-dial-arc { --ri: calc(var(--r) - 2.1em); left: calc(50% - var(--ri)); top: calc(1.75em + var(--r) - var(--ri)); width: calc(2 * var(--ri)); height: calc(2 * var(--ri)); border-radius: 50%; box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-rule-strong); clip-path: inset(0 0 50% 0); } .ot-dial-dot { --a: calc(170deg - 160deg * var(--sel) / (var(--n) - 1)); --ri: calc(var(--r) - 2.1em); left: calc(50% + cos(var(--a)) * var(--ri)); top: calc(1.75em + var(--r) - sin(var(--a)) * var(--ri)); width: var(--ot-dot); height: var(--ot-dot); translate: -50% -50%; border-radius: 50%; background: var(--ot-accent); } .ot-dial:not(:has(input:checked)) .ot-dial-dot { opacity: 0; } .ot-dial-unit { position: absolute; left: 50%; bottom: 0.4em; translate: -50% 0; font-size: var(--ot-pp); color: var(--ot-pencil); } /* Right to left the first choice starts on the right, so arrow keys and the arc agree. */ .ot-dial:is([dir="rtl"], [dir="rtl"] *) > .ot-dial-face > label { left: calc(50% - cos(var(--a)) * var(--r)); } .ot-dial:is([dir="rtl"], [dir="rtl"] *) .ot-dial-dot { left: calc(50% - cos(var(--a)) * var(--ri)); } /* ── the tuner ── a long scale on the rim of a wheel, seen edge on. Script turns --pos (in steps) and every mark sits at the angle (v - pos) / k, so marks spread under the index and crowd and fade as the rim turns away. Your number reads above in italic, on a drum that turns with the wheel. */ .ot-dial[data-variant="tuner"] { --ot-dial-pitch: 13px; --k: 15; --R: calc(var(--k) * var(--ot-dial-pitch)); } @media (max-width: 520px) { .ot-dial[data-variant="tuner"] { --ot-dial-pitch: 10px; } } .ot-dial[data-variant="tuner"] > .ot-dial-face { display: grid; justify-items: center; gap: var(--ot-space-5); width: calc(2 * var(--R)); max-width: 100%; height: auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .ot-dial[data-held] > .ot-dial-face { cursor: grabbing; } .ot-dial-read { display: flex; align-items: baseline; gap: 0.3em; transition: translate var(--ot-andante) var(--ot-spiccato); } .ot-dial[data-held] .ot-dial-read { translate: 0 -5px; transition-duration: var(--ot-moderato); } .ot-dial-drum { display: inline-block; overflow: clip; height: 1.1em; min-width: calc(var(--chars) * 1ch); text-align: end; font-family: var(--ot-expression); font-style: italic; font-size: calc(var(--ot-expression-scale) * var(--ot-f)); line-height: 1.1; color: var(--ot-ink); font-variant-numeric: tabular-nums lining-nums; } .ot-dial-drum::before, .ot-dial-drum::after { display: block; translate: 0 calc(var(--f, 0) * -1.1em); } .ot-dial-drum::before { content: attr(data-a); } .ot-dial-drum::after { content: attr(data-b) / ""; } .ot-dial[data-variant="tuner"] .ot-dial-unit { position: static; translate: none; font-size: var(--ot-p); color: var(--ot-graphite); } .ot-dial-scale { position: relative; width: 100%; height: calc(16px + var(--ot-space-2) + 1.6 * var(--ot-pp)); overflow-x: clip; } /* The rim, a hairline that turns away at both ends. */ .ot-dial-scale::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--ot-hairline); background: var(--ot-rule-strong); mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent); } .ot-dial-tick { --t: calc((var(--v) - var(--pos)) / var(--k) * 1rad); --c: max(0, cos(var(--t))); position: absolute; top: 0; left: calc(50% + sin(var(--t)) * var(--R)); width: var(--ot-hairline); height: 6px; background: var(--ot-rule-strong); opacity: calc(var(--c) * var(--c)); } .ot-dial-tick[data-kind="half"] { height: 10px; background: var(--ot-pencil); } .ot-dial-tick[data-kind="major"] { height: 16px; background: var(--ot-graphite); } .ot-dial-tick > span { position: absolute; left: 50%; top: calc(16px + var(--ot-space-2)); translate: -50% 0; scale: var(--c) 1; --near: max(0, 1 - max(var(--v) - var(--pos), var(--pos) - var(--v)) / 5); font-size: var(--ot-pp); line-height: 1.6; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: color-mix(in srgb, var(--ot-ink) calc(var(--near) * 100%), var(--ot-graphite)); /* inks as it passes the index */ } /* The index: an ink hairline standing through the rim, the accent dot on top (the slider's hand). */ .ot-dial-index { position: absolute; left: 50%; top: -12px; width: var(--ot-stroke); height: calc(12px + 16px + 2px); translate: -50% 0; background: var(--ot-ink); } .ot-dial-index::before { content: ""; position: absolute; left: 50%; top: 0; width: var(--ot-dot); height: var(--ot-dot); translate: -50% -130%; border-radius: 50%; background: var(--ot-accent); } .ot-dial:not([data-variant="arc"])[data-force~="focus"] { outline: 0; } .ot-dial:not([data-variant="arc"]):has(> input:focus-visible) > .ot-dial-face, .ot-dial:not([data-variant="arc"])[data-force~="focus"] > .ot-dial-face { outline: var(--ot-stroke) solid var(--ot-accent); outline-offset: 12px; } .ot-dial:has(input:disabled) { opacity: 0.45; } .ot-dial:has(input:disabled) > .ot-dial-face, .ot-dial:has(input:disabled) label { cursor: not-allowed; } .ot-dial:is([dir="rtl"], [dir="rtl"] *) .ot-dial-tick { left: calc(50% - sin(var(--t)) * var(--R)); } /* ── dynamics ── the number's type size is its loudness. --u (0 to 1) is set from the value, and the numeral is set between the p and fff steps on a curve that rises the way loudness does (little change at the quiet end, most at the loud), so it grows up from its baseline as you turn it up. The room for the loudest is always kept, so nothing moves around it. Under it, in the bold italic and the accent, the marking a score would print there: niente at the bottom, then ppp to fff. Dragging follows the hand at once; a key or a scroll swells it to the next size with spiccato. */ .ot-dial[data-variant="dynamics"] { --u: 0; --e: calc((pow(9, var(--u)) - 1) / 8); } .ot-dial[data-variant="dynamics"] > .ot-dial-face { display: grid; justify-items: start; gap: var(--ot-space-3); width: max-content; max-width: 100%; height: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .ot-dial[data-variant="dynamics"][data-held] > .ot-dial-face { cursor: grabbing; } .ot-dial-loud { display: flex; align-items: baseline; gap: 0.3em; overflow: visible; /* the loudest numeral's height and width, kept */ height: calc(var(--ot-expression-scale) * var(--ot-fff) * 0.9); min-width: calc(var(--chars) * 0.62 * var(--ot-expression-scale) * var(--ot-fff)); align-content: end; flex-wrap: wrap; } .ot-dial-numeral { font-family: var(--ot-expression); font-style: italic; font-weight: 400; line-height: 0.9; color: var(--ot-ink); font-size: calc(var(--ot-expression-scale) * (var(--ot-p) + (var(--ot-fff) - var(--ot-p)) * var(--e))); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; transition: font-size var(--ot-moderato) var(--ot-spiccato); } .ot-dial[data-held] .ot-dial-numeral { transition: none; } .ot-dial[data-variant="dynamics"] .ot-dial-unit { position: static; translate: none; font-size: var(--ot-p); color: var(--ot-graphite); } .ot-dial-marking { font-family: var(--ot-expression); font-style: italic; font-weight: 600; letter-spacing: 0.02em; line-height: 1; font-size: calc(var(--ot-expression-scale) * var(--ot-mp)); color: var(--ot-accent); } .ot-dial-marking[data-mark="niente"] { font-weight: 400; color: var(--ot-pencil); } /* ── tumbler ── a whole number set figure by figure, like a lock's wheels. The figures stand large in the italic at even steps (tabular, 1ch apart plus --g), leading zeros in pencil; the one you turn is held in a pair of thin parentheses in the accent, as "20(25)" holds the part that changes. Left and right (or a tap) step the pair to another figure and it lands with spiccato; up and down turn that figure, which turns in from below as the number grows and from above as it falls. */ .ot-dial[data-variant="tumbler"] > .ot-dial-face { display: inline-flex; align-items: baseline; gap: var(--ot-space-4); width: auto; height: auto; padding-inline: 0.5em; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .ot-dial-figures { --g: 0.42em; position: relative; display: inline-flex; gap: var(--g); padding-inline: 0.18em; font-family: var(--ot-expression); font-style: italic; font-weight: 400; line-height: 1.1; color: var(--ot-ink); /* ponytail: a phone narrows the wheels by the viewport, enough for four figures; a query on the dial's own width if a tumbler sits in a narrow column on a wide screen. */ font-size: min(calc(var(--ot-expression-scale) * var(--ot-ff)), 16vw); font-variant-numeric: lining-nums tabular-nums; } .ot-dial-figure { display: inline-block; width: 1ch; text-align: center; transition: color var(--ot-allegro); } .ot-dial-figure[data-lead] { color: var(--ot-rule-strong); } .ot-dial-cursor { position: absolute; inset-block: 0; left: 0.18em; width: 1ch; pointer-events: none; translate: calc(var(--at) * (1ch + var(--g))) 0; transition: translate var(--ot-moderato) var(--ot-spiccato); } .ot-dial-cursor::before, .ot-dial-cursor::after { position: absolute; top: 50%; translate: 0 -52%; font-family: var(--ot-voice); font-style: normal; font-weight: 200; font-size: 0.92em; line-height: 1; color: var(--ot-accent); } .ot-dial-cursor::before { content: "(" / ""; right: calc(100% + 0.03em); } .ot-dial-cursor::after { content: ")" / ""; left: calc(100% + 0.03em); } .ot-dial[data-variant="tumbler"] .ot-dial-unit { position: static; translate: none; font-size: var(--ot-p); color: var(--ot-graphite); } .ot-dial[data-variant="tumbler"][data-held] .ot-dial-cursor::before { translate: -0.06em -52%; } .ot-dial[data-variant="tumbler"][data-held] .ot-dial-cursor::after { translate: 0.06em -52%; } @media (forced-colors: active) { .ot-dial-cursor::before, .ot-dial-cursor::after, .ot-dial-marking { forced-color-adjust: none; color: Highlight; } } } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.json"]}]]}],["$","$L63",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L64",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"../styles/0nlytype/dial.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L65",null,{"files":[{"path":"registry/0nlytype/ui/dial.tsx","content":"$66","type":"registry:ui"},{"path":"registry/0nlytype/styles/dial.css","content":"$67","type":"registry:file","target":"styles/0nlytype/dial.css"}],"className":"h-[70svh] min-h-80"}]]}]