From 6b540ef8fb9f53983a7f66d82019b7fcf2aee0a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 17 Nov 2025 22:36:07 +0100
Subject: [PATCH] fix: prevent localStorage circular reference in track
 serialization
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Explicitly whitelist track fields when saving to localStorage to prevent
DOM element references (HTMLButtonElement with React fiber) from being
serialized. This fixes the circular structure JSON error.

Changes:
- Changed from spread operator exclusion to explicit field whitelisting
- Ensured track.name is always converted to string
- Only serialize Track interface fields that should be persisted

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 lib/hooks/useMultiTrack.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/lib/hooks/useMultiTrack.ts b/lib/hooks/useMultiTrack.ts
index 8b11e0c..d6a82ee 100644
--- a/lib/hooks/useMultiTrack.ts
+++ b/lib/hooks/useMultiTrack.ts
@@ -33,7 +33,20 @@ export function useMultiTrack() {
     if (typeof window === 'undefined') return;
 
     try {
-      const trackData = tracks.map(({ audioBuffer, ...track }) => track);
+      // Only save serializable fields, excluding audioBuffer and any DOM references
+      const trackData = tracks.map((track) => ({
+        id: track.id,
+        name: String(track.name || 'Untitled Track'),
+        color: track.color,
+        height: track.height,
+        volume: track.volume,
+        pan: track.pan,
+        mute: track.mute,
+        solo: track.solo,
+        recordEnabled: track.recordEnabled,
+        collapsed: track.collapsed,
+        selected: track.selected,
+      }));
       localStorage.setItem(STORAGE_KEY, JSON.stringify(trackData));
     } catch (error) {
       console.error('Failed to save tracks to localStorage:', error);