diff --git a/.changeset/brisk-cells-type.md b/.changeset/brisk-cells-type.md
new file mode 100644
index 000000000..e89d5f45c
--- /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 you can type into to search; `date` columns open a calendar. Editable columns show a pen after their title, and each cell shows a pen, chevron or calendar icon on hover. Rules (`min`, `max`, `maxDecimals`, `required`, `validate`) are checked when the user saves; a value that breaks one stays on screen, outlined in orange, and is never saved until it's fixed or undone. 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. Leaving the page with unsaved edits asks first.
+
+```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 000000000..3334ec3ad
--- /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 000000000..2e203535e
--- /dev/null
+++ b/decisions/data-table-inline-editing.md
@@ -0,0 +1,187 @@
+# 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, with an icon.**
+   - Editable cells look like the rest of the table (no input boxes). An editable column has a pen after its title, so it can be told apart without hovering, on touch screens too. Hovering a cell shows its editor's icon at the right edge: a pen for typing, a chevron for dropdowns, a calendar for dates. The icon is only a cue: a click anywhere in the cell edits it.
+   - The cursor agrees: 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.
+   - Values stop before the icon, and row height and column width don't shift when a row becomes editable.
+3. **Check rules on save, not while typing.**
+   - Anything can be typed. Rules are checked when the user presses Enter or Tab or leaves the cell, so a half-typed value is never flagged.
+   - Pasted and IME text is cleaned up (thousands separators, full-width digits) and then checked. It is never silently rounded.
+4. **Explain broken rules, and never lose what was typed.**
+   - A broken rule — 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 stay in the cell until it's fixed, and Esc puts the old value back.
+   - Clicking away from an invalid cell keeps the value on screen, outlined in orange, with its message on hover. It's never saved until the user fixes it or presses Esc.
+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.
+   - In a dropdown, typing filters the choices: Enter picks the highlighted one, Tab takes it and moves on.
+   - 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.
+   - Autosave is the default: there is no Save button and 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.
+   - Leaving the page while something is unsaved — a cell mid-edit, a kept invalid value, or a save still in flight — asks first. A save in flight is waited for, so the prompt only appears when something can't be saved.
+   - 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.**~~ Decided in review: the value is kept, outlined in orange, and never saved until it's fixed or undone (see [Review round 1](#review-round-1-2026-10-05)).
+- **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.
+
+## Review round 1 (2026-10-05)
+
+Review comments from IzumiSy and Sean on app-shell#560, split into experience calls (made by @itsprade) and technical calls (for the team).
+
+**Experience — decided and built in this PR:**
+
+- **Editable columns are recognisable at rest** (Sean, with platform-planning#1563): a pen after the column title (50% opacity), and each cell shows its editor's icon — pen, chevron or calendar — on hover. A click anywhere in the cell edits it.
+- **Autosave is the default**, with no Save button. Leaving the page with unsaved edits asks first (Sean's two save patterns; the batch-and-save mode stays a technical call below).
+- **An invalid value is kept, outlined in orange, with its message** instead of being reverted when the user clicks away (Sean).
+- **Rules are checked only when the user leaves the cell or saves**, custom `validate` rules included (Sean).
+- **No keys are blocked while typing**; the rules judge the value on save, with the same red outline and tooltip (follows from IzumiSy's schema proposal).
+- **Dropdowns are typable**: typing filters the choices.
+
+**Experience — still open:** what an edited row does when it no longer matches the current sort or filter. Research across Airtable, Excel, Google Sheets, Smartsheet, AG Grid, MUI X, Salesforce, SAP Fiori, Odoo, NetSuite, Retool and others found five patterns: stay put until refresh (the most common, and AG Grid's default), hide when the user moves on, live re-apply, pin and explain, and an explicit edit mode. The leading option for this table is to keep the row in place, mark rows that no longer match ("Not in view — hidden on refresh"), and offer a table-level "Refresh". An explicit edit mode is worth it only for document-style flows that are posted as a set (draft PO lines, a stock count).
+
+**Technical — for the team:**
+
+1. **Rules API** (IzumiSy): replace `min` / `max` / `maxDecimals` / `required` / `validate` with one `edit.schema` (Standard Schema, as `CsvImporter` does), and settle the empty-value, parsing, change-detection, async, row-context, stale-row, multiple-issue and picker-bounds questions IzumiSy listed.
+2. **Save API** (Sean): a table-level edit setting with a mode (autosave, or collect then save), one save handler or hook instead of `onCommit` per column, `onCommit` returning the updated row or the table applying the value itself, and how it fits `useOptimisticRows` (#1115).
+3. **Rapid edits** (Sean): a quick second edit must never save a row that's missing the first edit.
+4. **Row editability set once** for the table instead of in every column's `canEdit` (Sean).
+5. **Choices API** (Sean): match `Select`'s `items` / `mapItem` (and its planned changes) instead of `options`.
+6. **Keeping data fresh** (Sean): refetching after saves, and row / bulk actions acting on stale data after a failed save.
+7. **When to merge**: hold this PR until 1 and 2 are settled, or merge and accept a breaking change later.
diff --git a/docs-manifest.json b/docs-manifest.json
index 06036a7e7..f416b0411 100644
--- a/docs-manifest.json
+++ b/docs-manifest.json
@@ -446,10 +446,10 @@
         "withURLCollectionState"
       ],
       "hashes": {
-        "typeSurface": "fe43108015be4a00",
-        "outline": "dc0b82256114191b",
+        "typeSurface": "79fb32871548dd96",
+        "outline": "871bd92ee8a9669f",
         "snapshot": null,
-        "outputMd": "3e8474e4d1437c91",
+        "outputMd": "01ed9bb2d78beef4",
         "examples": null
       }
     },
@@ -998,9 +998,9 @@
       "symbols": [],
       "hashes": {
         "typeSurface": null,
-        "outline": "68653902d2c9f861",
+        "outline": "87e010d622577e6e",
         "snapshot": null,
-        "outputMd": "916baa3cd2b9cbf1",
+        "outputMd": "e87e4247bcc61a99",
         "examples": "c0a2bd60e8a04474"
       }
     },
@@ -1169,7 +1169,7 @@
       "hashes": {
         "typeSurface": "429710973dfa912b",
         "outline": "721e8995f53f0e8f",
-        "snapshot": "0ceac9786fb4ce3c",
+        "snapshot": "ad715a55f78adebd",
         "outputMd": "ae287e2bb5abc1c6",
         "examples": "1ce89cec30045466"
       }
@@ -1693,7 +1693,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": "3e8474e4d1437c91",
+    "packages/core/skills/app-shell-patterns/references/components/data-table.md": "01ed9bb2d78beef4",
     "packages/core/skills/app-shell-patterns/references/components/date-picker.md": "f39002ad79625dc4",
     "packages/core/skills/app-shell-patterns/references/components/default-header.md": "375e55f4b12fa2be",
     "packages/core/skills/app-shell-patterns/references/components/default-sidebar.md": "3422388a0cc78571",
@@ -1754,9 +1754,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": "770b33ada6b9317f",
     "packages/core/skills/app-shell-patterns/references/patterns/interaction-toast.md": "f68bdab855730f48",
-    "packages/core/skills/app-shell-patterns/references/patterns/list-dense-scan.md": "916baa3cd2b9cbf1",
+    "packages/core/skills/app-shell-patterns/references/patterns/list-dense-scan.md": "e87e4247bcc61a99",
     "packages/core/skills/app-shell-patterns/references/pages/document-detail.md": "717ef4e7ae835aff",
     "packages/core/skills/app-shell-patterns/references/migrations.md": "013c3fef2303b096",
-    "packages/core/skills/app-shell-patterns/SKILL.md": "526decbfd2db6555"
+    "packages/core/skills/app-shell-patterns/SKILL.md": "597d6501b54e4256"
   }
 }
diff --git a/docs-src/components/data-table.docs.outline.md b/docs-src/components/data-table.docs.outline.md
index 8e4b23a06..e9b769387 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
@@ -376,6 +376,117 @@ 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 you can type into to search; shows the label         | the choice's `value`, or `null`                           |
+| `badge`                             | Dropdown whose choices are the same badges, searchable        | 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 like the rest of the table, spreadsheet-style — no input boxes. An editable column says so at rest with a pen after its title (in the default header; a custom `header` render draws its own). Hovering a cell, or editing it, shows a small icon at its right edge that says how it's edited: a pen on cells you type into (`text`, `number`, `money`), a chevron on dropdowns, a calendar on dates. The icon is only a cue: a click anywhere in the cell, edge to edge, starts editing. The cursor agrees — a text cursor over cells you type into, 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. Every cell of an editable column keeps the icon's space, so the value never runs under an icon and 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.                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `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 you can type into to filter the choices: 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
+
+- Rules are checked when the user tries to save — Enter, Tab, or leaving the cell — never while they type, so a half-typed value is never flagged. Nothing is blocked as it's typed; the rules judge the value on save.
+- Number text is read generously when it's checked: full-width digits, thousands separators and currency symbols are cleaned up, never silently rounded. A decimal comma such as `1,5` is reported as "Enter a number" rather than read as `15`.
+- A broken rule turns the cell red and shows its message in a tooltip. Enter and Tab stay in the cell until it's fixed; from then on the message follows the value as it's typed, clearing as soon as it's valid. Esc restores the previous value.
+- Leaving the cell another way — clicking elsewhere — keeps the invalid value on screen, outlined in orange, with its message on hover. It is never saved: `onCommit` doesn't run until the user comes back and fixes it, or presses Esc to undo it. A pick that `validate` rejects in a dropdown or calendar is kept the same way. A kept value survives the cell leaving the screen (paging away and back, a refetch) and counts as unsaved when leaving the page.
+- 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.                                     |
+| Typing (dropdown)   | Filter the choices. Enter picks the highlighted one; Tab takes it and moves on.                                                |
+| ↓                   | On a dropdown, open the list. Arrow keys move through the choices; Enter picks.                                                |
+| Enter / Space / ↓   | On a date cell, open the calendar. Arrow keys move through the days; Enter picks.                                              |
+
+Focusing a cell selects its value, so typing replaces it. While an IME is composing, Enter confirms the conversion rather than the cell. In a dropdown, a name typed in full is picked when the user leaves the cell, and text that matches nothing is dropped without changing the value. 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 a cell mid-edit (a value kept because it breaks a rule comes back with the rows).
+
+Leaving the page while something is unsaved — a cell mid-edit, a value kept because it breaks a rule, or an autosave still in flight — asks first ("Leave without saving?", with Stay / Leave anyway). An autosave in flight is waited for, and the page is left as soon as it succeeds, so the prompt only appears when it fails or a value can't be saved. Same-page navigations (search params) aren't held. Reloading or closing the tab shows the browser's own prompt. The prompt relies on AppShell's router; outside it, the table doesn't hold navigation.
+
+### 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.
+
 ## Selection actions
 
 Pass `selectionActions` to `useDataTable` and, while at least one row is selected, `DataTable.Footer` becomes a bulk-action bar: the selection count, your actions, and a **Clear** button, with the footer's own children (usually `DataTable.Pagination`) kept alongside. Providing the option also enables row selection, so `onSelectionChange` is optional. There is nothing new to compose in JSX — just keep `DataTable.Footer` in the tree.
