@dxos/react-ui-table 0.3.8-next.f4e0086 → 0.3.9-main.03b62b6

package/dist/lib/browser/index.mjs

@@ -1,45 +1,42 @@
 // packages/ui/react-ui-table/src/components/ColumnMenu.tsx
 import { Check, CaretDown, Trash, X } from "@phosphor-icons/react";
 import React, { useRef, useState } from "react";
-import { Button, DensityProvider, Input, Popover, Select, Separator } from "@dxos/react-ui";
+import { Button, DensityProvider, Input, Popover, Select, Separator, useTranslation } from "@dxos/react-ui";
 import { getSize, mx } from "@dxos/react-ui-theme";
 import { safeParseInt } from "@dxos/util";
 
-// packages/ui/react-ui-table/src/schema.ts
-var columnTypes = /* @__PURE__ */ new Map([
-  [
-    "string",
-    "Text"
-  ],
-  [
-    "boolean",
-    "Checkbox"
-  ],
-  [
-    "number",
-    "Number"
-  ],
-  [
-    "date",
-    "Date"
-  ],
-  [
-    "ref",
-    "Reference"
-  ]
-]);
+// packages/ui/react-ui-table/src/translations.ts
+var translationKey = "table";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "no selection label": "\xA0",
+        "number column type label": "Number",
+        "boolean column type label": "Toggle",
+        "date column type label": "Date",
+        "string column type label": "Text",
+        "ref column type label": "Reference",
+        "digits label": "Decimal places",
+        "save label": "Save",
+        "delete label": "Delete",
+        "column label label": "Label",
+        "property key label": "Property",
+        "column type label": "Type"
+      }
+    }
+  }
+];
 
 // packages/ui/react-ui-table/src/components/ColumnMenu.tsx
 var ColumnMenu = ({ column, ...props }) => {
   const title = column.label?.length ? column.label : column.id;
   return /* @__PURE__ */ React.createElement("div", {
-    className: "flex grow items-center overflow-hidden"
+    className: "flex items-center gap-2"
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "truncate",
+    className: "flex-1 min-is-0 truncate",
     title
   }, title), /* @__PURE__ */ React.createElement("div", {
-    className: "grow"
-  }), /* @__PURE__ */ React.createElement("div", {
     className: "flex shrink-0"
   }, /* @__PURE__ */ React.createElement(ColumnPanel, {
     ...props,
@@ -59,6 +56,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
   const [label, setLabel] = useState(column.label);
   const [digits, setDigits] = useState(String(column.digits ?? "0"));
   const propRef = useRef(null);
+  const { t } = useTranslation(translationKey);
   const handleCancel = () => {
     setProp(column.id);
     setOpen(false);
@@ -93,7 +91,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     asChild: true
   }, /* @__PURE__ */ React.createElement(Button, {
     variant: "ghost",
-    classNames: "p-0"
+    classNames: "p-1"
   }, /* @__PURE__ */ React.createElement(CaretDown, {
     className: getSize(4)
   }))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, null, /* @__PURE__ */ React.createElement(Popover.Viewport, {
@@ -104,14 +102,14 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     className: "flex flex-col gap-1"
   }, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1"
-  }, "Label"), /* @__PURE__ */ React.createElement(Input.TextInput, {
+  }, t("column label label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
     placeholder: "Column label",
     value: label ?? "",
     onChange: (event) => setLabel(event.target.value),
     autoFocus: true
   })), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, "Property"), /* @__PURE__ */ React.createElement(Input.TextInput, {
+  }, t("property key label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
     ref: propRef,
     placeholder: "Property key",
     // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
@@ -119,18 +117,23 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     onChange: (event) => setProp(event.target.value.replace(/[^\w_]/g, ""))
   })), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, "Type"), /* @__PURE__ */ React.createElement(Select.Root, {
+  }, t("column type label")), /* @__PURE__ */ React.createElement(Select.Root, {
     value: type,
     onValueChange: setType
   }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
     placeholder: "Type",
     classNames: "is-full"
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, Array.from(columnTypes.entries()).map(([type2, label2]) => /* @__PURE__ */ React.createElement(Select.Option, {
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, [
+    "number",
+    "boolean",
+    "string",
+    "ref"
+  ].map((type2) => /* @__PURE__ */ React.createElement(Select.Option, {
     key: type2,
     value: type2
-  }, label2)))))))), type === "number" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+  }, t(`${type2} column type label`))))))))), type === "number" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, "Decimal places"), /* @__PURE__ */ React.createElement(Input.TextInput, {
+  }, t("digits label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
     value: digits ?? "",
     onChange: (event) => setDigits(event.target.value)
   })))), type === "ref" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
@@ -141,7 +144,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
   }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
     placeholder: "Table",
     classNames: "is-full"
-  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, tableDefs.filter((t) => t.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React.createElement(Select.Option, {
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, tableDefs.filter((t2) => t2.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React.createElement(Select.Option, {
     key: id,
     value: id
   }, name ?? id))))))), refTable && /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
@@ -163,114 +166,239 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     variant: "primary",
     classNames: "is-full flex gap-2",
     onClick: handleSave
-  }, /* @__PURE__ */ React.createElement("span", null, "Save"), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("save label")), /* @__PURE__ */ React.createElement("div", {
     className: "grow"
   }), /* @__PURE__ */ React.createElement(Check, {
     className: getSize(5)
   })), /* @__PURE__ */ React.createElement(Button, {
     classNames: "is-full flex gap-2",
     onClick: handleCancel
-  }, /* @__PURE__ */ React.createElement("span", null, "Cancel"), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("cancel label", {
+    ns: "os"
+  })), /* @__PURE__ */ React.createElement("div", {
     className: "grow"
   }), /* @__PURE__ */ React.createElement(X, {
     className: getSize(5)
   })), /* @__PURE__ */ React.createElement(Button, {
     classNames: "is-full flex gap-2",
     onClick: () => onDelete?.(column.id)
-  }, /* @__PURE__ */ React.createElement("span", null, "Delete"), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("delete label")), /* @__PURE__ */ React.createElement("div", {
     className: "grow"
   }), /* @__PURE__ */ React.createElement(Trash, {
     className: getSize(5)
   })))))), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
 };
 
-// packages/ui/react-ui-table/src/components/Table.tsx
-import { flexRender, getCoreRowModel, getGroupedRowModel, useReactTable } from "@tanstack/react-table";
-import React2, { Fragment, useEffect, useRef as useRef2, useState as useState2 } from "react";
+// packages/ui/react-ui-table/src/components/Table/Table.tsx
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { getCoreRowModel, getGroupedRowModel, useReactTable } from "@tanstack/react-table";
+import React6, { Fragment, useCallback, useEffect, useState as useState2 } from "react";
 import { debounce } from "@dxos/async";
