Initial commit: Dataframe demo with Vite + Svelte (no SvelteKit routing)

README.md

@@ -1,58 +1,36 @@
 ---
-title: Sandbox Dataframe
-emoji: 🔥
-colorFrom: pink
-colorTo: gray
+title: Dataframe Sandbox
+emoji: 📊
+colorFrom: red
+colorTo: blue
 sdk: static
 pinned: false
+license: apache-2.0
 app_build_command: npm run build
 app_file: dist/index.html
 ---
 
-# Svelte + TS + Vite
+# @gradio/dataframe Demo
 
-This template should help get you started developing with Svelte and TypeScript in Vite.
+An interactive demonstration of the `@gradio/dataframe` component showcasing its features including editing, searching, filtering, and various configuration options.
 
-## Recommended IDE Setup
+## Features
 
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+- 🎯 **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
 
-## Need an official Svelte framework?
+## Usage
 
-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.
+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.
 
-## Technical considerations
+## Built with
 
-**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);
-```
+- **Svelte 5** - Modern reactive framework
+- **Vite** - Fast build tool and dev server
+- **Tailwind CSS** - Utility-first CSS framework
+- **@gradio/dataframe** - Standalone dataframe component

index.html

@@ -4,7 +4,7 @@
     <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>Vite + Svelte + TS</title>
+    <title>@gradio/dataframe Demo</title>
   </head>
   <body>
     <div id="app"></div>

package.json

@@ -1,7 +1,8 @@
 {
-  "name": "svelte",
+  "name": "dataframe-sandbox",
+  "description": "Interactive demo and playground for the @gradio/dataframe standalone component",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,9 +13,19 @@
   "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

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

src/App.svelte

@@ -1,47 +1,919 @@
 <script lang="ts">
-  import svelteLogo from './assets/svelte.svg'
-  import viteLogo from '/vite.svg'
-  import Counter from './lib/Counter.svelte'
+  import Dataframe from "@gradio/dataframe";
+  import { onMount } from "svelte";
+  import ConfigPanel from "./lib/ConfigPanel.svelte";
+  import SyntaxHighlighter from "./lib/SyntaxHighlighter.svelte";
+  import { sampleDatasets } from "./lib/sampleData";
+
+  // Configuration state
+  let selectedDataset = "basic";
+  let value = {
+    data: sampleDatasets.basic.data,
+    headers: sampleDatasets.basic.headers,
+    metadata: null
+  };
+  
+  let datatype: string[] = sampleDatasets.basic.datatypes;
+  let editable = sampleDatasets.basic.config.editable;
+  let show_row_numbers = sampleDatasets.basic.config.show_row_numbers;
+  let show_search: "none" | "search" | "filter" = sampleDatasets.basic.config.show_search;
+  let show_copy_button = sampleDatasets.basic.config.show_copy_button;
+  let show_fullscreen_button = sampleDatasets.basic.config.show_fullscreen_button;
+  let show_label = sampleDatasets.basic.config.show_label;
+  let label = sampleDatasets.basic.config.label;
+  let max_height = sampleDatasets.basic.config.max_height;
+  let line_breaks = sampleDatasets.basic.config.line_breaks;
+  let wrap = sampleDatasets.basic.config.wrap;
+  let column_widths: string[] = [];
+  let max_chars: number | undefined = sampleDatasets.basic.config.max_chars;
+
+  // Theme state
+  let currentTheme = "default";
+  
+  // Active view state
+  let activeView = "canvas"; // "canvas", "docs", "events", "source"
+  
+  // Mobile responsive state
+  let showLeftPanel = false;
+  let showRightPanel = true; // Show controls by default
+  
+  // Resizable controls panel
+  let controlsHeight = 220; // Default height
+  let isDragging = false;
+  let dragStartY = 0;
+  let dragStartHeight = 0;
+  
+  // Event handlers
+  function handleChange(e: CustomEvent) {
+    console.log("Data changed:", e.detail);
+    value = e.detail;
+  }
+
+  function handleSelect(e: CustomEvent) {
+    console.log("Cell selected:", e.detail);
+  }
+
+  function handleInput(e: CustomEvent) {
+    console.log("Input event:", e.detail);
+  }
+
+  function handleDatasetChange(e: CustomEvent) {
+    const dataset = e.detail.dataset;
+    selectedDataset = dataset;
+    const data = sampleDatasets[dataset as keyof typeof sampleDatasets];
+    value = {
+      data: data.data,
+      headers: data.headers,
+      metadata: null
+    };
+    datatype = data.datatypes;
+  }
+
+  function handleThemeChange(e: CustomEvent) {
+    const theme = e.detail.theme;
+    currentTheme = theme;
+    const body = document.body;
+    body.className = body.className.replace(/\b(dark|purple-theme|green-theme|orange-theme)\b/g, '');
+    if (theme !== 'default') {
+      body.classList.add(theme);
+    }
+  }
+
+  function switchDataset(dataset: string) {
+    selectedDataset = dataset;
+    const data = sampleDatasets[dataset as keyof typeof sampleDatasets];
+    value = {
+      data: data.data,
+      headers: data.headers,
+      metadata: null
+    };
+    datatype = data.datatypes;
+    
+    // Apply configuration from the dataset
+    const config = data.config;
+    editable = config.editable;
+    show_row_numbers = config.show_row_numbers;
+    show_search = config.show_search;
+    show_copy_button = config.show_copy_button;
+    show_fullscreen_button = config.show_fullscreen_button;
+    show_label = config.show_label;
+    label = config.label;
+    max_height = config.max_height;
+    line_breaks = config.line_breaks;
+    wrap = config.wrap;
+    max_chars = config.max_chars;
+    
+    // Switch to canvas view to show the selected example
+    activeView = 'canvas';
+  }
+
+  function applyTheme(theme: string) {
+    currentTheme = theme;
+    const body = document.body;
+    body.className = body.className.replace(/\b(dark|purple-theme|green-theme|orange-theme)\b/g, '');
+    if (theme !== 'default') {
+      body.classList.add(theme);
+    }
+  }
+
+  function setActiveView(view: string) {
+    activeView = view;
+  }
+
+  function getExampleIcon(key: string): string {
+    const icons: Record<string, string> = {
+      basic: '📋',
+      compact: '📊',
+      filterable: '🔍',
+      readonly: '🔒',
+      wrapped: '📝',
+      large: '📈',
+      mixed: '🎨',
+      minimal: '⚡'
+    };
+    return icons[key] || '📄';
+  }
+
+  function getExampleTitle(key: string): string {
+    const titles: Record<string, string> = {
+      basic: 'Basic Example',
+      compact: 'Compact View',
+      filterable: 'Filter & Search',
+      readonly: 'Read-Only',
+      wrapped: 'Text Wrapping',
+      large: 'Large Dataset',
+      mixed: 'Rich Content',
+      minimal: 'Minimal UI'
+    };
+    return titles[key] || key.charAt(0).toUpperCase() + key.slice(1);
+  }
+
+  function getExampleDescription(key: string): string {
+    const descriptions: Record<string, string> = {
+      basic: 'Standard configuration with all features',
+      compact: 'Minimal UI, no controls',
+      filterable: 'Advanced filtering capabilities',
+      readonly: 'Non-editable data display',
+      wrapped: 'Long text with wrapping',
+      large: 'Performance with 50 rows',
+      mixed: 'HTML & Markdown support',
+      minimal: 'Bare minimum interface'
+    };
+    return descriptions[key] || 'Example configuration';
+  }
+
+  function handleAddColumn() {
+    const newHeaders = [...value.headers, `Column ${value.headers.length + 1}`];
+    const newData = value.data.map((row: any) => [...row, ""]);
+    value = {
+      ...value,
+      headers: newHeaders,
+      data: newData
+    };
+    datatype = [...datatype, "str"];
+  }
+
+  function handleAddRow() {
+    const newRow = Array(value.headers.length).fill("");
+    value = {
+      ...value,
+      data: [...value.data, newRow]
+    };
+  }
+
+  // Resizable controls panel handlers
+  function handleDragStart(e: MouseEvent) {
+    isDragging = true;
+    dragStartY = e.clientY;
+    dragStartHeight = controlsHeight;
+    document.body.classList.add('dragging');
+    document.addEventListener('mousemove', handleDragMove);
+    document.addEventListener('mouseup', handleDragEnd);
+    e.preventDefault();
+  }
+
+  function handleDragMove(e: MouseEvent) {
+    if (!isDragging) return;
+    
+    const deltaY = dragStartY - e.clientY; // Inverted because we want up movement to increase height
+    const newHeight = Math.max(180, Math.min(500, dragStartHeight + deltaY)); // Min 180px, max 500px
+    controlsHeight = newHeight;
+  }
+
+  function handleDragEnd() {
+    isDragging = false;
+    document.body.classList.remove('dragging');
+    document.removeEventListener('mousemove', handleDragMove);
+    document.removeEventListener('mouseup', handleDragEnd);
+  }
+
+  onMount(() => {
+    if (currentTheme !== 'default') {
+      document.body.classList.add(currentTheme);
+    }
+  });
 </script>
 
-<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>
+<!-- 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="card">
-    <Counter />
-  </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="./gradio-logo.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>
 
-  <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>
+              <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>
 
-  <p class="read-the-docs">
-    Click on the Vite and Svelte logos to learn more
-  </p>
-</main>
+              <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>
 
-<style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
+                <div class="event-section">
+                  <div class="flex items-start mb-6">
+                    <code class="bg-[#10b981] text-white px-4 py-2 rounded-lg text-[#2e3438] mr-6 font-mono font-bold text-sm border shadow-sm">select</code>
+                    <div class="flex-1">
+                      <h3 class="subsection-title">Cell Selection Event</h3>
+                      <p class="text-[#64748b] mb-6 leading-relaxed font-medium">Fired when a cell is selected or focused.</p>
+                      <SyntaxHighlighter 
+                        language="typescript"
+                        code={`<Dataframe
+  bind:value
+  on:select={(e) => {
+    console.log("Cell selected:", e.detail);
+    // e.detail contains: { row: number, col: number }
+  }}
+/>`}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <div class="event-section">
+                  <div class="flex items-start mb-6">
+                    <code class="bg-[#f59e0b] text-white px-4 py-2 rounded-lg text-[#2e3438] mr-6 font-mono font-bold text-sm border shadow-sm">input</code>
+                    <div class="flex-1">
+                      <h3 class="subsection-title">User Input Event</h3>
+                      <p class="text-[#64748b] mb-6 leading-relaxed font-medium">Fired during user input, useful for real-time validation.</p>
+                      <SyntaxHighlighter 
+                        language="typescript"
+                        code={`<Dataframe
+  bind:value
+  on:input={(e) => {
+    console.log("User input:", e.detail);
+    // Real-time validation logic here
+  }}
+/>`}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="mt-12 p-8 bg-gradient-to-r from-[#f8fafc] to-[#e0f2fe] border border-[#e2e8f0] rounded-xl">
+                <h3 class="text-2xl font-bold text-[#2e3438] mb-4">Event Data Structure</h3>
+                <p class="text-[#64748b] mb-6 leading-relaxed font-medium">All events provide data through the <code class="bg-white px-3 py-1.5 rounded-md border font-mono text-sm text-[#1e293b] font-semibold">e.detail</code> property:</p>
+                <SyntaxHighlighter 
+                  language="typescript"
+                  code={`// Change event detail
+{
+  data: (string | number)[][],
+  headers: string[],
+  metadata: any
+}
+
+// Select event detail  
+{
+  row: number,
+  col: number,
+  value: string | number
+}`}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      {:else if activeView === 'source'}
+        <!-- Source Code Page -->
+        <div class="page-wrapper overflow-y-scroll">
+          <div class="main-container">
+            <div class="content-card">
+              <div class="mb-8 md:mb-12">
+                <h1 class="page-title">Source Code</h1>
+                <p class="description-text">
+                  Complete example showing how to implement the dataframe component with all features.
+                </p>
+              </div>
+
+              <div class="mb-10">
+                <h2 class="text-lg font-bold text-[#2e3438] mb-4">Current Configuration</h2>
+                <SyntaxHighlighter 
+                  language="typescript"
+                  code={`<script lang="ts">
+  import Dataframe from "@gradio/dataframe";
+
+  let value = ` + JSON.stringify({
+    data: value.data.slice(0, 3),
+    headers: value.headers,
+    metadata: null
+  }, null, 2) + `;
+
+  let datatype = ` + JSON.stringify(datatype) + `;
+
+  function handleChange(e: any) {
+    console.log("Data changed:", e.detail);
   }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
