);
}
// Big silver aluminum knob (INPUT / OUTPUT) — 1176-style cylindrical knob with black indicator notch
function BigSilverKnob({ value, onChange, label, v }) {
const size = 70;
const ringR = 58;
// Scale numbers for 1176 INPUT/OUTPUT: ∞ · 0 · 6 · 12 · 18 · 24 · 30 · 36 · 48 — wraps counterclockwise
// Matching photo arrangement: ∞ at 7-o'clock, 48 at 8-o'clock going up, 30 at top, 0 at 4-o'clock
// We'll place them at -225° to +45° (going CCW). For simplicity draw 9 markers 30° apart.
const labels = ['∞', '0', '6', '12', '18', '24', '30', '36', '48'];
const minA = -135, maxA = 135;
// value 0..1 maps rotation minA..maxA; numbers positioned around the knob, but in 1176 order
// For visual fidelity place labels evenly on an arc from -140° to +140°
const angle = minA + value * (maxA - minA);
const onPointerDown = (e) => {
e.preventDefault();
const startY = e.clientY;
const startVal = value;
const steps = 40;
let lastStep = Math.round(startVal * steps);
const onMove = (ev) => {
const dy = startY - ev.clientY;
const raw = Math.max(0, Math.min(1, startVal + dy / 220));
const step = Math.round(raw * steps);
if (step !== lastStep) {
lastStep = step;
window.playKnobTick && window.playKnobTick(0.45);
}
onChange(step / steps);
};
const onUp = () => {
window.removeEventListener('pointermove', onMove);
window.removeEventListener('pointerup', onUp);
};
window.addEventListener('pointermove', onMove);
window.addEventListener('pointerup', onUp);
};
const onWheel = (e) => {
e.preventDefault();
const steps = 40;
const dir = e.deltaY > 0 ? -1 : 1;
const cur = Math.round(value * steps);
const next = Math.max(0, Math.min(steps, cur + dir));
if (next !== cur) window.playKnobTick && window.playKnobTick(0.45);
onChange(next / steps);
};
const W = ringR * 2 + 32;
const cx = W / 2, cy = W / 2;
return (
{label}
);
}
// Machined aluminum knob (tall cylinder) — used for INPUT / OUTPUT
function AluminumKnob({ size, angle }) {
// Vintage black knurled/fluted body with brushed aluminum cap and dot indicator
const flutes = 28;
const capR = size * 0.36; // top cap radius
return (
{/* flute/knurl ring — vertical black ridges around the skirt */}
{/* dark outer rim line */}
{/* brushed aluminum top cap (rotates with indicator) */}
{/* brushed radial lines (cross shine) */}
{/* small black dot indicator at 12 o'clock on the cap */}
);
}
// Small black bakelite knob with 1-7 scale (ATTACK / RELEASE)
function SmallKnob({ value, onChange, label, v }) {
const size = 38;
const ringR = 28;
const labels = ['1', '2', '3', '4', '5', '6', '7'];
const minA = -135, maxA = 135;
const angle = minA + value * (maxA - minA);
const onPointerDown = (e) => {
e.preventDefault();
const startY = e.clientY, startVal = value;
const steps = 30;
let lastStep = Math.round(startVal * steps);
const onMove = (ev) => {
const dy = startY - ev.clientY;
const raw = Math.max(0, Math.min(1, startVal + dy / 180));
const step = Math.round(raw * steps);
if (step !== lastStep) {
lastStep = step;
window.playKnobTick && window.playKnobTick(0.4);
}
onChange(step / steps);
};
const onUp = () => {
window.removeEventListener('pointermove', onMove);
window.removeEventListener('pointerup', onUp);
};
window.addEventListener('pointermove', onMove);
window.addEventListener('pointerup', onUp);
};
const onWheel = (e) => {
e.preventDefault();
const steps = 30;
const dir = e.deltaY > 0 ? -1 : 1;
const cur = Math.round(value * steps);
const next = Math.max(0, Math.min(steps, cur + dir));
if (next !== cur) window.playKnobTick && window.playKnobTick(0.4);
onChange(next / steps);
};
const W = ringR * 2 + 22;
const cx = W / 2, cy = W / 2;
return (
{label}
);
}
// Stacked column rectangular push-button (silver, pill-shaped) — RATIO and METER columns
function ColumnButton({ label, active, onClick, wide }) {
return (
);
}
// UA-style VU meter — cream/amber face, red zone right, swinging needle
function UA1176Meter({ value, mode, v }) {
const [displayed, setDisplayed] = React.useState(value);
React.useEffect(() => {
let raf;
let cur = displayed, vel = 0;
const step = () => {
const k = 0.14, damp = 0.78;
vel = vel * damp + (value - cur) * k;
cur += vel;
setDisplayed(cur);
raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [value]);
const W = 230, H = 115;
const cx = W / 2, cy = H * 1.18, rArc = H * 1.05;
const clamped = Math.max(-20, Math.min(3, displayed));
const angle = (clamped + 10) / 13 * 54 - 27;
const valToA = (vv) => (vv + 10) / 13 * 54 - 27;
return (