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:T252a,"use client"; import { useState, useEffect, useCallback, useRef } from "react"; import { cn } from "@/lib/utils"; import { playSfx } from "@/lib/sfx-bus"; interface VintageEQProps { labels?: string[]; title?: string; values?: number[]; accent?: string; onChange?: (values: number[]) => void; className?: string; } export function VintageEQ({ labels = ["63Hz", "125Hz", "250Hz", "500Hz", "1kHz", "2kHz"], title = "GRAPHIC EQ", values: initialValues, accent, onChange, className, }: VintageEQProps) { const [values, setValues] = useState( initialValues ?? labels.map(() => 5) ); const [draggingIndex, setDraggingIndex] = useState(null); const [hoverIndex, setHoverIndex] = useState(null); /* * Um caminho só pra mudar uma banda — ponteiro, roda e teclado passam aqui. * * O próximo estado sai do ref, FORA de um updater de `setValues`: o * `onChange` do pai morava dentro do updater, que o React chama durante o * render (e duas vezes em modo estrito), e o pai ganhava `setState` no meio * do render do EQ. */ const valuesRef = useRef(values); valuesRef.current = values; const onChangeRef = useRef(onChange); onChangeRef.current = onChange; const definir = useCallback((index: number, v: number) => { const next = [...valuesRef.current]; next[index] = Math.max(0, Math.min(10, v)); // Estalo a cada 1/20 do curso da banda. `definir` só é chamado pela mão. if (Math.round(next[index] * 2) !== Math.round(valuesRef.current[index] * 2)) { playSfx("detent"); } valuesRef.current = next; setValues(next); onChangeRef.current?.(next); }, []); const updateValue = useCallback( (index: number, clientY: number, fine: boolean) => { const slider = document.getElementById(`vintage-eq-slider-${index}`); if (!slider) return; const rect = slider.getBoundingClientRect(); const pct = 1 - Math.max(0, Math.min(1, (clientY - rect.top) / rect.height)); const raw = pct * 10; definir(index, fine ? Math.round(raw * 100) / 100 : Math.round(raw * 10) / 10); }, [definir] ); /* Teclado: o fader era só do mouse. Seta = 0,1 (Shift = 0,02, o fino da roda), Page = 1, Home/End = limites. */ const handleKeyDown = (index: number, e: React.KeyboardEvent) => { const passo = e.shiftKey ? 0.02 : 0.1; const atual = valuesRef.current[index]; let v: number | null = null; if (e.key === "ArrowUp" || e.key === "ArrowRight") v = atual + passo; else if (e.key === "ArrowDown" || e.key === "ArrowLeft") v = atual - passo; else if (e.key === "PageUp") v = atual + 1; else if (e.key === "PageDown") v = atual - 1; else if (e.key === "Home") v = 0; else if (e.key === "End") v = 10; if (v === null) return; e.preventDefault(); e.stopPropagation(); definir(index, Math.round(v * 100) / 100); }; useEffect(() => { if (draggingIndex === null) return; const onMove = (e: PointerEvent) => updateValue(draggingIndex, e.clientY, e.shiftKey); const onUp = () => setDraggingIndex(null); document.addEventListener("pointermove", onMove); document.addEventListener("pointerup", onUp); document.addEventListener("pointercancel", onUp); return () => { document.removeEventListener("pointermove", onMove); document.removeEventListener("pointerup", onUp); document.removeEventListener("pointercancel", onUp); }; }, [draggingIndex, updateValue]); const handleWheel = (index: number, e: React.WheelEvent) => { e.stopPropagation(); const step = e.shiftKey ? 0.02 : 0.1; const dir = e.deltaY < 0 ? 1 : -1; definir(index, valuesRef.current[index] + dir * step); }; const handleDoubleClick = (index: number) => definir(index, 5); const gravado = "var(--vintage-engrave)"; const cor = accent || "var(--vintage-light)"; return (

{title}

{labels.map((label, index) => { const isActive = draggingIndex === index || hoverIndex === index; return (

setHoverIndex(index)} onMouseLeave={() => setHoverIndex(null)} > {values[index].toFixed(1)}

handleKeyDown(index, e)} onPointerDown={(e) => { setDraggingIndex(index); updateValue(index, e.clientY, e.shiftKey); }} onWheel={(e) => handleWheel(index, e)} onDoubleClick={() => handleDoubleClick(index)} title={`${label}: ${values[index].toFixed(1)}\narraste · shift = fino · roda · duplo clique = centro`} > {/* Régua serigrafada dos dois lados do rasgo; o 0 dB é maior. */}

{Array.from({ length: 11 }, (_, i) => (

{[0, 1].map((lado) => ( ))}

))}

{/* O rasgo na chapa. */}

{/* Capa do fader: metal escovado, frisos, sombra pra baixo. */}

{label}

); })}

); } 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","utils","@visant/sfx-bus"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/vintage/ui/vintage-eq.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]