-import { groupBorder, inputSurface, mx as mx2 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-table/src/components/Table/TableBody.tsx
+import { useArrowNavigationGroup } from "@fluentui/react-tabster";
+import { flexRender } from "@tanstack/react-table";
+import React3 from "react";
+
+// packages/ui/react-ui-table/src/components/Table/TableContext.tsx
+import { createContext } from "@radix-ui/react-context";
+var TABLE_NAME = "Table";
+var [TableProvider, useUntypedTableContext] = createContext(TABLE_NAME);
+var useTableContext = (consumerName) => useUntypedTableContext(consumerName);
 
 // packages/ui/react-ui-table/src/theme.ts
-import { chromeSurface } from "@dxos/react-ui-theme";
-var defaultTableSlots = {
-  // TODO(burdon): head/body/table rows.
-  header: {
-    className: [
-      chromeSurface,
-      "px-2 font-light select-none"
-    ]
-  },
-  footer: {
-    className: [
-      chromeSurface,
-      "px-2 font-light"
-    ]
-  },
-  cell: {
-    className: "px-2"
-  },
-  group: {
-    className: "px-2 font-light text-xs text-left"
-  },
-  focus: {
-    className: "ring ring-primary-600 ring-inset"
-  },
-  selected: {
-    className: "!bg-teal-100 dark:!bg-teal-700"
-  }
+import { chromeSurface, fixedSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx as mx2 } from "@dxos/react-ui-theme";
+var currentRow = "!bg-neutral-75 !dark:bg-neutral-850";
+var selectedRow = "!bg-primary-100 dark:!bg-primary-700";
+var flushPadding = "pli-0 plb-0";
+var textPadding = "pli-2 plb-0.5";
+var headPadding = "pli-2 plb-1.5";
+var gridCellFocusRing = "focus:z-[11] focus:outline outline-2 outline-primary-500 dark:outline-primary-400";
+var tableRoot = ({ fullWidth }, ...etc) => mx2("table-fixed", fullWidth && "is-full", ...etc);
+var groupTh = (_props, ...etc) => mx2("text-start font-medium", flushPadding, ...etc);
+var theadRoot = ({ header, stickyHeader }, ...etc) => mx2(header ? stickyHeader && "sticky block-start-[--sticky-top] z-[1]" : "collapse", header && fixedSurface, ...etc);
+var theadTr = (_props, ...etc) => mx2("group", ...etc);
+var theadTh = ({ border }, ...etc) => mx2("relative text-start font-medium select-none truncate", headPadding, border && "border", border && groupBorder, ...etc);
+var theadResizeRoot = (_props, ...etc) => mx2("absolute top-0 pis-1 h-full z-[10] w-[7px] -right-[5px] cursor-col-resize select-none touch-none opacity-20 hover:opacity-100", ...etc);
+var theadResizeThumb = (_props, ...etc) => mx2("flex group-hover:bg-neutral-700 -ml-[2px] w-[1px] h-full", ...etc);
+var tbodyRoot = (_props, ...etc) => mx2(...etc);
+var tbodyTr = ({ canBeCurrent }, ...etc) => mx2("group", canBeCurrent ? ghostSelectedCurrent : ghostSelected, canBeCurrent && focusRing, canBeCurrent && "cursor-pointer rounded", ...etc);
+var tdRoot = ({ border, isGrid }, ...etc) => mx2("relative", flushPadding, border && "border", border && groupBorder, isGrid && gridCellFocusRing, ...etc);
+var tdContent = (_props, ...etc) => mx2(...etc);
+var tfootRoot = (_props, ...etc) => mx2("sticky block-end-0 z-10", chromeSurface, ...etc);
+var tfootTr = (_props, ...etc) => mx2(...etc);
+var tfootTh = ({ border }, ...etc) => mx2(textPadding, chromeSurface, border && groupBorder, ...etc);
+
+// packages/ui/react-ui-table/src/components/Cell/Cell.tsx
+import { useFocusableGroup } from "@fluentui/react-tabster";
+import React2 from "react";
+var CELL_NAME = "Cell";
+var FocusableCell = ({ cell, children }) => {
+  const tableContext = useTableContext(CELL_NAME);
+  const domAttributes = useFocusableGroup({
+    tabBehavior: "limited"
+  });
+  return /* @__PURE__ */ React2.createElement("td", {
+    tabIndex: 0,
+    ...domAttributes,
+    className: tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)
+  }, children);
+};
+var StaticCell = ({ cell, children }) => {
+  const tableContext = useTableContext(CELL_NAME);
+  return /* @__PURE__ */ React2.createElement("td", {
+    className: tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)
+  }, children);
 };
+var Cell = ({ cell, children }) => {
+  const { isGrid } = useTableContext(CELL_NAME);
+  const Root = isGrid ? FocusableCell : StaticCell;
+  return /* @__PURE__ */ React2.createElement(Root, {
+    cell
+  }, children);
+};
+Cell.displayName = CELL_NAME;
 