+
+  function handleSelect(e: any) {
+    console.log("Cell selected:", e.detail);
   }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
+
+  function handleInput(e: any) {
+    console.log("Input event:", e.detail);
   }
-  .read-the-docs {
-    color: #888;
+</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"
   }
-</style>
+}`}
+                  />
+                </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>

src/app.css

@@ -1,79 +1,696 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import "tailwindcss";
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+/* 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;
+}
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+/* 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 {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+  color: inherit;
+  text-decoration: none;
 }
-a:hover {
-  color: #535bf2;
+
+/* Button reset for Storybook style */
+button {
+  font-family: inherit;
+  border: none;
+  cursor: pointer;
+  background: none;
 }
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+/* Input styles for controls */
+input, select {
+  font-family: inherit;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+/* 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;
 }
 
-.card {
-  padding: 2em;
+/* 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;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+
+/* Custom theme examples */
+.purple-theme {
+  --gr-df-accent: #7c3aed;
+  --gr-df-accent-soft: #ede9fe;
+  --gr-df-copied-cell-color: #ede9fe;
 }
 
-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;
-  }
+.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;
+}
+
+.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;
+}
+
+.dark .description-text,
+.dark .feature-text {
+  color: #cbd5e1;
+}
+
+.dark .event-section {
+  background: linear-gradient(to right, #1e293b, #0f172a);
+  border-color: #475569;
+}
+
+div[role*="slider"] {
+  border-top: 1px solid #d1d5db;
+}
+/* Resizable controls panel styling */
+.drag-handle {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.drag-handle:hover {
+  background-color: #f9fafb;
+}
+
+.drag-handle.dragging {
+  background-color: #f3f4f6;
+  cursor: ns-resize;
+}
+
+/* Dark mode for drag handle */
+.dark .drag-handle:hover {
+  background-color: #374151;
+}
+
+.dark .drag-handle.dragging {
+  background-color: #4b5563;
+}
+
+/* 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;
 }

src/lib/ConfigPanel.svelte

@@ -0,0 +1,342 @@
+<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

@@ -0,0 +1,115 @@
+<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

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

src/lib/sampleData.ts

@@ -0,0 +1,253 @@
+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

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

vite.config.ts

@@ -4,4 +4,16 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [svelte()],
+  base: './',
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    sourcemap: false,
+    minify: 'esbuild',
+    rollupOptions: {
+      output: {
+        manualChunks: undefined,
+      }
+    }
+  }
 })