setParam('attack',v)} onApplyAll={()=>applyToAll('attack')} color="var(--accent-b)"/>
setParam('decay',v)} onApplyAll={()=>applyToAll('decay')} color="var(--accent-b)"/>
v+' %'} onChange={v=>setParam('sustain',v)} onApplyAll={()=>applyToAll('sustain')} color="var(--accent-b)"/>
setParam('release',v)} onApplyAll={()=>applyToAll('release')} color="var(--accent-b)"/>
setParam('cutoff',v)} onApplyAll={()=>applyToAll('cutoff')} color="var(--accent-a)" log/>
v+' %'} onChange={v=>setParam('lfo',v)} onApplyAll={()=>applyToAll('lfo')} color="var(--accent-a)"/>
PLAYBACK
setParam('reverse', !p.reverse)}
style={{fontSize:10,padding:'4px 8px'}}
>
{p.reverse ? '◀◀ REVERSE' : 'REVERSE OFF'}
{p.reverse ? 'plays backwards' : 'forward →'}
setParam('one_shot', !p.one_shot)}
style={{fontSize:10,padding:'4px 8px'}}
title="When ON, the note plays through to the end of the sample even if you release the key (crash cymbal style)."
>
{p.one_shot ? '◉ ONE-SHOT' : 'ONE-SHOT OFF'}
{p.one_shot ? 'ignores note-off' : 'responds to note-off'}
);
}
function ParamSlider({ label, value, min, max, step, fmt, onChange, color='var(--accent-b)', log, onApplyAll }){
const toNorm = (v)=> log ? (Math.log(v/min) / Math.log(max/min)) : (v-min)/(max-min);
const fromNorm = (n)=> log ? (min * Math.pow(max/min, n)) : (min + n*(max-min));
const norm = Math.max(0, Math.min(1, toNorm(value)));
const trackRef = React.useRef(null);
const drag = (e)=>{
const rect = trackRef.current.getBoundingClientRect();
const update = (ev)=>{
const x = (ev.touches?ev.touches[0].clientX:ev.clientX) - rect.left;
const n = Math.max(0, Math.min(1, x/rect.width));
let v = fromNorm(n);
if(step) v = Math.round(v/step)*step;
onChange(v);
};
update(e);
const up = ()=>{window.removeEventListener('mousemove',update);window.removeEventListener('mouseup',up);};
window.addEventListener('mousemove',update);window.addEventListener('mouseup',up);
};
return (
{label}
onChange((min+max)/2)}
style={{
height:22,borderRadius:4,background:'var(--bg-0)',border:'1px solid var(--line-soft)',
position:'relative',cursor:'ew-resize',touchAction:'none',overflow:'hidden'
}}
>
{fmt(value)}
{onApplyAll && (
TO ALL
)}
);
}
function MapBrowser({ cs, chId, soundmapLibrary, refreshSoundmaps, onPick, onClose }){
const [confirmDelete, setConfirmDelete] = useState(null); // {category, name}
const [renaming, setRenaming] = useState(null); // {category, name}
const [renameValue, setRenameValue] = useState('');
const [error, setError] = useState(null);
// Guitar Mode chip state, keyed by "category/name". Seeded from the soundmap
// list (SoundmapInfo now carries guitar_mode/guitar_preset read from each
// index.json) so a saved voicing (e.g. Metal) shows ON/Metal on reload instead
// of OFF/Clean. Toggling updates this optimistically; the backend persists the
// flag in index.json via set_guitar_mode and enforces the 4-channel cap.
const [guitarOn, setGuitarOn] = useState({}); // { "category/name": true }
const [guitarPreset, setGuitarPreset] = useState({}); // { "category/name": presetIndex }
const [gtrMenu, setGtrMenu] = useState(null); // gtrKey of row whose preset popover is open, or null
const [editPgKey, setEditPgKey] = useState(null); // "category/name" being edited
const [editPgVal, setEditPgVal] = useState('');
var GTR_PRESETS = ['Clean','Crunch','Lead','Metal','Acoustic'];
var gtrKey = function(m){ return m.category + '/' + m.name; };
// Seed chip + preset pills from persisted index.json state whenever the
// soundmap list arrives/changes. Only entries flagged guitar_mode become ON.
useEffect(function(){
var on = {};
var presets = {};
(soundmapLibrary || []).forEach(function(m){
if(m.guitar_mode){
var key = m.category + '/' + m.name;
on[key] = true;
presets[key] = (m.guitar_preset | 0);
}
});
setGuitarOn(on);
setGuitarPreset(presets);
}, [soundmapLibrary]);
var isGuitarCat = function(m){ return (m.category || '').toUpperCase() === 'GUITAR'; };
var guitarCount = function(){
return Object.keys(guitarOn).filter(function(k){ return guitarOn[k]; }).length;
};
// Group entries by category
var grouped = useMemo(function(){
var cats = {};
(soundmapLibrary || []).forEach(function(m){
var cat = (m.category || 'uncategorized').toUpperCase();
if(!cats[cat]) cats[cat] = [];
cats[cat].push(m);
});
// Sort categories alphabetically, sort entries within each
var keys = Object.keys(cats).sort();
keys.forEach(function(k){ cats[k].sort(function(a,b){ return a.name.localeCompare(b.name); }); });
// Resolve MSB.LSB.PROGRAM per map: MSB.LSB comes from CATEGORY_BANK_BASE,
// the program byte is the backend's stable per-map `program` (no longer a
// positional index). Categories without an entry in CATEGORY_BANK_BASE get no bank shown.
var bankByKey = {};
keys.forEach(function(k){
cats[k].forEach(function(m){
bankByKey[m.category + '/' + m.name] = formatCategoryBank(k, (m.program | 0));
});
});
return { keys: keys, cats: cats, bankByKey: bankByKey };
}, [soundmapLibrary]);
var handleSelect = function(m){
TauriAPI.loadSoundmap(chId, m.category, m.name).then(function(){
onPick(m.name, m.category);
}).catch(function(err){
setError('Failed to load: '+(err||'unknown error'));
});
};
var handleDelete = function(m){
setError(null);
TauriAPI.deleteSoundmap(m.category, m.name).then(function(){
setConfirmDelete(null);
if(refreshSoundmaps) refreshSoundmaps();
}).catch(function(err){
setError('Delete failed: '+(err||'unknown error'));
setConfirmDelete(null);
});
};
var handleRename = function(){
if(!renaming || !renameValue.trim()) return;
setError(null);
TauriAPI.renameSoundmap(renaming.category, renaming.name, renameValue.trim()).then(function(){
setRenaming(null);
setRenameValue('');
if(refreshSoundmaps) refreshSoundmaps();
}).catch(function(err){
setError('Rename failed: '+(err||'unknown error'));
});
};
var commitPg = function(m){
var n = parseInt(editPgVal, 10);
setEditPgKey(null);
if(isNaN(n) || n < 0 || n > 127) return; // ignore invalid
if((m.program | 0) === n) return; // no change
TauriAPI.setSoundmapProgram(m.category, m.name, n)
.then(function(){ if(refreshSoundmaps) refreshSoundmaps(); })
.catch(function(err){ console.warn('[PG] set failed', err); });
};
var isEmpty = grouped.keys.length === 0;
return (
{error && (
)}
{/* Delete confirmation */}
{confirmDelete && (
Delete "{confirmDelete.name}"?
CANCEL
DELETE
)}
{isEmpty && (
NO SOUNDMAPS
Import a soundfont to get started.
)}
{grouped.keys.map(function(cat){
return (
{cat} · {grouped.cats[cat].length}
{grouped.cats[cat].map(function(m){
var isActive = cs.map === m.name;
var isRenaming = renaming && renaming.category === m.category && renaming.name === m.name;
return (
{isRenaming ? (
✓
) : (
)}
{!isRenaming && (
{isGuitarCat(m) && (function(){
var key = gtrKey(m);
var on = !!guitarOn[key];
var presetIdx = guitarPreset[key] | 0;
return (
= 4){
setError('Max 4 Guitar Mode channels (CPU protection)');
return;
}
setError(null);
var idx = guitarPreset[key] | 0;
TauriAPI.setGuitarMode(chId, m.category, m.name, true, idx).then(function(){
setGuitarOn(function(prev){ var n = Object.assign({}, prev); n[key] = true; return n; });
if(refreshSoundmaps) refreshSoundmaps();
}).catch(function(err){
setError('Guitar Mode failed: '+(err||'unknown error'));
});
setGtrMenu(key);
} else {
// already on — just toggle the popover
setGtrMenu(gtrMenu === key ? null : key);
}
}}>{on ? GTR_PRESETS[presetIdx] : 'GTR'}
{gtrMenu === key && (
{GTR_PRESETS.map(function(label, idx){
var sel = presetIdx === idx;
return (
{label}
);
})}
OFF
)}
);
})()}
✎
✕
)}
);
})}
);
})}
);
}
/* ---------- EQ view ---------- */
const EQ_PRESETS = [
{ name:'FLAT', eq:{ low:{gain:0,freq:120}, mid:{gain:0,freq:1000}, high:{gain:0,freq:6000} } },
{ name:'VOCAL AIR', eq:{ low:{gain:-2,freq:120}, mid:{gain:-1.5,freq:400}, high:{gain:4,freq:8000} } },
{ name:'WARM BASS', eq:{ low:{gain:4,freq:80}, mid:{gain:-2,freq:500}, high:{gain:1,freq:6000} } },
{ name:'DRUM PUNCH', eq:{ low:{gain:3,freq:90}, mid:{gain:-3,freq:400}, high:{gain:3,freq:5000} } },
{ name:'TELEPHONE', eq:{ low:{gain:-12,freq:300}, mid:{gain:6,freq:1500}, high:{gain:-10,freq:4000} } },
{ name:'BRIGHT', eq:{ low:{gain:-1,freq:120}, mid:{gain:0,freq:1000}, high:{gain:5,freq:8000} } },
];
function EqView({ cs, updateChannel }){
const eq = cs.eq;
const [presetIdx, setPresetIdx] = React.useState(()=>{
const i = EQ_PRESETS.findIndex(p =>
p.eq.low.gain===eq.low.gain && p.eq.mid.gain===eq.mid.gain && p.eq.high.gain===eq.high.gain);
return i>=0 ? i : 0;
});
const [eqOn, setEqOn] = React.useState(cs.eqOn !== false);
const setLo = (k,v)=> updateChannel({eq:{...eq, low:{...eq.low, [k]:v}}});
const setMi = (k,v)=> updateChannel({eq:{...eq, mid:{...eq.mid, [k]:v}}});
const setHi = (k,v)=> updateChannel({eq:{...eq, high:{...eq.high, [k]:v}}});
const applyPreset = (i)=>{
const p = EQ_PRESETS[(i + EQ_PRESETS.length) % EQ_PRESETS.length];
setPresetIdx((i + EQ_PRESETS.length) % EQ_PRESETS.length);
updateChannel({eq: JSON.parse(JSON.stringify(p.eq))});
};
const resetEq = ()=>{
setPresetIdx(0);
updateChannel({eq: JSON.parse(JSON.stringify(EQ_PRESETS[0].eq)), eqOut:0});
};
const toggleEq = ()=>{
const next = !eqOn;
setEqOn(next);
updateChannel({eqOn: next});
};
return (
Channel EQ
3-BAND · LOW · MID · HI
applyPreset(presetIdx-1)} title="Previous preset">◀
applyPreset(presetIdx+1)} style={{minWidth:140}}>
PRESET: {EQ_PRESETS[presetIdx].name}
applyPreset(presetIdx+1)} title="Next preset">▶
RESET
{eqOn?'EQ ON':'EQ BYPASS'}
LOW SHELF
setLo('gain', Math.round(v*10)/10)}/>
MID BELL
setMi('gain', Math.round(v*10)/10)}/>
MID BELL
setMi('freq', Math.round(v))}/>
HI SHELF
setHi('gain', Math.round(v*10)/10)}/>
OUTPUT
updateChannel({eqOut: Math.round(v*10)/10})}/>
);
}
function EqCurve({ eq }){
// build SVG response curve (approx)
const W=820, H=260, padX=30, padY=20;
const freqToX = (f)=> padX + (Math.log10(f)-Math.log10(20)) / (Math.log10(20000)-Math.log10(20)) * (W-padX*2);
const gainToY = (g)=> padY + (1 - (g+18)/36) * (H-padY*2);
const pts = [];
for(let i=0;i<=200;i++){
const f = 20 * Math.pow(1000, i/200);
// simple low shelf
const lowG = eq.low.gain * (1 / (1 + Math.pow(f/eq.low.freq, 2)));
// bell mid
const q=1.2, bw = eq.mid.freq/q;
const x = (f-eq.mid.freq)/bw;
const midG = eq.mid.gain * Math.exp(-x*x);
// high shelf
const highG = eq.high.gain * (1 / (1 + Math.pow(eq.high.freq/f, 2)));
const g = lowG + midG + highG;
pts.push([freqToX(f), gainToY(g)]);
}
const d = 'M '+pts.map(p=>p.join(',')).join(' L ');
const area = d + ` L ${freqToX(20000)},${gainToY(0)} L ${freqToX(20)},${gainToY(0)} Z`;
// grid lines
const freqMarks = [100, 1000, 10000];
const gainMarks = [12, 6, 0, -6, -12];
return (
{g>0?'+'+g:g}
))}
{freqMarks.map(f=>(
{f>=1000?(f/1000)+'k':f}
))}
);
}
/* ---------- FX chain view ---------- */
function FxChainView({ chain, list, selFx, setSelFx, updateFx, updateFxParam }){
const selected = list.find(f=> selFx.chain===chain && f.id===selFx.id) || list[0];
return (
{chain==='pre' ? 'PRE FX · on sample before mix' : 'POST FX · on channel stream after mix-bus'}
COPY CHAIN
PASTE
{list.map((f, idx) => (
{idx > 0 && →
}
SLOT {idx+1}
setSelFx({chain, id:f.id})}
onToggle={()=>updateFx(chain, f.id, {enabled:!f.enabled})}/>
))}
{selected.id === 'tremolo' ? (
) : selected.id === 'autowah' ? (
) : selected.id === 'phaser' ? (
) : selected.id === 'flanger' ? (
) : (
<>
{selected.name}
{selected.preset}
◀ PRESET
PRESET ▶
updateFx(chain, selected.id, {enabled:!selected.enabled})}>
{selected.enabled?'ENABLED':'BYPASS'}
{selected.params && selected.params.map(p=>(
updateFxParam(chain, selected.id, p.k, Math.round(v*100)/100)}/>
))}
)}
);
}
function TremoloDetail({ selected, chain, updateFx, updateFxParam }){
const [masterBpm, setMasterBpm] = useState(0);
const paramByKey = (k) => selected.params.find(p => p.k === k);
const wf = paramByKey('WAVEFORM');
const sync = paramByKey('MIDI_SYNC');
const speed = paramByKey('SPEED');
const baseNote = paramByKey('BASE_NOTE');
const times = paramByKey('TIMES');
const knobs = ['SHAPE','PHASE','DEPTH','MIX'].map(paramByKey);
// Poll master BPM every 500ms while MIDI sync is on, so the display tracks
// an external clock without re-rendering when sync is off.
useEffect(()=>{
if (sync.v < 0.5) return;
let alive = true;
const tick = ()=> {
BSInvoke('get_master_bpm')
.then(v => { if (alive) setMasterBpm(v); })
.catch(()=>{});
};
tick();
const id = setInterval(tick, 500);
return ()=> { alive = false; clearInterval(id); };
}, [sync.v]);
const setParam = (k, v) =>
updateFxParam(chain, selected.id, k, Math.round(v * 100) / 100);
return (
<>
{selected.name}
{selected.preset}
◀ PRESET
PRESET ▶
updateFx(chain, selected.id, {enabled:!selected.enabled})}>
{selected.enabled?'ENABLED':'BYPASS'}
WAVEFORM
{wf.options.map((name, idx)=>(
setParam('WAVEFORM', idx)}>
{name}
))}
{knobs.map(p => (
setParam(p.k, v)}/>
))}
0.5 ? 'is-on' : '')}
onClick={()=>setParam('MIDI_SYNC', sync.v > 0.5 ? 0 : 1)}>
{sync.v > 0.5 ? '● MIDI SYNC ON' : '○ MIDI SYNC OFF'}
{sync.v < 0.5 ? (
setParam('SPEED', v)}/>
) : (
BPM: {masterBpm > 0 ? masterBpm.toFixed(1) : '—'}
setParam('BASE_NOTE', parseInt(e.target.value, 10))}>
{baseNote.options.map((n, idx)=>(
{n}
))}
×
setParam('TIMES', Math.round(v))}/>
)}
{/* Tremolo Phase-1 overhaul controls (mode + level compensation).
Map to backend keys mode_tr / level_comp_tr. */}
{(() => {
const mode = selected.params.find(p => p.k === 'MODE');
const lvl = selected.params.find(p => p.k === 'LEVEL_COMP');
if (!mode && !lvl) return null;
return (
<>
{mode && (
MODE
{mode.options.map((label, idx)=>(
setParam('MODE', idx)}>
{label}
))}
)}
{lvl && (
setParam('LEVEL_COMP', v)}/>
)}
);
})()}
);
}
function AutoWahDetail({ selected, chain, updateFx, updateFxParam }){
const [masterBpm, setMasterBpm] = useState(0);
const paramByKey = (k) => selected.params.find(p => p.k === k);
const mode = paramByKey('MODE');
const wf = paramByKey('WAVEFORM');
const sync = paramByKey('MIDI_SYNC');
const rate = paramByKey('RATE');
const baseNote = paramByKey('BASE_NOTE');
const times = paramByKey('TIMES');
const sharedKnobs = ['MIN_FREQ','MAX_FREQ','Q','DEPTH','MIX'].map(paramByKey);
const envKnobs = ['SENS','ATTACK_MS','RELEASE_MS'].map(paramByKey);
// Poll master BPM only while in LFO mode + MIDI sync on
useEffect(()=>{
if (mode.v < 0.5) return; // envelope mode
if (sync.v < 0.5) return; // sync off
let alive = true;
const tick = ()=> {
BSInvoke('get_master_bpm')
.then(v => { if (alive) setMasterBpm(v); })
.catch(()=>{});
};
tick();
const id = setInterval(tick, 500);
return ()=> { alive = false; clearInterval(id); };
}, [mode.v, sync.v]);
const setParam = (k, v) =>
updateFxParam(chain, selected.id, k, Math.round(v * 100) / 100);
const isEnvelope = mode.v < 0.5;
return (
<>
{selected.name}
{selected.preset}
◀ PRESET
PRESET ▶
updateFx(chain, selected.id, {enabled:!selected.enabled})}>
{selected.enabled?'ENABLED':'BYPASS'}
MODE
setParam('MODE', 0)}>Envelope
setParam('MODE', 1)}>LFO
{sharedKnobs.map(p => (
setParam(p.k, v)}/>
))}
{isEnvelope ? (
{envKnobs.map(p => (
setParam(p.k, v)}/>
))}
) : (
<>
WAVEFORM
{wf.options.map((name, idx)=>(
setParam('WAVEFORM', idx)}>
{name}
))}
0.5 ? 'is-on' : '')}
onClick={()=>setParam('MIDI_SYNC', sync.v > 0.5 ? 0 : 1)}>
{sync.v > 0.5 ? '● MIDI SYNC ON' : '○ MIDI SYNC OFF'}
{sync.v < 0.5 ? (
setParam('RATE', v)}/>
) : (
BPM: {masterBpm > 0 ? masterBpm.toFixed(1) : '—'}
setParam('BASE_NOTE', parseInt(e.target.value, 10))}>
{baseNote.options.map((n, idx)=>(
{n}
))}
×
setParam('TIMES', Math.round(v))}/>
)}
)}
{/* Auto-Wah v2 overhaul controls (filter type, direction, drive,
Q-tracking, auto-gain). Rendered from selected.params so they map
to the backend keys filter_type_wah / direction_wah / drive_wah /
q_track_wah / auto_gain_wah. */}
{(() => {
const filt = selected.params.find(p => p.k === 'FILTER');
const dir = selected.params.find(p => p.k === 'DIRECTION');
const ag = selected.params.find(p => p.k === 'AUTO_GAIN');
const drv = selected.params.find(p => p.k === 'WAH_DRIVE');
const qtr = selected.params.find(p => p.k === 'Q_TRACK');
if (!filt && !dir && !ag && !drv && !qtr) return null;
return (
<>
{filt && (
FILTER
{filt.options.map((label, idx)=>(
setParam('FILTER', idx)}>
{label}
))}
)}
{dir && (
DIRECTION
{dir.options.map((label, idx)=>(
setParam('DIRECTION', idx)}>
{label}
))}
)}
{drv && (
setParam('WAH_DRIVE', v)}/>
)}
{qtr && (
setParam('Q_TRACK', v)}/>
)}
{ag && (
0.5 ? 'is-on' : '')}
onClick={()=>setParam('AUTO_GAIN', ag.v > 0.5 ? 0 : 1)}>
{ag.v > 0.5 ? '● AUTO GAIN ON' : '○ AUTO GAIN OFF'}
)}
);
})()}
);
}
function PhaserDetail({ selected, chain, updateFx, updateFxParam }){
const [masterBpm, setMasterBpm] = useState(0);
const paramByKey = (k) => selected.params.find(p => p.k === k);
const stages = paramByKey('STAGES');
const wf = paramByKey('WAVEFORM');
const sync = paramByKey('MIDI_SYNC');
const rate = paramByKey('RATE');
const baseNote = paramByKey('BASE_NOTE');
const times = paramByKey('TIMES');
const stereo = paramByKey('STEREO');
const knobs = ['MIN_FREQ','MAX_FREQ','FEEDBK','DEPTH','PHASE','MIX','PH_DRIVE'].map(paramByKey);
useEffect(()=>{
if (sync.v < 0.5) return;
let alive = true;
const tick = ()=> {
BSInvoke('get_master_bpm')
.then(v => { if (alive) setMasterBpm(v); })
.catch(()=>{});
};
tick();
const id = setInterval(tick, 500);
return ()=> { alive = false; clearInterval(id); };
}, [sync.v]);
const setParam = (k, v) =>
updateFxParam(chain, selected.id, k, Math.round(v * 100) / 100);
return (
<>
{selected.name}
{selected.preset}
◀ PRESET
PRESET ▶
updateFx(chain, selected.id, {enabled:!selected.enabled})}>
{selected.enabled?'ENABLED':'BYPASS'}
STAGES
{stages.options.map((label, idx)=>(
setParam('STAGES', idx)}>
{label}
))}
{stereo && (
STEREO
{stereo.options.map((label, idx)=>(
setParam('STEREO', idx)}>
{label}
))}
)}
{knobs.map(p => (
setParam(p.k, v)}/>
))}
WAVEFORM
{wf.options.map((name, idx)=>(
setParam('WAVEFORM', idx)}>
{name}
))}
0.5 ? 'is-on' : '')}
onClick={()=>setParam('MIDI_SYNC', sync.v > 0.5 ? 0 : 1)}>
{sync.v > 0.5 ? '● MIDI SYNC ON' : '○ MIDI SYNC OFF'}
{sync.v < 0.5 ? (
setParam('RATE', v)}/>
) : (
BPM: {masterBpm > 0 ? masterBpm.toFixed(1) : '—'}
setParam('BASE_NOTE', parseInt(e.target.value, 10))}>
{baseNote.options.map((n, idx)=>(
{n}
))}
×
setParam('TIMES', Math.round(v))}/>
)}
);
}
function FlangerDetail({ selected, chain, updateFx, updateFxParam }){
const [masterBpm, setMasterBpm] = useState(0);
const paramByKey = (k) => selected.params.find(p => p.k === k);
const wf = paramByKey('WAVEFORM');
const sync = paramByKey('MIDI_SYNC');
const rate = paramByKey('RATE');
const baseNote = paramByKey('BASE_NOTE');
const times = paramByKey('TIMES');
const mode = paramByKey('MODE');
const knobs = ['MIN_DLY','MAX_DLY','FEEDBK','DEPTH','PHASE','MIX','REF_MS','DAMP'].map(paramByKey);
useEffect(()=>{
if (sync.v < 0.5) return;
let alive = true;
const tick = ()=> {
BSInvoke('get_master_bpm')
.then(v => { if (alive) setMasterBpm(v); })
.catch(()=>{});
};
tick();
const id = setInterval(tick, 500);
return ()=> { alive = false; clearInterval(id); };
}, [sync.v]);
const setParam = (k, v) =>
updateFxParam(chain, selected.id, k, Math.round(v * 100) / 100);
return (
<>
{selected.name}
{selected.preset}
◀ PRESET
PRESET ▶
updateFx(chain, selected.id, {enabled:!selected.enabled})}>
{selected.enabled?'ENABLED':'BYPASS'}
{mode && (
MODE
{mode.options.map((label, idx)=>(
setParam('MODE', idx)}>
{label}
))}
)}
{knobs.map(p => (
setParam(p.k, v)}/>
))}
WAVEFORM
{wf.options.map((name, idx)=>(
setParam('WAVEFORM', idx)}>
{name}
))}
0.5 ? 'is-on' : '')}
onClick={()=>setParam('MIDI_SYNC', sync.v > 0.5 ? 0 : 1)}>
{sync.v > 0.5 ? '● MIDI SYNC ON' : '○ MIDI SYNC OFF'}
{sync.v < 0.5 ? (
setParam('RATE', v)}/>
) : (
BPM: {masterBpm > 0 ? masterBpm.toFixed(1) : '—'}
setParam('BASE_NOTE', parseInt(e.target.value, 10))}>
{baseNote.options.map((n, idx)=>(
{n}
))}
×
setParam('TIMES', Math.round(v))}/>
)}
);
}
function FxBlock({ f, chain, selected, onSelect, onToggle }){
return (
{e.stopPropagation(); onToggle();}}/>
);
}
Object.assign(window, { ChannelEditScreen, CATEGORY_BANK_BASE, formatCategoryBank });
/* ---------- Import dialog (SF2 browse + transcode) ---------- */
var SF2_CATEGORIES = ['piano','chromatic-perc','organ','guitar','bass','strings','ensemble','brass','reed','pipe','synth-lead','synth-pad','synth-fx','ethnic','percussive','sfx','drums'];
function ImportDialog({ chId, refreshSoundmaps, onClose, onImport }){
const [sf2Path, setSf2Path] = useState(null);
const [category, setCategory] = useState('drums');
const [nameOverride, setNameOverride] = useState('');
const [importing, setImporting] = useState(false);
const [error, setError] = useState(null);
// --- Remote-mode upload state (only used when RemoteLink.isConnected()) ---
const isRemote = RemoteLink.isConnected();
const [uploading, setUploading] = useState(false); // chunked upload in progress
const [uploadPct, setUploadPct] = useState(0); // 0..100
const [uploadId, setUploadId] = useState(null); // id of the uploaded sf2 on the Pi
const [presets, setPresets] = useState(null); // [[name, bank, preset], ...] once listed
const [presetIndex, setPresetIndex] = useState(0); // chosen preset (index into presets[])
const [browsing, setBrowsing] = useState(false); // native file picker is open (for disabled styling)
const browsingRef = React.useRef(false); // synchronous guard against double-open
var sf2Filename = sf2Path ? sf2Path.replace(/\\/g,'/').split('/').pop() : '';
var defaultName = sf2Filename ? sf2Filename.replace(/\.sf2$/i, '') : '';
var handleBrowse = function(){
// Single-open guard: ignore extra clicks while a picker is already open
// (or an import/upload is running). browsingRef is checked synchronously so
// a rapid double-click can't open the native picker twice.
if(browsingRef.current || importing || uploading) return;
if(isRemote){ return handleBrowseRemote(); }
browsingRef.current = true;
setBrowsing(true);
setError(null);
TauriAPI.browseSoundfonts().then(function(path){
browsingRef.current = false; setBrowsing(false);
if(path){
setSf2Path(path);
setNameOverride('');
}
}).catch(function(err){
browsingRef.current = false; setBrowsing(false);
setError('Failed to open file browser: '+(err||'unknown error'));
});
};
// Remote browse → upload (chunked) → list presets. The picker + local reads
// use LocalInvoke (THIS Windows machine); the upload + list go via BSInvoke
// (the Pi). On completion `presets` is populated and the picker UI is shown.
var handleBrowseRemote = function(){
browsingRef.current = true;
setBrowsing(true);
setError(null);
setPresets(null);
setPresetIndex(0);
var path;
LocalInvoke('browse_soundfonts', {}).then(function(picked){
// Picker has returned — release the single-open guard (upload, if any,
// is tracked separately by `uploading`).
browsingRef.current = false; setBrowsing(false);
if(!picked){ return; } // user cancelled
path = picked;
setSf2Path(path);
setNameOverride('');
setUploading(true);
setUploadPct(0);
return doRemoteUpload(path);
}).catch(function(err){
browsingRef.current = false; setBrowsing(false);
setUploading(false);
setError('Remote upload failed: '+(err && err.message ? err.message : String(err||'unknown error')));
});
};
// Reads `path` locally in 256KB slices and streams each to the Pi. Resolves
// with the array of presets once the upload is complete and listed.
var doRemoteUpload = function(path){
var CHUNK = 256*1024;
var upId = 'up' + Date.now();
return LocalInvoke('local_file_size', { path: path }).then(function(size){
size = Number(size) || 0;
var sendChunk = function(offset, seq){
// Empty file: send a single seq-0 empty chunk so the Pi finalizes.
if(size === 0){
return BSInvoke('upload_sf2_chunk', { uploadId: upId, seq: 0, dataB64: '', last: true }).then(function(){
setUploadPct(100);
});
}
if(offset >= size){ return Promise.resolve(); }
return LocalInvoke('read_local_file_chunk', { path: path, offset: offset, length: CHUNK }).then(function(b64){
var last = (offset + CHUNK >= size);
return BSInvoke('upload_sf2_chunk', { uploadId: upId, seq: seq, dataB64: b64, last: last });
}).then(function(){
var pct = Math.min(100, Math.round((offset + CHUNK) / size * 100));
setUploadPct(pct);
return sendChunk(offset + CHUNK, seq + 1);
});
};
return sendChunk(0, 0);
}).then(function(){
return BSInvoke('list_uploaded_presets', { uploadId: upId });
}).then(function(list){
setUploadId(upId);
setPresets(Array.isArray(list) ? list : []);
setPresetIndex(0);
setUploading(false);
});
};
var handleImport = function(){
if(isRemote){ return handleImportRemote(); }
if(!sf2Path) return;
var name = nameOverride.trim() || defaultName;
setImporting(true);
setError(null);
TauriAPI.importSoundfont(sf2Path, 0, category, name).then(function(){
// Refresh the soundmap list so it shows the newly imported map
if(refreshSoundmaps) refreshSoundmaps();
// Auto-load the imported soundmap to the current channel
return TauriAPI.loadSoundmap(chId, category, name);
}).then(function(){
onImport(name, category);
}).catch(function(err){
setError(String(err||'unknown error'));
setImporting(false);
});
};
// Remote import: the sf2 already lives on the Pi (uploaded above); ask the Pi
// to transcode the chosen preset into its library, then load it to the channel.
var handleImportRemote = function(){
if(uploadId == null || !presets) return;
var name = nameOverride.trim() || defaultName;
setImporting(true);
setError(null);
BSInvoke('import_uploaded_soundfont', {
uploadId: uploadId,
presetIndex: presetIndex,
category: category,
nameOverride: name || null,
}).then(function(){
if(refreshSoundmaps) refreshSoundmaps();
// loadSoundmap runs Pi-side via BSInvoke (TauriAPI routes through it).
return TauriAPI.loadSoundmap(chId, category, name);
}).then(function(){
onImport(name, category);
}).catch(function(err){
setError(String(err && err.message ? err.message : (err||'unknown error')));
setImporting(false);
});
};
var handleSetDefaultFolder = function(){
setError(null);
TauriAPI.browseFolder().then(function(folderPath){
if(folderPath){
return TauriAPI.setSoundmapConfig({ defaultFolder: folderPath });
}
}).catch(function(err){
setError('Failed to set folder: '+(err||'unknown error'));
});
};
return (
e.stopPropagation()}>
IMPORT SOUNDFONT
{isRemote ? 'UPLOAD .SF2 FROM THIS PC TO THE SAMPLER' : 'SELECT .SF2 FILE TO TRANSCODE'}
✕
{/* Browse SF2 button */}
{isRemote ? 'BROWSE SF2 (THIS PC)' : 'BROWSE SF2'}
{sf2Path && (
)}
{/* Remote upload progress */}
{isRemote && uploading && (
UPLOADING TO SAMPLER
{uploadPct}%
)}
{/* Remote preset picker (after upload completes) */}
{isRemote && presets && (
PRESET
{presets.length === 0 ? (
No presets found in this soundfont.
) : (
setPresetIndex(Number(e.target.value))} disabled={importing}
style={{width:'100%',background:'var(--bg-2)',border:'1px solid var(--line-soft)',borderRadius:6,padding:'8px 10px',color:'var(--ink)',fontFamily:'JetBrains Mono',fontSize:11,fontWeight:600,cursor:'pointer',outline:'none',letterSpacing:'.04em'}}>
{presets.map(function(p, i){
var pname = (p && p[0] != null) ? String(p[0]) : ('Preset '+i);
var bank = (p && p[1] != null) ? p[1] : 0;
var prog = (p && p[2] != null) ? p[2] : 0;
return ({pname+' ['+bank+':'+prog+']'} );
})}
)}
)}
{/* Category dropdown — local: shown once a file is picked;
remote: shown once the upload's presets are listed. */}
{(isRemote ? !!presets : !!sf2Path) && (
CATEGORY
setCategory(e.target.value)} disabled={importing}
style={{width:'100%',background:'var(--bg-2)',border:'1px solid var(--line-soft)',borderRadius:6,padding:'8px 10px',color:'var(--ink)',fontFamily:'JetBrains Mono',fontSize:11,fontWeight:600,cursor:'pointer',outline:'none',letterSpacing:'.08em',textTransform:'uppercase'}}>
{SF2_CATEGORIES.map(c=>(
{c.toUpperCase()}
))}
)}
{/* Error message */}
{error && (
)}
{/* Loading state */}
{importing && (
)}
SET DEFAULT FOLDER
CANCEL
{importing ? 'IMPORTING...' : uploading ? 'UPLOADING...' : 'IMPORT'}
);
}
/* ---------- Loop bank import dialog ---------- */
function LoopImportDialog({ chId, onClose, onImported }){
const [bankName, setBankName] = useState('My Loop Bank');
const [picked, setPicked] = useState([]); // [{path, name, native_bpm, length_bars}]
const pickFiles = async () => {
const files = await BSInvoke('browse_wavs').catch(err => {
console.warn('browse_wavs failed:', err);
return [];
});
if (!files || !files.length) return;
const arr = Array.isArray(files) ? files : [files];
setPicked(prev => prev.concat(arr.map(p => {
const name = p.split(/[\\/]/).pop();
// native_bpm: 0 signals "auto-detect on the backend".
return { path: p, name, native_bpm: 0, length_bars: 4 };
})));
};
const doImport = async () => {
if (!picked.length) return;
await BSInvoke('import_loop_bank', {
bankName,
files: picked.map(p => p.path),
nativeBpms: picked.map(p => p.native_bpm),
lengthBars: picked.map(p => p.length_bars),
});
onImported(bankName);
};
return (
e.stopPropagation()}>
Import loop bank
Addresses auto-assigned (121.067.XXX). BPM auto-detected from the audio. Edit later in the LOOPS dropdown.
Bank name
+ ADD WAVs
{picked.map((p, idx) => (
{p.name}
bars
))}
CANCEL
SAVE BANK
);
}
/* ---------- New empty map dialog ---------- */
function NewMapDialog({ chId, refreshSoundmaps, onClose, onCreated }){
const [name, setName] = useState('New Kit');
const [category, setCategory] = useState('drums');
const [error, setError] = useState(null);
const create = ()=>{
const nm = name.trim();
if(!nm) return;
setError(null);
TauriAPI.createEmptySoundmap(category, nm).then(function(){
if(refreshSoundmaps) refreshSoundmaps();
return TauriAPI.loadSoundmap(chId, category, nm);
}).then(function(){
onCreated(nm, category);
}).catch(function(err){
setError(String(err||'failed to create map'));
});
};
return (
e.stopPropagation()}>
New empty map
Creates a blank map. Drag WAV files onto the keys to fill it.
Name
Category
setCategory(e.target.value)}>
{SF2_CATEGORIES.map(c=>({c.toUpperCase()} ))}
{error &&
{error}
}
CANCEL
CREATE
);
}