-// packages/ui/react-ui-table/src/components/Table.tsx
-var updateSelection = (selectionState, id, selection) => {
-  switch (selection) {
-    case "single": {
-      return {
-        [id]: true
-      };
-    }
-    case "single-toggle": {
-      return selectionState[id] ? {} : {
-        [id]: true
-      };
-    }
-    case "multiple": {
-      return {
-        [id]: true,
-        ...selectionState
-      };
-    }
-    case "multiple-toggle": {
-      if (selectionState[id]) {
-        const newSelectionState = {
-          ...selectionState
-        };
-        delete newSelectionState[id];
-        return newSelectionState;
-      } else {
-        return {
-          [id]: true,
-          ...selectionState
-        };
+// packages/ui/react-ui-table/src/components/Table/TableBody.tsx
+var TABLE_BODY_NAME = "TableBody";
+var TableBody = ({ rows }) => {
+  const tableContext = useTableContext(TABLE_BODY_NAME);
+  const { table, keyAccessor, debug, expand, isGrid, onDatumClick, currentDatum } = tableContext;
+  const rowSelection = table.getState().rowSelection;
+  const domAttributes = useArrowNavigationGroup({
+    axis: "grid"
+  });
+  const canBeCurrent = !isGrid && !!onDatumClick;
+  return /* @__PURE__ */ React3.createElement("tbody", isGrid && domAttributes, rows.map((row) => {
+    const isCurrent = currentDatum === row.original;
+    const isSelected = rowSelection?.[row.id];
+    return /* @__PURE__ */ React3.createElement("tr", {
+      key: keyAccessor ? keyAccessor(row.original) : row.id,
+      className: tbodyTr({
+        canBeCurrent
+      }),
+      ...isCurrent && {
+        "aria-current": "location"
+      },
+      ...isSelected && {
+        "aria-selected": "true"
+      },
+      ...canBeCurrent && {
+        tabIndex: 0,
+        onClick: () => {
+          onDatumClick(row.original);
+        },
+        onKeyUp: ({ key }) => {
+          if (key === "Enter" || key === " ") {
+            onDatumClick(row.original);
+          }
+        }
       }
-    }
-  }
-  return selectionState;
+    }, debug && /* @__PURE__ */ React3.createElement("td", null, row.id), row.getVisibleCells().map((cell) => {
+      return /* @__PURE__ */ React3.createElement(Cell, {
+        key: cell.id,
+        cell
+      }, flexRender(cell.column.columnDef.cell, {
+        className: "pli-2",
+        ...cell.getContext()
+      }));
+    }), expand && /* @__PURE__ */ React3.createElement("td", null));
+  }));
 };
-var Table = ({ slots = defaultTableSlots, ...props }) => {
-  const { data = [], columns = [], onColumnResize, columnVisibility, header = true, footer, select, selected, onSelectedChange, fullWidth, pinToBottom, debug } = props;
-  const [focus, setFocus] = useState2();
-  const [rowSelection, setRowSelection] = useState2({});
-  useEffect(() => {
-    setRowSelection(selected?.reduce((selectionState, selected2) => {
-      const row = table.getRowModel().rows.find((row2) => row2.original === selected2);
-      if (row) {
-        selectionState[row.id] = true;
-      }
-      return selectionState;
-    }, {}) ?? {});
+TableBody.displayName = TABLE_BODY_NAME;
+
+// packages/ui/react-ui-table/src/components/Table/TableFooter.tsx
+import { flexRender as flexRender2 } from "@tanstack/react-table";
+import React4 from "react";
+var TABLE_FOOTER_NAME = "TableFooter";
+var TableFooter = (props) => {
+  const tableContext = useTableContext(TABLE_FOOTER_NAME);
+  const { table, expand, debug } = tableContext;
+  const footers = table.getFooterGroups();
+  return /* @__PURE__ */ React4.createElement("tfoot", {
+    className: tfootRoot(props)
+  }, footers.map((footerGroup) => /* @__PURE__ */ React4.createElement("tr", {
+    key: footerGroup.id,
+    className: tfootTr(tableContext)
+  }, debug && /* @__PURE__ */ React4.createElement("th", null), footerGroup.headers.map((footer) => {
+    return /* @__PURE__ */ React4.createElement("th", {
+      key: footer.id,
+      className: tfootTh(tableContext, footer.column.columnDef.meta?.footer?.classNames)
+    }, footer.isPlaceholder ? null : flexRender2(footer.column.columnDef.footer, footer.getContext()));
+  }), expand && /* @__PURE__ */ React4.createElement("th", null))));
+};
+TableFooter.displayName = TABLE_FOOTER_NAME;
+
+// packages/ui/react-ui-table/src/components/Table/TableHead.tsx
+import { flexRender as flexRender3 } from "@tanstack/react-table";
+import React5 from "react";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var TABLE_HEAD_NAME = "TableHead";
+var TableHead = (_props) => {
+  const tableContext = useTableContext(TABLE_HEAD_NAME);
+  const headerGroups = tableContext.table.getHeaderGroups();
+  const state = tableContext.table.getState();
+  return /* @__PURE__ */ React5.createElement("thead", {
+    className: theadRoot(tableContext)
+  }, headerGroups.map((headerGroup) => {
+    return (
+      // Group element to hover resize handles.
+      /* @__PURE__ */ React5.createElement("tr", {
+        key: headerGroup.id,
+        className: theadTr(tableContext)
+      }, tableContext.debug && /* @__PURE__ */ React5.createElement("th", {
+        className: "font-mono",
+        style: {
+          width: 32
+        }
+      }, "#"), headerGroup.headers.map((header) => {
+        const isResizing = header.column.getIsResizing();
+        return /* @__PURE__ */ React5.createElement("th", {
+          key: header.id,
+          style: {
+            width: header.getSize()
+          },
+          className: theadTh(tableContext, header.column.columnDef.meta?.header?.classNames)
+        }, !header || header.isPlaceholder ? null : flexRender3(header.column.columnDef.header, header.getContext()), header.column.columnDef.meta?.resizable && /* @__PURE__ */ React5.createElement("div", {
+          className: theadResizeRoot(tableContext, isResizing && "hidden"),
+          style: {
+            transform: `translateX(${isResizing ? state.columnSizingInfo.deltaOffset : 0}px)`
+          },
+          onMouseDown: header.getResizeHandler(),
+          onTouchStart: header.getResizeHandler()
+        }, /* @__PURE__ */ React5.createElement("div", {
+          className: mx3(theadResizeThumb(tableContext))
+        })));
+      }), tableContext.expand && /* @__PURE__ */ React5.createElement("th", null))
+    );
+  }));
+};
+TableHead.displayName = TABLE_HEAD_NAME;
+
+// packages/ui/react-ui-table/src/components/Table/Table.tsx
+var Table = (props) => {
+  const { role, data = [], columns = [], onColumnResize, columnVisibility, header = true, footer, rowsSelectable, fullWidth, debug, onDataSelectionChange, classNames } = props;
+  const TableProvider2 = TableProvider;
+  const [rowSelection = {}, directlySetRowSelection] = useControllableState({
+    prop: props.rowSelection,
+    onChange: props.onRowSelectionChange,
+    defaultProp: props.defaultRowSelection
+  });
+  const handleRowSelectionChange = useCallback((updaterOrValue) => {
+    const nextRowSelection = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
+    if (rowsSelectable === "multi") {
+      directlySetRowSelection(nextRowSelection);
+    } else if (rowsSelectable) {
+      const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
+      directlySetRowSelection(nextRowSelectionKey ? {
+        [nextRowSelectionKey]: true
+      } : {});
+    } else {
+      directlySetRowSelection({});
+    }
   }, [
-    select,
-    selected
+    rowSelection,
+    directlySetRowSelection
   ]);
   const [columnSizingInfo, setColumnSizingInfo] = useState2({});
   const onColumnResizeDebounced = debounce((info) => onColumnResize?.(info), 500);
@@ -286,268 +414,96 @@ var Table = ({ slots = defaultTableSlots, ...props }) => {
     props.grouping
   ]);
   const table = useReactTable({
+    // Data
+    meta: {},
     data,
+    // Columns
     columns,
     defaultColumn: {
-      size: 400,
-      maxSize: 800
+      size: 256,
+      maxSize: 1024
     },
+    // Rows
     getCoreRowModel: getCoreRowModel(),
-    meta: {},
-    // TODO(burdon): Pagination.
-    // TODO(burdon): Sorting.
-    // TODO(burdon): Filtering.
+    // State
     state: {
       columnVisibility,
       columnSizingInfo,
       rowSelection,
       grouping
     },
-    // Grouping.
+    // Grouping
     getGroupedRowModel: getGroupedRowModel(),
     onGroupingChange: setGrouping,
-    // Selection.
-    enableRowSelection: select === "single" || select === "single-toggle",
-    enableMultiRowSelection: select === "multiple" || select === "multiple-toggle",
-    onRowSelectionChange: (rows) => {
-      setRowSelection(rows);
-    },
-    // Resize columns.
-    // TODO(burdon): Drag to re-order columns.
+    // Selection
+    ...rowsSelectable === "multi" ? {
+      enableMultiRowSelection: true
+    } : rowsSelectable ? {
+      enableRowSelection: true
+    } : {},
+    onRowSelectionChange: handleRowSelectionChange,
+    // Resize columns
     columnResizeMode: "onChange",
     enableColumnResizing: true,
     onColumnSizingInfoChange: setColumnSizingInfo,
+    // Debug
     debugTable: debug
   });
-  const expand = false;
-  const containerRef = usePinToBottom(data, pinToBottom);
-  const handleSelect = (row) => {
-    if (select) {
-      setRowSelection((selectionState) => {
-        const newSelectionState = updateSelection(selectionState, row.id, select);
-        if (onSelectedChange) {
-          const rows = Object.keys(newSelectionState).map((id) => table.getRowModel().rowsById[id].original);
-          onSelectedChange(rows);
-        }
-        return newSelectionState;
-      });
-    } else {
-      onSelectedChange?.([
-        row.original
-      ]);
-    }
-  };
-  return /* @__PURE__ */ React2.createElement("div", {
-    ref: containerRef,
-    className: mx2("grow overflow-auto", slots?.root?.className)
-  }, /* @__PURE__ */ React2.createElement("table", {
-    // Styles:
-    // table-fixed: Prevents fixed sized columns from shrinking.
-    className: mx2(!fullWidth && "table-fixed", inputSurface, slots?.table?.className),
-    style: {
-      width: fullWidth ? "100%" : table.getTotalSize()
+  useEffect(() => {
+    if (onDataSelectionChange) {
+      onDataSelectionChange(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
     }
-  }, /* @__PURE__ */ React2.createElement(TableHead, {
+  }, [
+    onDataSelectionChange,
+    rowSelection,
+    table
+  ]);
+  const expand = false;
+  return /* @__PURE__ */ React6.createElement(TableProvider2, {
     ...props,
-    slots,
     header,
-    state: table.getState(),
-    headers: table.getHeaderGroups()
-  }), grouping.length === 0 && /* @__PURE__ */ React2.createElement(TableBody, {
-    ...props,
-    slots,
-    rowSelection,
     expand,
-    focus,
-    onFocus: setFocus,
-    onSelect: handleSelect,
+    table,
+    isGrid: role === "grid" || role === "treegrid"
+  }, /* @__PURE__ */ React6.createElement("table", {
+    role,
+    className: tableRoot(props, classNames),
+    ...!fullWidth && {
+      style: {
+        width: table.getTotalSize()
+      }
+    }
+  }, /* @__PURE__ */ React6.createElement(TableHead, null), grouping.length === 0 && /* @__PURE__ */ React6.createElement(TableBody, {
     rows: table.getRowModel().rows
   }), grouping.length !== 0 && table.getGroupedRowModel().rows.map((row, i) => {
-    return /* @__PURE__ */ React2.createElement(Fragment, {
+    return /* @__PURE__ */ React6.createElement(Fragment, {
       key: i
-    }, /* @__PURE__ */ React2.createElement("thead", null, /* @__PURE__ */ React2.createElement("tr", null, slots?.margin && /* @__PURE__ */ React2.createElement("th", {
-      className: mx2(slots?.margin?.className)
-    }), debug && /* @__PURE__ */ React2.createElement("th", null), /* @__PURE__ */ React2.createElement("th", {
+    }, /* @__PURE__ */ React6.createElement("thead", null, /* @__PURE__ */ React6.createElement("tr", null, debug && /* @__PURE__ */ React6.createElement("th", null), /* @__PURE__ */ React6.createElement("th", {
       // TODO(burdon): Calculate row span.
       colSpan: table.getHeaderGroups()[0].headers.length,
-      className: mx2("text-left", slots?.group?.className)
-    }, table.getState().grouping[0], "[", String(row.getGroupingValue(table.getState().grouping[0])), "]"))), /* @__PURE__ */ React2.createElement(TableBody, {
-      ...props,
-      slots,
-      rowSelection,
-      expand,
-      focus,
-      onFocus: setFocus,
-      onSelect: handleSelect,
+      className: groupTh(props)
+    }, table.getState().grouping[0], "[", String(row.getGroupingValue(table.getState().grouping[0])), "]"))), /* @__PURE__ */ React6.createElement(TableBody, {
       rows: row.subRows
     }));
-  }), footer && /* @__PURE__ */ React2.createElement(TableFoot, {
-    ...props,
-    slots,
-    footers: table.getFooterGroups()
-  })), debug && /* @__PURE__ */ React2.createElement("pre", {
+  }), footer && /* @__PURE__ */ React6.createElement(TableFooter, null)), debug && /* @__PURE__ */ React6.createElement("pre", {
     className: "font-mono text-xs text-neutral-500 my-4 p-2 ring"
-  }, /* @__PURE__ */ React2.createElement("code", null, JSON.stringify(table.getState(), void 0, 2))));
-};
-var usePinToBottom = (data, pinToBottom) => {
-  const containerRef = useRef2(null);
-  const [stickyScrolling, setStickyScrolling] = useState2(true);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!pinToBottom || !container) {
-      return;
-    }
-    const handler = () => {
-      const bottom = container.scrollHeight - container.scrollTop - container.clientHeight === 0;
-      setStickyScrolling(bottom);
-    };
-    container.addEventListener("scroll", handler);
-    return () => container.removeEventListener("scroll", handler);
-  }, []);
-  useEffect(() => {
-    if (!pinToBottom || !containerRef.current || !stickyScrolling) {
-      return;
-    }
-    containerRef.current?.scroll({
-      top: containerRef.current.scrollHeight
-    });
-  }, [
-    data
-  ]);
-  return containerRef;
-};
-var TableHead = ({ state, headers, expand, header, debug, fullWidth, border, slots }) => {
-  return /* @__PURE__ */ React2.createElement("thead", {
-    className: mx2(header ? [
-      "sticky top-0 z-10"
-    ] : "collapse")
-  }, headers.map((headerGroup) => {
-    return (
-      // Group element to hover resize handles.
-      /* @__PURE__ */ React2.createElement("tr", {
-        key: headerGroup.id,
-        className: "font-light group"
-      }, slots?.margin && /* @__PURE__ */ React2.createElement("th", {
-        className: mx2(slots?.margin?.className)
-      }), debug && /* @__PURE__ */ React2.createElement("th", {
-        className: "text-left",
-        style: {
-          width: 32
-        }
-      }, "#"), headerGroup.headers.map((header2) => {
-        return /* @__PURE__ */ React2.createElement("th", {
-          key: header2.id,
-          style: {
-            // Don't set width if fullWidth and no explicit size.
-            width: fullWidth && header2.column.columnDef.meta?.expand ? void 0 : header2.getSize()
-          },
-          // Relative for resize handle.
-          // TODO(burdon): Border scrolls with main content.
-          //  https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
-          className: mx2("relative text-left", border && groupBorder, slots?.header?.className, header2.column.columnDef.meta?.slots?.header?.className)
-        }, !header2 || header2.isPlaceholder ? null : flexRender(header2.column.columnDef.header, header2.getContext()), header2.column.columnDef.meta?.resizable && /* @__PURE__ */ React2.createElement("div", {
-          className: mx2("absolute top-0 pl-1 h-full z-[10] w-[7px] -right-[5px]", "cursor-col-resize select-none touch-none opacity-20 hover:opacity-100", header2.column.getIsResizing() && "hidden"),
-          style: {
-            transform: header2.column.getIsResizing() ? `translateX(${state.columnSizingInfo.deltaOffset}px)` : void 0
-          },
-          onMouseDown: header2.getResizeHandler(),
-          onTouchStart: header2.getResizeHandler()
-        }, /* @__PURE__ */ React2.createElement("div", {
-          className: "flex group-hover:bg-neutral-700 -ml-[2px] w-[1px] h-full"
-        })));
-      }), expand && /* @__PURE__ */ React2.createElement("th", null), slots?.margin && /* @__PURE__ */ React2.createElement("th", {
-        className: mx2(slots?.margin?.className)
-      }))
-    );
-  }));
-};
-var TableBody = ({ keyAccessor, rows, rowSelection, focus, onFocus, onSelect, debug, border, expand, slots }) => {
-  return /* @__PURE__ */ React2.createElement("tbody", null, rows.map((row) => {
-    return /* @__PURE__ */ React2.createElement("tr", {
-      key: keyAccessor ? keyAccessor(row.original) : row.id,
-      onClick: () => onSelect?.(row),
-      role: "button",
-      className: mx2("group", rowSelection[row.id] && slots?.selected?.className, focus === row.id && slots?.focus?.className, slots?.row?.className)
-    }, slots?.margin && /* @__PURE__ */ React2.createElement("td", {
-      className: mx2(slots?.margin?.className)
-    }, /* @__PURE__ */ React2.createElement("button", {
-      role: "button",
-      style: {
-        width: 1,
-        height: 1
-      },
-      className: "focus:outline-none",
-      onFocus: () => onFocus?.(keyAccessor ? keyAccessor(row.original) : row.id),
-      onBlur: () => onFocus?.(void 0),
-      onKeyDown: (event) => {
-        switch (event.key) {
-          case "ArrowUp": {
-            break;
-          }
-          case "ArrowDown": {
-            break;
-          }
-        }
-      }
-    })), debug && /* @__PURE__ */ React2.createElement("td", null, row.id), row.getVisibleCells().map((cell) => {
-      return /* @__PURE__ */ React2.createElement("td", {
-        key: cell.id,
-        className: mx2(border && groupBorder, slots?.cell?.className, cell.column.columnDef.meta?.slots?.cell?.className)
-      }, flexRender(cell.column.columnDef.cell, {
-        className: "px-2",
-        ...cell.getContext()
-      }));
-    }), expand && /* @__PURE__ */ React2.createElement("td", null), slots?.margin && /* @__PURE__ */ React2.createElement("td", {
-      className: mx2(slots?.margin?.className)
-    }));
-  }));
-};
-var TableFoot = ({ footers, expand, slots, debug, border }) => {
-  return /* @__PURE__ */ React2.createElement("tfoot", {
-    className: mx2("sticky bottom-0 z-[10]", slots?.footer?.className)
-  }, footers.map((footerGroup) => /* @__PURE__ */ React2.createElement("tr", {
-    key: footerGroup.id,
-    className: "font-thin"
-  }, slots?.margin && /* @__PURE__ */ React2.createElement("th", {
-    className: mx2(slots?.margin?.className)
-  }), debug && /* @__PURE__ */ React2.createElement("th", null), footerGroup.headers.map((footer) => {
-    return /* @__PURE__ */ React2.createElement("th", {
-      key: footer.id,
-      className: mx2(border && groupBorder, "text-left", slots?.footer?.className, footer.column.columnDef.meta?.slots?.footer?.className)
-    }, footer.isPlaceholder ? null : flexRender(footer.column.columnDef.footer, footer.getContext()));
-  }), expand && /* @__PURE__ */ React2.createElement("th", null), slots?.margin && /* @__PURE__ */ React2.createElement("th", {
-    className: mx2(slots?.margin?.className)
-  }))));
+  }, /* @__PURE__ */ React6.createElement("code", null, JSON.stringify(table.getState(), void 0, 2))));
 };
 
-// packages/ui/react-ui-table/src/components/ComboboxCell.tsx
+// packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx
 import { CaretDown as CaretDown2 } from "@phosphor-icons/react";
-import React3, { useCallback, useState as useState3 } from "react";
-import { Popover as Popover2, useTranslation } from "@dxos/react-ui";
+import React7, { useCallback as useCallback2, useState as useState3 } from "react";
+import { Popover as Popover2, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { PopoverCombobox } from "@dxos/react-ui-searchlist";
-import { descriptionText, getSize as getSize2, mx as mx3, staticPlaceholderText } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-table/src/translations.ts
-var translationKey = "table";
-var translations_default = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "no selection label": "\xA0"
-      }
-    }
-  }
-];
-
-// packages/ui/react-ui-table/src/components/ComboboxCell.tsx
+import { descriptionText, getSize as getSize2, mx as mx4, staticPlaceholderText } from "@dxos/react-ui-theme";
 var initialItems = (model, value) => value ? {
   [model.getId(value)]: {
     label: model.getText(value),
     data: value
   }
 } : {};
-var ComboboxCell = ({ model, value, onValueChange }) => {
-  const { t } = useTranslation(translationKey);
+var CellCombobox = ({ model, value, onValueChange }) => {
+  const { t } = useTranslation2(translationKey);
   const [items, setItems] = useState3(initialItems(model, value));
   const [loading, setLoading] = useState3(false);
   const [searchInputValue, setSearchInputValue] = useState3("");
@@ -564,43 +520,43 @@ var ComboboxCell = ({ model, value, onValueChange }) => {
     }, initialItems(model, value)));
     setLoading(false);
   };
-  const handleValueChange = useCallback((id) => {
+  const handleValueChange = useCallback2((id) => {
     onValueChange(items[id]?.data);
   }, [
     items,
     onValueChange
   ]);
-  return /* @__PURE__ */ React3.createElement(PopoverCombobox.Root, {
+  return /* @__PURE__ */ React7.createElement(PopoverCombobox.Root, {
     placeholder: t("no selection label")
-  }, /* @__PURE__ */ React3.createElement(PopoverCombobox.Trigger, {
+  }, /* @__PURE__ */ React7.createElement(PopoverCombobox.Trigger, {
     variant: "ghost",
-    classNames: "is-full"
-  }, value ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", {
-    className: mx3("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
-  }, model.getText(value)), /* @__PURE__ */ React3.createElement(CaretDown2, {
+    classNames: "is-full rounded-none ring-inset"
+  }, value ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("span", {
+    className: mx4("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
+  }, model.getText(value)), /* @__PURE__ */ React7.createElement(CaretDown2, {
     weight: "bold",
     className: getSize2(3)
-  })) : null), /* @__PURE__ */ React3.createElement(PopoverCombobox.Content, {
+  })) : null), /* @__PURE__ */ React7.createElement(PopoverCombobox.Content, {
     shouldFilter: false,
     classNames: "is-[--radix-popover-trigger-width]"
-  }, /* @__PURE__ */ React3.createElement(PopoverCombobox.Input, {
+  }, /* @__PURE__ */ React7.createElement(PopoverCombobox.Input, {
     value: searchInputValue,
     onValueChange: handleSearchInputValueChange
-  }), /* @__PURE__ */ React3.createElement(PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ React3.createElement("p", {
-    className: mx3("text-center", descriptionText)
-  }, "Start typing to search") : loading ? /* @__PURE__ */ React3.createElement("p", {
-    className: mx3("text-center", descriptionText)
-  }, "Searching\u2026") : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(PopoverCombobox.Empty, {
+  }), /* @__PURE__ */ React7.createElement(PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ React7.createElement("p", {
+    className: mx4("text-center", descriptionText)
+  }, "Start typing to search") : loading ? /* @__PURE__ */ React7.createElement("p", {
+    className: mx4("text-center", descriptionText)
+  }, "Searching\u2026") : /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(PopoverCombobox.Empty, {
     classNames: [
       "text-center",
       descriptionText
     ]
-  }, "No results"), Object.entries(items).map(([id, { label }]) => /* @__PURE__ */ React3.createElement(PopoverCombobox.Item, {
+  }, "No results"), Object.entries(items).map(([id, { label }]) => /* @__PURE__ */ React7.createElement(PopoverCombobox.Item, {
     key: id,
     value: id,
     onSelect: handleValueChange,
     classNames: "truncate"
-  }, label)))), /* @__PURE__ */ React3.createElement(Popover2.Arrow, null)));
+  }, label)))), /* @__PURE__ */ React7.createElement(Popover2.Arrow, null)));
 };
 
 // packages/ui/react-ui-table/src/helpers.tsx
