test

README.md

@@ -1,36 +1,58 @@
 ---
 title: Dataframe Sandbox
-emoji: 📊
-colorFrom: red
-colorTo: blue
+emoji: 🔥
+colorFrom: pink
+colorTo: gray
 sdk: static
 pinned: false
-license: apache-2.0
 app_build_command: npm run build
 app_file: dist/index.html
 ---
 
-# @gradio/dataframe Demo
+# Svelte + TS + Vite
 
-An interactive demonstration of the `@gradio/dataframe` component showcasing its features including editing, searching, filtering, and various configuration options.
+This template should help get you started developing with Svelte and TypeScript in Vite.
 
-## Features
+## Recommended IDE Setup
 
-- 🎯 **Interactive Canvas** - Live dataframe component with real-time controls
-- 📖 **Comprehensive Documentation** - Complete API reference and usage examples
-- 🔍 **Event Handling** - Demonstration of component events and callbacks
-- 💻 **Source Code** - Full implementation code with syntax highlighting
-- 🌙 **Dark Mode** - Toggle between light and dark themes
-- 📱 **Responsive Design** - Works on desktop and mobile devices
-- 🛠️ **Resizable Controls** - Drag to adjust controls panel height
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
 
-## Usage
+## Need an official Svelte framework?
 
-Explore different dataframe configurations using the examples panel, adjust settings with the controls panel, and see real-time updates to understand the component's capabilities.
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
 
-## Built with
+## Technical considerations
 
-- **Svelte 5** - Modern reactive framework
-- **Vite** - Fast build tool and dev server
-- **Tailwind CSS** - Utility-first CSS framework
-- **@gradio/dataframe** - Standalone dataframe component
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from "svelte/store";
+export default writable(0);
+```

index.html

@@ -1,9 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@gradio/dataframe Demo</title>
+    <title>Vite + Svelte + TS</title>
   </head>
   <body>
     <div id="app"></div>

package.json

@@ -1,8 +1,7 @@
 {
-  "name": "dataframe-sandbox",
-  "description": "Interactive demo and playground for the @gradio/dataframe standalone component",
+  "name": "svelte",
   "private": true,
-  "version": "1.0.0",
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,19 +12,9 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
-    "@types/prismjs": "^1.26.5",
     "svelte": "^5.28.1",
     "svelte-check": "^4.1.6",
     "typescript": "~5.8.3",
     "vite": "^6.3.5"
-  },
-  "dependencies": {
-    "@gradio/dataframe": "^0.19.2",
-    "@tailwindcss/postcss": "^4.1.13",
-    "@tailwindcss/typography": "^0.5.16",
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.6",
-    "prismjs": "^1.30.0",
-    "tailwindcss": "^4.1.13"
   }
 }

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-    autoprefixer: {},
-  },
-};

src/App.svelte

@@ -1,919 +1,47 @@
 <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);
-    }
-  });
+  import svelteLogo from './assets/svelte.svg'
+  import viteLogo from '/vite.svg'
+  import Counter from './lib/Counter.svelte'
 </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>
+<main>
+  <div>
+    <a href="https://vite.dev" target="_blank" rel="noreferrer">
+      <img src={viteLogo} class="logo" alt="Vite Logo" />
+    </a>
+    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
+      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
+    </a>
+  </div>
+  <h1>Vite + Svelte</h1>
 
-              <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";
+  <div class="card">
+    <Counter />
+  </div>
 
-  let value = ` + JSON.stringify({
-    data: value.data.slice(0, 3),
-    headers: value.headers,
-    metadata: null
-  }, null, 2) + `;
+  <p>
+    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
+  </p>
 
-  let datatype = ` + JSON.stringify(datatype) + `;
+  <p class="read-the-docs">
+    Click on the Vite and Svelte logos to learn more
+  </p>
+</main>
 
-  function handleChange(e: any) {
-    console.log("Data changed:", e.detail);
+<style>
+  .logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
   }
-
-  function handleSelect(e: any) {
-    console.log("Cell selected:", e.detail);
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
   }
-
-  function handleInput(e: any) {
-    console.log("Input event:", e.detail);
+  .logo.svelte:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
   }
-</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"
+  .read-the-docs {
+    color: #888;
   }
-}`}
-                  />
-                </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>
+</style>

src/app.css

