modularity

src/components/EffectsBar.tsx

@@ -1,5 +1,6 @@
 import { Slider } from './Slider'
 import { EFFECTS } from '../config/effects'
+import { getClipModeLabel } from '../utils/formatters'
 import type { EffectValues } from '../types/effects'
 
 interface EffectsBarProps {
@@ -8,6 +9,13 @@ interface EffectsBarProps {
 }
 
 export function EffectsBar({ values, onChange }: EffectsBarProps) {
+  const formatValue = (id: string, value: number): string => {
+    if (id === 'clipMode') {
+      return getClipModeLabel(value)
+    }
+    return value.toString()
+  }
+
   return (
     <div className="bg-black border-t-2 border-white px-6 py-4">
       <div className="grid grid-cols-4 gap-6">
@@ -22,6 +30,8 @@ export function EffectsBar({ values, onChange }: EffectsBarProps) {
               step={param.step}
               unit={param.unit}
               onChange={(value) => onChange(param.id, value)}
+              formatValue={param.id === 'clipMode' ? formatValue : undefined}
+              valueId={param.id}
             />
           ))
         )}