Version 1.2.5

 - Small visual fixes
 - Improved SequenceHeader/Playhead interaction

Author: alganet

.github/dependabot.yml

@@ -7,15 +7,15 @@ updates:
   - package-ecosystem: "npm"
     directory: "/"
     schedule:
-      interval: "weekly"
+      interval: "daily"
     open-pull-requests-limit: 10
     labels:
       - "dependencies"
 
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
-      interval: "weekly"
+      interval: "daily"
     open-pull-requests-limit: 10
     labels:
       - "dependencies"

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "quick-beats",
   "private": true,
-  "version": "1.2.4",
+  "version": "1.2.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

package.json

@@ -300,8 +300,8 @@ function App() {
       <div className="flex-1 flex flex-col overflow-hidden">
         <header className="flex-none flex items-center justify-between px-2 py-1 md:px-6 md:py-3">
           <div className="flex items-center gap-4">
-            <h1 className="text-md md:text-2xl font-black tracking-tighter text-white uppercase flex items-center gap-2 select-none">
-              <Icon id="logo" className="w-6 h-6 md:w-8 md:h-8 text-[#3b82f6] md:mt-0.5" />
+            <h1 className="text-md md:text-xl font-black tracking-tighter text-white uppercase flex items-center gap-2 select-none">
+              <Icon id="logo" className="w-6 h-6 md:w-7 md:h-7 text-[#3b82f6] md:mt-0.5" />
               Quick Beats
             </h1>
           </div>

src/App.jsx

@@ -13,7 +13,7 @@ export default function Setup({ onSelect, onConfirm, selectedSig, onShowHelp })
                 onClick={onShowHelp}
                 className="absolute top-4 right-6 text-slate-700 hover:text-white transition-colors font-mono text-[10px] uppercase tracking-tighter"
             >
-                v1.2.4
+                v1.2.5
             </button>
             <div className="max-w-2xl w-full">
                 <div className="text-center mb-8 md:mb-16">

src/components/Setup.jsx

@@ -90,7 +90,7 @@ describe('Setup', () => {
         const onShowHelp = vi.fn();
         renderWithSprite(<Setup {...defaultProps} onShowHelp={onShowHelp} />);
 
-        const versionButton = screen.getByText('v1.2.4');
+        const versionButton = screen.getByText('v1.2.5');
         fireEvent.click(versionButton);
 
         expect(onShowHelp).toHaveBeenCalledTimes(1);

src/components/Setup.test.jsx

@@ -18,6 +18,7 @@ export function useAudio() {
     const isLoadedRef = useRef(false);
     const perfTickRef = useRef(0);
     const wakeLockRef = useRef(null);
+    const playheadVersionRef = useRef(0);
 
     const loadKit = useCallback(async (kitId) => {
         const kit = KITS[kitId];
@@ -67,6 +68,9 @@ export function useAudio() {
         }
 
         if (Tone.getTransport().state === "started") {
+            // Invalidate any already queued UI updates from the previous
+            // transport timeline before stopping.
+            playheadVersionRef.current += 1;
             // Pause playback but preserve the current playhead position so resume
             // continues from the same step. `handleReset` is responsible for
             // explicitly resetting to step 0.
@@ -164,7 +168,11 @@ export function useAudio() {
             });
 
             // Schedule UI update
+            const scheduledPlayheadVersion = playheadVersionRef.current;
             Tone.getDraw().schedule(() => {
+                // Ignore stale scheduled updates after a manual seek/stop.
+                if (scheduledPlayheadVersion !== playheadVersionRef.current) return;
+
                 if (perfEnabled) {
                     performance.mark(uiMarkName);
                     performance.measure(measureName, audioMarkName, uiMarkName);
@@ -192,6 +200,8 @@ export function useAudio() {
     }, []);
 
     const setStep = useCallback((step) => {
+        // Invalidate queued draw updates from the previous timeline position.
+        playheadVersionRef.current += 1;
         stepRef.current = step;
         setCurrentStep(step);
     }, []);

src/hooks/useAudio.js

@@ -259,6 +259,40 @@ describe('useAudio', () => {
         expect(mockPlayersInstance.player).not.toHaveBeenCalled();
     });
 
+    it('ignores stale scheduled UI updates after manual seek', async () => {
+        const scheduledCallbacks = [];
+        Tone.getDraw.mockReturnValue({
+            schedule: vi.fn((cb) => {
+                scheduledCallbacks.push(cb);
+            })
+        });
+
+        const { result } = renderHook(() => useAudio());
+        await act(async () => { await result.current.loadKit('black-pearl'); });
+
+        act(() => {
+            result.current.updateGrid([[true, false]]);
+        });
+
+        const loopCallback = Tone.Loop.mock.calls[0][0];
+
+        act(() => {
+            loopCallback(10);
+        });
+
+        act(() => {
+            result.current.setStep(7);
+        });
+
+        expect(result.current.currentStep).toBe(7);
+
+        act(() => {
+            scheduledCallbacks[0]();
+        });
+
+        expect(result.current.currentStep).toBe(7);
+    });
+
     it('cleans up on unmount', async () => {
         const { result, unmount } = renderHook(() => useAudio());
         await act(async () => { await result.current.loadKit('black-pearl'); });