@shotleybuilder/svelte-gridlite-kit 0.1.0

package/dist/GridLite.svelte

@@ -0,0 +1,1361 @@
+<script>import { onMount, onDestroy } from "svelte";
+import { introspectTable, getColumnNames } from "./query/schema.js";
+import {
+  buildQuery,
+  buildCountQuery,
+  buildGroupSummaryQuery,
+  buildGroupCountQuery,
+  buildGroupDetailQuery
+} from "./query/builder.js";
+import {
+  createLiveQueryStore
+} from "./query/live.js";
+import { runMigrations } from "./state/migrations.js";
+import FilterBar from "./components/FilterBar.svelte";
+import SortBar from "./components/SortBar.svelte";
+import GroupBar from "./components/GroupBar.svelte";
+import CellContextMenu from "./components/CellContextMenu.svelte";
+import ColumnMenu from "./components/ColumnMenu.svelte";
+import ColumnPicker from "./components/ColumnPicker.svelte";
+import RowDetailModal from "./components/RowDetailModal.svelte";
+export let db;
+export let table = void 0;
+export let query = void 0;
+export let config = void 0;
+export let features = {};
+export let classNames = {};
+export let rowHeight = "medium";
+export let columnSpacing = "normal";
+export let toolbarLayout = "airtable";
+export let onRowClick = void 0;
+export let onStateChange = void 0;
+let columns = [];
+let allowedColumns = [];
+let initialized = false;
+let error = null;
+let filters = config?.defaultFilters ?? [];
+let filterLogic = config?.filterLogic ?? "and";
+let sorting = config?.defaultSorting ?? [];
+let grouping = config?.defaultGrouping ?? [];
+let globalFilter = "";
+let page = 0;
+let pageSize = config?.pagination?.pageSize ?? 25;
+let totalRows = 0;
+let searchDebounceTimer;
+let filterExpanded = false;
+let sortExpanded = false;
+let groupExpanded = false;
+let contextMenu = null;
+let columnMenuOpen = null;
+let showRowHeightMenu = false;
+let showColumnSpacingMenu = false;
+let showColumnPicker = false;
+const rowHeightOptions = ["short", "medium", "tall", "extra_tall"];
+const columnSpacingOptions = ["narrow", "normal", "wide"];
+let columnVisibility = {};
+let columnOrder = config?.defaultColumnOrder ?? [];
+let draggedColumnId = null;
+let dragOverColumnId = null;
+let columnSizing = config?.defaultColumnSizing ?? {};
+let resizingColumn = null;
+let resizeStartX = 0;
+let resizeStartWidth = 0;
+const COL_MIN_WIDTH = 62;
+const COL_MAX_WIDTH = 1e3;
+const COL_DEFAULT_WIDTH = 180;
+let groupData = [];
+let expandedGroups = /* @__PURE__ */ new Set();
+let totalGroups = 0;
+let groupLoading = /* @__PURE__ */ new Set();
+let rowDetailOpen = false;
+let rowDetailIndex = -1;
+let store = null;
+let storeState = {
+  rows: [],
+  fields: [],
+  loading: true,
+  error: null
+};
+$: totalPages = pageSize > 0 ? Math.ceil(totalRows / pageSize) : 0;
+$: containerClass = [
+  "gridlite-container",
+  `gridlite-row-${rowHeight}`,
+  `gridlite-spacing-${columnSpacing}`,
+  `gridlite-layout-${toolbarLayout}`,
+  classNames.container ?? ""
+].filter(Boolean).join(" ");
+$: visibleColumns = columns.filter((col) => {
+  if (col.name in columnVisibility) {
+    return columnVisibility[col.name];
+  }
+  if (config?.defaultVisibleColumns) {
+    return config.defaultVisibleColumns.includes(col.name);
+  }
+  return true;
+});
+$: orderedColumns = (() => {
+  const order = columnOrder.length > 0 ? columnOrder : config?.defaultColumnOrder ?? [];
+  if (order.length > 0) {
+    return [...visibleColumns].sort((a, b) => {
+      const ai = order.indexOf(a.name);
+      const bi = order.indexOf(b.name);
+      if (ai === -1 && bi === -1) return 0;
+      if (ai === -1) return 1;
+      if (bi === -1) return -1;
+      return ai - bi;
+    });
+  }
+  return visibleColumns;
+})();
+$: validGrouping = grouping.filter((g) => g.column !== "");
+$: isGrouped = validGrouping.length > 0;
+$: nonGroupedColumns = isGrouped ? orderedColumns.filter((col) => !validGrouping.some((g) => g.column === col.name)) : orderedColumns;
+function groupKey(group) {
+  return Object.entries(group.values).map(([col, val]) => `${col}=${val === null || val === void 0 ? "__null__" : String(val)}`).join("::");
+}
+async function init() {
+  try {
+    await runMigrations(db);
+    if (table) {
+      columns = await introspectTable(db, table);
+      allowedColumns = columns.map((c) => c.name);
+      if (columns.length === 0) {
+        error = `Table "${table}" not found or has no columns`;
+        return;
+      }
+    }
+    initialized = true;
+    await rebuildQuery();
+  } catch (err) {
+    error = err instanceof Error ? err.message : String(err);
+  }
+}
+async function rebuildQuery() {
+  if (!initialized) return;
+  if (store) {
+    await store.destroy();
+    store = null;
+  }
+  let sql;
+  let params = [];
+  if (query) {
+    sql = query;
+  } else if (table) {
+    if (isGrouped) {
+      await rebuildGroupedQuery();
+      return;
+    }
+    const usePagination = features.pagination !== false;
+    const built = buildQuery({
+      table,
+      filters,
+      filterLogic,
+      sorting,
+      page: usePagination ? page : void 0,
+      pageSize: usePagination ? pageSize : void 0,
+      allowedColumns,
+      globalSearch: globalFilter || void 0
+    });
+    sql = built.sql;
+    params = built.params;
+    if (usePagination) {
+      await updateTotalCount();
+    }
+  } else {
+    error = "Either `table` or `query` prop is required";
+    return;
+  }
+  groupData = [];
+  expandedGroups = /* @__PURE__ */ new Set();
+  totalGroups = 0;
+  store = createLiveQueryStore(db, sql, params);
+  store.subscribe((state) => {
+    storeState = state;
+  });
+}
+function cleanAgg(g) {
+  return {
+    ...g,
+    aggregations: g.aggregations?.filter((a) => a.column !== "") ?? void 0
+  };
+}
+async function rebuildGroupedQuery() {
+  if (!table) return;
+  try {
+    const usePagination = features.pagination !== false;
+    const topGroupConfig = cleanAgg(validGrouping[0]);
+    const summaryQuery = buildGroupSummaryQuery({
+      table,
+      grouping: [topGroupConfig],
+      filters,
+      filterLogic,
+      allowedColumns,
+      globalSearch: globalFilter || void 0,
+      sorting,
+      page: usePagination ? page : void 0,
+      pageSize: usePagination ? pageSize : void 0
+    });
+    const summaryResult = await db.query(
+      summaryQuery.sql,
+      summaryQuery.params
+    );
+    if (usePagination) {
+      const countQuery = buildGroupCountQuery({
+        table,
+        grouping: [topGroupConfig],
+        filters,
+        filterLogic,
+        allowedColumns,
+        globalSearch: globalFilter || void 0
+      });
+      const countResult = await db.query(
+        countQuery.sql,
+        countQuery.params
+      );
+      totalGroups = parseInt(countResult.rows[0]?.total ?? "0", 10);
+      totalRows = totalGroups;
+    }
+    const topCol = validGrouping[0].column;
+    const newGroupData = summaryResult.rows.map((row) => {
+      const values = { [topCol]: row[topCol] };
+      const newGroup = {
+        values,
+        summary: { ...row },
+        count: Number(row._count ?? 0),
+        depth: 0,
+        subGroups: null,
+        children: null
+      };
+      const key = groupKey(newGroup);
+      const wasExpanded = expandedGroups.has(key);
+      const existing = groupData.find((g) => groupKey(g) === key);
+      if (wasExpanded && existing) {
+        newGroup.subGroups = existing.subGroups;
+        newGroup.children = existing.children;
+      }
+      return newGroup;
+    });
+    groupData = newGroupData;
+    for (const group of groupData) {
+      const key = groupKey(group);
+      if (expandedGroups.has(key) && group.subGroups === null && group.children === null) {
+        await fetchGroupChildren(group);
+      }
+    }
+  } catch (err) {
+    error = err instanceof Error ? err.message : String(err);
+  }
+}
+async function fetchGroupChildren(group) {
+  if (!table) return;
+  const key = groupKey(group);
+  groupLoading = /* @__PURE__ */ new Set([...groupLoading, key]);
+  try {
+    const nextDepth = group.depth + 1;
+    const parentValues = Object.entries(group.values).map(([column, value]) => ({
+      column,
+      value
+    }));
+    if (nextDepth < validGrouping.length) {
+      const subGroupConfig = cleanAgg(validGrouping[nextDepth]);
+      const summaryQuery = buildGroupSummaryQuery({
+        table,
+        grouping: [subGroupConfig],
+        filters: [
+          ...filters,
+          // Add parent group constraints as equals filters
+          ...parentValues.map((pv) => ({
+            id: `_group_${pv.column}`,
+            field: pv.column,
+            operator: pv.value === null ? "is_empty" : "equals",
+            value: pv.value
+          }))
+        ],
+        filterLogic,
+        allowedColumns,
+        globalSearch: globalFilter || void 0,
+        sorting
+      });
+      const result = await db.query(
+        summaryQuery.sql,
+        summaryQuery.params
+      );
+      const subCol = validGrouping[nextDepth].column;
+      const subGroups = result.rows.map((row) => {
+        const subValues = {
+          ...group.values,
+          [subCol]: row[subCol]
+        };
+        return {
+          values: subValues,
+          summary: { ...row },
+          count: Number(row._count ?? 0),
+          depth: nextDepth,
+          subGroups: null,
+          children: null
+        };
+      });
+      updateGroupInTree(key, { subGroups });
+    } else {
+      const detailQuery = buildGroupDetailQuery({
+        table,
+        groupValues: parentValues,
+        filters,
+        filterLogic,
+        sorting,
+        allowedColumns,
+        globalSearch: globalFilter || void 0
+      });
+      const result = await db.query(
+        detailQuery.sql,
+        detailQuery.params
+      );
+      updateGroupInTree(key, { children: result.rows });
+    }
+  } catch (err) {
+    console.error("Failed to fetch group children:", err);
+  } finally {
+    const next = new Set(groupLoading);
+    next.delete(key);
+    groupLoading = next;
+  }
+}
+function updateGroupInTree(targetKey, updates) {
+  groupData = groupData.map((g) => updateGroupNode(g, targetKey, updates));
+}
+function updateGroupNode(node, targetKey, updates) {
+  if (groupKey(node) === targetKey) {
+    return { ...node, ...updates };
+  }
+  if (node.subGroups) {
+    return {
+      ...node,
+      subGroups: node.subGroups.map((sg) => updateGroupNode(sg, targetKey, updates))
+    };
+  }
+  return node;
+}
+async function updateTotalCount() {
+  if (!table) return;
+  try {
+    const countQuery = buildCountQuery({
+      table,
+      filters,
+      filterLogic,
+      allowedColumns,
+      globalSearch: globalFilter || void 0
+    });
+    const result = await db.query(countQuery.sql, countQuery.params);
+    totalRows = parseInt(result.rows[0]?.total ?? "0", 10);
+  } catch {
+    totalRows = 0;
+  }
+}
+export function setFilters(newFilters, logic) {
+  filters = newFilters;
+  if (logic) filterLogic = logic;
+  page = 0;
+  rebuildQuery();
+  notifyStateChange();
+}
+export function setSorting(newSorting) {
+  sorting = newSorting;
+  rebuildQuery();
+  notifyStateChange();
+}
+export function setGrouping(newGrouping) {
+  const prevValid = grouping.filter((g) => g.column !== "");
+  grouping = newGrouping;
+  const nowValid = newGrouping.filter((g) => g.column !== "");
+  const changed = prevValid.length !== nowValid.length || prevValid.some((g, i) => g.column !== nowValid[i]?.column);
+  if (changed) {
+    expandedGroups = /* @__PURE__ */ new Set();
+    groupData = [];
+    page = 0;
+  }
+  rebuildQuery();
+  notifyStateChange();
+}
+export function setPage(newPage) {
+  page = Math.max(0, Math.min(newPage, totalPages - 1));
+  rebuildQuery();
+  notifyStateChange();
+}
+export function setPageSize(newPageSize) {
+  pageSize = newPageSize;
+  page = 0;
+  rebuildQuery();
+  notifyStateChange();
+}
+export function setGlobalFilter(search) {
+  globalFilter = search;
+  page = 0;
+  rebuildQuery();
+  notifyStateChange();
+}
+function notifyStateChange() {
+  if (onStateChange) {
+    onStateChange({
+      columnVisibility: Object.fromEntries(visibleColumns.map((c) => [c.name, true])),
+      columnOrder: columnOrder.length > 0 ? columnOrder : orderedColumns.map((c) => c.name),
+      columnSizing,
+      filters,
+      filterLogic,
+      sorting,
+      grouping,
+      globalFilter,
+      pagination: { page, pageSize, totalRows, totalPages }
+    });
+  }
+}
+async function toggleGroupExpand(group) {
+  const key = groupKey(group);
+  const next = new Set(expandedGroups);
+  if (next.has(key)) {
+    next.delete(key);
+    expandedGroups = next;
+    updateGroupInTree(key, { subGroups: null, children: null });
+  } else {
+    next.add(key);
+    expandedGroups = next;
+    await fetchGroupChildren(group);
+  }
+}
+function getGroupLabel(group) {
+  const groupConfig = validGrouping[group.depth];
+  if (!groupConfig) return "";
+  const val = group.values[groupConfig.column];
+  return val === null || val === void 0 ? "(Empty)" : String(val);
+}
+function getGroupAggregations(group) {
+  const aggs = [];
+  const groupConfig = validGrouping[group.depth];
+  if (groupConfig?.aggregations) {
+    for (const agg of groupConfig.aggregations) {
+      if (agg.column === "") continue;
+      const alias = agg.alias ?? `${agg.function}_${agg.column}`;
+      const rawVal = group.summary[alias];
+      if (rawVal !== null && rawVal !== void 0) {
+        const label = `${agg.function.charAt(0).toUpperCase() + agg.function.slice(1)} ${agg.column}`;
+        const value = typeof rawVal === "number" ? rawVal.toLocaleString() : String(rawVal);
+        aggs.push({ label, value });
+      }
+    }
+  }
+  return aggs;
+}
+function handleFiltersChange(newFilters) {
+  setFilters(newFilters, filterLogic);
+}
+function handleLogicChange(newLogic) {
+  filterLogic = newLogic;
+  page = 0;
+  rebuildQuery();
+  notifyStateChange();
+}
+function handleSortingChange(newSorting) {
+  setSorting(newSorting);
+}
+function handleGroupingChange(newGrouping) {
+  setGrouping(newGrouping);
+}
+function handleGlobalSearchInput(event) {
+  const value = event.target.value;
+  globalFilter = value;
+  clearTimeout(searchDebounceTimer);
+  searchDebounceTimer = setTimeout(() => {
+    page = 0;
+    rebuildQuery();
+    notifyStateChange();
+  }, 300);
+}
+function clearGlobalSearch() {
+  globalFilter = "";
+  clearTimeout(searchDebounceTimer);
+  page = 0;
+  rebuildQuery();
+  notifyStateChange();
+}
+function handleCellContextMenu(event, row, col) {
+  event.preventDefault();
+  const colConfig = config?.columns?.find((c) => c.name === col.name);
+  contextMenu = {
+    x: event.clientX,
+    y: event.clientY,
+    value: row[col.name],
+    columnName: col.name,
+    columnLabel: colConfig?.label ?? col.name,
+    isNumeric: col.dataType === "number"
+  };
+}
+function handleContextFilterEquals(columnName, value) {
+  const id = `ctx-${Date.now()}`;
+  const newFilter = { id, field: columnName, operator: "equals", value };
+  setFilters([...filters, newFilter], filterLogic);
+  filterExpanded = true;
+}
+function handleContextFilterNotEquals(columnName, value) {
+  const id = `ctx-${Date.now()}`;
+  const newFilter = { id, field: columnName, operator: "not_equals", value };
+  setFilters([...filters, newFilter], filterLogic);
+  filterExpanded = true;
+}
+function handleContextFilterGreaterThan(columnName, value) {
+  const id = `ctx-${Date.now()}`;
+  const newFilter = { id, field: columnName, operator: "greater_than", value };
+  setFilters([...filters, newFilter], filterLogic);
+  filterExpanded = true;
+}
+function handleContextFilterLessThan(columnName, value) {
+  const id = `ctx-${Date.now()}`;
+  const newFilter = { id, field: columnName, operator: "less_than", value };
+  setFilters([...filters, newFilter], filterLogic);
+  filterExpanded = true;
+}
+function handleColumnMenuSort(columnName, direction) {
+  const existing = sorting.findIndex((s) => s.column === columnName);
+  const newSorting = [...sorting];
+  if (existing >= 0) {
+    newSorting[existing] = { column: columnName, direction };
+  } else {
+    newSorting.push({ column: columnName, direction });
+  }
+  setSorting(newSorting);
+}
+function handleColumnMenuFilter(columnName) {
+  const id = `colmenu-${Date.now()}`;
+  const newFilter = { id, field: columnName, operator: "contains", value: "" };
+  setFilters([...filters, newFilter], filterLogic);
+  filterExpanded = true;
+}
+function handleColumnMenuGroup(columnName) {
+  if (!grouping.some((g) => g.column === columnName)) {
+    setGrouping([...grouping, { column: columnName }]);
+    groupExpanded = true;
+  }
+}
+function handleColumnMenuHide(columnName) {
+  toggleColumnVisibility(columnName);
+}
+function toggleColumnVisibility(columnName) {
+  const current = isColumnVisible(columnName);
+  columnVisibility = { ...columnVisibility, [columnName]: !current };
+  notifyStateChange();
+}
+function setColumnVisibility(columnName, visible) {
+  columnVisibility = { ...columnVisibility, [columnName]: visible };
+  notifyStateChange();
+}
+function toggleAllColumns(show) {
+  const newVisibility = {};
+  for (const col of columns) {
+    newVisibility[col.name] = show;
+  }
+  columnVisibility = newVisibility;
+  notifyStateChange();
+}
+function handleColumnOrderChange(newOrder) {
+  columnOrder = newOrder;
+  notifyStateChange();
+}
+function getColumnLabel(col) {
+  const cfg = config?.columns?.find((c) => c.name === col.name);
+  return cfg?.label ?? col.name;
+}
+function isColumnVisible(columnName) {
+  if (columnName in columnVisibility) {
+    return columnVisibility[columnName];
+  }
+  if (config?.defaultVisibleColumns) {
+    return config.defaultVisibleColumns.includes(columnName);
+  }
+  return true;
+}
+function closeViewMenus(event) {
+  const target = event.target;
+  if (!target.closest(".gridlite-view-control")) {
+    showRowHeightMenu = false;
+    showColumnSpacingMenu = false;
+    showColumnPicker = false;
+  }
+}
+function getColumnWidth(columnName) {
+  if (columnName in columnSizing) return columnSizing[columnName];
+  const colConfig = config?.columns?.find((c) => c.name === columnName);
+  return colConfig?.width ?? COL_DEFAULT_WIDTH;
+}
+function handleResizeStart(event, columnName) {
+  event.preventDefault();
+  event.stopPropagation();
+  resizingColumn = columnName;
+  resizeStartX = "touches" in event ? event.touches[0].clientX : event.clientX;
+  resizeStartWidth = getColumnWidth(columnName);
+  window.addEventListener("mousemove", handleResizeMove);
+  window.addEventListener("mouseup", handleResizeEnd);
+  window.addEventListener("touchmove", handleResizeMove);
+  window.addEventListener("touchend", handleResizeEnd);
+}
+function handleResizeMove(event) {
+  if (!resizingColumn) return;
+  const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+  const delta = clientX - resizeStartX;
+  const newWidth = Math.max(COL_MIN_WIDTH, Math.min(COL_MAX_WIDTH, resizeStartWidth + delta));
+  columnSizing = { ...columnSizing, [resizingColumn]: newWidth };
+}
+function handleResizeEnd() {
+  resizingColumn = null;
+  window.removeEventListener("mousemove", handleResizeMove);
+  window.removeEventListener("mouseup", handleResizeEnd);
+  window.removeEventListener("touchmove", handleResizeMove);
+  window.removeEventListener("touchend", handleResizeEnd);
+  notifyStateChange();
+}
+function initColumnOrder() {
+  if (columnOrder.length === 0 && columns.length > 0) {
+    columnOrder = columns.map((c) => c.name);
+  }
+}
+function handleDragStart(event, columnName) {
+  if (features.columnReordering === false) return;
+  draggedColumnId = columnName;
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", columnName);
+  }
+}
+function handleDragOver(event, columnName) {
+  if (features.columnReordering === false || !draggedColumnId) return;
+  event.preventDefault();
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = "move";
+  }
+  dragOverColumnId = columnName;
+}
+function handleDrop(event, targetColumnId) {
+  if (features.columnReordering === false) return;
+  event.preventDefault();
+  if (!draggedColumnId || draggedColumnId === targetColumnId) {
+    draggedColumnId = null;
+    dragOverColumnId = null;
+    return;
+  }
+  initColumnOrder();
+  const oldIndex = columnOrder.indexOf(draggedColumnId);
+  const newIndex = columnOrder.indexOf(targetColumnId);
+  if (oldIndex !== -1 && newIndex !== -1) {
+    const newColumnOrder = [...columnOrder];
+    const [moved] = newColumnOrder.splice(oldIndex, 1);
+    newColumnOrder.splice(newIndex, 0, moved);
+    columnOrder = newColumnOrder;
+    notifyStateChange();
+  }
+  draggedColumnId = null;
+  dragOverColumnId = null;
+}
+function handleDragEnd() {
+  draggedColumnId = null;
+  dragOverColumnId = null;
+}
+function openRowDetail(index) {
+  rowDetailIndex = index;
+  rowDetailOpen = true;
+}
+function closeRowDetail() {
+  rowDetailOpen = false;
+  rowDetailIndex = -1;
+}
+function prevRowDetail() {
+  if (rowDetailIndex > 0) {
+    rowDetailIndex--;
+  }
+}
+function nextRowDetail() {
+  if (rowDetailIndex < storeState.rows.length - 1) {
+    rowDetailIndex++;
+  }
+}
+$: rowDetailRow = rowDetailIndex >= 0 ? storeState.rows[rowDetailIndex] ?? null : null;
+function flattenGroupTree(groups) {
+  const items = [];
+  for (const group of groups) {
+    items.push({ type: "group", group });
+    const key = groupKey(group);
+    if (expandedGroups.has(key)) {
+      if (group.subGroups) {
+        items.push(...flattenGroupTree(group.subGroups));
+      }
+      if (group.children) {
+        for (const row of group.children) {
+          items.push({ type: "child", row, depth: group.depth + 1 });
+        }
+      }
+    }
+  }
+  return items;
+}
+$: flatGroupItems = isGrouped ? flattenGroupTree(groupData) : [];
+onMount(() => {
+  init();
+});
+onDestroy(() => {
+  clearTimeout(searchDebounceTimer);
+  if (resizingColumn) {
+    handleResizeEnd();
+  }
+  if (store) {
+    store.destroy();
+  }
+});
+</script>
+
+<svelte:window on:click={closeViewMenus} />
+
+<div class={containerClass}>
+	{#if error}
+		<div class="gridlite-empty">{error}</div>
+	{:else if !initialized || storeState.loading}
+		<div class="gridlite-loading">Loading...</div>
+	{:else if storeState.error}
+		<div class="gridlite-empty">Error: {storeState.error.message}</div>
+	{:else}
+		{#if table && toolbarLayout !== 'aggrid'}
+			<div class="gridlite-toolbar">
+				<!-- Column Visibility (data control) -->
+				{#if features.columnVisibility}
+					<div class="gridlite-toolbar-columns gridlite-view-control">
+						<button
+							class="gridlite-view-control-btn"
+							class:active={showColumnPicker}
+							on:click|stopPropagation={() => {
+								showColumnPicker = !showColumnPicker;
+								showRowHeightMenu = false;
+								showColumnSpacingMenu = false;
+							}}
+							type="button"
+							title="Columns"
+						>
+							<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+							</svg>
+							<span class="gridlite-btn-label">Columns</span>
+						</button>
+						<ColumnPicker
+							{columns}
+							columnConfigs={config?.columns ?? []}
+							{columnVisibility}
+							{columnOrder}
+							isOpen={showColumnPicker}
+							defaultVisibleColumns={config?.defaultVisibleColumns}
+							onVisibilityChange={setColumnVisibility}
+							onToggleAll={toggleAllColumns}
+							onOrderChange={handleColumnOrderChange}
+						/>
+					</div>
+				{/if}
+
+				<!-- Filter -->
+				{#if features.filtering}
+					<div class="gridlite-toolbar-filter">
+						<FilterBar
+							{db}
+							{table}
+							{columns}
+							columnConfigs={config?.columns ?? []}
+							{allowedColumns}
+							conditions={filters}
+							onConditionsChange={handleFiltersChange}
+							logic={filterLogic}
+							onLogicChange={handleLogicChange}
+							isExpanded={filterExpanded}
+							onExpandedChange={(expanded) => (filterExpanded = expanded)}
+						/>
+					</div>
+				{/if}
+
+				<!-- Group -->
+				{#if features.grouping}
+					<div class="gridlite-toolbar-group">
+						<GroupBar
+							{columns}
+							columnConfigs={config?.columns ?? []}
+							{grouping}
+							onGroupingChange={handleGroupingChange}
+							isExpanded={groupExpanded}
+							onExpandedChange={(expanded) => (groupExpanded = expanded)}
+						/>
+					</div>
+				{/if}
+
+				<!-- Sort -->
+				{#if features.sorting}
+					<div class="gridlite-toolbar-sort">
+						<SortBar
+							{columns}
+							columnConfigs={config?.columns ?? []}
+							{sorting}
+							onSortingChange={handleSortingChange}
+							isExpanded={sortExpanded}
+							onExpandedChange={(expanded) => (sortExpanded = expanded)}
+						/>
+					</div>
+				{/if}
+
+				<!-- View Controls (Row Height + Column Spacing) -->
+				<div class="gridlite-toolbar-view gridlite-view-controls">
+					<div class="gridlite-view-control">
+						<button
+							class="gridlite-view-control-btn"
+							class:active={showRowHeightMenu}
+							on:click|stopPropagation={() => {
+								showRowHeightMenu = !showRowHeightMenu;
+								showColumnSpacingMenu = false;
+								showColumnPicker = false;
+							}}
+							type="button"
+							title="Row height"
+						>
+							<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+							</svg>
+						</button>
+						{#if showRowHeightMenu}
+							<div class="gridlite-view-dropdown">
+								<div class="gridlite-view-dropdown-title">Row Height</div>
+								{#each rowHeightOptions as rh}
+									<button
+										class="gridlite-view-dropdown-item"
+										class:selected={rowHeight === rh}
+										on:click={() => {
+											rowHeight = rh;
+											showRowHeightMenu = false;
+										}}
+										type="button"
+									>
+										{rh === 'extra_tall' ? 'Extra Tall' : rh.charAt(0).toUpperCase() + rh.slice(1)}
+									</button>
+								{/each}
+							</div>
+						{/if}
+					</div>
+					<div class="gridlite-view-control">
+						<button
+							class="gridlite-view-control-btn"
+							class:active={showColumnSpacingMenu}
+							on:click|stopPropagation={() => {
+								showColumnSpacingMenu = !showColumnSpacingMenu;
+								showRowHeightMenu = false;
+								showColumnPicker = false;
+							}}
+							type="button"
+							title="Column spacing"
+						>
+							<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 4v16M15 4v16M4 9h16M4 15h16" />
+							</svg>
+						</button>
+						{#if showColumnSpacingMenu}
+							<div class="gridlite-view-dropdown">
+								<div class="gridlite-view-dropdown-title">Column Spacing</div>
+								{#each columnSpacingOptions as sp}
+									<button
+										class="gridlite-view-dropdown-item"
+										class:selected={columnSpacing === sp}
+										on:click={() => {
+											columnSpacing = sp;
+											showColumnSpacingMenu = false;
+										}}
+										type="button"
+									>
+										{sp.charAt(0).toUpperCase() + sp.slice(1)}
+									</button>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Search -->
+				{#if features.globalSearch}
+					<div class="gridlite-toolbar-search">
+						<div class="gridlite-search">
+							<svg class="gridlite-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+							</svg>
+							<input
+								class="gridlite-search-input"
+								type="text"
+								placeholder="Search all columns..."
+								value={globalFilter}
+								on:input={handleGlobalSearchInput}
+							/>
+							{#if globalFilter}
+								<button class="gridlite-search-clear" on:click={clearGlobalSearch} type="button" title="Clear search">
+									<svg width="14" height="14" 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>
+							{/if}
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		{#if table && toolbarLayout === 'aggrid'}
+			<!-- AG Grid layout: sidebar on right, minimal toolbar on top -->
+			<!-- TODO(#1): aggrid layout is experimental — not production-ready. Needs debugging. -->
+			<div class="gridlite-toolbar gridlite-toolbar-aggrid-top">
+				{#if features.globalSearch}
+					<div class="gridlite-toolbar-search">
+						<div class="gridlite-search">
+							<svg class="gridlite-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+							</svg>
+							<input
+								class="gridlite-search-input"
+								type="text"
+								placeholder="Search all columns..."
+								value={globalFilter}
+								on:input={handleGlobalSearchInput}
+							/>
+							{#if globalFilter}
+								<button class="gridlite-search-clear" on:click={clearGlobalSearch} type="button" title="Clear search">
+									<svg width="14" height="14" 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>
+							{/if}
+						</div>
+					</div>
+				{/if}
+				{#if features.sorting}
+					<div class="gridlite-toolbar-sort">
+						<SortBar
+							{columns}
+							columnConfigs={config?.columns ?? []}
+							{sorting}
+							onSortingChange={handleSortingChange}
+							isExpanded={sortExpanded}
+							onExpandedChange={(expanded) => (sortExpanded = expanded)}
+						/>
+					</div>
+				{/if}
+				{#if features.grouping}
+					<div class="gridlite-toolbar-group">
+						<GroupBar
+							{columns}
+							columnConfigs={config?.columns ?? []}
+							{grouping}
+							onGroupingChange={handleGroupingChange}
+							isExpanded={groupExpanded}
+							onExpandedChange={(expanded) => (groupExpanded = expanded)}
+						/>
+					</div>
+				{/if}
+				<div class="gridlite-toolbar-view gridlite-view-controls">
+					<div class="gridlite-view-control">
+						<button
+							class="gridlite-view-control-btn"
+							class:active={showRowHeightMenu}
+							on:click|stopPropagation={() => {
+								showRowHeightMenu = !showRowHeightMenu;
+								showColumnSpacingMenu = false;
+							}}
+							type="button"
+							title="Row height"
+						>
+							<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+							</svg>
+						</button>
+						{#if showRowHeightMenu}
+							<div class="gridlite-view-dropdown">
+								<div class="gridlite-view-dropdown-title">Row Height</div>
+								{#each rowHeightOptions as rh}
+									<button
+										class="gridlite-view-dropdown-item"
+										class:selected={rowHeight === rh}
+										on:click={() => { rowHeight = rh; showRowHeightMenu = false; }}
+										type="button"
+									>{rh === 'extra_tall' ? 'Extra Tall' : rh.charAt(0).toUpperCase() + rh.slice(1)}</button>
+								{/each}
+							</div>
+						{/if}
+					</div>
+					<div class="gridlite-view-control">
+						<button
+							class="gridlite-view-control-btn"
+							class:active={showColumnSpacingMenu}
+							on:click|stopPropagation={() => {
+								showColumnSpacingMenu = !showColumnSpacingMenu;
+								showRowHeightMenu = false;
+							}}
+							type="button"
+							title="Column spacing"
+						>
+							<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 4v16M15 4v16M4 9h16M4 15h16" />
+							</svg>
+						</button>
+						{#if showColumnSpacingMenu}
+							<div class="gridlite-view-dropdown">
+								<div class="gridlite-view-dropdown-title">Column Spacing</div>
+								{#each columnSpacingOptions as sp}
+									<button
+										class="gridlite-view-dropdown-item"
+										class:selected={columnSpacing === sp}
+										on:click={() => { columnSpacing = sp; showColumnSpacingMenu = false; }}
+										type="button"
+									>{sp.charAt(0).toUpperCase() + sp.slice(1)}</button>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		{/if}
+
+		<div class="gridlite-body" class:gridlite-aggrid-body={toolbarLayout === 'aggrid'}>
+		<div class="gridlite-table-wrap">
+		<table
+			class={`gridlite-table ${classNames.table ?? ''}`}
+			style={features.columnResizing ? 'table-layout: fixed;' : ''}
+		>
+			<thead class={`gridlite-thead ${classNames.thead ?? ''}`}>
+				<tr class={classNames.tr ?? ''}>
+					{#each (isGrouped ? nonGroupedColumns : orderedColumns) as col}
+						<th
+							class={`gridlite-th gridlite-th-interactive ${classNames.th ?? ''}`}
+							class:dragging={draggedColumnId === col.name}
+							class:drag-over={dragOverColumnId === col.name && draggedColumnId !== col.name}
+							style={features.columnResizing ? `width: ${getColumnWidth(col.name)}px;` : ''}
+							on:dragover={(e) => handleDragOver(e, col.name)}
+							on:drop={(e) => handleDrop(e, col.name)}
+						>
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<div
+								class="gridlite-th-content"
+								draggable={features.columnReordering ?? false}
+								on:dragstart={(e) => handleDragStart(e, col.name)}
+								on:dragend={handleDragEnd}
+								style={features.columnReordering ? 'cursor: grab;' : ''}
+							>
+								<span class="gridlite-th-label">
+									{#if config?.columns}
+										{@const colConfig = config.columns.find((c) => c.name === col.name)}
+										{colConfig?.label ?? col.name}
+									{:else}
+										{col.name}
+									{/if}
+								</span>
+								{#if table}
+									<button
+										class="gridlite-th-menu-btn"
+										on:click|stopPropagation={() =>
+											(columnMenuOpen = columnMenuOpen === col.name ? null : col.name)}
+										title="Column options"
+										type="button"
+									>
+										<svg width="14" height="14" 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>
+									<ColumnMenu
+										columnName={col.name}
+										isOpen={columnMenuOpen === col.name}
+										{sorting}
+										canSort={features.sorting ?? false}
+										canFilter={features.filtering ?? false}
+										canGroup={features.grouping ?? false}
+										onSort={handleColumnMenuSort}
+										onFilter={handleColumnMenuFilter}
+										onGroup={handleColumnMenuGroup}
+										onHide={handleColumnMenuHide}
+										onClose={() => (columnMenuOpen = null)}
+									/>
+								{/if}
+							</div>
+							{#if features.columnResizing}
+								<!-- svelte-ignore a11y-no-static-element-interactions -->
+								<div
+									class="gridlite-resize-handle"
+									class:resizing={resizingColumn === col.name}
+									on:mousedown={(e) => handleResizeStart(e, col.name)}
+									on:touchstart={(e) => handleResizeStart(e, col.name)}
+								/>
+							{/if}
+						</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody class={`gridlite-tbody ${classNames.tbody ?? ''}`}>
+				{#if isGrouped}
+					<!-- Grouped view: flattened tree of group headers and child rows -->
+					{#if flatGroupItems.length === 0}
+						<tr>
+							<td colspan={nonGroupedColumns.length} class="gridlite-empty">
+								No data
+							</td>
+						</tr>
+					{:else}
+						{#each flatGroupItems as item}
+							{#if item.type === 'group'}
+								{@const group = item.group}
+								{@const key = groupKey(group)}
+								{@const expanded = expandedGroups.has(key)}
+								{@const loading = groupLoading.has(key)}
+								{@const aggs = getGroupAggregations(group)}
+								<!-- Group header row -->
+								<tr
+									class="gridlite-group-row"
+									on:click={() => toggleGroupExpand(group)}
+									role="button"
+									tabindex={0}
+									on:keydown={(e) => {
+										if (e.key === 'Enter' || e.key === ' ') {
+											e.preventDefault();
+											toggleGroupExpand(group);
+										}
+									}}
+								>
+									<td colspan={nonGroupedColumns.length} class="gridlite-group-td">
+										<div class="gridlite-group-header gridlite-group-level-{Math.min(group.depth, 2)}">
+											<svg
+												class="gridlite-group-chevron"
+												class:expanded
+												width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+											>
+												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+											</svg>
+											<span class="gridlite-group-label">{getGroupLabel(group)}</span>
+											<span class="gridlite-group-count">{group.count}</span>
+											{#each aggs as agg}
+												<span class="gridlite-group-agg" title={agg.label}>{agg.label}: {agg.value}</span>
+											{/each}
+											{#if loading}
+												<span class="gridlite-group-loading">Loading...</span>
+											{/if}
+										</div>
+									</td>
+								</tr>
+							{:else}
+								{@const row = item.row}
+								<!-- Child data row -->
+								<tr
+									class={`gridlite-tr gridlite-group-child ${classNames.tr ?? ''}`}
+									on:click={() => {
+										onRowClick?.(row);
+									}}
+									role={onRowClick ? 'button' : undefined}
+									tabindex={onRowClick ? 0 : undefined}
+									on:keydown={(e) => {
+										if ((e.key === 'Enter' || e.key === ' ')) {
+											e.preventDefault();
+											onRowClick?.(row);
+										}
+									}}
+								>
+									{#each nonGroupedColumns as col}
+										<td
+											class={`gridlite-td ${classNames.td ?? ''}`}
+											on:contextmenu={(e) => handleCellContextMenu(e, row, col)}
+										>
+											{#if config?.columns}
+												{@const colConfig = config.columns.find((c) => c.name === col.name)}
+												{#if colConfig?.format}
+													{colConfig.format(row[col.name])}
+												{:else}
+													{row[col.name] ?? ''}
+												{/if}
+											{:else}
+												{row[col.name] ?? ''}
+											{/if}
+										</td>
+									{/each}
+								</tr>
+							{/if}
+						{/each}
+					{/if}
+				{:else}
+					<!-- Flat (non-grouped) view -->
+					{#if storeState.rows.length === 0}
+						<tr>
+							<td colspan={orderedColumns.length} class="gridlite-empty">
+								No data
+							</td>
+						</tr>
+					{:else}
+						{#each storeState.rows as row, rowIndex}
+							<tr
+								class={`gridlite-tr ${classNames.tr ?? ''}`}
+								on:click={() => {
+									if (features.rowDetail) {
+										openRowDetail(rowIndex);
+									}
+									onRowClick?.(row);
+								}}
+								role={onRowClick || features.rowDetail ? 'button' : undefined}
+								tabindex={onRowClick || features.rowDetail ? 0 : undefined}
+								on:keydown={(e) => {
+									if ((e.key === 'Enter' || e.key === ' ')) {
+										e.preventDefault();
+										if (features.rowDetail) openRowDetail(rowIndex);
+										onRowClick?.(row);
+									}
+								}}
+							>
+								{#each orderedColumns as col}
+									<td
+										class={`gridlite-td ${classNames.td ?? ''}`}
+										on:contextmenu={(e) => handleCellContextMenu(e, row, col)}
+									>
+										{#if config?.columns}
+											{@const colConfig = config.columns.find((c) => c.name === col.name)}
+											{#if colConfig?.format}
+												{colConfig.format(row[col.name])}
+											{:else}
+												{row[col.name] ?? ''}
+											{/if}
+										{:else}
+											{row[col.name] ?? ''}
+										{/if}
+									</td>
+								{/each}
+							</tr>
+						{/each}
+					{/if}
+				{/if}
+			</tbody>
+		</table>
+		</div>
+
+		{#if features.pagination !== false && totalRows > 0}
+			<div class={`gridlite-pagination ${classNames.pagination ?? ''}`}>
+				<span>
+					Page {page + 1} of {totalPages} ({totalRows} {isGrouped ? 'groups' : 'rows'})
+				</span>
+				<div class="gridlite-pagination-controls">
+					<select
+						class="gridlite-page-size-select"
+						value={pageSize}
+						on:change={(e) => setPageSize(Number(e.currentTarget.value))}
+					>
+						{#each config?.pagination?.pageSizeOptions ?? [10, 25, 50, 100] as size}
+							<option value={size}>{size} / page</option>
+						{/each}
+					</select>
+					<button disabled={page === 0} on:click={() => setPage(0)}>
+						First
+					</button>
+					<button disabled={page === 0} on:click={() => setPage(page - 1)}>
+						Prev
+					</button>
+					<button disabled={page >= totalPages - 1} on:click={() => setPage(page + 1)}>
+						Next
+					</button>
+					<button disabled={page >= totalPages - 1} on:click={() => setPage(totalPages - 1)}>
+						Last
+					</button>
+				</div>
+			</div>
+		{/if}
+
+		{#if toolbarLayout === 'aggrid'}
+			<!-- AG Grid sidebar: columns + filters on right -->
+			<!-- TODO(#1): aggrid sidebar is experimental — not production-ready. Needs debugging. -->
+			<aside class="gridlite-aggrid-sidebar">
+				{#if features.columnVisibility}
+					<div class="gridlite-aggrid-sidebar-section">
+						<div class="gridlite-aggrid-sidebar-header">Columns</div>
+						<ColumnPicker
+							{columns}
+							columnConfigs={config?.columns ?? []}
+							{columnVisibility}
+							{columnOrder}
+							isOpen={true}
+							defaultVisibleColumns={config?.defaultVisibleColumns}
+							onVisibilityChange={setColumnVisibility}
+							onToggleAll={toggleAllColumns}
+							onOrderChange={handleColumnOrderChange}
+						/>
+					</div>
+				{/if}
+				{#if features.filtering}
+					<div class="gridlite-aggrid-sidebar-section">
+						<div class="gridlite-aggrid-sidebar-header">Filters</div>
+						<FilterBar
+							{db}
+							table={table ?? ''}
+							{columns}
+							columnConfigs={config?.columns ?? []}
+							{allowedColumns}
+							conditions={filters}
+							onConditionsChange={handleFiltersChange}
+							logic={filterLogic}
+							onLogicChange={handleLogicChange}
+							isExpanded={true}
+							onExpandedChange={() => {}}
+						/>
+					</div>
+				{/if}
+			</aside>
+		{/if}
+		</div>
+
+		{#if contextMenu}
+			<CellContextMenu
+				x={contextMenu.x}
+				y={contextMenu.y}
+				value={contextMenu.value}
+				columnName={contextMenu.columnName}
+				columnLabel={contextMenu.columnLabel}
+				isNumeric={contextMenu.isNumeric}
+				onFilterEquals={handleContextFilterEquals}
+				onFilterNotEquals={handleContextFilterNotEquals}
+				onFilterGreaterThan={handleContextFilterGreaterThan}
+				onFilterLessThan={handleContextFilterLessThan}
+				onClose={() => (contextMenu = null)}
+			/>
+		{/if}
+
+		{#if features.rowDetail}
+			<RowDetailModal
+				isOpen={rowDetailOpen}
+				hasPrev={rowDetailIndex > 0}
+				hasNext={rowDetailIndex < storeState.rows.length - 1}
+				onClose={closeRowDetail}
+				onPrev={prevRowDetail}
+				onNext={nextRowDetail}
+			>
+				{#if rowDetailRow}
+					<dl class="gridlite-row-detail">
+						{#each orderedColumns as col}
+							<div class="gridlite-row-detail-field">
+								<dt>
+									{#if config?.columns}
+										{@const colConfig = config.columns.find((c) => c.name === col.name)}
+										{colConfig?.label ?? col.name}
+									{:else}
+										{col.name}
+									{/if}
+								</dt>
+								<dd>
+									{#if config?.columns}
+										{@const colConfig = config.columns.find((c) => c.name === col.name)}
+										{#if colConfig?.format}
+											{colConfig.format(rowDetailRow[col.name])}
+										{:else}
+											{rowDetailRow[col.name] ?? '—'}
+										{/if}
+									{:else}
+										{rowDetailRow[col.name] ?? '—'}
+									{/if}
+								</dd>
+							</div>
+						{/each}
+					</dl>
+				{/if}
+			</RowDetailModal>
+		{/if}
+	{/if}
+</div>