gridsmith-ui 0.21.0 → 0.22.0

package/dist/data-grid.js

@@ -1,13 +1,16 @@
-import { inferColumnKinds, CardValue } from './chunk-JN37OVTP.js';
-import { useShellPreferences, TableCardCtx } from './chunk-TKVTZWBN.js';
+import { useCardsSwitch, CARDS_BELOW, inferColumnKinds, CardValue } from './chunk-IVCVNAXG.js';
+import { usePagination, useWholeListCheck, pagerPart, Pagination, Input } from './chunk-2RV23OBK.js';
+import { TableCardCtx } from './chunk-RG4KUCRS.js';
+import { useShellPreferences } from './chunk-7TOJ4G7S.js';
 import { useBreakpoint } from './chunk-CRQ6KCRD.js';
-import { useTextOverflow, Tooltip } from './chunk-ILIODA7W.js';
+import { useGridKeyboard, FormChangeCtx } from './chunk-RT7RYGC3.js';
+import { useTextOverflow, Tooltip } from './chunk-CXMV7SXJ.js';
 import './chunk-7Q46JXSK.js';
 import './chunk-WH2FUFAC.js';
 import { Icon } from './chunk-4LDYR7QP.js';
 import { cn } from './chunk-M2QRNBDQ.js';
-import { useState, useMemo, useCallback } from 'react';
-import { useReactTable, getPaginationRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { useState, useMemo, useCallback, useRef, useEffect, useLayoutEffect } from 'react';
+import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function TruncCell({ children, lines }) {
@@ -17,21 +20,26 @@ function TruncCell({ children, lines }) {
   if (!isTruncated) return cell;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: cell });
 }