@@ -485,15 +596,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 0e5115510..e401527f3 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 actions** — `selectionActions` on `useDataTable` turns `DataTable.Footer` into a bulk-action bar while rows are selected; see `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 5dcc4c8ff..d5d06eaa3 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. -->
@@ -370,6 +370,117 @@ 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 you can type into to search; shows the label         | the choice's `value`, or `null`                           |
+| `badge`                             | Dropdown whose choices are the same badges, searchable        | 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 like the rest of the table, spreadsheet-style — no input boxes. An editable column says so at rest with a pen after its title (in the default header; a custom `header` render draws its own). Hovering a cell, or editing it, shows a small icon at its right edge that says how it's edited: a pen on cells you type into (`text`, `number`, `money`), a chevron on dropdowns, a calendar on dates. The icon is only a cue: a click anywhere in the cell, edge to edge, starts editing. The cursor agrees — a text cursor over cells you type into, 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. Every cell of an editable column keeps the icon's space, so the value never runs under an icon and 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.                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `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 you can type into to filter the choices: 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
+
+- Rules are checked when the user tries to save — Enter, Tab, or leaving the cell — never while they type, so a half-typed value is never flagged. Nothing is blocked as it's typed; the rules judge the value on save.
+- Number text is read generously when it's checked: full-width digits, thousands separators and currency symbols are cleaned up, never silently rounded. A decimal comma such as `1,5` is reported as "Enter a number" rather than read as `15`.
+- A broken rule turns the cell red and shows its message in a tooltip. Enter and Tab stay in the cell until it's fixed; from then on the message follows the value as it's typed, clearing as soon as it's valid. Esc restores the previous value.
+- Leaving the cell another way — clicking elsewhere — keeps the invalid value on screen, outlined in orange, with its message on hover. It is never saved: `onCommit` doesn't run until the user comes back and fixes it, or presses Esc to undo it. A pick that `validate` rejects in a dropdown or calendar is kept the same way. A kept value survives the cell leaving the screen (paging away and back, a refetch) and counts as unsaved when leaving the page.
+- 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.                                     |
+| Typing (dropdown)   | Filter the choices. Enter picks the highlighted one; Tab takes it and moves on.                                                |
+| ↓                   | On a dropdown, open the list. Arrow keys move through the choices; Enter picks.                                                |
+| Enter / Space / ↓   | On a date cell, open the calendar. Arrow keys move through the days; Enter picks.                                              |
+
+Focusing a cell selects its value, so typing replaces it. While an IME is composing, Enter confirms the conversion rather than the cell. In a dropdown, a name typed in full is picked when the user leaves the cell, and text that matches nothing is dropped without changing the value. 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 a cell mid-edit (a value kept because it breaks a rule comes back with the rows).
+
+Leaving the page while something is unsaved — a cell mid-edit, a value kept because it breaks a rule, or an autosave still in flight — asks first ("Leave without saving?", with Stay / Leave anyway). An autosave in flight is waited for, and the page is left as soon as it succeeds, so the prompt only appears when it fails or a value can't be saved. Same-page navigations (search params) aren't held. Reloading or closing the tab shows the browser's own prompt. The prompt relies on AppShell's router; outside it, the table doesn't hold navigation.
+
+### 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.
+
 ## Selection actions
 
 Pass `selectionActions` to `useDataTable` and, while at least one row is selected, `DataTable.Footer` becomes a bulk-action bar: the selection count, your actions, and a **Clear** button, with the footer's own children (usually `DataTable.Pagination`) kept alongside. Providing the option also enables row selection, so `onSelectionChange` is optional. There is nothing new to compose in JSX — just keep `DataTable.Footer` in the tree.
