5f: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"] 60:T1f8d,"use client"; import { useRef, useState } from "react"; import type { CSSProperties, KeyboardEvent, PointerEvent } from "react"; import "./MetalKnob.css"; export interface MetalKnobProps { /** Valor actual (modo controlado). */ value?: number; /** Valor inicial cuando no se controla desde fuera. */ defaultValue?: number; /** Se llama cada vez que cambia el valor. */ onChange?: (value: number) => void; /** Valor mínimo. */ min?: number; /** Valor máximo. */ max?: number; /** Salto entre valores. */ step?: number; /** Rótulo bajo la perilla. */ label?: string; /** Unidad que se muestra junto al valor. */ unit?: string; /** Diámetro de la perilla, en px. */ size?: number; /** Marcas grandes de la escala. */ ticks?: number; /** Color de las marcas encendidas. */ accent?: string; /** Deshabilita la perilla. */ disabled?: boolean; /** Clase extra para el contenedor. */ className?: string; /** Estilos extra para el contenedor. */ style?: CSSProperties; } const BARRIDO = 270; // grados totales que recorre la perilla const SUBDIV = 5; // subdivisiones entre dos marcas grandes const limitar = (v: number, a: number, b: number) => Math.min(b, Math.max(a, v)); /** Diferencia de ángulos normalizada a -180..180 (para no saltar al cruzar el norte). */ const diferencia = (a: number, b: number) => ((((a - b) % 360) + 540) % 360) - 180; /** Perilla metálica moleteada: se gira arrastrando en círculo o con las flechas, con escala de marcas que se encienden y un reflejo que sigue al cursor. */ export function MetalKnob({ value: controlado, defaultValue = 64, onChange, min = 0, max = 100, step = 1, label = "Volume", unit = "", size = 140, ticks = 11, accent = "#ffb13b", disabled = false, className = "", style, }: MetalKnobProps) { const [interno, setInterno] = useState(defaultValue); const valor = limitar(controlado ?? interno, min, max); const [crudo, setCrudo] = useState(null); // ángulo continuo mientras se arrastra const perilla = useRef(null); const gesto = useRef<{ ultimo: number; ang: number } | null>(null); const rango = max - min || 1; const aAngulo = (v: number) => ((v - min) / rango) * BARRIDO - BARRIDO / 2; const aValor = (ang: number) => { const bruto = min + ((ang + BARRIDO / 2) / BARRIDO) * rango; const paso = step > 0 ? Math.round((bruto - min) / step) * step + min : bruto; return limitar(Number(paso.toFixed(6)), min, max); }; const angulo = crudo ?? aAngulo(valor); const fijar = (v: number) => { const n = limitar(v, min, max); if (n === valor) return; if (controlado === undefined) setInterno(n); onChange?.(n); }; const puntero = (e: PointerEvent) => { const r = perilla.current!.getBoundingClientRect(); const dx = e.clientX - (r.left + r.width / 2); const dy = e.clientY - (r.top + r.height / 2); return { ang: (Math.atan2(dx, -dy) * 180) / Math.PI, dist: Math.hypot(dx, dy) }; }; const alBajar = (e: PointerEvent) => { if (disabled) return; e.currentTarget.setPointerCapture(e.pointerId); gesto.current = { ultimo: puntero(e).ang, ang: aAngulo(valor) }; setCrudo(gesto.current.ang); }; const alMover = (e: PointerEvent) => { // El reflejo sigue al cursor aunque no se esté arrastrando. const r = e.currentTarget.getBoundingClientRect(); e.currentTarget.style.setProperty("--fmk-x", limitar((e.clientX - r.left) / r.width, 0, 1).toFixed(3)); e.currentTarget.style.setProperty("--fmk-y", limitar((e.clientY - r.top) / r.height, 0, 1).toFixed(3)); const g = gesto.current; if (!g) return; const p = puntero(e); if (p.dist < 12) return; // junto al centro el ángulo es inestable g.ang = limitar(g.ang + diferencia(p.ang, g.ultimo), -BARRIDO / 2, BARRIDO / 2); g.ultimo = p.ang; setCrudo(g.ang); fijar(aValor(g.ang)); }; const alSoltar = () => { if (!gesto.current) return; gesto.current = null; setCrudo(null); // el ángulo vuelve al valor con paso, con rebote de muelle }; const alTeclado = (e: KeyboardEvent) => { if (disabled) return; const salto = step > 0 ? step : rango / 100; const mapa: Record = { ArrowUp: salto, ArrowRight: salto, ArrowDown: -salto, ArrowLeft: -salto, PageUp: salto * 10, PageDown: -salto * 10 }; if (e.key in mapa) { e.preventDefault(); fijar(valor + mapa[e.key]); } else if (e.key === "Home") { e.preventDefault(); fijar(min); } else if (e.key === "End") { e.preventDefault(); fijar(max); } }; // Escala: marcas grandes y pequeñas; se encienden hasta el valor actual. const W = size + 104; const c = W / 2; const r0 = size / 2 + 24; const segmentos = Math.max(2, ticks - 1); const total = segmentos * SUBDIV; const fraccion = (valor - min) / rango; const marcas = Array.from({ length: total + 1 }, (_, m) => { const f = m / total; const a = ((-BARRIDO / 2 + f * BARRIDO) * Math.PI) / 180; const grande = m % SUBDIV === 0; const r1 = r0 + (grande ? 11 : 6); return { x1: c + r0 * Math.sin(a), y1: c - r0 * Math.cos(a), x2: c + r1 * Math.sin(a), y2: c - r1 * Math.cos(a), grande, on: f <= fraccion + 1e-6 }; }); const etiqueta = (f: number) => { const a = ((-BARRIDO / 2 + f * BARRIDO) * Math.PI) / 180; return { x: c + (r0 + 24) * Math.sin(a), y: c - (r0 + 24) * Math.cos(a) }; }; const eMin = etiqueta(0); const eMax = etiqueta(1); const vars = { "--fmk-d": `${size}px`, "--fmk-accent": accent, "--fmk-w": `${W}px` } as CSSProperties; const texto = `${Number(valor.toFixed(2))}${unit ? ` ${unit}` : ""}`; return (