+var cellKey = (p) => p.r < 0 ? `h:${p.c}` : `${p.r}:${p.c}`;
+var SAVED_TICK_MS = 1500;
 function DataGrid({
   data,
   columns,
-  pageSize = 10,
+  pageSize,
   editable = false,
   onCellEdit,
   mobileBreakpoint: mobileBreakpointProp,
+  cardsBelow = CARDS_BELOW,
+  pager: pagerProp,
+  "aria-label": ariaLabel,
   className
 }) {
   const preferences = useShellPreferences();
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
-  const isMobile = useBreakpoint(mobileBreakpoint);
+  const narrowScreen = useBreakpoint(mobileBreakpoint);
+  const { cards: isMobile, rootRef } = useCardsSwitch(editable ? false : narrowScreen, editable ? 0 : cardsBelow);
   const [sorting, setSorting] = useState([]);
-  const [editCell, setEditCell] = useState(null);
-  const [editValue, setEditValue] = useState("");
+  const [editing, setEditing] = useState(null);
   const columnKeys = useMemo(() => columns.map((c) => c.id ?? ("accessorKey" in c ? String(c.accessorKey) : "")).filter(Boolean), [columns]);
   const inferredKinds = useMemo(
     () => inferColumnKinds(data, columnKeys),
@@ -41,74 +49,151 @@ function DataGrid({
     (colId, meta) => meta?.kind ?? inferredKinds.get(colId),
     [inferredKinds]
   );
-  const tableColumns = useMemo(() => {
-    if (!editable) return columns;
-    return columns.map((col) => ({
-      ...col,
-      cell: (info) => {
-        const rowIdx = info.row.index;
-        const colId = info.column.id;
-        const isEditing = editCell?.row === rowIdx && editCell?.col === colId;
-        if (isEditing) {
-          return /* @__PURE__ */ jsx(
-            "input",
-            {
-              autoFocus: true,
-              className: cn(
-                "w-full h-full bg-transparent text-sm text-[var(--ds-text-primary)]",
-                "outline-none border-none px-0"
-              ),
-              value: editValue,
-              onChange: (e) => setEditValue(e.target.value),
-              onBlur: () => {
-                onCellEdit?.(rowIdx, colId, editValue);
-                setEditCell(null);
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  onCellEdit?.(rowIdx, colId, editValue);
-                  setEditCell(null);
-                } else if (e.key === "Escape") {
-                  setEditCell(null);
-                }
-              }
-            }
-          );
-        }
-        const rendered = typeof col.cell === "function" ? col.cell(info) : info.getValue();
-        return /* @__PURE__ */ jsx(
-          "span",
-          {
-            onDoubleClick: () => {
-              setEditCell({ row: rowIdx, col: colId });
-              setEditValue(String(info.getValue() ?? ""));
-            },
-            className: "cursor-default",
-            children: rendered
-          }
-        );
-      }
-    }));
-  }, [columns, editable, editCell, editValue, onCellEdit]);
   const table = useReactTable({
     data,
-    columns: tableColumns,
+    columns,
     state: { sorting },
-    onSortingChange: setSorting,
+    onSortingChange: (updater) => {
+      setSorting(updater);
+      pagerProp?.setPage(1);
+    },
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    initialState: { pagination: { pageSize } }
+    getSortedRowModel: getSortedRowModel()
   });
-  const handlePageChange = useCallback(
-    (page) => table.setPageIndex(page),
-    [table]
-  );
-  const pageCount = table.getPageCount();
-  const currentPage = table.getState().pagination.pageIndex;
+  const sortedRows = table.getRowModel().rows;
+  const ownPager = usePagination(sortedRows, { pageSize, resetOn: sorting });
+  const pager = pagerProp ?? ownPager;
+  useWholeListCheck("DataGrid", data.length, pagerProp);
+  const rows = pagerPart(sortedRows, pager);
+  const leafColumns = table.getVisibleLeafColumns();
+  const headerText = (id) => {
+    const header = leafColumns.find((c) => c.id === id)?.columnDef.header;
+    return typeof header === "string" ? header : id;
+  };
+  const gridRef = useRef(null);
+  const [activeId, setActiveId] = useState({ row: null, c: 0 });
+  const lastRow = rows.length - 1;
+  const rowAt = (id) => id === null ? -1 : rows.findIndex((row) => row.id === id);
+  const idAt = (p) => ({ row: p.r < 0 ? null : rows[p.r]?.id ?? null, c: p.c });
+  const current = { r: Math.min(rowAt(activeId.row), lastRow), c: Math.min(activeId.c, Math.max(0, leafColumns.length - 1)) };
+  const setActive = (p) => setActiveId(idAt(p));
+  const move = (p, e) => {
+    if (e.altKey) return null;
+    const toCorner = e.ctrlKey || e.metaKey;
+    switch (e.key) {
+      case "ArrowRight":
+        return !toCorner && p.c < leafColumns.length - 1 ? { ...p, c: p.c + 1 } : null;
+      case "ArrowLeft":
+        return !toCorner && p.c > 0 ? { ...p, c: p.c - 1 } : null;
+      case "ArrowDown":
+        return !toCorner && p.r < lastRow ? { ...p, r: p.r + 1 } : null;
+      case "ArrowUp":
+        return !toCorner && p.r > -1 ? { ...p, r: p.r - 1 } : null;
+      case "Home":
+        return toCorner ? { r: -1, c: 0 } : { ...p, c: 0 };
+      case "End":
+        return toCorner ? { r: lastRow, c: leafColumns.length - 1 } : { ...p, c: leafColumns.length - 1 };
+      default:
+        return null;
+    }
+  };
+  const ended = useRef(false);
+  const startEdit = (p) => {
+    const row = rows[p.r];
+    const column = leafColumns[p.c];
+    if (!row || !column || column.columnDef.meta?.editable === false) return;
+    ended.current = false;
+    setActive(p);
+    const text = String(row.getValue(column.id) ?? "");
+    setEditing({ row: row.id, c: p.c, value: text, was: text });
+  };
+  const grid = useGridKeyboard({
+    container: gridRef,
+    active: current,
+    setActive,
+    keyOf: cellKey,
+    move,
+    onActivate: (p, e) => {
+      if (p.r < 0) {
+        if (leafColumns[p.c]?.getCanSort()) leafColumns[p.c].toggleSorting();
+      } else if (e.key === "Enter") startEdit(p);
+    },
+    modifierKeys: true
+  });
+  const onGridKeyDown = (e) => {
+    if (e.key === "F2" && !editing && current.r >= 0 && e.target instanceof HTMLElement && e.target.getAttribute("data-grid-key") === cellKey(current)) {
+      e.preventDefault();
+      startEdit(current);
+      return;
+    }
+    grid.onKeyDown(e);
+  };
+  const onGridFocus = (e) => {
+    const key = e.target instanceof HTMLElement ? e.target.getAttribute("data-grid-key") : null;
+    if (!key) return;
+    const [r, c] = key.startsWith("h:") ? [-1, Number(key.slice(2))] : key.split(":").map(Number);
+    if (Number.isFinite(r) && Number.isFinite(c) && cellKey(current) !== key) setActive({ r, c });
+  };
+  const [saved, setSaved] = useState(null);
+  useEffect(() => {
+    if (!saved) return;
+    const t = setTimeout(() => setSaved((s) => s && s.n === saved.n ? null : s), SAVED_TICK_MS);
+    return () => clearTimeout(t);
+  }, [saved]);
+  const heard = useRef(0);
+  const refocus = useRef(null);
+  useLayoutEffect(() => {
+    const want = refocus.current;
+    if (!want) return;
+    const r = rowAt(want.row);
+    if (r < 0) {
+      const all = sortedRows.findIndex((row) => row.id === want.row);
+      if (all >= 0 && pager.style === "pagination") {
+        const page = Math.floor(all / pager.pageSize) + 1;
+        if (page !== pager.page) {
+          pager.setPage(page);
+          return;
+        }
+      }
+      refocus.current = null;
+      return;
+    }
+    refocus.current = null;
+    grid.focus({ r, c: want.c });
+  });
+  const finishEdit = (commit, focusBack) => {
+    if (!editing || ended.current) return;
+    ended.current = true;
+    const r = rowAt(editing.row);
+    const row = rows[r];
+    const column = leafColumns[editing.c];
+    const cell = { row: editing.row, c: editing.c };
+    setEditing(null);
+    if (focusBack) {
+      setActiveId(cell);
+      refocus.current = cell;
+    }
+    if (!commit || !row || !column || editing.value === editing.was) return;
+    const meta = column.columnDef.meta;
+    const done = (ok) => {
+      heard.current += 1;
+      setSaved({ ...cell, row: editing.row, n: heard.current, ok });
+    };
+    const result = onCellEdit?.(row.index, column.id, meta?.parse ? meta.parse(editing.value) : editing.value);
+    if (result && typeof result.then === "function") result.then(() => done(true), () => done(false));
+    else done(true);
+  };
+  const control = data.length > 0 ? /* @__PURE__ */ jsx(Pagination, { ...pager.props }) : null;
+  const setRoot = (node) => {
+    rootRef.current = node;
+  };
+  const withControl = (list) => /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
+    list,
+    control
+  ] });
   if (isMobile) {
-    return /* @__PURE__ */ jsxs("div", { "data-ds-list": "", className: cn("space-y-ds-3", className), children: [
-      /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-ds-3", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+    return withControl(
+      /* @__PURE__ */ jsx("div", { "data-ds-list": "", className: "space-y-ds-3", children: /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-ds-3", children: rows.map((row) => /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
@@ -122,209 +207,164 @@ function DataGrid({
           ] }, cell.id))
         },
         row.id
-      )) }) }),
-      pageCount > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
-        /* @__PURE__ */ jsxs("span", { className: "text-[var(--ds-text-muted)]", children: [
-          "Page ",
-          currentPage + 1,
-          " of ",
-          pageCount
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1", children: [
-          /* @__PURE__ */ jsx(PagerBtn, { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 0, label: "Prev" }),
-          /* @__PURE__ */ jsx(PagerBtn, { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage >= pageCount - 1, label: "Next" })
-        ] })
-      ] })
-    ] });
+      )) }) }) })
+    );
   }
