app/src/components/TrackioWrapper.astro

---
// TrackioWrapper.astro
import Trackio from './trackio/Trackio.svelte';
---

<!-- Ensure Roboto Mono is loaded for Oblivion theme -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap" rel="stylesheet">

<div class="trackio-wrapper">
  <div class="trackio-controls">
    <div class="controls-left">
      <div class="theme-selector">
        <label for="theme-select">Theme</label>
        <select id="theme-select" class="theme-select">
          <option value="classic">Classic</option>
          <option value="oblivion">Oblivion</option>
        </select>
      </div>
      <div class="scale-controls">
        <label>
          <input type="checkbox" id="log-scale-x" checked>
          Log Scale X
        </label>
        <label>
          <input type="checkbox" id="smooth-data" checked>
          Smooth
        </label>
      </div>
    </div>
    <button class="button button--ghost" type="button" id="randomize-btn">
      Randomize Data
    </button>
  </div>
  
  <div class="trackio-container">
    <Trackio client:load variant="classic" logScaleX={true} smoothing={true} />
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', async () => {
    const themeSelect = document.getElementById('theme-select');
    const randomizeBtn = document.getElementById('randomize-btn');
    const logScaleXCheckbox = document.getElementById('log-scale-x');
    const smoothDataCheckbox = document.getElementById('smooth-data');
    const trackioContainer = document.querySelector('.trackio-container');
    
    if (!themeSelect || !randomizeBtn || !logScaleXCheckbox || !smoothDataCheckbox || !trackioContainer) return;
    
    // Import the store function
    const { triggerJitter } = await import('./trackio/store.js');
    
    // Theme change handler
    themeSelect.addEventListener('change', (e) => {
      const target = e.target;
      if (!target || !('value' in target)) return;
      
      const newVariant = target.value;
      console.log(`Theme changed to: ${newVariant}`); // Debug log
      
      // Find the trackio element and call setTheme on the Svelte instance
      const trackioEl = trackioContainer.querySelector('.trackio');
      if (trackioEl && trackioEl.__trackioInstance) {
        console.log('Calling setTheme on Trackio instance'); // Debug log
        trackioEl.__trackioInstance.setTheme(newVariant);
      } else {
        // Fallback: just update CSS classes
        console.log('No Trackio instance found, updating CSS classes only'); // Debug log
        if (trackioEl) {
          trackioEl.classList.remove('theme--classic', 'theme--oblivion');
          trackioEl.classList.add(`theme--${newVariant}`);
        }
      }
    });

    // Log scale X change handler
    logScaleXCheckbox.addEventListener('change', (e) => {
      const target = e.target;
      if (!target || !('checked' in target)) return;
      
      const isLogScale = target.checked;
      console.log(`Log scale X changed to: ${isLogScale}`); // Debug log
      
      // Find the trackio element and call setLogScaleX on the Svelte instance
      const trackioEl = trackioContainer.querySelector('.trackio');
      if (trackioEl && trackioEl.__trackioInstance) {
        console.log('Calling setLogScaleX on Trackio instance'); // Debug log
        trackioEl.__trackioInstance.setLogScaleX(isLogScale);
      } else {
        console.log('Trackio instance not found for log scale change');
      }
    });

    // Smooth data change handler
    smoothDataCheckbox.addEventListener('change', (e) => {
      const target = e.target;
      if (!target || !('checked' in target)) return;
      
      const isSmooth = target.checked;
      console.log(`Smooth data changed to: ${isSmooth}`); // Debug log
      
      // Find the trackio element and call setSmoothing on the Svelte instance
      const trackioEl = trackioContainer.querySelector('.trackio');
      if (trackioEl && trackioEl.__trackioInstance) {
        console.log('Calling setSmoothing on Trackio instance'); // Debug log
        trackioEl.__trackioInstance.setSmoothing(isSmooth);
      } else {
        console.log('Trackio instance not found for smooth change');
      }
    });
    
    // Initialize with default checked states
    setTimeout(() => {
      if (logScaleXCheckbox.checked) {
        const trackioEl = trackioContainer.querySelector('.trackio');
        if (trackioEl && trackioEl.__trackioInstance) {
          console.log('Initializing with log scale X enabled');
          trackioEl.__trackioInstance.setLogScaleX(true);
        }
      }
      
      if (smoothDataCheckbox.checked) {
        const trackioEl = trackioContainer.querySelector('.trackio');
        if (trackioEl && trackioEl.__trackioInstance) {
          console.log('Initializing with smoothing enabled');
          trackioEl.__trackioInstance.setSmoothing(true);
        }
      }
    }, 100); // Small delay to ensure Trackio is fully loaded
    
    // Randomize data handler - now uses the store
    randomizeBtn.addEventListener('click', () => {
      console.log('Randomize button clicked - triggering jitter via store'); // Debug log
      
      // Add vibration animation
      randomizeBtn.classList.add('vibrating');
      setTimeout(() => {
        randomizeBtn.classList.remove('vibrating');
      }, 600);
      
      // Test direct window approach as well
      if (window.trackioInstance && typeof window.trackioInstance.jitterData === 'function') {
        console.log('Found window.trackioInstance, calling jitterData directly'); // Debug log
        window.trackioInstance.jitterData();
      } else {
        console.log('No window.trackioInstance found, using store trigger'); // Debug log
        triggerJitter();
      }
    });
  });
</script>

<style>
  .trackio-wrapper {
    width: 100%;
    margin: 0px 0 20px 0;
  }
  
  .trackio-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 0px;
    /* border-bottom: 1px solid var(--border-color); */
    gap: 16px;
    flex-wrap: nowrap;
  }
  
  .controls-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  
  .btn-randomize {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--accent-color, #007acc);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  
  .btn-randomize:hover {
    background: var(--accent-hover, #005a9e);
    transform: translateY(-1px);
  }
  
  .btn-randomize:active {
    transform: translateY(0);
  }
  
  .theme-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  
  .theme-selector label {
    font-weight: 500;
    color: var(--text-color);
  }
  
  .theme-select {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg, var(--surface-bg));
    color: var(--text-color);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease;
  }
  
  .theme-select:focus {
    outline: none;
    border-color: var(--accent-color, #007acc);
  }
  
  .scale-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  
  /* Animation de vibration pour le bouton */
  @keyframes vibrate {
    0% { transform: translateX(0); }
    10% { transform: translateX(-2px) rotate(-1deg); }
    20% { transform: translateX(2px) rotate(1deg); }
    30% { transform: translateX(-2px) rotate(-1deg); }
    40% { transform: translateX(2px) rotate(1deg); }
    50% { transform: translateX(-1px) rotate(-0.5deg); }
    60% { transform: translateX(1px) rotate(0.5deg); }
    70% { transform: translateX(-1px) rotate(-0.5deg); }
    80% { transform: translateX(1px) rotate(0.5deg); }
    90% { transform: translateX(-0.5px) rotate(-0.25deg); }
    100% { transform: translateX(0) rotate(0); }
  }
  
  .button.vibrating {
    animation: vibrate 0.6s ease-in-out;
  }
  
  .trackio-container {
    width: 100%;
    margin-top: 10px;
    border: 1px solid var(--border-color);
    padding: 24px 12px;

  }
  
  @media (max-width: 768px) {
    .trackio-controls {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    
    .controls-left {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    
    .theme-selector {
      justify-content: space-between;
    }
    
    .scale-controls {
      justify-content: space-between;
    }
  }
</style>