Enhance FM synthesis + cleaning code architecture

src/components/controls/LFOPanel.tsx

@@ -0,0 +1,61 @@
+import { useStore } from '@nanostores/react'
+import { lfoSettings } from '../../stores/settings'
+import { toggleMappingMode } from '../../stores/mappingMode'
+import { LFOScope } from '../scopes/LFOScope'
+import type { LFOConfig } from '../../stores/settings'
+import type { LFOWaveform } from '../../domain/modulation/LFO'
+
+interface LFOPanelProps {
+  onChange: (lfoIndex: number, config: LFOConfig) => void
+  onUpdateDepth: (lfoIndex: number, paramId: string, depth: number) => void
+  onRemoveMapping: (lfoIndex: number, paramId: string) => void
+}
+
+type LFOKey = 'lfo1' | 'lfo2' | 'lfo3' | 'lfo4'
+
+export function LFOPanel({ onChange, onUpdateDepth, onRemoveMapping }: LFOPanelProps) {
+  const lfoValues = useStore(lfoSettings)
+
+  const handleLFOChange = (lfoKey: LFOKey, lfoIndex: number, frequency: number, phase: number, waveform: LFOWaveform) => {
+    const lfo = lfoValues[lfoKey]
+    const updated = { ...lfo, frequency, phase, waveform }
+    lfoSettings.setKey(lfoKey, updated)
+    onChange(lfoIndex, updated)
+  }
+
+  const handleMapClick = (_lfoKey: LFOKey, lfoIndex: number) => {
+    toggleMappingMode(lfoIndex)
+  }
+
+  const lfoConfigs: Array<{ key: LFOKey; index: number }> = [
+    { key: 'lfo1', index: 0 },
+    { key: 'lfo2', index: 1 },
+    { key: 'lfo3', index: 2 },
+    { key: 'lfo4', index: 3 }
+  ]
+
+  return (
+    <div className="bg-black border-t-2 border-white">
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-[1px] bg-white p-[1px]">
+        {lfoConfigs.map(({ key, index }) => {
+          const lfo = lfoValues[key]
+          return (
+            <div key={key} className="px-2 py-2 flex items-center bg-black">
+              <LFOScope
+                lfoIndex={index}
+                waveform={lfo.waveform}
+                frequency={lfo.frequency}
+                phase={lfo.phase}
+                mappings={lfo.mappings}
+                onChange={(freq, phase, waveform) => handleLFOChange(key, index, freq, phase, waveform)}
+                onMapClick={() => handleMapClick(key, index)}
+                onUpdateDepth={(paramId, depth) => onUpdateDepth(index, paramId, depth)}
+                onRemoveMapping={(paramId) => onRemoveMapping(index, paramId)}
+              />
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}