-  return /* @__PURE__ */ jsxs("div", { "data-ds-list": "", className: cn("space-y-ds-3", className), children: [
-    /* @__PURE__ */ jsx(
-      "div",
+  const sortIcons = (sorted) => /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-col -space-y-ds-1.5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(Icon, { name: "chevron-up", size: 10, className: sorted === "asc" ? "text-[var(--ds-accent-primary)]" : "opacity-30" }),
+    /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 10, className: sorted === "desc" ? "text-[var(--ds-accent-primary)]" : "opacity-30" })
+  ] });
+  const headerCell = (header, c) => {
+    const canSort = header.column.getCanSort();
+    const sorted = header.column.getIsSorted();
+    const meta = header.column.columnDef.meta;
+    const headerKind = kindOf(header.column.id, meta);
+    const headerAlign = meta?.align ?? (headerKind === "number" ? "right" : "left");
+    const shrink = (headerKind === "number" || headerKind === "date") && !meta?.maxWidth;
+    const at = { r: -1, c };
+    const label = flexRender(header.column.columnDef.header, header.getContext());
+    const inside = canSort ? /* @__PURE__ */ jsxs(
+      "button",
       {
+        type: "button",
+        onClick: header.column.getToggleSortingHandler(),
+        ...editable ? { "data-grid-key": cellKey(at), tabIndex: grid.tabIndexOf(at) } : {},
         className: cn(
-          "w-full overflow-auto rounded-[var(--ds-radius-md)]",
-          "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-          "shadow-[var(--ds-shadow-card)]",
-          "bg-[var(--ds-bg-surface)]"
+          "inline-flex items-center gap-ds-1 uppercase tracking-wider cursor-pointer select-none [font:inherit] text-inherit",
+          "hover:text-[var(--ds-text-primary)] rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
         ),
-        children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
-          /* @__PURE__ */ jsx("thead", { className: "bg-[var(--ds-bg-muted)]", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: hg.headers.map((header) => {
-            const canSort = header.column.getCanSort();
-            const sorted = header.column.getIsSorted();
-            const meta = header.column.columnDef.meta;
-            const headerKind = kindOf(header.column.id, meta);
-            const headerAlign = meta?.align ?? (headerKind === "number" ? "right" : "left");
-            const shrink = (headerKind === "number" || headerKind === "date") && !meta?.maxWidth;
-            return /* @__PURE__ */ jsx(
-              "th",
-              {
-                className: cn(
-                  "px-ds-4 py-ds-3 text-xs font-[var(--ds-weight-heading)] uppercase tracking-wider",
-                  headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
-                  shrink && "w-px whitespace-nowrap",
-                  "text-[var(--ds-text-secondary)]",
-                  canSort && "cursor-pointer select-none hover:text-[var(--ds-text-primary)]"
-                ),
-                style: meta?.maxWidth || meta?.width || meta?.minWidth ? { maxWidth: meta?.maxWidth, width: meta?.width, minWidth: meta?.minWidth } : void 0,
-                onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
-                children: /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-ds-1", headerAlign === "right" && "justify-end", headerAlign === "center" && "justify-center"), children: [
-                  flexRender(header.column.columnDef.header, header.getContext()),
-                  canSort && /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-col -space-y-ds-1.5", children: [
-                    /* @__PURE__ */ jsx(
-                      Icon,
-                      {
-                        name: "chevron-up",
-                        size: 10,
-                        className: sorted === "asc" ? "text-[var(--ds-accent-primary)]" : "opacity-30"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Icon,
-                      {
-                        name: "chevron-down",
-                        size: 10,
-                        className: sorted === "desc" ? "text-[var(--ds-accent-primary)]" : "opacity-30"
-                      }
-                    )
-                  ] })
-                ] })
-              },
-              header.id
-            );
-          }) }, hg.id)) }),
-          /* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
-            "tr",
+        children: [
+          label,
+          sortIcons(sorted)
+        ]
+      }
+    ) : label;
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        role: editable ? "columnheader" : void 0,
+        "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+        ...editable && !canSort ? { "data-grid-key": cellKey(at), tabIndex: grid.tabIndexOf(at) } : {},
+        className: cn(
+          "px-ds-4 py-ds-3 text-xs font-[var(--ds-weight-heading)] uppercase tracking-wider",
+          headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
+          shrink && "w-px whitespace-nowrap",
+          "text-[var(--ds-text-secondary)] outline-none focus-visible:shadow-[inset_var(--ds-shadow-focus)]"
+        ),
+        style: meta?.maxWidth || meta?.width || meta?.minWidth ? { maxWidth: meta?.maxWidth, width: meta?.width, minWidth: meta?.minWidth } : void 0,
+        children: /* @__PURE__ */ jsx("span", { className: cn("flex items-center gap-ds-1", headerAlign === "right" && "justify-end", headerAlign === "center" && "justify-center"), children: inside })
+      },
+      header.id
+    );
+  };
+  return withControl(
+    /* @__PURE__ */ jsxs("div", { "data-ds-list": "", className: "min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-table-scroll": "",
+          className: cn(
+            "w-full overflow-auto rounded-[var(--ds-radius-md)]",
+            "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+            "shadow-[var(--ds-shadow-card)]",
+            "bg-[var(--ds-bg-surface)]"
+          ),
+          children: /* @__PURE__ */ jsxs(
+            "table",
             {
-              className: cn(
-                "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
-                "hover:bg-[var(--ds-bg-muted)] transition-colors"
-              ),
-              children: row.getVisibleCells().map((cell) => {
-                const meta = cell.column.columnDef.meta;
-                const truncLines = meta?.truncate === true ? 1 : meta?.truncate ? meta.truncate.lines : 0;
-                const kind = kindOf(cell.column.id, meta);
-                const rendered = flexRender(cell.column.columnDef.cell, cell.getContext());
-                const shrink = (kind === "number" || kind === "date") && !meta?.maxWidth;
-                let inner;
-                if (truncLines > 0) {
-                  inner = /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: rendered });
-                } else if (kind === "email") {
-                  inner = /* @__PURE__ */ jsx("span", { className: "max-w-[40ch] truncate inline-block align-bottom", title: typeof cell.getValue() === "string" ? cell.getValue() : void 0, children: rendered });
-                } else {
-                  inner = rendered;
-                }
-                const align = meta?.align ?? (kind === "number" ? "right" : "left");
-                const value = cell.getValue();
-                if (align !== "left" && typeof value !== "string" && typeof value !== "number" && value !== null && value !== void 0) {
-                  inner = /* @__PURE__ */ jsx("div", { className: cn("flex items-center", align === "center" ? "justify-center" : "justify-end"), children: inner });
-                }
-                return /* @__PURE__ */ jsx(
-                  "td",
+              ref: gridRef,
+              role: editable ? "grid" : void 0,
+              "aria-label": ariaLabel,
+              onKeyDown: editable ? onGridKeyDown : void 0,
+              onFocus: editable ? onGridFocus : void 0,
+              className: "w-full text-sm",
+              children: [
+                /* @__PURE__ */ jsx("thead", { className: "bg-[var(--ds-bg-muted)]", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx("tr", { role: editable ? "row" : void 0, className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: hg.headers.map((header, c) => headerCell(header, c)) }, hg.id)) }),
+                /* @__PURE__ */ jsx("tbody", { children: rows.map((row, r) => /* @__PURE__ */ jsx(
+                  "tr",
                   {
+                    role: editable ? "row" : void 0,
                     className: cn(
-                      "px-ds-4 py-ds-3 text-[var(--ds-text-primary)]",
-                      align === "right" && "text-right",
-                      align === "center" && "text-center",
-                      shrink && "w-px whitespace-nowrap"
+                      "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
+                      "hover:bg-[var(--ds-bg-muted)] transition-colors"
                     ),
-                    style: meta?.maxWidth || meta?.width || meta?.minWidth ? { maxWidth: meta?.maxWidth, width: meta?.width, minWidth: meta?.minWidth } : void 0,
-                    children: inner
+                    children: row.getVisibleCells().map((cell, c) => {
+                      const meta = cell.column.columnDef.meta;
+                      const truncLines = meta?.truncate === true ? 1 : meta?.truncate ? meta.truncate.lines : 0;
+                      const kind = kindOf(cell.column.id, meta);
+                      const rendered = flexRender(cell.column.columnDef.cell, cell.getContext());
+                      const at = { r, c };
+                      const isEditing = editable && editing?.row === row.id && editing.c === c;
+                      const shrink = (kind === "number" || kind === "date") && !meta?.maxWidth;
+                      let inner;
+                      if (isEditing) {
+                        inner = /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(
+                          Input,
+                          {
+                            size: "sm",
+                            autoFocus: true,
+                            "aria-label": headerText(cell.column.id),
+                            onFocus: (e) => e.currentTarget.select(),
+                            value: editing.value,
+                            onChange: (e) => setEditing({ ...editing, value: e.target.value }),
+                            onBlur: () => finishEdit(true, false),
+                            onKeyDown: (e) => {
+                              if (e.key === "Enter") {
+                                e.preventDefault();
+                                finishEdit(true, true);
+                              } else if (e.key === "Escape") {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                finishEdit(false, true);
+                              }
+                            }
+                          }
+                        ) });
+                      } else if (truncLines > 0) {
+                        inner = /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: rendered });
+                      } else if (kind === "email") {
+                        inner = /* @__PURE__ */ jsx("span", { className: "max-w-[40ch] truncate inline-block align-bottom", title: typeof cell.getValue() === "string" ? cell.getValue() : void 0, children: rendered });
+                      } else {
+                        inner = rendered;
+                      }
+                      const align = meta?.align ?? (kind === "number" ? "right" : "left");
+                      const value = cell.getValue();
+                      if (!isEditing && align !== "left" && typeof value !== "string" && typeof value !== "number" && value !== null && value !== void 0) {
+                        inner = /* @__PURE__ */ jsx("div", { className: cn("flex items-center", align === "center" ? "justify-center" : "justify-end"), children: inner });
+                      }
+                      const tick = editable && saved?.ok && saved.row === row.id && saved.c === c ? /* @__PURE__ */ jsx(Icon, { name: "check", size: 14, className: "ml-ds-1 inline-block align-middle text-[var(--ds-status-success)]" }) : null;
+                      return /* @__PURE__ */ jsxs(
+                        "td",
+                        {
+                          ...editable ? { role: "gridcell", "data-grid-key": cellKey(at), tabIndex: grid.tabIndexOf(at), onDoubleClick: () => {
+                            if (!isEditing) startEdit(at);
+                          } } : {},
+                          className: cn(
+                            "px-ds-4 py-ds-3 text-[var(--ds-text-primary)]",
+                            align === "right" && "text-right",
+                            align === "center" && "text-center",
+                            shrink && "w-px whitespace-nowrap",
+                            editable && "outline-none focus-visible:shadow-[inset_var(--ds-shadow-focus)]"
+                          ),
+                          style: meta?.maxWidth || meta?.width || meta?.minWidth ? { maxWidth: meta?.maxWidth, width: meta?.width, minWidth: meta?.minWidth } : void 0,
+                          children: [
+                            inner,
+                            tick
+                          ]
+                        },
+                        cell.id
+                      );
+                    })
                   },
-                  cell.id
-                );
-              })
-            },
-            row.id
-          )) })
-        ] })
-      }
-    ),
-    pageCount > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
-      /* @__PURE__ */ jsxs("span", { className: "text-[var(--ds-text-muted)]", children: [
-        "Page ",
-        currentPage + 1,
-        " of ",
-        pageCount
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1", children: [
-        /* @__PURE__ */ jsx(
-          PagerBtn,
-          {
-            onClick: () => handlePageChange(0),
-            disabled: currentPage === 0,
-            label: "First"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          PagerBtn,
-          {
-            onClick: () => handlePageChange(currentPage - 1),
-            disabled: currentPage === 0,
-            label: "Prev"
-          }
-        ),
-        Array.from({ length: Math.min(pageCount, 5) }, (_, i) => {
-          let page;
-          if (pageCount <= 5) {
-            page = i;
-          } else if (currentPage < 3) {
-            page = i;
-          } else if (currentPage > pageCount - 4) {
-            page = pageCount - 5 + i;
-          } else {
-            page = currentPage - 2 + i;
-          }
-          return /* @__PURE__ */ jsx(
-            PagerBtn,
-            {
-              onClick: () => handlePageChange(page),
-              active: page === currentPage,
-              label: String(page + 1)
-            },
-            page
-          );
-        }),
-        /* @__PURE__ */ jsx(
-          PagerBtn,
-          {
-            onClick: () => handlePageChange(currentPage + 1),
-            disabled: currentPage >= pageCount - 1,
-            label: "Next"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          PagerBtn,
-          {
-            onClick: () => handlePageChange(pageCount - 1),
-            disabled: currentPage >= pageCount - 1,
-            label: "Last"
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-function PagerBtn({
-  onClick,
-  disabled,
-  active,
-  label
-}) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      disabled,
-      className: cn(
-        "h-8 min-w-[32px] px-ds-2 text-xs font-medium rounded-[var(--ds-radius-sm)]",
-        "transition-colors duration-[var(--ds-transition-speed)] cursor-pointer",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        "disabled:opacity-disabled disabled:cursor-not-allowed",
-        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+                  row.id
+                )) })
+              ]
+            }
+          )
+        }
       ),
-      children: label
-    }
+      editable && /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: /* @__PURE__ */ jsx("span", { children: saved ? saved.ok ? "Saved" : "Not saved" : "" }, saved?.n ?? 0) })
+    ] })
   );
 }