@shotleybuilder/svelte-gridlite-kit 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,164 @@
+import type { PGlite } from "@electric-sql/pglite";
+export interface GridLiteProps {
+    /** PGLite database instance */
+    db: PGlite;
+    /** Table name to query (mutually exclusive with `query`) */
+    table?: string;
+    /** Raw SQL query (mutually exclusive with `table`) */
+    query?: string;
+    /** Grid configuration */
+    config?: GridConfig;
+    /** Feature flags */
+    features?: GridFeatures;
+    /** Styling */
+    classNames?: Partial<ClassNameMap>;
+    rowHeight?: RowHeight;
+    columnSpacing?: ColumnSpacing;
+    /** Callbacks */
+    onRowClick?: (row: Record<string, unknown>) => void;
+    onStateChange?: (state: GridState) => void;
+}
+export interface GridFeatures {
+    columnVisibility?: boolean;
+    columnResizing?: boolean;
+    columnReordering?: boolean;
+    filtering?: boolean;
+    sorting?: boolean;
+    sortingMode?: "header" | "control";
+    pagination?: boolean;
+    grouping?: boolean;
+    globalSearch?: boolean;
+    rowDetail?: boolean;
+    rowDetailMode?: "modal" | "drawer" | "inline";
+}
+export interface GridConfig {
+    /** Unique identifier for this grid instance (used for state persistence) */
+    id: string;
+    /** Column configuration overrides */
+    columns?: ColumnConfig[];
+    /** Default visible columns (by column name) */
+    defaultVisibleColumns?: string[];
+    /** Default column order (by column name) */
+    defaultColumnOrder?: string[];
+    /** Default column sizing */
+    defaultColumnSizing?: Record<string, number>;
+    /** Default filters applied on load */
+    defaultFilters?: FilterCondition[];
+    /** Default filter logic */
+    filterLogic?: FilterLogic;
+    /** Default sorting applied on load */
+    defaultSorting?: SortConfig[];
+    /** Default grouping applied on load */
+    defaultGrouping?: GroupConfig[];
+    /** Pagination config */
+    pagination?: {
+        pageSize: number;
+        pageSizeOptions?: number[];
+    };
+    /** Saved view presets */
+    presets?: ViewPreset[];
+}
+export interface ColumnConfig {
+    /** Column name (must match database column) */
+    name: string;
+    /** Display label (defaults to column name) */
+    label?: string;
+    /** Data type override (auto-detected from schema if not set) */
+    dataType?: ColumnDataType;
+    /** Options for 'select' type columns */
+    selectOptions?: {
+        value: string;
+        label: string;
+    }[];
+    /** Custom cell formatter */
+    format?: (value: unknown) => string;
+    /** Whether column is visible by default */
+    visible?: boolean;
+    /** Column width in pixels */
+    width?: number;
+    /** Minimum column width */
+    minWidth?: number;
+    /** Maximum column width */
+    maxWidth?: number;
+}
+/** Column data type — drives filter operator selection and value input rendering */
+export type ColumnDataType = "text" | "number" | "date" | "boolean" | "select";
+/** Schema-introspected column metadata (internal, from information_schema) */
+export interface ColumnMetadata {
+    name: string;
+    dataType: ColumnDataType;
+    postgresType: string;
+    nullable: boolean;
+    hasDefault: boolean;
+}
+export interface FilterCondition {
+    id: string;
+    field: string;
+    operator: FilterOperator;
+    value: unknown;
+}
+export type FilterOperator = "equals" | "not_equals" | "contains" | "not_contains" | "starts_with" | "ends_with" | "is_empty" | "is_not_empty" | "greater_than" | "less_than" | "greater_or_equal" | "less_or_equal" | "is_before" | "is_after";
+export type FilterLogic = "and" | "or";
+export interface SortConfig {
+    column: string;
+    direction: "asc" | "desc";
+}
+export interface GroupConfig {
+    column: string;
+    aggregations?: AggregationConfig[];
+}
+export interface AggregationConfig {
+    column: string;
+    function: AggregateFunction;
+    alias?: string;
+}
+export type AggregateFunction = "count" | "sum" | "avg" | "min" | "max";
+export interface ViewPreset {
+    id: string;
+    name: string;
+    description?: string;
+    filters?: FilterCondition[];
+    filterLogic?: FilterLogic;
+    sorting?: SortConfig[];
+    grouping?: GroupConfig[];
+    columnVisibility?: Record<string, boolean>;
+    columnOrder?: string[];
+}
+export interface GridState {
+    columnVisibility: Record<string, boolean>;
+    columnOrder: string[];
+    columnSizing: Record<string, number>;
+    filters: FilterCondition[];
+    filterLogic: FilterLogic;
+    sorting: SortConfig[];
+    grouping: GroupConfig[];
+    globalFilter: string;
+    pagination: {
+        page: number;
+        pageSize: number;
+        totalRows: number;
+        totalPages: number;
+    };
+}
+export type RowHeight = "short" | "medium" | "tall" | "extra_tall";
+export type ColumnSpacing = "narrow" | "normal" | "wide";
+export type ToolbarLayout = "airtable" | "excel" | "shadcn" | "aggrid";
+export interface ClassNameMap {
+    container: string;
+    table: string;
+    thead: string;
+    tbody: string;
+    tfoot: string;
+    tr: string;
+    th: string;
+    td: string;
+    pagination: string;
+    filterBar: string;
+    sortBar: string;
+    groupBar: string;
+}
+/** Parameterized SQL query — never construct SQL by string concatenation */
+export interface ParameterizedQuery {
+    sql: string;
+    params: unknown[];
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+// TypeScript types for @shotleybuilder/svelte-gridlite-kit
+export {};

package/dist/utils/filters.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Filter operator utilities
+ *
+ * Maps ColumnDataType to available filter operators for UI rendering.
+ */
+import type { FilterOperator, ColumnDataType } from '../types.js';
+export interface OperatorOption {
+    value: FilterOperator;
+    label: string;
+}
+/**
+ * Get operators available for a specific data type.
+ */
+export declare function getOperatorsForType(dataType?: ColumnDataType): OperatorOption[];

package/dist/utils/filters.js

@@ -0,0 +1,49 @@
+/**
+ * Filter operator utilities
+ *
+ * Maps ColumnDataType to available filter operators for UI rendering.
+ */
+const ALL_OPERATORS = [
+    { value: 'equals', label: 'equals' },
+    { value: 'not_equals', label: 'does not equal' },
+    { value: 'contains', label: 'contains' },
+    { value: 'not_contains', label: 'does not contain' },
+    { value: 'starts_with', label: 'starts with' },
+    { value: 'ends_with', label: 'ends with' },
+    { value: 'is_empty', label: 'is empty' },
+    { value: 'is_not_empty', label: 'is not empty' },
+    { value: 'greater_than', label: '>' },
+    { value: 'less_than', label: '<' },
+    { value: 'greater_or_equal', label: '>=' },
+    { value: 'less_or_equal', label: '<=' },
+    { value: 'is_before', label: 'is before' },
+    { value: 'is_after', label: 'is after' }
+];
+/**
+ * Get operators available for a specific data type.
+ */
+export function getOperatorsForType(dataType = 'text') {
+    switch (dataType) {
+        case 'text':
+            return ALL_OPERATORS.filter((op) => [
+                'equals', 'not_equals', 'contains', 'not_contains',
+                'starts_with', 'ends_with', 'is_empty', 'is_not_empty'
+            ].includes(op.value));
+        case 'number':
+            return ALL_OPERATORS.filter((op) => [
+                'equals', 'not_equals', 'greater_than', 'less_than',
+                'greater_or_equal', 'less_or_equal', 'is_empty', 'is_not_empty'
+            ].includes(op.value));
+        case 'date':
+            return ALL_OPERATORS.filter((op) => ['equals', 'not_equals', 'is_before', 'is_after', 'is_empty', 'is_not_empty'].includes(op.value));
+        case 'boolean':
+            return ALL_OPERATORS.filter((op) => ['equals', 'is_empty', 'is_not_empty'].includes(op.value));
+        case 'select':
+            return ALL_OPERATORS.filter((op) => ['equals', 'not_equals', 'is_empty', 'is_not_empty'].includes(op.value));
+        default:
+            return ALL_OPERATORS.filter((op) => [
+                'equals', 'not_equals', 'contains', 'not_contains',
+                'starts_with', 'ends_with', 'is_empty', 'is_not_empty'
+            ].includes(op.value));
+    }
+}

package/dist/utils/formatters.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Format date string to localized format
+ */
+export declare function formatDate(dateStr: string | Date, locale?: string): string;
+/**
+ * Format number as currency
+ */
+export declare function formatCurrency(value: number, currency?: string, locale?: string): string;
+/**
+ * Format number with locale-specific separators
+ */
+export declare function formatNumber(value: number, locale?: string): string;
+/**
+ * Format number as percentage
+ */
+export declare function formatPercent(value: number, decimals?: number, locale?: string): string;

package/dist/utils/formatters.js

@@ -0,0 +1,39 @@
+// Cell formatting utilities
+/**
+ * Format date string to localized format
+ */
+export function formatDate(dateStr, locale = 'en-GB') {
+    if (!dateStr)
+        return '-';
+    const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
+    return date.toLocaleDateString(locale, {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric'
+    });
+}
+/**
+ * Format number as currency
+ */
+export function formatCurrency(value, currency = 'GBP', locale = 'en-GB') {
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency
+    }).format(value);
+}
+/**
+ * Format number with locale-specific separators
+ */
+export function formatNumber(value, locale = 'en-GB') {
+    return new Intl.NumberFormat(locale).format(value);
+}
+/**
+ * Format number as percentage
+ */
+export function formatPercent(value, decimals = 1, locale = 'en-GB') {
+    return new Intl.NumberFormat(locale, {
+        style: 'percent',
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+    }).format(value / 100);
+}

