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:T3248,"use client"; import { useState, useRef, useEffect, useCallback } from "react"; import { cn } from "@/lib/utils"; import { playSfx } from "@/lib/sfx-bus"; interface VintageSliderProps { label?: string; min?: number; max?: number; value?: number; accent?: string; fmt?: (v: number) => string; onChange?: (value: number) => void; /** * Aperta a caixa pra ~56px: rótulo, leitura e trilho continuam, só a régua * min/max de baixo sai (os limites não mudam de um fader pro vizinho). * * Existe porque o rig nasceu para uma bancada larga, com poucos controles * grandes. Num painel de parâmetros — dez ou quinze sliders empilhados numa * coluna de 300px — a folga do rig vira rolagem, e o operador perde de vista * metade dos controles que precisa comparar entre si. * * A LARGURA não é assunto desta prop: `cn` roda tailwind-merge, então * `className="w-full"` já ganha do w-[220px] padrão. */ dense?: boolean; className?: string; } export function VintageSlider({ label = "GAIN", min = 0, max = 10, value = 5, accent, fmt, onChange, dense = false, className, }: VintageSliderProps) { const [currentValue, setCurrentValue] = useState(value); const [dragging, setDragging] = useState(false); const [hover, setHover] = useState(false); const trackRef = useRef(null); const fillRef = useRef(null); const thumbRef = useRef(null); const valRef = useRef(currentValue); valRef.current = currentValue; /** Estalo a cada 1/20 do curso, só quando a mão move (nunca por prop). */ const passoSom = useRef(null); const estalarRef = useRef<(v: number) => void>(() => {}); const estalar = (v: number) => { const passo = Math.round(((v - min) / (max - min)) * 20); if (passoSom.current !== null && passo !== passoSom.current) playSfx("detent"); passoSom.current = passo; }; estalarRef.current = estalar; useEffect(() => { if (value !== valRef.current) setCurrentValue(value); }, [value]); /** * O punho e a faixa são escritos no DOM na mão, dentro de um rAF. * * O relato era "lag ao arrastar", e a causa estava em dois lugares somados. * O primeiro é o culpado óbvio, e era deliberado: `transition-[width]` e * `transition-[left]` de 75ms no punho. Uma transição num valor que o dedo * está ditando não suaviza nada — ela atrasa o desenho em 75ms fixos, e o * punho passa o arraste inteiro correndo atrás do cursor. Some no arraste, * volta quando o valor chega de fora (roda, duplo clique, prop). * * O segundo é o caminho do estado: cada `pointermove` disparava um render do * componente E do dono do estado — no painel de dez faders da vitrine, um * fader arrastado repintava os outros nove. Aqui o movimento escreve pixel * direto e junta as amostras do frame num rAF só; o estado é atualizado uma * vez por frame, para o número embaixo do trilho. */ const pendente = useRef<{ x: number; fine: boolean } | null>(null); const frame = useRef(0); const pintar = useCallback((pct: number) => { if (fillRef.current) fillRef.current.style.width = `${pct}%`; if (thumbRef.current) thumbRef.current.style.left = `calc(${pct}% - 7px)`; }, []); const update = useCallback( (clientX: number, fine: boolean) => { const r = trackRef.current?.getBoundingClientRect(); if (!r) return; const raw = (clientX - r.left) / r.width; const pct = Math.max(0, Math.min(1, raw)); const v = min + pct * (max - min); const snapped = fine ? Math.round(v * 100) / 100 : Math.round(v * 10) / 10; valRef.current = snapped; pintar(((snapped - min) / (max - min)) * 100); estalarRef.current(snapped); setCurrentValue(snapped); onChange?.(snapped); }, [min, max, onChange, pintar] ); const agendar = useCallback( (clientX: number, fine: boolean) => { pendente.current = { x: clientX, fine }; if (frame.current) return; frame.current = requestAnimationFrame(() => { frame.current = 0; const p = pendente.current; pendente.current = null; if (p) update(p.x, p.fine); }); }, [update] ); useEffect( () => () => { if (frame.current) cancelAnimationFrame(frame.current); }, [] ); // Pointer events com captura, e não listener de mouse no `document`. // // O motivo é um bug que aparece no primeiro arraste: sem `preventDefault` no // mousedown o browser começa uma SELEÇÃO DE TEXTO junto, e arrastar o slider // vai pintando de azul tudo que o cursor cruza. A captura resolve o outro // lado do mesmo problema — os eventos continuam chegando aqui mesmo com o // cursor fora do trilho, sem precisar ouvir o documento inteiro. // // É o mesmo desenho que o `scrub-input` já usa, e de quebra o controle passa // a funcionar no toque, que o caminho de mouse nunca cobriu. const onPointerDown = (e: React.PointerEvent) => { if (e.pointerType === "mouse" && e.button !== 0) return; e.preventDefault(); e.currentTarget.setPointerCapture(e.pointerId); setDragging(true); passoSom.current = Math.round(((valRef.current - min) / (max - min)) * 20); update(e.clientX, e.shiftKey); }; const onPointerMove = (e: React.PointerEvent) => { if (dragging) agendar(e.clientX, e.shiftKey); }; const endDrag = (e: React.PointerEvent) => { if (e.currentTarget.hasPointerCapture(e.pointerId)) { e.currentTarget.releasePointerCapture(e.pointerId); } setDragging(false); }; const handleWheel = (e: React.WheelEvent) => { e.stopPropagation(); const step = e.shiftKey ? (max - min) * 0.002 : (max - min) * 0.01; const dir = e.deltaY < 0 ? 1 : -1; const next = Math.max(min, Math.min(max, currentValue + dir * step)); if (passoSom.current === null) estalar(currentValue); estalar(next); setCurrentValue(next); onChange?.(next); }; /* * Teclado: o slider era só do ponteiro. Seta = 1% (Shift = 0,2%, o mesmo * fino da roda), Page = 10%, Home/End = limites. */ const handleKeyDown = (e: React.KeyboardEvent) => { const faixa = max - min; const passo = e.shiftKey ? faixa * 0.002 : faixa * 0.01; let next: number | null = null; if (e.key === "ArrowRight" || e.key === "ArrowUp") next = currentValue + passo; else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = currentValue - passo; else if (e.key === "PageUp") next = currentValue + faixa * 0.1; else if (e.key === "PageDown") next = currentValue - faixa * 0.1; else if (e.key === "Home") next = min; else if (e.key === "End") next = max; if (next === null) return; e.preventDefault(); e.stopPropagation(); next = Math.max(min, Math.min(max, next)); if (passoSom.current === null) estalar(currentValue); estalar(next); setCurrentValue(next); onChange?.(next); }; const handleDoubleClick = () => { const mid = (min + max) / 2; setCurrentValue(mid); onChange?.(mid); }; const percentage = ((currentValue - min) / (max - min)) * 100; const cor = accent || "var(--vintage-light)"; const leitura = fmt ? fmt(currentValue) : currentValue.toFixed(1); const gravado = "var(--vintage-engrave)"; return (

setHover(true)} onMouseLeave={() => setHover(false)} onWheel={handleWheel} onDoubleClick={handleDoubleClick} title={`${label}: ${leitura} arraste · shift = fino · roda · duplo clique = centro`} style={{ // O painel do kit: chapa escura, luz de cima, sombra que fecha embaixo. background: "linear-gradient(180deg, var(--vintage-surface-3), var(--vintage-surface-2))", border: "1px solid var(--vintage-surface-1)", boxShadow: "var(--vintage-panel-shadow)", }} > {/* Rótulo e leitura na mesma linha: o número fica onde o olho já está. */}

{label} {leitura}

{/* Régua serigrafada: onze traços, o do meio maior. */}

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

{/* O rasgo na chapa, e a faixa acesa dentro dele. */}

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

{!dense && (

{min} {max}

)}

); } 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-slider.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]