src/App.svelte

<script lang="ts">
  import Dataframe from "@gradio/dataframe";
  import { onMount } from "svelte";
  import ConfigPanel from "./lib/ConfigPanel.svelte";
  import SyntaxHighlighter from "./lib/SyntaxHighlighter.svelte";
  import { sampleDatasets } from "./lib/sampleData";

  // Configuration state
  let selectedDataset = "basic";
  let value = {
    data: sampleDatasets.basic.data,
    headers: sampleDatasets.basic.headers,
    metadata: null
  };
  
  let datatype: string[] = sampleDatasets.basic.datatypes;
  let editable = sampleDatasets.basic.config.editable;
  let show_row_numbers = sampleDatasets.basic.config.show_row_numbers;
  let show_search: "none" | "search" | "filter" = sampleDatasets.basic.config.show_search;
  let show_copy_button = sampleDatasets.basic.config.show_copy_button;
  let show_fullscreen_button = sampleDatasets.basic.config.show_fullscreen_button;
  let show_label = sampleDatasets.basic.config.show_label;
  let label = sampleDatasets.basic.config.label;
  let max_height = sampleDatasets.basic.config.max_height;
  let line_breaks = sampleDatasets.basic.config.line_breaks;
  let wrap = sampleDatasets.basic.config.wrap;
  let column_widths: string[] = [];
  let max_chars: number | undefined = sampleDatasets.basic.config.max_chars;

  // Theme state
  let currentTheme = "default";
  
  // Active view state
  let activeView = "canvas"; // "canvas", "docs", "events", "source"
  
  // Mobile responsive state
  let showLeftPanel = false;
  let showRightPanel = true; // Show controls by default
  
  // Resizable controls panel
  let controlsHeight = 220; // Default height
  let isDragging = false;
  let dragStartY = 0;
  let dragStartHeight = 0;
  
  // Event handlers
  function handleChange(e: CustomEvent) {
    console.log("Data changed:", e.detail);
    value = e.detail;
  }

  function handleSelect(e: CustomEvent) {
    console.log("Cell selected:", e.detail);
  }

  function handleInput(e: CustomEvent) {
    console.log("Input event:", e.detail);
  }

  function handleDatasetChange(e: CustomEvent) {
    const dataset = e.detail.dataset;
    selectedDataset = dataset;
    const data = sampleDatasets[dataset as keyof typeof sampleDatasets];
    value = {
      data: data.data,
      headers: data.headers,
      metadata: null
    };
    datatype = data.datatypes;
  }

  function handleThemeChange(e: CustomEvent) {
    const theme = e.detail.theme;
    currentTheme = theme;
    const body = document.body;
    body.className = body.className.replace(/\b(dark|purple-theme|green-theme|orange-theme)\b/g, '');
    if (theme !== 'default') {
      body.classList.add(theme);
    }
  }

  function switchDataset(dataset: string) {
    selectedDataset = dataset;
    const data = sampleDatasets[dataset as keyof typeof sampleDatasets];
    value = {
      data: data.data,
      headers: data.headers,
      metadata: null
    };
    datatype = data.datatypes;
    
    // Apply configuration from the dataset
    const config = data.config;
    editable = config.editable;
    show_row_numbers = config.show_row_numbers;
    show_search = config.show_search;
    show_copy_button = config.show_copy_button;
    show_fullscreen_button = config.show_fullscreen_button;
    show_label = config.show_label;
    label = config.label;
    max_height = config.max_height;
    line_breaks = config.line_breaks;
    wrap = config.wrap;
    max_chars = config.max_chars;
    
    // Switch to canvas view to show the selected example
    activeView = 'canvas';
  }

  function applyTheme(theme: string) {
    currentTheme = theme;
    const body = document.body;
    body.className = body.className.replace(/\b(dark|purple-theme|green-theme|orange-theme)\b/g, '');
    if (theme !== 'default') {
      body.classList.add(theme);
    }
  }

  function setActiveView(view: string) {
    activeView = view;
  }

  function getExampleIcon(key: string): string {
    const icons: Record<string, string> = {
      basic: '📋',
      compact: '📊',
      filterable: '🔍',
      readonly: '🔒',
      wrapped: '📝',
      large: '📈',
      mixed: '🎨',
      minimal: '⚡'
    };
    return icons[key] || '📄';
  }

  function getExampleTitle(key: string): string {
    const titles: Record<string, string> = {
      basic: 'Basic Example',
      compact: 'Compact View',
      filterable: 'Filter & Search',
      readonly: 'Read-Only',
      wrapped: 'Text Wrapping',
      large: 'Large Dataset',
      mixed: 'Rich Content',
      minimal: 'Minimal UI'
    };
    return titles[key] || key.charAt(0).toUpperCase() + key.slice(1);
  }

  function getExampleDescription(key: string): string {
    const descriptions: Record<string, string> = {
      basic: 'Standard configuration with all features',
      compact: 'Minimal UI, no controls',
      filterable: 'Advanced filtering capabilities',
      readonly: 'Non-editable data display',
      wrapped: 'Long text with wrapping',
      large: 'Performance with 50 rows',
      mixed: 'HTML & Markdown support',
      minimal: 'Bare minimum interface'
    };
    return descriptions[key] || 'Example configuration';
  }

  function handleAddColumn() {
    const newHeaders = [...value.headers, `Column ${value.headers.length + 1}`];
    const newData = value.data.map((row: any) => [...row, ""]);
    value = {
      ...value,
      headers: newHeaders,
      data: newData
    };
    datatype = [...datatype, "str"];
  }

  function handleAddRow() {
    const newRow = Array(value.headers.length).fill("");
    value = {
      ...value,
      data: [...value.data, newRow]
    };
  }

  // Resizable controls panel handlers
  function handleDragStart(e: MouseEvent) {
    isDragging = true;
    dragStartY = e.clientY;
    dragStartHeight = controlsHeight;
    document.body.classList.add('dragging');
    document.addEventListener('mousemove', handleDragMove);
    document.addEventListener('mouseup', handleDragEnd);
    e.preventDefault();
  }

  function handleDragMove(e: MouseEvent) {
    if (!isDragging) return;
    
    const deltaY = dragStartY - e.clientY; // Inverted because we want up movement to increase height
    const newHeight = Math.max(180, Math.min(500, dragStartHeight + deltaY)); // Min 180px, max 500px
    controlsHeight = newHeight;
  }

  function handleDragEnd() {
    isDragging = false;
    document.body.classList.remove('dragging');
    document.removeEventListener('mousemove', handleDragMove);
    document.removeEventListener('mouseup', handleDragEnd);
  }

  onMount(() => {
    if (currentTheme !== 'default') {
      document.body.classList.add(currentTheme);
    }
  });
