fix: puzzle sidebar integrates into layout instead of overlapping waveform

- Puzzle panel now shifts canvas and waveform viewer right (340px) instead of
  overlapping them, using body class toggle and CSS transitions
- Canvas resize accounts for sidebar width
- Progress (completed/unlocked levels, custom components) persists in localStorage
- Level cards refresh on each panel open to reflect current progress

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

js/puzzleUI.js

@@ -31,10 +31,21 @@ function createLevelSelectionPanel() {
     `;
     document.body.appendChild(panel);
 
-    // Create level cards
-    const container = document.getElementById('levels-container');
-    const categories = new Map();
+    document.getElementById('close-levels').addEventListener('click', () => {
+        panel.classList.remove('visible');
+        document.body.classList.remove('puzzle-sidebar-open');
+        window.dispatchEvent(new Event('resize'));
+    });
+}
 
+/**
+ * Refresh level cards to reflect current progress
+ */
+function refreshLevelCards() {
+    const container = document.getElementById('levels-container');
+    container.innerHTML = '';
+
+    const categories = new Map();
     LEVELS.forEach(level => {
         if (!categories.has(level.category)) {
             categories.set(level.category, []);
@@ -72,10 +83,6 @@ function createLevelSelectionPanel() {
 
         container.appendChild(categoryEl);
     });
-
-    document.getElementById('close-levels').addEventListener('click', () => {
-        panel.classList.remove('visible');
-    });
 }
 
 /**
@@ -168,6 +175,8 @@ export function setSandboxMode() {
     document.getElementById('level-panel').classList.remove('visible');
     document.getElementById('puzzle-panel').classList.remove('visible');
     document.getElementById('toolbar').classList.remove('puzzle-mode');
+    document.body.classList.remove('puzzle-sidebar-open');
+    window.dispatchEvent(new Event('resize'));
 }
 
 /**
@@ -177,7 +186,10 @@ export function setPuzzleMode() {
     puzzleMode = true;
     document.getElementById('mode-puzzle').classList.add('active');
     document.getElementById('mode-sandbox').classList.remove('active');
+    refreshLevelCards();
     document.getElementById('level-panel').classList.add('visible');
+    document.body.classList.add('puzzle-sidebar-open');
+    window.dispatchEvent(new Event('resize'));
 }
 
 /**