d1s 0.2.1

package/src/components/column-selector.jsx

@@ -0,0 +1,133 @@
+// components/column-selector.jsx
+import React, { useState, useEffect } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Columns } from 'lucide-react';
+
+export function ColumnSelector({ schema = [], visibleColumns = [], onColumnToggle }) {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  // Initialize visible columns with all columns from schema
+  useEffect(() => {
+    if (!schema || schema.length === 0) return;
+
+    // Get all column names from schema
+    const allColumns = schema.map(col => col.name);
+
+    // If visibleColumns is empty, make all columns visible
+    if (visibleColumns.length === 0) {
+      allColumns.forEach(col => onColumnToggle(col));
+    }
+  }, [schema, visibleColumns.length, onColumnToggle]);
+
+  // Filter columns based on search term
+  const filteredColumns = schema.filter(col =>
+    col.name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  const filteredColumnNames = filteredColumns.map(col => col.name);
+
+  // Determine if all filtered columns are selected
+  const allFilteredSelected =
+    filteredColumnNames.length > 0 &&
+    filteredColumnNames.every(name => visibleColumns.includes(name));
+
+  // Handle individual checkbox change
+  const handleCheckboxChange = (columnName) => {
+    onColumnToggle(columnName);
+  };
+
+  // Handle the "Select All" checkbox change for the filtered list
+  const handleSelectAllChange = (checked) => {
+    if (checked) {
+      // For every filtered column that is not visible, toggle it on
+      filteredColumns.forEach(col => {
+        if (!visibleColumns.includes(col.name)) {
+          onColumnToggle(col.name);
+        }
+      });
+    } else {
+      // For every filtered column that is visible, toggle it off
+      filteredColumns.forEach(col => {
+        if (visibleColumns.includes(col.name)) {
+          onColumnToggle(col.name);
+        }
+      });
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button 
+          size="sm"
+          variant="outline"
+          className="font-semibold"
+        >
+          <Columns className="h-4 w-4" />
+          Columns ({visibleColumns.length})
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-64 font-sans">
+        <div className="p-2">
+          <Input
+            placeholder="Search columns..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="h-8"
+          />
+        </div>
+
+        {/* Select All Option */}
+        <div className="flex items-center space-x-2 px-2 py-1.5 hover:bg-accent rounded-md">
+          <Checkbox
+            id="select-all-columns"
+            checked={allFilteredSelected}
+            onCheckedChange={handleSelectAllChange}
+            className="shrink-0"
+          />
+          <label
+            htmlFor="select-all-columns"
+            className="flex-1 cursor-pointer text-sm font-medium"
+          >
+            Select All {searchTerm && '(Filtered)'}
+          </label>
+        </div>
+
+        <div className="max-h-[300px] overflow-y-auto">
+          {filteredColumns.map((column) => (
+            <div
+              key={column.name}
+              className="flex items-start space-x-2 px-2 py-1.5 hover:bg-accent rounded-md"
+            >
+              <Checkbox
+                id={`column-${column.name}`}
+                checked={visibleColumns.includes(column.name)}
+                onCheckedChange={() => handleCheckboxChange(column.name)}
+                className="mt-1"
+              />
+              <label
+                htmlFor={`column-${column.name}`}
+                className="flex-1 cursor-pointer"
+              >
+                <div className="text-sm font-medium">
+                  {column.name}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {column.type.toLowerCase()}
+                </div>
+              </label>
+            </div>
+          ))}
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export default ColumnSelector;

package/src/components/column-sorting.jsx

@@ -0,0 +1,65 @@
+// components/column-sorting.jsx
+'use client';
+
+import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+
+export function SortableHeader({ 
+  column, 
+  sortConfig, 
+  onSort,
+  children 
+}) {
+  const direction = sortConfig[column];
+  
+  return (
+    <div className="flex items-center w-full">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-8 hover:bg-neutral-100 w-full justify-between"
+        onClick={() => {
+          const nextDirection = !direction 
+            ? 'asc' 
+            : direction === 'asc' 
+              ? 'desc' 
+              : null;
+          onSort(column, nextDirection);
+        }}
+      >
+        <span className="flex items-center gap-1 font-mono">
+          {children}
+        </span>
+        <span className="shrink-0">
+          {direction === 'asc' && <ArrowUp className="h-4 w-4" />}
+          {direction === 'desc' && <ArrowDown className="h-4 w-4" />}
+          {!direction && <ArrowUpDown className="h-4 w-4" />}
+        </span>
+      </Button>
+    </div>
+  );
+}
+
+export function sortData(data, column, direction) {
+  if (!direction || !data.length) return data;
+
+  return [...data].sort((a, b) => {
+    const aVal = a[column];
+    const bVal = b[column];
+
+    // Handle null values
+    if (aVal == null && bVal == null) return 0;
+    if (aVal == null) return 1;
+    if (bVal == null) return -1;
+
+    // Compare based on type
+    if (typeof aVal === 'number' && typeof bVal === 'number') {
+      return direction === 'asc' ? aVal - bVal : bVal - aVal;
+    }
+
+    // String comparison for everything else
+    const aStr = String(aVal).toLowerCase();
+    const bStr = String(bVal).toLowerCase();
+    return direction === 'asc' ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr);
+  });
+}

package/src/components/delete-records-dialog.jsx

@@ -0,0 +1,64 @@
+// components/delete-records-dialog.jsx
+'use client';
+
+import React from 'react';
+import { AlertCircle } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+export function DeleteRecordsDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  selectedCount,
+  tableName,
+  isDeleting,
+  error
+}) {
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md font-sans">
+      <DialogHeader>
+        <DialogTitle className="mb-2">Delete {selectedCount} {selectedCount === 1 ? 'Record' : 'Records'}?</DialogTitle>
+        <DialogDescription className="text-neutral-600 font-medium">
+          You're about to delete {selectedCount} {selectedCount === 1 ? 'record' : 'records'} from <span className="font-sans font-bold text-neutral-900">{tableName}</span>.
+        </DialogDescription>
+      </DialogHeader>
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        <DialogFooter className="flex gap-1 mt-2 sm:justify-end font-sans">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            disabled={isDeleting}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            disabled={isDeleting}
+          >
+            {isDeleting ? 'Deleting...' : 'Delete'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default DeleteRecordsDialog;

package/src/components/download-button.jsx

@@ -0,0 +1,205 @@
+// components/download-button.jsx
+'use client';
+
+import React, { memo, useState } from 'react';
+import { Download, FileJson, FileSpreadsheet, FileCode, Loader2 } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useToast } from "@/hooks/use-toast";
+
+const DownloadButton = memo(({ 
+  tableName, 
+  onDownloadStart, 
+  onDownloadComplete,
+  disabled 
+}) => {
+  const [isDownloading, setIsDownloading] = useState(false);
+  const { toast } = useToast();
+
+  const downloadAsFile = (data, filename) => {
+    try {
+      const blob = new Blob([data], { type: "application/octet-stream" });
+      const url = window.URL.createObjectURL(blob);
+      
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Error during file download:", error);
+      throw error;
+    }
+  };
+
+  const handleDownload = async (format) => {
+    if (disabled) return;
+    
+    try {
+      setIsDownloading(true);
+      onDownloadStart?.();
+
+      const response = await fetch(`/api/tables/${tableName}`);
+      const result = await response.json();
+      
+      if (!response.ok) {
+        throw new Error(result.error || 'Failed to fetch data');
+      }
+
+      const { data, schema } = result;
+      
+      if (!data?.length) {
+        toast({
+          title: "No Data",
+          description: "The table is empty.",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      const timestamp = new Date().toISOString().split("T")[0];
+      const filename = `${tableName}_${timestamp}.${format}`;
+
+      switch (format) {
+        case "json": {
+          const jsonStr = JSON.stringify(data, null, 2);
+          downloadAsFile(jsonStr, filename);
+          break;
+        }
+        case "csv": {
+          const headers = Object.keys(data[0]);
+          const csvRows = [
+            headers.join(","),
+            ...data.map((row) =>
+              headers.map((header) => {
+                const value = row[header];
+                if (value === null || value === undefined) return "";
+                if (typeof value === "string") {
+                  const escaped = value.replace(/"/g, '""');
+                  return `"${escaped}"`;
+                }
+                return value;
+              }).join(",")
+            ),
+          ];
+          const csvStr = csvRows.join("\n");
+          downloadAsFile(csvStr, filename);
+          break;
+        }
+        case "sql": {
+          // Generate CREATE TABLE statement
+          const createTable = `CREATE TABLE IF NOT EXISTS ${tableName} (\n` +
+            schema.map(col => {
+              const constraints = [];
+              if (col.pk) constraints.push('PRIMARY KEY');
+              if (!col.notnull) constraints.push('NOT NULL');
+              
+              return `  ${col.name} ${col.type}${constraints.length ? ` ${constraints.join(' ')}` : ''}`;
+            }).join(',\n') +
+            '\n);\n\n';
+
+          // Generate INSERT statements
+          const insertStatements = data.map(row => {
+            const columns = Object.keys(row);
+            const values = columns.map(col => {
+              const value = row[col];
+              if (value === null) return 'NULL';
+              if (typeof value === 'string') return `'${value.replace(/'/g, "''")}'`;
+              return value;
+            });
+            
+            return `INSERT INTO ${tableName} (${columns.join(', ')})\nVALUES (${values.join(', ')});`;
+          }).join('\n');
+
+          const sqlContent = createTable + insertStatements;
+          downloadAsFile(sqlContent, filename);
+          break;
+        }
+      }
+
+      toast({
+        title: "Download Complete",
+        description: `${data.length} rows exported as ${format.toUpperCase()}.`,
+      });
+      onDownloadComplete?.();
+
+    } catch (error) {
+      console.error("Download error:", error);
+      toast({
+        variant: "destructive",
+        title: "Download Failed",
+        description: error.message,
+      });
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button 
+                variant="outline" 
+                size="icon"
+                className="h-8"
+                disabled={isDownloading || disabled}
+              >
+                {isDownloading ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Download className="h-4 w-4" />
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Download table data</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem 
+          onClick={() => handleDownload('json')}
+          disabled={disabled}
+        >
+          <FileJson className="mr-2 h-4 w-4" />
+          <span>Download JSON</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem 
+          onClick={() => handleDownload('csv')}
+          disabled={disabled}
+        >
+          <FileSpreadsheet className="mr-2 h-4 w-4" />
+          <span>Download CSV</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem 
+          onClick={() => handleDownload('sql')}
+          disabled={disabled}
+        >
+          <FileCode className="mr-2 h-4 w-4" />
+          <span>Download SQL</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+});
+
+DownloadButton.displayName = 'DownloadButton';
+
+export default DownloadButton;

package/src/components/edit-error-alert.jsx

@@ -0,0 +1,30 @@
+// components/edit-error-alert.jsx
+'use client';
+
+import React from 'react';
+import { AlertCircle, X } from 'lucide-react';
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+
+export function EditErrorAlert({ error, onDismiss }) {
+  if (!error) return null;
+
+  return (
+    <Alert variant="destructive" className="mb-4">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle className="flex items-center justify-between">
+        <span>Failed to save changes</span>
+        {onDismiss && (
+          <button 
+            onClick={onDismiss}
+            className="p-1 hover:bg-destructive/10 rounded-full"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </AlertTitle>
+      <AlertDescription>{error.message}</AlertDescription>
+    </Alert>
+  );
+}
+
+export default EditErrorAlert;

package/src/components/editable-cell.jsx

@@ -0,0 +1,163 @@
+// components/editable-cell.jsx
+
+'use client';
+
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { TableCell } from '@/components/ui/table';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export function EditableCell({ 
+  value: initialValue, 
+  row: _row, 
+  column,
+  schema,
+  onChange,
+  onStartEdit,
+  isEditing
+}) {
+  const cleanValue = typeof initialValue === 'string' ? 
+    initialValue.replace(/^'|'$/g, '') : 
+    initialValue;
+
+  const [value, setValue] = useState(cleanValue);
+  const [width, setWidth] = useState('auto');
+  const cellRef = useRef(null);
+  const inputRef = useRef(null);
+
+  // Find column schema and extract column type and constraints
+  const columnSchema = schema.find(col => col.name === column);
+  const allowedValues = useMemo(() => columnSchema?.check || null, [columnSchema]);
+  const isBoolean = useMemo(() => {
+    const type = columnSchema?.type?.toLowerCase() || '';
+    return type === 'boolean' || type === 'bool' || (type === 'integer' && column.toLowerCase().startsWith('is_'));
+  }, [columnSchema, column]);
+
+  useEffect(() => {
+    setValue(cleanValue);
+  }, [cleanValue]);
+
+  useEffect(() => {
+    if (cellRef.current && !isEditing) {
+      const cellWidth = cellRef.current.offsetWidth;
+      setWidth(`${cellWidth}px`);
+    }
+  }, [isEditing]);
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  // Allow editing of primary key now.
+  const isPrimaryKey = columnSchema?.pk === 1;
+
+  const handleChange = useCallback((newValue) => {
+    // Convert boolean values to 1/0 for storage if it's a boolean field
+    const processedValue = isBoolean ? 
+      (newValue === 'true' ? 1 : newValue === 'false' ? 0 : newValue) : 
+      newValue;
+    
+    setValue(newValue);
+    onChange?.(processedValue);
+  }, [onChange, isBoolean]);
+
+  const handleCellClick = useCallback(() => {
+    // Removed isPrimaryKey check so that even primary key cells can be edited
+    if (!isEditing && onStartEdit) {
+      onStartEdit(cleanValue);
+    }
+  }, [isEditing, onStartEdit, cleanValue]);
+
+  const baseClasses = "border-x border-neutral-200 px-3 py-2.5 text-xs font-mono whitespace-nowrap";
+
+  // Display formatting for cell value when not editing
+  const displayValue = useMemo(() => {
+    if (cleanValue === null || cleanValue === undefined) return 'null';
+    if (isBoolean) {
+      return cleanValue === 1 || cleanValue === '1' || cleanValue === 'true' ? 'true' : 'false';
+    }
+    return cleanValue.toString();
+  }, [cleanValue, isBoolean]);
+
+  if (!isEditing) {
+    return (
+      <TableCell
+        ref={cellRef}
+        className={`${baseClasses} cursor-pointer hover:bg-muted/50`}
+        onClick={handleCellClick}
+      >
+        {displayValue}
+      </TableCell>
+    );
+  }
+
+  // Render boolean dropdown
+  if (isBoolean) {
+    return (
+      <TableCell className={`${baseClasses} p-0`} style={{ width }}>
+        <div className="w-full h-full">
+          <Select
+            value={displayValue}
+            onValueChange={handleChange}
+            defaultOpen={isEditing}
+          >
+            <SelectTrigger className="w-full h-9 min-w-0 rounded-none border-0 bg-orange-50 text-orange-900">
+              <SelectValue placeholder="Select value" />
+            </SelectTrigger>
+            <SelectContent className="min-w-[8rem]">
+              <SelectItem value="true">true</SelectItem>
+              <SelectItem value="false">false</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </TableCell>
+    );
+  }
+
+  // Render check constraint dropdown
+  if (allowedValues?.length > 0) {
+    return (
+      <TableCell className={`${baseClasses} p-0`} style={{ width }}>
+        <div className="w-full h-full">
+          <Select
+            value={value ?? allowedValues[0]}
+            onValueChange={handleChange}
+            defaultOpen={isEditing}
+          >
+            <SelectTrigger className="w-full h-9 min-w-0 rounded-none border-0 bg-orange-50 text-orange-900">
+              <SelectValue placeholder={`Select ${column}`} />
+            </SelectTrigger>
+            <SelectContent className="min-w-[8rem]">
+              {allowedValues.map(allowedValue => (
+                <SelectItem key={allowedValue} value={allowedValue}>
+                  {allowedValue}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </TableCell>
+    );
+  }
+
+  // Default input for other fields
+  return (
+    <TableCell className={`${baseClasses} p-0`} style={{ width }}>
+      <Input
+        ref={inputRef}
+        value={value ?? ''}
+        onChange={(e) => handleChange(e.target.value)}
+        className="w-full min-w-0 rounded-none border-0 bg-orange-50 text-orange-900"
+      />
+    </TableCell>
+  );
+}