</script>

<!-- Storybook-style layout -->
<div class="min-h-screen bg-[#f6f9fc] flex flex-col">
  <!-- Storybook Header -->
  <header class="h-16 bg-white border-b-2 border-[#d1d5db] flex items-center px-4 md:px-6 relative z-20">
    <!-- Mobile Menu Buttons -->
    <div class="flex items-center space-x-2 md:hidden">
      <button 
        on:click={() => currentTheme === 'dark' ? applyTheme('default') : applyTheme('dark')}
        class="p-2 text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc] rounded-lg transition-all duration-200"
        aria-label="Toggle dark mode"
        title="Toggle dark/light mode"
      >
        {#if currentTheme === 'dark'}
          <span class="text-lg">☀️</span>
        {:else}
          <span class="text-lg">🌙</span>
        {/if}
      </button>
      <button 
        on:click={() => showLeftPanel = !showLeftPanel}
        class="p-2 text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc] rounded-lg transition-all duration-200"
        aria-label="Toggle navigation menu"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
      <button 
        on:click={() => showRightPanel = !showRightPanel}
        class="p-2 text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc] rounded-lg transition-all duration-200"
        aria-label="Toggle controls panel"
      >
        <svg class="w-5 h-5" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.0503 10.6066L2.97923 17.6777C2.19818 18.4587 2.19818 19.725 2.97923 20.5061V20.5061C3.76027 21.2871 5.0266 21.2871 5.80765 20.5061L12.8787 13.435" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M10.0502 10.6066C9.20638 8.45358 9.37134 5.6286 11.1109 3.88909C12.8504 2.14957 16.0606 1.76777 17.8284 2.82843L14.7877 5.8691L14.5051 8.98014L17.6161 8.69753L20.6568 5.65685C21.7175 7.42462 21.3357 10.6349 19.5961 12.3744C17.8566 14.1139 15.0316 14.2789 12.8786 13.435" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </div>

    <div class="flex items-center space-x-3 md:space-x-4 flex-1 md:flex-initial justify-center md:justify-start">
      <!-- Gradio Logo -->
      <div class="w-8 h-8 md:w-10 md:h-10 flex items-center justify-center">
        <img src="/vite.svg" alt="Gradio Logo" class="w-full h-full object-contain" />
      </div>
      <div class="flex flex-col">
        <h1 class="text-sm md:text-base font-bold text-[#2e3438] leading-tight tracking-tight">
          @gradio/dataframe demo
        </h1>
      </div>
    </div>
    
    <div class="hidden md:flex ml-auto items-center space-x-4">
      <button 
        on:click={() => currentTheme === 'dark' ? applyTheme('default') : applyTheme('dark')}
        class="px-3 py-2 !mr-2 text-sm font-medium text-[#73828c] rounded-lg flex items-center"
        aria-label="Toggle dark mode"
        title="Toggle dark/light mode"
      >
        {#if currentTheme === 'dark'}
          <span class="mr-2">☀️</span>
        {:else}
          <span class="mr-2">🌙</span>
        {/if}
        Toggle Theme
      </button>
      
      <button 
        on:click={() => showRightPanel = !showRightPanel}
        class="px-4 py-2 !mr-2 text-sm font-medium text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc] rounded-lg transition-all duration-200 flex items-center border border-[#e0e0e0]"
        aria-label="Toggle controls panel"
      >
        <span class="mr-2">🛠️</span>
        {showRightPanel ? 'Hide' : 'Show'} Controls
      </button>
      <button 
        on:click={() => setActiveView('docs')}
        class="px-4 py-2 text-sm font-medium text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc] rounded-lg transition-all duration-200 flex items-center"
      >
        <span class="mr-2">📖</span>
        Docs
      </button>
      <a 
        href="https://www.npmjs.com/package/@gradio/dataframe" 
        target="_blank" 
        rel="noopener noreferrer" 
        class="px-4 py-2 text-sm font-semibold text-white rounded-lg transition-all duration-200 flex items-center no-underline"
      >
        <span class="mr-2">📦</span>
        npm
      </a>
    </div>
  </header>

  <div class="flex flex-1 overflow-hidden relative">
    <!-- Mobile Overlay -->
    {#if showLeftPanel || showRightPanel}
      <div 
        class="fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden"
        role="button"
        tabindex="0"
        on:click={() => { showLeftPanel = false; showRightPanel = false; }}
        on:keydown={(e) => { if (e.key === 'Escape') { showLeftPanel = false; showRightPanel = false; } }}
      ></div>
    {/if}

    <!-- Left Panel: Examples & Documentation -->
    <div class="
      {showLeftPanel ? 'translate-x-0' : '-translate-x-full'} 
      md:translate-x-0 
      fixed md:static 
      left-0 top-16 bottom-0 
      w-64 md:w-[200px] lg:w-[220px] xl:w-[240px]
      bg-white border-r-1 border-[#d1d5db]  [border-right-width:1px!important]
      overflow-y-auto 
      z-20
      transition-transform duration-300 ease-in-out
    ">
      
         <!-- Documentation Content -->
         <div class="p-4 space-y-4">
        <div>
            <h3 class="text-xs font-semibold text-[#2e3438] mb-2">@gradio/dataframe</h3>
            <p class="text-[10px] text-[#73828c] leading-relaxed">
              A standalone dataframe component from Gradio that provides interactive table functionality with editing, searching, and data manipulation capabilities.
            </p>
          </div>
        </div>
        
      <!-- Documentation Navigation -->
      <div class="p-4 border-b border-[#e0e0e0]">
        <h2 class="text-[8px] font-bold text-[#2e3438] uppercase tracking-wider mb-3">Navigation</h2>
        <div class="flex flex-col space-y-2">
          <button 
            on:click={() => setActiveView('canvas')}
            class="nav-button {activeView === 'canvas' ? 'nav-button-active' : 'nav-button-inactive'}"
          >
            <div class="flex items-center justify-center mr-3">
              <span class="text-xs">🎯</span>
            </div>
            Canvas
          </button>
          <button 
            on:click={() => setActiveView('docs')}
            class="nav-button {activeView === 'docs' ? 'nav-button-active' : 'nav-button-inactive'}"
          >
            <div class="flex items-center justify-center mr-3">
              <span class="text-xs">📖</span>
            </div>
            Documentation
          </button>
          <button 
            on:click={() => setActiveView('events')}
            class="nav-button {activeView === 'events' ? 'nav-button-active' : 'nav-button-inactive'}"
          >
            <div class="flex items-center justify-center mr-3">
              <span class="text-xs">🔍</span>
            </div>
            Events
          </button>
          <button 
            on:click={() => setActiveView('source')}
            class="nav-button {activeView === 'source' ? 'nav-button-active' : 'nav-button-inactive'}"
          >
            <div class="flex items-center justify-center mr-3">
              <span class="text-xs">💻</span>
            </div>
            Source Code
          </button>
        </div>
      </div>

      <!-- Examples Navigation -->
      <div class="p-4 border-b border-[#e0e0e0]">
        <h2 class="text-[8px] font-bold text-[#2e3438] uppercase tracking-wider mb-3">Examples</h2>

        <!-- Example Cards -->
        <div class="space-y-2">
          {#each Object.entries(sampleDatasets) as [key, dataset]}
            <button 
              on:click={() => switchDataset(key)}
              class="w-full group"
            >
              <div class="example-card {selectedDataset === key ? 'example-card-active' : 'example-card-inactive'}">
                <div class="flex items-center justify-between p-2">
                  <div class="flex items-center">
                    <div class="example-icon {selectedDataset === key ? 'example-icon-active' : 'example-icon-inactive'}">
                      <span class="text-xs">{getExampleIcon(key)}</span>
                    </div>
                    <div class="text-left">
                      <h4 class="text-[10px] font-semibold {selectedDataset === key ? 'text-[#1e293b]' : 'text-[#374151]'} group-hover:text-[#1e293b] transition-colors duration-200">{getExampleTitle(key)}</h4>
                      <p class="text-[8px] {selectedDataset === key ? 'text-[#64748b]' : 'text-[#9ca3af]'} mt-0.5">{getExampleDescription(key)}</p>
                    </div>
                  </div>
                  
                </div>
              </div>
            </button>
          {/each}
        </div>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 bg-[#f6f9fc] overflow-y-auto border-l border-r border-[#e0e0e0] md:border-l-0" style="padding-bottom: {activeView === 'canvas' ? controlsHeight + 'px' : '16px'}">
      <!-- Canvas Area -->
      {#if activeView === 'canvas'}
        <div class="flex-1 bg-[#f6f9fc] p-2 sm:p-4 md:p-4 lg:p-6 xl:p-8 overflow-auto">
          <div class="main-container">
            <div class="content-card">
              <div class="border border-[#e2e8f0] rounded-lg md:rounded-xl p-4 md:p-8 bg-[#f8fafc] overflow-x-auto">
                <Dataframe
                  bind:value
                  datatype={datatype as any}
                  {editable}
                  {show_row_numbers}
                  {show_search}
                  {show_copy_button}
                  {show_fullscreen_button}
                  {show_label}
                  {label}
                  {max_height}
                  {line_breaks}
                  {wrap}
                  {column_widths}
                  {max_chars}
                  on:change={handleChange}
                  on:select={handleSelect}
                  on:input={handleInput}
                />
              </div>
            </div>
          </div>
        </div>
      {:else if activeView === 'docs'}
        <!-- Documentation Page -->
        <div class="page-wrapper">
          <div class="main-container">
            <div class="content-card">
              <div class="mb-8 md:mb-12">
                <h1 class="page-title">@gradio/dataframe</h1>
                <p class="description-text">
                  A standalone dataframe component from Gradio that provides interactive table functionality with editing, searching, and data manipulation capabilities.
                </p>
              </div>

              <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-12">
                <div>
                  <h2 class="section-title">Installation</h2>
                  <div class="bg-[#f8fafc] border border-[#e2e8f0] rounded-xl p-6 mb-8">
                    <code class="text-sm text-[#2e3438] font-mono font-semibold">npm install @gradio/dataframe</code>
                  </div>
                  
              
                </div>

                <div>
                  <h2 class="section-title">Key Features</h2>
                  <ul class="space-y-4">
                    <li class="flex items-start">
                      <span class="text-[#10b981] mr-4 mt-1 text-lg">✓</span>
                      <span class="feature-text">Interactive editing and data manipulation</span>
                    </li>
                    <li class="flex items-start">
                      <span class="text-[#10b981] mr-4 mt-1 text-lg">✓</span>
                      <span class="feature-text">Search and filter capabilities</span>
                    </li>
                    <li class="flex items-start">
                      <span class="text-[#10b981] mr-4 mt-1 text-lg">✓</span>
                      <span class="feature-text">Customizable appearance and behavior</span>
                    </li>
                    <li class="flex items-start">
                      <span class="text-[#10b981] mr-4 mt-1 text-lg">✓</span>
                      <span class="feature-text">Support for multiple data types</span>
                    </li>
                    <li class="flex items-start">
                      <span class="text-[#10b981] mr-4 mt-1 text-lg">✓</span>
                      <span class="feature-text">Copy to clipboard functionality</span>
                    </li>
                    <li class="flex items-start">
                      <span class="text-[#10b981] mr-4 mt-1 text-lg">✓</span>
                      <span class="feature-text">Fullscreen mode support</span>
                    </li>
                  </ul>
                </div>
                
              </div>

              <div class="mb-12">

              <h3 class="subsection-title">Quick Start</h3>
              <SyntaxHighlighter 
                language="typescript"
                code={`<script>
  import Dataframe from "@gradio/dataframe";

  let value = {
    data: [["Alice", 25], ["Bob", 30]],
    headers: ["Name", "Age"],
  };

  </script>

  <Dataframe bind:value />`}
              />
              </div>

              <div class="mb-12">
                <h2 class="text-lg font-bold text-[#2e3438] mb-4">API Reference</h2>
                <div class="overflow-x-auto border border-[#e2e8f0] rounded-xl">
                  <table class="w-full">
                    <thead class="bg-[#f8fafc]">
                      <tr>
                        <th class="px-6 py-4 text-left font-bold text-[#2e3438] border-b border-[#e2e8f0] text-sm">Prop</th>
                        <th class="px-6 py-4 text-left font-bold text-[#2e3438] border-b border-[#e2e8f0] text-sm">Type</th>
                        <th class="px-6 py-4 text-left font-bold text-[#2e3438] border-b border-[#e2e8f0] text-sm">Default</th>
                        <th class="px-6 py-4 text-left font-bold text-[#2e3438] border-b border-[#e2e8f0] text-sm">Description</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">value</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">DataFrame | Array | List</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">null</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Data to display. Supports pandas, numpy, polars, and list of lists</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">headers</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">string[]</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">null</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">List of column header names</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">datatype</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">string | string[]</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">"str"</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Data types: "str", "number", "bool", "date", "markdown", "html", "image", "auto"</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">interactive</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">boolean</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">null</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Whether users can edit the dataframe (inferred if not provided)</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">label</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">string</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">null</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Label text that appears above the component</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">show_label</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">boolean</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">null</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Whether to display the label</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">max_height</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">number | string</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">500</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Maximum height in pixels or CSS units</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">show_row_numbers</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">boolean</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">false</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Display row numbers in a separate column</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">show_search</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">"none" | "search" | "filter"</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">"none"</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Show search input and filter functionality</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">show_copy_button</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">boolean</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">false</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Show button to copy table data to clipboard</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">show_fullscreen_button</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">boolean</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">false</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Show button to view table in fullscreen mode</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">wrap</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">boolean</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">false</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Enable text wrapping in table cells</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">line_breaks</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">boolean</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">true</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Enable GitHub-flavored Markdown line breaks (for markdown columns)</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">column_widths</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">(string | number)[]</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">null</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Width of each column in pixels ("100px") or percentage ("10%")</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">max_chars</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">number</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">null</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Maximum characters to display per cell before truncating</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">row_count</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">number | [number, "fixed" | "dynamic"]</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">[1, "dynamic"]</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Limit number of rows and whether users can add/delete rows</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">col_count</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">number | [number, "fixed" | "dynamic"]</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">null</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Limit number of columns and whether users can add/delete columns</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">pinned_columns</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">number</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">null</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Number of columns to pin from the left</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4 border-b border-[#e2e8f0]"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">static_columns</code></td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">number[]</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] font-medium">null</td>
                        <td class="px-6 py-4 border-b border-[#e2e8f0] text-[#64748b] leading-relaxed">Column indices that should not be editable</td>
                      </tr>
                      <tr class="hover:bg-[#f8fafc] transition-colors duration-150">
                        <td class="px-6 py-4"><code class="text-sm bg-[#e2e8f0] px-3 py-1.5 rounded-md font-mono font-semibold text-[#1e293b]">type</code></td>
                        <td class="px-6 py-4 text-[#64748b] font-medium">"pandas" | "numpy" | "array" | "polars"</td>
                        <td class="px-6 py-4 text-[#64748b] font-medium">"pandas"</td>
                        <td class="px-6 py-4 text-[#64748b] leading-relaxed">Type of value returned by the component</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      {:else if activeView === 'events'}
        <!-- Events Page -->
        <div class="page-wrapper">
          <div class="main-container">
            <div class="content-card">
              <div class="mb-8 md:mb-12">
                <h1 class="page-title">Events</h1>
                <p class="description-text">
                  The dataframe component fires several events that you can listen to for user interactions and data changes.
                </p>
              </div>

              <div class="space-y-10">
                <div class="event-section">
                  <div class="flex items-start mb-6">
                    <code class="bg-[#F87701] text-white px-4 py-2 rounded-lg text-[#2e3438] mr-6 font-mono font-bold text-sm border shadow-sm">change</code>
                    <div class="flex-1">
                      <h3 class="subsection-title">Data Change Event</h3>
                      <p class="text-sm text-[#64748b] mb-4 leading-relaxed font-medium">Fired when the table data is modified by the user.</p>
                      <SyntaxHighlighter 
                        language="typescript"
                        code={`<Dataframe
  bind:value
  on:change={(e) => {
    console.log("Data changed:", e.detail);
  }}
/>`}
                      />
                    </div>
                  </div>
                </div>

                <div class="event-section">
                  <div class="flex items-start mb-6">
                    <code class="bg-[#10b981] text-white px-4 py-2 rounded-lg text-[#2e3438] mr-6 font-mono font-bold text-sm border shadow-sm">select</code>
                    <div class="flex-1">
                      <h3 class="subsection-title">Cell Selection Event</h3>
                      <p class="text-[#64748b] mb-6 leading-relaxed font-medium">Fired when a cell is selected or focused.</p>
                      <SyntaxHighlighter 
                        language="typescript"
                        code={`<Dataframe
  bind:value
  on:select={(e) => {
    console.log("Cell selected:", e.detail);
    // e.detail contains: { row: number, col: number }
  }}
/>`}
                      />
                    </div>
                  </div>
                </div>

                <div class="event-section">
                  <div class="flex items-start mb-6">
                    <code class="bg-[#f59e0b] text-white px-4 py-2 rounded-lg text-[#2e3438] mr-6 font-mono font-bold text-sm border shadow-sm">input</code>
                    <div class="flex-1">
                      <h3 class="subsection-title">User Input Event</h3>
                      <p class="text-[#64748b] mb-6 leading-relaxed font-medium">Fired during user input, useful for real-time validation.</p>
                      <SyntaxHighlighter 
                        language="typescript"
                        code={`<Dataframe
  bind:value
  on:input={(e) => {
    console.log("User input:", e.detail);
    // Real-time validation logic here
  }}
/>`}
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="mt-12 p-8 bg-gradient-to-r from-[#f8fafc] to-[#e0f2fe] border border-[#e2e8f0] rounded-xl">
                <h3 class="text-2xl font-bold text-[#2e3438] mb-4">Event Data Structure</h3>
                <p class="text-[#64748b] mb-6 leading-relaxed font-medium">All events provide data through the <code class="bg-white px-3 py-1.5 rounded-md border font-mono text-sm text-[#1e293b] font-semibold">e.detail</code> property:</p>
                <SyntaxHighlighter 
                  language="typescript"
                  code={`// Change event detail
{
  data: (string | number)[][],
  headers: string[],
  metadata: any
}

// Select event detail  
{
  row: number,
  col: number,
  value: string | number
}`}
                />
              </div>
            </div>
          </div>
        </div>
      {:else if activeView === 'source'}
        <!-- Source Code Page -->
        <div class="page-wrapper overflow-y-scroll">
          <div class="main-container">
            <div class="content-card">
              <div class="mb-8 md:mb-12">
                <h1 class="page-title">Source Code</h1>
                <p class="description-text">
                  Complete example showing how to implement the dataframe component with all features.
                </p>
              </div>

              <div class="mb-10">
                <h2 class="text-lg font-bold text-[#2e3438] mb-4">Current Configuration</h2>
                <SyntaxHighlighter 
                  language="typescript"
                  code={`<script lang="ts">
  import Dataframe from "@gradio/dataframe";

  let value = ` + JSON.stringify({
    data: value.data.slice(0, 3),
    headers: value.headers,
    metadata: null
  }, null, 2) + `;

  let datatype = ` + JSON.stringify(datatype) + `;

  function handleChange(e: any) {
    console.log("Data changed:", e.detail);
  }

  function handleSelect(e: any) {
    console.log("Cell selected:", e.detail);
  }

  function handleInput(e: any) {
    console.log("Input event:", e.detail);
  }
</script>

<Dataframe
  bind:value
  datatype={datatype}
  editable={` + editable + `}
  show_row_numbers={` + show_row_numbers + `}
  show_search="` + show_search + `"
  show_copy_button={` + show_copy_button + `}
  show_fullscreen_button={` + show_fullscreen_button + `}
  show_label={` + show_label + `}
  label="` + label + `"
  max_height={` + max_height + `}
  line_breaks={` + line_breaks + `}
  wrap={` + wrap + `}` + (max_chars ? `
  max_chars={` + max_chars + `}` : '') + `
  on:change={handleChange}
  on:select={handleSelect}
  on:input={handleInput}
/>`}
                />
              </div>

              <div class="mb-10">
                <h2 class="text-lg font-bold text-[#2e3438] mb-4">TypeScript Definitions</h2>
                <SyntaxHighlighter 
                  language="typescript"
                  code={`interface DataframeValue {
  data: (string | number)[][];
  headers: string[];
  metadata: any;
}

interface DataframeProps {
  value: DataframeValue;
  datatype?: string[];
  editable?: boolean;
  show_row_numbers?: boolean;
  show_search?: "none" | "search" | "filter";
  show_copy_button?: boolean;
  show_fullscreen_button?: boolean;
  show_label?: boolean;
  label?: string;
  max_height?: number;
  line_breaks?: boolean;
  wrap?: boolean;
  max_chars?: number;
  column_widths?: string[];
}`}
                />
              </div>

              <div>
                <h2 class="text-lg font-bold text-[#2e3438] mb-4">Installation</h2>
                <div class="bg-[#f8fafc] border border-[#e2e8f0] rounded-xl p-8">
                  <h3 class="text-lg font-semibold text-[#2e3438] mb-4">Package.json</h3>
                  <SyntaxHighlighter 
                    language="json"
                    code={`{
  "dependencies": {
    "@gradio/dataframe": "^latest"
  }
}`}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      {/if}

    <!-- Bottom Controls Panel (Horizontal) -->
    <div class="
      {showRightPanel && activeView === 'canvas' ? 'translate-y-0' : 'translate-y-full'} 
      fixed 
      left-0 md:left-[200px] lg:left-[220px] xl:left-[240px]
      right-0 bottom-0
      bg-white border-t border-[#d1d5db]
      z-20
      transition-transform duration-300 ease-in-out
    " style="height: {controlsHeight}px">
        <!-- Drag handle for resizing -->
            <div 
              class="flex justify-center border-b border-[#e0e0e0] cursor-ns-resize hover:bg-gray-50 transition-colors duration-200 {isDragging ? 'bg-gray-100' : ''}"
              on:mousedown={handleDragStart}
              role="slider"
              tabindex="0"
              aria-label="Resize controls panel"
              aria-valuenow={controlsHeight}
              aria-valuemin="120"
              aria-valuemax="400"
              title="Drag to resize controls panel"
            >
        </div>
        
        <!-- Mobile bottom sheet handle -->
        <div class="md:hidden flex justify-center py-2 border-b border-[#e0e0e0]">
          <div class="w-10 h-1 bg-[#d1d5db] rounded-full"></div>
        </div>
        
        <ConfigPanel
          bind:selectedDataset
          bind:currentTheme
          bind:editable
          bind:show_row_numbers
          bind:show_search
          bind:show_copy_button
          bind:show_fullscreen_button
          bind:show_label
          bind:label
          bind:max_height
          bind:line_breaks
          bind:wrap
          bind:max_chars
          on:datasetChange={handleDatasetChange}
          on:themeChange={handleThemeChange}
          on:addColumn={handleAddColumn}
          on:addRow={handleAddRow}
        />
      </div>
    </div>
  </div>
</div>