package/dist/utils/fuzzy.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Fuzzy search utilities for column/field picker
+ */
+export interface FuzzyMatch {
+    /** The original string that was matched */
+    text: string;
+    /** The match score (higher = better match) */
+    score: number;
+    /** Indices of characters that matched in the original string */
+    matchedIndices: number[];
+}
+/**
+ * Perform fuzzy matching of a search pattern against a target string.
+ * Returns null if no match, or a FuzzyMatch object with score and matched indices.
+ *
+ * Scoring:
+ * - Consecutive matches score higher
+ * - Matches at word boundaries score higher
+ * - Matches at the start of the string score higher
+ * - Case-insensitive matching
+ *
+ * @param pattern - The search pattern (e.g., "cdt" to find "Created Date")
+ * @param target - The target string to search in
+ * @returns FuzzyMatch object or null if no match
+ */
+export declare function fuzzyMatch(pattern: string, target: string): FuzzyMatch | null;
+/**
+ * Search through an array of strings and return matches sorted by score.
+ *
+ * @param pattern - The search pattern
+ * @param items - Array of strings to search
+ * @param limit - Maximum number of results to return (default: all)
+ * @returns Array of FuzzyMatch objects sorted by score (highest first)
+ */
+export declare function fuzzySearch(pattern: string, items: string[], limit?: number): FuzzyMatch[];
+/**
+ * Highlight matched characters in a string by wrapping them in a specified tag.
+ * Returns an array of segments with matched/unmatched flags for rendering.
+ *
+ * @param text - The original text
+ * @param matchedIndices - Array of indices that matched
+ * @returns Array of text segments with isMatch flag
+ */
+export declare function highlightMatches(text: string, matchedIndices: number[]): {
+    text: string;
+    isMatch: boolean;
+}[];