@@ -1,696 +1,79 @@
-@import "tailwindcss";
-
-/* Base styles */
-body {
-  margin: 0;
-  padding: 0;
-  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.6;
-  color: #2e3438;
-  background-color: #f6f9fc;
-}
-
-/* Storybook-specific styles */
-.storybook-header {
-  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-}
-
-/* Override link styles for Storybook design */
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-/* Button reset for Storybook style */
-button {
-  font-family: inherit;
-  border: none;
-  cursor: pointer;
-  background: none;
-}
-
-/* Input styles for controls */
-input, select {
-  font-family: inherit;
-}
-
-/* Storybook accent colors */
 :root {
-  --storybook-primary: #F87701;
-  --storybook-secondary: #ff4785;
-  --storybook-green: #37d67a;
-  --storybook-orange: #fc521f;
-  --storybook-yellow: #ffae00;
-  --storybook-red: #fa5a5a;
-  --storybook-gray-1: #f6f9fc;
-  --storybook-gray-2: #e0e0e0;
-  --storybook-gray-3: #999;
-  --storybook-gray-4: #666;
-  --storybook-gray-5: #333;
-  --storybook-gray-6: #2b2b2b;
-  --storybook-gray-7: #1a1a1a;
-}
-
-/* Gradio Dataframe CSS Variables */
-:root {
-  --gr-df-table-bg-even: #ffffff;
-  --gr-df-table-bg-odd: #f9fafb;
-  --gr-df-copied-cell-color: #dbeafe;
-  --gr-df-table-border: #e5e7eb;
-  --gr-df-table-text: #374151;
-  --gr-df-accent: #3b82f6;
-  --gr-df-accent-soft: #dbeafe;
-  --gr-df-font-size: 14px;
-  --gr-df-font-mono: ui-monospace, SFMono-Regular, monospace;
-  --gr-df-font-sans: system-ui, -apple-system, sans-serif;
-  --gr-df-table-radius: 8px;
-}
-
-
-/* Custom theme examples */
-.purple-theme {
-  --gr-df-accent: #7c3aed;
-  --gr-df-accent-soft: #ede9fe;
-  --gr-df-copied-cell-color: #ede9fe;
-}
-
-.green-theme {
-  --gr-df-accent: #059669;
-  --gr-df-accent-soft: #d1fae5;
-  --gr-df-copied-cell-color: #d1fae5;
-}
-
-.orange-theme {
-  --gr-df-accent: #ea580c;
-  --gr-df-accent-soft: #fed7aa;
-  --gr-df-copied-cell-color: #fed7aa;
-}
-
-/* Dark Mode Theme */
-.dark {
-  /* Override root CSS variables for dark mode */
-  --gr-df-table-bg-even: #1f2937;
-  --gr-df-table-bg-odd: #111827;
-  --gr-df-copied-cell-color: #374151;
-  --gr-df-table-border: #374151;
-  --gr-df-table-text: #f9fafb;
-  --gr-df-accent: #60a5fa;
-  --gr-df-accent-soft: #1e3a8a;
-  
-  /* Dark mode for body and base elements */
-  background-color: #0f172a;
-  color: #f1f5f9;
-}
-
-/* Dark mode specific overrides for the interface */
-.dark .bg-white {
-  background-color: #1e293b;
-}
-
-.dark .bg-\[#f6f9fc\] {
-  background-color: #0f172a;
-}
-
-.dark .bg-\[#f8fafc\] {
-  background-color: #1e293b;
-}
-
-/* Dark mode for dataframe container background */
-.dark div[class*="bg-[#f8fafc]"] {
-  background-color: #1e293b;
-}
-
-.dark .rounded-lg.bg-\[#f8fafc\] {
-  background-color: #1e293b;
-}
-
-.dark .rounded-xl.bg-\[#f8fafc\] {
-  background-color: #1e293b;
-}
-
-/* Comprehensive dark mode overrides for all light backgrounds */
-.dark div,
-.dark section,
-.dark main,
-.dark header,
-.dark footer,
-.dark aside,
-.dark nav {
-  /* Override common light background colors */
-}
-
-.dark [class*="bg-white"]:not(button):not(.btn):not([role="button"]) {
-  background-color: #1e293b;
-}
-
-.dark [class*="bg-[#f6f9fc]"]:not(button):not(.btn):not([role="button"]) {
-  background-color: #0f172a;
-}
-
-.dark [class*="bg-[#f8fafc]"]:not(button):not(.btn):not([role="button"]) {
-  background-color: #1e293b;
-}
-
-.dark [class*="bg-[#f9fafb]"]:not(button):not(.btn):not([role="button"]) {
-  background-color: #1e293b;
-}
-
-.dark [class*="bg-[#fafafa]"]:not(button):not(.btn):not([role="button"]) {
-  background-color: #1e293b;
-}
-
-.dark [class*="bg-gray-50"]:not(button):not(.btn):not([role="button"]) {
-  background-color: #1e293b;
-}
-
-.dark [class*="bg-gray-100"]:not(button):not(.btn):not([role="button"]) {
-  background-color: #334155;
-}
-
-/* Dark mode for all text colors */
-.dark [class*="text-[#2e3438]"] {
-  color: #f1f5f9;
-}
-
-.dark [class*="text-[#374151]"] {
-  color: #e2e8f0 ;
-}
-
-.dark [class*="text-[#64748b]"] {
-  color: #94a3b8 ;
-}
-
-.dark [class*="text-[#9ca3af]"] {
-  color: #6b7280 ;
-}
-
-.dark [class*="text-[#6b7280]"] {
-  color: #9ca3af ;
-}
-
-/* Dark mode for all border colors */
-.dark [class*="border-[#e0e0e0]"] {
-  border-color: #475569;
-}
-
-.dark [class*="border-[#e5e7eb]"] {
-  border-color: #475569;
-}
-
-.dark [class*="border-[#d1d5db]"] {
-  border-color: #475569;
-}
-
-.dark [class*="border-[#e2e8f0]"] {
-  border-color: #475569;
-}
-
-.dark .border-\[#d1d5db\] {
-  border-color: #475569;
-}
-
-.dark .border-\[#e0e0e0\] {
-  border-color: #475569;
-}
-
-.dark .border-\[#e2e8f0\] {
-  border-color: #475569;
-}
-
-.dark .text-\[#2e3438\] {
-  color: #f1f5f9;
-}
-
-.dark .text-\[#73828c\] {
-  color: #cbd5e1;
-}
-
-.dark .text-\[#64748b\] {
-  color: #94a3b8 ;
-}
-
-.dark .text-\[#374151\] {
-  color: #e2e8f0 ;
-}
-
-.dark .text-\[#1e293b\] {
-  color: #f8fafc ;
-}
-
-.dark .text-\[#9ca3af\] {
-  color: #6b7280 ;
-}
-
-/* Dark mode hover states */
-.dark .hover\:bg-\[#f6f9fc\]:hover {
-  background-color: #334155;
-}
-
-.dark .hover\:text-\[#2e3438\]:hover {
-  color: #f1f5f9;
-}
-
-.dark .hover\:border-\[#cbd5e1\]:hover {
-  border-color: #64748b ;
-}
-
-/* Dark mode focus states */
-.dark .focus\:ring-\[#F87701\]:focus {
-  --tw-ring-color: #f97316 ;
-}
-
-.dark .focus\:border-\[#F87701\]:focus {
-  border-color: #f97316 ;
-}
-
-/* Dark mode for example cards */
-.dark .bg-\[#f1f5f9\] {
-  background-color: #475569;
-}
-
-.dark .bg-\[#fef7f0\] {
-  background-color: #1e3a8a ;
-}
-
-.dark .border-\[#F87701\] {
-  border-color: #60a5fa ;
-}
-
-/* Dark mode for selected example card backgrounds - more specific selectors */
-.dark .rounded-xl.border-2.bg-\[#fef7f0\] {
-  background-color: #1e3a8a ;
-  border-color: #60a5fa ;
-}
-
-.dark .rounded-xl.border-2.border-\[#F87701\] {
-  background-color: #1e3a8a ;
-  border-color: #60a5fa ;
-}
-
-/* Dark mode for example card selected state colors */
-.dark .bg-\[#F87701\] {
-  background-color: #60a5fa ;
-}
-
-/* Force dark mode on selected example cards using attribute selectors */
-.dark div[class*="bg-[#fef7f0]"] {
-  background-color: #1e3a8a ;
-}
-
-.dark div[class*="border-[#F87701]"] {
-  border-color: #60a5fa ;
-}
-
-.dark div[class*="bg-[#F87701]"] {
-  background-color: #60a5fa ;
-}
-
-/* Maximum specificity override for selected example cards in dark mode */
-html.dark body div.space-y-2 button div.rounded-xl {
-  background-color: #1e3a8a ;
-  border-color: #60a5fa ;
-}
-
-/* Target any div with the specific orange background class in dark mode */
-html.dark [class~="bg-[#fef7f0]"] {
-  background-color: #1e3a8a ;
-}
-
-html.dark [class~="border-[#F87701]"] {
-  border-color: #60a5fa ;
-}
-
-/* Nuclear option - override any element with these exact classes */
-.dark * {
-  --selected-bg: #1e3a8a;
-  --selected-border: #60a5fa;
-}
-
-.dark .bg-\[#fef7f0\],
-.dark [style*="background"],
-.dark .rounded-xl[class*="bg-[#fef7f0]"] {
-  background-color: var(--selected-bg) ;
-  background: var(--selected-bg) ;
-}
-
-.dark .border-\[#F87701\],
-.dark .rounded-xl[class*="border-[#F87701]"] {
-  border-color: var(--selected-border) ;
-}
-
-/* Dark mode for select dropdown */
-.dark select {
-  background-color: #1e293b;
-  color: #f1f5f9;
-  border-color: #475569;
-}
-
-.dark select option {
-  background-color: #1e293b;
-  color: #f1f5f9;
-}
-
-/* Dark mode for gradients */
-.dark .bg-gradient-to-r {
-  background: linear-gradient(to right, #1e293b, #0f172a) ;
-}
-
-/* Dark mode for shadows */
-.dark .shadow-lg {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) ;
-}
-
-.dark .hover\:shadow-sm:hover {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) ;
-}
-
-/* Dark mode for code blocks and syntax highlighting */
-.dark code {
-  background-color: #374151 ;
-  color: #f9fafb ;
-}
-
-.dark pre {
-  background-color: #1f2937 ;
-  border-color: #475569;
-}
-
-/* Dark mode for tables */
-.dark table {
-  background-color: #1e293b;
-}
-
-.dark th, .dark td {
-  border-color: #475569;
-  color: #f1f5f9;
-}
-
-.dark thead {
-  background-color: #374151 ;
-}
-
-.dark tbody tr:hover {
-  background-color: #334155;
-}
-
-/* Dark mode for mobile overlay */
-.dark .bg-black {
-  background-color: rgba(0, 0, 0, 0.8) ;
-}
-
-/* Additional dark mode text color fixes */
-.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
-  color: #f1f5f9;
-}
-
-.dark p {
-  color: #cbd5e1;
-}
-
-.dark label {
-  color: #f1f5f9;
-}
-
-/* Dark mode for specific text color classes that might be missed */
-.dark .text-gray-600 {
-  color: #94a3b8 ;
-}
-
-.dark .text-gray-700 {
-  color: #cbd5e1;
-}
-
-.dark .text-gray-800 {
-  color: #e2e8f0 ;
-}
-
-.dark .text-gray-900 {
-  color: #f1f5f9;
-}
-
-/* Dark mode for any remaining light backgrounds */
-.dark .bg-gray-50 {
-  background-color: #1e293b;
-}
-
-.dark .bg-gray-100 {
-  background-color: #334155;
-}
-
-.dark .bg-gray-200 {
-  background-color: #475569;
-}
-
-/* Dark mode for input placeholders */
-.dark input::placeholder {
-  color: #94a3b8 ;
-}
-
-.dark textarea::placeholder {
-  color: #94a3b8 ;
-}
-
-/* Dark mode for any white text that should be dark in light mode but light in dark mode */
-.dark .text-white {
-  color: #f1f5f9;
-}
-
-/* Ensure dataframe component inherits dark theme properly */
-.dark [data-testid="dataframe"] {
-  background-color: #1e293b;
-  color: #f1f5f9;
-}
-
-/* Dark mode for any remaining border colors */
-.dark .border-gray-200 {
-  border-color: #475569;
-}
-
-.dark .border-gray-300 {
-  border-color: #64748b ;
-}
-
-/* Dark mode for button text that might not be covered */
-.dark button {
-  color: inherit ;
-}
-
-/* Dark mode for links */
-.dark a {
-  color: #60a5fa ;
-}
-
-.dark a:hover {
-  color: #93c5fd ;
-}
-
-/* Force dark mode on all text elements that might be using default colors */
-.dark * {
-  border-color: #475569;
-}
-
-/* Specific overrides for components that might not inherit properly */
-.dark .text-current {
-  color: #f1f5f9;
-}
-
-/* Dark mode for any remaining light text colors */
-.dark .text-black {
-  color: #f1f5f9;
-}
-
-/* Dark mode for the dataframe component wrapper */
-.dark div[class*="dataframe"] {
-  background-color: #1e293b;
-  color: #f1f5f9;
-}
-
-/* Dark mode for any input elements */
-.dark input {
-  background-color: #1e293b;
-  color: #f1f5f9;
-  border-color: #475569;
-}
-
-/* Dark mode for checkboxes and form controls */
-.dark input[type="checkbox"] {
-  background-color: #374151 ;
-  border-color: #6b7280 ;
-}
-
-.dark input[type="checkbox"]:checked {
-  background-color: #60a5fa ;
-  border-color: #60a5fa ;
-}
-
-/* Page titles */
-.page-title {
-  @apply text-lg md:text-xl lg:text-2xl font-bold text-[#2e3438] mb-3 md:mb-4 tracking-tight;
-}
-
-/* Section titles */
-.section-title {
-  @apply text-lg font-bold text-[#2e3438] mb-4;
-}
-
-/* Subsection titles */
-.subsection-title {
-  @apply text-base font-bold text-[#2e3438] mb-2;
-}
-
-/* Content cards */
-.content-card {
-  @apply bg-white rounded-xl md:rounded-2xl shadow-lg border border-[#e0e0e0] p-4 sm:p-6 md:p-6 lg:p-8 xl:p-12;
-}
-
-/* Navigation buttons */
-.nav-button {
-  @apply flex items-center py-1 px-2 text-xs mb-1 font-medium transition-all duration-200 rounded-sm;
-}
-
-.nav-button-active {
-  @apply border-[#F87701] bg-[#fef7f0];
-}
-
-.nav-button-inactive {
-  @apply text-[#73828c] hover:text-[#2e3438] hover:bg-[#f6f9fc];
-}
-
-.example-card {
-  @apply flex items-center py-1 px-2 text-xs font-medium transition-all duration-200 rounded-sm;
-}
-
-/* Example card containers */
-.example-card-active {
-  @apply border-[#F87701] bg-[#fef7f0];
-}
-
-.example-card-inactive {
-  @apply border-[#e2e8f0] bg-white;
-}
-
-/* Example card icons */
-.example-icon {
-  @apply w-6 h-6 rounded-lg flex items-center justify-center mr-2 transition-colors duration-200;
-}
-
-.example-icon-active {
-  @apply bg-[#F87701] text-white;
-}
-
-.example-icon-inactive {
-  @apply bg-[#f1f5f9] text-[#64748b];
-}
-
-/* Text styles */
-.description-text {
-  @apply text-sm md:text-base lg:text-lg text-[#73828c] leading-relaxed font-medium;
-}
-
-.feature-text {
-  @apply text-sm text-[#64748b] leading-relaxed font-medium;
-}
-
-/* Event sections */
-.event-section {
-  @apply border border-[#e2e8f0] rounded-xl p-8 bg-gradient-to-r from-[#f8fafc] to-white;
-}
-
-/* Main layout containers */
-.main-container {
-  @apply max-w-full md:max-w-3xl lg:max-w-5xl xl:max-w-6xl mx-auto ;
-}
-
-.page-wrapper {
-  @apply flex-1 bg-[#f6f9fc] p-4 sm:p-6 md:p-6 lg:p-8 xl:p-12 overflow-auto;
-}
-
-/* Dark mode overrides for new classes */
-.dark .page-title,
-.dark .section-title,
-.dark .subsection-title {
-  color: #f1f5f9;
-}
-
-.dark .content-card {
-  background-color: #1e293b;
-  border-color: #475569;
-}
-
-.dark .nav-button-active {
-  background-color: #1e3a8a;
-}
-
-.dark .nav-button-inactive {
-  color: #cbd5e1;
-}
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
 
-.dark .nav-button-inactive:hover {
-  color: #f1f5f9;
-  background-color: #334155;
-}
-
-.dark .example-card-active {
-  background-color: #1e3a8a;
-}
-
-.dark .example-card-inactive {
-  background-color: #1e293b ;
-}
-
-.dark .example-card-inactive:hover {
-  background-color: #334155;
-}
-
-.dark .example-icon-active {
-  background-color: #60a5fa;
-}
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
 
-.dark .description-text,
-.dark .feature-text {
-  color: #cbd5e1;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.dark .event-section {
-  background: linear-gradient(to right, #1e293b, #0f172a);
-  border-color: #475569;
-}
-
-div[role*="slider"] {
-  border-top: 1px solid #d1d5db;
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
 }
-/* Resizable controls panel styling */
-.drag-handle {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
+a:hover {
+  color: #535bf2;
 }
 
-.drag-handle:hover {
-  background-color: #f9fafb;
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
 }
 
-.drag-handle.dragging {
-  background-color: #f3f4f6;
-  cursor: ns-resize;
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
 }
 
-/* Dark mode for drag handle */
-.dark .drag-handle:hover {
-  background-color: #374151;
+.card {
+  padding: 2em;
 }
 
-.dark .drag-handle.dragging {
-  background-color: #4b5563;
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
 }
 
-/* Prevent text selection during drag */
-body.dragging {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  cursor: ns-resize;
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
 }

src/lib/ConfigPanel.svelte

@@ -1,342 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import { sampleDatasets } from "./sampleData";
-
-  const dispatch = createEventDispatcher();
-
-  export let selectedDataset = "basic";
-  export let currentTheme = "default";
-  export let editable = true;
-  export let show_row_numbers = true;
-  export let show_search: "none" | "search" | "filter" = "search";
-  export let show_copy_button = true;
-  export let show_fullscreen_button = true;
-  export let show_label = true;
-  export let label = "Sample Data";
-  export let max_height = 500;
-  export let line_breaks = true;
-  export let wrap = false;
-  export let max_chars: number | undefined = undefined;
-
-  // Controls panel state
-  let activeControlsTab = "properties"; // "properties" or "actions"
-
-  function switchDataset(dataset: string) {
-    selectedDataset = dataset;
-    dispatch('datasetChange', { dataset });
-  }
-
-  function applyTheme(theme: string) {
-    currentTheme = theme;
-    dispatch('themeChange', { theme });
-  }
-
-  function addCustomColumn() {
-    dispatch('addColumn');
-  }
-
-  function addCustomRow() {
-    dispatch('addRow');
-  }
-</script>
-
-<!-- Storybook Controls Panel -->
-<div class="h-full flex flex-col w-full">
-  <!-- Controls Tab Header -->
-  <div class="p-4 border-b-2 border-[#e0e0e0] bg-[#f8fafc]">
-    <div class="flex items-center justify-between">
-      <h2 class="text-xs font-bold text-[#2e3438] uppercase tracking-wider">Controls</h2>
-      <div class="flex space-x-4">
-        <button 
-          on:click={() => activeControlsTab = "properties"}
-          class="flex items-center py-2.5 !px-4 text-sm font-medium transition-all duration-200 rounded-lg 
-                 {activeControlsTab === 'properties' 
-                   ? 'text-[#F87701] bg-white border border-[#F87701]' 
-                   : 'text-[#64748b] hover:text-[#F87701] hover:bg-white/50 border border-transparent'}"
-        >
-          <span class="mr-2">⚙️</span>
-          Properties
-        </button>
-        <button 
-          on:click={() => activeControlsTab = "actions"}
-          class="flex items-center py-2.5 !px-4 text-sm font-medium transition-all duration-200 rounded-lg
-                 {activeControlsTab === 'actions' 
-                   ? 'text-[#F87701] bg-white border border-[#F87701]' 
-                   : 'text-[#64748b] hover:text-[#F87701] hover:bg-white/50 border border-transparent'}"
-        >
-          <span class="mr-2">📝</span>
-          Actions
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Controls Content -->
-  <div class="flex-1 overflow-x-scroll overflow-y-scroll p-4 min-h-0">
-    
-    {#if activeControlsTab === "properties"}
-      <!-- Properties Tab Content -->
-      <div class="flex space-x-8 min-w-max">
-        
-        <!-- Boolean Controls -->
-        <div class="min-w-[300px]">
-          <h4 class="text-xs font-bold text-[#2e3438] uppercase tracking-wider mb-4">Display</h4>
-      
-      <div class="space-y-4">
-        <label class="flex items-center justify-between py-3 px-3 hover:bg-[#f6f9fc] rounded-lg transition-all duration-200">
-          <span class="text-[14px] text-[#2e3438]">editable</span>
-          <input 
-            type="checkbox" 
-            bind:checked={editable} 
-            class="w-5 h-5 rounded border-[#e0e0e0] text-[#F87701] focus:ring-[#F87701] focus:ring-2 bg-white"
-          >
-        </label>
-
-        <label class="flex items-center justify-between py-3 px-3 hover:bg-[#f6f9fc] rounded-lg transition-all duration-200">
-          <span class="text-[14px] text-[#2e3438]">show_row_numbers</span>
-          <input 
-            type="checkbox" 
-            bind:checked={show_row_numbers} 
-            class="w-5 h-5 rounded border-[#e0e0e0] text-[#F87701] focus:ring-[#F87701] focus:ring-2 bg-white"
-          >
-        </label>
-
-        <label class="flex items-center justify-between py-3 px-3 hover:bg-[#f6f9fc] rounded-lg transition-all duration-200">
-          <span class="text-[14px] text-[#2e3438]">show_copy_button</span>
-          <input 
-            type="checkbox" 
-            bind:checked={show_copy_button} 
-            class="w-5 h-5 rounded border-[#e0e0e0] text-[#F87701] focus:ring-[#F87701] focus:ring-2 bg-white"
-          >
-        </label>
-
-        <label class="flex items-center justify-between py-3 px-3 hover:bg-[#f6f9fc] rounded-lg transition-all duration-200">
-          <span class="text-[14px] text-[#2e3438]">show_fullscreen_button</span>
-          <input 
-            type="checkbox" 
-            bind:checked={show_fullscreen_button} 
-            class="w-5 h-5 rounded border-[#e0e0e0] text-[#F87701] focus:ring-[#F87701] focus:ring-2 bg-white"
-          >
-        </label>
-
-        <label class="flex items-center justify-between py-3 px-3 hover:bg-[#f6f9fc] rounded-lg transition-all duration-200">
-          <span class="text-[14px] text-[#2e3438]">show_label</span>
-          <input 
-            type="checkbox" 
-            bind:checked={show_label} 
-            class="w-5 h-5 rounded border-[#e0e0e0] text-[#F87701] focus:ring-[#F87701] focus:ring-2 bg-white"
-          >
-        </label>
-
-        <label class="flex items-center justify-between py-3 px-3 hover:bg-[#f6f9fc] rounded-lg transition-all duration-200">
-          <span class="text-[14px] text-[#2e3438]">line_breaks</span>
-          <input 
-            type="checkbox" 
-            bind:checked={line_breaks} 
-            class="w-5 h-5 rounded border-[#e0e0e0] text-[#F87701] focus:ring-[#F87701] focus:ring-2 bg-white"
-          >
-        </label>
-
-        <label class="flex items-center justify-between py-3 px-3 hover:bg-[#f6f9fc] rounded-lg transition-all duration-200">
-          <span class="text-[14px] text-[#2e3438]">wrap</span>
-          <input 
-            type="checkbox" 
-            bind:checked={wrap} 
-            class="w-5 h-5 rounded border-[#e0e0e0] text-[#F87701] focus:ring-[#F87701] focus:ring-2 bg-white"
-          >
-        </label>
-          </div>
-        </div>
-
-        <!-- Options Controls -->
-        <div class="min-w-[250px]">
-          <h4 class="text-xs font-bold text-[#2e3438] uppercase tracking-wider mb-4">Options</h4>
-      
-      <div class="space-y-2">
-        <label for="show-search" class="block text-sm font-medium text-[#374151] mb-2">Search Type</label>
-        <div class="relative">
-          <select 
-            id="show-search"
-            bind:value={show_search}
-            class="w-full px-4 py-3 !rounded-sm text-sm border-2 border-[#e5e7eb] rounded-lg bg-[#f9fafb] text-[#374151] focus:ring-2 focus:ring-[#F87701] focus:border-[#F87701] focus:bg-white transition-all duration-200 appearance-none cursor-pointer shadow-sm"
-          >
-            <option value="none">None</option>
-            <option value="search">Search</option>
-            <option value="filter">Filter</option>
-          </select>
-          <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-            <svg class="w-4 h-4 text-[#9ca3af]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-            </svg>
-          </div>
-        </div>
-        <p class="text-xs text-[#6b7280] mt-1">Configure search functionality</p>
-          </div>
-        </div>
-
-        <!-- Number Controls -->
-        <div class="min-w-[250px]">
-          <h4 class="text-xs font-bold text-[#2e3438] uppercase tracking-wider mb-4">Numbers</h4>
-      
-      <div class="space-y-6">
-        <div class="space-y-2">
-          <label for="max-height" class="block text-sm font-medium text-[#374151]">Maximum Height</label>
-          <div class="relative">
-            <input 
-              id="max-height"
-              type="number" 
-              bind:value={max_height}
-              min="200"
-              max="1000"
-              step="50"
-              class="w-full px-4 py-3 text-sm !rounded-sm border-2 border-[#e5e7eb] rounded-lg bg-[#f9fafb] text-[#374151] focus:ring-2 focus:ring-[#F87701] focus:border-[#F87701] focus:bg-white transition-all duration-200 shadow-sm"
-            >
-            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-              <span class="text-xs text-[#9ca3af] font-medium">px</span>
-            </div>
-          </div>
-          <p class="text-xs text-[#6b7280]">Height constraint for the table (200-1000px)</p>
-        </div>
-
-        <div class="space-y-2">
-          <label for="max-chars" class="block text-sm font-medium text-[#374151]">Character Limit</label>
-          <input 
-            id="max-chars"
-            type="number" 
-            bind:value={max_chars}
-            min="10"
-            max="1000"
-            step="10"
-            placeholder="No limit"
-            class="w-full px-4 py-3 text-sm !rounded-sm border-2 border-[#e5e7eb] rounded-lg bg-[#f9fafb] text-[#374151] placeholder-[#9ca3af] focus:ring-2 focus:ring-[#F87701] focus:border-[#F87701] focus:bg-white transition-all duration-200 shadow-sm"
-          >
-          <p class="text-xs text-[#6b7280]">Maximum characters per cell (leave empty for no limit)</p>
-        </div>
-          </div>
-        </div>
-
-        <!-- Text Controls -->
-        <div class="min-w-[250px]">
-          <h4 class="text-xs font-bold text-[#2e3438] uppercase tracking-wider mb-4">Text</h4>
-      
-      <div class="space-y-2">
-        <label for="label-input" class="block text-sm font-medium text-[#374151]">Table Label</label>
-        <div class="relative">
-          <input 
-            id="label-input"
-            type="text" 
-            bind:value={label}
-            placeholder="Enter table label..."
-            class="w-full px-4 py-3 text-sm !rounded-sm border-2 border-[#e5e7eb] rounded-lg bg-[#f9fafb] text-[#374151] placeholder-[#9ca3af] focus:ring-2 focus:ring-[#F87701] focus:border-[#F87701] focus:bg-white transition-all duration-200 shadow-sm"
-          >
-          <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-            <svg class="w-4 h-4 text-[#9ca3af]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a.997.997 0 01-1.414 0l-7-7A1.997 1.997 0 013 12V7a4 4 0 014-4z"></path>
-            </svg>
-          </div>
-        </div>
-          <p class="text-xs text-[#6b7280]">Display label shown above the dataframe</p>
-        </div>
-      </div>
-      </div>
-
-    {:else if activeControlsTab === "actions"}
-      <!-- Actions Tab Content -->
-      <div class="flex space-x-8 min-w-max">
-        
-        <!-- Data Manipulation Section -->
-        <div class="min-w-[300px]">
-        <div>
-          <h4 class="text-xs font-bold text-[#2e3438] uppercase tracking-wider mb-3">Data Manipulation</h4>
-          <p class="text-sm text-[#64748b] mb-5 leading-relaxed">Add new rows and columns to the dataframe</p>
-          
-          <div class="grid grid-cols-1 gap-3">
-            <button 
-              on:click={addCustomColumn}
-              class="flex items-center justify-center px-6 py-4 text-sm font-semibold bg-gradient-to-r from-[#F87701] to-[#0f8bda] text-white rounded-xl hover:from-[#0f8bda] hover:to-[#0569b5] focus:ring-2 focus:ring-[#F87701] focus:ring-offset-2 transition-all duration-200"
-            >
-              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
-              </svg>
-              Add Column
-            </button>
-
-            <button 
-              on:click={addCustomRow}
-              class="flex items-center justify-center px-6 py-4 text-sm font-semibold bg-gradient-to-r from-[#10b981] to-[#059669] text-white rounded-xl hover:from-[#059669] hover:to-[#047857] focus:ring-2 focus:ring-[#10b981] focus:ring-offset-2 transition-all duration-200"
-            >
-              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-              </svg>
-              Add Row
-            </button>
-          </div>
-        </div>
-
-        <div class="border-t border-[#e2e8f0] pt-6">
-          <h4 class="text-xs font-bold text-[#2e3438] uppercase tracking-wider mb-3">Export Options</h4>
-          <p class="text-sm text-[#64748b] mb-5 leading-relaxed">Export your data in different formats</p>
-          
-          <div class="grid grid-cols-1 gap-3">
-            <button 
-              class="flex items-center justify-center px-4 py-3 text-sm font-medium bg-[#f59e0b] text-white rounded-lg hover:bg-[#d97706] focus:ring-2 focus:ring-[#f59e0b] focus:ring-offset-2 transition-all duration-200 shadow-sm"
-            >
-              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-              </svg>
-              Export as CSV
-            </button>
-
-            <button 
-              class="flex items-center justify-center px-4 py-3 text-sm font-medium bg-[#8b5cf6] text-white rounded-lg hover:bg-[#7c3aed] focus:ring-2 focus:ring-[#8b5cf6] focus:ring-offset-2 transition-all duration-200 shadow-sm"
-            >
-              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
-              </svg>
-              Copy to Clipboard
-            </button>
-          </div>
-          </div>
-        </div>
-
-        <!-- Export & Reset Actions -->
-        <div class="min-w-[300px]">
-          <h4 class="text-xs font-bold text-[#2e3438] uppercase tracking-wider mb-3">Export Options</h4>
-          <p class="text-sm text-[#64748b] mb-5 leading-relaxed">Export your data in different formats</p>
-          
-          <div class="grid grid-cols-1 gap-3 mb-6">
-            <button 
-              class="flex items-center justify-center px-5 py-3 text-sm font-semibold bg-gradient-to-r from-[#f59e0b] to-[#d97706] text-white rounded-xl hover:from-[#d97706] hover:to-[#b45309] focus:ring-2 focus:ring-[#f59e0b] focus:ring-offset-2 transition-all duration-200"
-            >
-              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-              </svg>
-              Export CSV
-            </button>
-            
-            <button 
-              class="flex items-center justify-center px-5 py-3 text-sm font-semibold bg-gradient-to-r from-[#6366f1] to-[#4f46e5] text-white rounded-xl hover:from-[#4f46e5] hover:to-[#4338ca] focus:ring-2 focus:ring-[#6366f1] focus:ring-offset-2 transition-all duration-200"
-            >
-              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
-              </svg>
-              Copy to Clipboard
-            </button>
-          </div>
-
-          <div class="border-t border-[#e2e8f0] pt-4">
-            <h4 class="text-xs font-bold text-[#2e3438] uppercase tracking-wider mb-3">Reset Actions</h4>
-            <button 
-              class="w-full flex items-center justify-center px-5 py-3 text-sm font-semibold bg-gradient-to-r from-[#ef4444] to-[#dc2626] text-white rounded-xl hover:from-[#dc2626] hover:to-[#b91c1c] focus:ring-2 focus:ring-[#ef4444] focus:ring-offset-2 transition-all duration-200"
-            >
-              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-              </svg>
-              Reset Data
-            </button>
-          </div>
-        </div>
-      </div>
-    {/if}
-  </div>
-</div>

src/lib/SyntaxHighlighter.svelte

@@ -1,115 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import Prism from 'prismjs';
-  
-  // Import the languages we need
-  import 'prismjs/components/prism-typescript';
-  import 'prismjs/components/prism-javascript';
-  import 'prismjs/components/prism-json';
-  
-  // Import the theme CSS
-  import 'prismjs/themes/prism-tomorrow.css';
-
-  export let code: string;
-  export let language: string = 'typescript';
-  export let class_name: string = '';
-
-  let highlightedCode = '';
-
-  onMount(() => {
-    try {
-      highlightedCode = Prism.highlight(code, Prism.languages[language] || Prism.languages.typescript, language);
-    } catch (error) {
-      console.warn('Syntax highlighting failed:', error);
-      highlightedCode = code;
-    }
-  });
-
-  $: if (code) {
-    try {
-      highlightedCode = Prism.highlight(code, Prism.languages[language] || Prism.languages.typescript, language);
-    } catch (error) {
-      console.warn('Syntax highlighting failed:', error);
-      highlightedCode = code;
-    }
-  }
-</script>
-
-<div class="syntax-highlighter {class_name}">
-  <pre class="language-{language}"><code class="language-{language}">{@html highlightedCode}</code></pre>
-</div>
-
-<style>
-  .syntax-highlighter {
-    border-radius: 0.75rem;
-    overflow-x: auto;
-  }
-  
-  .syntax-highlighter pre {
-    margin: 0;
-    padding: 1.5rem;
-    font-size: 0.875rem;
-    line-height: 1.625;
-    background-color: #1e293b;
-    border: 1px solid #334155;
-    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  }
-  
-  .syntax-highlighter code {
-    color: #e2e8f0;
-    font-family: inherit;
-  }
-
-  /* Custom syntax highlighting colors */
-  :global(.syntax-highlighter .token.comment) {
-    color: #64748b;
-  }
-  
-  :global(.syntax-highlighter .token.string) {
-    color: #10b981;
-  }
-  
-  :global(.syntax-highlighter .token.number) {
-    color: #f59e0b;
-  }
-  
-  :global(.syntax-highlighter .token.keyword) {
-    color: #8b5cf6;
-  }
-  
-  :global(.syntax-highlighter .token.function) {
-    color: #06b6d4;
-  }
-  
-  :global(.syntax-highlighter .token.operator) {
-    color: #e2e8f0;
-  }
-  
-  :global(.syntax-highlighter .token.punctuation) {
-    color: #94a3b8;
-  }
-  
-  :global(.syntax-highlighter .token.property) {
-    color: #f472b6;
-  }
-  
-  :global(.syntax-highlighter .token.boolean) {
-    color: #f59e0b;
-  }
-  
-  :global(.syntax-highlighter .token.class-name) {
-    color: #06b6d4;
-  }
-  
-  :global(.syntax-highlighter .token.tag) {
-    color: #8b5cf6;
-  }
-  
-  :global(.syntax-highlighter .token.attr-name) {
-    color: #f472b6;
-  }
-  
-  :global(.syntax-highlighter .token.attr-value) {
-    color: #10b981;
-  }
-</style>

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/lib/sampleData.ts

@@ -1,253 +0,0 @@
-export const sampleDatasets = {
-  basic: {
-    data: [
-      ["Alice Johnson", 25, "true", "2023-01-15"],
-      ["Bob Smith", 30, "false", "2023-02-20"],
-      ["Charlie Brown", 35, "true", "2023-03-10"],
-      ["Diana Prince", 28, "false", "2023-04-05"],
-      ["Eve Wilson", 32, "true", "2023-05-12"],
-    ],
-    headers: ["Name", "Age", "Active", "Date"],
-    datatypes: ["str", "number", "bool", "date"],
-    config: {
-      editable: true,
-      show_row_numbers: true,
-      show_search: "search",
-      show_copy_button: true,
-      show_fullscreen_button: true,
-      max_height: 400,
-      label: "Employee Database",
-      show_label: true,
-      line_breaks: true,
-      wrap: false,
-    },
-  },
-  compact: {
-    data: [
-      ["AAPL", 150.25, 2.34, "📈"],
-      ["GOOGL", 2845.67, -15.23, "📉"],
-      ["MSFT", 412.89, 8.91, "📈"],
-      ["TSLA", 238.45, -4.12, "📉"],
-      ["AMZN", 3456.78, 12.34, "📈"],
-      ["META", 487.23, -2.87, "📉"],
-      ["NVDA", 875.23, 45.67, "📈"],
-      ["NFLX", 425.18, -8.92, "📉"],
-    ],
-    headers: ["Symbol", "Price", "Change", "Trend"],
-    datatypes: ["str", "number", "number", "str"],
-    config: {
-      editable: false,
-      show_row_numbers: false,
-      show_search: "none",
-      show_copy_button: false,
-      show_fullscreen_button: false,
-      max_height: 200,
-      label: "",
-      show_label: false,
-      line_breaks: false,
-      wrap: false,
-    },
-  },
-  filterable: {
-    data: [
-      ["John Doe", "Engineering", "Senior", 95000, "true"],
-      ["Jane Smith", "Marketing", "Manager", 75000, "true"],
-      ["Mike Johnson", "Sales", "Junior", 45000, "false"],
-      ["Sarah Wilson", "Engineering", "Lead", 120000, "true"],
-      ["David Brown", "HR", "Specialist", 55000, "true"],
-      ["Emily Davis", "Finance", "Analyst", 65000, "false"],
-      ["Tom Anderson", "Engineering", "Junior", 70000, "true"],
-      ["Lisa Garcia", "Marketing", "Senior", 85000, "false"],
-      ["James Miller", "Sales", "Manager", 90000, "true"],
-      ["Maria Rodriguez", "Finance", "Senior", 95000, "true"],
-    ],
-    headers: ["Name", "Department", "Level", "Salary", "Remote"],
-    datatypes: ["str", "str", "str", "number", "bool"],
-    config: {
-      editable: true,
-      show_row_numbers: true,
-      show_search: "filter",
-      show_copy_button: true,
-      show_fullscreen_button: true,
-      max_height: 350,
-      label: "Employee Directory with Filters",
-      show_label: true,
-      line_breaks: true,
-      wrap: false,
-    },
-  },
-  readonly: {
-    data: [
-      ["Q1 2023", "Revenue", 125000, "15% increase from Q4"],
-      ["Q1 2023", "Expenses", 85000, "5% decrease from Q4"],
-      ["Q1 2023", "Profit", 40000, "35% increase from Q4"],
-      ["Q2 2023", "Revenue", 145000, "16% increase from Q1"],
-      ["Q2 2023", "Expenses", 90000, "6% increase from Q1"],
-      ["Q2 2023", "Profit", 55000, "37% increase from Q1"],
-    ],
-    headers: ["Period", "Category", "Amount", "Change"],
-    datatypes: ["str", "str", "number", "str"],
-    config: {
-      editable: false,
-      show_row_numbers: true,
-      show_search: "search",
-      show_copy_button: true,
-      show_fullscreen_button: true,
-      max_height: 300,
-      label: "Financial Report (Read-Only)",
-      show_label: true,
-      line_breaks: true,
-      wrap: true,
-    },
-  },
-  wrapped: {
-    data: [
-      [
-        "Bug Fix",
-        "Fixed critical issue with user authentication that was causing login failures for users with special characters in their email addresses",
-        "High",
-        "Completed",
-      ],
-      [
-        "Feature",
-        "Implemented new dashboard analytics with real-time data visualization including charts, graphs, and interactive elements",
-        "Medium",
-        "In Progress",
-      ],
-      [
-        "Enhancement",
-        "Optimized database queries to improve application performance and reduce load times across all user-facing pages",
-        "Low",
-        "Testing",
-      ],
-      [
-        "Bug Fix",
-        "Resolved mobile responsiveness issues on the checkout page that were affecting user experience on smaller screens",
-        "High",
-        "Completed",
-      ],
-    ],
-    headers: ["Type", "Description", "Priority", "Status"],
-    datatypes: ["str", "str", "str", "str"],
-    config: {
-      editable: true,
-      show_row_numbers: true,
-      show_search: "search",
-      show_copy_button: true,
-      show_fullscreen_button: true,
-      max_height: 400,
-      label: "Task Management with Text Wrapping",
-      show_label: true,
-      line_breaks: true,
-      wrap: true,
-      max_chars: 100,
-    },
-  },
-  large: {
-    data: Array.from({ length: 50 }, (_, i) => [
-      `User ${i + 1}`,
-      `user${i + 1}@example.com`,
-      Math.floor(Math.random() * 50) + 18,
-      Math.random() > 0.5 ? "true" : "false",
-      new Date(
-        2023,
-        Math.floor(Math.random() * 12),
-        Math.floor(Math.random() * 28) + 1
-      )
-        .toISOString()
-        .split("T")[0],
-      (Math.random() * 100000).toFixed(2),
-      Math.floor(Math.random() * 5) + 1,
-    ]),
-    headers: [
-      "Name",
-      "Email",
-      "Age",
-      "Active",
-      "Join Date",
-      "Revenue",
-      "Rating",
-    ],
-    datatypes: ["str", "str", "number", "bool", "date", "number", "number"],
-    config: {
-      editable: true,
-      show_row_numbers: true,
-      show_search: "filter",
-      show_copy_button: true,
-      show_fullscreen_button: true,
-      max_height: 500,
-      label: "Large Dataset (50 rows)",
-      show_label: true,
-      line_breaks: true,
-      wrap: false,
-    },
-  },
-  mixed: {
-    data: [
-      [
-        "**Product A**",
-        99.99,
-        "Available",
-        "https://example.com",
-        "<span style='color: green'>✓ In Stock</span>",
-      ],
-      [
-        "*Product B*",
-        149.99,
-        "Out of Stock",
-        "https://example.com",
-        "<span style='color: red'>✗ Unavailable</span>",
-      ],
-      [
-        "Product C",
-        79.99,
-        "Limited",
-        "https://example.com",
-        "<span style='color: orange'>⚠ Few Left</span>",
-      ],
-      [
-        "~~Product D~~",
-        199.99,
-        "Discontinued",
-        "https://example.com",
-        "<span style='color: gray'>- Discontinued</span>",
-      ],
-    ],
-    headers: ["Product", "Price", "Status", "URL", "Availability"],
-    datatypes: ["markdown", "number", "str", "str", "html"],
-    config: {
-      editable: true,
-      show_row_numbers: false,
-      show_search: "search",
-      show_copy_button: true,
-      show_fullscreen_button: true,
-      max_height: 300,
-      label: "Rich Content (HTML & Markdown)",
-      show_label: true,
-      line_breaks: true,
-      wrap: false,
-    },
-  },
-  minimal: {
-    data: [
-      ["Task 1", "Complete"],
-      ["Task 2", "Pending"],
-      ["Task 3", "In Progress"],
-      ["Task 4", "Complete"],
-    ],
-    headers: ["Task", "Status"],
-    datatypes: ["str", "str"],
-    config: {
-      editable: true,
-      show_row_numbers: false,
-      show_search: "none",
-      show_copy_button: false,
-      show_fullscreen_button: false,
-      max_height: 200,
-      label: "",
-      show_label: false,
-      line_breaks: false,
-      wrap: false,
-    },
-  },
-};

tailwind.config.js

@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./src/**/*.{html,js,svelte,ts}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

vite.config.ts

@@ -1,21 +1,7 @@
-import { defineConfig } from "vite";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [svelte()],
-  base: "/",
-  publicDir: "public",
-  build: {
-    outDir: "dist",
-    assetsDir: "assets",
-    sourcemap: false,
-    minify: "esbuild",
-    copyPublicDir: true,
-    rollupOptions: {
-      output: {
-        manualChunks: undefined,
-      },
-    },
-  },
-});
+})