diff --git a/.changeset/brisk-cells-type.md b/.changeset/brisk-cells-type.md
new file mode 100644
index 00000000..a369a344
--- /dev/null
+++ b/.changeset/brisk-cells-type.md
@@ -0,0 +1,31 @@
+---
+"@tailor-platform/app-shell": minor
+---
+
+Add inline cell editing to `DataTable`. Give a typed column an `edit` config and users can change its values right in the list: `text`, `number` and `money` cells are typed into; `text` / `link` columns with `edit.options` and `badge` columns become dropdowns; `date` columns open a calendar. Rules (`min`, `max`, `maxDecimals`, `required`, `validate`), per-row control (`canEdit(row, { selected })`) and Enter / Tab keyboard entry come built in. The value reaches `edit.onCommit(row, value)` when the user leaves the cell or picks a choice; return a promise to autosave, and the cell reverts if it rejects.
+
+```tsx
+column({
+  id: "received",
+  label: "Received",
+  type: "number",
+  edit: {
+    canEdit: (row, { selected }) => selected,
+    min: 0,
+    maxDecimals: 0, // whole numbers only
+    onCommit: (row, value) => updateLine(row.id, { received: value }),
+  },
+});
+
+column({
+  id: "supplierId",
+  label: "Supplier",
+  type: "text",
+  edit: {
+    options: suppliers.map((s) => ({ value: s.id, label: s.name })),
+    onCommit: (row, value) => updateLine(row.id, { supplierId: value }),
+  },
+});
+```
+
+Also fixes date display: a date-only `"YYYY-MM-DD"` value now shows that day in every time zone instead of the day before west of UTC. A `number` / `money` column with `edit.maxDecimals` displays up to that many decimals, and a `number` column whose `maxDecimals` is below its `minDecimals` no longer throws.
diff --git a/.changeset/snug-lists-breathe.md b/.changeset/snug-lists-breathe.md
new file mode 100644
index 00000000..3334ec3a
--- /dev/null
+++ b/.changeset/snug-lists-breathe.md
@@ -0,0 +1,5 @@
+---
+"@tailor-platform/app-shell": patch
+---
+
+`Select`'s dropdown now has a 4px inner gap, like `Menu`, `Combobox` and `Autocomplete`, so the highlighted option no longer touches the dropdown's edges.
diff --git a/decisions/data-table-inline-editing.md b/decisions/data-table-inline-editing.md
new file mode 100644
index 00000000..70b24642
--- /dev/null
+++ b/decisions/data-table-inline-editing.md
@@ -0,0 +1,161 @@
+# Decision: inline cell editing in DataTable
+
+> Status: **Open — for team input.** Every column type is implemented in this PR (text, number, money, link, dropdowns via `edit.options`, badge dropdowns and dates), so the proposal can be tried in the vite example (`/showcase/data-table-lab`) while the questions below are settled.
+>
+> Context: [platform-planning#1750](https://github.com/tailor-inc/platform-planning/issues/1750) (the UI Catalogue inline-edit pattern, left with @itsprade), the Larson IMS request in Slack (`#prj-larson-ims`), and [platform-planning#1428](https://github.com/tailor-inc/platform-planning/issues/1428). Related: [platform-planning#1115](https://github.com/tailor-inc/platform-planning/issues/1115) (optimistic rows) and [platform-planning#1161](https://github.com/tailor-inc/platform-planning/issues/1161) (LineItems).
+>
+> Scope: editing values in rows a DataTable already shows. Adding, removing or reordering rows is out of scope; that's document line items (#1161).
+
+## Problem
+
+Two teams have asked for the same thing:
+
+- **Larson IMS (Slack).** They're moving about a dozen AG-Grid tables to `DataTable`. Regular lists already work, including filtering, sorting, pagination and row actions. The blocked tables are the ones where people fill in quantities: purchase orders, invoices, receipts, credit notes and stock adjustments. They need two things:
+  1. **Typing into a cell, with basic rules**, such as whole numbers only, no negatives, or at most 2 decimal places.
+  2. **Some rows editable and others not**, decided by their own logic. For example, a row becomes editable once it's selected, or only while it meets a condition.
+- **Opportunity tracker ([#1428](https://github.com/tailor-inc/platform-planning/issues/1428)).** They hand-built popover + save + refetch cells for text, enum and decimal values. They're asking for one standard version, so every app looks and saves the same way.
+
+Today DataTable only displays data. An app that needs editing draws its own inputs in `render`. That loses DataTable's typed formatting and fights with its row click, cell context menu and truncation.
+
+## What exists today
+
+- **DataTable is display-only.** Rows belong to the screen: DataTable renders `data.rows` as given and leaves sorting, filtering and paging to `CollectionControl`. There is no notion of cell focus or keyboard movement.
+- **UI Catalogue pattern: "DataTable inline cell edit"** ([ui.tailor.tech](https://ui.tailor.tech/patterns/datatable-inline-edit), [#1750](https://github.com/tailor-inc/platform-planning/issues/1750)). It's built on DataTable `render`:
+  - Underlined values open a small popover with the input and Cancel / Save.
+  - Status is a badge plus a chevron menu; picking an option applies it immediately and shows a toast.
+  - A "Confirmed" flag commits through a checkbox.
+  - Its guidance: it suits a few edits on small lists. Use a Sheet or form for cross-field checks or large row counts.
+- **The `list-dense-scan` pattern rules it out.** `docs-src/patterns/list-dense-scan.docs.outline.md` lines 32 and 89 say: "Inline editable cells — use pattern/detail or pattern/form/modal instead".
+- **LineItems** ([#1161](https://github.com/tailor-inc/platform-planning/issues/1161), unmerged app-shell#238) is a document-line editor. It has cell editors but no validation rules, no per-row control, and no filtering or paging. That makes it a reference, not the base for list tables.
+- **[#1115](https://github.com/tailor-inc/platform-planning/issues/1115)**: DataTable manages rendering state, and saving with optimistic updates and rollback belongs in a separate `useOptimisticRows` hook. The mutation callbacks were removed from `useDataTable` in app-shell#130.
+- **`CsvImporter`**'s review grid, with `onCellEdit(row, columnKey, value)`, is the only inline editing in the package today.
+
+## Proposal
+
+Build inline editing into DataTable and configure it per column.
+
+1. **Type straight into a cell.** Click or Tab into an editable cell and type. There's no popover and no form. This is where the proposal differs from the catalogue pattern (see [Alternatives](#alternatives-considered)).
+2. **Show what's editable — spreadsheet-style.**
+   - Editable cells look like the rest of the table: no input boxes, and the whole cell is the click target.
+   - The cursor tells cells apart: a text cursor for typing cells, a pointer for dropdown and date cells, and "not allowed" for cells that can't be edited.
+   - The cell being edited outlines its edges; dropdown and date icons appear on hover and focus, in a space kept free at the right edge so they never cover the value.
+   - Row height and column width don't shift when a row becomes editable.
+3. **Block impossible input as it's typed.**
+   - With "no negatives" there's no minus sign. With "whole numbers" there's no decimal point. With "2 decimals" there's no third decimal digit.
+   - Pasted text is cleaned up (thousands separators, full-width digits) and then checked. It is never silently rounded.
+4. **Explain the other rules.**
+   - A required value, a maximum, or the screen's own rule ("can't receive more than ordered") turns the cell red, with a tooltip saying why.
+   - Enter and Tab won't save until it's fixed, and Esc puts the old value back.
+   - Leaving the cell while it's still invalid reverts it.
+5. **Let the screen decide which rows are editable.** The per-row check also knows whether the row is selected, so "editable once ticked" and "only while Draft" are one line each.
+6. **Make keyboard data entry fast.**
+   - Enter saves and moves down to the same column.
+   - Tab saves and moves to the next editable cell, skipping read-only ones.
+   - Esc undoes.
+   - Japanese IME input is respected: pressing Enter to confirm a conversion doesn't save.
+7. **Autosave on leave.**
+   - A value saves when the user leaves the cell or presses Enter or Tab, and only if it actually changed: going from `10` to `10.00` is not a change.
+   - There is no saving indicator.
+   - If the screen's save fails, the cell goes back to the old value, and the screen can show its own toast.
+   - Screens that hold edits for a Save button work the same way; their save just never fails.
+8. **Leave everything else alone.** Filtering, sorting, paging, selection, row actions, pinned columns and column settings keep working. Existing tables don't change unless a column opts in.
+
+### Every column type
+
+| Column type      | How it's edited                                              | What the screen receives                                          |
+| ---------------- | ------------------------------------------------------------ | ----------------------------------------------------------------- |
+| `text`           | Type in the cell                                             | Text, or `null` when emptied                                      |
+| `number`         | Type in the cell, with the rules above                       | A number, or `null`                                               |
+| `money`          | Same as number; decimals follow the currency (USD 2, JPY 0)  | A number, or `null`                                               |
+| `date`           | Pick from a calendar or type; date-time columns add the time | `"YYYY-MM-DD"`, a UTC ISO string for date-time columns, or `null` |
+| `badge` (status) | Pick from a list, either one value or several                | The value (or list of values), or `null`                          |
+| `link`           | Edit the text; it shows as plain text while editable         | Text, or `null`                                                   |
+
+## API sketch
+
+This follows the shapes DataTable already has:
+
+- **`edit` sits on the column next to `type` / `typeOptions`** and narrows by `type`, like `typeOptions` and `accessor` do today (`packages/core/src/components/data-table/types.ts`). That means the value handed to `onCommit` has the right type for each column type.
+- **`canEdit(row, { selected })`** mirrors `rowExpansion.canExpand(row)` and `RowAction.isDisabled(row)`.
+- **Nothing changes in the `useDataTable` options or `DataTableContextValue`.**
+
+```tsx
+const { column } = createColumnHelper<ReceiptLine>();
+
+column({
+  id: "received",
+  label: "Received",
+  type: "number",
+  edit: {
+    canEdit: (row, { selected }) => selected && row.status === "open",
+    min: 0,
+    maxDecimals: 0, // whole numbers only
+    required: true,
+    validate: (value, row) =>
+      value !== null && value > row.ordered ? `Can't exceed ordered (${row.ordered})` : undefined,
+    // May return a promise; if it rejects, the cell reverts.
+    onCommit: (row, value) => saveReceivedQty(row.id, value),
+  },
+});
+```
+
+- **The table never stores edits.** It calls `onCommit`, and the screen updates `data`: a local draft for a Save-button screen, or a mutation for autosave. While an `onCommit` promise is pending, the cell keeps showing the new value; if the promise rejects, the cell reverts. Richer optimistic behaviour stays with `useOptimisticRows` (#1115).
+- **Rules by type:**
+  - `text` / `link`: `required` and `validate` only.
+  - `number` / `money`: `min`, `max` and `maxDecimals`. `maxDecimals` defaults to what the column displays; for money, the currency's decimals.
+  - `date`: `min` and `max`.
+  - `badge`: `options` (defaults to the column's enum filter options) and `multiple`.
+- **Built from existing components:** `Input`, `DatePicker`, `Select`, `Tooltip` and `Badge`. There are no new dependencies. Rows need an `id` to be editable.
+
+## Scope contract
+
+- **Required behaviour:** Larson IMS's received-quantity column works on a paginated, filtered DataTable. It must be integer, ≥ 0 and ≤ ordered, editable only when the row is selected, entered row by row with Enter, and autosaved with a revert on failure.
+- **Compatibility:**
+  - No change to existing tables, the `useDataTable` options or the context. `edit` is optional on every column.
+  - One display fix comes with it: a number column shows as many decimals as its editor allows. Today an unconfigured number column rounds to whole numbers, so a typed 2.5 would render as "3".
+- **Intentionally unsupported in v1:**
+  - yes/no flags (there's no boolean column type)
+  - a bring-your-own editor for custom `render` columns
+  - copying and pasting across several cells, fill-down, and undo
+  - moving between cells with the arrow keys
+  - a "changed" marker
+  - a saving indicator
+  - comma decimal separators (`1,5`)
+  - adding or removing rows
+- **Validation plan:**
+  - Unit tests for parsing and rules.
+  - Interaction tests for each column type: commit, revert, blocked keys, keyboard flow, per-row control and no-op saves.
+  - Type tests for the value each column type receives.
+  - A goods-receipt demo in the vite example, checked in the browser, including that row height stays fixed.
+
+## Alternatives considered
+
+- **Keep it a pattern (#1750 as it is).** No package change, but every app rebuilds the rules, per-row checks and keyboard flow, which is the per-app drift #1428 describes.
+- **Popover editing, like the catalogue pattern.** This matches the existing pattern and suits occasional changes. But a click and a Save for every cell is too slow for filling in quantities down a column, which is what Larson IMS needs.
+- **DataTable holds the drafts** (dirty tracking, "get changes"). This goes against #1115's direction that DataTable only renders. The screen already owns the rows.
+- **Build on LineItems.** It's unmerged, it has no validation or per-row control, and it has no filtering or paging.
+
+## Delivery
+
+- **PR 1, which unblocks Larson IMS:**
+  - text, number, money and link editing
+  - rules and errors
+  - per-row control
+  - keyboard entry
+  - autosave and revert
+  - docs (`docs-src/components/data-table.docs.outline.md`)
+  - pattern updates: rewrite `list-dense-scan`, and move the #1750 inline-edit pattern into `docs-src/patterns/`
+  - a vite example
+  - a `minor` changeset
+- **PR 2 (folded in):** date and badge editing, plus dropdowns for `text` / `link` columns via `edit.options`, with the matching docs and example additions — built in the same PR so every column type can be reviewed together.
+
+## For the call
+
+- **Naming.** `edit` / `canEdit` / `onCommit`, or Base UI's `onValueCommitted` wording?
+- **Leaving an invalid cell reverts it.** This is AG-Grid's default, and it means the data never disagrees with the screen, but the typed value is lost. Keep it? The other option is keeping the red value until it's fixed, and giving screens a way to ask "any invalid cells?" before Save.
+- **Enter moves down** to the same column, spreadsheet-style, instead of staying put. OK?
+- **One PR.** Date and badge editing were planned as a follow-up but are folded in, so every column type is reviewed together. OK, or split them back out?
+- **#1115.** Ship the simple pending/revert behaviour with PR 1 and let `useOptimisticRows` build on it later, or wait for #1115?
+- **Catalogue pattern.** Move #1750 into `docs-src/patterns/`, rewritten around the built-in feature, and retire the popover version?
+- **Bring-your-own editor** (for flags, product search and similar): leave it out until a team asks?
+- **Out of scope here.** The two open notes in `docs-src/pages/document-detail.docs.outline.md`, "a shared line-items component" and "in-place editing versus an edit route", stay open. This proposal covers list tables only.
diff --git a/docs-manifest.json b/docs-manifest.json
index 718997a2..0ead970f 100644
--- a/docs-manifest.json
+++ b/docs-manifest.json
@@ -443,10 +443,10 @@
         "withURLCollectionState"
       ],
       "hashes": {
-        "typeSurface": "014a9036a3b9b0af",
-        "outline": "f1bea006bdeb43a4",
+        "typeSurface": "69617e7c033a17e7",
+        "outline": "3a7a1dcac0546850",
         "snapshot": null,
-        "outputMd": "dd2da884d7550daf",
+        "outputMd": "fb40a8a08949662c",
         "examples": null
       }
     },
@@ -961,9 +961,9 @@
       "symbols": [],
       "hashes": {
         "typeSurface": null,
-        "outline": "165e45ba5f128d96",
+        "outline": "c4f4be1b89d6ffa2",
         "snapshot": null,
-        "outputMd": "8062ea0df9403fbb",
+        "outputMd": "40542a69ee40b972",
         "examples": "c0a2bd60e8a04474"
       }
     },
@@ -1098,7 +1098,7 @@
       "hashes": {
         "typeSurface": "429710973dfa912b",
         "outline": "721e8995f53f0e8f",
-        "snapshot": "f6fcbd73e127f2f4",
+        "snapshot": "eb30c554219053a5",
         "outputMd": "ae287e2bb5abc1c6",
         "examples": "1ce89cec30045466"
       }
@@ -1605,7 +1605,7 @@
     "packages/core/skills/app-shell-patterns/references/components/combobox.md": "dfb775c7c4307409",
     "packages/core/skills/app-shell-patterns/references/components/command-palette.md": "7e5bc675a593791a",
     "packages/core/skills/app-shell-patterns/references/components/csv-importer.md": "53d3c795ca21b9dc",
-    "packages/core/skills/app-shell-patterns/references/components/data-table.md": "dd2da884d7550daf",
+    "packages/core/skills/app-shell-patterns/references/components/data-table.md": "fb40a8a08949662c",
     "packages/core/skills/app-shell-patterns/references/components/date-picker.md": "33902be121ff69db",
     "packages/core/skills/app-shell-patterns/references/components/default-header.md": "375e55f4b12fa2be",
     "packages/core/skills/app-shell-patterns/references/components/default-sidebar.md": "3422388a0cc78571",
@@ -1665,9 +1665,9 @@
     "packages/core/skills/app-shell-patterns/references/patterns/interaction-confirm.md": "2db70f423c6fdf97",
     "packages/core/skills/app-shell-patterns/references/patterns/interaction-multi-select.md": "09e99e5035da6e81",
     "packages/core/skills/app-shell-patterns/references/patterns/interaction-toast.md": "f68bdab855730f48",
-    "packages/core/skills/app-shell-patterns/references/patterns/list-dense-scan.md": "8062ea0df9403fbb",
+    "packages/core/skills/app-shell-patterns/references/patterns/list-dense-scan.md": "40542a69ee40b972",
     "packages/core/skills/app-shell-patterns/references/pages/document-detail.md": "c3fb2588a0699c26",
     "packages/core/skills/app-shell-patterns/references/migrations.md": "799fd5010635b2c2",
-    "packages/core/skills/app-shell-patterns/SKILL.md": "814325f4ea06ffae"
+    "packages/core/skills/app-shell-patterns/SKILL.md": "4bda10150c2e8868"
   }
 }
diff --git a/docs-src/components/data-table.docs.outline.md b/docs-src/components/data-table.docs.outline.md
index 9c10ea07..43bef1c9 100644
--- a/docs-src/components/data-table.docs.outline.md
+++ b/docs-src/components/data-table.docs.outline.md
@@ -2,7 +2,7 @@
 kind: code-backed
 group: data-table
 title: DataTable
-description: Compound data table component with sortable columns, filter chips, cursor-based pagination, row actions, and multi-row selection
+description: Compound data table component with sortable columns, filter chips, cursor-based pagination, row actions, multi-row selection, and inline cell editing
 sources:
   - packages/core/src/components/data-table/**
   - packages/core/src/hooks/use-collection-variables.ts
@@ -374,6 +374,113 @@ The trigger is a native `<button>`, so Enter/Space activation and the focus ring
 
 **Known limitation — row count.** Detail rows are real `<tr>` elements, so a screen reader counts them: ten records with two expanded announces as twelve rows. Fixing this needs `aria-rowcount` plus explicit `aria-rowindex` on every row (with detail rows sharing their parent's index) and correct interaction with pagination; `role="presentation"` on the detail row would fix the count but remove the panel from screen-reader table navigation. Neither is implemented.
 
+## Inline editing
+
+Give a typed column an `edit` config and users can change its values right in the list — no form, no dialog. The table never stores the edits: when the user leaves a cell (or presses Enter / Tab, or picks a choice) with a changed value that passes every rule, `edit.onCommit(row, value)` runs, and you update `data` from there. Filtering, sorting, pagination, selection, row actions and pinned columns keep working, and columns without `edit` are unaffected.
+
+| Column                              | Editor                                                        | `onCommit` receives                                       |
+| ----------------------------------- | ------------------------------------------------------------- | --------------------------------------------------------- |
+| `text`                              | Typed into                                                    | `string \| null`                                          |
+| `number`                            | Typed into, with `min` / `max` / `maxDecimals`                | `number \| null`                                          |
+| `money`                             | Same as `number`; decimals follow the currency (USD 2, JPY 0) | `number \| null`                                          |
+| `text` / `link` with `edit.options` | Dropdown of the choices; the cell shows the choice's label    | the choice's `value`, or `null`                           |
+| `badge`                             | Dropdown whose choices are the same badges                    | the choice's `value`, or `null`                           |
+| `date`                              | Calendar (plus a time field for `dateFormat: "datetime"`)     | `"YYYY-MM-DD"`, an ISO timestamp for date-time, or `null` |
+| `link` without `options`            | Typed into; shows its label as plain text while editable      | `string \| null`                                          |
+
+Untyped columns (drawn with `render` alone) can't be edited.
+
+```tsx
+const { column } = createColumnHelper<ReceiptLine>();
+
+const columns = [
+  column({ id: "sku", label: "SKU", type: "text" }),
+  column({
+    id: "received",
+    label: "Received",
+    type: "number",
+    width: 112,
+    edit: {
+      // Editable only once the row is ticked, and only while the line is open.
+      canEdit: (row, { selected }) => selected && row.status === "open",
+      min: 0,
+      maxDecimals: 0, // whole numbers only
+      required: true,
+      validate: (value, row) =>
+        value !== null && value > row.ordered ? `Can't exceed ordered (${row.ordered})` : undefined,
+      onCommit: (row, value) =>
+        setLines((lines) =>
+          lines.map((line) => (line.id === row.id ? { ...line, received: value } : line)),
+        ),
+    },
+  }),
+];
+
+const table = useDataTable({ columns, data: { rows: lines }, onSelectionChange: setSelectedIds });
+```
+
+Editable cells look exactly like the rest of the table, spreadsheet-style: no input boxes, and the whole cell — edge to edge — is the click target. The cursor tells cells apart: a text cursor over cells you type into (`text`, `number`, `money`), a pointer over dropdown and date cells, and "not allowed" over every cell that can't be edited (when rows aren't clickable). The cell being edited outlines its edges; dropdown and date cells show their chevron or calendar icon on hover and focus, in a space kept free at the right edge (on read-only rows of the column too), so it never covers the value. Row height and column width don't change when a cell becomes editable or while it is being edited. Rows need an `id` to be editable: rows without one are shown read-only, with a one-time console warning.
+
+### `edit` options
+
+| Option                | Column types            | Description                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onCommit`            | all                     | `(row, value) => void \| Promise<unknown>`. Required. Runs once per changed, valid value — see the table above for what `value` is per column type. An emptied or cleared cell commits `null`.                                                                                                                                                                                                                          |
+| `canEdit`             | all                     | `(row, { selected }) => boolean`. Decides per row whether the cell can be edited — `(_, { selected }) => selected` for "editable once ticked". Default: every row with an `id`.                                                                                                                                                                                                                                         |
+| `required`            | all                     | Rejects an emptied cell with "Required", so `validate` and `onCommit` never receive `null` at runtime.                                                                                                                                                                                                                                                                                                                  |
+| `validate`            | all                     | `(value, row) => string \| null \| undefined`. Your own rule, checked after the built-in ones. Return a message to block the save.                                                                                                                                                                                                                                                                                      |
+| `min` / `max`         | `number`, `money`       | Inclusive bounds. With `min >= 0` a minus sign can't be typed.                                                                                                                                                                                                                                                                                                                                                          |
+| `maxDecimals`         | `number`, `money`       | Digits allowed after the decimal point; `0` means whole numbers. Defaults to what the cell displays: `typeOptions.maxDecimals` (else `0`) for `number`, the currency's decimals for `money` (USD 2, JPY 0). The cell also _displays_ up to this many decimals, so a typed `2.5` never reads back as `3`.                                                                                                                |
+| `options`             | `text`, `link`, `badge` | `{ value, label }[]` — the dropdown's choices. On `text` / `link` it turns the cell into a dropdown: the column's value is a choice's `value`, and every cell in the column shows its `label`. On `badge` it defaults to the entries of `typeOptions.badgeLabelMap`, else the column's enum `filter` options; a badge column with neither can't be edited. Unless `required`, the dropdown starts with a "None" choice. |
+| `min` / `max` (dates) | `date`                  | Earliest / latest day that can be picked, as `"YYYY-MM-DD"`.                                                                                                                                                                                                                                                                                                                                                            |
+
+### Rules and errors
+
+- Characters that can never be valid are blocked as the user types: a minus sign when `min >= 0`, the decimal point when `maxDecimals` is `0`, and digits past `maxDecimals`.
+- Text that arrives in one go — a paste, autofill, dictation — is cleaned up (full-width digits, thousands separators, currency symbols) and then checked, never silently rounded. A decimal comma such as `1,5` is reported as "Enter a number" rather than read as `15`.
+- Any other broken rule turns the cell red and shows its message in a tooltip on the focused cell. `max` and `validate` errors show as soon as they happen; `min`, `required` and a half-typed number wait until the user tries to save, so the cell doesn't flash red mid-typing.
+- Enter and Tab won't leave an invalid cell, and Esc restores the previous value. Leaving the cell another way — clicking elsewhere — while it is invalid reverts it without saving.
+- A value that reads the same as the stored one (`10.00` over `10`) is not a change: it neither commits nor errors.
+
+### Keyboard
+
+| Key                 | Action                                                                                                                         |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| Enter / Shift+Enter | Save, then move to the same column in the next / previous editable row.                                                        |
+| Tab / Shift+Tab     | Save, then move to the next / previous editable cell, skipping read-only ones. At either end, focus leaves the table as usual. |
+| Esc                 | Undo the change in the focused cell, or close an open dropdown / calendar without picking.                                     |
+| Enter / Space / ↓   | On a dropdown or date cell, open it. Arrow keys move through the choices or days; Enter picks.                                 |
+
+Focusing a typing cell selects its value, so typing replaces it. While an IME is composing, Enter confirms the conversion rather than the cell. A pick in a dropdown or calendar commits straight away and returns focus to the cell; a date-time commits when its calendar closes (Done, or clicking away).
+
+### Saving
+
+`onCommit` is where the value leaves the table. Update your rows there — keep a local draft for a screen with a Save button, or call a mutation to autosave:
+
+```tsx
+edit: {
+  onCommit: async (row, value) => {
+    try {
+      await updateLinePrice({ id: row.id, price: value });
+    } catch (error) {
+      toast.error("Couldn't save the price");
+      throw error; // rejecting reverts the cell
+    }
+  },
+},
+```
+
+While a returned promise is pending, the cell keeps showing the new value, with no saving indicator. If it rejects, the cell goes back to the old value — show your own message. Once it resolves, the cell keeps the saved value until fresh data for the row arrives. Update `data` synchronously or optimistically where you can: a refetch that toggles `loading` replaces the rows with skeletons and discards any cell being edited.
+
+### Interplay and limits
+
+- Clicking an editable cell never fires `onClickRow`. Right-clicking a resting cell opens the cell context menu; while editing, the browser's own menu (paste) appears instead.
+- A `link` column shows its label as plain text while the cell can be edited; rows where `canEdit` returns `false` keep the link.
+- Editing doesn't re-run sorting or filtering — rows stay where they are until your query refetches.
+- Only `.` is accepted as the decimal separator for now.
+- A date-only `"YYYY-MM-DD"` value is shown as that day in every time zone (it used to render a day early west of UTC).
+- Multi-value badge columns, a bring-your-own editor for custom `render` columns, multi-cell paste, fill-down and undo aren't supported yet.
+
 ## `useDataTable`
 
 Creates the table state object to pass to `DataTable.Root`.
@@ -433,15 +540,15 @@ A column definition passed to `useDataTable`. `Column<TRow>` is a discriminated
 
 ### `type`-specific fields
 
-| `type`      | `typeOptions`                                                |
-| ----------- | ------------------------------------------------------------ |
-| _(omitted)_ | _(not allowed; provide `render` to draw the cell)_           |
-| `"text"`    | _(not allowed)_                                              |
-| `"number"`  | `NumberCellOptions`                                          |
-| `"money"`   | `MoneyCellOptions<TRow>`                                     |
-| `"date"`    | `DateCellOptions`                                            |
-| `"badge"`   | `BadgeCellOptions`                                           |
-| `"link"`    | **Required** — `LinkCellOptions<TRow>` (must include `href`) |
+| `type`      | `typeOptions`                                                | `edit` ([Inline editing](#inline-editing)) |
+| ----------- | ------------------------------------------------------------ | ------------------------------------------ |
+| _(omitted)_ | _(not allowed; provide `render` to draw the cell)_           | _(not allowed)_                            |
+| `"text"`    | _(not allowed)_                                              | `TextCellEditOptions<TRow>`                |
+| `"number"`  | `NumberCellOptions`                                          | `NumberCellEditOptions<TRow>`              |
+| `"money"`   | `MoneyCellOptions<TRow>`                                     | `NumberCellEditOptions<TRow>`              |
+| `"date"`    | `DateCellOptions`                                            | `DateCellEditOptions<TRow>`                |
+| `"badge"`   | `BadgeCellOptions`                                           | `BadgeCellEditOptions<TRow>`               |
+| `"link"`    | **Required** — `LinkCellOptions<TRow>` (must include `href`) | `TextCellEditOptions<TRow>`                |
 
 ## Cell types
 
diff --git a/docs-src/patterns/list-dense-scan.docs.outline.md b/docs-src/patterns/list-dense-scan.docs.outline.md
index 0c4c3843..7644b448 100644
--- a/docs-src/patterns/list-dense-scan.docs.outline.md
+++ b/docs-src/patterns/list-dense-scan.docs.outline.md
@@ -29,7 +29,7 @@ do:
 dont:
   - Side-by-side match/reconcile views comparing two grids
   - A tiny/static list where DataTable would be heavyweight — use Table.Root manually
-  - Inline editable cells — use pattern/detail or pattern/form/modal instead
+  - Editing whole records or many fields at once — use pattern/detail or pattern/form/modal instead
 ---
 
 # pattern/list/dense-scan
@@ -65,6 +65,7 @@ Omit `fill` on pages that should flow and scroll naturally (forms, dashboards, a
 - **Tabs only above `DataTable`** — best when workflows are organized as obvious buckets
 - **Tabs + chips** — when buckets are primary and finer filters help
 - **Bulk selection** — `onSelectionChange` hook on `useDataTable`; combine with `interaction/multi-select`
+- **Inline entry** — give the one or two columns operators fill in (a received quantity, a price) an `edit` config; gate rows with `edit.canEdit` (e.g. only selected rows) and save from `edit.onCommit`. See DataTable → Inline editing
 - **`Table` primitives** — small static lists without collection hooks
 
 ## Constraints
@@ -86,5 +87,6 @@ Omit `fill` on pages that should flow and scroll naturally (forms, dashboards, a
 - Tabs that mutate only local UI state while pagination/filters assume the full server set
 - Using `<table>` directly instead of `<DataTable>` for live collections
 - Client-side filtering on 1000+ records without server-side support
-- Inline editable cells — use `pattern/detail/*` or `pattern/form/modal` instead
+- Hand-rolled inputs in a column's `render` — use the column's `edit` config, which keeps typed formatting, row click and the cell menu working
+- Making most columns editable, or editing fields that must be checked together — use `pattern/detail/*` or `pattern/form/modal` instead
 - Per-row "View" / "Open" buttons duplicating the row-click navigation
diff --git a/docs/components/data-table.md b/docs/components/data-table.md
index 6d5b14f7..4a90d8ab 100644
--- a/docs/components/data-table.md
+++ b/docs/components/data-table.md
@@ -1,6 +1,6 @@
 ---
 title: DataTable
-description: Compound data table component with sortable columns, filter chips, cursor-based pagination, row actions, and multi-row selection
+description: Compound data table component with sortable columns, filter chips, cursor-based pagination, row actions, multi-row selection, and inline cell editing
 ---
 
 <!-- GENERATED by docs-kit from docs-src/components/data-table.docs.outline.md — do not edit by hand. -->
@@ -368,6 +368,113 @@ The trigger is a native `<button>`, so Enter/Space activation and the focus ring
 
 **Known limitation — row count.** Detail rows are real `<tr>` elements, so a screen reader counts them: ten records with two expanded announces as twelve rows. Fixing this needs `aria-rowcount` plus explicit `aria-rowindex` on every row (with detail rows sharing their parent's index) and correct interaction with pagination; `role="presentation"` on the detail row would fix the count but remove the panel from screen-reader table navigation. Neither is implemented.
 
+## Inline editing
+
+Give a typed column an `edit` config and users can change its values right in the list — no form, no dialog. The table never stores the edits: when the user leaves a cell (or presses Enter / Tab, or picks a choice) with a changed value that passes every rule, `edit.onCommit(row, value)` runs, and you update `data` from there. Filtering, sorting, pagination, selection, row actions and pinned columns keep working, and columns without `edit` are unaffected.
+
+| Column                              | Editor                                                        | `onCommit` receives                                       |
+| ----------------------------------- | ------------------------------------------------------------- | --------------------------------------------------------- |
+| `text`                              | Typed into                                                    | `string \| null`                                          |
+| `number`                            | Typed into, with `min` / `max` / `maxDecimals`                | `number \| null`                                          |
+| `money`                             | Same as `number`; decimals follow the currency (USD 2, JPY 0) | `number \| null`                                          |
+| `text` / `link` with `edit.options` | Dropdown of the choices; the cell shows the choice's label    | the choice's `value`, or `null`                           |
+| `badge`                             | Dropdown whose choices are the same badges                    | the choice's `value`, or `null`                           |
+| `date`                              | Calendar (plus a time field for `dateFormat: "datetime"`)     | `"YYYY-MM-DD"`, an ISO timestamp for date-time, or `null` |
+| `link` without `options`            | Typed into; shows its label as plain text while editable      | `string \| null`                                          |
+
+Untyped columns (drawn with `render` alone) can't be edited.
+
+```tsx
+const { column } = createColumnHelper<ReceiptLine>();
+
+const columns = [
+  column({ id: "sku", label: "SKU", type: "text" }),
+  column({
+    id: "received",
+    label: "Received",
+    type: "number",
+    width: 112,
+    edit: {
+      // Editable only once the row is ticked, and only while the line is open.
+      canEdit: (row, { selected }) => selected && row.status === "open",
+      min: 0,
+      maxDecimals: 0, // whole numbers only
+      required: true,
+      validate: (value, row) =>
+        value !== null && value > row.ordered ? `Can't exceed ordered (${row.ordered})` : undefined,
+      onCommit: (row, value) =>
+        setLines((lines) =>
+          lines.map((line) => (line.id === row.id ? { ...line, received: value } : line)),
+        ),
+    },
+  }),
+];
+
+const table = useDataTable({ columns, data: { rows: lines }, onSelectionChange: setSelectedIds });
+```
+
+Editable cells look exactly like the rest of the table, spreadsheet-style: no input boxes, and the whole cell — edge to edge — is the click target. The cursor tells cells apart: a text cursor over cells you type into (`text`, `number`, `money`), a pointer over dropdown and date cells, and "not allowed" over every cell that can't be edited (when rows aren't clickable). The cell being edited outlines its edges; dropdown and date cells show their chevron or calendar icon on hover and focus, in a space kept free at the right edge (on read-only rows of the column too), so it never covers the value. Row height and column width don't change when a cell becomes editable or while it is being edited. Rows need an `id` to be editable: rows without one are shown read-only, with a one-time console warning.
+
+### `edit` options
+
+| Option                | Column types            | Description                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `onCommit`            | all                     | `(row, value) => void \| Promise<unknown>`. Required. Runs once per changed, valid value — see the table above for what `value` is per column type. An emptied or cleared cell commits `null`.                                                                                                                                                                                                                          |
+| `canEdit`             | all                     | `(row, { selected }) => boolean`. Decides per row whether the cell can be edited — `(_, { selected }) => selected` for "editable once ticked". Default: every row with an `id`.                                                                                                                                                                                                                                         |
+| `required`            | all                     | Rejects an emptied cell with "Required", so `validate` and `onCommit` never receive `null` at runtime.                                                                                                                                                                                                                                                                                                                  |
+| `validate`            | all                     | `(value, row) => string \| null \| undefined`. Your own rule, checked after the built-in ones. Return a message to block the save.                                                                                                                                                                                                                                                                                      |
+| `min` / `max`         | `number`, `money`       | Inclusive bounds. With `min >= 0` a minus sign can't be typed.                                                                                                                                                                                                                                                                                                                                                          |
+| `maxDecimals`         | `number`, `money`       | Digits allowed after the decimal point; `0` means whole numbers. Defaults to what the cell displays: `typeOptions.maxDecimals` (else `0`) for `number`, the currency's decimals for `money` (USD 2, JPY 0). The cell also _displays_ up to this many decimals, so a typed `2.5` never reads back as `3`.                                                                                                                |
+| `options`             | `text`, `link`, `badge` | `{ value, label }[]` — the dropdown's choices. On `text` / `link` it turns the cell into a dropdown: the column's value is a choice's `value`, and every cell in the column shows its `label`. On `badge` it defaults to the entries of `typeOptions.badgeLabelMap`, else the column's enum `filter` options; a badge column with neither can't be edited. Unless `required`, the dropdown starts with a "None" choice. |
+| `min` / `max` (dates) | `date`                  | Earliest / latest day that can be picked, as `"YYYY-MM-DD"`.                                                                                                                                                                                                                                                                                                                                                            |
+
+### Rules and errors
+
+- Characters that can never be valid are blocked as the user types: a minus sign when `min >= 0`, the decimal point when `maxDecimals` is `0`, and digits past `maxDecimals`.
+- Text that arrives in one go — a paste, autofill, dictation — is cleaned up (full-width digits, thousands separators, currency symbols) and then checked, never silently rounded. A decimal comma such as `1,5` is reported as "Enter a number" rather than read as `15`.
+- Any other broken rule turns the cell red and shows its message in a tooltip on the focused cell. `max` and `validate` errors show as soon as they happen; `min`, `required` and a half-typed number wait until the user tries to save, so the cell doesn't flash red mid-typing.
+- Enter and Tab won't leave an invalid cell, and Esc restores the previous value. Leaving the cell another way — clicking elsewhere — while it is invalid reverts it without saving.
+- A value that reads the same as the stored one (`10.00` over `10`) is not a change: it neither commits nor errors.
+
+### Keyboard
+
+| Key                 | Action                                                                                                                         |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| Enter / Shift+Enter | Save, then move to the same column in the next / previous editable row.                                                        |
+| Tab / Shift+Tab     | Save, then move to the next / previous editable cell, skipping read-only ones. At either end, focus leaves the table as usual. |
+| Esc                 | Undo the change in the focused cell, or close an open dropdown / calendar without picking.                                     |
+| Enter / Space / ↓   | On a dropdown or date cell, open it. Arrow keys move through the choices or days; Enter picks.                                 |
+
+Focusing a typing cell selects its value, so typing replaces it. While an IME is composing, Enter confirms the conversion rather than the cell. A pick in a dropdown or calendar commits straight away and returns focus to the cell; a date-time commits when its calendar closes (Done, or clicking away).
+
+### Saving
+
+`onCommit` is where the value leaves the table. Update your rows there — keep a local draft for a screen with a Save button, or call a mutation to autosave:
+
+```tsx
+edit: {
+  onCommit: async (row, value) => {
+    try {
+      await updateLinePrice({ id: row.id, price: value });
+    } catch (error) {
+      toast.error("Couldn't save the price");
+      throw error; // rejecting reverts the cell
+    }
+  },
+},
+```
+
+While a returned promise is pending, the cell keeps showing the new value, with no saving indicator. If it rejects, the cell goes back to the old value — show your own message. Once it resolves, the cell keeps the saved value until fresh data for the row arrives. Update `data` synchronously or optimistically where you can: a refetch that toggles `loading` replaces the rows with skeletons and discards any cell being edited.
+
+### Interplay and limits
+
+- Clicking an editable cell never fires `onClickRow`. Right-clicking a resting cell opens the cell context menu; while editing, the browser's own menu (paste) appears instead.
+- A `link` column shows its label as plain text while the cell can be edited; rows where `canEdit` returns `false` keep the link.
+- Editing doesn't re-run sorting or filtering — rows stay where they are until your query refetches.
+- Only `.` is accepted as the decimal separator for now.
+- A date-only `"YYYY-MM-DD"` value is shown as that day in every time zone (it used to render a day early west of UTC).
+- Multi-value badge columns, a bring-your-own editor for custom `render` columns, multi-cell paste, fill-down and undo aren't supported yet.
+
 ## `useDataTable`
 
 Creates the table state object to pass to `DataTable.Root`.
@@ -427,15 +534,15 @@ A column definition passed to `useDataTable`. `Column<TRow>` is a discriminated
 
 ### `type`-specific fields
 
-| `type`      | `typeOptions`                                                |
-| ----------- | ------------------------------------------------------------ |
-| _(omitted)_ | _(not allowed; provide `render` to draw the cell)_           |
-| `"text"`    | _(not allowed)_                                              |
-| `"number"`  | `NumberCellOptions`                                          |
-| `"money"`   | `MoneyCellOptions<TRow>`                                     |
-| `"date"`    | `DateCellOptions`                                            |
-| `"badge"`   | `BadgeCellOptions`                                           |
-| `"link"`    | **Required** — `LinkCellOptions<TRow>` (must include `href`) |
+| `type`      | `typeOptions`                                                | `edit` ([Inline editing](#inline-editing)) |
+| ----------- | ------------------------------------------------------------ | ------------------------------------------ |
+| _(omitted)_ | _(not allowed; provide `render` to draw the cell)_           | _(not allowed)_                            |
+| `"text"`    | _(not allowed)_                                              | `TextCellEditOptions<TRow>`                |
+| `"number"`  | `NumberCellOptions`                                          | `NumberCellEditOptions<TRow>`              |
+| `"money"`   | `MoneyCellOptions<TRow>`                                     | `NumberCellEditOptions<TRow>`              |
+| `"date"`    | `DateCellOptions`                                            | `DateCellEditOptions<TRow>`                |
+| `"badge"`   | `BadgeCellOptions`                                           | `BadgeCellEditOptions<TRow>`               |
+| `"link"`    | **Required** — `LinkCellOptions<TRow>` (must include `href`) | `TextCellEditOptions<TRow>`                |
 
 ## Cell types
 
diff --git a/docs/patterns/list-dense-scan.md b/docs/patterns/list-dense-scan.md
index da8f13ae..a1248918 100644
--- a/docs/patterns/list-dense-scan.md
+++ b/docs/patterns/list-dense-scan.md
@@ -68,6 +68,7 @@ Omit `fill` on pages that should flow and scroll naturally (forms, dashboards, a
 - **Tabs only above `DataTable`** — best when workflows are organized as obvious buckets
 - **Tabs + chips** — when buckets are primary and finer filters help
 - **Bulk selection** — `onSelectionChange` hook on `useDataTable`; combine with `interaction/multi-select`
+- **Inline entry** — give the one or two columns operators fill in (a received quantity, a price) an `edit` config; gate rows with `edit.canEdit` (e.g. only selected rows) and save from `edit.onCommit`. See DataTable → Inline editing
 - **`Table` primitives** — small static lists without collection hooks
 
 ## Constraints
@@ -89,5 +90,6 @@ Omit `fill` on pages that should flow and scroll naturally (forms, dashboards, a
 - Tabs that mutate only local UI state while pagination/filters assume the full server set
 - Using `<table>` directly instead of `<DataTable>` for live collections
 - Client-side filtering on 1000+ records without server-side support
-- Inline editable cells — use `pattern/detail/*` or `pattern/form/modal` instead
+- Hand-rolled inputs in a column's `render` — use the column's `edit` config, which keeps typed formatting, row click and the cell menu working
+- Making most columns editable, or editing fields that must be checked together — use `pattern/detail/*` or `pattern/form/modal` instead
 - Per-row "View" / "Open" buttons duplicating the row-click navigation
diff --git a/examples/vite-app/src/pages/showcase/data-table-lab/inline-editing-demo.tsx b/examples/vite-app/src/pages/showcase/data-table-lab/inline-editing-demo.tsx
new file mode 100644
index 00000000..bada5d04
--- /dev/null
+++ b/examples/vite-app/src/pages/showcase/data-table-lab/inline-editing-demo.tsx
@@ -0,0 +1,421 @@
+import { DataTable, createColumnHelper, useDataTable, useToast } from "@tailor-platform/app-shell";
+import { useState } from "react";
+
+// ─── Dummy data ──────────────────────────────────────────────────────────────
+// 🧪 Dummy Data: Replace with a real goods-receipt query later.
+
+type LineStatus = "pending" | "partial" | "received" | "damaged";
+type QcResult = "pass" | "hold" | "fail";
+
+type ReceiptLine = {
+  id: string;
+  sku: string;
+  product: string;
+  supplierId: string;
+  warehouseId: string | null;
+  ordered: number;
+  received: number | null;
+  unitPrice: number;
+  currency: "USD" | "JPY";
+  discount: number;
+  weightKg: number | null;
+  lot: string;
+  expected: string | null;
+  receivedAt: string | null;
+  bestBefore: string | null;
+  status: LineStatus;
+  qc: QcResult | null;
+  note: string | null;
+};
+
+const SUPPLIERS = [
+  { value: "hanover", label: "Hanover Apparel Co." },
+  { value: "kanto", label: "Kanto Textile" },
+  { value: "sagami", label: "Sagami Cap Works" },
+  { value: "northfield", label: "Northfield Knitting" },
+];
+
+const WAREHOUSES = [
+  { value: "tokyo", label: "Tokyo DC" },
+  { value: "osaka", label: "Osaka DC" },
+  { value: "nagoya", label: "Nagoya Hub" },
+];
+
+const RECEIPT_LINES: ReceiptLine[] = [
+  {
+    id: "GR-1",
+    sku: "TS-NAVY-S",
+    product: "Tee · Navy · S",
+    supplierId: "hanover",
+    warehouseId: "tokyo",
+    ordered: 24,
+    received: 24,
+    unitPrice: 8.5,
+    currency: "USD",
+    discount: 0,
+    weightKg: 4.8,
+    lot: "L-2609-01",
+    expected: "2026-10-02",
+    receivedAt: "2026-10-02T09:15:00.000Z",
+    bestBefore: null,
+    status: "received",
+    qc: "pass",
+    note: null,
+  },
+  {
+    id: "GR-2",
+    sku: "TS-NAVY-M",
+    product: "Tee · Navy · M",
+    supplierId: "hanover",
+    warehouseId: "tokyo",
+    ordered: 36,
+    received: null,
+    unitPrice: 8.5,
+    currency: "USD",
+    discount: 5,
+    weightKg: null,
+    lot: "L-2609-02",
+    expected: "2026-10-05",
+    receivedAt: null,
+    bestBefore: null,
+    status: "pending",
+    qc: null,
+    note: null,
+  },
+  {
+    id: "GR-3",
+    sku: "TS-NAVY-L",
+    product: "Tee · Navy · L",
+    supplierId: "hanover",
+    warehouseId: "osaka",
+    ordered: 36,
+    received: 30,
+    unitPrice: 8.5,
+    currency: "USD",
+    discount: 12.5,
+    weightKg: 7.25,
+    lot: "L-2609-03",
+    expected: "2026-10-02",
+    receivedAt: "2026-10-03T14:40:00.000Z",
+    bestBefore: null,
+    status: "partial",
+    qc: "hold",
+    note: "6 short — backorder",
+  },
+  {
+    id: "GR-4",
+    sku: "HD-GREY-M",
+    product: "Hoodie · Grey · M",
+    supplierId: "kanto",
+    warehouseId: null,
+    ordered: 12,
+    received: null,
+    unitPrice: 4200,
+    currency: "JPY",
+    discount: 0,
+    weightKg: null,
+    lot: "K-1009-11",
+    expected: "2026-10-09",
+    receivedAt: null,
+    bestBefore: null,
+    status: "pending",
+    qc: null,
+    note: null,
+  },
+  {
+    id: "GR-5",
+    sku: "HD-GREY-L",
+    product: "Hoodie · Grey · L",
+    supplierId: "kanto",
+    warehouseId: "nagoya",
+    ordered: 12,
+    received: 12,
+    unitPrice: 4200,
+    currency: "JPY",
+    discount: 10,
+    weightKg: 9.12,
+    lot: "K-1009-12",
+    expected: "2026-10-01",
+    receivedAt: "2026-10-01T02:05:00.000Z",
+    bestBefore: null,
+    status: "damaged",
+    qc: "fail",
+    note: "2 with torn seams",
+  },
+  {
+    id: "GR-6",
+    sku: "WX-BEE-200",
+    product: "Beeswax conditioner · 200 g",
+    supplierId: "sagami",
+    warehouseId: "osaka",
+    ordered: 50,
+    received: null,
+    unitPrice: 5.25,
+    currency: "USD",
+    discount: 0,
+    weightKg: null,
+    lot: "S-2710-04",
+    expected: null,
+    receivedAt: null,
+    bestBefore: "2027-03-31",
+    status: "pending",
+    qc: null,
+    note: null,
+  },
+];
+
+// Pretend server: saves after a short delay, and rejects unit prices above
+// 10,000 so the demo can show a failed autosave reverting the cell.
+function saveUnitPrice(value: number): Promise<void> {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (value > 10_000) reject(new Error("Price above the approval limit"));
+      else resolve();
+    }, 600);
+  });
+}
+
+const { column } = createColumnHelper<ReceiptLine>();
+
+/**
+ * Goods receipt with every inline editor and rule: typed numbers with limits
+ * (Received, Unit price, Discount %, Weight), required and free text (Lot no.,
+ * Note), dropdowns (Supplier, Warehouse), badge dropdowns (Status, QC), and
+ * dates (Expected, Received at, Best before).
+ */
+export function InlineEditingDemo() {
+  const toast = useToast();
+  const [lines, setLines] = useState(RECEIPT_LINES);
+  const [lastCommit, setLastCommit] = useState<string | null>(null);
+
+  const update = (id: string, patch: Partial<ReceiptLine>, label: string) => {
+    setLines((prev) => prev.map((line) => (line.id === id ? { ...line, ...patch } : line)));
+    setLastCommit(`${id} · ${label}`);
+  };
+
+  const columns = [
+    column({ id: "sku", label: "SKU", type: "text", width: 120, pin: "left" }),
+    column({ id: "product", label: "Product", type: "text" }),
+    column({
+      id: "supplierId",
+      label: "Supplier",
+      type: "link",
+      width: 170,
+      typeOptions: { href: () => "/showcase/data-table-lab" },
+      // A required dropdown while the line is still pending; afterwards a read-only link.
+      edit: {
+        options: SUPPLIERS,
+        required: true,
+        canEdit: (row) => row.status === "pending",
+        onCommit: (row, value) =>
+          update(row.id, { supplierId: value ?? row.supplierId }, `Supplier → ${value}`),
+      },
+    }),
+    column({
+      id: "warehouseId",
+      label: "Warehouse",
+      type: "text",
+      width: 130,
+      // Optional dropdown: offers "None".
+      edit: {
+        options: WAREHOUSES,
+        onCommit: (row, value) =>
+          update(row.id, { warehouseId: value }, `Warehouse → ${value ?? "none"}`),
+      },
+    }),
+    column({ id: "ordered", label: "Ordered", type: "number", width: 88 }),
+    column({
+      id: "received",
+      label: "Received",
+      type: "number",
+      width: 104,
+      edit: {
+        canEdit: (_row, { selected }) => selected,
+        min: 0,
+        maxDecimals: 0,
+        validate: (value, row) =>
+          value !== null && value > row.ordered
+            ? `Can't exceed ordered (${row.ordered})`
+            : undefined,
+        onCommit: (row, value) =>
+          update(row.id, { received: value }, `Received → ${value ?? "empty"}`),
+      },
+    }),
+    column({
+      id: "unitPrice",
+      label: "Unit price",
+      type: "money",
+      width: 120,
+      typeOptions: { currency: (row) => row.currency },
+      edit: {
+        min: 0,
+        required: true,
+        // Autosave: the cell shows the new price while the request runs, and
+        // goes back to the old one if it fails.
+        onCommit: async (row, value) => {
+          // `required` means an emptied cell never reaches here.
+          if (value === null) return;
+          try {
+            await saveUnitPrice(value);
+            update(row.id, { unitPrice: value }, `Unit price → ${value}`);
+          } catch (error) {
+            toast.error(`Couldn't save ${row.sku}: ${(error as Error).message}`);
+            throw error;
+          }
+        },
+      },
+    }),
+    column({
+      id: "discount",
+      label: "Discount %",
+      type: "number",
+      width: 110,
+      // A hard limit: 0–100, one decimal place. Try 150 or -5.
+      edit: {
+        min: 0,
+        max: 100,
+        maxDecimals: 1,
+        required: true,
+        onCommit: (row, value) => update(row.id, { discount: value ?? 0 }, `Discount → ${value}%`),
+      },
+    }),
+    column({
+      id: "total",
+      label: "Total",
+      type: "money",
+      width: 120,
+      accessor: (row) => (row.received ?? 0) * row.unitPrice * (1 - row.discount / 100),
+      typeOptions: { currency: (row) => row.currency },
+    }),
+    column({
+      id: "weightKg",
+      label: "Weight (kg)",
+      type: "number",
+      width: 112,
+      // Three decimal places, up to 500 kg.
+      edit: {
+        min: 0,
+        max: 500,
+        maxDecimals: 3,
+        onCommit: (row, value) =>
+          update(row.id, { weightKg: value }, `Weight → ${value ?? "empty"} kg`),
+      },
+    }),
+    column({
+      id: "lot",
+      label: "Lot no.",
+      type: "text",
+      width: 120,
+      // Required text: clearing it and pressing Enter shows "Required".
+      edit: {
+        required: true,
+        onCommit: (row, value) => update(row.id, { lot: value ?? row.lot }, `Lot → ${value}`),
+      },
+    }),
+    column({
+      id: "expected",
+      label: "Expected",
+      type: "date",
+      width: 140,
+      edit: {
+        min: "2026-09-01",
+        onCommit: (row, value) =>
+          update(row.id, { expected: value }, `Expected → ${value ?? "cleared"}`),
+      },
+    }),
+    column({
+      id: "receivedAt",
+      label: "Received at",
+      type: "date",
+      width: 190,
+      typeOptions: { dateFormat: "datetime" },
+      // Date and time: pick a day, set the time, then Done.
+      edit: {
+        onCommit: (row, value) =>
+          update(row.id, { receivedAt: value }, `Received at → ${value ?? "cleared"}`),
+      },
+    }),
+    column({
+      id: "bestBefore",
+      label: "Best before",
+      type: "date",
+      width: 140,
+      // Bounded: only days from Oct 2026 to Dec 2027 can be picked.
+      edit: {
+        min: "2026-10-01",
+        max: "2027-12-31",
+        onCommit: (row, value) =>
+          update(row.id, { bestBefore: value }, `Best before → ${value ?? "cleared"}`),
+      },
+    }),
+    column({
+      id: "status",
+      label: "Status",
+      type: "badge",
+      width: 130,
+      typeOptions: {
+        badgeLabelMap: {
+          pending: "Pending",
+          partial: "Partial",
+          received: "Received",
+          damaged: "Damaged",
+        },
+        badgeVariantMap: {
+          pending: "outline-neutral",
+          partial: "outline-warning",
+          received: "outline-success",
+          damaged: "outline-error",
+        },
+      },
+      // Required badge dropdown; choices come from `badgeLabelMap`.
+      edit: {
+        required: true,
+        onCommit: (row, value) =>
+          update(row.id, { status: (value ?? row.status) as LineStatus }, `Status → ${value}`),
+      },
+    }),
+    column({
+      id: "qc",
+      label: "QC",
+      type: "badge",
+      width: 110,
+      typeOptions: {
+        badgeLabelMap: { pass: "Pass", hold: "On hold", fail: "Fail" },
+        badgeVariantMap: { pass: "success", hold: "warning", fail: "error" },
+      },
+      // Optional badge dropdown: offers "None".
+      edit: {
+        onCommit: (row, value) =>
+          update(row.id, { qc: value as QcResult | null }, `QC → ${value ?? "none"}`),
+      },
+    }),
+    column({
+      id: "note",
+      label: "Note",
+      type: "text",
+      truncate: true,
+      width: 180,
+      edit: {
+        onCommit: (row, value) => update(row.id, { note: value }, `Note → ${value ?? "empty"}`),
+      },
+    }),
+  ];
+
+  const table = useDataTable<ReceiptLine>({
+    columns,
+    data: { rows: lines, total: lines.length },
+    tableId: "lab-inline-editing-v3",
+    onSelectionChange: () => {},
+  });
+
+  return (
+    <DataTable.Root value={table}>
+      <DataTable.Table />
+      <DataTable.Footer>
+        <p className="text-sm text-muted-foreground">
+          Last commit: <span className="font-mono">{lastCommit ?? "—"}</span>
+        </p>
+      </DataTable.Footer>
+    </DataTable.Root>
+  );
+}
diff --git a/examples/vite-app/src/pages/showcase/data-table-lab/page.tsx b/examples/vite-app/src/pages/showcase/data-table-lab/page.tsx
index 254079d4..6854fd71 100644
--- a/examples/vite-app/src/pages/showcase/data-table-lab/page.tsx
+++ b/examples/vite-app/src/pages/showcase/data-table-lab/page.tsx
@@ -11,6 +11,7 @@ import {
 } from "@tailor-platform/app-shell";
 import { FlaskConical } from "lucide-react";
 import { useMemo } from "react";
+import { InlineEditingDemo } from "./inline-editing-demo";
 
 // ─── Dummy data ──────────────────────────────────────────────────────────────
 // 🧪 Dummy Data: Replace with a real GraphQL-backed source later.
@@ -548,6 +549,29 @@ const DataTableLabPage = () => {
           Layout persists per table via <code>tableId</code>.
         </div>
 
+        <Section
+          title="Inline editing"
+          description={
+            <>
+              A goods receipt with every editor and rule — scroll right for more columns.{" "}
+              <strong>Numbers:</strong> tick a row to enter its <strong>Received</strong> quantity
+              (whole numbers, never more than ordered); <strong>Discount %</strong> is limited to
+              0–100 with one decimal (try 150); <strong>Weight (kg)</strong> takes three decimals up
+              to 500; <strong>Unit price</strong> autosaves, and prices over 10,000 are rejected so
+              the cell reverts. <strong>Text:</strong> <strong>Lot no.</strong> is required,{" "}
+              <strong>Note</strong> free. <strong>Dropdowns:</strong> <strong>Supplier</strong>{" "}
+              (required, pending lines only) and <strong>Warehouse</strong> (optional).{" "}
+              <strong>Badges:</strong> <strong>Status</strong> (required) and <strong>QC</strong>{" "}
+              (optional). <strong>Dates:</strong> <strong>Expected</strong>,{" "}
+              <strong>Received at</strong> (with time) and <strong>Best before</strong> (Oct
+              2026–Dec 2027 only). Enter moves down a column, Tab to the next editable cell, Esc
+              undoes.
+            </>
+          }
+        >
+          <InlineEditingDemo />
+        </Section>
+
         <Section
           title="Toolbar — filters + column settings"
           description={
diff --git a/packages/core/__snapshots__/src__components__select__select.test.tsx.snap b/packages/core/__snapshots__/src__components__select__select.test.tsx.snap
index 63af7e13..7408e674 100644
--- a/packages/core/__snapshots__/src__components__select__select.test.tsx.snap
+++ b/packages/core/__snapshots__/src__components__select__select.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`Select > snapshots > closed select with placeholder 1`] = `"<button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_0_" role="combobox" aria-expanded="false" aria-haspopup="listbox" data-slot="select-trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span data-placeholder="" data-slot="select-value">Pick one</span><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><input id="base-ui-_r_0_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value="">"`;
 
-exports[`Select > snapshots > disabled item 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_g_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_g_-list"><span data-placeholder="" data-slot="select-value">Pick</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_j_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_g_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_j_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_g_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md" data-slot="select-content"><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div><div data-disabled="" role="option" aria-disabled="true" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Banana</div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
+exports[`Select > snapshots > disabled item 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_g_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_g_-list"><span data-placeholder="" data-slot="select-value">Pick</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_j_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_g_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_j_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_g_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:p-1 astw:shadow-md" data-slot="select-content"><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div><div data-disabled="" role="option" aria-disabled="true" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Banana</div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
 
 exports[`Select > snapshots > disabled select 1`] = `"<button type="button" data-disabled="" data-placeholder="" tabindex="-1" disabled="" id="base-ui-_r_d_" role="combobox" aria-expanded="false" aria-haspopup="listbox" data-slot="select-trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span data-placeholder="" data-slot="select-value">Disabled</span><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><input id="base-ui-_r_d_-hidden-input" disabled="" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value="">"`;
 
-exports[`Select > snapshots > open select 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_3_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_3_-list"><span data-placeholder="" data-slot="select-value">Pick one</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_6_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_3_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_6_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_3_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md" data-slot="select-content"><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Banana</div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
+exports[`Select > snapshots > open select 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_3_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_3_-list"><span data-placeholder="" data-slot="select-value">Pick one</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_6_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_3_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_6_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_3_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:p-1 astw:shadow-md" data-slot="select-content"><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Banana</div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
 
-exports[`Select > snapshots > with groups and separator 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_7_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_7_-list"><span data-placeholder="" data-slot="select-value">Pick</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_a_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_7_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_a_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_7_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md" data-slot="select-content"><div role="group" data-slot="select-group" aria-labelledby="base-ui-_r_b_"><div id="base-ui-_r_b_" aria-hidden="true" data-slot="select-group-label" class="astw:text-muted-foreground astw:px-2 astw:py-1.5 astw:text-xs astw:font-medium">Fruits</div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div></div><div data-slot="select-separator" class="astw:bg-muted astw:-mx-1 astw:my-1 astw:h-px"></div><div role="group" data-slot="select-group" aria-labelledby="base-ui-_r_c_"><div id="base-ui-_r_c_" aria-hidden="true" data-slot="select-group-label" class="astw:text-muted-foreground astw:px-2 astw:py-1.5 astw:text-xs astw:font-medium">Vegetables</div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Carrot</div></div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
+exports[`Select > snapshots > with groups and separator 1`] = `"<div data-base-ui-inert=""><button type="button" data-placeholder="" tabindex="0" id="base-ui-_r_7_" role="combobox" aria-expanded="true" aria-haspopup="listbox" data-slot="select-trigger" data-testid="trigger" class="astw:border-input astw:bg-transparent astw:dark:bg-input/30 astw:text-foreground astw:flex astw:h-9 astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-md astw:border astw:px-3 astw:py-2 astw:text-sm astw:shadow-xs astw:outline-none astw:transition-colors astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:disabled:cursor-not-allowed astw:disabled:opacity-50 astw:placeholder:text-muted-foreground astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0" data-popup-open="" data-pressed="" data-popup-side="bottom" aria-controls="base-ui-_r_7_-list"><span data-placeholder="" data-slot="select-value">Pick</span><span aria-hidden="true" data-popup-open=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down astw:size-4 astw:opacity-50" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><span aria-owns="_r_a_" style="clip-path: inset(50%); position: fixed; top: 0px; left: 0px;"></span><span data-type="outside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><input id="base-ui-_r_7_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value=""></div><div id="_r_a_" data-base-ui-portal="" style="position: relative; z-index: var(--z-popup);"><div role="presentation" data-base-ui-inert="" style="position: fixed; user-select: none; clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px);"></div><div data-open="" data-side="bottom" data-align="center" role="presentation" style="position: absolute; --available-width: -10px; --available-height: -10px; --anchor-width: 0px; --anchor-height: 0px; --transform-origin: 0px 0px; left: 0px; top: 0px; transform: translate(0px, 0px);" data-anchor-hidden=""><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span><div data-open="" data-side="bottom" data-align="center" tabindex="-1" data-base-ui-focusable="" role="listbox" id="base-ui-_r_7_-list" style="height: 100%;" class="astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:p-1 astw:shadow-md" data-slot="select-content"><div role="group" data-slot="select-group" aria-labelledby="base-ui-_r_b_"><div id="base-ui-_r_b_" aria-hidden="true" data-slot="select-group-label" class="astw:text-muted-foreground astw:px-2 astw:py-1.5 astw:text-xs astw:font-medium">Fruits</div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Apple</div></div></div><div data-slot="select-separator" class="astw:bg-muted astw:-mx-1 astw:my-1 astw:h-px"></div><div role="group" data-slot="select-group" aria-labelledby="base-ui-_r_c_"><div id="base-ui-_r_c_" aria-hidden="true" data-slot="select-group-label" class="astw:text-muted-foreground astw:px-2 astw:py-1.5 astw:text-xs astw:font-medium">Vegetables</div><div role="option" aria-selected="false" tabindex="-1" data-slot="select-item" class="astw:relative astw:flex astw:w-full astw:cursor-default astw:items-center astw:gap-2 astw:rounded-sm astw:py-1.5 astw:pr-8 astw:pl-2 astw:text-sm astw:outline-hidden astw:select-none astw:focus:bg-accent astw:focus:text-accent-foreground astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:[&amp;_svg]:shrink-0"><span class="astw:absolute astw:right-2 astw:flex astw:size-3.5 astw:items-center astw:justify-center"></span><div>Carrot</div></div></div></div><span data-type="inside" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" aria-hidden="true" tabindex="0" data-base-ui-focus-guard=""></span></div></div>"`;
diff --git a/packages/core/src/components/data-table/cell-edit.test.ts b/packages/core/src/components/data-table/cell-edit.test.ts
new file mode 100644
index 00000000..772d1d3c
--- /dev/null
+++ b/packages/core/src/components/data-table/cell-edit.test.ts
@@ -0,0 +1,296 @@
+import { describe, expect, it } from "vitest";
+import {
+  currencyFractionDigits,
+  evaluateNumberDraft,
+  isIsoDate,
+  optionLabel,
+  resolveBadgeOptions,
+  sameDate,
+  toCalendarDate,
+  toIsoDateTime,
+  toLocalDate,
+  toTimeText,
+  evaluateTextDraft,
+  isAllowedNumberText,
+  isLiveError,
+  normalizeNumberText,
+  parseNumberText,
+  sameNumber,
+  toNumberEditText,
+  toNumberValue,
+  toTextValue,
+  type NumberEditRules,
+} from "./cell-edit";
+
+const alwaysCustom = () => "custom";
+
+const rules = (overrides: Partial<NumberEditRules> = {}): NumberEditRules => ({
+  maxDecimals: 2,
+  required: false,
+  ...overrides,
+});
+
+describe("isAllowedNumberText", () => {
+  it("accepts digits and the empty string", () => {
+    expect(isAllowedNumberText("", rules())).toBe(true);
+    expect(isAllowedNumberText("120", rules())).toBe(true);
+  });
+
+  it("blocks a minus sign when negatives aren't allowed", () => {
+    expect(isAllowedNumberText("-", rules({ min: 0 }))).toBe(false);
+    expect(isAllowedNumberText("-5", rules({ min: 0 }))).toBe(false);
+    expect(isAllowedNumberText("-5", rules({ min: -10 }))).toBe(true);
+    expect(isAllowedNumberText("-", rules())).toBe(true);
+  });
+
+  it("only accepts a minus sign in first position", () => {
+    expect(isAllowedNumberText("5-", rules())).toBe(false);
+    expect(isAllowedNumberText("--5", rules())).toBe(false);
+  });
+
+  it("blocks the decimal point for whole numbers", () => {
+    expect(isAllowedNumberText("5.", rules({ maxDecimals: 0 }))).toBe(false);
+    expect(isAllowedNumberText("5", rules({ maxDecimals: 0 }))).toBe(true);
+  });
+
+  it("blocks digits past maxDecimals and a second decimal point", () => {
+    expect(isAllowedNumberText("1.25", rules())).toBe(true);
+    expect(isAllowedNumberText("1.255", rules())).toBe(false);
+    expect(isAllowedNumberText("1.2.5", rules())).toBe(false);
+  });
+
+  it("rejects letters, exponents and signs Number() would accept", () => {
+    for (const text of ["e", "1e5", "+5", "0x1f", "1,000", "12a"]) {
+      expect(isAllowedNumberText(text, rules())).toBe(false);
+    }
+  });
+});
+
+describe("normalizeNumberText", () => {
+  it("drops strict thousands grouping", () => {
+    expect(normalizeNumberText("1,234.5")).toBe("1234.5");
+    expect(normalizeNumberText("-1,234,567")).toBe("-1234567");
+  });
+
+  it("leaves a decimal comma alone so it fails instead of becoming 15", () => {
+    expect(normalizeNumberText("1,5")).toBe("1,5");
+    expect(parseNumberText(normalizeNumberText("1,5"))).toBeUndefined();
+  });
+
+  it("converts full-width digits and signs", () => {
+    expect(normalizeNumberText("１２．５")).toBe("12.5");
+    expect(normalizeNumberText("－３")).toBe("-3");
+    expect(normalizeNumberText("−3")).toBe("-3");
+  });
+
+  it("strips whitespace and currency symbols", () => {
+    expect(normalizeNumberText(" $1,234.50 ")).toBe("1234.50");
+    expect(normalizeNumberText("¥ 1 200")).toBe("1200");
+  });
+});
+
+describe("parseNumberText", () => {
+  it("treats an empty draft as null", () => {
+    expect(parseNumberText("")).toBeNull();
+    expect(parseNumberText("  ")).toBeNull();
+  });
+
+  it("parses partial but complete-enough numbers", () => {
+    expect(parseNumberText("5.")).toBe(5);
+    expect(parseNumberText(".5")).toBe(0.5);
+    expect(parseNumberText("-0")).toBe(0);
+    expect(Object.is(parseNumberText("-0"), -0)).toBe(false);
+  });
+
+  it("rejects half-typed and non-numeric drafts", () => {
+    for (const text of ["-", ".", "-.", "abc", "1,5", String(Number.MAX_SAFE_INTEGER * 2)]) {
+      expect(parseNumberText(text)).toBeUndefined();
+    }
+  });
+});
+
+describe("evaluateNumberDraft", () => {
+  it("returns the parsed value when every rule passes", () => {
+    expect(evaluateNumberDraft("12.5", rules({ min: 0, max: 100 }))).toEqual({
+      value: 12.5,
+      error: null,
+    });
+  });
+
+  it("checks rules in order: required, number, decimals, min, max, custom", () => {
+    const validate = alwaysCustom;
+    expect(evaluateNumberDraft("", rules({ required: true }), validate).error).toEqual({
+      code: "required",
+    });
+    expect(evaluateNumberDraft("-", rules(), validate).error).toEqual({ code: "number" });
+    expect(evaluateNumberDraft("1.234", rules(), validate).error).toEqual({
+      code: "decimals",
+      maxDecimals: 2,
+    });
+    expect(evaluateNumberDraft("-1", rules({ min: 0 }), validate).error).toEqual({
+      code: "min",
+      min: 0,
+    });
+    expect(evaluateNumberDraft("101", rules({ max: 100 }), validate).error).toEqual({
+      code: "max",
+      max: 100,
+    });
+    expect(evaluateNumberDraft("5", rules(), validate).error).toEqual({
+      code: "custom",
+      message: "custom",
+    });
+  });
+
+  it("ignores trailing zeros when counting decimals", () => {
+    expect(evaluateNumberDraft("2.50", rules({ maxDecimals: 1 })).error).toBeNull();
+    expect(evaluateNumberDraft("3.0", rules({ maxDecimals: 0 })).error).toBeNull();
+  });
+
+  it("passes an empty value to validate only when the column isn't required", () => {
+    const calls: unknown[] = [];
+    const validate = (value: number | null) => {
+      calls.push(value);
+      return undefined;
+    };
+    evaluateNumberDraft("", rules(), validate);
+    evaluateNumberDraft("", rules({ required: true }), validate);
+    expect(calls).toEqual([null]);
+  });
+
+  it("treats min and max as inclusive", () => {
+    expect(evaluateNumberDraft("0", rules({ min: 0, max: 0 })).error).toBeNull();
+  });
+});
+
+describe("evaluateTextDraft", () => {
+  it("commits text as typed and an emptied field as null", () => {
+    expect(evaluateTextDraft(" Hello ", false)).toEqual({ value: " Hello ", error: null });
+    expect(evaluateTextDraft("", false)).toEqual({ value: null, error: null });
+  });
+
+  it("reports required and custom errors", () => {
+    expect(evaluateTextDraft("", true).error).toEqual({ code: "required" });
+    expect(evaluateTextDraft("x", false, (v) => (v === "x" ? "No x" : null)).error).toEqual({
+      code: "custom",
+      message: "No x",
+    });
+  });
+});
+
+describe("isLiveError", () => {
+  it("shows errors more typing can't fix right away, and defers the rest", () => {
+    expect(isLiveError({ code: "max", max: 1 })).toBe(true);
+    expect(isLiveError({ code: "decimals", maxDecimals: 0 })).toBe(true);
+    expect(isLiveError({ code: "custom", message: "x" })).toBe(true);
+    expect(isLiveError({ code: "min", min: 1 })).toBe(false);
+    expect(isLiveError({ code: "required" })).toBe(false);
+    expect(isLiveError({ code: "number" })).toBe(false);
+  });
+});
+
+describe("value helpers", () => {
+  it("compares numbers without floating-point noise", () => {
+    expect(sameNumber(10, 10)).toBe(true);
+    expect(sameNumber(0.1 + 0.2, 0.3)).toBe(true);
+    expect(sameNumber(null, null)).toBe(true);
+    expect(sameNumber(0, null)).toBe(false);
+    expect(sameNumber(10, 10.01)).toBe(false);
+  });
+
+  it("reads raw values the way the renderers do", () => {
+    expect(toNumberValue("10.00")).toBe(10);
+    expect(toNumberValue("")).toBeNull();
+    expect(toNumberValue("abc")).toBeNull();
+    expect(toTextValue("")).toBeNull();
+    expect(toTextValue(42)).toBe("42");
+  });
+
+  it("formats numbers for editing without grouping, exponents or noise", () => {
+    expect(toNumberEditText(1234567.5)).toBe("1234567.5");
+    expect(toNumberEditText(0.1 + 0.2)).toBe("0.3");
+    expect(toNumberEditText(1e21)).toBe("1000000000000000000000");
+    expect(toNumberEditText(null)).toBe("");
+  });
+
+  it("knows each currency's decimal places", () => {
+    expect(currencyFractionDigits("USD")).toBe(2);
+    expect(currencyFractionDigits("JPY")).toBe(0);
+    expect(currencyFractionDigits("KWD")).toBe(3);
+    expect(currencyFractionDigits("NOT-A-CODE")).toBe(2);
+  });
+});
+
+describe("choices", () => {
+  const choices = [
+    { value: "acme", label: "Acme Corp" },
+    { value: "7", label: "Seven" },
+  ];
+
+  it("labels a value by its choice, and leaves unknown or empty values alone", () => {
+    expect(optionLabel(choices, "acme")).toBe("Acme Corp");
+    expect(optionLabel(choices, 7)).toBe("Seven");
+    expect(optionLabel(choices, "other")).toBe("other");
+    expect(optionLabel(choices, null)).toBeNull();
+    expect(optionLabel(undefined, "acme")).toBe("acme");
+  });
+
+  it("takes a badge column's choices from edit.options, then badgeLabelMap, then an enum filter", () => {
+    const filter = {
+      field: "status",
+      type: "enum" as const,
+      options: [{ value: "a", label: "A" }],
+    };
+    const typeOptions = { badgeLabelMap: { open: "Open", closed: "Closed" } };
+    expect(resolveBadgeOptions(choices, typeOptions, filter)).toBe(choices);
+    expect(resolveBadgeOptions(undefined, typeOptions, filter)).toEqual([
+      { value: "open", label: "Open" },
+      { value: "closed", label: "Closed" },
+    ]);
+    expect(resolveBadgeOptions(undefined, undefined, filter)).toEqual(filter.options);
+    expect(resolveBadgeOptions(undefined, undefined, { field: "status", type: "string" })).toEqual(
+      [],
+    );
+  });
+});
+
+describe("dates", () => {
+  it("recognises date-only strings", () => {
+    expect(isIsoDate("2026-10-02")).toBe(true);
+    expect(isIsoDate("2026-10-02T09:00:00Z")).toBe(false);
+    expect(isIsoDate(20261002)).toBe(false);
+  });
+
+  it("reads a date-only string as that local day, and rejects impossible ones", () => {
+    const day = toLocalDate("2026-10-02");
+    expect([day?.getFullYear(), day?.getMonth(), day?.getDate()]).toEqual([2026, 9, 2]);
+    expect(toLocalDate("2026-13-45")).toBeNull();
+    expect(toLocalDate("2026-02-30")).toBeNull();
+    expect(toLocalDate("not a date")).toBeNull();
+    expect(toLocalDate({})).toBeNull();
+  });
+
+  it("converts cell values to the calendar day and local time they show", () => {
+    expect(toCalendarDate("2026-10-02")?.toString()).toBe("2026-10-02");
+    expect(toCalendarDate(new Date(2026, 9, 2, 23, 30))?.toString()).toBe("2026-10-02");
+    expect(toCalendarDate(null)).toBeNull();
+    expect(toTimeText(new Date(2026, 9, 2, 9, 5))).toBe("09:05");
+    expect(toTimeText("2026-10-02")).toBe("00:00");
+    expect(toTimeText(undefined)).toBe("");
+  });
+
+  it("builds an ISO timestamp from a day and a local time", () => {
+    const day = toCalendarDate("2026-10-20")!;
+    expect(toIsoDateTime(day, "14:30")).toBe(new Date(2026, 9, 20, 14, 30).toISOString());
+    expect(toIsoDateTime(day, "")).toBe(new Date(2026, 9, 20).toISOString());
+  });
+
+  it("compares by day for dates and by minute for date-times", () => {
+    expect(sameDate("2026-10-02", new Date(2026, 9, 2, 18), false)).toBe(true);
+    expect(sameDate("2026-10-02", "2026-10-03", false)).toBe(false);
+    const at = new Date(2026, 9, 2, 14, 30, 5);
+    expect(sameDate(at.toISOString(), new Date(2026, 9, 2, 14, 30, 50), true)).toBe(true);
+    expect(sameDate(at.toISOString(), new Date(2026, 9, 2, 14, 31), true)).toBe(false);
+    expect(sameDate(null, undefined, false)).toBe(true);
+    expect(sameDate(null, "2026-10-02", false)).toBe(false);
+  });
+});
diff --git a/packages/core/src/components/data-table/cell-edit.ts b/packages/core/src/components/data-table/cell-edit.ts
new file mode 100644
index 00000000..573cddf2
--- /dev/null
+++ b/packages/core/src/components/data-table/cell-edit.ts
@@ -0,0 +1,294 @@
+/**
+ * Pure helpers behind DataTable's inline cell editing: which keystrokes a number
+ * cell accepts, how typed or pasted text becomes a value, which rules a draft
+ * breaks, and whether a draft is a real change or a cosmetic one (`10` vs
+ * `10.00`). Kept free of React so every rule can be unit-tested directly.
+ *
+ * @internal
+ */
+
+import { CalendarDate } from "@internationalized/date";
+import type { SelectOption } from "@/types/collection";
+import type { BadgeCellOptions, DataTableFilterConfig } from "./types";
+
+/** Rules a `number` / `money` cell enforces while the user types and on commit. */
+export interface NumberEditRules {
+  min?: number;
+  max?: number;
+  /** Digits allowed after the decimal point. `0` means whole numbers only. */
+  maxDecimals: number;
+  required: boolean;
+}
+
+/** Why a draft can't be committed. The cell maps each code to an i18n message. */
+export type CellEditError =
+  | { code: "required" }
+  | { code: "number" }
+  | { code: "decimals"; maxDecimals: number }
+  | { code: "min"; min: number }
+  | { code: "max"; max: number }
+  | { code: "custom"; message: string };
+
+/** A draft's parsed value alongside the first rule it breaks, if any. */
+export interface DraftEvaluation<TValue> {
+  value: TValue | null;
+  error: CellEditError | null;
+}
+
+type Validate<TValue> = ((value: TValue | null) => string | null | undefined) | undefined;
+
+/**
+ * Errors worth showing while the user is still typing. More keystrokes can't
+ * fix these (a value over `max` only grows), whereas `min`, `required` and a
+ * half-typed number are ordinary mid-typing states — those wait until the user
+ * tries to save, so the cell doesn't flash red on every keystroke.
+ */
+export function isLiveError(error: CellEditError): boolean {
+  return error.code === "max" || error.code === "decimals" || error.code === "custom";
+}
+
+/**
+ * Whether `text` is something the user could be partway through typing into a
+ * number cell. Characters that can never be valid are rejected here: a minus
+ * sign when negatives aren't allowed, a decimal point for whole numbers, and
+ * digits past `maxDecimals`.
+ */
+export function isAllowedNumberText(
+  text: string,
+  rules: Pick<NumberEditRules, "min" | "maxDecimals">,
+): boolean {
+  const sign = rules.min === undefined || rules.min < 0 ? "-?" : "";
+  const fraction = rules.maxDecimals > 0 ? `(?:\\.\\d{0,${rules.maxDecimals}})?` : "";
+  return new RegExp(`^${sign}\\d*${fraction}$`).test(text);
+}
+
+// Thousands grouping with commas, e.g. "1,234,567.89".
+const GROUPED_NUMBER = /^-?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/;
+
+/**
+ * Cleans number text that arrived all at once (a paste, or the end of an IME
+ * composition): full-width digits and signs become ASCII, whitespace and
+ * currency symbols are dropped, and commas are removed only when they form
+ * strict thousands groups — so "1,234.5" becomes "1234.5", while "1,5" is left
+ * alone to fail as "not a number" instead of silently turning into 15.
+ */
+export function normalizeNumberText(text: string): string {
+  const compact = text
+    .normalize("NFKC")
+    .replace(/[\s\p{Sc}]/gu, "")
+    .replace(/^−/, "-");
+  return GROUPED_NUMBER.test(compact) ? compact.replace(/,/g, "") : compact;
+}
+
+/** `""` → `null`, `"5."` → `5`; `"-"`, `"."` and anything non-numeric → `undefined`. */
+export function parseNumberText(text: string): number | null | undefined {
+  const trimmed = text.trim();
+  if (trimmed === "") return null;
+  if (!/^-?(?:\d+\.?\d*|\.\d+)$/.test(trimmed)) return undefined;
+  const value = Number(trimmed);
+  if (!Number.isFinite(value) || Math.abs(value) > Number.MAX_SAFE_INTEGER) return undefined;
+  // `+ 0` folds -0 into 0 so "-0" doesn't read as a change from 0.
+  return value + 0;
+}
+
+// Digits after the decimal point, ignoring trailing zeros ("2.50" has one).
+function significantDecimals(text: string): number {
+  const dot = text.indexOf(".");
+  if (dot === -1) return 0;
+  return text.slice(dot + 1).replace(/0+$/, "").length;
+}
+
+/**
+ * Parses a number draft and checks it against the column's rules, in order:
+ * required → not a number → decimals → min → max → the consumer's `validate`.
+ */
+export function evaluateNumberDraft(
+  text: string,
+  rules: NumberEditRules,
+  validate?: Validate<number>,
+): DraftEvaluation<number> {
+  const value = parseNumberText(text);
+  if (value === undefined) return { value: null, error: { code: "number" } };
+  if (value === null) {
+    return { value, error: rules.required ? { code: "required" } : customError(validate, value) };
+  }
+  if (significantDecimals(text) > rules.maxDecimals) {
+    return { value, error: { code: "decimals", maxDecimals: rules.maxDecimals } };
+  }
+  if (rules.min !== undefined && value < rules.min) {
+    return { value, error: { code: "min", min: rules.min } };
+  }
+  if (rules.max !== undefined && value > rules.max) {
+    return { value, error: { code: "max", max: rules.max } };
+  }
+  return { value, error: customError(validate, value) };
+}
+
+/** Text drafts: an empty field is `null`; otherwise the text exactly as typed. */
+export function evaluateTextDraft(
+  text: string,
+  required: boolean,
+  validate?: Validate<string>,
+): DraftEvaluation<string> {
+  const value = text === "" ? null : text;
+  if (value === null && required) return { value, error: { code: "required" } };
+  return { value, error: customError(validate, value) };
+}
+
+function customError<TValue>(validate: Validate<TValue>, value: TValue | null) {
+  const message = validate?.(value);
+  return message ? ({ code: "custom", message } as const) : null;
+}
+
+/** Reads a raw cell value as a number the way the `number` renderer does. */
+export function toNumberValue(raw: unknown): number | null {
+  if (raw == null || raw === "") return null;
+  const value = typeof raw === "number" ? raw : Number(raw);
+  return Number.isFinite(value) ? value : null;
+}
+
+/** Reads a raw cell value as text; `null`, `undefined` and `""` are all empty. */
+export function toTextValue(raw: unknown): string | null {
+  if (raw == null || raw === "") return null;
+  return String(raw);
+}
+
+// 15 significant digits drops floating-point noise (0.1 + 0.2 → 0.3).
+function roundNoise(value: number): number {
+  return Number(value.toPrecision(15));
+}
+
+/** `10`, `10.0` and `9.999999999999998` are the same number to a user. */
+export function sameNumber(a: number | null, b: number | null): boolean {
+  if (a === null || b === null) return a === b;
+  return roundNoise(a) === roundNoise(b);
+}
+
+/** A number as the user types it: no grouping, no exponent, no float noise. */
+export function toNumberEditText(value: number | null): string {
+  if (value === null) return "";
+  return roundNoise(value).toLocaleString("en-US", {
+    useGrouping: false,
+    maximumFractionDigits: 20,
+  });
+}
+
+const currencyDigits = new Map<string, number>();
+
+/**
+ * Decimal places a currency uses (USD 2, JPY 0, KWD 3). Fraction digits come
+ * from ISO 4217 and don't depend on locale. An invalid code resolves to USD's,
+ * matching the `money` renderer's fallback.
+ */
+export function currencyFractionDigits(currency: string): number {
+  let digits = currencyDigits.get(currency);
+  if (digits === undefined) {
+    try {
+      digits =
+        new Intl.NumberFormat("en-US", { style: "currency", currency }).resolvedOptions()
+          .maximumFractionDigits ?? 2;
+    } catch {
+      digits = 2;
+    }
+    currencyDigits.set(currency, digits);
+  }
+  return digits;
+}
+
+// ── Choices (dropdown and badge editors) ─────────────────────────────────────
+
+/** The label a choice shows, or the raw value when it isn't one of the choices. */
+export function optionLabel(options: readonly SelectOption[] | undefined, value: unknown): unknown {
+  if (!options || value == null || value === "") return value;
+  return options.find((option) => option.value === String(value))?.label ?? value;
+}
+
+/**
+ * The choices a badge column offers: `edit.options`, else the entries of
+ * `typeOptions.badgeLabelMap`, else the column's enum filter options.
+ */
+export function resolveBadgeOptions(
+  options: readonly SelectOption[] | undefined,
+  typeOptions: BadgeCellOptions | undefined,
+  filter: DataTableFilterConfig | undefined,
+): readonly SelectOption[] {
+  if (options) return options;
+  const labels = typeOptions?.badgeLabelMap;
+  if (labels) return Object.entries(labels).map(([value, label]) => ({ value, label }));
+  if (filter?.type === "enum") return filter.options;
+  return [];
+}
+
+// ── Dates ────────────────────────────────────────────────────────────────────
+
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+
+/** Whether `value` is a date-only ISO string (`"YYYY-MM-DD"`). */
+export function isIsoDate(value: unknown): value is string {
+  return typeof value === "string" && ISO_DATE.test(value);
+}
+
+/**
+ * A raw date cell value as a local `Date`, or `null` when it isn't one.
+ * `"YYYY-MM-DD"` is read as that day in the local zone — `new Date("2026-10-02")`
+ * is UTC midnight, which is the previous day anywhere west of UTC.
+ */
+export function toLocalDate(raw: unknown): Date | null {
+  if (raw == null || raw === "") return null;
+  if (isIsoDate(raw)) {
+    const [year, month, day] = raw.split("-").map(Number);
+    const date = new Date(year, month - 1, day);
+    // `Date` rolls an impossible day over ("2026-13-45" → Feb 2027); reject it.
+    const exact =
+      date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+    return exact ? date : null;
+  }
+  if (!(raw instanceof Date) && typeof raw !== "string" && typeof raw !== "number") return null;
+  const date = raw instanceof Date ? raw : new Date(raw);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+/** A raw date cell value as the calendar day it shows. */
+export function toCalendarDate(raw: unknown): CalendarDate | null {
+  const date = toLocalDate(raw);
+  return date ? new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate()) : null;
+}
+
+/** The local time of a raw date cell value as `"HH:mm"`; `""` when there is none. */
+export function toTimeText(raw: unknown): string {
+  const date = toLocalDate(raw);
+  if (!date) return "";
+  return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+}
+
+/** A calendar day plus a local `"HH:mm"` as an ISO 8601 timestamp. */
+export function toIsoDateTime(day: CalendarDate, time: string): string {
+  const [hours = 0, minutes = 0] = time ? time.split(":").map(Number) : [];
+  return new Date(day.year, day.month - 1, day.day, hours, minutes).toISOString();
+}
+
+/**
+ * Whether two raw date values mean the same thing: the same day for a date
+ * column, the same minute for a date-time one — so `"2026-10-02"` equals a
+ * `Date` for that day, and string formatting differences don't count.
+ */
+export function sameDate(a: unknown, b: unknown, withTime: boolean): boolean {
+  const left = toLocalDate(a);
+  const right = toLocalDate(b);
+  if (!left || !right) return left === right;
+  if (withTime) return Math.floor(left.getTime() / 60_000) === Math.floor(right.getTime() / 60_000);
+  return (
+    left.getFullYear() === right.getFullYear() &&
+    left.getMonth() === right.getMonth() &&
+    left.getDate() === right.getDate()
+  );
+}
+
+/** Whether a value `onCommit` returned is a promise-like the cell should wait on. */
+export function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    typeof (value as { then?: unknown }).then === "function"
+  );
+}
diff --git a/packages/core/src/components/data-table/cell-renderers.tsx b/packages/core/src/components/data-table/cell-renderers.tsx
index 83596e88..10c2db8e 100644
--- a/packages/core/src/components/data-table/cell-renderers.tsx
+++ b/packages/core/src/components/data-table/cell-renderers.tsx
@@ -1,6 +1,8 @@
 import type { ReactNode } from "react";
 import { Link } from "react-router";
 import { BadgeList, toValueArray } from "@/components/badge-list";
+import type { SelectOption } from "@/types/collection";
+import { currencyFractionDigits, optionLabel, toLocalDate } from "./cell-edit";
 import type {
   BadgeCellOptions,
   Column,
@@ -51,16 +53,6 @@ function isEmpty(value: unknown): boolean {
   return value == null || value === "";
 }
 
-function toDate(value: unknown): Date | null {
-  if (value == null) return null;
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
-  if (typeof value === "string" || typeof value === "number") {
-    const d = new Date(value);
-    return Number.isNaN(d.getTime()) ? null : d;
-  }
-  return null;
-}
-
 function renderText(value: unknown): ReactNode {
   switch (true) {
     case isEmpty(value):
@@ -76,66 +68,134 @@ function renderText(value: unknown): ReactNode {
   }
 }
 
-function renderNumber(value: unknown, options: NumberCellOptions | undefined): ReactNode {
-  if (isEmpty(value)) return PLACEHOLDER;
-  const num = Number(value);
-  if (Number.isNaN(num)) return PLACEHOLDER;
+// `editMaxDecimals` is the column's `edit.maxDecimals`: an editable column
+// displays as many decimals as its editor accepts, so a typed 2.5 never reads
+// back as "3". The cap never drops below `minDecimals`, which Intl rejects
+// with a RangeError.
+function formatNumber(
+  num: number,
+  options: NumberCellOptions | undefined,
+  editMaxDecimals: number | undefined,
+): string {
   const min = options?.minDecimals ?? 0;
-  const formatted = new Intl.NumberFormat(options?.locale, {
+  return new Intl.NumberFormat(options?.locale, {
     minimumFractionDigits: min,
-    maximumFractionDigits: options?.maxDecimals ?? min,
+    maximumFractionDigits: Math.max(min, options?.maxDecimals ?? min, editMaxDecimals ?? 0),
   }).format(num);
-  return <span className="astw:tabular-nums">{formatted}</span>;
 }
 
-function renderMoney<TRow extends Record<string, unknown>>(
+function renderNumber(
   value: unknown,
-  row: TRow,
-  options: MoneyCellOptions<TRow> | undefined,
+  options: NumberCellOptions | undefined,
+  editMaxDecimals: number | undefined,
 ): ReactNode {
   if (isEmpty(value)) return PLACEHOLDER;
   const num = Number(value);
   if (Number.isNaN(num)) return PLACEHOLDER;
-  const currency =
-    (typeof options?.currency === "function" ? options.currency(row) : options?.currency) || "USD";
+  return <span className="astw:tabular-nums">{formatNumber(num, options, editMaxDecimals)}</span>;
+}
+
+/**
+ * The ISO 4217 code a `money` column uses for a row. Default: `"USD"`.
+ *
+ * @internal
+ */
+export function resolveMoneyCurrency<TRow extends Record<string, unknown>>(
+  options: MoneyCellOptions<TRow> | undefined,
+  row: TRow,
+): string {
+  return (
+    (typeof options?.currency === "function" ? options.currency(row) : options?.currency) || "USD"
+  );
+}
+
+function formatMoney<TRow extends Record<string, unknown>>(
+  num: number,
+  row: TRow,
+  options: MoneyCellOptions<TRow> | undefined,
+  editMaxDecimals: number | undefined,
+): string {
+  const currency = resolveMoneyCurrency(options, row);
 
   // `maxDecimals` raises the cap above the currency default while keeping the
   // minimum at the currency default (e.g. 2 for USD). Lets a JPY column stay
-  // at 0 decimals while a USD price-detail column shows up to 4.
+  // at 0 decimals while a USD price-detail column shows up to 4. An editable
+  // column's `edit.maxDecimals` raises it the same way, but never lowers it.
   const formatOptions: Intl.NumberFormatOptions = {
     style: "currency",
     currency,
   };
-  if (options?.maxDecimals != null) {
-    formatOptions.maximumFractionDigits = options.maxDecimals;
+  const editCap = editMaxDecimals ?? 0;
+  if (options?.maxDecimals != null || editCap > currencyFractionDigits(currency)) {
+    formatOptions.maximumFractionDigits = Math.max(options?.maxDecimals ?? 0, editCap);
   }
-  let formatted: string;
   try {
-    formatted = new Intl.NumberFormat(options?.locale, formatOptions).format(num);
+    return new Intl.NumberFormat(options?.locale, formatOptions).format(num);
   } catch {
     // Fall back to USD if the currency code is invalid — Intl throws on bad ISO codes.
-    formatted = new Intl.NumberFormat(options?.locale, {
+    return new Intl.NumberFormat(options?.locale, {
       style: "currency",
       currency: "USD",
     }).format(num);
   }
-  return <span className="astw:tabular-nums">{formatted}</span>;
+}
+
+function renderMoney<TRow extends Record<string, unknown>>(
+  value: unknown,
+  row: TRow,
+  options: MoneyCellOptions<TRow> | undefined,
+  editMaxDecimals: number | undefined,
+): ReactNode {
+  if (isEmpty(value)) return PLACEHOLDER;
+  const num = Number(value);
+  if (Number.isNaN(num)) return PLACEHOLDER;
+  return (
+    <span className="astw:tabular-nums">{formatMoney(num, row, options, editMaxDecimals)}</span>
+  );
+}
+
+/**
+ * Formats a bare number the way a `number` / `money` column displays it. Used
+ * for the bounds in inline-editing messages ("Must be $1,000.00 or less").
+ *
+ * @internal
+ */
+export function formatColumnNumber<TRow extends Record<string, unknown>>(
+  row: TRow,
+  col: Column<TRow>,
+  value: number,
+): string {
+  if (col.type === "money") return formatMoney(value, row, col.typeOptions, col.edit?.maxDecimals);
+  if (col.type === "number") return formatNumber(value, col.typeOptions, col.edit?.maxDecimals);
+  return String(value);
 }
 
 function renderDate(value: unknown, options: DateCellOptions | undefined): ReactNode {
   if (isEmpty(value)) return PLACEHOLDER;
-  const date = toDate(value);
+  const date = toLocalDate(value);
   if (!date) return PLACEHOLDER;
   const format = options?.dateFormat ?? "short";
   const formatOptions = resolveDateFormatOptions(format);
   return new Intl.DateTimeFormat(options?.locale, formatOptions).format(date);
 }
 
-function renderBadge(value: unknown, options: BadgeCellOptions | undefined): ReactNode {
+function renderBadge(
+  value: unknown,
+  options: BadgeCellOptions | undefined,
+  choices: readonly SelectOption[] | undefined,
+): ReactNode {
   const items = toValueArray(value);
   const nonEmpty = items.filter((v) => v != null && v !== "");
   if (nonEmpty.length === 0) return PLACEHOLDER;
-  return <BadgeList value={value} options={options} maxVisible={options?.maxVisible} />;
+  return (
+    <BadgeList
+      value={value}
+      options={options}
+      maxVisible={options?.maxVisible}
+      // An editable column's choices label its badges, like its dropdown does.
+      resolveLabel={choices ? (v) => String(optionLabel(choices, v)) : undefined}
+    />
+  );
 }
 
 function renderLink<TRow extends Record<string, unknown>>(
@@ -164,19 +224,39 @@ export function renderTypedCell<TRow extends Record<string, unknown>>(
   row: TRow,
   col: Column<TRow>,
 ): ReactNode {
-  const value = getCellValue(row, col);
+  return renderTypedValue(row, col, getCellValue(row, col));
+}
+
+/**
+ * Render `value` with the column's built-in `type` renderer. Editable cells use
+ * it to show a save that is still in flight before the new value reaches
+ * `data`, and pass `linkAsText` because a `link` cell that can be edited is an
+ * input, not a link.
+ *
+ * @internal
+ */
+export function renderTypedValue<TRow extends Record<string, unknown>>(
+  row: TRow,
+  col: Column<TRow>,
+  value: unknown,
+  options?: { linkAsText?: boolean },
+): ReactNode {
   switch (col.type) {
     case "number":
-      return renderNumber(value, col.typeOptions);
+      return renderNumber(value, col.typeOptions, col.edit?.maxDecimals);
     case "money":
-      return renderMoney(value, row, col.typeOptions);
+      return renderMoney(value, row, col.typeOptions, col.edit?.maxDecimals);
     case "date":
       return renderDate(value, col.typeOptions);
     case "badge":
-      return renderBadge(value, col.typeOptions);
-    case "link":
-      return renderLink(value, row, col.typeOptions);
+      return renderBadge(value, col.typeOptions, col.edit?.options);
+    case "link": {
+      // A column with dropdown choices stores an option's value and shows its label.
+      const label = optionLabel(col.edit?.options, value);
+      return options?.linkAsText ? renderText(label) : renderLink(label, row, col.typeOptions);
+    }
     case "text":
+      return renderText(optionLabel(col.edit?.options, value));
     default:
       return renderText(value);
   }
diff --git a/packages/core/src/components/data-table/data-table-editing.test.tsx b/packages/core/src/components/data-table/data-table-editing.test.tsx
new file mode 100644
index 00000000..097ca90d
--- /dev/null
+++ b/packages/core/src/components/data-table/data-table-editing.test.tsx
@@ -0,0 +1,1051 @@
+import { afterEach, describe, expect, expectTypeOf, it, vi } from "vitest";
+import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router";
+import { StrictMode, useState } from "react";
+import { createAppShellWrapper } from "../../../tests/test-utils";
+import { DataTable } from "./data-table";
+import { useDataTable } from "./use-data-table";
+import { createColumnHelper } from "./field-helpers";
+import type { CellEditState, Column, UseDataTableOptions } from "./types";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+type Line = {
+  id: string;
+  sku: string;
+  status?: string;
+  expected?: string | null;
+  ordered: number;
+  received: number | null;
+  price: number;
+  currency: string;
+  note: string | null;
+  supplier: string;
+};
+
+const LINES: Line[] = [
+  {
+    id: "1",
+    sku: "TS-M",
+    ordered: 24,
+    received: 12,
+    price: 9.5,
+    currency: "USD",
+    note: "Box 1",
+    supplier: "Acme",
+  },
+  {
+    id: "2",
+    sku: "TS-L",
+    ordered: 24,
+    received: null,
+    price: 1200,
+    currency: "JPY",
+    note: null,
+    supplier: "Globex",
+  },
+  {
+    id: "3",
+    sku: "TS-XL",
+    ordered: 12,
+    received: 10,
+    price: 4,
+    currency: "USD",
+    note: "",
+    supplier: "Acme",
+  },
+];
+
+const noop = () => {};
+
+type Update = (id: string, patch: Partial<Line>) => void;
+
+function Harness({
+  columns,
+  rows: initialRows = LINES,
+  options,
+}: {
+  columns: (update: Update) => Column<Line>[];
+  rows?: Line[];
+  options?: Partial<UseDataTableOptions<Line>>;
+}) {
+  const [rows, setRows] = useState(initialRows);
+  const update: Update = (id, patch) =>
+    setRows((prev) => prev.map((row) => (row.id === id ? { ...row, ...patch } : row)));
+  const table = useDataTable<Line>({ columns: columns(update), data: { rows }, ...options });
+  return (
+    <DataTable.Root value={table}>
+      <DataTable.Table />
+    </DataTable.Root>
+  );
+}
+
+function renderTable(ui: React.ReactElement, locale = "en") {
+  const user = userEvent.setup();
+  render(<MemoryRouter>{ui}</MemoryRouter>, { wrapper: createAppShellWrapper(locale) });
+  return user;
+}
+
+const { column } = createColumnHelper<Line>();
+
+const skuColumn = column({ id: "sku", label: "SKU", type: "text" });
+
+// "Received": whole numbers, not below 0, not above what was ordered.
+function receivedColumn(
+  onCommit: (id: string, value: number | null) => void,
+  update: Update,
+  edit: Partial<{
+    canEdit: (row: Line, state: CellEditState) => boolean;
+    min: number;
+    max: number;
+    maxDecimals: number;
+  }> = {},
+): Column<Line> {
+  return column({
+    id: "received",
+    label: "Received",
+    type: "number",
+    edit: {
+      min: 0,
+      maxDecimals: 0,
+      validate: (value, row) =>
+        value !== null && value > row.ordered ? `Can't exceed ordered (${row.ordered})` : undefined,
+      onCommit: (row, value) => {
+        onCommit(row.id, value);
+        update(row.id, { received: value });
+      },
+      ...edit,
+    },
+  });
+}
+
+const blocked = (cell: Element | null | undefined) =>
+  cell?.className.includes("astw:cursor-not-allowed") ?? false;
+
+// Whether a cell's content leaves the right edge free for a dropdown / date icon.
+const hasIconSpace = (cell: Element | undefined) =>
+  cell?.querySelector(":scope > span")?.className.includes("astw:pr-5") ?? false;
+
+const errorText = (input: HTMLElement) =>
+  document.getElementById(input.getAttribute("aria-describedby") ?? "")?.textContent;
+
+// Focuses a cell and replaces its value. (A real click selects the whole value;
+// user-event collapses that selection, so clear explicitly.)
+async function retype(user: ReturnType<typeof userEvent.setup>, input: HTMLElement, text: string) {
+  await user.click(input);
+  await user.clear(input);
+  if (text) await user.keyboard(text);
+}
+
+describe("DataTable inline editing", () => {
+  describe("rendering", () => {
+    it("renders an editor only where canEdit allows it, named by the column label", () => {
+      renderTable(
+        <Harness
+          columns={(update) => [
+            skuColumn,
+            receivedColumn(vi.fn(), update, { canEdit: (row) => row.id !== "2" }),
+          ]}
+        />,
+      );
+      const inputs = screen.getAllByRole("textbox", { name: "Received" });
+      expect(inputs).toHaveLength(2);
+      expect(inputs.map((input) => (input as HTMLInputElement).value)).toEqual(["12", "10"]);
+      // Read-only columns don't get an editor at all.
+      expect(screen.queryByRole("textbox", { name: "SKU" })).toBeNull();
+    });
+
+    it("keeps an editable link cell as text and a read-only one as a link", () => {
+      renderTable(
+        <Harness
+          columns={() => [
+            column({
+              id: "supplier",
+              label: "Supplier",
+              type: "link",
+              typeOptions: { href: (row) => `/suppliers/${row.supplier}` },
+              edit: { canEdit: (row) => row.id === "1", onCommit: () => {} },
+            }),
+          ]}
+        />,
+      );
+      expect(screen.getAllByRole("textbox", { name: "Supplier" })).toHaveLength(1);
+      expect(screen.getAllByRole("link").map((link) => link.textContent)).toEqual([
+        "Globex",
+        "Acme",
+      ]);
+    });
+
+    it("keeps rows without an id read-only and warns once", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      renderTable(
+        <Harness
+          rows={LINES.map(({ id: _id, ...rest }) => rest as unknown as Line)}
+          columns={(update) => [receivedColumn(vi.fn(), update)]}
+        />,
+      );
+      expect(screen.queryAllByRole("textbox")).toHaveLength(0);
+      expect(warn).toHaveBeenCalledTimes(1);
+      expect(warn.mock.calls[0][0]).toContain("has no `id`");
+    });
+
+    it("shows as many decimals as the editor accepts", async () => {
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(vi.fn(), update, { maxDecimals: 2 })]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "2.5{Enter}");
+      // A `number` column with no typeOptions rounds to whole numbers; the
+      // editor's `maxDecimals` raises that so 2.5 doesn't read back as "3".
+      expect(input.parentElement?.textContent).toContain("2.5");
+    });
+  });
+
+  describe("keyboard", () => {
+    it("commits once on Enter and moves down to the next editable row", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <StrictMode>
+          <Harness
+            columns={(update) => [
+              receivedColumn(onCommit, update, { canEdit: (row) => row.id !== "2" }),
+            ]}
+          />
+        </StrictMode>,
+      );
+      const [first, third] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, first, "20{Enter}");
+      expect(onCommit).toHaveBeenCalledTimes(1);
+      expect(onCommit).toHaveBeenCalledWith("1", 20);
+      // Row 2 isn't editable, so Enter skips to row 3.
+      expect(document.activeElement).toBe(third);
+      expect((first as HTMLInputElement).value).toBe("20");
+    });
+
+    it("moves up on Shift+Enter", async () => {
+      const user = renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
+      const inputs = screen.getAllByRole("textbox", { name: "Received" });
+      await user.click(inputs[2]);
+      await user.keyboard("{Shift>}{Enter}{/Shift}");
+      expect(document.activeElement).toBe(inputs[1]);
+    });
+
+    it("moves to the next editable cell on Tab, skipping read-only columns", async () => {
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            receivedColumn(vi.fn(), update),
+            skuColumn,
+            column({
+              id: "note",
+              label: "Note",
+              type: "text",
+              edit: { onCommit: (row, value) => update(row.id, { note: value }) },
+            }),
+          ]}
+        />,
+      );
+      const received = screen.getAllByRole("textbox", { name: "Received" });
+      const notes = screen.getAllByRole("textbox", { name: "Note" });
+      await user.click(received[0]);
+      await user.tab();
+      expect(document.activeElement).toBe(notes[0]);
+      await user.tab();
+      expect(document.activeElement).toBe(received[1]);
+      await user.tab({ shift: true });
+      expect(document.activeElement).toBe(notes[0]);
+    });
+
+    it("reverts the draft on Escape without committing", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onCommit, update)]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "7{Escape}");
+      expect((input as HTMLInputElement).value).toBe("12");
+      await user.tab();
+      expect(onCommit).not.toHaveBeenCalled();
+    });
+
+    it("selects the whole value when a cell receives focus", () => {
+      renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
+      const [input] = screen.getAllByRole("textbox", { name: "Received" }) as HTMLInputElement[];
+      act(() => input.focus());
+      expect([input.selectionStart, input.selectionEnd]).toEqual([0, input.value.length]);
+    });
+
+    it("ignores Enter while an IME is composing and normalizes full-width digits", async () => {
+      const onCommit = vi.fn();
+      renderTable(<Harness columns={(update) => [receivedColumn(onCommit, update)]} />);
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      act(() => input.focus());
+      fireEvent.compositionStart(input);
+      fireEvent.change(input, { target: { value: "１５" } });
+      fireEvent.keyDown(input, { key: "Enter", isComposing: true });
+      expect(onCommit).not.toHaveBeenCalled();
+      fireEvent.compositionEnd(input);
+      fireEvent.keyDown(input, { key: "Enter" });
+      expect(onCommit).toHaveBeenCalledWith("1", 15);
+    });
+  });
+
+  describe("rules", () => {
+    it("blocks characters that can never be valid", async () => {
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            receivedColumn(vi.fn(), update),
+            column({
+              id: "price",
+              label: "Price",
+              type: "money",
+              typeOptions: { currency: (row) => row.currency },
+              edit: { onCommit: (row, value) => update(row.id, { price: value ?? 0 }) },
+            }),
+          ]}
+        />,
+      );
+      const [received] = screen.getAllByRole("textbox", { name: "Received" });
+      // min: 0 blocks "-", maxDecimals: 0 blocks "."
+      await retype(user, received, "-3.5");
+      expect((received as HTMLInputElement).value).toBe("35");
+
+      const [usd, jpy] = screen.getAllByRole("textbox", { name: "Price" });
+      await retype(user, usd, "9.999");
+      // USD allows two decimals; the third digit is dropped.
+      expect((usd as HTMLInputElement).value).toBe("9.99");
+      await retype(user, jpy, "12.5");
+      // JPY has no minor unit, so the decimal point can't be typed.
+      expect((jpy as HTMLInputElement).value).toBe("125");
+    });
+
+    it("judges text inserted in one go (autofill, dictation) instead of dropping it", () => {
+      renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
+      const [input] = screen.getAllByRole("textbox", { name: "Received" }) as HTMLInputElement[];
+      act(() => input.focus());
+      fireEvent.input(input, {
+        target: { value: "3.5" },
+        data: "3.5",
+        inputType: "insertText",
+      });
+      expect(input.value).toBe("3.5");
+      expect(errorText(input)).toBe("Enter a whole number. Press Esc to undo");
+    });
+
+    it("shows an over-the-limit error while typing and blocks Enter", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onCommit, update, { max: 24 })]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "30");
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+      expect(errorText(input)).toBe("Must be 24 or less. Press Esc to undo");
+      await user.keyboard("{Enter}");
+      expect(onCommit).not.toHaveBeenCalled();
+      expect(document.activeElement).toBe(input);
+    });
+
+    it("waits for a save attempt before reporting min and required", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) =>
+            [
+              column({
+                id: "received",
+                label: "Received",
+                type: "number",
+                edit: {
+                  min: 10,
+                  required: true,
+                  onCommit: (row, value) => {
+                    onCommit(row.id, value);
+                    update(row.id, { received: value });
+                  },
+                },
+              }),
+            ] satisfies Column<Line>[]
+          }
+        />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "5");
+      expect(input.getAttribute("aria-invalid")).toBeNull();
+      await user.keyboard("{Enter}");
+      expect(errorText(input)).toBe("Must be 10 or more. Press Esc to undo");
+      await user.keyboard("{Backspace}");
+      expect(errorText(input)).toBe("Required. Press Esc to undo");
+      await user.keyboard("15{Enter}");
+      expect(onCommit).toHaveBeenCalledWith("1", 15);
+    });
+
+    it("shows the consumer's own validation message", async () => {
+      const user = renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "25");
+      expect(errorText(input)).toBe("Can't exceed ordered (24). Press Esc to undo");
+    });
+
+    it("reverts an invalid value when the cell loses focus", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onCommit, update)]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "99");
+      await user.click(document.body);
+      expect(onCommit).not.toHaveBeenCalled();
+      expect((input as HTMLInputElement).value).toBe("12");
+      expect(input.getAttribute("aria-invalid")).toBeNull();
+    });
+
+    it("localizes messages", async () => {
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(vi.fn(), update, { max: 24 })]} />,
+        "ja",
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "30");
+      expect(errorText(input)).toBe("24以下で入力してください. Escキーで元に戻せます");
+    });
+  });
+
+  describe("committing", () => {
+    it("saves a changed value when the cell loses focus", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onCommit, update)]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "18");
+      await user.click(document.body);
+      expect(onCommit).toHaveBeenCalledWith("1", 18);
+    });
+
+    it("treats a value that reads the same as unchanged", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onCommit, update, { maxDecimals: 2 })]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "12.00{Enter}");
+      await user.click(input);
+      await user.keyboard("{Enter}");
+      expect(onCommit).not.toHaveBeenCalled();
+    });
+
+    it("cleans up pasted numbers and reports text it can't read", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            column({
+              id: "received",
+              label: "Received",
+              type: "number",
+              edit: {
+                maxDecimals: 1,
+                onCommit: (row, value) => {
+                  onCommit(row.id, value);
+                  update(row.id, { received: value });
+                },
+              },
+            }),
+          ]}
+        />,
+      );
+      const [first, second] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, first, "");
+      await user.paste("1,234.5");
+      await user.keyboard("{Enter}");
+      expect(onCommit).toHaveBeenCalledWith("1", 1234.5);
+
+      await retype(user, second, "");
+      await user.paste("abc");
+      await user.keyboard("{Enter}");
+      expect(errorText(second)).toBe("Enter a number. Press Esc to undo");
+      expect(onCommit).toHaveBeenCalledTimes(1);
+    });
+
+    it("commits text as typed and an emptied cell as null", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            column({
+              id: "note",
+              label: "Note",
+              type: "text",
+              edit: {
+                onCommit: (row, value) => {
+                  onCommit(row.id, value);
+                  update(row.id, { note: value });
+                },
+              },
+            }),
+          ]}
+        />,
+      );
+      const [first] = screen.getAllByRole("textbox", { name: "Note" });
+      await retype(user, first, "Box 2{Enter}");
+      await retype(user, first, "{Enter}");
+      expect(onCommit.mock.calls).toEqual([
+        ["1", "Box 2"],
+        ["1", null],
+      ]);
+    });
+
+    it("keeps showing a pending save, and reverts when it fails", async () => {
+      let reject = noop;
+      let resolve = noop;
+      const onCommit = vi
+        .fn()
+        .mockImplementationOnce(() => new Promise<void>((_, r) => (reject = () => r(new Error()))))
+        .mockImplementationOnce(() => new Promise<void>((r) => (resolve = r)));
+      const user = renderTable(
+        <Harness
+          columns={() => [
+            column({ id: "received", label: "Received", type: "number", edit: { onCommit } }),
+          ]}
+        />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "20{Enter}");
+      expect((input as HTMLInputElement).value).toBe("20");
+      await act(async () => reject());
+      expect((input as HTMLInputElement).value).toBe("12");
+
+      await retype(user, input, "21{Enter}");
+      await act(async () => resolve());
+      // Saved, but `data` never changed: the saved value stays on screen.
+      expect((input as HTMLInputElement).value).toBe("21");
+    });
+  });
+
+  describe("interplay", () => {
+    it("lets canEdit follow row selection", async () => {
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            receivedColumn(vi.fn(), update, { canEdit: (_, { selected }) => selected }),
+          ]}
+          options={{ onSelectionChange: () => {} }}
+        />,
+      );
+      expect(screen.queryAllByRole("textbox")).toHaveLength(0);
+      const [selectFirst] = screen.getAllByRole("checkbox", { name: "Select row" });
+      await user.click(selectFirst);
+      expect(screen.getAllByRole("textbox", { name: "Received" })).toHaveLength(1);
+      await user.click(selectFirst);
+      expect(screen.queryAllByRole("textbox")).toHaveLength(0);
+    });
+
+    it("shows a not-allowed cursor on read-only cells of a table people edit", () => {
+      renderTable(
+        <Harness
+          columns={(update) => [
+            skuColumn,
+            receivedColumn(vi.fn(), update, { canEdit: (row) => row.id !== "2" }),
+          ]}
+        />,
+      );
+      const skuCell = screen.getByText("TS-M").closest("td");
+      const [editable] = screen.getAllByRole("textbox", { name: "Received" });
+      const lockedRow = screen.getByText("TS-L").closest("tr");
+      expect(blocked(skuCell)).toBe(true);
+      expect(blocked(editable.closest("td"))).toBe(false);
+      // Row 2's Received cell is locked by canEdit.
+      expect(blocked(lockedRow?.querySelectorAll("td")[1])).toBe(true);
+    });
+
+    it("keeps the default cursor when no column is editable, or rows are clickable", () => {
+      renderTable(<Harness columns={() => [skuColumn]} />);
+      expect(screen.getByText("TS-M").closest("td")?.className).not.toContain("cursor-not-allowed");
+      cleanup();
+      renderTable(
+        <Harness
+          columns={(update) => [skuColumn, receivedColumn(vi.fn(), update)]}
+          options={{ onClickRow: () => {} }}
+        />,
+      );
+      expect(screen.getByText("TS-M").closest("td")?.className).not.toContain("cursor-not-allowed");
+    });
+
+    it("never fires onClickRow from an editable cell", async () => {
+      const onClickRow = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) => [skuColumn, receivedColumn(vi.fn(), update)]}
+          options={{ onClickRow }}
+        />,
+      );
+      await user.click(screen.getAllByRole("textbox", { name: "Received" })[0]);
+      expect(onClickRow).not.toHaveBeenCalled();
+      await user.click(screen.getByText("TS-M"));
+      expect(onClickRow).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("dropdowns", () => {
+    const SUPPLIERS = [
+      { value: "acme", label: "Acme Corp" },
+      { value: "globex", label: "Globex" },
+    ];
+
+    function supplierColumn(
+      onCommit: (id: string, value: string | null) => void,
+      update: Update,
+      edit: { required?: boolean; validate?: (value: string | null) => string | undefined } = {},
+    ): Column<Line> {
+      return column({
+        id: "supplier",
+        label: "Supplier",
+        type: "text",
+        edit: {
+          options: SUPPLIERS,
+          ...edit,
+          onCommit: (row, value) => {
+            onCommit(row.id, value);
+            update(row.id, { supplier: value ?? "" });
+          },
+        },
+      });
+    }
+
+    const rowsWith = (supplier: string) => LINES.map((line) => ({ ...line, supplier }));
+
+    it("shows choice labels and commits the picked value", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onCommit, update)]}
+        />,
+      );
+      const [trigger] = screen.getAllByRole("combobox", { name: "Supplier" });
+      expect(trigger.closest("td")?.textContent).toContain("Acme Corp");
+      await user.click(trigger);
+      await user.click(await screen.findByRole("option", { name: "Globex" }));
+      expect(onCommit).toHaveBeenCalledWith("1", "globex");
+      expect(trigger.closest("td")?.textContent).toContain("Globex");
+    });
+
+    it("offers None unless the column is required", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onCommit, update)]}
+        />,
+      );
+      await user.click(screen.getAllByRole("combobox", { name: "Supplier" })[0]);
+      await user.click(await screen.findByRole("option", { name: "None" }));
+      expect(onCommit).toHaveBeenCalledWith("1", null);
+
+      cleanup();
+      const user2 = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onCommit, update, { required: true })]}
+        />,
+      );
+      await user2.click(screen.getAllByRole("combobox", { name: "Supplier" })[0]);
+      await screen.findByRole("option", { name: "Globex" });
+      expect(screen.queryByRole("option", { name: "None" })).toBeNull();
+    });
+
+    it("lets validate reject a pick", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [
+            supplierColumn(onCommit, update, {
+              validate: (value) => (value === "globex" ? "Globex is on hold" : undefined),
+            }),
+          ]}
+        />,
+      );
+      const [trigger] = screen.getAllByRole("combobox", { name: "Supplier" });
+      await user.click(trigger);
+      await user.click(await screen.findByRole("option", { name: "Globex" }));
+      expect(onCommit).not.toHaveBeenCalled();
+      expect(trigger.getAttribute("aria-invalid")).toBe("true");
+      expect(errorText(trigger)).toBe("Globex is on hold");
+    });
+
+    it("shows a read-only link cell's choice label as the link", () => {
+      renderTable(
+        <Harness
+          rows={rowsWith("globex")}
+          columns={() => [
+            column({
+              id: "supplier",
+              label: "Supplier",
+              type: "link",
+              typeOptions: { href: (row) => `/suppliers/${row.supplier}` },
+              edit: { options: SUPPLIERS, canEdit: (row) => row.id === "1", onCommit: () => {} },
+            }),
+          ]}
+        />,
+      );
+      expect(screen.getAllByRole("combobox", { name: "Supplier" })).toHaveLength(1);
+      expect(screen.getAllByRole("link").map((link) => link.textContent)).toEqual([
+        "Globex",
+        "Globex",
+      ]);
+    });
+
+    it("keeps the icon's space on read-only rows too, so the column's width never shifts", () => {
+      renderTable(
+        <Harness
+          rows={rowsWith("globex")}
+          columns={() => [
+            skuColumn,
+            column({
+              id: "supplier",
+              label: "Supplier",
+              type: "text",
+              edit: { options: SUPPLIERS, canEdit: (row) => row.id === "1", onCommit: noop },
+            }),
+          ]}
+        />,
+      );
+      const rows = screen.getAllByRole("row").slice(1);
+      // Row 1 is editable and rows 2 and 3 are read-only: all three keep the space.
+      expect(rows.map((row) => hasIconSpace(row.querySelectorAll("td")[1]))).toEqual([
+        true,
+        true,
+        true,
+      ]);
+      // A column without a dropdown or calendar doesn't.
+      expect(hasIconSpace(rows[1].querySelectorAll("td")[0])).toBe(false);
+    });
+
+    it("offers a badge column's labelled values as badges", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={LINES.map((line) => ({ ...line, status: "pending" }))}
+          columns={(update) => [
+            column({
+              id: "status",
+              label: "Status",
+              type: "badge",
+              typeOptions: {
+                badgeLabelMap: { pending: "Pending", received: "Received" },
+                badgeVariantMap: { pending: "outline-neutral", received: "success" },
+              },
+              edit: {
+                required: true,
+                onCommit: (row, value) => {
+                  onCommit(row.id, value);
+                  update(row.id, { status: value ?? undefined });
+                },
+              },
+            }),
+          ]}
+        />,
+      );
+      const [trigger] = screen.getAllByRole("combobox", { name: "Status" });
+      await user.click(trigger);
+      const received = await screen.findByRole("option", { name: "Received" });
+      expect(received.querySelector('[data-slot="badge"], .astw\\:inline-flex')).not.toBeNull();
+      await user.click(received);
+      expect(onCommit).toHaveBeenCalledWith("1", "received");
+      expect(trigger.closest("td")?.textContent).toContain("Received");
+    });
+
+    it("keeps a badge cell with several values read-only", () => {
+      renderTable(
+        <Harness
+          rows={LINES.map((line, i) =>
+            i === 0 ? { ...line, status: ["pending", "partial"] as unknown as string } : line,
+          )}
+          columns={() => [
+            column({
+              id: "status",
+              label: "Status",
+              type: "badge",
+              typeOptions: { badgeLabelMap: { pending: "Pending", partial: "Partial" } },
+              edit: { onCommit: () => {} },
+            }),
+          ]}
+        />,
+      );
+      // Rows 2 and 3 have no status, so only row 1's list cell is at stake.
+      expect(screen.queryAllByRole("combobox", { name: "Status" })).toHaveLength(2);
+    });
+
+    it("isn't editable when a badge column has no choices to offer", () => {
+      renderTable(
+        <Harness
+          rows={LINES.map((line) => ({ ...line, status: "pending" }))}
+          columns={() => [
+            column({ id: "status", label: "Status", type: "badge", edit: { onCommit: () => {} } }),
+          ]}
+        />,
+      );
+      expect(screen.queryAllByRole("combobox")).toHaveLength(0);
+    });
+
+    it("moves on with Tab from a closed dropdown", async () => {
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(vi.fn(), update), receivedColumn(vi.fn(), update)]}
+        />,
+      );
+      const [supplier] = screen.getAllByRole("combobox", { name: "Supplier" });
+      act(() => supplier.focus());
+      await user.tab();
+      expect(document.activeElement).toBe(screen.getAllByRole("textbox", { name: "Received" })[0]);
+    });
+  });
+
+  describe("dates", () => {
+    const dateRows = LINES.map((line) => ({ ...line, expected: "2026-10-02" }));
+
+    function expectedColumn(
+      onCommit: (id: string, value: string | null) => void,
+      update: Update,
+      edit: { required?: boolean; datetime?: boolean } = {},
+    ): Column<Line> {
+      return column({
+        id: "expected",
+        label: "Expected",
+        type: "date",
+        typeOptions: { dateFormat: edit.datetime ? "datetime" : "short" },
+        edit: {
+          required: edit.required,
+          onCommit: (row, value) => {
+            onCommit(row.id, value);
+            update(row.id, { expected: value });
+          },
+        },
+      });
+    }
+
+    const dayButton = (day: string) =>
+      within(document.querySelector<HTMLElement>('[data-slot="data-table-cell-calendar"]')!)
+        .getAllByRole("button")
+        .find((button) => button.textContent === day && !button.dataset.outsideMonth)!;
+
+    it("shows a date-only value as that day in any time zone", () => {
+      const tz = process.env.TZ;
+      process.env.TZ = "America/Los_Angeles";
+      try {
+        renderTable(
+          <Harness
+            rows={dateRows}
+            columns={() => [
+              column({
+                id: "expected",
+                label: "Expected",
+                type: "date",
+                typeOptions: { locale: "en-US" },
+              }),
+            ]}
+          />,
+        );
+        expect(screen.getAllByText("Oct 2, 2026")).toHaveLength(3);
+      } finally {
+        process.env.TZ = tz;
+      }
+    });
+
+    it("names the date trigger with its current value", () => {
+      renderTable(
+        <Harness
+          rows={dateRows}
+          columns={() => [
+            column({
+              id: "expected",
+              label: "Expected",
+              type: "date",
+              typeOptions: { locale: "en-US" },
+              edit: { onCommit: () => {} },
+            }),
+          ]}
+        />,
+      );
+      expect(screen.getAllByRole("button", { name: "Expected, Oct 2, 2026" })).toHaveLength(3);
+    });
+
+    it("commits a picked day as YYYY-MM-DD", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness rows={dateRows} columns={(update) => [expectedColumn(onCommit, update)]} />,
+      );
+      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
+      await user.click(dayButton("15"));
+      expect(onCommit).toHaveBeenCalledWith("1", "2026-10-15");
+    });
+
+    it("opens an empty bounded calendar on the nearest day that can be picked", async () => {
+      const user = renderTable(
+        <Harness
+          rows={LINES.map((line) => ({ ...line, expected: null }))}
+          columns={() => [
+            column({
+              id: "expected",
+              label: "Expected",
+              type: "date",
+              edit: { min: "2099-03-01", onCommit: () => {} },
+            }),
+          ]}
+        />,
+      );
+      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
+      expect(
+        document.querySelector('[data-slot="data-table-cell-calendar"]')?.textContent,
+      ).toContain("March 2099");
+    });
+
+    it("clears to null unless the column is required", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness rows={dateRows} columns={(update) => [expectedColumn(onCommit, update)]} />,
+      );
+      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
+      await user.click(screen.getByRole("button", { name: "Clear" }));
+      expect(onCommit).toHaveBeenCalledWith("1", null);
+
+      cleanup();
+      const user2 = renderTable(
+        <Harness
+          rows={dateRows}
+          columns={(update) => [expectedColumn(onCommit, update, { required: true })]}
+        />,
+      );
+      await user2.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
+      expect(screen.queryByRole("button", { name: "Clear" })).toBeNull();
+    });
+
+    it("commits a date-time as an ISO timestamp when Done is pressed", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={dateRows}
+          columns={(update) => [expectedColumn(onCommit, update, { datetime: true })]}
+        />,
+      );
+      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
+      await user.click(dayButton("20"));
+      fireEvent.change(screen.getByLabelText("Expected (Choose time)"), {
+        target: { value: "14:30" },
+      });
+      await user.click(screen.getByRole("button", { name: "Done" }));
+      expect(onCommit).toHaveBeenCalledWith("1", new Date(2026, 9, 20, 14, 30).toISOString());
+    });
+  });
+
+  it("drops an unticked row's editor from Enter navigation", async () => {
+    const user = renderTable(
+      <Harness
+        columns={(update) => [
+          receivedColumn(vi.fn(), update, { canEdit: (_, { selected }) => selected }),
+        ]}
+        options={{ onSelectionChange: () => {} }}
+      />,
+    );
+    const boxes = screen.getAllByRole("checkbox", { name: "Select row" });
+    for (const box of boxes) await user.click(box);
+    await user.click(boxes[1]);
+    const [first, third] = screen.getAllByRole("textbox", { name: "Received" });
+    act(() => first.focus());
+    await user.keyboard("{Enter}");
+    expect(document.activeElement).toBe(third);
+  });
+
+  it("types each column's edit config", () => {
+    column({
+      id: "received",
+      type: "number",
+      edit: {
+        canEdit: (row, state) => {
+          expectTypeOf(row).toEqualTypeOf<Line>();
+          expectTypeOf(state).toEqualTypeOf<CellEditState>();
+          return true;
+        },
+        onCommit: (_row, value) => {
+          expectTypeOf(value).toEqualTypeOf<number | null>();
+        },
+      },
+    });
+    column({
+      id: "received",
+      type: "money",
+      edit: {
+        // `required` is enforced at runtime; the callbacks keep one signature.
+        required: true,
+        validate: (value, row) => {
+          expectTypeOf(value).toEqualTypeOf<number | null>();
+          expectTypeOf(row).toEqualTypeOf<Line>();
+          return undefined;
+        },
+        onCommit: (_row, value) => {
+          expectTypeOf(value).toEqualTypeOf<number | null>();
+        },
+      },
+    });
+    column({
+      id: "note",
+      type: "text",
+      edit: {
+        onCommit: (_row, value) => {
+          expectTypeOf(value).toEqualTypeOf<string | null>();
+        },
+      },
+    });
+    column({
+      id: "supplier",
+      type: "link",
+      typeOptions: { href: () => "/" },
+      edit: { onCommit: async () => {} },
+    });
+    // @ts-expect-error — `min` is a number / money rule
+    column({ id: "note", type: "text", edit: { min: 0, onCommit: () => {} } });
+    column({
+      id: "expected",
+      type: "date",
+      edit: {
+        min: "2026-01-01",
+        onCommit: (_row, value) => {
+          expectTypeOf(value).toEqualTypeOf<string | null>();
+        },
+      },
+    });
+    column({
+      id: "status",
+      type: "badge",
+      edit: {
+        options: [{ value: "open", label: "Open" }],
+        onCommit: (_row, value) => {
+          expectTypeOf(value).toEqualTypeOf<string | null>();
+        },
+      },
+    });
+    column({
+      id: "supplier",
+      type: "text",
+      edit: { options: [{ value: "acme", label: "Acme" }], onCommit: () => {} },
+    });
+    // @ts-expect-error — dropdown choices aren't a number / money option
+    column({ id: "received", type: "number", edit: { options: [], onCommit: () => {} } });
+    // @ts-expect-error — columns without a `type` have no built-in editor
+    column({ id: "sku", render: () => null, edit: { onCommit: () => {} } });
+    column({
+      id: "received",
+      type: "number",
+      // @ts-expect-error — the committed value can be null (an emptied cell)
+      edit: { onCommit: (_row, _value: number) => {} },
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/data-table.tsx b/packages/core/src/components/data-table/data-table.tsx
index 97271cde..d9a91fd6 100644
--- a/packages/core/src/components/data-table/data-table.tsx
+++ b/packages/core/src/components/data-table/data-table.tsx
@@ -36,6 +36,13 @@ import { useDataTableT } from "./i18n";
 import { getCellValue, renderTypedCell } from "./cell-renderers";
 import { isTemporalFilterType, normalizeTemporalFilterValue } from "./filter-value-utils";
 import { useCellContextMenu, type CellContextMenuState } from "./use-cell-context-menu";
+import { useCellEditNavigation } from "./use-cell-edit-navigation";
+import {
+  DataTableEditableCell,
+  hasPickerEditor,
+  ICON_SPACE_CLASS_NAME,
+  isEditableColumn,
+} from "./editable-cell";
 import {
   DataTableToolbar,
   DataTableFilters,
@@ -1226,16 +1233,28 @@ function DataTableRows<TRow extends Record<string, unknown>>({
     handleContextMenuCloseComplete: handleCellContextMenuCloseComplete,
     getCellContextMenuHandlers,
   } = useCellContextMenu();
+  const navigation = useCellEditNavigation();
+  // Namespaced so an id-less row's index fallback can't collide with a real
+  // id of the same digits — React reconciles duplicate keys by position,
+  // pairing a detail panel with the wrong row.
+  const rowKeys = rows.map((row, rowIndex) => {
+    const rowId = (row as Record<string, unknown>)["id"];
+    return rowId != null ? `id:${String(rowId)}` : `idx:${rowIndex}`;
+  });
+  // Enter / Tab move between editable cells in the order they render.
+  navigation.setOrder(rowKeys, ordered?.map((col) => keys.get(col) as string) ?? []);
+  // In a table people edit, every data cell says what a click does: editors
+  // show a text or pointer cursor, and the rest show "not allowed". Skipped when
+  // rows are clickable, where the row click is what the cursor should promise.
+  const blockReadOnlyCells = !onClickRow && (ordered?.some(isEditableColumn) ?? false);
+  const warnedMissingIdRef = useRef(false);
 
   return (
     <>
       {rows.map((row, rowIndex) => {
         const rowId = (row as Record<string, unknown>)["id"];
         const selected = isRowSelected?.(row) ?? false;
-        // Namespaced so an id-less row's index fallback can't collide with a real
-        // id of the same digits — React reconciles duplicate keys by position,
-        // pairing a detail panel with the wrong row.
-        const rowKey = rowId != null ? `id:${String(rowId)}` : `idx:${rowIndex}`;
+        const rowKey = rowKeys[rowIndex];
         // Expansion is keyed by id, so a row without one gets no chevron at all
         // rather than a disabled one — it must never be un-toggleable (D5).
         const expandable = hasExpand && rowId != null && (rowExpansion?.canExpand?.(row) ?? true);
@@ -1312,7 +1331,23 @@ function DataTableRows<TRow extends Record<string, unknown>>({
               })()}
             {ordered?.map((col) => {
               const key = keys.get(col) as string;
-              const content = col.render ? col.render(row) : renderTypedCell(row, col);
+              const editableColumn = isEditableColumn(col);
+              if (editableColumn && rowId == null && !warnedMissingIdRef.current) {
+                warnedMissingIdRef.current = true;
+                console.warn(
+                  `[DataTable] Column "${key}" has an \`edit\` config, but a row has no \`id\`. Rows without an \`id\` are shown read-only.`,
+                );
+              }
+              const editable =
+                editableColumn &&
+                rowId != null &&
+                // A badge dropdown picks one value; a cell holding several stays
+                // read-only rather than have its list replaced by a single pick.
+                !(col.type === "badge" && Array.isArray(getCellValue(row, col))) &&
+                (col.edit?.canEdit?.(row, { selected }) ?? true);
+              // An editable cell renders its own display; skip rendering it twice.
+              let content: ReactNode;
+              if (!editable) content = col.render ? col.render(row) : renderTypedCell(row, col);
 
               const { style: cellStyle, className: cellClassName } = pinCellProps(
                 placements.get(col),
@@ -1330,11 +1365,23 @@ function DataTableRows<TRow extends Record<string, unknown>>({
                 "body",
               );
               // Truncate via an inner element so the cell's overflow stays visible.
-              const cellBody = col.truncate ? (
-                <span className="astw:block astw:truncate">{content}</span>
-              ) : (
-                content
-              );
+              // A read-only cell of a dropdown / date column keeps the icon's
+              // space like its editable neighbours.
+              const iconSpace = editableColumn && hasPickerEditor(col);
+              const cellBody =
+                col.truncate || iconSpace ? (
+                  <span
+                    className={cn(
+                      "astw:block",
+                      col.truncate && "astw:truncate",
+                      iconSpace && ICON_SPACE_CLASS_NAME,
+                    )}
+                  >
+                    {content}
+                  </span>
+                ) : (
+                  content
+                );
               const menuValue = getCellContextValue(row, col, content);
               const headerLabel = col.label ?? key;
 
@@ -1361,9 +1408,28 @@ function DataTableRows<TRow extends Record<string, unknown>>({
               const cellProps = {
                 "data-slot": "data-table-cell" as const,
                 style: { ...cellStyle, WebkitTouchCallout: "none" } satisfies CSSProperties,
-                className: cellClassName,
+                className: cn(
+                  cellClassName,
+                  blockReadOnlyCells && !editable && "astw:cursor-not-allowed",
+                ),
                 ...cellContextMenuHandlers,
               };
+              if (editable) {
+                return (
+                  <DataTableEditableCell
+                    key={key}
+                    row={row}
+                    col={col}
+                    rowKey={rowKey}
+                    colKey={key}
+                    label={headerLabel}
+                    align={resolveAlign(col)}
+                    navigation={navigation}
+                    cellProps={cellProps}
+                  />
+                );
+              }
+
               const cellElement = <Table.Cell {...cellProps} />;
 
               if (tooltipLabel !== undefined) {
diff --git a/packages/core/src/components/data-table/editable-cell.tsx b/packages/core/src/components/data-table/editable-cell.tsx
new file mode 100644
index 00000000..3a01cf4e
--- /dev/null
+++ b/packages/core/src/components/data-table/editable-cell.tsx
@@ -0,0 +1,902 @@
+import {
+  useCallback,
+  useId,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ComponentProps,
+  type CompositionEvent,
+  type FocusEvent,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+  type TouchEvent,
+} from "react";
+import { Popover } from "@base-ui/react/popover";
+import { getLocalTimeZone, parseDate, today, type CalendarDate } from "@internationalized/date";
+import { CalendarDays } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { BadgeList } from "@/components/badge-list";
+import { Button } from "@/components/button";
+import { Calendar } from "@/components/calendar";
+import { Input } from "@/components/input";
+import { SelectParts } from "@/components/select";
+import { Table } from "@/components/table";
+import { Tooltip } from "@/components/tooltip";
+import type { Column } from "./types";
+import {
+  formatColumnNumber,
+  getCellValue,
+  renderTypedValue,
+  resolveMoneyCurrency,
+} from "./cell-renderers";
+import {
+  currencyFractionDigits,
+  evaluateNumberDraft,
+  evaluateTextDraft,
+  isAllowedNumberText,
+  isIsoDate,
+  isLiveError,
+  isPromiseLike,
+  normalizeNumberText,
+  optionLabel,
+  resolveBadgeOptions,
+  sameDate,
+  sameNumber,
+  toCalendarDate,
+  toIsoDateTime,
+  toNumberEditText,
+  toNumberValue,
+  toTextValue,
+  toTimeText,
+  type CellEditError,
+  type DraftEvaluation,
+  type NumberEditRules,
+} from "./cell-edit";
+import type { CellEditNavigation } from "./use-cell-edit-navigation";
+import { useDataTableT } from "./i18n";
+
+/**
+ * A column whose cells can be edited in place.
+ *
+ * @internal
+ */
+export type EditableColumn<TRow extends Record<string, unknown>> = Extract<
+  Column<TRow>,
+  { type: "text" | "number" | "money" | "date" | "badge" | "link" }
+>;
+
+type ChoiceColumn<TRow extends Record<string, unknown>> = Extract<
+  EditableColumn<TRow>,
+  { type: "text" | "link" | "badge" }
+>;
+
+type DateColumn<TRow extends Record<string, unknown>> = Extract<
+  EditableColumn<TRow>,
+  { type: "date" }
+>;
+
+// The dropdown choices a column offers, or `undefined` when it's typed into.
+function columnChoices<TRow extends Record<string, unknown>>(col: Column<TRow>) {
+  if (col.type === "badge")
+    return resolveBadgeOptions(col.edit?.options, col.typeOptions, col.filter);
+  if (col.type === "text" || col.type === "link") return col.edit?.options;
+  return undefined;
+}
+
+/**
+ * Whether the column carries an `edit` config it can use: any typed column
+ * except a `badge` one with no choices to offer.
+ *
+ * @internal
+ */
+export function isEditableColumn<TRow extends Record<string, unknown>>(
+  col: Column<TRow>,
+): col is EditableColumn<TRow> {
+  if (col.edit === undefined || col.type === undefined) return false;
+  return col.type !== "badge" || (columnChoices(col)?.length ?? 0) > 0;
+}
+
+/**
+ * Whether an editable column edits through a dropdown or calendar (the same
+ * split `DataTableEditableCell` makes), whose cells keep their right edge free
+ * for the icon.
+ *
+ * @internal
+ */
+export function hasPickerEditor<TRow extends Record<string, unknown>>(
+  col: EditableColumn<TRow>,
+): boolean {
+  return (
+    col.type === "date" ||
+    col.type === "badge" ||
+    ((col.type === "text" || col.type === "link") && Boolean(col.edit?.options))
+  );
+}
+
+/**
+ * Room for the dropdown / calendar icon (16px plus a gap), so a value ends — or
+ * truncates — before it instead of running underneath. Read-only cells of the
+ * same column keep it too, so the column's width doesn't change as rows become
+ * editable or not.
+ *
+ * @internal
+ */
+export const ICON_SPACE_CLASS_NAME = "astw:pr-5";
+
+// Editors cover the whole cell, end to end, instead of taking part in layout,
+// so a cell becoming editable — or being edited — never changes row height or
+// column width. They inherit the cell's padding (they're its direct children),
+// so their text lines up exactly with the cell's own display underneath.
+const OVERLAY_CLASS_NAME =
+  "astw:absolute astw:inset-0 astw:h-full astw:w-full astw:p-[inherit] astw:rounded-none astw:border-0 astw:shadow-none astw:bg-transparent astw:dark:bg-transparent";
+
+// Spreadsheet-style: nothing at rest, and the cell being edited outlines its
+// edges (an inset ring, so it never spills onto neighbouring cells).
+const CELL_FOCUS_CLASS_NAME = cn(
+  "astw:outline-none astw:focus:ring-2 astw:focus:ring-inset astw:focus:ring-primary",
+  "astw:focus-visible:ring-2 astw:focus-visible:ring-inset astw:focus-visible:ring-primary",
+  "astw:aria-invalid:ring-2 astw:aria-invalid:ring-inset astw:aria-invalid:ring-destructive astw:dark:aria-invalid:ring-destructive",
+);
+
+// Text and number cells: the whole cell shows a text cursor.
+const INPUT_CLASS_NAME = cn(
+  OVERLAY_CLASS_NAME,
+  CELL_FOCUS_CLASS_NAME,
+  "astw:text-sm astw:cursor-text",
+);
+
+// Dropdown and calendar cells: a transparent button over the cell's own display
+// (labels, badges, dates) with a pointer cursor. Like a spreadsheet's dropdown
+// arrow, the chevron / calendar icon appears only on hover, focus or while open,
+// in the space the cell's display leaves free for it (`withIcon`).
+const TRIGGER_CLASS_NAME = cn(
+  OVERLAY_CLASS_NAME,
+  CELL_FOCUS_CLASS_NAME,
+  "astw:flex astw:items-center astw:justify-end astw:cursor-pointer",
+  "astw:data-popup-open:ring-2 astw:data-popup-open:ring-inset astw:data-popup-open:ring-primary",
+  "astw:[&_svg]:opacity-0 astw:[&_svg]:transition-opacity",
+  "astw:hover:[&_svg]:opacity-50 astw:focus:[&_svg]:opacity-50 astw:data-popup-open:[&_svg]:opacity-50",
+);
+
+interface PendingCommit<TRow> {
+  id: number;
+  value: unknown;
+  /** The row object the save was made against. */
+  row: TRow;
+  settled: boolean;
+}
+
+type CellValidate<TRow> = ((value: unknown, row: TRow) => string | null | undefined) | undefined;
+
+/**
+ * The value a cell shows and the `save` that hands a new one to
+ * `edit.onCommit`. A save still in flight — or settled but not yet reflected
+ * in `data` — keeps showing its value; fresh data for the row (a new row
+ * object) supersedes it, and a rejected save reverts the cell.
+ */
+function useCellCommit<TRow extends Record<string, unknown>>(row: TRow, col: EditableColumn<TRow>) {
+  const [pending, setPending] = useState<PendingCommit<TRow> | null>(null);
+  const commitIdRef = useRef(0);
+  const inFlight = pending && (!pending.settled || pending.row === row) ? pending : null;
+  const current = inFlight ? inFlight.value : getCellValue(row, col);
+
+  const save = (value: unknown) => {
+    const id = ++commitIdRef.current;
+    const returned = (col.edit?.onCommit as ((row: TRow, value: unknown) => unknown) | undefined)?.(
+      row,
+      value,
+    );
+    if (!isPromiseLike(returned)) {
+      setPending(null);
+      return;
+    }
+    setPending({ id, value, row, settled: false });
+    // Only the latest save for this cell may settle it, so an older request
+    // failing late can't revert a newer value.
+    returned.then(
+      () => setPending((p) => (p?.id === id ? { ...p, settled: true } : p)),
+      () => setPending((p) => (p?.id === id ? null : p)),
+    );
+  };
+
+  let display: ReactNode;
+  if (inFlight) display = renderTypedValue(row, col, inFlight.value, { linkAsText: true });
+  else if (col.render) display = col.render(row);
+  else display = renderTypedValue(row, col, current, { linkAsText: true });
+
+  return { current, display, save };
+}
+
+/**
+ * Registers the cell's focusable element with the table's Enter / Tab
+ * navigation. Unregisters on every detach instead of returning a ref cleanup:
+ * `Input` and `Select.Trigger` merge refs with a plain callback that calls ours
+ * with `null` and drops any cleanup we return.
+ */
+function useNavigationRef<T extends HTMLElement>(
+  navigation: CellEditNavigation,
+  rowKey: string,
+  colKey: string,
+) {
+  const unregisterRef = useRef<(() => void) | null>(null);
+  return useCallback(
+    (element: T | null) => {
+      unregisterRef.current?.();
+      unregisterRef.current = element ? navigation.register(rowKey, colKey, element) : null;
+    },
+    [navigation, rowKey, colKey],
+  );
+}
+
+function EditableCellFrame({
+  cellProps,
+  display,
+  truncate,
+  hideDisplay,
+  withIcon,
+  errorId,
+  description,
+  children,
+}: {
+  cellProps: ComponentProps<typeof Table.Cell>;
+  display: ReactNode;
+  truncate?: boolean;
+  /** Typing cells hide the display while the input shows the raw value. */
+  hideDisplay?: "focused" | "forced-colors";
+  /** Dropdown and date cells keep the cell's right edge free for their icon. */
+  withIcon?: boolean;
+  errorId: string;
+  description: string | undefined;
+  children: ReactNode;
+}) {
+  return (
+    <Table.Cell
+      {...cellProps}
+      data-editable=""
+      // The editor is positioned against the cell. A pinned cell is already
+      // positioned (sticky), which its inline style keeps.
+      className={cn(cellProps.className, "astw:relative")}
+      // Editing a cell must never fire `onClickRow`.
+      onClick={(event) => event.stopPropagation()}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "astw:block",
+          truncate && "astw:truncate",
+          withIcon && ICON_SPACE_CLASS_NAME,
+          // Transparent input text is forced visible in forced-colors mode;
+          // hide the display instead so the two don't overlap.
+          hideDisplay && "astw:forced-colors:invisible",
+          hideDisplay === "focused" && "astw:invisible",
+        )}
+      >
+        {display}
+      </span>
+      {children}
+      {description !== undefined && (
+        <span id={errorId} className="astw:sr-only">
+          {description}
+        </span>
+      )}
+    </Table.Cell>
+  );
+}
+
+function defaultMaxDecimals<TRow extends Record<string, unknown>>(
+  col: EditableColumn<TRow>,
+  row: TRow,
+): number {
+  if (col.type === "money") {
+    return (
+      col.typeOptions?.maxDecimals ??
+      currencyFractionDigits(resolveMoneyCurrency(col.typeOptions, row))
+    );
+  }
+  if (col.type === "number") {
+    return col.typeOptions?.maxDecimals ?? col.typeOptions?.minDecimals ?? 0;
+  }
+  return 0;
+}
+
+function resolveNumberRules<TRow extends Record<string, unknown>>(
+  col: EditableColumn<TRow>,
+  row: TRow,
+): NumberEditRules | undefined {
+  if (col.type !== "number" && col.type !== "money") return undefined;
+  const edit = col.edit;
+  return {
+    min: edit?.min,
+    max: edit?.max,
+    maxDecimals: edit?.maxDecimals ?? defaultMaxDecimals(col, row),
+    required: edit?.required === true,
+  };
+}
+
+// iOS number pads have no minus key, so a column that allows negatives keeps
+// the full keyboard.
+function numberInputMode(rules: NumberEditRules): "numeric" | "decimal" | "text" {
+  if (rules.min === undefined || rules.min < 0) return "text";
+  return rules.maxDecimals === 0 ? "numeric" : "decimal";
+}
+
+interface DataTableEditableCellProps<
+  TRow extends Record<string, unknown>,
+  TColumn extends EditableColumn<TRow> = EditableColumn<TRow>,
+> {
+  row: TRow;
+  col: TColumn;
+  rowKey: string;
+  colKey: string;
+  /** Accessible name for the editor — the column's label. */
+  label: string;
+  align: "left" | "right";
+  navigation: CellEditNavigation;
+  /** `data-slot`, style, class and context-menu handlers shared with static cells. */
+  cellProps: ComponentProps<typeof Table.Cell>;
+}
+
+/**
+ * A body cell whose value can be edited in place. The value belongs to the
+ * consumer: the cell only holds a draft while it is being edited, and hands
+ * the new value to `edit.onCommit` when the user leaves the cell, presses
+ * Enter / Tab, or picks a choice.
+ *
+ * - `number`, `money`, and `text` / `link` without choices are typed into.
+ * - `badge`, and `text` / `link` with `edit.options`, open a dropdown.
+ * - `date` opens a calendar.
+ *
+ * @internal
+ */
+export function DataTableEditableCell<TRow extends Record<string, unknown>>(
+  props: DataTableEditableCellProps<TRow>,
+) {
+  const { col } = props;
+  if (col.type === "date") return <DateEditCell {...props} col={col} />;
+  if (col.type === "badge" || ((col.type === "text" || col.type === "link") && col.edit?.options)) {
+    return <ChoiceEditCell {...props} col={col} />;
+  }
+  return <TypingEditCell {...props} col={col} />;
+}
+
+// ── Typing: text, number, money, link ───────────────────────────────────────
+
+function TypingEditCell<TRow extends Record<string, unknown>>({
+  row,
+  col,
+  rowKey,
+  colKey,
+  label,
+  align,
+  navigation,
+  cellProps,
+}: DataTableEditableCellProps<TRow>) {
+  const t = useDataTableT();
+  const errorId = useId();
+  const edit = col.edit;
+  const validate = edit?.validate as CellValidate<TRow>;
+  const { current, display, save } = useCellCommit(row, col);
+  const register = useNavigationRef<HTMLInputElement>(navigation, rowKey, colKey);
+
+  const [draft, setDraftState] = useState<string | null>(null);
+  // Read by handlers that run before the next render: the blur fired by moving
+  // focus right after Enter must see that Enter already committed the draft.
+  const draftRef = useRef<string | null>(null);
+  const setDraft = (next: string | null) => {
+    draftRef.current = next;
+    setDraftState(next);
+  };
+  const [focused, setFocused] = useState(false);
+  // Errors that typing can still fix wait for a save attempt; after one fails,
+  // every error shows (and clears) live until the draft is committed or reverted.
+  const [showAllErrors, setShowAllErrors] = useState(false);
+  const pastingRef = useRef(false);
+  const composingRef = useRef(false);
+  const selectOnMouseUpRef = useRef(false);
+
+  const rules = resolveNumberRules(col, row);
+  const baselineText = rules
+    ? toNumberEditText(toNumberValue(current))
+    : (toTextValue(current) ?? "");
+  const text = draft ?? baselineText;
+
+  const evaluate = (value: string): DraftEvaluation<unknown> => {
+    const check = (parsed: unknown) => validate?.(parsed, row);
+    return rules
+      ? evaluateNumberDraft(value, rules, check)
+      : evaluateTextDraft(value, edit?.required === true, check);
+  };
+
+  // A draft that reads the same as the stored value (`10.00` over `10`) is a
+  // no-op: it neither commits nor reports an error.
+  const isUnchanged = (draftText: string, result: DraftEvaluation<unknown>) => {
+    if (draftText === baselineText) return true;
+    if (result.error?.code === "number") return false;
+    return rules
+      ? sameNumber(result.value as number | null, toNumberValue(current))
+      : result.value === toTextValue(current);
+  };
+
+  const evaluation = draft === null ? null : evaluate(draft);
+  const error =
+    draft !== null && evaluation && !isUnchanged(draft, evaluation) ? evaluation.error : null;
+  const visibleError = error && (showAllErrors || isLiveError(error)) ? error : null;
+
+  const describe = (e: CellEditError): string => {
+    switch (e.code) {
+      case "required":
+        return t("editRequired");
+      case "number":
+        return t("editNotANumber");
+      case "decimals":
+        return e.maxDecimals === 0
+          ? t("editWholeNumber")
+          : t("editMaxDecimals", { count: e.maxDecimals });
+      case "min":
+        return t("editMin", { min: formatColumnNumber(row, col, e.min) });
+      case "max":
+        return t("editMax", { max: formatColumnNumber(row, col, e.max) });
+      case "custom":
+        return e.message;
+    }
+  };
+  const message = visibleError ? describe(visibleError) : undefined;
+
+  const revert = () => {
+    setDraft(null);
+    setShowAllErrors(false);
+  };
+
+  // Commits the draft if it changed and passes every rule. Returns whether focus
+  // may leave the cell — `false` when a rule blocks the save.
+  const commitDraft = (): boolean => {
+    const draftText = draftRef.current;
+    if (draftText === null) return true;
+    const result = evaluate(draftText);
+    if (isUnchanged(draftText, result)) {
+      revert();
+      return true;
+    }
+    if (result.error) {
+      setShowAllErrors(true);
+      return false;
+    }
+    revert();
+    save(result.value);
+    return true;
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const next = event.target.value;
+    if (!rules || composingRef.current) {
+      setDraft(next);
+      return;
+    }
+    // Text that arrives in one go — a paste, a drop, autofill, dictation — is
+    // cleaned up, then left for the rules to judge: never silently dropped or
+    // rounded the way single keystrokes are filtered below.
+    const { inputType, data } = event.nativeEvent as Partial<InputEvent>;
+    const bulk =
+      pastingRef.current ||
+      inputType === "insertFromPaste" ||
+      inputType === "insertFromDrop" ||
+      (typeof data === "string" && data.length > 1);
+    if (bulk) {
+      pastingRef.current = false;
+      setDraft(normalizeNumberText(next));
+      return;
+    }
+    // Characters that can never be valid are dropped: leaving the draft
+    // untouched makes React restore the input's previous value.
+    if (isAllowedNumberText(next, rules)) setDraft(next);
+  };
+
+  const handleCompositionEnd = (event: CompositionEvent<HTMLInputElement>) => {
+    composingRef.current = false;
+    if (rules) setDraft(normalizeNumberText(event.currentTarget.value));
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    pastingRef.current = false;
+    // While an IME is composing, Enter confirms the conversion, not the cell.
+    if (event.nativeEvent.isComposing || composingRef.current || event.keyCode === 229) return;
+    const from = { rowKey, colKey };
+    switch (event.key) {
+      case "Enter":
+        event.preventDefault();
+        if (commitDraft()) navigation.move(from, event.shiftKey ? "up" : "down");
+        return;
+      case "Tab":
+        if (!commitDraft()) {
+          event.preventDefault();
+          return;
+        }
+        // At the first / last editable cell, native Tab leaves the table.
+        if (navigation.move(from, event.shiftKey ? "prev" : "next")) event.preventDefault();
+        return;
+      case "Escape":
+        if (draftRef.current === null || draftRef.current === baselineText) return;
+        // Handled here, so an enclosing dialog doesn't also close on this Esc.
+        event.preventDefault();
+        event.stopPropagation();
+        revert();
+        return;
+    }
+  };
+
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+    setFocused(true);
+    event.currentTarget.select();
+  };
+
+  // Leaving the cell saves a valid change and quietly reverts an invalid one.
+  const handleBlur = () => {
+    setFocused(false);
+    if (!commitDraft()) revert();
+  };
+
+  const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {
+    if (focused) return;
+    // A right-click on a resting cell opens DataTable's cell menu instead of editing.
+    if (event.button === 2) {
+      event.preventDefault();
+      return;
+    }
+    selectOnMouseUpRef.current = true;
+  };
+
+  // The click that focuses the cell keeps the select-all from `handleFocus`;
+  // otherwise mouseup would collapse it to a caret.
+  const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {
+    if (!selectOnMouseUpRef.current) return;
+    selectOnMouseUpRef.current = false;
+    event.preventDefault();
+  };
+
+  // While editing, the browser's own menu and long-press (paste, select) win
+  // over DataTable's cell menu.
+  const stopWhileFocused = (event: MouseEvent | TouchEvent) => {
+    if (focused) event.stopPropagation();
+  };
+
+  return (
+    <EditableCellFrame
+      cellProps={cellProps}
+      display={display}
+      truncate={col.truncate}
+      hideDisplay={focused ? "focused" : "forced-colors"}
+      errorId={errorId}
+      description={message === undefined ? undefined : `${message}. ${t("editRevertHint")}`}
+    >
+      <Tooltip.Root open={focused && message !== undefined}>
+        <Tooltip.Trigger
+          render={
+            <Input
+              ref={register}
+              type="text"
+              value={text}
+              aria-label={label}
+              aria-invalid={message !== undefined ? true : undefined}
+              aria-describedby={message !== undefined ? errorId : undefined}
+              inputMode={rules ? numberInputMode(rules) : undefined}
+              enterKeyHint="next"
+              autoComplete="off"
+              spellCheck={rules ? false : undefined}
+              className={cn(
+                INPUT_CLASS_NAME,
+                !focused && "astw:text-transparent",
+                rules && "astw:tabular-nums",
+                align === "right" && "astw:text-right",
+              )}
+              style={focused ? { WebkitTouchCallout: "default" } : undefined}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onPaste={() => {
+                pastingRef.current = true;
+              }}
+              onCompositionStart={() => {
+                composingRef.current = true;
+              }}
+              onCompositionEnd={handleCompositionEnd}
+              onMouseDown={handleMouseDown}
+              onMouseUp={handleMouseUp}
+              onContextMenu={stopWhileFocused}
+              onTouchStart={stopWhileFocused}
+            />
+          }
+        />
+        <Tooltip.Content>
+          {message}
+          <span className="astw:block astw:opacity-70">{t("editRevertHint")}</span>
+        </Tooltip.Content>
+      </Tooltip.Root>
+    </EditableCellFrame>
+  );
+}
+
+// ── Shared by the dropdown and calendar editors ─────────────────────────────
+
+/**
+ * Validates and commits a picked value, and owns the message shown when the
+ * consumer's `validate` rejects it. Picking the current value is a no-op.
+ */
+function usePickCommit<TRow extends Record<string, unknown>>(
+  row: TRow,
+  col: EditableColumn<TRow>,
+  save: (value: unknown) => void,
+  isSame: (next: string | null) => boolean,
+) {
+  const [message, setMessage] = useState<string | undefined>(undefined);
+  const commit = (next: string | null) => {
+    setMessage(undefined);
+    if (isSame(next)) return;
+    if (next === null && col.edit?.required) return;
+    const problem = (col.edit?.validate as CellValidate<TRow>)?.(next, row);
+    if (problem) {
+      setMessage(problem);
+      return;
+    }
+    save(next);
+  };
+  return { message, clearMessage: () => setMessage(undefined), commit };
+}
+
+// Tab / Shift+Tab from a closed dropdown or calendar moves between editable
+// cells, the same way it does from a typing cell.
+function tabBetweenCells(
+  event: KeyboardEvent<HTMLElement>,
+  open: boolean,
+  navigation: CellEditNavigation,
+  from: { rowKey: string; colKey: string },
+) {
+  if (event.key !== "Tab" || open) return;
+  if (navigation.move(from, event.shiftKey ? "prev" : "next")) event.preventDefault();
+}
+
+// ── Dropdown: badge, and text / link with choices ────────────────────────────
+
+function ChoiceEditCell<TRow extends Record<string, unknown>>({
+  row,
+  col,
+  rowKey,
+  colKey,
+  label,
+  navigation,
+  cellProps,
+}: DataTableEditableCellProps<TRow, ChoiceColumn<TRow>>) {
+  const t = useDataTableT();
+  const errorId = useId();
+  const { current, display, save } = useCellCommit(row, col);
+  const register = useNavigationRef<HTMLButtonElement>(navigation, rowKey, colKey);
+  const value = toTextValue(current);
+  const { message, clearMessage, commit } = usePickCommit(row, col, save, (next) => next === value);
+  const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const choices = columnChoices(col) ?? [];
+
+  return (
+    <EditableCellFrame
+      cellProps={cellProps}
+      display={display}
+      truncate={col.truncate}
+      withIcon
+      errorId={errorId}
+      description={message}
+    >
+      <SelectParts.Root<string | null>
+        value={value}
+        onValueChange={(next) => commit(next)}
+        open={open}
+        onOpenChange={setOpen}
+        itemToStringLabel={(item) => String(optionLabel(choices, item) ?? t("editNone"))}
+      >
+        <Tooltip.Root open={focused && !open && message !== undefined}>
+          <Tooltip.Trigger
+            render={
+              <SelectParts.Trigger
+                ref={register}
+                aria-label={label}
+                aria-invalid={message !== undefined ? true : undefined}
+                aria-describedby={message !== undefined ? errorId : undefined}
+                className={TRIGGER_CLASS_NAME}
+                onKeyDown={(event) => tabBetweenCells(event, open, navigation, { rowKey, colKey })}
+                onFocus={() => setFocused(true)}
+                onBlur={() => {
+                  setFocused(false);
+                  clearMessage();
+                }}
+              >
+                <span className="astw:sr-only">
+                  <SelectParts.Value />
+                </span>
+              </SelectParts.Trigger>
+            }
+          />
+          <Tooltip.Content>{message}</Tooltip.Content>
+        </Tooltip.Root>
+        {/* At least as wide as the cell, and wide enough that choices don't wrap. */}
+        <SelectParts.Content
+          alignItemWithTrigger={false}
+          className="astw:w-max astw:min-w-(--anchor-width) astw:max-w-80"
+        >
+          {!col.edit?.required && (
+            <SelectParts.Item value={null}>
+              <span className="astw:text-muted-foreground">{t("editNone")}</span>
+            </SelectParts.Item>
+          )}
+          {choices.map((choice) => (
+            <SelectParts.Item key={choice.value} value={choice.value}>
+              {col.type === "badge" ? (
+                <BadgeList
+                  value={choice.value}
+                  options={col.typeOptions}
+                  resolveLabel={() => choice.label}
+                />
+              ) : (
+                choice.label
+              )}
+            </SelectParts.Item>
+          ))}
+        </SelectParts.Content>
+      </SelectParts.Root>
+    </EditableCellFrame>
+  );
+}
+
+// ── Calendar: date ───────────────────────────────────────────────────────────
+
+// Where an empty calendar opens: today, or — when today can't be picked — the
+// nearest day that can, so a bounded date never opens on a fully disabled month.
+function nearestPickableDay(min: CalendarDate | undefined, max: CalendarDate | undefined) {
+  const now = today(getLocalTimeZone());
+  if (min && now.compare(min) < 0) return min;
+  if (max && now.compare(max) > 0) return max;
+  return undefined;
+}
+
+const POPUP_CLASS_NAME = cn(
+  "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:flex astw:flex-col astw:gap-3 astw:rounded-md astw:border astw:border-border astw:p-3 astw:shadow-md",
+  "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
+);
+
+function DateEditCell<TRow extends Record<string, unknown>>({
+  row,
+  col,
+  rowKey,
+  colKey,
+  label,
+  navigation,
+  cellProps,
+}: DataTableEditableCellProps<TRow, DateColumn<TRow>>) {
+  const t = useDataTableT();
+  const errorId = useId();
+  const withTime = col.typeOptions?.dateFormat === "datetime";
+  const { current, display, save } = useCellCommit(row, col);
+  const register = useNavigationRef<HTMLButtonElement>(navigation, rowKey, colKey);
+  const { message, clearMessage, commit } = usePickCommit(row, col, save, (next) =>
+    sameDate(next, current, withTime),
+  );
+  const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  // A date-time is picked in two steps (day, then time), so it's committed when
+  // the calendar closes; a date commits as soon as a day is picked.
+  const [draftDay, setDraftDay] = useState<CalendarDate | null>(null);
+  const [draftTime, setDraftTime] = useState("");
+  // The trigger shows only an icon (the date is the cell's own display, hidden
+  // from screen readers), so its accessible name carries the date.
+  const accessibleName = typeof display === "string" ? `${label}, ${display}` : label;
+  const min = isIsoDate(col.edit?.min) ? parseDate(col.edit.min) : undefined;
+  const max = isIsoDate(col.edit?.max) ? parseDate(col.edit.max) : undefined;
+  const pickedDay = withTime ? draftDay : toCalendarDate(current);
+
+  const handleOpenChange = (next: boolean, details?: { reason?: string }) => {
+    if (next) {
+      setDraftDay(toCalendarDate(current));
+      setDraftTime(toTimeText(current));
+    } else if (withTime && draftDay && details?.reason !== "escape-key") {
+      commit(toIsoDateTime(draftDay, draftTime));
+    }
+    setOpen(next);
+  };
+
+  const handlePick = (day: CalendarDate) => {
+    if (withTime) {
+      setDraftDay(day);
+      return;
+    }
+    commit(day.toString());
+    setOpen(false);
+  };
+
+  return (
+    <EditableCellFrame
+      cellProps={cellProps}
+      display={display}
+      truncate={col.truncate}
+      withIcon
+      errorId={errorId}
+      description={message}
+    >
+      <Popover.Root open={open} onOpenChange={handleOpenChange}>
+        <Tooltip.Root open={focused && !open && message !== undefined}>
+          <Tooltip.Trigger
+            render={
+              <Popover.Trigger
+                ref={register}
+                aria-label={accessibleName}
+                aria-invalid={message !== undefined ? true : undefined}
+                aria-describedby={message !== undefined ? errorId : undefined}
+                className={TRIGGER_CLASS_NAME}
+                onKeyDown={(event) => {
+                  if (event.key === "ArrowDown" && !open) {
+                    event.preventDefault();
+                    handleOpenChange(true);
+                    return;
+                  }
+                  tabBetweenCells(event, open, navigation, { rowKey, colKey });
+                }}
+                onFocus={() => setFocused(true)}
+                onBlur={() => {
+                  setFocused(false);
+                  clearMessage();
+                }}
+              >
+                <CalendarDays className="astw:size-3.5 astw:opacity-50" aria-hidden="true" />
+              </Popover.Trigger>
+            }
+          />
+          <Tooltip.Content>{message}</Tooltip.Content>
+        </Tooltip.Root>
+        <Popover.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
+          <Popover.Positioner sideOffset={4} side="bottom" align="start">
+            <Popover.Popup data-slot="data-table-cell-calendar" className={POPUP_CLASS_NAME}>
+              <Calendar
+                aria-label={label}
+                value={pickedDay}
+                defaultFocusedValue={pickedDay ?? nearestPickableDay(min, max)}
+                onChange={handlePick}
+                minValue={min}
+                maxValue={max}
+              />
+              {withTime && (
+                <Input
+                  type="time"
+                  aria-label={`${label} (${t("chooseTime")})`}
+                  value={draftTime}
+                  onChange={(event) => setDraftTime(event.target.value)}
+                  className="astw:h-8 astw:text-sm"
+                />
+              )}
+              {(withTime || !col.edit?.required) && (
+                <div className="astw:flex astw:justify-between astw:gap-2">
+                  {!col.edit?.required ? (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        commit(null);
+                        setOpen(false);
+                      }}
+                    >
+                      {t("editClear")}
+                    </Button>
+                  ) : (
+                    <span />
+                  )}
+                  {withTime && (
+                    <Button size="sm" onClick={() => handleOpenChange(false)}>
+                      {t("editDone")}
+                    </Button>
+                  )}
+                </div>
+              )}
+            </Popover.Popup>
+          </Popover.Positioner>
+        </Popover.Portal>
+      </Popover.Root>
+    </EditableCellFrame>
+  );
+}
diff --git a/packages/core/src/components/data-table/i18n.ts b/packages/core/src/components/data-table/i18n.ts
index 9243962f..35841755 100644
--- a/packages/core/src/components/data-table/i18n.ts
+++ b/packages/core/src/components/data-table/i18n.ts
@@ -117,6 +117,19 @@ export const dataTableLabels = defineI18nLabels({
       `${props.column} ${props.operator} ${props.value}`,
     filterChipLabelEnum: (props: { column: string; operator: string; value: string }) =>
       `${props.column} ${props.operator}: ${props.value}`,
+
+    // Inline cell editing — rule errors (tooltip + screen-reader description)
+    editRequired: "Required",
+    editNotANumber: "Enter a number",
+    editWholeNumber: "Enter a whole number",
+    editMaxDecimals: (props: { count: number }) =>
+      props.count === 1 ? "Use up to 1 decimal place" : `Use up to ${props.count} decimal places`,
+    editMin: (props: { min: string }) => `Must be ${props.min} or more`,
+    editMax: (props: { max: string }) => `Must be ${props.max} or less`,
+    editRevertHint: "Press Esc to undo",
+    editNone: "None",
+    editClear: "Clear",
+    editDone: "Done",
   },
   ja: {
     loading: "読み込み中...",
@@ -222,6 +235,19 @@ export const dataTableLabels = defineI18nLabels({
       `${props.column}: ${props.value} ${props.operator}`,
     filterChipLabelEnum: (props: { column: string; operator: string; value: string }) =>
       `${props.column} ${props.operator}: ${props.value}`,
+
+    // Inline cell editing
+    editRequired: "入力してください",
+    editNotANumber: "数値を入力してください",
+    editWholeNumber: "整数で入力してください",
+    editMaxDecimals: (props: { count: number }) =>
+      `小数点以下${props.count}桁までで入力してください`,
+    editMin: (props: { min: string }) => `${props.min}以上で入力してください`,
+    editMax: (props: { max: string }) => `${props.max}以下で入力してください`,
+    editRevertHint: "Escキーで元に戻せます",
+    editNone: "なし",
+    editClear: "クリア",
+    editDone: "完了",
   },
 });
 
diff --git a/packages/core/src/components/data-table/index.ts b/packages/core/src/components/data-table/index.ts
index 27c3ad96..b1ff836f 100644
--- a/packages/core/src/components/data-table/index.ts
+++ b/packages/core/src/components/data-table/index.ts
@@ -9,8 +9,10 @@ export { createColumnHelper } from "./field-helpers";
 
 // Types — DataTable-specific
 export type {
+  BadgeCellEditOptions,
   BadgeCellOptions,
   BadgeVariant,
+  CellEditState,
   Column,
   ColumnBase,
   ColumnCellType,
@@ -18,12 +20,15 @@ export type {
   HeaderRenderContext,
   DataTableData,
   DataTableFilterConfig,
+  DateCellEditOptions,
   DateCellOptions,
   LinkCellOptions,
   MetadataFieldOptions,
   MoneyCellOptions,
+  NumberCellEditOptions,
   NumberCellOptions,
   RowAction,
+  TextCellEditOptions,
   UseDataTableOptions,
   UseDataTableReturn,
 } from "./types";
diff --git a/packages/core/src/components/data-table/types.ts b/packages/core/src/components/data-table/types.ts
index ddcd71af..02527f07 100644
--- a/packages/core/src/components/data-table/types.ts
+++ b/packages/core/src/components/data-table/types.ts
@@ -6,6 +6,7 @@ import type {
   FilterConfig,
   OperatorForFilterType,
   PageInfo,
+  SelectOption,
   SortConfig,
   SortState,
 } from "@/types/collection";
@@ -84,6 +85,117 @@ export interface LinkCellOptions<TRow extends Record<string, unknown>> {
   href: (row: TRow) => string | null | undefined;
 }
 
+// =============================================================================
+// Inline editing
+// =============================================================================
+
+/** Row state passed to `edit.canEdit` alongside the row. */
+export interface CellEditState {
+  /** Whether the row is selected. Always `false` when row selection is off. */
+  selected: boolean;
+}
+
+interface CellEditBase<TRow extends Record<string, unknown>, TValue> {
+  /**
+   * Decides, per row, whether the cell can be edited. Receives the row and
+   * whether it is selected, so "editable once selected" is
+   * `(_, { selected }) => selected`. Default: every row with an `id`.
+   */
+  canEdit?: (row: TRow, state: CellEditState) => boolean;
+  /**
+   * Rejects an emptied cell with a "Required" message, so `validate` and
+   * `onCommit` never receive `null` at runtime. Default: `false`.
+   */
+  required?: boolean;
+  /**
+   * The screen's own rule, checked after the built-in ones. Return a message to
+   * block the save — it shows in the cell's tooltip — or nothing to allow it.
+   */
+  validate?: (value: TValue | null, row: TRow) => string | null | undefined;
+  /**
+   * Runs when the user leaves the cell (or presses Enter / Tab) with a value
+   * that changed and passes every rule. Update `data` from here. It may return
+   * a promise: while it is pending the cell keeps showing the new value, and
+   * if it rejects the cell goes back to the old one.
+   */
+  onCommit: (row: TRow, value: TValue | null) => void | Promise<unknown>;
+}
+
+/**
+ * `edit` config for `type: "text"` and `type: "link"` columns. Without
+ * `options` the cell is typed into: the value is the text as typed, and an
+ * emptied cell commits `null`. A `link` column shows its label as plain text
+ * while the cell can be edited.
+ */
+export interface TextCellEditOptions<TRow extends Record<string, unknown>> extends CellEditBase<
+  TRow,
+  string
+> {
+  /**
+   * Turns the cell into a dropdown of these choices (a supplier, a warehouse,
+   * a unit of measure). The column's value is an option's `value`, and every
+   * cell in the column — editable or not — shows the matching `label`.
+   * Picking a choice commits it; unless `required`, a "None" choice commits
+   * `null`.
+   */
+  options?: readonly SelectOption[];
+}
+
+/**
+ * `edit` config for `type: "badge"` columns: a dropdown whose choices render as
+ * the same badges the cell shows. Picking one commits its `value`; unless
+ * `required`, a "None" choice commits `null`. Single-value columns only.
+ */
+export interface BadgeCellEditOptions<TRow extends Record<string, unknown>> extends CellEditBase<
+  TRow,
+  string
+> {
+  /**
+   * The choices. Default: the entries of `typeOptions.badgeLabelMap`, else the
+   * column's enum `filter` options. A badge column with neither can't be
+   * edited.
+   */
+  options?: readonly SelectOption[];
+}
+
+/**
+ * `edit` config for `type: "date"` columns: a calendar that opens from the
+ * cell. Picking a day commits `"YYYY-MM-DD"`. With `dateFormat: "datetime"`
+ * the calendar comes with a time field and commits an ISO 8601 timestamp
+ * (`Date#toISOString()`) when it closes. Unless `required`, "Clear" commits
+ * `null`.
+ */
+export interface DateCellEditOptions<TRow extends Record<string, unknown>> extends CellEditBase<
+  TRow,
+  string
+> {
+  /** Earliest day that can be picked, as `"YYYY-MM-DD"`. */
+  min?: string;
+  /** Latest day that can be picked, as `"YYYY-MM-DD"`. */
+  max?: string;
+}
+
+/**
+ * `edit` config for `type: "number"` and `type: "money"` columns. Characters
+ * that can never be valid are blocked as the user types; `max` and `validate`
+ * errors show immediately, `min` and `required` when the user tries to save.
+ */
+export interface NumberCellEditOptions<TRow extends Record<string, unknown>> extends CellEditBase<
+  TRow,
+  number
+> {
+  /** Smallest allowed value. With `min >= 0` a minus sign can't be typed. */
+  min?: number;
+  /** Largest allowed value. */
+  max?: number;
+  /**
+   * Digits allowed after the decimal point; `0` means whole numbers only.
+   * Defaults to what the cell displays — `typeOptions.maxDecimals` for
+   * `number` (else `0`), the currency's decimals for `money` (USD 2, JPY 0).
+   */
+  maxDecimals?: number;
+}
+
 /**
  * Header render context for non-sortable columns.
  */
@@ -286,40 +398,50 @@ export interface ColumnBase<TRow extends Record<string, unknown>> {
  * and `undefined` are always allowed: every built-in renderer maps them to the
  * `—` placeholder.
  *
+ * `edit` makes the cells editable in place and also narrows per branch, so
+ * `onCommit` receives the value type the column holds. Every typed column
+ * supports it; untyped (`render`-only) columns don't.
+ *
  * Prefer `Column<TRow>` in most cases; this is exported so consumers can
  * compose more specific column types.
  */
 export type ColumnTypeBranch<TRow extends Record<string, unknown>> =
-  | { type?: undefined; typeOptions?: never; accessor?: (row: TRow) => unknown }
+  | { type?: undefined; typeOptions?: never; accessor?: (row: TRow) => unknown; edit?: never }
   | {
       type: "text";
       typeOptions?: never;
       accessor?: (row: TRow) => string | number | boolean | bigint | null | undefined;
+      edit?: TextCellEditOptions<TRow>;
     }
   | {
       type: "number";
       typeOptions?: NumberCellOptions;
       accessor?: (row: TRow) => number | null | undefined;
+      edit?: NumberCellEditOptions<TRow>;
     }
   | {
       type: "money";
       typeOptions?: MoneyCellOptions<TRow>;
       accessor?: (row: TRow) => number | null | undefined;
+      edit?: NumberCellEditOptions<TRow>;
     }
   | {
       type: "date";
       typeOptions?: DateCellOptions;
       accessor?: (row: TRow) => Date | string | number | null | undefined;
+      edit?: DateCellEditOptions<TRow>;
     }
   | {
       type: "badge";
       typeOptions?: BadgeCellOptions;
       accessor?: (row: TRow) => string | string[] | number | boolean | null | undefined;
+      edit?: BadgeCellEditOptions<TRow>;
     }
   | {
       type: "link";
       typeOptions: LinkCellOptions<TRow>;
       accessor?: (row: TRow) => string | number | boolean | null | undefined;
+      edit?: TextCellEditOptions<TRow>;
     };
 
 /**
diff --git a/packages/core/src/components/data-table/use-cell-edit-navigation.test.ts b/packages/core/src/components/data-table/use-cell-edit-navigation.test.ts
new file mode 100644
index 00000000..7636394f
--- /dev/null
+++ b/packages/core/src/components/data-table/use-cell-edit-navigation.test.ts
@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from "vitest";
+import { createCellEditNavigation } from "./use-cell-edit-navigation";
+
+function cell(isConnected = true) {
+  return { focus: vi.fn(), isConnected } as unknown as HTMLElement & {
+    focus: ReturnType<typeof vi.fn>;
+  };
+}
+
+// A 3×3 grid where only some cells are editable:
+//        a   b   c
+//   r1   x   .   x
+//   r2   .   .   x
+//   r3   x   .   .
+function setup() {
+  const navigation = createCellEditNavigation();
+  navigation.setOrder(["r1", "r2", "r3"], ["a", "b", "c"]);
+  const cells = { r1a: cell(), r1c: cell(), r2c: cell(), r3a: cell() };
+  navigation.register("r1", "a", cells.r1a);
+  navigation.register("r1", "c", cells.r1c);
+  navigation.register("r2", "c", cells.r2c);
+  navigation.register("r3", "a", cells.r3a);
+  return { navigation, cells };
+}
+
+describe("createCellEditNavigation", () => {
+  it("moves down and up the same column, skipping rows without an editor", () => {
+    const { navigation, cells } = setup();
+    expect(navigation.move({ rowKey: "r1", colKey: "a" }, "down")).toBe(true);
+    expect(cells.r3a.focus).toHaveBeenCalled();
+    expect(navigation.move({ rowKey: "r3", colKey: "a" }, "up")).toBe(true);
+    expect(cells.r1a.focus).toHaveBeenCalled();
+  });
+
+  it("returns false at the edge of a column", () => {
+    const { navigation } = setup();
+    expect(navigation.move({ rowKey: "r3", colKey: "a" }, "down")).toBe(false);
+    expect(navigation.move({ rowKey: "r1", colKey: "c" }, "up")).toBe(false);
+  });
+
+  it("moves next and prev in row-major order, skipping read-only cells", () => {
+    const { navigation, cells } = setup();
+    navigation.move({ rowKey: "r1", colKey: "a" }, "next");
+    expect(cells.r1c.focus).toHaveBeenCalled();
+    navigation.move({ rowKey: "r1", colKey: "c" }, "next");
+    expect(cells.r2c.focus).toHaveBeenCalled();
+    navigation.move({ rowKey: "r2", colKey: "c" }, "prev");
+    expect(cells.r1c.focus).toHaveBeenCalledTimes(2);
+  });
+
+  it("returns false past the last and first editable cell", () => {
+    const { navigation } = setup();
+    expect(navigation.move({ rowKey: "r3", colKey: "a" }, "next")).toBe(false);
+    expect(navigation.move({ rowKey: "r1", colKey: "a" }, "prev")).toBe(false);
+  });
+
+  it("stops navigating to a cell once it unregisters", () => {
+    const { navigation, cells } = setup();
+    const unregister = navigation.register("r2", "a", cell());
+    unregister();
+    navigation.move({ rowKey: "r1", colKey: "a" }, "down");
+    expect(cells.r3a.focus).toHaveBeenCalled();
+  });
+
+  it("skips a cell that left the page without unregistering", () => {
+    const { navigation, cells } = setup();
+    const detached = cell(false);
+    navigation.register("r2", "a", detached);
+    navigation.move({ rowKey: "r1", colKey: "a" }, "down");
+    expect(detached.focus).not.toHaveBeenCalled();
+    expect(cells.r3a.focus).toHaveBeenCalled();
+  });
+
+  it("keeps a newer registration when a stale cleanup runs late", () => {
+    const navigation = createCellEditNavigation();
+    navigation.setOrder(["r1", "r2"], ["a"]);
+    const first = cell();
+    const second = cell();
+    navigation.register("r1", "a", cell());
+    const staleCleanup = navigation.register("r2", "a", first);
+    navigation.register("r2", "a", second);
+    staleCleanup();
+    expect(navigation.move({ rowKey: "r1", colKey: "a" }, "down")).toBe(true);
+    expect(second.focus).toHaveBeenCalled();
+    expect(first.focus).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/core/src/components/data-table/use-cell-edit-navigation.ts b/packages/core/src/components/data-table/use-cell-edit-navigation.ts
new file mode 100644
index 00000000..a91df06b
--- /dev/null
+++ b/packages/core/src/components/data-table/use-cell-edit-navigation.ts
@@ -0,0 +1,89 @@
+import { useState } from "react";
+
+export type CellEditDirection = "up" | "down" | "next" | "prev";
+
+/**
+ * Tracks the editable cells a DataTable page has rendered, so a cell can hand
+ * focus to its neighbour on Enter / Tab without querying the DOM.
+ *
+ * Editors register their focusable element through a callback ref;
+ * `DataTableRows` publishes the current row and column order on every render.
+ * Moves only ever land on registered cells, so read-only columns and rows are
+ * skipped rather than trapping focus.
+ *
+ * @internal
+ */
+export interface CellEditNavigation {
+  /** Registers a cell's editor; returns the matching cleanup. */
+  register: (rowKey: string, colKey: string, element: HTMLElement) => () => void;
+  /** The rendered row keys (top to bottom) and column keys (left to right). */
+  setOrder: (rowKeys: readonly string[], colKeys: readonly string[]) => void;
+  /** Focuses the nearest editable cell in `direction`; `false` when there is none. */
+  move: (from: { rowKey: string; colKey: string }, direction: CellEditDirection) => boolean;
+}
+
+const cellId = (rowKey: string, colKey: string) => `${rowKey}\u0000${colKey}`;
+
+export function createCellEditNavigation(): CellEditNavigation {
+  const cells = new Map<string, HTMLElement>();
+  let rowKeys: readonly string[] = [];
+  let colKeys: readonly string[] = [];
+
+  // A cell that unmounted without unregistering is skipped, not focused.
+  const at = (rowKey: string, colKey: string) => {
+    const cell = cells.get(cellId(rowKey, colKey));
+    return cell?.isConnected ? cell : undefined;
+  };
+
+  const find = (from: { rowKey: string; colKey: string }, direction: CellEditDirection) => {
+    const row = rowKeys.indexOf(from.rowKey);
+    const col = colKeys.indexOf(from.colKey);
+    if (row === -1 || col === -1) return undefined;
+
+    if (direction === "up" || direction === "down") {
+      const step = direction === "down" ? 1 : -1;
+      for (let r = row + step; r >= 0 && r < rowKeys.length; r += step) {
+        const cell = at(rowKeys[r], from.colKey);
+        if (cell) return cell;
+      }
+      return undefined;
+    }
+
+    // Row-major order, left to right then top to bottom.
+    const step = direction === "next" ? 1 : -1;
+    const total = rowKeys.length * colKeys.length;
+    for (let i = row * colKeys.length + col + step; i >= 0 && i < total; i += step) {
+      const cell = at(rowKeys[Math.floor(i / colKeys.length)], colKeys[i % colKeys.length]);
+      if (cell) return cell;
+    }
+    return undefined;
+  };
+
+  return {
+    register(rowKey, colKey, element) {
+      const id = cellId(rowKey, colKey);
+      cells.set(id, element);
+      return () => {
+        // A re-render can register the replacement element before the previous
+        // ref's cleanup runs — only drop the entry if it is still ours.
+        if (cells.get(id) === element) cells.delete(id);
+      };
+    },
+    setOrder(nextRowKeys, nextColKeys) {
+      rowKeys = nextRowKeys;
+      colKeys = nextColKeys;
+    },
+    move(from, direction) {
+      const target = find(from, direction);
+      if (!target) return false;
+      target.focus();
+      return true;
+    },
+  };
+}
+
+/** One navigation registry per rendered table body. */
+export function useCellEditNavigation(): CellEditNavigation {
+  const [navigation] = useState(createCellEditNavigation);
+  return navigation;
+}
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index 8d2780c9..be830a07 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/packages/core/src/components/select/select.tsx
@@ -100,7 +100,7 @@ function SelectContent({
         <BaseSelect.Popup
           data-slot="select-content"
           className={cn(
-            "astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md",
+            "astw:bg-popover astw:text-popover-foreground astw:data-open:animate-in astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-open:fade-in-0 astw:data-ending-style:zoom-out-95 astw:data-open:zoom-in-95 astw:z-(--z-popup) astw:w-[var(--anchor-width)] astw:min-w-32 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:p-1 astw:shadow-md",
             className,
           )}
           {...props}