@@ -609,239 +565,341 @@ import { Check as Check2, ClipboardText, X as X2 } from "@phosphor-icons/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import format from "date-fns/format";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
-import defaultsDeep from "lodash.defaultsdeep";
-import React4, { useRef as useRef3, useState as useState4 } from "react";
+import React8, { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
 import { Input as Input2, Tooltip } from "@dxos/react-ui";
-import { getSize as getSize3, mx as mx4 } from "@dxos/react-ui-theme";
-import { stripUndefinedValues } from "@dxos/util";
-var findNextFocusable = (findFirstFocusable, container) => {
-  const next = findFirstFocusable(container);
-  if (next) {
-    if (next?.tagName === "INPUT") {
-      return next;
-    }
-    if (container.nextElementSibling) {
-      return findNextFocusable(findFirstFocusable, container.nextSibling);
-    }
-  }
-};
+import { getSize as getSize3, mx as mx5 } from "@dxos/react-ui-theme";
 var createColumnBuilder = () => ({
   helper: createColumnHelper(),
   builder: new ColumnBuilder()
 });
-var defaults = (options, ...sources) => {
-  return stripUndefinedValues(defaultsDeep({}, options, ...sources));
+var ComboboxBuilderCell = (cellContext) => {
+  const { model, onUpdate } = cellContext.column.columnDef.meta;
+  return model ? /* @__PURE__ */ React8.createElement(CellCombobox, {
+    model,
+    value: cellContext.getValue(),
+    onValueChange: (value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)
+  }) : null;
+};
+var StringBuilderCell = (cellContext) => {
+  const { onUpdate } = cellContext.column.columnDef.meta;
+  const initialValue = cellContext.getValue();
+  const [value, setValue] = useState4(initialValue);
+  const inputRef = useRef2(null);
+  const handleSave = () => {
+    if (value === initialValue) {
+      return;
+    }
+    onUpdate?.(cellContext.row.original, cellContext.column.id, value);
+  };
+  const handleCancel = () => {
+    setValue(initialValue);
+  };
+  const rows = cellContext.table.getRowModel().flatRows;
+  const columns = cellContext.table.getVisibleFlatColumns();
+  const placeholder = cellContext.row.index === rows.length - 1 && columns[0].id === cellContext.column.id;
+  return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.TextInput, {
+    ref: inputRef,
+    variant: "subdued",
+    placeholder: placeholder ? "Add row..." : void 0,
+    classNames: [
+      "is-full",
+      textPadding
+    ],
+    value: value ?? "",
+    onBlur: () => handleSave(),
+    onChange: (event) => setValue(event.target.value),
+    onKeyDown: (event) => event.key === "Enter" && handleSave() || event.key === "Escape" && handleCancel()
+  }));
+};
+var parseNumber = (text) => text?.trim().length ? Number(text) : NaN;
+var displayNumber = (value, digits) => value || value === 0 ? value.toLocaleString(void 0, {
+  minimumFractionDigits: digits ?? 0,
+  maximumFractionDigits: digits ?? 2
+}) : "";
+var NumberBuilderCell = (cellContext) => {
+  const { onUpdate, digits } = cellContext.column.columnDef.meta;
+  const value = cellContext.getValue();
+  const [text, setText] = useState4(displayNumber(value, digits));
+  const { findPrevFocusable } = useFocusFinders();
+  const ref = useRef2(null);
+  useEffect2(() => {
+    (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
+  }, [
+    digits,
+    value
+  ]);
+  const handleEdit = () => {
+    if (onUpdate) {
+      setText(value !== void 0 ? String(value) : "");
+    }
+  };
+  const handleSave = () => {
+    const nextValue = parseNumber(text);
+    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(nextValue) ? void 0 : nextValue);
+    setText(displayNumber(nextValue, digits));
+    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
+  };
+  const _handleCancel = () => {
+    setText(displayNumber(value, digits));
+    ref.current && findPrevFocusable(ref.current)?.focus();
+  };
+  return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.TextInput, {
+    ref,
+    variant: "subdued",
+    value: text,
+    classNames: [
+      "is-full text-end font-mono",
+      textPadding
+    ],
+    onBlur: handleSave,
+    onFocus: handleEdit,
+    onChange: ({ target: { value: value2 } }) => setText(value2),
+    onKeyDown: (event) => {
+      return (
+        /* (event.key === 'Escape' && handleCancel()) || */
+        event.key === "Enter" && handleSave()
+      );
+    }
+  }));
+};
+var RowSelectorBuilderCell = (cellContext) => {
+  const { cell } = cellContext.column.columnDef.meta;
+  const { row } = cellContext;
+  const checked = row.getCanSelect() ? row.getIsSelected() : row.getCanSelectSubRows() && (row.getIsSomeSelected() ? "indeterminate" : row.getIsAllSubRowsSelected());
+  return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.Checkbox, {
+    size: 4,
+    classNames: [
+      "mli-auto",
+      cell?.classNames
+    ],
+    checked,
+    onCheckedChange: (event) => {
+      if (row.getCanSelect()) {
+        row.getToggleSelectedHandler()(event);
+      }
+    },
+    disabled: !(row.getCanSelect() || row.getCanSelectSubRows())
+  }));
+};
+var SwitchBuilderCell = (cellContext) => {
+  const { onUpdate } = cellContext.column.columnDef.meta;
+  const value = cellContext.getValue();
+  return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.Switch, {
+    classNames: "block mli-auto",
+    onClick: (event) => event.stopPropagation(),
+    disabled: !onUpdate,
+    checked: !!value,
+    onCheckedChange: (value2) => {
+      onUpdate?.(cellContext.row.original, cellContext.column.id, !!value2);
+    }
+  }));
 };
 var ColumnBuilder = class {
   /**
-  * Select value
+  * Combobox value
   */
-  select({ label, className, model, onUpdate, ...props }) {
-    return defaults(props, {
+  combobox({ label, classNames, model, onUpdate, ...props }) {
+    return {
       minSize: 100,
       header: (column) => {
-        return /* @__PURE__ */ React4.createElement("div", {
-          className: "truncate"
-        }, label ?? column.header.id);
+        return label ?? column.header.id;
       },
-      cell: model && onUpdate ? (cell) => /* @__PURE__ */ React4.createElement(ComboboxCell, {
+      cell: model && onUpdate ? ComboboxBuilderCell : (cellContext) => {
+        const cellValue = cellContext.getValue();
+        return /* @__PURE__ */ React8.createElement("div", {
+          className: mx5("truncate", classNames)
+        }, cellValue ? model?.getText(cellValue) : "");
+      },
+      ...props,
+      meta: {
+        ...props.meta,
         model,
-        value: cell.getValue(),
-        onValueChange: (value) => onUpdate?.(cell.row.original, cell.column.id, value)
-      }) : (cell) => {
-        const value = cell.getValue();
-        return /* @__PURE__ */ React4.createElement("div", {
-          className: mx4("truncate", className)
-        }, value ? model.getText(value) : "");
+        onUpdate,
+        cell: {
+          classNames,
+          ...props.meta?.cell
+        }
       }
-    });
+    };
   }
   /**
   * String formats.
   */
-  string({ label, className, onUpdate, ...props } = {}) {
-    return defaults(props, {
+  string({ label, classNames, onUpdate, ...props } = {}) {
+    return {
       minSize: 100,
       // TODO(burdon): Default.
       header: (column) => {
-        return /* @__PURE__ */ React4.createElement("div", {
-          className: "truncate"
-        }, label ?? column.header.id);
+        return label ?? column.header.id;
       },
-      cell: onUpdate ? (cell) => {
-        const initialValue = cell.getValue();
-        const [value, setValue] = useState4(initialValue);
-        const inputRef = useRef3(null);
-        const { findFirstFocusable } = useFocusFinders();
-        const handleSave = (focusNext = false) => {
-          if (value === initialValue) {
-            return;
-          }
-          onUpdate?.(cell.row.original, cell.column.id, value);
-          if (focusNext) {
-            const rowElement = inputRef.current?.parentElement?.parentElement;
-            setTimeout(() => {
-              const next = findNextFocusable(findFirstFocusable, rowElement);
-              next?.focus();
-            });
-          }
-        };
-        const handleCancel = () => {
-          setValue(initialValue);
-        };
-        const rows = cell.table.getRowModel().flatRows;
-        const columns = cell.table.getVisibleFlatColumns();
-        const placeholder = cell.row.index === rows.length - 1 && columns[0].id === cell.column.id;
-        return /* @__PURE__ */ React4.createElement(Input2.Root, null, /* @__PURE__ */ React4.createElement(Input2.TextInput, {
-          ref: inputRef,
-          variant: "subdued",
-          placeholder: placeholder ? "Add row..." : void 0,
-          classNames: "px-2",
-          value: value ?? "",
-          onBlur: () => handleSave(false),
-          onChange: (event) => setValue(event.target.value),
-          onKeyDown: (event) => event.key === "Enter" && handleSave(true) || event.key === "Escape" && handleCancel()
-        }));
-      } : (cell) => {
+      cell: onUpdate ? StringBuilderCell : (cell) => {
         const value = cell.getValue();
-        return /* @__PURE__ */ React4.createElement("div", {
-          className: mx4("truncate", className)
+        return /* @__PURE__ */ React8.createElement("div", {
+          className: mx5("truncate", textPadding, classNames)
         }, value);
+      },
+      ...props,
+      meta: {
+        ...props.meta,
+        onUpdate,
+        cell: {
+          ...props.meta?.cell,
+          classNames
+        }
       }
-    });
+    };
   }
   /**
   * Number formats.
   */
-  number({ label, minSize, className, digits, onUpdate, ...props } = {}) {
-    return defaults(props, {
+  number({ label, minSize, classNames, digits, onUpdate, ...props } = {}) {
+    return {
       size: 100,
       minSize: 100,
-      header: (cell) => /* @__PURE__ */ React4.createElement("div", {
-        className: "w-full truncate text-right"
-      }, label ?? cell.header.id),
-      cell: (cell) => {
-        const value = cell.getValue();
-        const [text, setText] = useState4();
-        const handleEdit = () => {
-          if (onUpdate) {
-            setText(value !== void 0 ? String(value) : "");
-          }
-        };
-        const handleSave = () => {
-          const value2 = text?.trim().length ? Number(text) : NaN;
-          onUpdate?.(cell.row.original, cell.column.id, isNaN(value2) ? void 0 : value2);
-          setText(void 0);
-        };
-        const handleCancel = () => {
-          setText(void 0);
-        };
-        if (text !== void 0) {
-          return /* @__PURE__ */ React4.createElement("div", {
-            className: mx4("grow text-right font-mono", className)
-          }, /* @__PURE__ */ React4.createElement(Input2.Root, null, /* @__PURE__ */ React4.createElement(Input2.TextInput, {
-            autoFocus: true,
-            value: text,
-            classNames: "px-2",
-            onBlur: handleSave,
-            onChange: (event) => setText(event.target.value),
-            onKeyDown: (event) => event.key === "Escape" && handleCancel() || event.key === "Enter" && handleSave()
-          })));
+      header: (cell) => label ?? cell.header.id,
+      cell: NumberBuilderCell,
+      ...props,
+      meta: {
+        ...props.meta,
+        onUpdate,
+        digits,
+        header: {
+          classNames: "text-end",
+          ...props.meta?.header
+        },
+        cell: {
+          ...props.meta?.cell,
+          classNames
         }
-        return /* @__PURE__ */ React4.createElement("div", {
-          className: mx4('grow w-full text-right font-mono empty:after:content-["\xA0"]', className),
-          onClick: handleEdit
-        }, value?.toLocaleString(void 0, {
-          minimumFractionDigits: digits ?? 0,
-          maximumFractionDigits: digits ?? 2
-        }));
       }
-    });
+    };
   }
   /**
   * Date formats.
   */
   // TODO(burdon): Date picker (pluggable renderers?)
-  date({ label, format: formatSpec, relative, className, ...props } = {}) {
-    return defaults(props, {
+  date({ label, format: formatSpec, relative, classNames, ...props } = {}) {
+    return {
       size: 220,
       minSize: 100,
-      header: (cell) => /* @__PURE__ */ React4.createElement("div", null, label ?? cell.header.id),
+      header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
         try {
           const str = value ? formatSpec ? format(value, formatSpec) : relative ? formatDistanceToNow(value, {
             addSuffix: true
           }) : value.toISOString() : void 0;
-          return /* @__PURE__ */ React4.createElement("div", {
-            className: mx4("font-mono", className)
+          return /* @__PURE__ */ React8.createElement("div", {
+            className: mx5(textPadding, classNames)
           }, str);
         } catch (err) {
           console.log(value);
           return null;
         }
+      },
+      ...props,
+      meta: {
+        ...props.meta,
+        cell: {
+          ...props.meta?.cell,
+          classNames
+        }
       }
-    });
+    };
   }
   /**
   * PublicKey with tooltip.
   */
-  key({ label, tooltip, ...props } = {}) {
-    return defaults(props, {
-      size: 86,
-      minSize: 86,
-      header: (cell) => /* @__PURE__ */ React4.createElement("div", null, label ?? cell.header.id),
+  key({ label, tooltip, classNames, ...props } = {}) {
+    return {
+      size: 94,
+      minSize: 94,
+      header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
         if (!value) {
           return;
         }
-        const element = /* @__PURE__ */ React4.createElement("div", {
-          className: "font-mono font-thin text-green-500 dark:text-green-300"
-        }, value.truncate());
+        const element = value.truncate();
         if (!tooltip) {
           return element;
         }
-        return /* @__PURE__ */ React4.createElement("div", {
-          className: "group inline-flex gap-2 items-center"
-        }, /* @__PURE__ */ React4.createElement(Tooltip.Provider, null, /* @__PURE__ */ React4.createElement(Tooltip.Root, null, /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
-          asChild: true
-        }, element), /* @__PURE__ */ React4.createElement(Tooltip.Content, {
+        return /* @__PURE__ */ React8.createElement(Tooltip.Provider, null, /* @__PURE__ */ React8.createElement(Tooltip.Root, null, /* @__PURE__ */ React8.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React8.createElement(Tooltip.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip.Content, {
           side: "right"
-        }, /* @__PURE__ */ React4.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React4.createElement(ClipboardText, {
+        }, /* @__PURE__ */ React8.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React8.createElement(ClipboardText, {
           onClick: (ev) => {
             ev.stopPropagation();
             void navigator.clipboard.writeText(value.toHex());
           }
         })))));
+      },
+      ...props,
+      meta: {
+        ...props.meta,
+        cell: {
+          ...props.meta?.cell,
+          classNames: [
+            "font-mono",
+            textPadding,
+            classNames
+          ]
+        }
       }
-    });
+    };
   }
   /**
-  * Checkbox.
+  * Row selector
   */
-  checkbox({ label, className, onUpdate, ...props } = {}) {
-    return defaults(props, {
-      size: 40,
-      minSize: 40,
-      header: (column) => /* @__PURE__ */ React4.createElement("div", {
-        className: "flex grow justify-center"
-      }, label ?? column.header.id),
-      cell: (cell) => {
-        const value = cell.getValue();
-        return /* @__PURE__ */ React4.createElement("div", {
-          className: "flex grow justify-center"
-        }, /* @__PURE__ */ React4.createElement(Input2.Root, null, /* @__PURE__ */ React4.createElement(Input2.Checkbox, {
-          onClick: (event) => event.stopPropagation(),
-          classNames: className,
-          disabled: !onUpdate,
-          checked: !!value,
-          onCheckedChange: (value2) => {
-            onUpdate?.(cell.row.original, cell.column.id, !!value2);
-          }
-        })));
+  selectRow({ classNames, onUpdate, id = "selectRow" } = {}) {
+    return {
+      id,
+      size: 32,
+      minSize: 32,
+      maxSize: 32,
+      meta: {
+        onUpdate,
+        cell: {
+          classNames
+        }
+      },
+      header: ({ table }) => {
+        const { rowsSelectable } = useTableContext("HELPER_SELECT_ROW_HEADER_CELL");
+        const checked = table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected();
+        return rowsSelectable === "multi" ? /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.Checkbox, {
+          size: 4,
+          classNames: [
+            "mli-auto",
+            classNames
+          ],
+          checked,
+          onCheckedChange: () => table.toggleAllRowsSelected()
+        })) : null;
+      },
+      cell: RowSelectorBuilderCell
+    };
+  }
+  /**
+  * Switch
+  */
+  switch({ label, classNames, onUpdate, ...props } = {}) {
+    return {
+      size: 50,
+      minSize: 50,
+      header: (column) => label ?? column.header.id,
+      cell: SwitchBuilderCell,
+      ...props,
+      meta: {
+        ...props.meta,
+        onUpdate,
+        cell: {
+          ...props.meta?.cell,
+          classNames: [
+            textPadding,
+            classNames
+          ]
+        }
       }
-    });
+    };
   }
   /**
   * Icon based on boolean value.
@@ -849,41 +907,56 @@ var ColumnBuilder = class {
   icon({ label, size, on, off, ...props } = {}) {
     const IconOn = on?.Icon ?? Check2;
     const IconOff = off?.Icon ?? X2;
-    return defaults(props, {
+    return {
       size: size ?? 32,
-      header: (column) => /* @__PURE__ */ React4.createElement("div", {
+      header: (column) => /* @__PURE__ */ React8.createElement("div", {
         className: "justify-center"
       }, label ?? column.header.id),
       cell: (cell) => {
         const value = cell.getValue();
         if (value) {
-          return /* @__PURE__ */ React4.createElement("div", {
-            className: "flex grow justify-center"
-          }, /* @__PURE__ */ React4.createElement(IconOn, {
-            className: mx4(getSize3(6), on?.className ?? "text-green-700")
-          }));
+          return /* @__PURE__ */ React8.createElement(IconOn, {
+            className: mx5("block mli-auto", getSize3(6), on?.className ?? "text-green-700")
+          });
         } else if (value === false) {
-          return /* @__PURE__ */ React4.createElement("div", {
-            className: "flex grow justify-center"
-          }, /* @__PURE__ */ React4.createElement(IconOff, {
-            className: mx4(getSize3(6), off?.className ?? "text-red-700")
-          }));
+          return /* @__PURE__ */ React8.createElement(IconOff, {
+            className: mx5("block mli-auto", getSize3(6), off?.className ?? "text-red-700")
+          });
         } else {
           return null;
         }
-      }
-    });
+      },
+      ...props
+    };
   }
 };
 export {
+  CellCombobox,
   ColumnBuilder,
   ColumnMenu,
   ColumnPanel,
-  ComboboxCell,
   Table,
-  columnTypes,
   createColumnBuilder,
-  defaultTableSlots,
-  updateSelection
+  currentRow,
+  flushPadding,
+  gridCellFocusRing,
+  groupTh,
+  headPadding,
+  selectedRow,
+  tableRoot,
+  tbodyRoot,
+  tbodyTr,
+  tdContent,
+  tdRoot,
+  textPadding,
+  tfootRoot,
+  tfootTh,
+  tfootTr,
+  theadResizeRoot,
+  theadResizeThumb,
+  theadRoot,
+  theadTh,
+  theadTr,
+  translations_default as translations
 };
 //# sourceMappingURL=index.mjs.map