src/components/ConfigPanel.svelte

<script lang="ts">
  import { dataframeConfig } from "../stores/config";

  export let loadSampleData: (type: string) => void;
</script>

<div class="panel">
  <h3>⚙️ Configuration</h3>
  
  <div class="section">
    <h4>Display Options</h4>
    
    <label>
      <input type="checkbox" bind:checked={$dataframeConfig.showRowNumbers} />
      Show Row Numbers
    </label>

    <label>
      <input type="checkbox" bind:checked={$dataframeConfig.showCopyButton} />
      Show Copy Button
    </label>

    <label>
      <input type="checkbox" bind:checked={$dataframeConfig.showFullscreenButton} />
      Show Fullscreen Button
    </label>

    <label>
      <input type="checkbox" bind:checked={$dataframeConfig.showLabel} />
      Show Label
    </label>

    <label>
      <input type="checkbox" bind:checked={$dataframeConfig.editable} />
      Editable Cells
    </label>
  </div>

  <div class="section">
    <h4>Search/Filter</h4>
    <select bind:value={$dataframeConfig.showSearch}>
      <option value="none">None</option>
      <option value="search">Search</option>
      <option value="filter">Filter</option>
    </select>
  </div>

  <div class="section">
    <h4>Layout Options</h4>
    
    <label>
      <input type="checkbox" bind:checked={$dataframeConfig.lineBreaks} />
      Line Breaks
    </label>

    <label>
      <input type="checkbox" bind:checked={$dataframeConfig.wrap} />
      Text Wrap
    </label>

    <label>
      <input type="checkbox" bind:checked={$dataframeConfig.useCustomWidths} />
      Custom Column Widths
    </label>

    <label>
      Max Height (px)
      <input type="number" bind:value={$dataframeConfig.maxHeight} min="200" max="1000" step="50" />
    </label>

    <label>
      Max Characters
      <input type="number" bind:value={$dataframeConfig.maxChars} min="10" max="200" step="10" />
    </label>
  </div>

  <div class="section">
    <h4>Theme</h4>
    <label>
      <input type="checkbox" bind:checked={$dataframeConfig.useCustomTheme} />
      Use Custom Theme
    </label>
  </div>

  <div class="section">
    <h4>Sample Data</h4>
    <div class="button-group">
      <button on:click={() => loadSampleData('small')}>Small Dataset</button>
      <button on:click={() => loadSampleData('large')}>Large Dataset (100 rows)</button>
      <button on:click={() => loadSampleData('default')}>Reset Data</button>
    </div>
  </div>
</div>

<style>
  .panel {
    padding: 1.5rem;
  }

  h3 {
    margin: 0 0 1.5rem;
    color: #333;
    font-size: 1.25rem;
  }

  .section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
  }

  .section:last-child {
    border-bottom: none;
  }

  h4 {
    margin: 0 0 0.75rem;
    color: #666;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  label {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #333;
    cursor: pointer;
  }

  input[type="checkbox"] {
    margin-right: 0.5rem;
  }

  input[type="number"], select {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }

  .button-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  button {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  }

  button:active {
    transform: translateY(0);
  }
</style>