@jielga/tmdatagrid 2.0.0-beta.4 → 2.0.0-beta.7

package/skills/editing/references/common-mistakes.md

@@ -73,14 +73,52 @@ meta: { edit: { editor: SalaryEditor } },
 
 Source: `src/docs/editors.md`, `src/tmdatagrid/core/editEngine.ts`.
 
+## HIGH A custom editor that binds no error text
+
+The built-in editors bind the field's first error to the input's `error` prop.
+A custom editor that binds nothing still blocks the commit, but all the user
+sees is `data-invalid` on the cell - the row stays open with no message
+anywhere on screen, which reads as a broken grid rather than a rejected value.
+
+Wrong:
+
+```tsx
+const SalaryEditor: TMDataGridEditorComponent = ({ field, commit }) => (
+  <Slider value={field.state.value} onChange={field.handleChange} onChangeEnd={() => void commit()} />
+);
+```
+
+Correct:
+
+```tsx
+const SalaryEditor: TMDataGridEditorComponent = ({ field, commit }) => {
+  const error = field.state.meta.errors
+    .map((e) => (typeof e === "string" ? e : e?.message))
+    .find(Boolean);
+  return (
+    <Slider
+      value={field.state.value}
+      onChange={field.handleChange}
+      onChangeEnd={() => void commit()}
+      error={error}
+    />
+  );
+};
+```
+
+An entry of `field.state.meta.errors` is a string from a function validator,
+or an issue carrying a `message` from a schema.
+
+Source: `src/docs/editors.md` (Writing your own).
+
 ## HIGH A cross-field rule under `editing.mode: "cell"`
 
 Under `"cell"` each cell commits on its own, so a rule spanning two columns
 cannot be satisfied by either one: the first cell edited is rejected against the
 other column's old value, and the row cannot be saved.
 
-Correct: `editing.rowValidators` needs `mode: "row"` or `"draft"`, which
-validate the whole row in one commit.
+Correct: `editing.rowValidators` needs `mode: "row"`, which validates the
+whole row in one commit.
 
 Source: `src/docs/editors.md` (Validation).
 