@@ -479,15 +590,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 32ed8a134..8c67662ec 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 actions** — `selectionActions` on `useDataTable` turns `DataTable.Footer` into a bulk-action bar while rows are selected; see `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 000000000..bada5d044
--- /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 254079d41..e6a0ca537 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,34 @@ 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. Editable
+              columns have a pen after their title; hover a cell to see how it's edited (pen,
+              chevron or calendar), and click anywhere in it to edit. Rules are checked when you
+              leave the cell: a value that breaks one stays, outlined in orange, and is never saved
+              until you fix it or press Esc. <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> (type to search):{" "}
+              <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. Leave a wrong value behind and
+              click a sidebar link: you're asked before leaving.
+            </>
+          }
+        >
+          <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 2e3872057..5d98e1442 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; inset: 0; 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; inset: 0; 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; inset: 0; 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; inset: 0; 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; inset: 0; 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; inset: 0; 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 000000000..df0fb2ab5
--- /dev/null
+++ b/packages/core/src/components/data-table/cell-edit.test.ts
@@ -0,0 +1,273 @@
+import { describe, expect, it } from "vitest";
+import {
+  currencyFractionDigits,
+  evaluateNumberDraft,
+  isIsoDate,
+  optionLabel,
+  resolveBadgeOptions,
+  sameDate,
+  toCalendarDate,
+  toIsoDateTime,
+  toLocalDate,
+  toTimeText,
+  evaluateTextDraft,
+  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("typed text that isn't a number", () => {
+  it("is reported as not a number, not silently accepted", () => {
+    for (const text of ["e", "1e5", "+5", "0x1f", "12a", "1,5"]) {
+      expect(evaluateNumberDraft(normalizeNumberText(text), rules()).error).toEqual({
+        code: "number",
+      });
+    }
+  });
+});
+
+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("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("initializes and commits date-times in the configured timezone", () => {
+    const zone = "America/New_York";
+    const value = "2026-10-09T00:00:00Z";
+    expect(toCalendarDate(value, zone)?.toString()).toBe("2026-10-08");
+    expect(toTimeText(value, zone)).toBe("20:00");
+    expect(toCalendarDate("2026-10-09", zone)?.toString()).toBe("2026-10-09");
+    expect(toIsoDateTime(toCalendarDate("2026-10-08")!, "20:00", zone)).toBe(
+      "2026-10-09T00:00:00.000Z",
+    );
+    expect(sameDate(value, "2026-10-08", false, zone)).toBe(true);
+    expect(sameDate("2026-10-08T20:00", value, true, zone)).toBe(true);
+    expect(toIsoDateTime(toCalendarDate("2026-12-08")!, "20:00", zone)).toBe(
+      "2026-12-09T01:00:00.000Z",
+    );
+  });
+
+  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 000000000..de061f136
--- /dev/null
+++ b/packages/core/src/components/data-table/cell-edit.ts
@@ -0,0 +1,300 @@
+/**
+ * Pure helpers behind DataTable's inline cell editing: 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,
+  CalendarDateTime,
+  getLocalTimeZone,
+  parseDate,
+  toZoned,
+} from "@internationalized/date";
+import { localDateTimeParts, normalizeTemporalFilterValue } from "@/lib/temporal-filter-values";
+import type { SelectOption } from "@/types/collection";
+import type { BadgeCellOptions, DataTableFilterConfig } from "./types";
+
+/** Rules a `number` / `money` cell checks when the user tries to save. */
+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;
+
+// Thousands grouping with commas, e.g. "1,234,567.89".
+const GROUPED_NUMBER = /^-?\d{1,3}(?:,\d{3})+(?:\.\d*)?$/;
+
+/**
+ * Cleans number text before it's checked: 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, timeZone = getLocalTimeZone()): CalendarDate | null {
+  const date = normalizeTemporalFilterValue("date", raw, timeZone);
+  if (!date) return null;
+  try {
+    return parseDate(date);
+  } catch {
+    return null;
+  }
+}
+
+/** The zoned time of a raw date cell value as `"HH:mm"`; `""` when there is none. */
+export function toTimeText(raw: unknown, timeZone = getLocalTimeZone()): string {
+  if (isIsoDate(raw)) return toCalendarDate(raw, timeZone) ? "00:00" : "";
+  const datetime = normalizeTemporalFilterValue("datetime", raw, timeZone);
+  return datetime ? localDateTimeParts(datetime, timeZone).time : "";
+}
+
+/** A calendar day plus a zoned `"HH:mm"` as an ISO 8601 timestamp. */
+export function toIsoDateTime(
+  day: CalendarDate,
+  time: string,
+  timeZone = getLocalTimeZone(),
+): string {
+  const [hours = 0, minutes = 0] = time ? time.split(":").map(Number) : [];
+  return toZoned(new CalendarDateTime(day.year, day.month, day.day, hours, minutes), timeZone)
+    .toDate()
+    .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,
+  timeZone = getLocalTimeZone(),
+): boolean {
+  if (!withTime) {
+    const left = toCalendarDate(a, timeZone);
+    const right = toCalendarDate(b, timeZone);
+    return left && right ? left.compare(right) === 0 : left === right;
+  }
+  const asInstant = (raw: unknown) => {
+    const normalized = normalizeTemporalFilterValue(
+      "datetime",
+      isIsoDate(raw) ? `${raw}T00:00` : raw,
+      timeZone,
+    );
+    return normalized ? new Date(normalized) : null;
+  };
+  const left = asInstant(a);
+  const right = asInstant(b);
+  if (!left || !right) return left === right;
+  return Math.floor(left.getTime() / 60_000) === Math.floor(right.getTime() / 60_000);
+}
+
+/** 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 982056335..fd46f6656 100644
--- a/packages/core/src/components/data-table/cell-renderers.tsx
+++ b/packages/core/src/components/data-table/cell-renderers.tsx
@@ -2,6 +2,8 @@ import type { ReactNode } from "react";
 import { parseDate } from "@internationalized/date";
 import { Link } from "react-router";
 import { BadgeList, toValueArray } from "@/components/badge-list";
+import type { SelectOption } from "@/types/collection";
+import { currencyFractionDigits, optionLabel } from "./cell-edit";
 import { normalizeTemporalFilterValue } from "@/lib/temporal-filter-values";
 import type {
   BadgeCellOptions,
@@ -68,50 +70,106 @@ 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 createDateRenderer(
@@ -151,11 +209,23 @@ function createDateRenderer(
   };
 }
 
-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>>(
@@ -188,20 +258,43 @@ export function createTypedCellRenderer<TRow extends Record<string, unknown>>(
     const renderDate = createDateRenderer(col.typeOptions, timeZone);
     return (row) => renderDate(getCellValue(row, col));
   }
-  return (row) => {
-    const value = getCellValue(row, col);
-    switch (col.type) {
-      case "number":
-        return renderNumber(value, col.typeOptions);
-      case "money":
-        return renderMoney(value, row, col.typeOptions);
-      case "badge":
-        return renderBadge(value, col.typeOptions);
-      case "link":
-        return renderLink(value, row, col.typeOptions);
-      case "text":
-      default:
-        return renderText(value);
+  return (row) => 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; timeZone?: string },
+): ReactNode {
+  switch (col.type) {
+    case "number":
+      return renderNumber(value, col.typeOptions, col.edit?.maxDecimals);
+    case "money":
+      return renderMoney(value, row, col.typeOptions, col.edit?.maxDecimals);
+    case "date":
+      return createDateRenderer(
+        col.typeOptions,
+        options?.timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
+      )(value);
+    case "badge":
+      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 000000000..a726f5a96
--- /dev/null
+++ b/packages/core/src/components/data-table/data-table-editing.test.tsx
@@ -0,0 +1,1349 @@
+import { afterEach, describe, expect, expectTypeOf, it, vi } from "vitest";
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Link, MemoryRouter, createMemoryRouter } from "react-router";
+import { RouterProvider } from "react-router/dom";
+import { AppShellRouterContext } from "@/routing/router-context";
+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;
+}
+
+// Renders below a data router marked as AppShell's own, where leaving the page
+// can be blocked, next to a link away from it.
+function renderInAppRouter(ui: React.ReactElement) {
+  const user = userEvent.setup();
+  const router = createMemoryRouter([
+    {
+      path: "/",
+      element: (
+        <AppShellRouterContext.Provider value={true}>
+          {ui}
+          <Link to="/elsewhere">Elsewhere</Link>
+        </AppShellRouterContext.Provider>
+      ),
+    },
+    { path: "/elsewhere", element: <p>Somewhere else</p> },
+  ]);
+  render(<RouterProvider router={router} />, { wrapper: createAppShellWrapper("en") });
+  return user;
+}
+
+// Whether closing or reloading the tab right now would ask the user first.
+function wouldWarnOnUnload() {
+  const event = new Event("beforeunload", { cancelable: true });
+  window.dispatchEvent(event);
+  return event.defaultPrevented;
+}
+
+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("lets anything be typed, and judges it when the user tries to save", 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" });
+      // Nothing is blocked or flagged while typing…
+      await retype(user, received, "-3.5");
+      expect((received as HTMLInputElement).value).toBe("-3.5");
+      expect(received.getAttribute("aria-invalid")).toBeNull();
+      // …the rules speak up when the user tries to save.
+      await user.keyboard("{Enter}");
+      expect(errorText(received)).toBe("Enter a whole number. Press Esc to undo");
+      await user.keyboard("{Escape}");
+
+      const [usd, jpy] = screen.getAllByRole("textbox", { name: "Price" });
+      await retype(user, usd, "9.999{Enter}");
+      // USD allows two decimals; JPY has no minor unit.
+      expect(errorText(usd)).toBe("Use up to 2 decimal places. Press Esc to undo");
+      await user.keyboard("{Escape}");
+      await retype(user, jpy, "12.5{Enter}");
+      expect(errorText(jpy)).toBe("Enter a whole number. Press Esc to undo");
+    });
+
+    it("reads full-width digits and thousands separators when saving", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            column({
+              id: "price",
+              label: "Price",
+              type: "money",
+              typeOptions: { currency: (row) => row.currency },
+              edit: {
+                onCommit: (row, value) => {
+                  onCommit(row.id, value);
+                  update(row.id, { price: value ?? 0 });
+                },
+              },
+            }),
+          ]}
+        />,
+      );
+      const [usd, jpy] = screen.getAllByRole("textbox", { name: "Price" });
+      await user.click(usd);
+      await user.clear(usd);
+      await user.paste("1,234.50");
+      await user.keyboard("{Enter}");
+      expect(onCommit).toHaveBeenCalledWith("1", 1234.5);
+      await retype(user, jpy, "１５００{Enter}");
+      expect(onCommit).toHaveBeenCalledWith("2", 1500);
+    });
+
+    it("shows a broken rule only once the user tries to save, and holds 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")).toBeNull();
+      await user.keyboard("{Enter}");
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+      expect(errorText(input)).toBe("Must be 24 or less. Press Esc to undo");
+      expect(onCommit).not.toHaveBeenCalled();
+      expect(document.activeElement).toBe(input);
+      // Once shown, the message follows the draft and clears as soon as it's fixed.
+      await user.keyboard("{Backspace}");
+      expect(input.getAttribute("aria-invalid")).toBeNull();
+    });
+
+    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 when the user tries to save", 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)).toBeUndefined();
+      await user.keyboard("{Enter}");
+      expect(errorText(input)).toBe("Can't exceed ordered (24). Press Esc to undo");
+    });
+
+    it("keeps an invalid value, marked, when the user clicks away", 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();
+      // Still on screen, flagged orange, and never saved…
+      expect((input as HTMLInputElement).value).toBe("99");
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+      expect(input.className).toContain("astw:ring-status-attention");
+      expect(errorText(input)).toBe(
+        "Can't exceed ordered (24). Not saved. Click to fix it, or press Esc to undo.",
+      );
+      // …until the user comes back: red while they fix it, and Esc undoes it.
+      await user.click(input);
+      expect(input.className).toContain("astw:ring-destructive");
+      await user.keyboard("{Escape}");
+      expect((input as HTMLInputElement).value).toBe("12");
+      expect(input.getAttribute("aria-invalid")).toBeNull();
+    });
+
+    it("saves a kept value once the user fixes it", 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);
+      await retype(user, input, "20{Enter}");
+      expect(onCommit).toHaveBeenCalledWith("1", 20);
+      expect(input.getAttribute("aria-invalid")).toBeNull();
+      expect(input.className).not.toContain("astw:ring-status-attention");
+    });
+
+    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{Enter}");
+      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. Press Esc to undo");
+      // The rejected pick stays on screen, marked orange, once the user moves on.
+      await user.click(document.body);
+      expect(trigger.closest("td")?.textContent).toContain("Globex");
+      expect(trigger.className).toContain("astw:ring-status-attention");
+    });
+
+    it("filters the choices as the user types, and Enter picks the highlighted one", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onCommit, update)]}
+        />,
+      );
+      const [first, second] = screen.getAllByRole("combobox", { name: "Supplier" });
+      await user.click(first);
+      await user.clear(first);
+      await user.keyboard("glo");
+      const options = await screen.findAllByRole("option");
+      expect(options.map((option) => option.textContent)).toEqual(["Globex"]);
+      await user.keyboard("{Enter}");
+      expect(onCommit).toHaveBeenCalledWith("1", "globex");
+      // …and moves down the column, like any other cell.
+      await waitFor(() => expect(document.activeElement).toBe(second));
+    });
+
+    it("takes the highlighted match on Tab after typing", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onCommit, update)]}
+        />,
+      );
+      const [first] = screen.getAllByRole("combobox", { name: "Supplier" });
+      await user.click(first);
+      await user.clear(first);
+      await user.keyboard("glo");
+      await screen.findByRole("option", { name: "Globex" });
+      await user.keyboard("{Tab}");
+      expect(onCommit).toHaveBeenCalledWith("1", "globex");
+    });
+
+    it("picks a choice whose name is typed in full when the user leaves the cell", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onCommit, update)]}
+        />,
+      );
+      const [first] = screen.getAllByRole("combobox", { name: "Supplier" });
+      await user.click(first);
+      await user.clear(first);
+      await user.keyboard("GLOBEX");
+      await user.click(document.body);
+      expect(onCommit).toHaveBeenCalledWith("1", "globex");
+    });
+
+    it("says so when nothing matches, and leaves the value alone", async () => {
+      const onCommit = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onCommit, update)]}
+        />,
+      );
+      const [first] = screen.getAllByRole("combobox", { name: "Supplier" });
+      await user.click(first);
+      await user.clear(first);
+      await user.keyboard("zzz");
+      expect(await screen.findByText("No matches")).toBeTruthy();
+      await user.click(document.body);
+      expect(onCommit).not.toHaveBeenCalled();
+      expect(first.closest("td")?.textContent).toContain("Acme Corp");
+    });
+
+    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) => {} },
+    });
+  });
+
+  describe("icons", () => {
+    it("marks every editable cell with an icon for its editor", () => {
+      renderTable(
+        <Harness
+          rows={LINES.map((line) => ({ ...line, expected: "2026-10-01" }))}
+          columns={(update) => [
+            skuColumn,
+            receivedColumn(vi.fn(), update),
+            column({
+              id: "supplier",
+              label: "Supplier",
+              type: "text",
+              edit: { options: [{ value: "Acme", label: "Acme" }], onCommit: noop },
+            }),
+            column({ id: "expected", label: "Expected", type: "date", edit: { onCommit: noop } }),
+          ]}
+        />,
+      );
+      const cells = screen.getAllByRole("row")[1].querySelectorAll("td");
+      expect(cells[0].querySelector("svg")).toBeNull();
+      expect(cells[1].querySelector(".lucide-pencil")).not.toBeNull();
+      expect(cells[2].querySelector(".lucide-chevron-down")).not.toBeNull();
+      expect(cells[3].querySelector(".lucide-calendar-days")).not.toBeNull();
+    });
+
+    it("puts a pen after the title of every editable column", () => {
+      renderTable(<Harness columns={(update) => [skuColumn, receivedColumn(vi.fn(), update)]} />);
+      const [sku, received] = screen.getAllByRole("columnheader");
+      expect(sku.querySelector(".lucide-pencil")).toBeNull();
+      expect(received.querySelector(".lucide-pencil")).not.toBeNull();
+      expect(received.textContent).toBe("Received");
+    });
+
+    it("shows no icon on rows that can't be edited", () => {
+      renderTable(
+        <Harness
+          columns={(update) => [
+            receivedColumn(vi.fn(), update, { canEdit: (row) => row.id === "1" }),
+          ]}
+        />,
+      );
+      const [first, second] = screen.getAllByRole("row").slice(1);
+      expect(first.querySelector(".lucide-pencil")).not.toBeNull();
+      expect(second.querySelector(".lucide-pencil")).toBeNull();
+    });
+  });
+
+  describe("leaving the page", () => {
+    it("asks before leaving a value that can't be saved", async () => {
+      const user = renderInAppRouter(
+        <Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "99");
+      await user.click(screen.getByRole("link", { name: "Elsewhere" }));
+      expect(await screen.findByRole("dialog", { name: "Leave without saving?" })).toBeTruthy();
+      await user.click(screen.getByRole("button", { name: "Stay" }));
+      await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+      expect((input as HTMLInputElement).value).toBe("99");
+
+      await user.click(screen.getByRole("link", { name: "Elsewhere" }));
+      await user.click(await screen.findByRole("button", { name: "Leave anyway" }));
+      expect(await screen.findByText("Somewhere else")).toBeTruthy();
+    });
+
+    it("waits for an autosave in flight, then leaves without asking", async () => {
+      let finish = noop;
+      const user = renderInAppRouter(
+        <Harness
+          columns={() => [
+            column({
+              id: "received",
+              label: "Received",
+              type: "number",
+              edit: {
+                onCommit: () =>
+                  new Promise<void>((resolve) => {
+                    finish = () => resolve();
+                  }),
+              },
+            }),
+          ]}
+        />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "20");
+      await user.click(screen.getByRole("link", { name: "Elsewhere" }));
+      // Held while the save runs…
+      expect(screen.queryByText("Somewhere else")).toBeNull();
+      expect(screen.queryByRole("dialog")).toBeNull();
+      await act(async () => finish());
+      // …then on its way.
+      expect(await screen.findByText("Somewhere else")).toBeTruthy();
+    });
+
+    it("asks when an autosave in flight fails", async () => {
+      let fail = noop;
+      const user = renderInAppRouter(
+        <Harness
+          columns={() => [
+            column({
+              id: "received",
+              label: "Received",
+              type: "number",
+              edit: {
+                onCommit: () =>
+                  new Promise<void>((_resolve, reject) => {
+                    fail = () => reject(new Error("Server error"));
+                  }),
+              },
+            }),
+          ]}
+        />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "20");
+      await user.click(screen.getByRole("link", { name: "Elsewhere" }));
+      await act(async () => fail());
+      expect(await screen.findByRole("dialog", { name: "Leave without saving?" })).toBeTruthy();
+    });
+
+    it("leaves straight away when everything is saved", async () => {
+      const user = renderInAppRouter(
+        <Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "20");
+      await user.click(screen.getByRole("link", { name: "Elsewhere" }));
+      expect(await screen.findByText("Somewhere else")).toBeTruthy();
+    });
+
+    it("has the browser confirm closing the tab while something is unsaved", async () => {
+      const user = renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      expect(wouldWarnOnUnload()).toBe(false);
+      await retype(user, input, "99");
+      await user.click(document.body);
+      expect(wouldWarnOnUnload()).toBe(true);
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/data-table.test.tsx b/packages/core/src/components/data-table/data-table.test.tsx
index 8676fd268..9a96721a2 100644
--- a/packages/core/src/components/data-table/data-table.test.tsx
+++ b/packages/core/src/components/data-table/data-table.test.tsx
@@ -220,6 +220,40 @@ describe("DataTable", () => {
     expect(screen.getByText("Inactive")).toBeDefined();
   });
 
+  it("renders editable and read-only dates in the same AppShell timezone", () => {
+    stubBrowserTimeZone();
+    type Row = { id: string; value: string };
+    function Harness() {
+      const table = useDataTable<Row>({
+        columns: [
+          {
+            id: "value",
+            label: "Date",
+            type: "date",
+            typeOptions: { locale: "en-US" },
+            edit: { canEdit: (row) => row.id === "1", onCommit: vi.fn() },
+          },
+        ],
+        data: {
+          rows: [
+            { id: "1", value: "2026-10-09T00:00:00Z" },
+            { id: "2", value: "2026-10-09T00:00:00Z" },
+            { id: "3", value: "2026-10-09" },
+          ],
+        },
+      });
+      return (
+        <DataTable.Root value={table}>
+          <DataTable.Table />
+        </DataTable.Root>
+      );
+    }
+    render(<Harness />, { wrapper: createTimeZoneWrapper("America/New_York") });
+    expect(screen.getAllByText("Oct 8, 2026")).toHaveLength(2);
+    expect(screen.getByRole("button", { name: "Date, Oct 8, 2026" })).toBeDefined();
+    expect(screen.getByText("Oct 9, 2026")).toBeDefined();
+  });
+
   it("reuses date formatters on row updates and refreshes them for column or timezone changes", () => {
     const DateTimeFormat = Intl.DateTimeFormat;
     const formatterSpy = vi
diff --git a/packages/core/src/components/data-table/data-table.tsx b/packages/core/src/components/data-table/data-table.tsx
index c6755d4b9..7bcfea737 100644
--- a/packages/core/src/components/data-table/data-table.tsx
+++ b/packages/core/src/components/data-table/data-table.tsx
@@ -12,7 +12,7 @@ import {
   type ReactNode,
 } from "react";
 import { ContextMenu } from "@base-ui/react/context-menu";
-import { ChevronRight, Ellipsis } from "lucide-react";
+import { ChevronRight, Ellipsis, Pencil } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useTimeZone } from "@/contexts/appshell-context";
 import {
@@ -37,6 +37,10 @@ import { useDataTableT } from "./i18n";
 import { getCellValue, createTypedCellRenderer } from "./cell-renderers";
 import { isTemporalFilterType, normalizeTemporalFilterValue } from "@/lib/temporal-filter-values";
 import { useCellContextMenu, type CellContextMenuState } from "./use-cell-context-menu";
+import { useCellEditNavigation } from "./use-cell-edit-navigation";
+import { useCellEditStore, type CellEditStore } from "./use-cell-edit-store";
+import { CellEditLeaveGuard } from "./edit-leave-guard";
+import { DataTableEditableCell, ICON_SPACE_CLASS_NAME, isEditableColumn } from "./editable-cell";
 import {
   DataTableToolbar,
   DataTableFilters,
@@ -1027,9 +1031,18 @@ function DataTableHeaders({ className: headerClassName }: { className?: string }
             : { label, sortable: false };
 
           const align = resolveAlign(col);
+          // An editable column says so at rest: a pen after its title.
+          const title = isEditableColumn(col) ? (
+            <span className="astw:inline-flex astw:items-center astw:gap-1.5">
+              {label}
+              <Pencil aria-hidden="true" className="astw:size-3 astw:shrink-0 astw:opacity-50" />
+            </span>
+          ) : (
+            label
+          );
           const content = col.header
             ? col.header(headerContext)
-            : renderDefaultHeader(label, headerContext, align, {
+            : renderDefaultHeader(title, headerContext, align, {
                 bleedLeft: !hasSelection && !hasExpand && index === 0,
                 bleedRight: !hasRowActions && index === ordered.length - 1,
               });
@@ -1142,9 +1155,22 @@ function DataTableBody({ className }: { className?: string }) {
     "data-slot": "data-table-body",
     className,
   };
+  // What the body hasn't saved yet. It lives here, above the loading / empty
+  // states, so a value left in a cell survives a refetch.
+  const editStore = useCellEditStore();
+  const editGuard = allColumns?.some(isEditableColumn) ? (
+    <CellEditLeaveGuard store={editStore} />
+  ) : null;
+  // The guard keeps its place in every state, so it isn't remounted.
+  const withEditGuard = (body: ReactNode) => (
+    <>
+      {editGuard}
+      {body}
+    </>
+  );
 
   if (loading) {
-    return (
+    return withEditGuard(
       <Table.Body {...tableBodyProps}>
         <DataTableLoaderRows
           rowCount={rowCount}
@@ -1153,33 +1179,33 @@ function DataTableBody({ className }: { className?: string }) {
           hasExpand={hasExpand}
           hasRowActions={hasRowActions}
         />
-      </Table.Body>
+      </Table.Body>,
     );
   }
 
   if (error) {
-    return (
+    return withEditGuard(
       <Table.Body {...tableBodyProps}>
         <DataTableStatusRow totalColSpan={totalColSpan} state="error">
           <span className="astw:text-destructive">
             {t("errorPrefix")} {error.message}
           </span>
         </DataTableStatusRow>
-      </Table.Body>
+      </Table.Body>,
     );
   }
 
   if (!rows || rows.length === 0) {
-    return (
+    return withEditGuard(
       <Table.Body {...tableBodyProps}>
         <DataTableStatusRow totalColSpan={totalColSpan} state="empty">
           <span className="astw:text-muted-foreground">{t("noData")}</span>
         </DataTableStatusRow>
-      </Table.Body>
+      </Table.Body>,
     );
   }
 
-  return (
+  return withEditGuard(
     <Table.Body {...tableBodyProps}>
       <DataTableRows
         rows={rows}
@@ -1194,8 +1220,9 @@ function DataTableBody({ className }: { className?: string }) {
         rowExpansion={rowExpansion}
         isRowExpanded={isRowExpanded}
         toggleRowExpansion={toggleRowExpansion}
+        editStore={editStore}
       />
-    </Table.Body>
+    </Table.Body>,
   );
 }
 DataTableBody.displayName = "DataTable.Body";
@@ -1218,6 +1245,8 @@ interface DataTableRowsProps<TRow extends Record<string, unknown>> {
   /** Optional — `DataTableContextValue` may be hand-constructed without it. */
   isRowExpanded?: (row: TRow) => boolean;
   toggleRowExpansion?: (row: TRow) => void;
+  /** Unsaved edits of this body, shared by its editable cells. */
+  editStore: CellEditStore;
 }
 
 /** @internal */
@@ -1234,6 +1263,7 @@ function DataTableRows<TRow extends Record<string, unknown>>({
   rowExpansion,
   isRowExpanded,
   toggleRowExpansion,
+  editStore,
 }: DataTableRowsProps<TRow>) {
   const t = useDataTableT();
   const baseId = useId();
@@ -1257,16 +1287,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);
@@ -1343,7 +1385,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) : cellRenderers.get(col)?.(row);
+              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) : cellRenderers.get(col)?.(row);
 
               const { style: cellStyle, className: cellClassName } = pinCellProps(
                 placements.get(col),
@@ -1361,11 +1419,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 an editable column keeps the icon's space
+              // like its editable neighbours, so the column's width never shifts.
+              const iconSpace = editableColumn;
+              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;
 
@@ -1392,9 +1462,29 @@ 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}
+                    store={editStore}
+                    cellProps={cellProps}
+                  />
+                );
+              }
+
               const cellElement = <Table.Cell {...cellProps} />;
 
               if (tooltipLabel !== undefined) {
diff --git a/packages/core/src/components/data-table/edit-leave-guard.tsx b/packages/core/src/components/data-table/edit-leave-guard.tsx
new file mode 100644
index 000000000..5b6cd2a23
--- /dev/null
+++ b/packages/core/src/components/data-table/edit-leave-guard.tsx
@@ -0,0 +1,113 @@
+import { useEffect, useRef, useState } from "react";
+import { useBlocker } from "react-router";
+import { Button } from "@/components/button";
+import { Dialog } from "@/components/dialog";
+import { useInAppShellRouter } from "@/routing/router-context";
+import { useDataTableT } from "./i18n";
+import { useCellEditStatus, type CellEditStore } from "./use-cell-edit-store";
+
+// Reloading or closing the tab gets the browser's own prompt.
+function warnBeforeUnload(event: BeforeUnloadEvent) {
+  event.preventDefault();
+  // Older browsers only show their prompt when a return value is set.
+  event.returnValue = "";
+}
+
+/**
+ * Warns before the user leaves a page whose table has unsaved edits: a cell
+ * mid-edit, a value left in a cell that breaks a rule, or an autosave still in
+ * flight. A save in flight is waited for, and the page is left as soon as it
+ * succeeds, so the prompt only appears when something can't be saved.
+ *
+ * @internal
+ */
+export function CellEditLeaveGuard({ store }: { store: CellEditStore }) {
+  const status = useCellEditStatus(store);
+  const unsaved = status.editing + status.kept + status.saving > 0;
+  const inRouter = useInAppShellRouter();
+  // While a blocked navigation is being handled, the blocker stays mounted even
+  // after the last unsaved change settles, so it can still let the user leave.
+  const [handling, setHandling] = useState(false);
+
+  useEffect(() => {
+    if (!unsaved) return;
+    window.addEventListener("beforeunload", warnBeforeUnload);
+    return () => window.removeEventListener("beforeunload", warnBeforeUnload);
+  }, [unsaved]);
+
+  // A router supports one blocker at a time, so this one exists only while
+  // there's something to protect.
+  if (!inRouter || !(unsaved || handling)) return null;
+  return <LeaveBlocker store={store} onHandlingChange={setHandling} />;
+}
+
+function LeaveBlocker({
+  store,
+  onHandlingChange,
+}: {
+  store: CellEditStore;
+  onHandlingChange: (handling: boolean) => void;
+}) {
+  const t = useDataTableT();
+  // Same-page navigations (search params, a hash) aren't leaving the page.
+  const blocker = useBlocker(
+    ({ currentLocation, nextLocation }) =>
+      store.hasUnsaved() && currentLocation.pathname !== nextLocation.pathname,
+  );
+  const blockerRef = useRef(blocker);
+  blockerRef.current = blocker;
+  const [prompting, setPrompting] = useState(false);
+
+  useEffect(() => {
+    if (blocker.state !== "blocked") return;
+    onHandlingChange(true);
+    const { editing, kept } = store.getStatus();
+    if (editing + kept > 0) {
+      setPrompting(true);
+      return;
+    }
+    // Only autosaves in flight: leave as soon as they've all succeeded.
+    let cancelled = false;
+    void store.settle().then((saved) => {
+      if (cancelled) return;
+      if (saved && !store.hasUnsaved()) {
+        onHandlingChange(false);
+        blockerRef.current.proceed?.();
+      } else {
+        setPrompting(true);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [blocker.state, store, onHandlingChange]);
+
+  const finish = (leave: boolean) => {
+    setPrompting(false);
+    onHandlingChange(false);
+    if (leave) blockerRef.current.proceed?.();
+    else blockerRef.current.reset?.();
+  };
+
+  return (
+    <Dialog.Root
+      open={prompting}
+      onOpenChange={(open) => {
+        if (!open) finish(false);
+      }}
+    >
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>{t("editLeaveTitle")}</Dialog.Title>
+          <Dialog.Description>{t("editLeaveDescription")}</Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Footer>
+          <Button variant="outline" onClick={() => finish(true)}>
+            {t("editLeaveConfirm")}
+          </Button>
+          <Button onClick={() => finish(false)}>{t("editLeaveStay")}</Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}
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 000000000..c7575f387
--- /dev/null
+++ b/packages/core/src/components/data-table/editable-cell.tsx
@@ -0,0 +1,1159 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ComponentProps,
+  type CompositionEvent,
+  type FocusEvent,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+  type TouchEvent,
+} from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { Popover } from "@base-ui/react/popover";
+import { parseDate, today, type CalendarDate } from "@internationalized/date";
+import { CalendarDays, ChevronDown, Pencil } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTimeZone } from "@/contexts/appshell-context";
+import { BadgeList } from "@/components/badge-list";
+import { Button } from "@/components/button";
+import { Calendar } from "@/components/calendar";
+import { ComboboxParts } from "@/components/combobox";
+import { Input } from "@/components/input";
+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,
+  isIsoDate,
+  isPromiseLike,
+  normalizeNumberText,
+  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 { cellEditId, type CellEditStore, type KeptDraft } from "./use-cell-edit-store";
+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;
+}
+
+/**
+ * Room for the icon every editable cell shows at its right edge (a pen, a
+ * chevron or a calendar; 14px 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: 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",
+);
+
+// A broken rule in the cell being edited: red, with the message in a tooltip.
+const CELL_ERROR_CLASS_NAME =
+  "astw:ring-2 astw:ring-inset astw:ring-destructive astw:focus:ring-destructive astw:focus-visible:ring-destructive";
+
+// A value left in a cell that breaks a rule: kept, marked orange, never saved.
+const CELL_KEPT_CLASS_NAME = "astw:ring-2 astw:ring-inset astw:ring-status-attention";
+
+const ruleClassName = (message: string | undefined, focused: boolean) => {
+  if (message === undefined) return undefined;
+  return focused ? CELL_ERROR_CLASS_NAME : CELL_KEPT_CLASS_NAME;
+};
+
+// Text, number and dropdown cells are typed into: the whole cell shows a text
+// cursor, and the text stops before the cell's icon.
+const INPUT_CLASS_NAME = cn(
+  OVERLAY_CLASS_NAME,
+  CELL_FOCUS_CLASS_NAME,
+  "astw:text-sm astw:cursor-text astw:pr-7 astw:[td:last-child>&]:pr-11",
+);
+
+// Date cells: a transparent button over the cell's own display, with a pointer.
+const TRIGGER_CLASS_NAME = cn(
+  OVERLAY_CLASS_NAME,
+  CELL_FOCUS_CLASS_NAME,
+  "astw:cursor-pointer",
+  "astw:data-popup-open:ring-2 astw:data-popup-open:ring-inset astw:data-popup-open:ring-primary",
+);
+
+// The icon that says how a cell is edited: shown while the cell is hovered or
+// being edited (the column header's pen says it's editable at rest).
+// Decoration only: a click anywhere in the cell goes to the editor underneath.
+const CELL_ICON_CLASS_NAME = cn(
+  "astw:pointer-events-none astw:absolute astw:inset-y-0 astw:right-2 astw:flex astw:items-center astw:[td:last-child>&]:right-6",
+  "astw:text-muted-foreground astw:opacity-0 astw:transition-opacity",
+  "astw:group-hover/cell:opacity-30 astw:group-focus-within/cell:opacity-30",
+  "astw:[&_svg]:size-3.5",
+);
+
+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>,
+  store: CellEditStore,
+) {
+  const { value: timeZone } = useTimeZone();
+  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 });
+    // Counted as unsaved until it settles, so leaving the page waits for it.
+    store.trackSave(returned);
+    // 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, timeZone });
+  else if (col.render) display = col.render(row);
+  else display = renderTypedValue(row, col, current, { linkAsText: true, timeZone });
+
+  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 `Combobox.Input` 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,
+  icon,
+  errorId,
+  description,
+  children,
+}: {
+  cellProps: ComponentProps<typeof Table.Cell>;
+  display: ReactNode;
+  truncate?: boolean;
+  /** Typed-into cells hide the display while the input shows the text. */
+  hideDisplay?: "focused" | "forced-colors";
+  /** Shown at the cell's right edge at all times: what kind of editor this is. */
+  icon: ReactNode;
+  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 astw:group/cell")}
+      // Editing a cell must never fire `onClickRow`.
+      onClick={(event) => event.stopPropagation()}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "astw:block",
+          ICON_SPACE_CLASS_NAME,
+          truncate && "astw:truncate",
+          // 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}
+      <span aria-hidden="true" className={CELL_ICON_CLASS_NAME}>
+        {icon}
+      </span>
+      {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,
+  };
+}
+
+// The on-screen keyboard a number cell asks for. It's a hint, not a filter:
+// anything can be typed, and the rules judge it on save. 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;
+  /** What the table hasn't saved yet: kept values, cells mid-edit, saves in flight. */
+  store: CellEditStore;
+  /** `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 (or while a
+ * value the user left breaks a rule), and hands a 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`, are dropdowns you can
+ *   type into to search.
+ * - `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,
+  store,
+  cellProps,
+}: DataTableEditableCellProps<TRow>) {
+  const t = useDataTableT();
+  const errorId = useId();
+  const cellId = cellEditId(rowKey, colKey);
+  const edit = col.edit;
+  const validate = edit?.validate as CellValidate<TRow>;
+  const { current, display, save } = useCellCommit(row, col, store);
+  const register = useNavigationRef<HTMLInputElement>(navigation, rowKey, colKey);
+
+  // A value left behind that breaks a rule comes back with the cell, e.g. after
+  // paging away and back.
+  const [restored] = useState(() => store.getKept(cellId));
+  const [draft, setDraftState] = useState<string | null>(restored ? String(restored.value) : 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(draft);
+  const setDraft = (next: string | null) => {
+    draftRef.current = next;
+    setDraftState(next);
+  };
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  // Errors wait until the user tries to save (Enter, Tab or leaving the cell).
+  // After that they follow the draft as it's typed, clearing once it's fixed.
+  const [showErrors, setShowErrors] = useState(restored !== undefined);
+  // The message of a value left in the cell, shown while the user is elsewhere.
+  const [keptMessage, setKeptMessage] = useState(restored?.message);
+  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 dirty = draft !== null && draft !== baselineText;
+
+  // A cell mid-edit counts as unsaved, so leaving the page asks first.
+  useEffect(() => {
+    store.setEditing(cellId, focused && dirty);
+  }, [store, cellId, focused, dirty]);
+  useEffect(() => () => store.setEditing(cellId, false), [store, cellId]);
+
+  const evaluate = (value: string): DraftEvaluation<unknown> => {
+    const check = (parsed: unknown) => validate?.(parsed, row);
+    return rules
+      ? evaluateNumberDraft(normalizeNumberText(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 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 evaluation = draft === null ? null : evaluate(draft);
+  const error =
+    draft !== null && evaluation && !isUnchanged(draft, evaluation) ? evaluation.error : null;
+  const liveMessage = error && showErrors ? describe(error) : undefined;
+  const message = focused ? liveMessage : keptMessage;
+  const kept = !focused && keptMessage !== undefined;
+
+  const revert = () => {
+    setDraft(null);
+    setShowErrors(false);
+    setKeptMessage(undefined);
+    store.setKept(cellId, undefined);
+  };
+
+  // Commits the draft if it changed and passes every rule. Returns the message
+  // of the rule that blocks the save, or `null` when focus may leave the cell.
+  const commitDraft = (): string | null => {
+    const draftText = draftRef.current;
+    if (draftText === null) return null;
+    const result = evaluate(draftText);
+    if (isUnchanged(draftText, result)) {
+      revert();
+      return null;
+    }
+    if (result.error) {
+      setShowErrors(true);
+      return describe(result.error);
+    }
+    revert();
+    save(result.value);
+    return null;
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setDraft(event.target.value);
+  };
+
+  // Full-width digits typed through an IME read back as plain digits.
+  const handleCompositionEnd = (event: CompositionEvent<HTMLInputElement>) => {
+    composingRef.current = false;
+    if (rules) setDraft(normalizeNumberText(event.currentTarget.value));
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    // 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() === null) navigation.move(from, event.shiftKey ? "up" : "down");
+        return;
+      case "Tab":
+        if (commitDraft() !== null) {
+          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 || (!dirty && keptMessage === undefined)) 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. A value that breaks a rule is kept —
+  // marked, with its message — instead of being quietly thrown away.
+  const handleBlur = () => {
+    setFocused(false);
+    const blocked = commitDraft();
+    if (blocked === null) return;
+    setKeptMessage(blocked);
+    store.setKept(cellId, { value: draftRef.current, message: blocked });
+  };
+
+  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();
+  };
+
+  const hint = focused ? t("editRevertHint") : t("editKeptHint");
+
+  return (
+    <EditableCellFrame
+      cellProps={cellProps}
+      display={display}
+      truncate={col.truncate}
+      hideDisplay={focused || kept ? "focused" : "forced-colors"}
+      icon={<Pencil />}
+      errorId={errorId}
+      description={message === undefined ? undefined : `${message}. ${hint}`}
+    >
+      <Tooltip.Root open={message !== undefined && (focused || hovered)}>
+        <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 && !kept && "astw:text-transparent",
+                rules && "astw:tabular-nums",
+                align === "right" && "astw:text-right",
+                ruleClassName(message, focused),
+              )}
+              style={focused ? { WebkitTouchCallout: "default" } : undefined}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onCompositionStart={() => {
+                composingRef.current = true;
+              }}
+              onCompositionEnd={handleCompositionEnd}
+              onMouseDown={handleMouseDown}
+              onMouseUp={handleMouseUp}
+              onPointerEnter={() => setHovered(true)}
+              onPointerLeave={() => setHovered(false)}
+              onContextMenu={stopWhileFocused}
+              onTouchStart={stopWhileFocused}
+            />
+          }
+        />
+        <Tooltip.Content>
+          {message}
+          <span className="astw:block astw:opacity-70">{hint}</span>
+        </Tooltip.Content>
+      </Tooltip.Root>
+    </EditableCellFrame>
+  );
+}
+
+// ── Shared by the dropdown and calendar editors ─────────────────────────────
+
+/**
+ * Validates and commits a picked value. A pick the consumer's `validate`
+ * rejects is kept on screen, marked, with its message — like a typed value
+ * that breaks a rule — until the user picks again or presses Esc. Picking the
+ * current value is a no-op (and drops a rejected pick).
+ */
+function usePickCommit<TRow extends Record<string, unknown>>(
+  row: TRow,
+  col: EditableColumn<TRow>,
+  save: (value: unknown) => void,
+  isSame: (next: string | null) => boolean,
+  store: CellEditStore,
+  cellId: string,
+) {
+  const [rejected, setRejected] = useState<KeptDraft | undefined>(() => store.getKept(cellId));
+  const clear = () => {
+    setRejected(undefined);
+    store.setKept(cellId, undefined);
+  };
+  // Returns whether the pick went through.
+  const commit = (next: string | null): boolean => {
+    if (isSame(next)) {
+      clear();
+      return true;
+    }
+    if (next === null && col.edit?.required) return false;
+    const problem = (col.edit?.validate as CellValidate<TRow>)?.(next, row);
+    if (problem) {
+      const kept = { value: next, message: problem };
+      setRejected(kept);
+      store.setKept(cellId, kept);
+      return false;
+    }
+    clear();
+    save(next);
+    return true;
+  };
+  return { rejected, clear, commit };
+}
+
+// Tab / Shift+Tab from a closed 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 ────────────────────────────
+
+/** One dropdown choice; `value: null` is "None". */
+interface Choice {
+  value: string | null;
+  label: string;
+}
+
+// Case-, width- and accent-insensitive enough for searching labels: full-width
+// letters and half-width katakana match their usual forms.
+const searchable = (text: string) => text.normalize("NFKC").toLocaleLowerCase().trim();
+
+const matchesQuery = (label: string, query: string) =>
+  searchable(label).includes(searchable(query));
+
+const isChoiceEqual = (a: Choice, b: Choice) => a.value === b.value;
+
+const choiceLabel = (choice: Choice) => choice.label;
+
+function ChoiceEditCell<TRow extends Record<string, unknown>>({
+  row,
+  col,
+  rowKey,
+  colKey,
+  label,
+  align,
+  navigation,
+  store,
+  cellProps,
+}: DataTableEditableCellProps<TRow, ChoiceColumn<TRow>>) {
+  const t = useDataTableT();
+  const errorId = useId();
+  const cellId = cellEditId(rowKey, colKey);
+  const { current, display, save } = useCellCommit(row, col, store);
+  const register = useNavigationRef<HTMLInputElement>(navigation, rowKey, colKey);
+  const value = toTextValue(current);
+  const { rejected, clear, commit } = usePickCommit(
+    row,
+    col,
+    save,
+    (next) => next === value,
+    store,
+    cellId,
+  );
+  const required = col.edit?.required === true;
+  const noneLabel = t("editNone");
+  const choices = columnChoices(col);
+  // Keyed on content: columns are often rebuilt every render, and a new list
+  // would reset the combobox's highlight mid-search.
+  const choicesKey = (choices ?? []).map((c) => `${c.value}\u0000${c.label}`).join("\u0001");
+  const items = useMemo<Choice[]>(
+    () => [
+      ...(required ? [] : [{ value: null, label: noneLabel }]),
+      ...(choices ?? []).map((c) => ({ value: c.value, label: String(c.label) })),
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `choicesKey` stands for `choices`.
+    [choicesKey, required, noneLabel],
+  );
+
+  const shown = rejected ? (rejected.value as string | null) : value;
+  const selected = items.find((item) => item.value === shown) ?? null;
+  const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  // What the user has typed to search; `null` while the input just shows the
+  // current choice (and the list shows every choice).
+  const [query, setQueryState] = useState<string | null>(null);
+  // Read by handlers that run before the next render: closing the list on an
+  // outside press happens before the input's blur.
+  const queryRef = useRef<string | null>(null);
+  const setQuery = (next: string | null) => {
+    queryRef.current = next;
+    setQueryState(next);
+  };
+  // The search the list is filtered by. It outlives the input's text until the
+  // list has finished closing, so a closing list doesn't flash every choice.
+  const [listQuery, setListQuery] = useState<string | null>(null);
+  const highlightedRef = useRef<Choice | undefined>(undefined);
+  const selectOnMouseUpRef = useRef(false);
+  const from = { rowKey, colKey };
+
+  const filtered = listQuery ? items.filter((item) => matchesQuery(item.label, listQuery)) : items;
+  const message = rejected?.message;
+  const cellDisplay = rejected
+    ? renderTypedValue(row, col, rejected.value, { linkAsText: true })
+    : display;
+
+  const pick = (item: Choice | null): boolean => {
+    setQuery(null);
+    return commit(item?.value ?? null);
+  };
+
+  // A name typed in full counts as picking it when the user moves on.
+  const pickTypedMatch = () => {
+    const typed = queryRef.current;
+    if (!typed) return;
+    const exact = items.find((item) => searchable(item.label) === searchable(typed));
+    if (exact) pick(exact);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+    switch (event.key) {
+      case "Enter":
+        // Base UI picks the highlighted choice (see `onValueChange`).
+        if (open && highlightedRef.current) return;
+        event.preventDefault();
+        setOpen(false);
+        setQuery(null);
+        if (!rejected) navigation.move(from, event.shiftKey ? "up" : "down");
+        return;
+      case "Tab": {
+        // Typing a few letters and pressing Tab takes the highlighted match.
+        const match = open && query ? highlightedRef.current : undefined;
+        setOpen(false);
+        setQuery(null);
+        if ((match && !pick(match)) || (!match && rejected)) {
+          event.preventDefault();
+          return;
+        }
+        if (navigation.move(from, event.shiftKey ? "prev" : "next")) event.preventDefault();
+        return;
+      }
+      case "Escape":
+        // An open list closes first (Base UI); a second Esc drops a rejected pick.
+        if (open || !rejected) return;
+        event.preventDefault();
+        event.stopPropagation();
+        clear();
+        return;
+    }
+  };
+
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+    setFocused(true);
+    setQuery(null);
+    setListQuery(null);
+    event.currentTarget.select();
+  };
+
+  const handleBlur = () => {
+    setFocused(false);
+    pickTypedMatch();
+    setQuery(null);
+    setOpen(false);
+  };
+
+  const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {
+    if (focused) return;
+    if (event.button === 2) {
+      event.preventDefault();
+      return;
+    }
+    selectOnMouseUpRef.current = true;
+  };
+
+  const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {
+    if (!selectOnMouseUpRef.current) return;
+    selectOnMouseUpRef.current = false;
+    event.preventDefault();
+  };
+
+  const renderChoice = (item: Choice) => {
+    if (item.value === null)
+      return <span className="astw:text-muted-foreground">{item.label}</span>;
+    if (col.type !== "badge") return item.label;
+    return (
+      <BadgeList value={item.value} options={col.typeOptions} resolveLabel={() => item.label} />
+    );
+  };
+
+  const hint = focused ? t("editRevertHint") : t("editKeptHint");
+
+  return (
+    <EditableCellFrame
+      cellProps={cellProps}
+      display={cellDisplay}
+      truncate={col.truncate}
+      hideDisplay={focused ? "focused" : "forced-colors"}
+      icon={<ChevronDown />}
+      errorId={errorId}
+      description={message === undefined ? undefined : `${message}. ${hint}`}
+    >
+      <BaseCombobox.Root<Choice>
+        items={items}
+        filteredItems={filtered}
+        value={selected}
+        onValueChange={(item, details) => {
+          // Only an explicit pick (click, or Enter on a highlighted choice)
+          // changes the value; clearing the search text doesn't.
+          if (details.reason !== "item-press") return;
+          const picked = pick(item);
+          setOpen(false);
+          // Enter picks and moves down the column, like every other cell.
+          const { event } = details;
+          if (picked && event instanceof KeyboardEvent && event.key === "Enter") {
+            const direction = event.shiftKey ? "up" : "down";
+            requestAnimationFrame(() => navigation.move(from, direction));
+          }
+        }}
+        inputValue={query ?? selected?.label ?? ""}
+        onInputValueChange={(next, details) => {
+          if (details.reason === "input-change" || details.reason === "input-clear") {
+            setQuery(next);
+            setListQuery(next);
+          }
+        }}
+        open={open}
+        onOpenChange={(next, details) => {
+          setOpen(next);
+          if (next) {
+            // Opened by a click or arrow key rather than by typing: every choice.
+            if (details.reason !== "input-change") setListQuery(null);
+            return;
+          }
+          // Esc abandons the search, and a clicked choice was already picked.
+          if (details.reason !== "escape-key" && details.reason !== "item-press") {
+            pickTypedMatch();
+          }
+          setQuery(null);
+        }}
+        onOpenChangeComplete={(isOpen) => {
+          if (!isOpen) setListQuery(null);
+        }}
+        onItemHighlighted={(item) => {
+          highlightedRef.current = item ?? undefined;
+        }}
+        autoHighlight
+        itemToStringLabel={choiceLabel}
+        isItemEqualToValue={isChoiceEqual}
+      >
+        <Tooltip.Root open={message !== undefined && (focused || hovered) && !open}>
+          <Tooltip.Trigger
+            render={
+              <ComboboxParts.Input
+                ref={register}
+                aria-label={label}
+                aria-invalid={message !== undefined ? true : undefined}
+                aria-describedby={message !== undefined ? errorId : undefined}
+                autoComplete="off"
+                enterKeyHint="next"
+                className={cn(
+                  INPUT_CLASS_NAME,
+                  // A dropdown at rest: a pointer. Once in it, a caret to search.
+                  !focused && "astw:text-transparent astw:cursor-pointer",
+                  align === "right" && "astw:text-right",
+                  ruleClassName(message, focused),
+                )}
+                onKeyDown={handleKeyDown}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                onMouseDown={handleMouseDown}
+                onMouseUp={handleMouseUp}
+                onPointerEnter={() => setHovered(true)}
+                onPointerLeave={() => setHovered(false)}
+              />
+            }
+          />
+          <Tooltip.Content>
+            {message}
+            <span className="astw:block astw:opacity-70">{hint}</span>
+          </Tooltip.Content>
+        </Tooltip.Root>
+        {/* At least as wide as the cell, and wide enough that choices don't wrap. */}
+        <ComboboxParts.Content className="astw:w-max astw:min-w-(--anchor-width) astw:max-w-80">
+          <ComboboxParts.Empty>{t("editNoMatches")}</ComboboxParts.Empty>
+          <ComboboxParts.List>
+            {(item: Choice) => (
+              <ComboboxParts.Item key={item.value ?? "\u0000none"} value={item}>
+                {renderChoice(item)}
+              </ComboboxParts.Item>
+            )}
+          </ComboboxParts.List>
+        </ComboboxParts.Content>
+      </BaseCombobox.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,
+  timeZone: string,
+) {
+  const now = today(timeZone);
+  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,
+  store,
+  cellProps,
+}: DataTableEditableCellProps<TRow, DateColumn<TRow>>) {
+  const t = useDataTableT();
+  const { value: timeZone } = useTimeZone();
+  const errorId = useId();
+  const cellId = cellEditId(rowKey, colKey);
+  const withTime = col.typeOptions?.dateFormat === "datetime";
+  const { current, display, save } = useCellCommit(row, col, store);
+  const register = useNavigationRef<HTMLButtonElement>(navigation, rowKey, colKey);
+  const { rejected, clear, commit } = usePickCommit(
+    row,
+    col,
+    save,
+    (next) => sameDate(next, current, withTime, timeZone),
+    store,
+    cellId,
+  );
+  const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = 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("");
+  const shown = rejected ? rejected.value : current;
+  const cellDisplay = rejected
+    ? renderTypedValue(row, col, rejected.value, { linkAsText: true, timeZone })
+    : display;
+  const message = rejected?.message;
+  // The trigger has no text of its own (the date is the cell's display, hidden
+  // from screen readers), so its accessible name carries the date.
+  const accessibleName = typeof cellDisplay === "string" ? `${label}, ${cellDisplay}` : 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(shown, timeZone);
+
+  const handleOpenChange = (next: boolean, details?: { reason?: string }) => {
+    if (next) {
+      setDraftDay(toCalendarDate(shown, timeZone));
+      setDraftTime(toTimeText(shown, timeZone));
+    } else if (withTime && draftDay && details?.reason !== "escape-key") {
+      commit(toIsoDateTime(draftDay, draftTime, timeZone));
+    }
+    setOpen(next);
+  };
+
+  const handlePick = (day: CalendarDate) => {
+    if (withTime) {
+      setDraftDay(day);
+      return;
+    }
+    commit(day.toString());
+    setOpen(false);
+  };
+
+  const hint = focused ? t("editRevertHint") : t("editKeptHint");
+
+  return (
+    <EditableCellFrame
+      cellProps={cellProps}
+      display={cellDisplay}
+      truncate={col.truncate}
+      icon={<CalendarDays />}
+      errorId={errorId}
+      description={message === undefined ? undefined : `${message}. ${hint}`}
+    >
+      <Popover.Root open={open} onOpenChange={handleOpenChange}>
+        <Tooltip.Root open={message !== undefined && (focused || hovered) && !open}>
+          <Tooltip.Trigger
+            render={
+              <Popover.Trigger
+                ref={register}
+                aria-label={accessibleName}
+                aria-invalid={message !== undefined ? true : undefined}
+                aria-describedby={message !== undefined ? errorId : undefined}
+                className={cn(TRIGGER_CLASS_NAME, ruleClassName(message, focused))}
+                onKeyDown={(event) => {
+                  if (event.key === "ArrowDown" && !open) {
+                    event.preventDefault();
+                    handleOpenChange(true);
+                    return;
+                  }
+                  if (event.key === "Escape" && !open && rejected) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    clear();
+                    return;
+                  }
+                  // A rejected pick holds focus until it's fixed or undone.
+                  if (event.key === "Tab" && rejected) {
+                    event.preventDefault();
+                    return;
+                  }
+                  tabBetweenCells(event, open, navigation, { rowKey, colKey });
+                }}
+                onFocus={() => setFocused(true)}
+                onBlur={() => setFocused(false)}
+                onPointerEnter={() => setHovered(true)}
+                onPointerLeave={() => setHovered(false)}
+              />
+            }
+          />
+          <Tooltip.Content>
+            {message}
+            <span className="astw:block astw:opacity-70">{hint}</span>
+          </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, timeZone)}
+                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 2e7c44adb..ae164a2ac 100644
--- a/packages/core/src/components/data-table/i18n.ts
+++ b/packages/core/src/components/data-table/i18n.ts
@@ -131,6 +131,27 @@ 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",
+    editKeptHint: "Not saved. Click to fix it, or press Esc to undo.",
+    editNone: "None",
+    editNoMatches: "No matches",
+    editClear: "Clear",
+    editDone: "Done",
+    // Leaving a page whose table has unsaved edits
+    editLeaveTitle: "Leave without saving?",
+    editLeaveDescription:
+      "Some changes in this table haven't been saved. If you leave now, they'll be lost.",
+    editLeaveStay: "Stay",
+    editLeaveConfirm: "Leave anyway",
   },
   ja: {
     loading: "読み込み中...",
@@ -245,6 +266,26 @@ 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キーで元に戻せます",
+    editKeptHint: "保存されていません。クリックして修正するか、Escキーで元に戻せます。",
+    editNone: "なし",
+    editNoMatches: "一致する項目がありません",
+    editClear: "クリア",
+    editDone: "完了",
+    // 保存されていない編集がある表のページを離れるとき
+    editLeaveTitle: "保存せずに移動しますか？",
+    editLeaveDescription: "この表に保存されていない変更があります。移動すると変更は失われます。",
+    editLeaveStay: "このページに留まる",
+    editLeaveConfirm: "保存せずに移動",
   },
 });
 
