@libredb/studio 0.9.7

package/src/components/results-grid/StatsBar.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import React from 'react';
+import { QueryResult } from '@/lib/types';
+import { cn } from '@/lib/utils';
+import {
+  ChevronDown,
+  LayoutGrid,
+  Table2,
+  Loader2,
+  EyeOff,
+  Eye,
+  Save,
+  X,
+  Filter,
+  Lock,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import type { CellChange } from '@/components/ResultsGrid';
+
+export interface StatsBarProps {
+  result: QueryResult;
+  filteredRowCount: number;
+  activeFilterCount: number;
+  onClearFilters: () => void;
+  viewMode: 'card' | 'table';
+  onSetViewMode: (mode: 'card' | 'table') => void;
+  // Masking props
+  hasSensitive: boolean;
+  effectiveMaskingEnabled: boolean;
+  userCanToggle: boolean;
+  onToggleMasking?: () => void;
+  // Editing props
+  editingEnabled?: boolean;
+  pendingChanges?: CellChange[];
+  onApplyChanges?: () => void;
+  onDiscardChanges?: () => void;
+  // Load more props
+  onLoadMore?: () => void;
+  isLoadingMore?: boolean;
+}
+
+export function StatsBar({
+  result,
+  filteredRowCount,
+  activeFilterCount,
+  onClearFilters,
+  viewMode,
+  onSetViewMode,
+  hasSensitive,
+  effectiveMaskingEnabled,
+  userCanToggle,
+  onToggleMasking,
+  editingEnabled,
+  pendingChanges,
+  onApplyChanges,
+  onDiscardChanges,
+}: StatsBarProps) {
+  return (
+    <div className="flex items-center justify-between px-4 py-2 border-b border-white/5 bg-[#0a0a0a] text-[11px] text-zinc-500 font-mono">
+      <div className="flex items-center gap-4">
+        <span className="flex items-center gap-1.5">
+          <span className="w-1.5 h-1.5 rounded-full bg-emerald-500/50" />
+          {result.rows.length} rows
+          {result.pagination?.hasMore && (
+            <span className="text-amber-400 ml-1">(more available)</span>
+          )}
+        </span>
+        <span className="hidden sm:inline">{result.fields.length} columns</span>
+        {activeFilterCount > 0 && (
+          <button
+            className="flex items-center gap-1 text-blue-400 text-[10px] bg-blue-500/10 px-2 py-0.5 rounded hover:bg-blue-500/20 transition-colors"
+            onClick={onClearFilters}
+            title="Clear all filters"
+          >
+            <Filter className="w-3 h-3" />
+            {activeFilterCount} filter{activeFilterCount > 1 ? 's' : ''} &bull; {filteredRowCount} shown
+            <X className="w-3 h-3" />
+          </button>
+        )}
+        {result.pagination?.wasLimited && (
+          <span className="text-blue-400 text-[10px] bg-blue-500/10 px-2 py-0.5 rounded">
+            AUTO-LIMITED
+          </span>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        {/* Data Masking Toggle */}
+        {hasSensitive && (
+          userCanToggle && onToggleMasking ? (
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn(
+                "h-6 px-2 text-[10px] font-bold gap-1",
+                effectiveMaskingEnabled ? "text-purple-400 bg-purple-500/10" : "text-zinc-500"
+              )}
+              onClick={onToggleMasking}
+              title={effectiveMaskingEnabled ? 'Show sensitive data' : 'Mask sensitive data'}
+            >
+              {effectiveMaskingEnabled ? <EyeOff className="w-3 h-3" /> : <Eye className="w-3 h-3" />}
+              {effectiveMaskingEnabled ? 'MASKED' : 'MASK'}
+            </Button>
+          ) : effectiveMaskingEnabled ? (
+            <span className="h-6 px-2 text-[10px] font-bold text-purple-400 bg-purple-500/10 rounded flex items-center gap-1">
+              <Lock className="w-3 h-3" />
+              MASKED
+            </span>
+          ) : null
+        )}
+
+        {/* Pending Changes Indicator */}
+        {editingEnabled && pendingChanges && pendingChanges.length > 0 && (
+          <div className="flex items-center gap-1">
+            <span className="text-[10px] text-amber-400 bg-amber-500/10 px-1.5 py-0.5 rounded">
+              {pendingChanges.length} change{pendingChanges.length > 1 ? 's' : ''}
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 px-1.5 text-[10px] text-emerald-400 hover:bg-emerald-500/10"
+              onClick={onApplyChanges}
+            >
+              <Save className="w-3 h-3" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 px-1.5 text-[10px] text-red-400 hover:bg-red-500/10"
+              onClick={onDiscardChanges}
+            >
+              <X className="w-3 h-3" />
+            </Button>
+          </div>
+        )}
+
+        {/* Execution Time - Hidden on mobile */}
+        <span className="hidden sm:flex px-2 py-0.5 rounded bg-white/5 border border-white/5">
+          EXEC TIME: {result.executionTime || '0ms'}
+        </span>
+
+        {/* View Toggle - Mobile only */}
+        <div className="flex md:hidden items-center bg-white/5 rounded-lg p-0.5">
+          <button
+            onClick={() => onSetViewMode('card')}
+            className={cn(
+              "p-1.5 rounded transition-all",
+              viewMode === 'card' ? "bg-blue-600 text-white" : "text-zinc-500"
+            )}
+          >
+            <LayoutGrid className="w-4 h-4" />
+          </button>
+          <button
+            onClick={() => onSetViewMode('table')}
+            className={cn(
+              "p-1.5 rounded transition-all",
+              viewMode === 'table' ? "bg-blue-600 text-white" : "text-zinc-500"
+            )}
+          >
+            <Table2 className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export interface LoadMoreFooterProps {
+  hasMore: boolean;
+  onLoadMore: () => void;
+  isLoadingMore?: boolean;
+}
+
+export function LoadMoreFooter({ hasMore, onLoadMore, isLoadingMore }: LoadMoreFooterProps) {
+  if (!hasMore) return null;
+
+  return (
+    <div className="flex items-center justify-center py-3 border-t border-white/5 bg-[#0a0a0a]">
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={onLoadMore}
+        disabled={isLoadingMore}
+        className="h-8 px-4 text-xs border-white/10 hover:bg-white/5"
+      >
+        {isLoadingMore ? (
+          <>
+            <Loader2 className="w-3 h-3 mr-2 animate-spin" />
+            Loading...
+          </>
+        ) : (
+          <>
+            <ChevronDown className="w-3 h-3 mr-2" />
+            Load More (500 rows)
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}

package/src/components/results-grid/index.ts

@@ -0,0 +1 @@
+export { ResultsGrid, type CellChange } from '@/components/ResultsGrid';

package/src/components/results-grid/utils.ts

@@ -0,0 +1,23 @@
+// Format cell value for display
+export function formatCellValue(value: unknown): { display: string; className: string } {
+  if (value === null || value === undefined) {
+    return { display: 'NULL', className: 'text-zinc-600 italic' };
+  }
+  if (typeof value === 'object') {
+    return { display: JSON.stringify(value), className: 'text-blue-400/80 italic font-light' };
+  }
+  if (typeof value === 'number') {
+    return { display: String(value), className: 'text-amber-500/90 font-medium' };
+  }
+  if (typeof value === 'boolean') {
+    return { display: String(value), className: value ? 'text-emerald-500/90' : 'text-rose-500/90' };
+  }
+  const strVal = String(value).toLowerCase();
+  if (strVal === 'true' || strVal === 'active' || strVal === 'enabled') {
+    return { display: String(value), className: 'text-emerald-500/90' };
+  }
+  if (strVal === 'false' || strVal === 'inactive' || strVal === 'disabled') {
+    return { display: String(value), className: 'text-rose-500/90' };
+  }
+  return { display: String(value), className: 'text-zinc-300' };
+}

package/src/components/schema-explorer/ColumnList.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { TableSchema } from '@/lib/types';
+import { Key, Hash } from 'lucide-react';
+
+interface ColumnListProps {
+  columns: TableSchema['columns'];
+  indexes: TableSchema['indexes'];
+}
+
+export const ColumnList = React.memo(function ColumnList({ columns, indexes }: ColumnListProps) {
+  return (
+    <div className="pl-6 pr-2 py-1 space-y-0.5 border-l border-border/30 ml-3.5 mt-0.5 mb-1">
+      {columns.map((column) => (
+        <div
+          key={column.name}
+          className="flex items-center gap-2 py-1 px-2 rounded-sm group/col hover:bg-accent/20 cursor-default"
+        >
+          {column.isPrimary ? (
+            <Key className="w-2.5 h-2.5 text-yellow-500/70" />
+          ) : (
+            <div className="w-2.5 h-2.5 flex items-center justify-center">
+              <div className="w-1 h-1 rounded-full bg-muted-foreground/50" />
+            </div>
+          )}
+
+          <span className="text-[12px] text-muted-foreground flex-1 truncate group-hover/col:text-foreground">
+            {column.name}
+          </span>
+
+          <span className="text-[10px] font-mono text-muted-foreground/60 uppercase group-hover/col:text-muted-foreground">
+            {column.type.split('(')[0]}
+          </span>
+        </div>
+      ))}
+      {indexes.length > 0 && (
+        <div className="pt-2 pb-1">
+          <div className="flex items-center gap-1.5 px-2 mb-1">
+            <Hash className="w-2.5 h-2.5 text-purple-500/40" />
+            <span className="text-[9px] uppercase tracking-wider font-bold text-muted-foreground">Indexes</span>
+          </div>
+          {indexes.map(idx => (
+            <div key={idx.name} className="flex items-center gap-2 py-0.5 px-2">
+              <div className="w-2.5 h-2.5" />
+              <span className="text-[10px] text-muted-foreground italic truncate" title={Array.isArray(idx.columns) ? idx.columns.join(', ') : ''}>
+                {idx.name}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/schema-explorer/SchemaExplorer.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import React, { useState, useMemo, useCallback } from 'react';
+import { TableSchema } from '@/lib/types';
+import type { ProviderMetadata } from '@/hooks/use-provider-metadata';
+import {
+  Search,
+  Hash,
+  Loader2,
+  AlertCircle,
+  Database,
+  Plus,
+  Settings,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { AnimatePresence } from 'framer-motion';
+import { TableItem } from './TableItem';
+
+interface SchemaExplorerProps {
+  schema: TableSchema[];
+  isLoadingSchema: boolean;
+  onTableClick?: (tableName: string) => void;
+  onGenerateSelect?: (tableName: string) => void;
+  onCreateTableClick?: () => void;
+  isAdmin?: boolean;
+  onOpenMaintenance?: (tab?: 'global' | 'tables' | 'sessions', table?: string) => void;
+  databaseType?: string;
+  metadata?: ProviderMetadata | null;
+  onProfileTable?: (tableName: string) => void;
+  onGenerateCode?: (tableName: string) => void;
+  onGenerateTestData?: (tableName: string) => void;
+}
+
+export function SchemaExplorer({
+  schema,
+  isLoadingSchema,
+  onTableClick,
+  onGenerateSelect,
+  onCreateTableClick,
+  isAdmin = false,
+  onOpenMaintenance,
+  metadata,
+  onProfileTable,
+  onGenerateCode,
+  onGenerateTestData,
+}: SchemaExplorerProps) {
+  const labels = metadata?.labels;
+  const capabilities = metadata?.capabilities;
+  const [searchQuery, setSearchQuery] = useState('');
+  const [expandedTables, setExpandedTables] = useState<Set<string>>(new Set());
+
+  const toggleTable = useCallback((tableName: string) => {
+    setExpandedTables(prev => {
+      const next = new Set(prev);
+      if (next.has(tableName)) {
+        next.delete(tableName);
+      } else {
+        next.add(tableName);
+      }
+      return next;
+    });
+  }, []);
+
+  const filteredSchema = useMemo(() => {
+    if (!searchQuery) return schema;
+    const query = searchQuery.toLowerCase();
+
+    return schema.filter(table => {
+      const tableNameMatch = table.name.toLowerCase().includes(query);
+      const columnMatch = table.columns.some(col => col.name.toLowerCase().includes(query));
+      return tableNameMatch || columnMatch;
+    });
+  }, [schema, searchQuery]);
+
+  if (isLoadingSchema) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+        <div className="relative mb-4">
+          <Loader2 className="w-8 h-8 animate-spin text-blue-500/20" />
+          <Database className="w-4 h-4 absolute inset-0 m-auto text-blue-500 animate-pulse" />
+        </div>
+        <span className="text-[10px] uppercase tracking-[0.2em] font-bold animate-pulse">Scanning Schema...</span>
+      </div>
+    );
+  }
+
+  if (schema.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 px-6 text-center">
+        <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4 border border-border">
+          <AlertCircle className="w-6 h-6 text-muted-foreground" />
+        </div>
+        <h3 className="text-foreground text-sm font-medium mb-1">No structures found</h3>
+        <p className="text-[11px] text-muted-foreground leading-relaxed">
+          We couldn&apos;t find any tables or views in this connection.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="sticky top-0 z-10 px-3 pb-3 pt-1 space-y-3 bg-background">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Database className="w-3.5 h-3.5 text-blue-500/50" />
+            <span className="text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground">
+              Explorer
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            {isAdmin && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="w-6 h-6 hover:bg-accent text-muted-foreground hover:text-amber-400 transition-colors"
+                onClick={() => onOpenMaintenance?.('global')}
+                title="Database Maintenance"
+              >
+                <Settings className="w-3.5 h-3.5" />
+              </Button>
+            )}
+            {(capabilities?.supportsCreateTable !== false) && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="w-6 h-6 hover:bg-accent text-muted-foreground hover:text-blue-400 transition-colors"
+                onClick={onCreateTableClick}
+                title={`Create ${labels?.entityName || 'Table'}`}
+              >
+                <Plus className="w-3.5 h-3.5" />
+              </Button>
+            )}
+            <span className="text-[9px] bg-blue-500/10 text-blue-400 px-1.5 py-0.5 rounded-full font-mono border border-blue-500/10">
+              {schema.length}
+            </span>
+          </div>
+        </div>
+
+        <div className="relative group">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground group-focus-within:text-blue-500 transition-colors" />
+          <Input
+            placeholder={labels?.searchPlaceholder || "Search tables or columns..."}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="h-8 pl-8 pr-8 text-[12px] bg-muted/50 border-border focus-visible:ring-1 focus-visible:ring-blue-500/50 placeholder:text-muted-foreground/50"
+          />
+          {searchQuery && (
+            <button
+              onClick={() => setSearchQuery('')}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <Hash className="w-3 h-3 rotate-45" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="px-2 space-y-1">
+        <AnimatePresence mode="popLayout">
+          {filteredSchema.map((table) => (
+            <TableItem
+              key={table.name}
+              table={table}
+              isExpanded={expandedTables.has(table.name)}
+              onToggle={() => toggleTable(table.name)}
+              labels={labels}
+              isAdmin={isAdmin}
+              onTableClick={onTableClick}
+              onGenerateSelect={onGenerateSelect}
+              onProfileTable={onProfileTable}
+              onGenerateCode={onGenerateCode}
+              onGenerateTestData={onGenerateTestData}
+              onOpenMaintenance={onOpenMaintenance}
+            />
+          ))}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

package/src/components/schema-explorer/TableItem.tsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import { TableSchema } from '@/lib/types';
+import type { ProviderMetadata } from '@/hooks/use-provider-metadata';
+import {
+  Search,
+  Table as TableIcon,
+  Play,
+  ChevronRight,
+  Filter,
+  MoreVertical,
+  Copy,
+  Trash2,
+  Code,
+  BarChart3,
+  Wand2,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+} from '@/components/ui/context-menu';
+import { toast } from 'sonner';
+import { ColumnList } from './ColumnList';
+
+interface TableItemProps {
+  table: TableSchema;
+  isExpanded: boolean;
+  onToggle: () => void;
+  labels?: ProviderMetadata['labels'];
+  isAdmin: boolean;
+  onTableClick?: (tableName: string) => void;
+  onGenerateSelect?: (tableName: string) => void;
+  onProfileTable?: (tableName: string) => void;
+  onGenerateCode?: (tableName: string) => void;
+  onGenerateTestData?: (tableName: string) => void;
+  onOpenMaintenance?: (tab?: 'global' | 'tables' | 'sessions', table?: string) => void;
+}
+
+function renderMenuItems(
+  table: TableSchema,
+  labels: TableItemProps['labels'],
+  isAdmin: boolean,
+  callbacks: {
+    onTableClick?: (tableName: string) => void;
+    onGenerateSelect?: (tableName: string) => void;
+    onProfileTable?: (tableName: string) => void;
+    onGenerateCode?: (tableName: string) => void;
+    onGenerateTestData?: (tableName: string) => void;
+    onOpenMaintenance?: (tab?: 'global' | 'tables' | 'sessions', table?: string) => void;
+  },
+  copyToClipboard: (text: string, label: string) => void,
+  Item: React.ComponentType<{ onClick?: () => void; children: React.ReactNode }>,
+  Separator: React.ComponentType,
+): React.ReactNode {
+  return (
+    <>
+      <Item onClick={() => callbacks.onTableClick?.(table.name)}>
+        <Play className="w-3.5 h-3.5 mr-2 text-green-500" />
+        {labels?.selectAction || 'Select Top 100'}
+      </Item>
+      <Item onClick={() => callbacks.onGenerateSelect?.(table.name)}>
+        <Filter className="w-3.5 h-3.5 mr-2 text-blue-500" />
+        {labels?.generateAction || 'Generate Query'}
+      </Item>
+      <Item onClick={() => copyToClipboard(table.name, `${labels?.entityName || 'Table'} name`)}>
+        <Copy className="w-3.5 h-3.5 mr-2 text-muted-foreground" />
+        Copy Name
+      </Item>
+      <Separator />
+      <Item onClick={() => callbacks.onProfileTable?.(table.name)}>
+        <BarChart3 className="w-3.5 h-3.5 mr-2 text-cyan-500" />
+        Profile Table
+      </Item>
+      <Item onClick={() => callbacks.onGenerateCode?.(table.name)}>
+        <Code className="w-3.5 h-3.5 mr-2 text-purple-500" />
+        Generate Code
+      </Item>
+      <Item onClick={() => callbacks.onGenerateTestData?.(table.name)}>
+        <Wand2 className="w-3.5 h-3.5 mr-2 text-amber-500" />
+        Generate Test Data
+      </Item>
+      {isAdmin && (
+        <>
+          <Separator />
+          <Item onClick={() => callbacks.onOpenMaintenance?.('tables', table.name)}>
+            <Search className="w-3.5 h-3.5 mr-2 text-amber-500" />
+            {labels?.analyzeAction || 'Analyze Table'}
+          </Item>
+          <Item onClick={() => callbacks.onOpenMaintenance?.('tables', table.name)}>
+            <Trash2 className="w-3.5 h-3.5 mr-2 text-blue-400" />
+            {labels?.vacuumAction || 'Vacuum Table'}
+          </Item>
+        </>
+      )}
+    </>
+  );
+}
+
+export const TableItem = React.memo(function TableItem({
+  table,
+  isExpanded,
+  onToggle,
+  labels,
+  isAdmin,
+  onTableClick,
+  onGenerateSelect,
+  onProfileTable,
+  onGenerateCode,
+  onGenerateTestData,
+  onOpenMaintenance,
+}: TableItemProps) {
+  const copyToClipboard = (text: string, label: string) => {
+    navigator.clipboard.writeText(text);
+    toast.success(`${label} copied to clipboard`);
+  };
+
+  const callbacks = { onTableClick, onGenerateSelect, onProfileTable, onGenerateCode, onGenerateTestData, onOpenMaintenance };
+
+  return (
+    <div className="group flex flex-col">
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <div
+            className={cn(
+              'flex items-center gap-1.5 px-2 py-1.5 rounded-md cursor-pointer transition-all',
+              isExpanded ? 'bg-accent/50' : 'hover:bg-accent/30'
+            )}
+            onClick={onToggle}
+          >
+            <motion.div
+              animate={{ rotate: isExpanded ? 90 : 0 }}
+              transition={{ duration: 0.2 }}
+              className="shrink-0"
+            >
+              <ChevronRight className="w-3 h-3 text-muted-foreground" />
+            </motion.div>
+
+            <TableIcon
+              className={cn(
+                'w-3.5 h-3.5 shrink-0 transition-colors',
+                isExpanded ? 'text-blue-400' : 'text-muted-foreground group-hover:text-foreground'
+              )}
+            />
+
+            <span
+              className={cn(
+                'truncate min-w-0 flex-1 text-[13px] font-medium transition-colors',
+                isExpanded ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground'
+              )}
+            >
+              {table.name}
+            </span>
+
+            <div className="shrink-0 relative w-8 h-6 flex items-center justify-center">
+              {table.rowCount !== undefined && (
+                <span className="absolute inset-0 flex items-center justify-center text-[9px] font-mono text-muted-foreground/70 whitespace-nowrap opacity-100 group-hover:opacity-0 transition-opacity pointer-events-none">
+                  {table.rowCount >= 1000 ? `${(table.rowCount / 1000).toFixed(1)}k` : table.rowCount}
+                </span>
+              )}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="absolute inset-0 w-full h-full opacity-0 group-hover:opacity-100 [@media(hover:none)]:opacity-100 focus-within:opacity-100 transition-opacity hover:bg-accent"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <MoreVertical className="w-4 h-4 text-muted-foreground group-hover:text-foreground" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-48">
+                  {renderMenuItems(table, labels, isAdmin, callbacks, copyToClipboard, DropdownMenuItem, DropdownMenuSeparator)}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent className="w-48">
+          {renderMenuItems(table, labels, isAdmin, callbacks, copyToClipboard, ContextMenuItem, ContextMenuSeparator)}
+        </ContextMenuContent>
+      </ContextMenu>
+
+      <AnimatePresence>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <ColumnList columns={table.columns} indexes={table.indexes} />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+});

package/src/components/schema-explorer/index.ts

@@ -0,0 +1 @@
+export { SchemaExplorer } from './SchemaExplorer';