61: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"] 62: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"] 63:T22b2,"use client"; import { useState } from "react"; import { cn } from "@/lib/utils"; import { KNOB_TOUCH_ACTION, useKnobDrag } from "@/hooks/use-knob-drag"; interface VintageKnobProps { label?: string; min?: number; max?: number; value?: number; log?: boolean; accent?: string; size?: number; fmt?: (v: number) => string; onChange?: (value: number) => void; className?: string; } /** * A caixa do dial dentro do quadro de 81×75. Corpo e listra desenham no MESMO * retângulo, um por cima do outro — é isso que mantém a listra encaixada no * centro do metal quando ela gira. */ const CAIXA_DIAL = { width: "43.2%", height: "56%", left: "28.5%", top: "24.3%", } as const; /** * O corpo: metal, chanfro e sombra. **Não gira.** * * Antes o botão inteiro girava, gradiente especular junto, e o resultado era * fisicamente errado — a luz do painel andava atrás do dedo do usuário. Luz e * sombra são da sala, não da peça; o que gira num potenciômetro é o eixo, e * quem denuncia o eixo é a listra. */ function KnobBody() { return (

); } /** A listra de direção. É a única coisa que se move quando o valor muda. */ function KnobPointer({ rotation }: { rotation: number }) { return (

); } function KnobMarks() { const cx = 40.5, cy = 37.5, r = 32; const angles = Array.from({ length: 11 }, (_, i) => -135 + i * 27); return ( ); } export function VintageKnob({ label = "BASS", min = 0, max = 10, value = 5, log = false, accent = "var(--vintage-light)", size = 81, fmt, onChange, className, }: VintageKnobProps) { const [hover, setHover] = useState(false); const { currentValue, rotation, isDragging, handlePointerDown, handleDoubleClick, handleWheel, handleKeyDown, } = useKnobDrag({ min, max, value, log, onChange }); const scale = size / 81; const scaledH = Math.round(75 * scale); const leitura = fmt ? fmt(currentValue) : currentValue.toFixed(1); return (

setHover(true)} onMouseLeave={() => setHover(false)} title={`${label}: ${leitura} arraste ↕ · shift = fino · roda · duplo clique = centro`} style={{ cursor: isDragging ? "grabbing" : "grab", touchAction: KNOB_TOUCH_ACTION }} > {/* Sem brilho no hover: luz é da sala, não do knob. Quem responde à mão é o rótulo gravado, que acende. */}

{label} {leitura}

); } 60:["$","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,["$","$L61",null,{"namespace":"@visant","registryDependencies":["@visant/vintage-theme","@visant/use-knob-drag","utils"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/vintage/ui/vintage-knob.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]