stop button

src/App.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect } from 'react'
 import { useStore } from '@nanostores/react'
+import { Square } from 'lucide-react'
 import { PlaybackManager } from './services/PlaybackManager'
 import { DownloadService } from './services/DownloadService'
 import { generateFormulaGrid, generateRandomFormula } from './utils/bytebeatFormulas'
@@ -168,12 +169,30 @@ function App() {
     }
   }
 
+  const handleStop = () => {
+    playbackManagerRef.current?.stop()
+    setPlaying(null)
+    setQueued(null)
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current)
+      animationFrameRef.current = null
+    }
+  }
+
   return (
     <div className="w-screen h-screen flex flex-col bg-black overflow-hidden">
       <header className="bg-black border-b-2 border-white px-6 py-3">
         <div className="flex items-center justify-between mb-3">
           <h1 className="font-mono text-sm tracking-[0.3em] text-white">BRUITISTE</h1>
           <div className="flex gap-4">
+            <button
+              onClick={handleStop}
+              disabled={!playing}
+              className="px-6 py-2 bg-black text-white border-2 border-white font-mono text-[11px] tracking-[0.2em] hover:bg-white hover:text-black transition-all disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-2"
+            >
+              <Square size={14} strokeWidth={2} fill="currentColor" />
+              STOP
+            </button>
             <button
               onClick={handleRandom}
               className="px-6 py-2 bg-white text-black font-mono text-[11px] tracking-[0.2em] hover:bg-black hover:text-white border-2 border-white transition-all"