{ e.currentTarget.style.removeProperty("--fmk-x"); e.currentTarget.style.removeProperty("--fmk-y"); }} onKeyDown={alTeclado} onDoubleClick={() => fijar(defaultValue)} >

{label} {texto}

); } export default MetalKnob; 61:T1d83,@property --fmk-x { syntax: ""; inherits: true; initial-value: 0.34; } @property --fmk-y { syntax: ""; inherits: true; initial-value: 0.24; } .furin-metal-knob { --fmk-d: 140px; --fmk-accent: #ffb13b; --fmk-grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.9'%20numOctaves='2'%20seed='5'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200%200%200%200%201'/%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type='linear'%20slope='2.2'%20intercept='-0.6'/%3E%3CfeFuncG%20type='linear'%20slope='2.2'%20intercept='-0.6'/%3E%3CfeFuncB%20type='linear'%20slope='2.2'%20intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E"); display: inline-flex; flex-direction: column; align-items: center; user-select: none; } .furin-metal-knob--off { opacity: 0.55; filter: grayscale(0.6); } .furin-metal-knob__dial { position: relative; width: var(--fmk-w); height: var(--fmk-w); display: grid; place-items: center; isolation: isolate; } /* Escala: marcas grabadas, las encendidas brillan con el color de acento. */ .furin-metal-knob__scale { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .furin-metal-knob__tick { stroke: #3a3f47; stroke-width: 1.4; stroke-linecap: round; transition: stroke 0.18s ease; } .furin-metal-knob__tick.is-major { stroke-width: 2.2; stroke: #4a5059; } .furin-metal-knob__tick.is-on { stroke: var(--fmk-accent); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--fmk-accent) 75%, transparent)); } .furin-metal-knob__num { font: 600 10px / 1 ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; fill: #6b727c; letter-spacing: 0.04em; } /* Alojamiento: un pozo oscuro con bisel donde se asienta la perilla. */ .furin-metal-knob__well { position: absolute; width: calc(var(--fmk-d) + 26px); height: calc(var(--fmk-d) + 26px); border-radius: 50%; background: radial-gradient(circle at 50% 38%, #101216 0%, #07080a 72%); box-shadow: 0 0 0 2px #2a2e34, 0 0 0 3px #0a0b0d, 0 1px 0 3px rgba(255, 255, 255, 0.1), inset 0 4px 10px rgba(0, 0, 0, 0.95); } /* Aro de aluminio oscuro alrededor del pozo, con reflejos de estudio. */ .furin-metal-knob__well::before { content: ""; position: absolute; inset: -7px; z-index: -1; border-radius: 50%; background: conic-gradient(from 30deg, #3b4047, #7a808a 12%, #2a2d33 25%, #646a74 37%, #3b4047 50%, #7a808a 62%, #2a2d33 75%, #646a74 87%, #3b4047); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 6px 12px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.35); } .furin-metal-knob__knob { position: relative; width: var(--fmk-d); height: var(--fmk-d); border-radius: 50%; cursor: grab; touch-action: none; isolation: isolate; outline: none; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.7), 0 10px 14px -2px rgba(0, 0, 0, 0.65), 0 24px 30px -8px rgba(0, 0, 0, 0.8); transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.25s ease; } .furin-metal-knob__knob.is-dragging { cursor: grabbing; transform: scale(0.985); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7), 0 6px 10px -2px rgba(0, 0, 0, 0.65), 0 14px 20px -8px rgba(0, 0, 0, 0.8); } .furin-metal-knob__knob:focus-visible { outline: 2px solid rgba(150, 185, 255, 0.95); outline-offset: 10px; } .furin-metal-knob--off .furin-metal-knob__knob { cursor: not-allowed; } /* Parte que gira: aro moleteado y tapa con su marca. El snap al valor con paso rebota como muelle. */ .furin-metal-knob__turn { position: absolute; inset: 0; border-radius: 50%; transition: transform 0.38s cubic-bezier(0.3, 1.45, 0.5, 1); will-change: transform; } .furin-metal-knob__knob.is-dragging .furin-metal-knob__turn { transition: none; } /* Moleteado: una onda triangular de 3° vista desde arriba como dientes finos. */ .furin-metal-knob__grip { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #3c4048 0deg, #cfd4db 1.5deg, #3c4048 3deg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 8px rgba(0, 0, 0, 0.55); } .furin-metal-knob__cap { position: absolute; inset: calc(var(--fmk-d) * 0.11); border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 0 0.6px, rgba(0, 0, 0, 0.08) 0.6px 1.5px), radial-gradient(circle at 50% 50%, #c4cad2 0%, #a2a9b3 100%); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.75), 0 0 0 3px rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 0 0 3.5px rgba(0, 0, 0, 0.16), inset 0 -3px 5px rgba(0, 0, 0, 0.25); } /* Marca: una ranura rebajada con filo de luz. */ .furin-metal-knob__mark { position: absolute; left: 50%; top: 7%; width: calc(var(--fmk-d) * 0.034); height: 25%; min-width: 4px; transform: translateX(-50%); border-radius: 99px; background: linear-gradient(180deg, #0c0d10, #2a2d33); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 1px 2px rgba(0, 0, 0, 0.9); } /* Luz de estudio fija: no gira con la perilla, así que los reflejos se quedan en su sitio. */ .furin-metal-knob__light { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: overlay; } .furin-metal-knob__light--ring { inset: 0; background: conic-gradient(from 0deg, #fff 0%, #000 12%, #bbb 22%, #000 36%, #fff 50%, #000 62%, #bbb 72%, #000 86%, #fff 100%); opacity: 0.8; } .furin-metal-knob__light--cap { inset: calc(var(--fmk-d) * 0.11); background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 52%), conic-gradient(from 20deg, #e8e8e8 0%, #6a6a6a 14%, #f4f4f4 26%, #7c7c7c 40%, #dedede 52%, #626262 66%, #f6f6f6 78%, #787878 90%, #e8e8e8 100%); opacity: 0.55; } /* Punto caliente que sigue al cursor. */ .furin-metal-knob__spec { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at calc(var(--fmk-x) * 100%) calc(var(--fmk-y) * 100%), rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.2) 22%, rgba(255, 255, 255, 0) 46%); mix-blend-mode: normal; transition: --fmk-x 0.4s cubic-bezier(0.2, 0.75, 0.25, 1), --fmk-y 0.4s cubic-bezier(0.2, 0.75, 0.25, 1); } .furin-metal-knob__knob { transition: --fmk-x 0.4s cubic-bezier(0.2, 0.75, 0.25, 1), --fmk-y 0.4s cubic-bezier(0.2, 0.75, 0.25, 1), transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.25s ease; } /* Lectura. */ .furin-metal-knob__readout { display: grid; justify-items: center; gap: 6px; margin-top: -30px; } .furin-metal-knob__label { font: 600 10px / 1 ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: #7b828c; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7); } .furin-metal-knob__value { font: 600 20px / 1 ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; color: #e9ecf0; text-shadow: 0 0 12px color-mix(in srgb, var(--fmk-accent) 40%, transparent); } @media (prefers-reduced-motion: reduce) { .furin-metal-knob__turn, .furin-metal-knob__knob, .furin-metal-knob__spec, .furin-metal-knob__tick { transition: none; } } 5e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L5f",null,{"files":[{"path":"registry/metal-knob/MetalKnob.tsx","content":"$60","type":"registry:component","target":"components/furin/metal-knob/MetalKnob.tsx"},{"path":"registry/metal-knob/MetalKnob.css","content":"$61","type":"registry:file","target":"components/furin/metal-knob/MetalKnob.css"}],"className":"h-[70svh] min-h-80"}]]}]