package/dist/utils/fuzzy.js

@@ -0,0 +1,142 @@
+/**
+ * Fuzzy search utilities for column/field picker
+ */
+/**
+ * Perform fuzzy matching of a search pattern against a target string.
+ * Returns null if no match, or a FuzzyMatch object with score and matched indices.
+ *
+ * Scoring:
+ * - Consecutive matches score higher
+ * - Matches at word boundaries score higher
+ * - Matches at the start of the string score higher
+ * - Case-insensitive matching
+ *
+ * @param pattern - The search pattern (e.g., "cdt" to find "Created Date")
+ * @param target - The target string to search in
+ * @returns FuzzyMatch object or null if no match
+ */
+export function fuzzyMatch(pattern, target) {
+    if (!pattern) {
+        return { text: target, score: 0, matchedIndices: [] };
+    }
+    const patternLower = pattern.toLowerCase();
+    const targetLower = target.toLowerCase();
+    // Quick check: all pattern characters must exist in target
+    let patternIdx = 0;
+    for (let i = 0; i < targetLower.length && patternIdx < patternLower.length; i++) {
+        if (targetLower[i] === patternLower[patternIdx]) {
+            patternIdx++;
+        }
+    }
+    if (patternIdx !== patternLower.length) {
+        return null; // Not all pattern characters found
+    }
+    // Find optimal match positions using greedy algorithm
+    const matchedIndices = [];
+    let score = 0;
+    patternIdx = 0;
+    let lastMatchIdx = -1;
+    let consecutiveCount = 0;
+    for (let i = 0; i < targetLower.length && patternIdx < patternLower.length; i++) {
+        if (targetLower[i] === patternLower[patternIdx]) {
+            matchedIndices.push(i);
+            // Base score for match
+            score += 1;
+            // Bonus for consecutive matches
+            if (lastMatchIdx === i - 1) {
+                consecutiveCount++;
+                score += consecutiveCount * 2;
+            }
+            else {
+                consecutiveCount = 0;
+            }
+            // Bonus for match at start of string
+            if (i === 0) {
+                score += 10;
+            }
+            // Bonus for match at word boundary (after space, underscore, or uppercase)
+            if (i > 0) {
+                const prevChar = target[i - 1];
+                const currChar = target[i];
+                if (prevChar === ' ' || prevChar === '_' || prevChar === '-') {
+                    score += 5;
+                }
+                else if (currChar === currChar.toUpperCase() && currChar !== currChar.toLowerCase()) {
+                    // CamelCase boundary
+                    score += 3;
+                }
+            }
+            lastMatchIdx = i;
+            patternIdx++;
+        }
+    }
+    // Bonus for shorter target strings (prefer more specific matches)
+    score += Math.max(0, 20 - target.length);
+    // Bonus if pattern matches significant portion of target
+    const coverageRatio = pattern.length / target.length;
+    score += Math.floor(coverageRatio * 10);
+    return {
+        text: target,
+        score,
+        matchedIndices
+    };
+}
+/**
+ * Search through an array of strings and return matches sorted by score.
+ *
+ * @param pattern - The search pattern
+ * @param items - Array of strings to search
+ * @param limit - Maximum number of results to return (default: all)
+ * @returns Array of FuzzyMatch objects sorted by score (highest first)
+ */
+export function fuzzySearch(pattern, items, limit) {
+    if (!pattern) {
+        // Return all items with zero score when no pattern
+        const results = items.map((text) => ({ text, score: 0, matchedIndices: [] }));
+        return limit ? results.slice(0, limit) : results;
+    }
+    const matches = [];
+    for (const item of items) {
+        const match = fuzzyMatch(pattern, item);
+        if (match) {
+            matches.push(match);
+        }
+    }
+    // Sort by score descending
+    matches.sort((a, b) => b.score - a.score);
+    return limit ? matches.slice(0, limit) : matches;
+}
+/**
+ * Highlight matched characters in a string by wrapping them in a specified tag.
+ * Returns an array of segments with matched/unmatched flags for rendering.
+ *
+ * @param text - The original text
+ * @param matchedIndices - Array of indices that matched
+ * @returns Array of text segments with isMatch flag
+ */
+export function highlightMatches(text, matchedIndices) {
+    if (!matchedIndices.length) {
+        return [{ text, isMatch: false }];
+    }
+    const matchSet = new Set(matchedIndices);
+    const segments = [];
+    let currentSegment = '';
+    let currentIsMatch = matchSet.has(0);
+    for (let i = 0; i < text.length; i++) {
+        const isMatch = matchSet.has(i);
+        if (isMatch === currentIsMatch) {
+            currentSegment += text[i];
+        }
+        else {
+            if (currentSegment) {
+                segments.push({ text: currentSegment, isMatch: currentIsMatch });
+            }
+            currentSegment = text[i];
+            currentIsMatch = isMatch;
+        }
+    }
+    if (currentSegment) {
+        segments.push({ text: currentSegment, isMatch: currentIsMatch });
+    }
+    return segments;
+}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@shotleybuilder/svelte-gridlite-kit",
+  "version": "0.1.0",
+  "description": "A SQL-native data grid component for Svelte and SvelteKit, powered by PGLite",
+  "author": "Sertantai",
+  "license": "MIT",
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "datagrid",
+    "pglite",
+    "postgres",
+    "sql",
+    "data-table",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shotleybuilder/svelte-gridlite-kit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shotleybuilder/svelte-gridlite-kit/issues"
+  },
+  "homepage": "https://github.com/shotleybuilder/svelte-gridlite-kit#readme",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./styles": "./dist/styles/gridlite.css"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0 || ^5.0.0",
+    "@electric-sql/pglite": "^0.2.0"
+  },
+  "devDependencies": {
+    "@electric-sql/pglite": "^0.2.0",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/eslint": "^9.6.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.36.0",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
+    "publint": "^0.1.9",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.11",
+    "vitest": "^2.0.0"
+  }
+}