@@ -120,9 +158,9 @@ and the grid shows the old value as though nothing happened.
 Wrong:
 
 ```tsx
-onCommit: async ({ rowId, changes }) => {
+onCommit: async ({ rowId, value }) => {
   try {
-    await api.patch(rowId, changes);
+    await api.put(rowId, value);
   } catch (error) {
     console.error(error);
   }
@@ -137,7 +175,8 @@ Source: `src/tmdatagrid/useTMDataGrid.tsx` (`TMDataGridEditingCallbacks`).
 ## HIGH Submitting an outer form while the grid holds a draft
 
 The outer form's array contains only committed rows. Under any mode a mid-edit
-row is invisible to it, and under `"draft"` every edit is until `saveDrafts()`,
+row is invisible to it, and under `draft: true` every edit is until
+`saveDrafts()`,
 so a form submit saves stale rows and collection rules skip pending values.
 
 Correct:
@@ -154,6 +193,57 @@ if (flushed) await form.handleSubmit();
 
 Source: `src/docs/query-builder.md` (Which mode, Submitting).
 
+## HIGH A bulk write built from `begin`, `getForm` and `commit`
+
+`edit.setCellValue(rowId, columnId, value)` writes one cell and commits its row, so a fill over the selection is one call per row.
+Reaching instead for `begin`, then `getForm(rowId)?.setFieldValue(...)`, then `commit` looks equivalent and is not: under `editing.mode: "cell"`, `begin` defers behind a pending commit whenever another row is open, so `getForm(rowId)` returns `undefined` immediately after it and the optional chain writes nothing.
+The `commit` that follows finds no form and resolves `true`, reporting a write that never happened.
+
+Wrong:
+
+```tsx
+for (const row of grid.table.getSelectedRowModel().rows) {
+  grid.edit.begin({ rowId: row.id, columnId: "targetPct" });
+  grid.edit.getForm(row.id)?.setFieldValue("targetPct", next(row.original));
+  await grid.edit.commit(row.id);
+}
+```
+
+Correct:
+
+```tsx
+for (const row of grid.table.getSelectedRowModel().rows) {
+  await grid.edit.setCellValue(row.id, "targetPct", next(row.original));
+}
+
+// Several cells of one row: one commit, one draft entry.
+await grid.edit.setRowValues(rowId, { status: "Closed", closedOn: today() });
+```
+
+Both write the stored value through the row's form, so `meta.edit.mapValue` does not run - no editor is involved - while `meta.edit.validate` does, at the commit.
+A refused value leaves the row open carrying its errors and the call resolves `false`, so read the result rather than assuming the fill landed.
+
+Source: `src/tmdatagrid/core/editEngine.ts` (`begin`, `writeFields`).
+
+## MEDIUM A computed column frozen while a row is edited
+
+A held draft is displayed by the column that owns the field. A column computed
+from other fields - `accessorFn` or `display` - reads `row.original`, which is
+`data`, so it keeps showing the saved record while the values it derives from
+are being typed.
+
+Correct: read the drafted row from `edit.store` inside the cell renderer:
+
+```tsx
+function useDraftedRow(rowId: string, original: Product): Product {
+  const { edit } = useTMDataGridContext();
+  const values = useSelector(edit.store, (state) => state.rows[rowId]?.values);
+  return (values as Product | undefined) ?? original;
+}
+```
+
+Source: `src/docs/editing.md` (Draft lifetime).
+
 ## MEDIUM Reading a commit's result as the saved value
 
 `edit.commit(rowId)`, `edit.commitAll()` and `edit.saveDrafts()` resolve to a
@@ -168,10 +258,10 @@ notifications.show({ message: saved ? "Saved" : "Some rows need attention" });
 
 Source: `src/tmdatagrid/core/editEngine.ts` (`TMDataGridEditApi`).
 
-## MEDIUM Expecting `editing.onRowDelete` to fire under draft
+## MEDIUM Expecting `editing.onRowDelete` to fire under a draft store
 
-Under the immediate modes `edit.deleteRow` calls `editing.onRowDelete` at once.
-Under `"draft"` it only toggles a deletion mark, so nothing is removed until
+Without `editing.draft`, `edit.deleteRow` calls `editing.onRowDelete` at once.
+Under `draft: true` it only toggles a deletion mark, so nothing is removed until
 `saveDrafts`: the ids arrive as `deleted` in `editing.onSaveDrafts`, or, with
 no such callback, in the per-row `editing.onRowDelete` loop. A confirmation
 placed inside `editing.onRowDelete` therefore guards the save, not the trash.

package/skills/editing/references/editing-api.md

@@ -8,27 +8,30 @@ kind.
 | Name | Type | Default | What it does |
 | --- | --- | --- | --- |
 | `editing` | `TMDataGridEditingOptions` | off | The editing namespace. Setting it turns editing on. |
-| `editing.mode` | `"cell" \| "cellConfirm" \| "row" \| "draft"` | – | Picks the commit policy. |
+| `editing.mode` | `"cell" \| "cellConfirm" \| "row"` | – | What counts as a commit, and which controls trigger it. |
+| `editing.draft` | `boolean` | `false` | Where a commit goes. On, it parks in the grid's draft store until `edit.saveDrafts()`. |
 | `getRowId` | `(row) => string` | – | A TanStack table option, required once `editing` is set. Drafts are keyed by it. |
+| `editing.columns` | `ReadonlyArray<string>` | every column mapping to a data path | The column ids that take edits. Gates before `meta.edit`, never past it: a column left out takes no edits whatever its meta says, and a listed column still answers to its `meta.edit.enabled`. Also decides which cells an entry row opens. |
 | `editing.isRowEditable` | `(row) => boolean` | – | Closes a whole row to editing, in every mode. |
 | `editing.rowValidators` | `TMDataGridRowValidators` | – | Form-level validation. Cross-field rules live here. |
+| `editing.tableValidators` | `TMDataGridTableValidators` | – | Cross-row rules, handed the collection with every draft overlaid. |
 | `editing.newRowDefaults` | `TData \| (() => TData)` | – | Seeds the entry row's form. A function is called per added row. |
-| `editing.newRowsSticky` | `boolean` | `false` | Draft mode only. Keeps entered new rows pinned in the entry block until Save all, instead of letting them scroll with the body. |
+| `editing.newRowsSticky` | `boolean` | `false` | `draft: true` only. Keeps entered new rows pinned in the entry block until the save, instead of letting them scroll with the body. |
 | `cellSelection` | `"none" \| "single" \| "range"` | `"single"` while `editing` is set | Editing turns the cell cursor on; set it explicitly to override. |
 
 Passing any other member of `editing` without `mode` is a compile error, and
-`onSaveDrafts` and `newRowsSticky` exist only in the `"draft"` branch of the
-type.
+`onSaveDrafts` and `newRowsSticky` exist only in the `draft: true` branch of
+the type.
 
 ## Callbacks
 
 | Name | Argument | What it does |
 | --- | --- | --- |
 | `editing.onCommit` | `{ rowId, value, original, changes, source }` | Applies one row's change. Reject to keep the draft and show the error. |
-| `editing.onSaveDrafts` | `{ rows, added, deleted }` | Draft mode only. One call for the whole draft store. Without it, `saveDrafts` loops `editing.onCommit`, `editing.onRowAdd` and `editing.onRowDelete`. |
-| `editing.onCommitDrafts` | `{ rows, added, deleted }` | **Deprecated** - renamed to `onSaveDrafts`. Still honoured; the new name wins if both are set. |
+| `editing.onSaveDrafts` | `{ updated, created, deleted }` | `draft: true` only. One call for the whole draft store. Without it, `saveDrafts` loops `editing.onCommit`, `editing.onRowAdd` and `editing.onRowDelete`. |
+| `editing.onCommitDrafts` | `{ updated, created, deleted }` | **Deprecated** - renamed to `onSaveDrafts`. Still honoured; the new name wins if both are set. |
 | `editing.onRowAdd` | `{ tempId, value }` | Commits an entry row. Mint the real id here. |
-| `editing.onRowDelete` | `{ rowId, row }` | Deletes a row under the immediate modes, and puts the trash can in the edit lane. |
+| `editing.onRowDelete` | `{ rowId, row }` | Deletes a row. Shows the trash; under `draft: true`, `onSaveDrafts` shows it too. |
 
 `changes` entries are `{ columnId, field, previous, next }`; `field` is the data
 path, which may be dotted.
@@ -51,7 +54,7 @@ path, which may be dotted.
 | Member | Signature | Notes |
 | --- | --- | --- |
 | `begin` | `({ rowId, columnId }) => void` | Row mode opens the entire row either way. `columnId` selects which cell takes the caret; `null` (the pencil) uses its first editable one. On a committed row it reopens it, taking it back out of the draft store. |
-| `commit` | `(rowId) => Promise<boolean>` | The OK gesture: submits the row's form. `false` keeps it open with its errors. Under `"draft"` a pass puts the row in the draft store - no consumer callback runs until `saveDrafts`. Column rules run whether or not an editor is mounted. |
+| `commit` | `(rowId) => Promise<boolean>` | The OK gesture: submits the row's form. `false` keeps it open with its errors, and the message outlives the editor that found it. Under `draft: true` a pass parks the row - no consumer callback runs until `saveDrafts`. Column rules run whether or not an editor is mounted. |
 | `commitAll` | `() => Promise<boolean>` | Submits every open row. Rows that fail stay open. `false` when one did. |
 | `saveDrafts` | `() => Promise<boolean>` | Sends the draft store. Open rows are left alone and stay open. |
 | `cancel` | `(rowId) => void` | Drops one draft. |
@@ -59,11 +62,14 @@ path, which may be dotted.
 | `deactivate` | `() => void` | Closes the editor without touching the draft, as blur does under `"cellConfirm"`. |
 | `submitAll` | `() => Promise<boolean>` | **Deprecated** - `commitAll()` then `saveDrafts()`. |
 | `clearCell` | `(rowId, columnId) => Promise<boolean>` | What Delete does: writes the type's empty value and commits. |
+| `setCellValue` | `(rowId, columnId, value) => Promise<boolean>` | Writes one cell and commits the row, with no editor - toolbar actions and bulk fills. The row need not be mounted; a row inside a collapsed group takes the write. `value` is the stored value, so `meta.edit.mapValue` does not run and `meta.edit.validate` does. Under `draft: true` the row parks like any hand-made edit. `false` when the cell takes no edit, or when validation refused the value and left the row open with its errors. |
+| `setRowValues` | `(rowId, values) => Promise<boolean>` | `setCellValue` for several cells of one row in a single commit - one consumer call and one draft entry. Keys are column ids. All or nothing: if any named cell takes no edit, nothing is written and it resolves `false`. |
 | `addRow` | `(values?) => string` | Opens an entry row, returns its `tempId`. `values` overrides `editing.newRowDefaults` key by key for that row; with no argument the row is `newRowDefaults` alone. |
 | `addRows` | `(rows, options?) => Promise<{ committed, open }>` | Opens a batch in one write, each row seeded as `addRow` seeds. `{ commit: true }` submits each as it lands - valid rows commit, invalid ones stay open with their errors. |
-| `deleteRow` | `(rowId) => void` | `editing.onRowDelete` under the immediate modes, a deletion mark under draft mode. Toggles: a second call restores the row. |
-| `canEditCell` | `(row, column) => boolean` | The check the built-in controls use. |
+| `deleteRow` | `(rowId) => void` | `editing.onRowDelete`, or a deletion mark under `draft: true`. Toggles: a second call restores the row. |
+| `canEditCell` | `(row, column) => boolean` | The check the built-in controls use. Both halves: the column's and the row's. |
 | `canEditRow` | `(row) => boolean` | The pencil's gate. |
+| `isColumnEditable` | `(column) => boolean` | The column's half alone, with no row in hand: it maps to a field, `editing.columns` lists it when that is set, and `meta.edit.enabled` is not `false`. |
 | `canDeleteRows` | `() => boolean` | Whether the delete control should be shown. |
 | `getForm` | `(rowId) => TMDataGridRowEditForm \| undefined` | The row's live `FormApi`. |
 | `state` | `TMDataGridEditState` | Snapshot, for reads outside React. |
@@ -91,10 +97,10 @@ type TMDataGridEditState = {
     }
   >;
   // The draft store's edit slice: existing rows whose form passed its submit,
-  // parked for `saveDrafts`. Empty outside `"draft"`.
+  // parked for `saveDrafts`. Empty without `editing.draft`.
   committedRowIds: ReadonlyArray<string>;
-  // `committed` is draft mode's "in the store, awaiting the save". Under the
-  // immediate modes a commit adds through `onRowAdd`, so it stays `false`.
+  // `committed` is "in the store, awaiting the save". Without `editing.draft`
+  // a commit adds through `onRowAdd`, so it stays `false`.
   newRows: ReadonlyArray<{ tempId: string; committed: boolean }>;
   deletedRowIds: ReadonlyArray<string>;
 };
@@ -104,8 +110,8 @@ type TMDataGridEditState = {
 
 | Name | Kind | What it is |
 | --- | --- | --- |
-| `TMDataGrid.EditActions` | Component | Save with the pending count, and Discard. Any mode; renders nothing while editing is off. Takes `renderActions` over `{ state, actions, Controls }`. |
-| `TMDataGridEditActions` | Export | The same component, for use outside the namespace. |
+| `TMDataGrid.DraftActions` | Component | Save with the draft-store count, Discard, and a note counting the rows still open. Any mode; renders nothing while editing is off. Takes `renderActions` over `{ state, actions, Controls }` - `state.openRowIds` and `actions.scrollToFirstOpenRow(align?)` reach the rows left open. |
+| `TMDataGridDraftActions` | Export | The same component, for use outside the namespace. |
 | `EDIT_COLUMN_ID` | Export | `"__edit__"`, the generated edit lane's id. |
 | `clearedValueForType` | Export | `(type) => unknown` - what Delete writes per column type. |
 | `getEditFieldName` | Export | `(column) => string` - the data path a column's edits write to. |
@@ -125,20 +131,24 @@ Generated, pinned right, id `EDIT_COLUMN_ID`. It appears when any of these
 holds:
 
 - `editing.mode: "row"` - the lane is Save and Cancel's home
-- `editing.mode: "draft"` - the lane is the change indicator and the per-row
-  revert, and `editing.onSaveDrafts` is not required for it
+- `editing.draft` - the lane is the change indicator and the per-row revert,
+  and `editing.onSaveDrafts` is not required for it
 - `editing.onRowDelete` is set - the trash can has somewhere to report to
 
-`"cell"` and `"cellConfirm"` have no lane unless `editing.onRowDelete` asks for
-one.
+`"cell"` and `"cellConfirm"` have no lane unless `editing.draft` or
+`editing.onRowDelete` asks for one.
 
-What the lane holds depends on the mode. Under `"row"` an open row shows
-`save-row` and `cancel-row`; those two never render under `"draft"`. Under
-`"draft"` every changed row shows `row-state`, whose `data-state` is `new`,
-`edited` or `deleted`, together with `revert-row` on an edited row,
-`restore-row` on one marked for deletion, and `edit-row` plus `discard-new-row`
-on an entered new row. A row holding a dirty draft hides `delete-row`. Every
-control carries a tooltip from the labels, `revertRow`, `rowStateNew`,
+The trash itself shows when the deletion has somewhere to report to:
+`onRowDelete` is set, or under `draft: true`, `onSaveDrafts` is - a deletion
+mark is part of the save.
+
+What the lane holds follows the row's state, one axis each. An open row shows
+the mode's own controls, `save-row` and `cancel-row`. A parked row shows
+`row-state` instead, whose `data-state` is `new`, `edited` or `deleted`,
+together with `revert-row` on an edited row, `restore-row` on one marked for
+deletion, and `edit-row` plus `discard-new-row` on an entered new row - never a
+save, which the engine would only park again. A parked row hides `delete-row`.
+Every control carries a tooltip from the labels, `revertRow`, `rowStateNew`,
 `rowStateEdited` and `rowStateDeleted` among them.
 
 ## Styling and test hooks
@@ -147,16 +157,16 @@ control carries a tooltip from the labels, `revertRow`, `rowStateNew`,
 | --- | --- | --- |
 | `--dg-entry-height` | CSS variable | Height of the sticky entry block. From `size`. |
 | `--dg-row-new-bg` | CSS variable | Background of an entered new row. A green tint. |
-| `data-deleted` | Row attribute | On a row marked for deletion under draft mode. |
+| `data-deleted` | Row attribute | On a row marked for deletion under `draft: true`. |
 | `data-dirty` | Row attribute | On a body row holding a dirty draft. Also on the cell whose field is dirty. |
 | `data-new` / `data-committed` | Entry row attributes | On an entry row; `data-committed` once it is committed, awaiting the save. |
 | `data-dg-entry-flow-block` | Attribute | The in-flow block above the body rows holding entered new rows, unless `editing.newRowsSticky` keeps them in the sticky entry block. |
 | `data-dg-part="editor-input"` | Part | The control inside an editing cell. |
-| `data-dg-part="save-row"` / `"cancel-row"` | Parts | The edit lane's buttons on an open row, with `data-row-id`. Row mode only. |
-| `data-dg-part="row-state"` | Part | Draft mode's change marker, with `data-row-id` and `data-state` of `new`, `edited` or `deleted`. |
+| `data-dg-part="save-row"` / `"cancel-row"` | Parts | The edit lane's buttons on an open row, with `data-row-id`. |
+| `data-dg-part="row-state"` | Part | The draft store's change marker, with `data-row-id` and `data-state` of `new`, `edited` or `deleted`. |
 | `data-dg-part="revert-row"` / `"restore-row"` | Parts | Drops a row's draft, and undoes a deletion mark, with `data-row-id`. |
 | `data-dg-part="edit-row"` / `"delete-row"` | Parts | The idle lane's pencil and trash, with `data-row-id`. `edit-row` also reopens an entered new row. |
 | `data-dg-part="confirm-new-row"` / `"discard-new-row"` | Parts | An entry row's ✓ and ✕, with `data-row-id`. |
-| `data-dg-part="save-all"` / `"discard-all"` | Parts | `EditActions`. |
+| `data-dg-part="save-all"` / `"discard-all"` | Parts | `DraftActions`. |
 
 See the `testing` skill for how to compose these into selectors.

package/skills/editing/references/editors-and-validation.md

@@ -8,14 +8,20 @@ bad value being committed. Both follow from the column.
 `meta.type` picks one, `meta.options` feeds the two select editors from the same
 declaration the filter panel reads.
 
-| `meta.type` | Editor | Export |
-| --- | --- | --- |
-| `"string"` (default) | Text input | `TMDataGridStringEditor` |
-| `"number"` | Number input | `TMDataGridNumberEditor` |
-| `"boolean"` | Checkbox | `TMDataGridBooleanEditor` |
-| `"date"` | Native `<input type="date">`, ISO `YYYY-MM-DD` | `TMDataGridDateEditor` |
-| `"select"` | Searchable select, commits on pick under `"cell"` | `TMDataGridSelectEditor` |
-| `"multiSelect"` | Multi-select, same source | `TMDataGridMultiSelectEditor` |
+| `meta.type` | Editor | Writes | Export |
+| --- | --- | --- | --- |
+| `"string"` (default) | Text input | `string` | `TMDataGridStringEditor` |
+| `"number"` | Number input | `number`, or `null` while the cell is empty or the text is not yet a number | `TMDataGridNumberEditor` |
+| `"boolean"` | Checkbox | `boolean` | `TMDataGridBooleanEditor` |
+| `"date"` | Native `<input type="date">` | A `Date`, or the ISO `"YYYY-MM-DD"` string; `null` when cleared | `TMDataGridDateEditor` |
+| `"select"` | Searchable select, commits on pick under `"cell"` | `string \| null` | `TMDataGridSelectEditor` |
+| `"multiSelect"` | Multi-select, same source | `string[]` | `TMDataGridMultiSelectEditor` |
+
+**Writes** is the value the editor puts into the draft: what `meta.edit.mapValue` is handed, what `meta.edit.validate` checks, and what a commit carries in `value` and in `changes[].next`.
+
+The number editor writes `null` rather than `NaN` while the text does not parse, so a half-typed number leaves the field empty instead of committing a number no rule can describe.
+The date editor picks between its two types once, when it opens, from what the cell held: a `Date` cell keeps receiving `Date`s and a string cell keeps receiving `"YYYY-MM-DD"` strings, so clearing and retyping cannot flip the type.
+A validator for a date column has to accept whichever of the two that column's data holds.
 
 ```tsx
 columnHelper.accessor("department", {
@@ -57,6 +63,12 @@ Bind any control to `field` exactly as inside any TanStack Form:
 `field.state.value`, `field.state.meta.errors`, `field.handleChange`,
 `field.handleBlur`.
 
+Binding `field.state.meta.errors` is what shows a refused commit: the built-in
+editors pass the first error to the input's `error` prop, and an editor that
+binds nothing leaves a blocked save as `data-invalid` on the cell with no
+message on screen. An entry is a string from a function validator, or an issue
+carrying a `message` from a schema.
+
 ```tsx
 import { Slider } from "@mantine/core";
 import type { TMDataGridEditorComponent } from "@jielga/tmdatagrid";
@@ -155,6 +167,9 @@ Left unmapped on purpose:
   edited, mark a pristine row dirty and swallow the select-all.
 - `edit.clearCell()`, the Delete key: it writes the type's empty value through
   the form, so there is no input to map.
+- `edit.setCellValue()` and `edit.setRowValues()`: they write through the form
+  too, and the caller passes the stored value itself. `meta.edit.validate` still
+  runs on the commit.
 - An editor calling `field.setValue`. `handleChange` is the mapped path.
 
 The built-in string and number editors restore the caret after a mapped write,
@@ -209,12 +224,46 @@ const grid = useTMDataGrid({
 ```
 
 Issues with a path land on the matching column's cell; pathless issues land on
-the row. A nested schema's issues follow the same rule, so a `address.city`
-issue lands on the column whose `editField` is `"address.city"`.
+the row, where the message shows in the edit lane's tooltip - on the open
+row's ✓, and on the parked row's marker. A nested schema's issues follow the
+same rule, so a `address.city` issue lands on the column whose `editField` is
+`"address.city"`.
 
 Cross-field rules need a mode that commits the whole row at once. Under `"cell"`
 each cell commits alone, so the rule is evaluated against the other column's
-unedited value and cannot pass. Use `"row"` or `"draft"`.
+unedited value and cannot pass. Use `"row"`.
+
+## Cross-row rules
+
+`editing.tableValidators` holds the rules that need the other rows. Its
+`onSubmit` / `onSubmitAsync` receive `{ value, rowId, isNew, rows }`:
+`value` is the committing row as drafted, and `rows` is
+`Array<{ rowId, value }>` - the collection as it would stand if the commit
+landed, with every draft overlaid, entry rows appended and deletion-marked
+rows removed. `rows` is unfiltered and never contains group rows.
+
+```tsx
+editing: {
+  mode: "cell",
+  draft: true,
+  tableValidators: {
+    onSubmit: ({ value, rowId, rows }) =>
+      rows.some((r) => r.rowId !== rowId && r.value.code === value.code)
+        ? { fields: { code: "Codes must be unique" } }
+        : undefined,
+  },
+}
+```
+
+The result is the `rowValidators` vocabulary: nothing passes, a string is a
+row-level message, `{ form, fields }` lands pathed issues on the committing
+row's cells. `onSubmit` runs first, and its failure stands without
+`onSubmitAsync` running. Errors land on the committing row only.
+
+The rules run at every commit - typed, ✓, `edit.setCellValue`, an entry
+row's - after the row's own validators, and again for every parked row during
+`saveDrafts`: a draft that a later edit invalidated fails there, keeps its
+markers, and the save resolves `false`.
 
 ## Server-side errors
 
@@ -245,9 +294,11 @@ row.
 | The cell's own value | A held draft is displayed: the cell renders the draft value through the column's `cell` renderer, in every mode |
 | Blue cell corner | The field is dirty against its original value |
 | Red cell corner | The field carries a validation error |
-| Row error text | A pathless rule failed, or a commit was rejected |
+| Row error text | A pathless rule failed, or a commit was rejected. In the lane's tooltip: the open row's ✓, or the parked row's marker |
 | `data-dirty` on the row | The row holds a dirty draft |
 
 The same information is readable from `edit.store`: `rows[rowId].dirtyFields`,
-`rows[rowId].errorFields`, `rows[rowId].hasRowError`,
-`rows[rowId].isSubmitting`, and `rows[rowId].values` for the draft itself.
+`rows[rowId].errorFields`, `rows[rowId].errorMessages` (`{ field, message }`
+pairs), `rows[rowId].hasRowError`, `rows[rowId].isSubmitting`, and
+`rows[rowId].values` for the draft itself. The pathless message's text is not
+in the store; read it from `edit.getForm(rowId)?.state.errors`.

package/skills/filtering/SKILL.md

@@ -15,7 +15,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.4'
+  library_version: '2.0.0-beta.7'
 sources:
   - 'Jielga/TMDataGrid:src/docs/filtering.md'
   - 'Jielga/TMDataGrid:src/docs/quick-search.md'

package/skills/getting-started/SKILL.md

@@ -4,14 +4,14 @@ description: >
   Set up TMDataGrid, a compound React data grid built on TanStack Table v9 and
   Mantine. Covers useTMDataGrid, the TMDataGrid root, context, the component
   catalog (Table, Footer, Toolbar, Spacer, SummaryCount, Search,
-  LoadingIndicator, EditActions, FilterButton, ColumnsButton, FilterPanel,
+  LoadingIndicator, DraftActions, FilterButton, ColumnsButton, FilterPanel,
   FilterPills, ColumnsPanel), the size scale and the bounded-height layout
   requirement. Load when adding a grid, choosing which parts to render, or when
   rows do not appear.
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.4'
+  library_version: '2.0.0-beta.7'
 sources:
   - 'Jielga/TMDataGrid:src/docs/getting-started.md'
   - 'Jielga/TMDataGrid:src/docs/anatomy.md'
@@ -156,7 +156,7 @@ flex column.
 | `TMDataGrid.SummaryCount` | `children` | Visible rows out of total. |
 | `TMDataGrid.Search` | `placeholder`, `debounce` (default `250`), `w` (default `220`) | Quick search over every column, debounced into `globalFilter`. Renders nothing under `enableGlobalFilter: false`. |
 | `TMDataGrid.LoadingIndicator` | - | Small spinner while `meta.loading` is `true` and rows stay on screen. |
-| `TMDataGrid.EditActions` | `renderActions` | Save with the pending count, and Discard. Renders nothing while editing is off - see the `editing` skill. |
+| `TMDataGrid.DraftActions` | `renderActions` | Save with the pending count, and Discard. Renders nothing while editing is off - see the `editing` skill. |
 | `TMDataGrid.FilterButton` | - | Toggles filter panel. Renders nothing if no column is filterable. |
 | `TMDataGrid.ColumnsButton` | - | Opens column manager. Renders nothing if no column is hideable. |
 | `TMDataGrid.FilterPanel` | - | Rendered by `.Table`; exported for custom layouts. Header close button, Escape, click-away, "Add filter" and "Clear all". |

package/skills/grouping/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.4'
+  library_version: '2.0.0-beta.7'
 sources:
   - 'Jielga/TMDataGrid:src/docs/grouping.md'
   - 'Jielga/TMDataGrid:src/docs/summary-row.md'
@@ -86,7 +86,9 @@ would pass a row that looks real but is the wrong one. Group rows therefore:
 - do not fire `onRowClick` or the cell handlers
 - cannot be highlighted, pinned, or given a details panel
 - never edit
-- carry `data-grouped` and `data-depth`, with `--dg-row-group-bg` behind them
+- carry `data-grouped="true"` and `data-depth`, with `--dg-row-group-bg`
+  behind them. `data-grouped` is on every row, `"true"` or `"false"`, so match
+  the value rather than the bare attribute
 
 A group row's checkbox selects every record under it at any depth, including
 records inside collapsed sub-groups, showing a tick once all are selected and a
@@ -256,7 +258,7 @@ Source: `src/docs/grouping.md` (Server-side grids).
 | `isPagingActive` | Export | `(table, features) => boolean` | – | Whether the pager is slicing anything. `false` while grouped. |
 | `--dg-row-group-bg` | CSS variable | colour | Themed | Group row background. |
 | `--dg-summary-height` | CSS variable | length | From `size` | Height of the summary row. |
-| `data-grouped` · `data-depth` | Data attributes | – | – | On group rows, and the nesting level on every row. |
+| `data-grouped` · `data-depth` | Data attributes | – | – | `"true"` on group rows (published on every row), and the nesting level on every row. |
 
 See also: the `rows` skill for selection and the details lane, and the `data`
 skill for the pager grouping suspends.

package/skills/options/SKILL.md

@@ -14,7 +14,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.4'
+  library_version: '2.0.0-beta.7'
 sources:
   - 'Jielga/TMDataGrid:src/docs/use-tm-data-grid.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'
@@ -66,7 +66,7 @@ rather than forwarded to TanStack.
 | `state` | `Partial<TableState>` | – | Controlled state. Each slice requires its `onXChange` - see below. |
 | `meta` | `TMDataGridTableMeta` | `{}` | Grid configuration, see below. |
 | `persist` | `TMDataGridPersistence` | – | State persistence, see below. |
-| `editing` | `TMDataGridEditingOptions` | off | Turns editing on. `mode` (`"cell" \| "cellConfirm" \| "row" \| "draft"`) picks the commit policy; the object also holds `onCommit`, `onSaveDrafts`, `rowValidators`, `isRowEditable`, `newRowDefaults`, `newRowsSticky`, `onRowAdd` and `onRowDelete` - see the `editing` skill. |
+| `editing` | `TMDataGridEditingOptions` | off | Turns editing on. Two axes: `mode` (`"cell" \| "cellConfirm" \| "row"`) picks what counts as a commit, `draft` picks whether it parks in the draft store; the object also holds `onCommit`, `onSaveDrafts`, `rowValidators`, `isRowEditable`, `newRowDefaults`, `newRowsSticky`, `onRowAdd` and `onRowDelete` - see the `editing` skill. |
 | `labels` | `TMDataGridLabelsOverride` | English | Overrides for the grid's strings and `aria-label`s. |
 
 ### Default initial state

package/skills/rows/SKILL.md

@@ -17,7 +17,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.4'
+  library_version: '2.0.0-beta.7'
 sources:
   - 'Jielga/TMDataGrid:src/docs/row-selection.md'
   - 'Jielga/TMDataGrid:src/docs/row-interaction.md'
@@ -194,7 +194,7 @@ Returning an empty list leaves the column with no menu button at all.
   striped
   rowStyle={(row) =>
     row.original.status === "Terminated"
-      ? { "--row-bg": "var(--mantine-color-red-0)" }
+      ? { "--row-bg": "color-mix(in srgb, var(--mantine-color-red-6) 12%, transparent)" }
       : undefined
   }
   rowClassName={(row) => (row.original.overdue ? classes.overdue : undefined)}
@@ -210,7 +210,11 @@ are not striped.
 
 Rows carry `data-selected`, `data-selected-bg`, `data-highlighted`,
 `data-grouped`, `data-depth`, `data-context-menu` and `data-row-id`, so a
-stylesheet can target any of it without a callback.
+stylesheet can target any of it without a callback. The boolean attributes are
+published on every row as `"true"` or `"false"`, so match the value
+(`[data-grouped="true"]`), not the bare attribute. Pick a `--row-bg` that
+reads under both colour schemes - a `-0` Mantine shade is near-white and
+unreadable in dark mode; mix a mid shade into transparency instead.
 
 ## The details panel
 

package/skills/server-side/SKILL.md

@@ -10,7 +10,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.4'
+  library_version: '2.0.0-beta.7'
 sources:
   - 'Jielga/TMDataGrid:src/docs/server-side.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/useTMDataGrid.tsx'

package/skills/testing/SKILL.md

@@ -11,7 +11,7 @@ description: >
 metadata:
   type: core
   library: '@jielga/tmdatagrid'
-  library_version: '2.0.0-beta.4'
+  library_version: '2.0.0-beta.7'
 sources:
   - 'Jielga/TMDataGrid:src/docs/testing.md'
   - 'Jielga/TMDataGrid:src/tmdatagrid/components/TMDataGrid.tsx'

package/src/tmdatagrid/components/TMDataGrid.tsx

@@ -3,7 +3,7 @@ import { type CSSProperties, type ReactNode, useMemo } from "react";
 import classes from "./TMDataGrid.module.css";
 import { TMDataGridColumnsPanel } from "./TMDataGridColumnsPanel";
 import { TMDataGridContextProvider } from "../TMDataGridContext";
-import { TMDataGridEditActions } from "./TMDataGridEditActions";
+import { TMDataGridDraftActions } from "./TMDataGridDraftActions";
 import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
 import { TMDataGridFilterPills } from "./TMDataGridFilterPills";
 import { TMDataGridFooter } from "./TMDataGridFooter";
@@ -151,7 +151,7 @@ export const TMDataGrid = Object.assign(TMDataGridRoot, {
   SummaryCount: TMDataGridSummaryCount,
   LoadingIndicator: TMDataGridLoadingIndicator,
   Search: TMDataGridSearch,
-  EditActions: TMDataGridEditActions,
+  DraftActions: TMDataGridDraftActions,
   ColumnsButton: TMDataGridColumnsButton,
   FilterButton: TMDataGridFilterButton,
   Table: TMDataGridTable,