diff --git a/packages/core/src/components/data-table/index.ts b/packages/core/src/components/data-table/index.ts
index bc72bb919..ca8f8297d 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,13 +20,16 @@ export type {
   HeaderRenderContext,
   DataTableData,
   DataTableFilterConfig,
+  DateCellEditOptions,
   DateCellOptions,
   LinkCellOptions,
   MetadataFieldOptions,
   MoneyCellOptions,
+  NumberCellEditOptions,
   NumberCellOptions,
   DataTableAction,
   RowAction,
+  TextCellEditOptions,
   SelectionAction,
   SelectionActionHelpers,
   UseDataTableOptions,
diff --git a/packages/core/src/components/data-table/types.ts b/packages/core/src/components/data-table/types.ts
index 513ab4813..b14016433 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 000000000..7636394f1
--- /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 000000000..a91df06b5
--- /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/data-table/use-cell-edit-store.ts b/packages/core/src/components/data-table/use-cell-edit-store.ts
new file mode 100644
index 000000000..acf7a9d87
--- /dev/null
+++ b/packages/core/src/components/data-table/use-cell-edit-store.ts
@@ -0,0 +1,124 @@
+import { useState, useSyncExternalStore } from "react";
+
+/**
+ * A value the user left in a cell that breaks a rule. It stays on screen,
+ * marked and with its message, and is never saved — until the user fixes it or
+ * presses Esc. Kept per table rather than per cell, so it survives the cell
+ * unmounting (paging away and back) and counts as unsaved when leaving the page.
+ *
+ * @internal
+ */
+export interface KeptDraft {
+  /** The typed text, or a rejected pick's value. */
+  value: unknown;
+  /** Why it can't be saved. */
+  message: string;
+}
+
+/**
+ * What a table hasn't saved yet.
+ *
+ * @internal
+ */
+export interface CellEditStatus {
+  /** Cells being typed into whose change isn't committed yet. */
+  editing: number;
+  /** Values left in cells that break a rule. */
+  kept: number;
+  /** Autosaves still in flight. */
+  saving: number;
+}
+
+/**
+ * The unsaved state of one rendered table body, shared by its editable cells
+ * and the guard that warns before leaving the page.
+ *
+ * @internal
+ */
+export interface CellEditStore {
+  getKept: (cellId: string) => KeptDraft | undefined;
+  setKept: (cellId: string, draft: KeptDraft | undefined) => void;
+  setEditing: (cellId: string, editing: boolean) => void;
+  /** Counts an autosave as unsaved until it settles. */
+  trackSave: (save: PromiseLike<unknown>) => void;
+  /** Resolves once every autosave in flight settles: `true` when they all succeeded. */
+  settle: () => Promise<boolean>;
+  hasUnsaved: () => boolean;
+  getStatus: () => CellEditStatus;
+  subscribe: (listener: () => void) => () => void;
+}
+
+/** @internal */
+export const cellEditId = (rowKey: string, colKey: string) => `${rowKey}\u0000${colKey}`;
+
+/** @internal */
+export function createCellEditStore(): CellEditStore {
+  const kept = new Map<string, KeptDraft>();
+  const editing = new Set<string>();
+  const saves = new Set<Promise<boolean>>();
+  const listeners = new Set<() => void>();
+  // A stable snapshot for `useSyncExternalStore`: replaced only when a count changes.
+  let status: CellEditStatus = { editing: 0, kept: 0, saving: 0 };
+
+  const emit = () => {
+    if (
+      status.editing === editing.size &&
+      status.kept === kept.size &&
+      status.saving === saves.size
+    ) {
+      return;
+    }
+    status = { editing: editing.size, kept: kept.size, saving: saves.size };
+    for (const listener of listeners) listener();
+  };
+
+  return {
+    getKept: (cellId) => kept.get(cellId),
+    setKept(cellId, draft) {
+      if (draft) kept.set(cellId, draft);
+      else kept.delete(cellId);
+      emit();
+    },
+    setEditing(cellId, isEditing) {
+      if (isEditing) editing.add(cellId);
+      else editing.delete(cellId);
+      emit();
+    },
+    trackSave(save) {
+      const tracked: Promise<boolean> = Promise.resolve(save)
+        .then(
+          () => true,
+          () => false,
+        )
+        .finally(() => {
+          saves.delete(tracked);
+          emit();
+        });
+      saves.add(tracked);
+      emit();
+    },
+    async settle() {
+      const results = await Promise.all(saves);
+      return results.every(Boolean);
+    },
+    hasUnsaved: () => editing.size + kept.size + saves.size > 0,
+    getStatus: () => status,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+
+/** One store per rendered table body. @internal */
+export function useCellEditStore(): CellEditStore {
+  const [store] = useState(createCellEditStore);
+  return store;
+}
+
+/** Re-renders when the store's counts change. @internal */
+export function useCellEditStatus(store: CellEditStore): CellEditStatus {
+  return useSyncExternalStore(store.subscribe, store.getStatus, store.getStatus);
+}
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index 8d2780c9a..be830a07a 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}
diff --git a/packages/core/src/routing/router-context.ts b/packages/core/src/routing/router-context.ts
new file mode 100644
index 000000000..7667efaba
--- /dev/null
+++ b/packages/core/src/routing/router-context.ts
@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+
+/**
+ * `true` below AppShell's own router, a data router where navigation blockers
+ * (`useBlocker`) work. Components that warn before the user leaves a page check
+ * it first, so they still render — without the warning — under a plain router.
+ *
+ * @internal
+ */
+export const AppShellRouterContext = createContext(false);
+
+/** Whether the component renders below AppShell's own router. @internal */
+export function useInAppShellRouter(): boolean {
+  return useContext(AppShellRouterContext);
+}
diff --git a/packages/core/src/routing/router.tsx b/packages/core/src/routing/router.tsx
index 5d057bb35..51572e975 100644
--- a/packages/core/src/routing/router.tsx
+++ b/packages/core/src/routing/router.tsx
@@ -6,6 +6,7 @@ import { createContentRoutes, wrapErrorBoundary } from "./routes";
 import { useAppShellConfig, type RootConfiguration } from "@/contexts/appshell-context";
 import { createNavItemsLoader } from "@/routing/navigation";
 import { DocumentHead } from "./document-head";
+import { AppShellRouterContext } from "./router-context";
 
 // ============================================================================
 // Root Route
@@ -45,10 +46,10 @@ const createRootRoute = (params: {
     id: navItemsLoaderID,
     loader: navItemsLoader,
     element: (
-      <>
+      <AppShellRouterContext.Provider value={true}>
         <DocumentHead />
         {children}
-      </>
+      </AppShellRouterContext.Provider>
     ),
     children: routeChildren,
     // Hydration fallback is unused in CSR-only usage of AppShell.