@shotleybuilder/svelte-gridlite-kit 0.1.0

package/dist/components/RowDetailModal.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isOpen?: boolean;
+        hasPrev?: boolean;
+        hasNext?: boolean;
+        onClose: () => void;
+        onPrev?: (() => void) | undefined;
+        onNext?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type RowDetailModalProps = typeof __propDef.props;
+export type RowDetailModalEvents = typeof __propDef.events;
+export type RowDetailModalSlots = typeof __propDef.slots;
+export default class RowDetailModal extends SvelteComponent<RowDetailModalProps, RowDetailModalEvents, RowDetailModalSlots> {
+}
+export {};

package/dist/components/SortBar.svelte

@@ -0,0 +1,232 @@
+<script>import SortConditionComponent from "./SortCondition.svelte";
+export let columns;
+export let columnConfigs = [];
+export let sorting = [];
+export let onSortingChange;
+export let isExpanded = false;
+export let onExpandedChange = void 0;
+function setExpanded(value) {
+  isExpanded = value;
+  if (onExpandedChange) {
+    onExpandedChange(value);
+  }
+}
+function addSort() {
+  const newSort = { column: "", direction: "asc" };
+  onSortingChange([...sorting, newSort]);
+  setExpanded(true);
+}
+function updateSort(index, column, direction) {
+  const newSorting = [...sorting];
+  newSorting[index] = { column, direction };
+  onSortingChange(newSorting);
+}
+function removeSort(index) {
+  const newSorting = sorting.filter((_, i) => i !== index);
+  onSortingChange(newSorting);
+  if (newSorting.length === 0) {
+    setExpanded(false);
+  }
+}
+function clearAllSorts() {
+  onSortingChange([]);
+  setExpanded(false);
+}
+$: availableColumnsForNew = columns.filter(
+  (col) => !sorting.some((s) => s.column === col.name)
+);
+$: hasSorts = sorting.length > 0;
+$: validSortCount = sorting.filter((s) => s.column !== "").length;
+$: canAddMore = availableColumnsForNew.length > 0;
+</script>
+
+<div class="sort-bar">
+	<button class="sort-toggle-btn" on:click={() => setExpanded(!isExpanded)}>
+		<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"
+			/>
+		</svg>
+		Sort
+		{#if validSortCount > 0}
+			<span class="sort-badge">{validSortCount}</span>
+		{/if}
+		<svg
+			class="chevron"
+			class:expanded={isExpanded}
+			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" />
+		</svg>
+	</button>
+
+	{#if isExpanded}
+		<div class="sort-panel">
+			{#if hasSorts}
+				<div class="sort-header">
+					<span class="sort-label">Sort by</span>
+					<button class="clear-all-btn" on:click={clearAllSorts}> Clear all </button>
+				</div>
+
+				<div class="sort-levels">
+					{#each sorting as sort, index (index)}
+						<SortConditionComponent
+							{sort}
+							{columns}
+							{columnConfigs}
+							existingSorts={sorting}
+							onUpdate={(column, direction) => updateSort(index, column, direction)}
+							onRemove={() => removeSort(index)}
+						/>
+					{/each}
+				</div>
+			{/if}
+
+			<button class="add-sort-btn" on:click={addSort} disabled={!canAddMore}>
+				<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+					/>
+				</svg>
+				{hasSorts ? 'Add another sort' : 'Add a sort'}
+			</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.sort-bar {
+		position: relative;
+	}
+
+	.sort-toggle-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #374151;
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.sort-toggle-btn:hover {
+		background: #f9fafb;
+		border-color: #9ca3af;
+	}
+
+	.sort-badge {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 1.25rem;
+		height: 1.25rem;
+		padding: 0 0.375rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: white;
+		background: #f59e0b;
+		border-radius: 0.75rem;
+	}
+
+	.chevron {
+		width: 1rem;
+		height: 1rem;
+		transition: transform 0.2s;
+	}
+
+	.chevron.expanded {
+		transform: rotate(180deg);
+	}
+
+	.sort-panel {
+		position: absolute;
+		top: calc(100% + 0.5rem);
+		left: 0;
+		z-index: 20;
+		min-width: 400px;
+		padding: 1rem;
+		background: white;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+	}
+
+	.sort-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 0.75rem;
+	}
+
+	.sort-label {
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: #374151;
+	}
+
+	.clear-all-btn {
+		font-size: 0.75rem;
+		color: #6b7280;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		transition: all 0.2s;
+	}
+
+	.clear-all-btn:hover {
+		color: #dc2626;
+		background: #fee2e2;
+	}
+
+	.sort-levels {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.add-sort-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #f59e0b;
+		background: white;
+		border: 1px dashed #f59e0b;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.2s;
+	}
+
+	.add-sort-btn:hover:not(:disabled) {
+		background: #fef3c7;
+		border-style: solid;
+	}
+
+	.add-sort-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.icon {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>

package/dist/components/SortBar.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+/**
+     * SortBar — Multi-column sort controls.
+     *
+     * Emits SortConfig[] which maps to ORDER BY in the query builder.
+     * Uses ColumnMetadata instead of TanStack ColumnDef.
+     */
+import type { SortConfig, ColumnMetadata, ColumnConfig } from '../types.js';
+declare const __propDef: {
+    props: {
+        columns: ColumnMetadata[];
+        columnConfigs?: ColumnConfig[];
+        sorting?: SortConfig[];
+        onSortingChange: (sorting: SortConfig[]) => void;
+        isExpanded?: boolean;
+        onExpandedChange?: ((expanded: boolean) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SortBarProps = typeof __propDef.props;
+export type SortBarEvents = typeof __propDef.events;
+export type SortBarSlots = typeof __propDef.slots;
+export default class SortBar extends SvelteComponent<SortBarProps, SortBarEvents, SortBarSlots> {
+}
+export {};

package/dist/components/SortCondition.svelte

@@ -0,0 +1,129 @@
+<script>export let sort;
+export let columns;
+export let columnConfigs = [];
+export let existingSorts;
+export let onUpdate;
+export let onRemove;
+const directionOptions = [
+  { value: "asc", label: "A \u2192 Z", icon: "\u2191" },
+  { value: "desc", label: "Z \u2192 A", icon: "\u2193" }
+];
+function getColumnLabel(col) {
+  const cfg = columnConfigs.find((c) => c.name === col.name);
+  return cfg?.label ?? col.name;
+}
+function handleColumnChange(event) {
+  const newColumn = event.target.value;
+  onUpdate(newColumn, sort.direction);
+}
+function handleDirectionChange(event) {
+  const direction = event.target.value;
+  onUpdate(sort.column, direction);
+}
+$: availableColumns = columns.filter((col) => {
+  return col.name === sort.column || !existingSorts.some((s) => s.column === col.name);
+});
+$: columnOptions = availableColumns.map((col) => ({
+  name: col.name,
+  label: getColumnLabel(col)
+}));
+</script>
+
+<div class="sort-condition">
+	<select class="field-select" value={sort.column} on:change={handleColumnChange}>
+		<option value="">Select field...</option>
+		{#each columnOptions as option}
+			<option value={option.name}>
+				{option.label}
+			</option>
+		{/each}
+	</select>
+
+	<select
+		class="direction-select"
+		value={sort.direction}
+		on:change={handleDirectionChange}
+		disabled={!sort.column}
+	>
+		{#each directionOptions as option}
+			<option value={option.value}>
+				{option.icon} {option.label}
+			</option>
+		{/each}
+	</select>
+
+	<button class="remove-btn" on:click={onRemove} title="Remove sort" type="button">
+		<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M6 18L18 6M6 6l12 12"
+			/>
+		</svg>
+	</button>
+</div>
+
+<style>
+	.sort-condition {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		background: #f9fafb;
+		border-radius: 0.375rem;
+	}
+
+	.field-select,
+	.direction-select {
+		padding: 0.375rem 0.75rem;
+		font-size: 0.875rem;
+		border: 1px solid #d1d5db;
+		border-radius: 0.375rem;
+		background: white;
+	}
+
+	.field-select {
+		flex: 1;
+		min-width: 150px;
+	}
+
+	.direction-select {
+		flex: 0.7;
+		min-width: 120px;
+	}
+
+	.direction-select:disabled {
+		background: #f3f4f6;
+		color: #9ca3af;
+		cursor: not-allowed;
+	}
+
+	.field-select:focus,
+	.direction-select:focus {
+		outline: none;
+		border-color: #f59e0b;
+		box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
+	}
+
+	.remove-btn {
+		flex-shrink: 0;
+		padding: 0.375rem;
+		background: none;
+		border: none;
+		color: #6b7280;
+		cursor: pointer;
+		border-radius: 0.25rem;
+		transition: all 0.2s;
+	}
+
+	.remove-btn:hover {
+		background: #fee2e2;
+		color: #dc2626;
+	}
+
+	.icon {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>

package/dist/components/SortCondition.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+/**
+     * SortCondition — Individual sort row with column picker and direction toggle.
+     *
+     * PGLite-native: uses ColumnMetadata instead of TanStack ColumnDef.
+     * Emits SortConfig (column + direction) instead of TanStack SortingState.
+     */
+import type { SortConfig, ColumnMetadata, ColumnConfig } from '../types.js';
+declare const __propDef: {
+    props: {
+        sort: SortConfig;
+        columns: ColumnMetadata[];
+        columnConfigs?: ColumnConfig[];
+        existingSorts: SortConfig[];
+        onUpdate: (column: string, direction: "asc" | "desc") => void;
+        onRemove: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SortConditionProps = typeof __propDef.props;
+export type SortConditionEvents = typeof __propDef.events;
+export type SortConditionSlots = typeof __propDef.slots;
+export default class SortCondition extends SvelteComponent<SortConditionProps, SortConditionEvents, SortConditionSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+export { default as GridLite } from "./GridLite.svelte";
+export { default as FilterBar } from "./components/FilterBar.svelte";
+export { default as FilterConditionRow } from "./components/FilterCondition.svelte";
+export { default as SortBar } from "./components/SortBar.svelte";
+export { default as SortCondition } from "./components/SortCondition.svelte";
+export { default as GroupBar } from "./components/GroupBar.svelte";
+export { default as CellContextMenu } from "./components/CellContextMenu.svelte";
+export { default as ColumnMenu } from "./components/ColumnMenu.svelte";
+export { default as ColumnPicker } from "./components/ColumnPicker.svelte";
+export { default as RowDetailModal } from "./components/RowDetailModal.svelte";
+export type { GridLiteProps, GridConfig, GridFeatures, GridState, ColumnConfig, ColumnDataType, ColumnMetadata, FilterCondition, FilterOperator, FilterLogic, SortConfig, GroupConfig, AggregationConfig, AggregateFunction, ViewPreset, ClassNameMap, RowHeight, ColumnSpacing, ParameterizedQuery, ToolbarLayout, } from "./types.js";
+export { quoteIdentifier, buildWhereClause, buildOrderByClause, buildGroupByClause, buildPaginationClause, buildGlobalSearchClause, buildGroupSummaryQuery, buildGroupCountQuery, buildGroupDetailQuery, buildQuery, buildCountQuery, } from "./query/builder.js";
+export type { QueryOptions, GroupSummaryOptions, GroupDetailOptions, } from "./query/builder.js";
+export { mapPostgresType, introspectTable, getColumnNames, } from "./query/schema.js";
+export { createLiveQueryStore, createLiveQueryStoreFromQuery, } from "./query/live.js";
+export type { LiveQueryState, LiveQueryStore, PGliteWithLive, } from "./query/live.js";
+export { runMigrations, getLatestVersion, isMigrated, } from "./state/migrations.js";
+export { saveView, loadView, loadViews, loadDefaultView, setDefaultView, deleteView, saveColumnState, loadColumnState, } from "./state/views.js";
+export { getOperatorsForType } from "./utils/filters.js";
+export type { OperatorOption } from "./utils/filters.js";
+export { fuzzyMatch, fuzzySearch, highlightMatches } from "./utils/fuzzy.js";
+export type { FuzzyMatch } from "./utils/fuzzy.js";
+export { formatDate, formatCurrency, formatNumber, formatPercent, } from "./utils/formatters.js";

package/dist/index.js

@@ -0,0 +1,29 @@
+// Public API for @shotleybuilder/svelte-gridlite-kit
+// Main component
+export { default as GridLite } from "./GridLite.svelte";
+// UI components
+export { default as FilterBar } from "./components/FilterBar.svelte";
+export { default as FilterConditionRow } from "./components/FilterCondition.svelte";
+export { default as SortBar } from "./components/SortBar.svelte";
+export { default as SortCondition } from "./components/SortCondition.svelte";
+export { default as GroupBar } from "./components/GroupBar.svelte";
+export { default as CellContextMenu } from "./components/CellContextMenu.svelte";
+export { default as ColumnMenu } from "./components/ColumnMenu.svelte";
+export { default as ColumnPicker } from "./components/ColumnPicker.svelte";
+export { default as RowDetailModal } from "./components/RowDetailModal.svelte";
+// Query builder
+export { quoteIdentifier, buildWhereClause, buildOrderByClause, buildGroupByClause, buildPaginationClause, buildGlobalSearchClause, buildGroupSummaryQuery, buildGroupCountQuery, buildGroupDetailQuery, buildQuery, buildCountQuery, } from "./query/builder.js";
+// Schema introspection
+export { mapPostgresType, introspectTable, getColumnNames, } from "./query/schema.js";
+// Live query store
+export { createLiveQueryStore, createLiveQueryStoreFromQuery, } from "./query/live.js";
+// State persistence — migrations
+export { runMigrations, getLatestVersion, isMigrated, } from "./state/migrations.js";
+// State persistence — views
+export { saveView, loadView, loadViews, loadDefaultView, setDefaultView, deleteView, saveColumnState, loadColumnState, } from "./state/views.js";
+// Filter utilities
+export { getOperatorsForType } from "./utils/filters.js";
+// Fuzzy search utilities
+export { fuzzyMatch, fuzzySearch, highlightMatches } from "./utils/fuzzy.js";
+// Formatters
+export { formatDate, formatCurrency, formatNumber, formatPercent, } from "./utils/formatters.js";

package/dist/query/builder.d.ts

@@ -0,0 +1,160 @@
+/**
+ * SQL Query Builder for GridLite
+ *
+ * Translates FilterCondition[], SortConfig[], GroupConfig[], and pagination
+ * into parameterized SQL queries. All user input is parameterized — never
+ * interpolated into SQL strings.
+ *
+ * Column names are validated against an allowlist (from schema introspection)
+ * to prevent SQL injection via identifier manipulation.
+ */
+import type { FilterCondition, FilterLogic, SortConfig, GroupConfig, ParameterizedQuery } from "../types.js";
+/**
+ * Validate and quote a column name as a SQL identifier.
+ * Throws if the name is not a valid identifier.
+ *
+ * When `allowedColumns` is provided, also checks the name is in the allowlist.
+ */
+export declare function quoteIdentifier(name: string, allowedColumns?: string[]): string;
+/**
+ * Build a WHERE clause from filter conditions.
+ *
+ * Returns `{ sql: string, params: unknown[] }` where sql is empty string
+ * if there are no valid conditions.
+ *
+ * @param conditions - Filter conditions from the UI
+ * @param logic - 'and' or 'or' between conditions
+ * @param paramOffset - Starting parameter index (for $1, $2, ...) when composing with other clauses
+ * @param allowedColumns - Optional allowlist of column names from schema introspection
+ */
+export declare function buildWhereClause(conditions: FilterCondition[], logic?: FilterLogic, paramOffset?: number, allowedColumns?: string[]): ParameterizedQuery;
+/**
+ * Build an ORDER BY clause from sort configurations.
+ */
+export declare function buildOrderByClause(sorting: SortConfig[], allowedColumns?: string[]): string;
+/**
+ * Build GROUP BY clause and adjust SELECT for grouped queries.
+ *
+ * Returns the GROUP BY clause and the SELECT column list.
+ */
+export declare function buildGroupByClause(grouping: GroupConfig[], allowedColumns?: string[]): {
+    selectColumns: string;
+    groupBy: string;
+};
+/**
+ * Build LIMIT/OFFSET clause for pagination.
+ */
+export declare function buildPaginationClause(page: number, pageSize: number): string;
+/**
+ * Build a WHERE-compatible clause for global search across text columns.
+ *
+ * Generates `(col1::text ILIKE '%' || $N || '%' OR col2::text ILIKE ...)`
+ * using a single parameter for the search term. The `::text` cast allows
+ * searching non-text columns (numbers, dates, booleans) as strings.
+ *
+ * @param searchTerm - The search string
+ * @param textColumns - Column names to search across
+ * @param paramOffset - Starting parameter index
+ * @param allowedColumns - Optional allowlist
+ */
+export declare function buildGlobalSearchClause(searchTerm: string, textColumns: string[], paramOffset?: number, allowedColumns?: string[]): ParameterizedQuery;
+export interface GroupSummaryOptions {
+    /** Table name */
+    table: string;
+    /** Group columns (max 3) */
+    grouping: GroupConfig[];
+    /** Filter conditions to apply before grouping */
+    filters?: FilterCondition[];
+    /** Filter logic */
+    filterLogic?: FilterLogic;
+    /** Allowed column names */
+    allowedColumns?: string[];
+    /** Global search term */
+    globalSearch?: string;
+    /** Columns to search for global search */
+    searchColumns?: string[];
+    /** Sorting for the group results */
+    sorting?: SortConfig[];
+    /** Pagination for groups */
+    page?: number;
+    /** Page size for groups */
+    pageSize?: number;
+}
+/**
+ * Build a query that returns distinct group values with COUNT(*) and
+ * optional aggregations. Used for the group header rows.
+ *
+ * Example output for grouping by department with avg(salary):
+ *   SELECT "department", COUNT(*) AS "_count", AVG("salary") AS "avg_salary"
+ *   FROM "employees" WHERE ... GROUP BY "department" ORDER BY "department"
+ */
+export declare function buildGroupSummaryQuery(options: GroupSummaryOptions): ParameterizedQuery;
+/**
+ * Build a count query for group summaries (how many groups exist).
+ */
+export declare function buildGroupCountQuery(options: GroupSummaryOptions): ParameterizedQuery;
+export interface GroupDetailOptions {
+    /** Table name */
+    table: string;
+    /** Values to match for parent groups: [{ column: "department", value: "Engineering" }] */
+    groupValues: {
+        column: string;
+        value: unknown;
+    }[];
+    /** Filter conditions */
+    filters?: FilterCondition[];
+    /** Filter logic */
+    filterLogic?: FilterLogic;
+    /** Sorting for child rows */
+    sorting?: SortConfig[];
+    /** Allowed column names */
+    allowedColumns?: string[];
+    /** Global search term */
+    globalSearch?: string;
+    /** Columns to search */
+    searchColumns?: string[];
+}
+/**
+ * Build a query that returns the detail rows for an expanded group.
+ *
+ * Adds WHERE constraints for each group column value on top of any
+ * existing filters. Used when a user expands a group header.
+ *
+ * Example: grouping by department, expanded "Engineering":
+ *   SELECT * FROM "employees" WHERE ... AND "department" = $N ORDER BY ...
+ */
+export declare function buildGroupDetailQuery(options: GroupDetailOptions): ParameterizedQuery;
+export interface QueryOptions {
+    /** Table name to query */
+    table: string;
+    /** Filter conditions */
+    filters?: FilterCondition[];
+    /** Filter logic (and/or) */
+    filterLogic?: FilterLogic;
+    /** Sort configuration */
+    sorting?: SortConfig[];
+    /** Group configuration */
+    grouping?: GroupConfig[];
+    /** Current page (0-indexed) */
+    page?: number;
+    /** Page size */
+    pageSize?: number;
+    /** Allowed column names (from schema introspection) */
+    allowedColumns?: string[];
+    /** Global search term (ILIKE across searchColumns) */
+    globalSearch?: string;
+    /** Columns to search for global search (defaults to all allowedColumns) */
+    searchColumns?: string[];
+}
+/**
+ * Build a complete parameterized SELECT query from grid state.
+ *
+ * This is the main entry point for the query builder. It composes
+ * WHERE, ORDER BY, GROUP BY, and LIMIT/OFFSET clauses into a single query.
+ */
+export declare function buildQuery(options: QueryOptions): ParameterizedQuery;
+/**
+ * Build a COUNT query for pagination total.
+ * Uses the same filters but no sorting/grouping/pagination.
+ */
+export declare function buildCountQuery(options: QueryOptions): ParameterizedQuery;