diff --git a/.changeset/finish-editor-kit-correctness.md b/.changeset/finish-editor-kit-correctness.md
new file mode 100644
index 000000000..fed3d64e1
--- /dev/null
+++ b/.changeset/finish-editor-kit-correctness.md
@@ -0,0 +1,25 @@
+---
+"@pretable/react": minor
+"@pretable/ui": minor
+---
+
+Finish editor adoption of the component kit. Text, number, enum and date
+fields resolve TextInput; multiline fields resolve the new native Textarea
+slot. Number steppers and date month buttons resolve IconButton. Preserve
+forwarded refs, native props, handlers and ARIA/data hooks in replacements.
+
+Correct enum identity and clearing. Explicit choices retain their canonical
+value even with duplicate labels; ambiguous typed labels/values require a
+choice. Empty queries can commit null. Custom parsers receive canonical value
+text for an explicit choice and query text for typed input.
+
+Composition keys retain native behavior. Shift+Tab commits left and Shift+Enter
+up, including when controlled rows acknowledge a save later; cancelled or
+replaced sessions ignore stale acknowledgements. Multiline plain Enter remains a newline. Calendar navigation now browses
+without changing the draft: Enter accepts an intentionally navigated date,
+while Tab/blur commit the typed/current value. Date inputs expose a complete
+grid-popup combobox contract.
+
+Preserve editor error/focus/pending styling after kit adoption, prevent error
+messages from squeezing fields sideways, and complete disabled and forced-color
+calendar/action states. Upgrade React and UI together for the new site hooks.
diff --git a/.changeset/guard-pending-edit-lifecycle.md b/.changeset/guard-pending-edit-lifecycle.md
new file mode 100644
index 000000000..1446b3ac6
--- /dev/null
+++ b/.changeset/guard-pending-edit-lifecycle.md
@@ -0,0 +1,14 @@
+---
+"@pretable/react": patch
+"@pretable/core": patch
+---
+
+Prevent cell edits from committing before permission resolves or dispatching
+duplicate validation/save operations. Recover from permission, parsing,
+validation, and save callback failures without leaving a pending editor stuck,
+and ignore stale results after an edit session is replaced or cancelled.
+
+Draft writes during checking, validating, and saving are now ignored, including
+writes from custom editors. This intentionally removes the previous behavior
+where a draft write could unlock a pending edit. Enum label normalization waits
+for edit permission, and pending editor commit keys do not submit another write.
diff --git a/.changeset/repair-overlay-scope-and-states.md b/.changeset/repair-overlay-scope-and-states.md
new file mode 100644
index 000000000..9f83fda04
--- /dev/null
+++ b/.changeset/repair-overlay-scope-and-states.md
@@ -0,0 +1,21 @@
+---
+"@pretable/react": minor
+"@pretable/ui": minor
+---
+
+Add PretableOverlayProvider for an explicit popup container. Place the grid
+and portal host in the same CSS scope to preserve custom tokens, direction
+and live theme changes while escaping the grid's clipping viewport. The
+provider does not copy trigger styles. Without a provider, popups still use
+body; a provider with a null target defers popup content until attachment.
+
+Track nested portal ownership for outside presses. Sibling Selects close one
+another, clicks inside nested lists preserve the parent dialog, and trigger
+toggles work without hiding outside pointer events.
+Keep Select and header popups anchored when live scope or layout changes move
+their trigger, including delayed portal attachment.
+
+Rename the listbox active marker from data-active to data-pretable-active.
+Update custom selectors and upgrade the React/UI packages together. Complete
+disabled option styles and forced-colors active-option/checkbox state pairs,
+including selected-disabled options and checked/mixed disabled checkboxes.
diff --git a/.changeset/repair-shared-control-state.md b/.changeset/repair-shared-control-state.md
new file mode 100644
index 000000000..555491297
--- /dev/null
+++ b/.changeset/repair-shared-control-state.md
@@ -0,0 +1,17 @@
+---
+"@pretable/react": minor
+---
+
+Keep Select highlights attached to option values when options reorder, and
+choose an enabled fallback when an active option is removed or disabled.
+Empty rosters close the Select; all-disabled lists have no active option.
+Typeahead starts fresh each time the list opens.
+
+Rich Select option labels now require a plain `textValue` for typeahead.
+String and number labels continue to infer their text. This tightens
+`PretableSelectOption` from an interface to a union: add `textValue` to rich
+labels and replace interfaces extending the old type with type intersections.
+
+Preserve callback-ref cleanup in Select, Checkbox and TextInput, including
+ref replacement and StrictMode attachment cycles. Object refs and callbacks
+without cleanup still receive their usual null detach.
diff --git a/apps/website/app/fixtures/editor-kit/page.tsx b/apps/website/app/fixtures/editor-kit/page.tsx
new file mode 100644
index 000000000..4d064744c
--- /dev/null
+++ b/apps/website/app/fixtures/editor-kit/page.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { forwardRef, useState } from "react";
+import {
+  PretableSurface,
+  PretableOverlayProvider,
+  PretableTextInput,
+  PretableTextarea,
+  PretableIconButton,
+  type PretableColumn,
+  type PretableTextInputComponent,
+  type PretableTextareaComponent,
+  type PretableIconButtonComponent,
+} from "@pretable/react";
+
+interface Row {
+  id: string;
+  name: string;
+  quantity: number | null;
+  status: string | null;
+  date: string | null;
+  notes: string;
+}
+const INITIAL: Row[] = [
+  {
+    id: "a",
+    name: "Alpha",
+    quantity: 2,
+    status: "b",
+    date: "2026-08-18",
+    notes: "First line",
+  },
+  {
+    id: "b",
+    name: "Beta",
+    quantity: 3,
+    status: "a",
+    date: "2026-08-22",
+    notes: "Second line",
+  },
+];
+const COLUMNS: PretableColumn<Row>[] = [
+  { id: "name", header: "Name", editable: true, widthPx: 140 },
+  {
+    id: "quantity",
+    header: "Quantity",
+    type: "number",
+    editable: true,
+    widthPx: 150,
+    validate: (value) =>
+      typeof value === "number" && value < 0 ? "Use a positive quantity" : true,
+  },
+  {
+    id: "status",
+    header: "Status",
+    type: "enum",
+    editable: true,
+    widthPx: 160,
+    formatEditValue: () => "Same",
+    options: [
+      { value: "a", label: "Same" },
+      { value: "b", label: "Same" },
+      { value: "Same", label: "Collision" },
+    ],
+  },
+  { id: "date", header: "Date", type: "date", editable: true, widthPx: 160 },
+  { id: "notes", header: "Notes", editable: true, wrap: true, widthPx: 230 },
+];
+const getRowId = (row: Row) => row.id;
+const Input: PretableTextInputComponent = forwardRef(
+  function Input(props, ref) {
+    return <PretableTextInput {...props} ref={ref} data-fixture-input="" />;
+  },
+);
+const Textarea: PretableTextareaComponent = forwardRef(
+  function Textarea(props, ref) {
+    return <PretableTextarea {...props} ref={ref} data-fixture-textarea="" />;
+  },
+);
+const IconButton: PretableIconButtonComponent = forwardRef(
+  function IconButton(props, ref) {
+    return (
+      <PretableIconButton {...props} ref={ref} data-fixture-icon-button="" />
+    );
+  },
+);
+
+export default function EditorKitFixture() {
+  const [rows, setRows] = useState(INITIAL);
+  const [saved, setSaved] = useState(0);
+  const [dark, setDark] = useState(false);
+  const [compact, setCompact] = useState(false);
+  const [host, setHost] = useState<HTMLDivElement | null>(null);
+  return (
+    <main
+      style={{ padding: 24 }}
+      data-theme={dark ? "dark" : "light"}
+      data-density={compact ? "compact" : "standard"}
+    >
+      <h1>Editor kit verification</h1>
+      <button type="button" onClick={() => setCompact((value) => !value)}>
+        Toggle compact
+      </button>
+      <button type="button" onClick={() => setDark((value) => !value)}>
+        Toggle theme
+      </button>{" "}
+      <button type="button">Outside editor</button>
+      <div style={{ marginTop: 16 }}>
+        <PretableOverlayProvider container={host}>
+          <PretableSurface
+            key={String(compact)}
+            ariaLabel="Editor kit"
+            rows={rows}
+            columns={COLUMNS}
+            getRowId={getRowId}
+            viewportHeight={260}
+            components={{ TextInput: Input, Textarea, IconButton }}
+            onRowChange={({ rowId, row }) => {
+              setRows((previous) =>
+                previous.map((item) => (item.id === rowId ? row : item)),
+              );
+              setSaved((count) => count + 1);
+            }}
+          />
+        </PretableOverlayProvider>
+      </div>
+      <div ref={setHost} data-editor-overlay-host="" />
+      <output data-saved-count="">{saved}</output>
+      <pre data-saved-rows="">{JSON.stringify(rows, null, 2)}</pre>
+    </main>
+  );
+}
diff --git a/apps/website/app/fixtures/overlay-scope/page.tsx b/apps/website/app/fixtures/overlay-scope/page.tsx
new file mode 100644
index 000000000..7d4e957d2
--- /dev/null
+++ b/apps/website/app/fixtures/overlay-scope/page.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import {
+  PretableOverlayProvider,
+  PretableSelect,
+  PretableSurface,
+  type PretableColumn,
+} from "@pretable/react";
+import { useState, type CSSProperties } from "react";
+
+const OPTIONS = [
+  { value: "alpha", label: "Alpha" },
+  { value: "beta", label: "Beta" },
+  { value: "gamma", label: "Gamma" },
+  { value: "disabled", label: "Unavailable", disabled: true },
+];
+const ROWS = [
+  { id: "one", name: "Alpha" },
+  { id: "two", name: "Beta" },
+];
+const getRowId = (row: (typeof ROWS)[number]) => row.id;
+const COLUMNS: PretableColumn<(typeof ROWS)[number]>[] = [
+  { id: "name", header: "Name", type: "text", widthPx: 300 },
+];
+
+function Scope({
+  name,
+  initiallyDark,
+}: {
+  name: string;
+  initiallyDark: boolean;
+}) {
+  const [host, setHost] = useState<HTMLDivElement | null>(null);
+  const [dark, setDark] = useState(initiallyDark);
+  const [rtl, setRtl] = useState(initiallyDark);
+  const [first, setFirst] = useState("alpha");
+  const [second, setSecond] = useState("beta");
+  const scopeStyle = {
+    "--pretable-bg-grid": dark ? "rgb(17, 34, 51)" : "rgb(240, 248, 255)",
+    "--pretable-bg-grid-alt": dark ? "rgb(17, 34, 51)" : "rgb(240, 248, 255)",
+    "--pretable-text-cell": dark ? "rgb(255, 248, 220)" : "rgb(20, 40, 60)",
+    "--pretable-rule-strong": dark ? "rgb(150, 180, 210)" : "rgb(50, 70, 90)",
+    colorScheme: dark ? "dark" : "light",
+    padding: 16,
+    border: "1px solid #888",
+  } as CSSProperties;
+  return (
+    <section
+      data-overlay-scope={name}
+      data-theme={dark ? "dark" : "light"}
+      dir={rtl ? "rtl" : "ltr"}
+      style={scopeStyle}
+    >
+      <h2>{name}</h2>
+      <button type="button" onClick={() => setDark((value) => !value)}>
+        Toggle {name} theme
+      </button>{" "}
+      <button type="button" onClick={() => setRtl((value) => !value)}>
+        Toggle {name} direction
+      </button>
+      <PretableOverlayProvider container={host}>
+        <div
+          data-scope-clip=""
+          style={{
+            contain: "content",
+            overflow: "hidden",
+            height: 190,
+            marginTop: 12,
+          }}
+        >
+          <PretableSurface
+            ariaLabel={`${name} grid`}
+            columns={COLUMNS}
+            rows={ROWS}
+            getRowId={getRowId}
+            viewportHeight={132}
+          />
+          <div style={{ display: "flex", gap: 12, marginTop: 12 }}>
+            <PretableSelect
+              aria-label={`${name} first`}
+              options={OPTIONS}
+              value={first}
+              onChange={setFirst}
+            />
+            <PretableSelect
+              aria-label={`${name} second`}
+              options={OPTIONS}
+              value={second}
+              onChange={setSecond}
+            />
+          </div>
+        </div>
+      </PretableOverlayProvider>
+      <div ref={setHost} data-overlay-host={name} />
+    </section>
+  );
+}
+
+export default function OverlayScopeFixture() {
+  return (
+    <main style={{ padding: 24 }}>
+      <h1>Scoped overlay fixture</h1>
+      <button type="button" onPointerDown={(event) => event.stopPropagation()}>
+        Outside with stopped bubbling
+      </button>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+          gap: 24,
+          marginTop: 24,
+        }}
+      >
+        <Scope name="Morning" initiallyDark={false} />
+        <Scope name="Evening" initiallyDark />
+      </div>
+    </main>
+  );
+}
diff --git a/apps/website/content/docs/grid/components.mdx b/apps/website/content/docs/grid/components.mdx
index ea79f7635..0b32e5cf1 100644
--- a/apps/website/content/docs/grid/components.mdx
+++ b/apps/website/content/docs/grid/components.mdx
@@ -1,26 +1,28 @@
 ---
 title: Components
-description: "The kit the grid renders its own chrome from — Button, IconButton, Select, TextInput and Checkbox — how to style them, and how to replace them."
+description: "The kit the grid renders its own chrome from — Button, IconButton, Select, TextInput, Textarea and Checkbox — how to style them, and how to replace them."
 nav: Grid
 ---
 
 `@pretable/react` renders its own controls from a small component kit, and
 ships those components for you to use and to replace. This page covers the
-five that ship today: `PretableButton`, `PretableIconButton`,
-`PretableSelect`, `PretableTextInput` and `PretableCheckbox`. Here is a grid
-whose every labelled button is the app's own:
+six that ship today: `PretableButton`, `PretableIconButton`,
+`PretableSelect`, `PretableTextInput`, `PretableTextarea` and `PretableCheckbox`. Here is a grid
+whose kit buttons use the app's own component:
 
 <Example id="components-button" />
 
 ## The components
 
-Four of the five render `<button type="button">`, always — a stray submit
+Four of the six render `<button type="button">`, always — a stray submit
 inside your `<form>` is a real bug class, so `type` is not a prop on any of
-them. `PretableTextInput` is the exception, and deliberately so: it is the
-native `<input>`, where `type` is the whole point and passes straight
-through. `className` and `style` pass straight through on all five — the
+them. `PretableTextInput` renders a native `<input>` and passes its `type` through.
+`PretableTextarea` renders a native `<textarea>`. `className` and `style` pass straight through on all six — the
 components set neither, so yours is the whole value — and each forwards its
-`ref` to the node it renders.
+`ref` to the node it renders. Select, TextInput, Textarea and Checkbox compose that
+ref with their internal node ref. Callback refs that return a cleanup function
+have that cleanup called on detach or replacement; callbacks without one
+receive `null`. Object refs are cleared on detach.
 
 ### Button
 
@@ -59,7 +61,7 @@ The keyboard is the listbox one: on a closed trigger, `↓`, `↑`, `Enter` or
 `Space` opens the list; open, `↓` / `↑` move through it, wrapping at the ends
 and skipping disabled options; `Home` / `End` jump to the first and last
 enabled option; typing jumps by label prefix, the prefix resetting after
-500ms of silence; `Enter` or `Space` commits the active option; `Escape`
+500ms of silence or when the list closes or reopens; `Enter` or `Space` commits the active option; `Escape`
 closes the list and returns focus to the trigger; `Tab` closes it and moves
 on. `onChange` fires only when the chosen value differs from `value`.
 
@@ -69,6 +71,33 @@ must never write back. And a `value` that is absent from `options` renders as
 its own label rather than as an empty trigger, so a picker never silently
 disagrees with the state behind it.
 
+Give every option a unique, stable `value`. If options change while the list
+is open, the highlight follows that value through reordering. Removing or
+disabling it moves the highlight to the first enabled option. An all-disabled
+list has no highlight and cannot commit; an empty roster closes the list.
+Adding options again does not reopen it.
+
+String and number labels supply their own typeahead text. Rich labels require
+`textValue`, the plain text to search; it can also override typeahead text for a
+primitive label. The component does not inspect or render arbitrary React
+components to discover their text. For example:
+
+```tsx
+const options = [
+  { value: "open", label: "Open" },
+  {
+    value: "review",
+    label: <strong>In review</strong>,
+    textValue: "In review",
+  },
+];
+```
+
+When migrating rich options, add `textValue` to each label that is not a
+string or number. `PretableSelectOption` is now a union type, so an interface
+that previously extended it should use a type intersection instead, such as
+`type AppOption = PretableSelectOption & { category: string }`.
+
 ```tsx
 import { PretableSelect } from "@pretable/react";
 
@@ -84,13 +113,13 @@ import { PretableSelect } from "@pretable/react";
 />;
 ```
 
-| Prop         | Type                              | Notes                                                                         |
-| ------------ | --------------------------------- | ----------------------------------------------------------------------------- |
-| `options`    | `readonly PretableSelectOption[]` | The choices, in display order. Each is `{ value, label, disabled? }`.         |
-| `value`      | `string`                          | The committed value. Absent from `options`, it renders as its own label.      |
-| `onChange`   | `(value: string) => void`         | Called with the chosen value, and only when it differs from `value`.          |
-| `aria-label` | `string`                          | Required. The accessible name — name what it chooses, e.g. `Filter operator`. |
-| `site`       | `PretableSite`                    | Where in the grid the picker is; lands as `data-pretable-site`.               |
+| Prop         | Type                              | Notes                                                                                                           |
+| ------------ | --------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `options`    | `readonly PretableSelectOption[]` | The choices, in display order. Each has `value`, `label`, optional `disabled`, and `textValue` for rich labels. |
+| `value`      | `string`                          | The committed value. Absent from `options`, it renders as its own label.                                        |
+| `onChange`   | `(value: string) => void`         | Called with the chosen value, and only when it differs from `value`.                                            |
+| `aria-label` | `string`                          | Required. The accessible name — name what it chooses, e.g. `Filter operator`.                                   |
+| `site`       | `PretableSite`                    | Where in the grid the picker is; lands as `data-pretable-site`.                                                 |
 
 ### TextInput
 
@@ -112,15 +141,16 @@ semantics stay with the site rather than the component: the filter fields
 search box does not, and a component that owned that for all of them would be
 wrong for most.
 
-Seven grid fields are this component: the funnel menu's
+The grid uses this component for the funnel menu's
 [value field and its min/max pair](/docs/grid/filtering#the-built-in-menu),
 the tool panel's
 [filter-row value and its min/max pair](/docs/grid/tool-panel#dom-hooks-and-strings),
-and the [columns search box](/docs/grid/tool-panel#the-columns-section).
+the [columns search box](/docs/grid/tool-panel#the-columns-section), and the
+text, number, enum and date cell editors.
 
-The accessible name may come from an `aria-label`, an `aria-labelledby`, or a
-`<label for>` naming its id. With none of the three it warns once per page —
-an unnamed field reads as a bare edit box.
+The naming check recognizes nonempty `aria-label`, resolved `aria-labelledby`
+text, native label text and `title`. It warns once per page when none is found;
+this bounded heuristic does not replace an accessibility audit.
 
 ```tsx
 import { PretableTextInput } from "@pretable/react";
@@ -137,16 +167,25 @@ import { PretableTextInput } from "@pretable/react";
 | ------ | -------------- | ----------------------------------------------------------------------------------------------- |
 | `site` | `PretableSite` | Where in the grid the field is; lands as `data-pretable-site`. Every other prop is the input's. |
 
+### Textarea
+
+`PretableTextarea` is a native `<textarea>` with the same naming, ref and
+attribute-passthrough contract as TextInput. The multiline cell editor uses
+it through `components.Textarea`; standalone consumers can use it directly.
+It emits `data-pretable-textarea`. Native props such as `rows`, `value`,
+`onChange`, `readOnly`, `disabled` and ARIA attributes pass through. Auto-grow
+and commit keys belong to the editor, not the shared control.
+
+| Prop   | Type           | Notes                                                                                            |
+| ------ | -------------- | ------------------------------------------------------------------------------------------------ |
+| `site` | `PretableSite` | Where the field appears; emits `data-pretable-site`. Other props are native textarea attributes. |
+
 ### Checkbox
 
-A checkbox, drawn as a `<button type="button" role="checkbox">` carrying
-`aria-checked` rather than as a native `<input type="checkbox">`. Three
-things are plain on a button and a fight on an input: the mixed state
-(`indeterminate` is a DOM property with no attribute at all), the roving
-`tabIndex` a control inside a body cell needs, and a tick that takes the
-theme's tokens — the user agent owns the native one until `appearance: none`
-throws the whole control away. So the glyph is the kit's own: the check icon
-when `checked` is `true`, a minus when it is `"mixed"`, nothing when `false`.
+A checkbox rendered as `<button type="button" role="checkbox">`, with
+`aria-checked` describing false, true or mixed. Native checkbox inputs also
+support `tabIndex` and indeterminate state. This kit uses a button to share
+its explicit state attributes and themed glyph: check, minus, or empty.
 
 It is controlled. `onCheckedChange` is called with the next value and
 nothing is written until you write it, and `"mixed"` toggles to `true` — the
@@ -186,6 +225,54 @@ import { PretableCheckbox } from "@pretable/react";
 | `onCheckedChange` | `(next: boolean) => void` | Called with the next value after a click, before anything is written. |
 | `site`            | `PretableSite`            | Where in the grid the checkbox is; lands as `data-pretable-site`.     |
 
+## Overlay scope
+
+Popups render into `document.body` by default, escaping the grid's clipping
+viewport. React context remains available across that portal; CSS inheritance
+comes from the popup's DOM ancestors. Use `PretableOverlayProvider` to place
+popups in an application-owned host inside a local theme scope:
+
+```tsx
+import { PretableOverlayProvider } from "@pretable/react";
+import { useState, type ReactNode } from "react";
+
+function ScopedGrid({ children }: { children: ReactNode }) {
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+  return (
+    <section className="dashboard" dir="ltr">
+      <PretableOverlayProvider container={container}>
+        {children}
+      </PretableOverlayProvider>
+      <div ref={setContainer} />
+    </section>
+  );
+}
+```
+
+Put the grid in `ScopedGrid`, and place your token overrides on `.dashboard`.
+Both the grid and its popup host then inherit custom tokens, direction and
+color scheme, including live changes. The provider does **not** copy styles
+from a trigger: move overrides from the grid element to the shared section,
+or apply them to the portal host too. Props can also be passed to components
+inside portals; context avoids manually forwarding shared configuration.
+
+| Prop        | Type                  | Notes                                                                               |
+| ----------- | --------------------- | ----------------------------------------------------------------------------------- |
+| `container` | `HTMLElement \| null` | Required. Nearest provider wins; `null` defers popup content until a target exists. |
+| `children`  | `ReactNode`           | The grid or kit controls whose popups use this target.                              |
+
+Keep the host connected, in the same document as the trigger, and outside
+clipping or transformed containing blocks. The example's host is a sibling
+of the grid, not inside its scroll viewport. Replacing the host remounts portal
+content; focus is not preserved across target replacement. With a null target,
+open intent is retained, but triggers do not claim a visible popup or reference
+its unmounted options. Menus that take focus do so when their portal attaches.
+
+Nested popup presses belong to their parent overlay. Pressing a sibling
+Select closes the previous list; pressing the same trigger toggles its own
+list closed. Outside presses close without moving focus back, and Escape
+continues to dismiss the innermost popup first.
+
 ## Styling
 
 The styling channel is the one the whole grid uses: attributes and tokens.
@@ -193,13 +280,14 @@ Every push-button carries `data-pretable-button` or
 `data-pretable-icon-button`; a labelled button also carries
 `data-pretable-variant`, and any of them carries `data-pretable-site` when
 the grid gave it one. A select's trigger carries `data-pretable-select` and
-writes its committed value to `data-pretable-value` — a `<button>` has no
-`.value`, so that attribute is the truth a test reads and a selector
-matches. Its label span is `data-pretable-select-label`; the open list is
+writes its committed option value to `data-pretable-value`, independently of
+the native button’s `.value` property. Tests and selectors can read this
+committed selection directly. Its label span is `data-pretable-select-label`; the open list is
 `data-pretable-listbox` with a `data-pretable-option` per entry, each
 carrying its own value as `data-pretable-option-value` — which option it
 **is**, as against the trigger's one committed `data-pretable-value` — the
-keyboard-active one carrying `data-active` and the chosen one
+keyboard-active one carrying `data-pretable-active` (renamed from the old
+`data-active`; update custom selectors) and the chosen one
 `aria-selected="true"`. A text field carries `data-pretable-text-input`, and
 a checkbox `data-pretable-checkbox` plus the `aria-checked` its three states
 live in: match `[aria-checked="true"]` and `[aria-checked="mixed"]` rather
@@ -218,7 +306,7 @@ already wrote keeps matching.
 [data-pretable-select][data-pretable-value="between"] {
   font-variant-numeric: tabular-nums;
 }
-[data-pretable-option][data-active],
+[data-pretable-option][data-pretable-active],
 [data-pretable-option][aria-selected="true"] {
   background: var(--pretable-bg-hover);
 }
@@ -238,7 +326,7 @@ type appears — the tool panel and the portalled filter dialog for `Button`;
 the header, the tool panel and the group panel for `IconButton`; the filter
 dialog, the filter builder and the grouping section for `Select`; the funnel
 menu's operand fields, the filter builder's operand fields and the Columns
-search box for `TextInput`; the row-select column, the boolean cell, the tool
+search box and single-line editors for `TextInput`; the multiline editor for `Textarea`; the row-select column, the boolean cell, the tool
 panel and both enum checklists for `Checkbox` — and receives exactly the props
 the built-in does, `site` included, so it can branch on where it is.
 
@@ -248,16 +336,22 @@ the built-in does, `site` included, so it can branch on where it is.
 | `Checkbox`   | `PretableCheckboxComponent`   | Receives `PretableCheckboxProps`; must forward its `ref` to the button node.   |
 | `IconButton` | `PretableIconButtonComponent` | Receives `PretableIconButtonProps`; must forward its `ref` to the button node. |
 | `Select`     | `PretableSelectComponent`     | Receives `PretableSelectProps`; must forward its `ref` to the button node.     |
+| `Textarea`   | `PretableTextareaComponent`   | Receives `PretableTextareaProps`; forwards its `ref` to the textarea node.     |
 | `TextInput`  | `PretableTextInputComponent`  | Receives `PretableTextInputProps`; must forward its `ref` to the input node.   |
 
-Forwarding the `ref` is the one obligation on a replacement: the grid anchors
-menus on the node and returns keyboard focus to it — a replaced `Select`
-owes it too, because the filter dialog focuses its operator picker when it
-opens. The grid takes no ref to a field or a checkbox today, so a replaced
-`TextInput` or `Checkbox` owes the ref as a contract rather than to a live
-caller — it is the handle anything reaching the real node goes through, and a
-replacement that swallows it cannot be given one later. Under React 18 that
+Replacements must forward the supplied props, handlers, ARIA and data
+attributes, and the `ref` to the actual native node. The grid uses those refs
+for menu anchoring, focus restoration, editor autofocus and textarea sizing.
+The slots cover kit controls; structural column headers, tabs, tree expanders,
+menu items, and segmented filter joins retain their specialized behavior.
+Editor fields use `site="cell-editor"`; action sites are `number-increment`,
+`number-decrement`, `date-previous-month` and `date-next-month`.
+Under React 18 that
 means `forwardRef`; under React 19 a plain `ref` prop is enough. The set of
 built-in `site` names is the
 `PretableBuiltInSite` type and grows additively — a new grid control
 may introduce a new site without a major bump.
+
+The field/checkbox naming warning runs once after mounting in any build. It
+checks common naming sources; it is a diagnostic heuristic, not a complete
+accessible-name computation or an accessibility certification.
diff --git a/apps/website/content/docs/grid/editing.mdx b/apps/website/content/docs/grid/editing.mdx
index 66a59b105..90cd34883 100644
--- a/apps/website/content/docs/grid/editing.mdx
+++ b/apps/website/content/docs/grid/editing.mdx
@@ -124,7 +124,7 @@ const columns: PretableColumn<Task>[] = [
 
 ### Multi-line text
 
-A `wrap: true` text column edits in a textarea that auto-grows with the draft. `Enter` inserts a newline instead of committing; **`Cmd`/`Ctrl` + `Enter`** commits and moves down. `Tab` still commits right, `Escape` cancels, and blur commits in place.
+A `wrap: true` text column edits in a textarea that auto-grows with the draft. `Enter` inserts a newline instead of committing; **`Cmd`/`Ctrl` + `Enter`** commits and moves down. `Tab` commits right and `Shift+Tab` left, `Escape` cancels, and blur commits in place.
 
 ### Numbers
 
@@ -144,11 +144,14 @@ A boolean column may declare `options` to **relabel** its two states — `[{ val
 
 An `enum` column that declares `options` (the same `{ value, label? }[]` the [filter checklist](/docs/grid/filtering) uses) edits in a combobox: a text input plus a listbox of the column's options.
 
-- **Seeded with the label.** The field opens showing the current option's `label` (falling back to its `value`), so it reads the way the cell does.
-- **Typing filters the list.** The draft is matched as a case-insensitive substring against both the label and the value; the full list shows until the user types.
-- **Keyboard.** `ArrowUp` / `ArrowDown` move the highlight (wrapping at the ends). `Enter` commits the highlighted option and moves **down**; `Tab` commits it and moves **right**; `Escape` cancels. Clicking an option commits it in place.
-- **Strict by default.** Committing text that matches no option is rejected with an inline **"Pick an option"** and the editor stays open. The combobox always resolves to one of the declared options — clearing a cell isn't reachable from it, because an emptied field just shows the full list again. Use [`renderEditor`](#custom-editors) if you need a clearable control.
-- **Blur reverts.** Clicking away with unmatched text cancels the edit rather than leaving a rejected value stuck open on the cell. (Text that _does_ match an option commits in place, like the other editors.)
+- **Identity is preserved.** The field shows the current option label, but an unchanged selection or an explicit option choice commits its canonical value. Duplicate labels cannot redirect a choice to the first option.
+- **Typing filters the list.** Labels and values match case-insensitively. Typed text must resolve to exactly one distinct option; ambiguous or unmatched text remains open with **"Pick an option"** on commit. Use arrows or a click to make an explicit choice.
+- **Clearing is supported.** Empty or whitespace-only text commits `null` on Enter, Tab or blur unless an option was intentionally chosen by navigation.
+- **Keyboard.** ArrowUp/ArrowDown choose a suggestion; Enter commits down, Tab right, and Shift reverses either direction. Escape cancels. Clicking an option commits in place.
+- **Blur.** An existing selection, unambiguous text, or an empty query commits in place. Invalid or ambiguous text does not silently become an option.
+
+A custom `parseEditValue` remains authoritative. It receives the canonical value
+as text for an explicit selection, or the typed query for text entry.
 
 The strictness is the point: the combobox picks from the declared set, it doesn't create new members. For a creatable or multi-select control, use [`renderEditor`](#custom-editors).
 
@@ -162,21 +165,23 @@ An `enum` column with **no** `options` gets the plain text editor and no strictn
 - **An empty or whitespace-only field commits `null`.** Clearing the field is how you clear a date cell.
 - **Typing retargets the calendar.** As soon as the field holds a complete valid date, the popover jumps to that month and highlights that day.
 - **Month navigation.** `PageDown` / `PageUp` move forward and back a month, as do the **‹** and **›** buttons in the popover header. The day-of-month is clamped to the target month's length, so 31 January + 1 month is 28 (or 29) February. Navigation also clamps at `0000-01-01` and `9999-12-31`; out-of-range calendar slots are disabled placeholders rather than wrapped dates.
-- **Commit keys.** `Enter` commits the highlighted day and moves **down**; `Tab` commits it and moves **right**; clicking a day commits it in place; `Escape` cancels. `Enter` only substitutes the calendar's day when the typed text is _itself_ a valid date — type garbage and press `Enter` and it still reaches the parser and is still rejected, rather than silently committing whatever month the calendar drifted to.
+- **Commit keys.** After intentional calendar navigation, Enter chooses the cursor date and commits down (Shift+Enter up). Otherwise Enter commits typed text. Tab always commits the typed/current draft, moving right (Shift+Tab left); it never accepts a merely browsed date. Clicking a day chooses it in place. Escape cancels.
 - **Blur commits or reverts.** Clicking away with a valid (or empty) field commits; clicking away with an unparseable date cancels the edit rather than leaving a rejected value stuck open on the cell.
 - **Focus never leaves the field.** The popover is a passive surface: it takes no focus, so the day cells are announced through `aria-activedescendant` on the input rather than by moving focus into the grid.
 
-#### Arrow keys move the calendar, not the caret
-
-This is the one behavior worth knowing before you use it. Inside a date editor:
+#### Browsing and text editing
 
-| Key                        | Effect                                    |
-| -------------------------- | ----------------------------------------- |
-| `ArrowLeft` / `ArrowRight` | highlighted day **−1 / +1 day**           |
-| `ArrowUp` / `ArrowDown`    | highlighted day **−7 / +7 days** (a week) |
-| `PageUp` / `PageDown`      | **−1 / +1 month**                         |
+Browsing the calendar never writes the field. ArrowUp/ArrowDown enter calendar
+navigation and move by a week; PageUp/PageDown and the month buttons browse
+months. In calendar navigation, Left/Right move by a day. Typing returns to text
+editing. Before calendar navigation, Left/Right/Home/End retain native caret
+behavior. Tab or blur therefore cannot save a date merely because you browsed
+another month. The cursor outline is separate from the selected-date fill.
 
-The field is a fixed ten-character date that opens fully selected, so caret movement is worth little and picking a nearby day is the common action. The trade-off is real, though: because navigating writes the highlighted day back into the field, **pressing an arrow key while a partial date is typed replaces what you typed**. Type `2026-08`, press `ArrowRight`, and the field becomes a full date. To correct a mistake, use `Backspace` and retype rather than arrowing back to it.
+The input is an editable combobox with `aria-haspopup="grid"`. Its expanded,
+controls and active-descendant attributes describe only mounted popup nodes;
+DOM focus stays in the input. See the
+[WAI-ARIA combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
 
 #### What the editor accepts from your cell values
 
@@ -268,36 +273,36 @@ const columns: PretableColumn<Task>[] = [
 
 `renderEditor` receives a `PretableEditorInput` — the edit input (`rowId`, `columnId`, `row`, `column`, `value`) plus the live draft controls:
 
-| Field      | Type                                           | Notes                                                              |
-| ---------- | ---------------------------------------------- | ------------------------------------------------------------------ |
-| `draft`    | `unknown`                                      | the current in-progress value                                      |
-| `setDraft` | `(value: unknown) => void`                     | update the draft as the user types                                 |
-| `commit`   | `(direction?: PretableFocusDirection) => void` | commit the draft, optionally moving focus (`"down"`, `"right"`, …) |
-| `cancel`   | `() => void`                                   | discard the edit and restore the cell                              |
+| Field      | Type                                           | Notes                                                                                      |
+| ---------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| `draft`    | `unknown`                                      | the current in-progress value                                                              |
+| `setDraft` | `(value: unknown) => void`                     | update the draft while editing; ignored during checking, validating, or saving             |
+| `commit`   | `(direction?: PretableFocusDirection) => void` | commit the draft, optionally moving focus; ignored while permission or a commit is pending |
+| `cancel`   | `() => void`                                   | discard the edit and restore the cell                                                      |
 
-`parseEditValue(raw, input)` turns the editor's string draft into the value handed to `validate` and `onRowChange`, replacing the built-in type parsing entirely. `formatEditValue(value, input)` produces the initial string shown when the editor opens. Supply both when your stored value isn't a plain string (an application-owned instant `Date`, an enum) so the custom edit round-trip stays type-correct. For an instant, the application must choose its calendar-zone projection; these hooks do not make the value eligible for built-in date processing.
+`parseEditValue(raw, input)` turns the editor's string draft into the value handed to `validate` and `onRowChange`, replacing the built-in type parsing entirely. It may return the value or a promise of that value; the editor stays in `validating` until parsing completes. `formatEditValue(value, input)` produces the initial string shown when the editor opens. Supply both when your stored value isn't a plain string (an application-owned instant `Date`, an enum) so the custom edit round-trip stays type-correct. For an instant, the application must choose its calendar-zone projection; these hooks do not make the value eligible for built-in date processing.
 
 `renderEditor` wins over the built-in editor for every column that opens one. The exception is `type: "boolean"` — boolean cells [toggle in place](#booleans) and never open an editor, so `renderEditor` is ignored there.
 
 ## Lifecycle
 
-A commit is **pessimistic**: the grid keeps showing the draft while the work runs and only clears the edit once `onRowChange` resolves. The edit moves through a sequence of phases, observable as `snapshot.editing.status`:
+A commit is **pessimistic**: the grid keeps showing the draft while the work runs. In controlled `rows` mode, resolving `onRowChange` alone does not clear the editor: the supplied rows must also reflect the accepted change. Until then the cell remains in `saving`. The edit moves through phases observable as `snapshot.editing.status`:
 
 ```text
 checking → editing → validating → saving → (cleared)
                 ↑__________|              |
               invalid (validate            |
               returned a string)           ↓
-                                         error (onRowChange threw)
+                                         error (callback failed)
 ```
 
-| Phase        | Meaning                                                            |
-| ------------ | ------------------------------------------------------------------ |
-| `checking`   | an async `editable` is resolving; no editor yet                    |
-| `editing`    | the editor is open and accepting input                             |
-| `validating` | `validate` is running on the draft                                 |
-| `saving`     | validation passed; `onRowChange` is in flight                      |
-| `error`      | `onRowChange` rejected; `snapshot.editing.error` holds the message |
+| Phase        | Meaning                                                       |
+| ------------ | ------------------------------------------------------------- |
+| `checking`   | edit permission is resolving; the editor is read-only         |
+| `editing`    | the editor is open and accepting input                        |
+| `validating` | the admitted draft is being read, parsed, or validated        |
+| `saving`     | validation passed; saving or awaiting controlled rows         |
+| `error`      | a callback failed; `snapshot.editing.error` holds the message |
 
 When `validate` returns a string the edit returns to `editing` with `snapshot.editing.error` set to that message. When `onRowChange` throws or rejects, the edit enters `error` (it does **not** clear) so you can surface the failure and let the user retry or cancel.
 
@@ -323,9 +328,10 @@ if (editing?.status === "saving") {
 
 The built-in editors handle commit, errors, and pending state for you — no wiring required:
 
-- **Blur commits in place.** Clicking away from an open editor commits the current draft without moving focus. (`Enter` and `Tab` commit _and_ move; blur commits and stays put.) The exceptions are the [enum combobox](#enums) and the [date editor](#dates), where a draft the editor can't resolve — text matching no option, or an unparseable date — reverts on blur instead.
-- **Failures keep the editor open.** When `validate` rejects (returns a string) or `onRowChange` throws, the editor stays open and renders the message inline below the field — so the user can fix the value and try again. Press `Enter` to retry a failed commit, or `Escape` to cancel.
-- **Async work locks the field.** While an async `editable`, `validate`, or `onRowChange` is in flight (the `checking`, `validating`, and `saving` phases), the field is read-only and marked `aria-busy="true"`, so the user can't edit a value mid-save.
+- **Blur commits in place.** Clicking away from an open editor commits the current draft without moving focus. (`Enter` and `Tab` commit _and_ move; blur commits and stays put.) The [date editor](#dates) reverts an unparseable date on blur. The [enum combobox](#enums) keeps ambiguous or unmatched text open with a validation error.
+- **Failures keep an established editor open.** A returned validation message or a thrown/rejected permission, parser, validation, or save callback leaves the draft available with an inline error. Press `Enter` to retry or `Escape` to cancel. After a failed permission check, retry checks permission again before parsing or saving; a denied check closes the edit without a write. A failure before an editor can be established, such as an initial formatter throwing, leaves no active edit and emits a diagnostic.
+- **Pending work locks the draft and commit path.** During `checking`, `validating`, and `saving`, the field is read-only and marked `aria-busy="true"`. Additional commit requests and `setDraft` writes are ignored, including requests from a custom editor. Parsing also runs under this protection, so a reentrant callback cannot dispatch a second save or change the draft being saved.
+- **Cancellation retires the session.** Late callback results cannot reopen a cancelled editor, alter its replacement, or move focus. Cancellation cannot undo a write already dispatched to your application; handle transaction rollback in the application if needed.
 
 [Boolean cells](#booleans) have no field: pending renders as a dimmed, disabled checkbox, and a failed commit shows the same inline error on the cell — click to retry, `Escape` to cancel.
 
@@ -341,14 +347,14 @@ Editing reuses the focused cell from the [selection](/docs/grid/selection) model
 | Double-click           | on an editable cell  | begin editing that cell                                                |
 | Any printable char     | cell focused         | begin editing, seeding the draft with that character (type-to-replace) |
 | `Enter` / `Space`      | boolean cell focused | toggle the checkbox and commit — no editor opens                       |
-| `Enter`                | editing              | commit, then move focus **down**                                       |
+| `Enter`                | editing              | commit, then move focus **down**; Shift reverses to **up**             |
 | `Cmd`/`Ctrl` + `Enter` | editing (multi-line) | commit, then move focus **down** (plain `Enter` inserts a newline)     |
-| `Tab`                  | editing              | commit, then move focus **right**                                      |
-| Arrow keys             | editing (date)       | move the calendar's highlighted day — ±1 day, ±7 for up/down           |
+| `Tab`                  | editing              | commit, then move focus **right**; Shift reverses to **left**          |
+| Arrow keys             | editing (date)       | up/down enter calendar navigation; arrows then move the cursor         |
 | `PageUp` / `PageDown`  | editing (date)       | move the calendar back / forward a month                               |
 | `Escape`               | editing              | cancel — discard the draft, restore the cell                           |
 
-A begin trigger on a non-editable column is a no-op. Editable [boolean columns](#booleans) never open an editor: `Enter` and `Space` toggle in place, `F2` and type-to-replace do nothing, and `Escape` cancels a failed toggle. While an editor is open it owns keystrokes; `Enter`, `Tab`, and `Escape` are handled by the editor and don't fall through to grid navigation — as are `ArrowUp` / `ArrowDown` in the [number](#numbers) and [enum](#enums) editors, and every arrow key in the [date](#dates) editor.
+A begin trigger on a non-editable column is a no-op. Editable [boolean columns](#booleans) never open an editor: `Enter` and `Space` toggle in place, `F2` and type-to-replace do nothing, and `Escape` cancels a failed toggle. While an editor is open it owns keystrokes; `Enter`, `Tab`, and `Escape` are handled by the editor and don't fall through to grid navigation — as are `ArrowUp` / `ArrowDown` in the [number](#numbers) and [enum](#enums) editors, and calendar navigation keys in the [date](#dates) editor.
 
 ## See also
 
@@ -357,3 +363,13 @@ A begin trigger on a non-editable column is a no-op. Editable [boolean columns](
 - [Keyboard](/docs/grid/keyboard) — the full keyboard contract.
 - [Headless engine](/docs/headless) — read `snapshot.editing` to build your own editor.
 - [API reference](/docs/grid/api-reference) — `PretableEditInput`, `PretableEditorInput`, `PretableEditState`, `PretableEditStatus` types.
+
+IME composition takes precedence over editor and grid commands. Enter,
+Escape, Tab and arrow events during composition retain browser behavior and
+do not save, cancel, step values or start an edit. Automated coverage includes
+composition events and the legacy key-code fallback; physical OS IME and human
+screen-reader validation are separate from those automated checks.
+
+The built-in fields resolve `components.TextInput` and `components.Textarea`;
+number/date action buttons resolve `components.IconButton`. Replacements must
+preserve native props, event handlers, ARIA/data hooks, and forwarded refs.
diff --git a/apps/website/content/docs/theming/override-tokens.mdx b/apps/website/content/docs/theming/override-tokens.mdx
index 336d035a4..fa7173ac0 100644
--- a/apps/website/content/docs/theming/override-tokens.mdx
+++ b/apps/website/content/docs/theming/override-tokens.mdx
@@ -106,7 +106,7 @@ See [Token reference](/docs/theming/token-reference) for the full list with desc
 
 - **Override at `:root`** — matches the theme's specificity, source order decides.
 - **Don't use `!important`** unless something else is fighting you. Cascade order should win cleanly.
-- **Scope overrides if needed** — to override per-section of your app, scope to a class or attribute: `.dashboard { --pretable-accent: red; } .reports { --pretable-accent: blue; }`. The grid inside each scope reads the locally scoped value.
+- **Scope overrides if needed** — to override per-section of your app, scope to a class or attribute: `.dashboard { --pretable-accent: red; } .reports { --pretable-accent: blue; }`. The grid inside each scope reads the locally scoped value. For popups, use an [overlay host in the same scope](/docs/grid/components#overlay-scope); the default body portal cannot inherit a section’s local CSS.
 
 ## Where to go next
 
diff --git a/apps/website/e2e/components.spec.ts b/apps/website/e2e/components.spec.ts
index d77e3635e..3bfba7e59 100644
--- a/apps/website/e2e/components.spec.ts
+++ b/apps/website/e2e/components.spec.ts
@@ -60,11 +60,15 @@ test("every button in the grid is the consumer's, including inside the portalled
   await expect(funnel).toHaveAttribute("data-fixture-icon", "filter-funnel");
   await funnel.click();
 
-  // The dialog is a child of <body>, and its Clear button is ours.
+  // The dialog escapes the grid into the body portal target, and its Clear button is ours.
   const dialog = page.locator("[data-pretable-filter-menu]");
   await expect(dialog).toBeVisible();
   expect(
-    await dialog.evaluate((el) => el.parentElement === document.body),
+    await dialog.evaluate(
+      (el) =>
+        el.closest("[data-pretable-overlay-root]")?.parentElement ===
+          document.body && !el.closest("[data-pretable-scroll-viewport]"),
+    ),
   ).toBe(true);
   await expect(dialog.locator("[data-pretable-filter-clear]")).toHaveAttribute(
     "data-fixture-button",
@@ -230,9 +234,13 @@ test("the kit's picker commits by keyboard, with typeahead, and Escape leaves fo
   await picker.focus();
   await page.keyboard.press("ArrowDown");
   await expect(list).toBeVisible();
-  expect(await list.evaluate((el) => el.parentElement === document.body)).toBe(
-    true,
-  );
+  expect(
+    await list.evaluate(
+      (el) =>
+        el.closest("[data-pretable-overlay-root]")?.parentElement ===
+          document.body && !el.closest("[data-pretable-scroll-viewport]"),
+    ),
+  ).toBe(true);
 
   // Typeahead by label prefix. The offered labels here are `Default (Sum)`,
   // `None`, `Sum`, `Average`, `Min`, `Max`, `Count`, so "a" is unambiguous —
@@ -255,6 +263,18 @@ test("the kit's picker commits by keyboard, with typeahead, and Escape leaves fo
   await expect(picker).toBeFocused();
   await expect(picker).toHaveAttribute("data-pretable-value", "avg");
   await expect(aggregateCell).toHaveText("Σ 123");
+
+  // A new popup session must not inherit the previous prefix. Unit tests pin
+  // the exact timer boundary; this checks the browser's close/open key flow.
+  await page.keyboard.press("ArrowDown");
+  await page.keyboard.press("m");
+  await page.keyboard.press("Escape");
+  await page.keyboard.press("ArrowDown");
+  await page.keyboard.press("c");
+  await page.keyboard.press("Enter");
+  await expect(picker).toHaveAttribute("data-pretable-value", "count");
+  await expect(list).toHaveCount(0);
+  await expect(picker).toBeFocused();
 });
 
 test("the funnel dialog survives a picked operator, and Escape unwinds one layer at a time", async ({
diff --git a/apps/website/e2e/edit-lifecycle.spec.ts b/apps/website/e2e/edit-lifecycle.spec.ts
new file mode 100644
index 000000000..f92943c6e
--- /dev/null
+++ b/apps/website/e2e/edit-lifecycle.spec.ts
@@ -0,0 +1,58 @@
+import { expect, test, type Page } from "@playwright/test";
+
+import { waitForGridReady } from "./helpers";
+
+async function openEditingExample(page: Page) {
+  await page.goto("/docs/grid/editing", { waitUntil: "domcontentloaded" });
+  const example = page.locator("figure").first();
+  await example.scrollIntoViewIfNeeded();
+  await waitForGridReady(page, "figure:first-of-type");
+  return example;
+}
+
+// The factory and surface unit tests count callback admission under deferred
+// promises. These exercise the remaining real-browser boundary: native field
+// keys, error recovery, and controlled rows reconciling a completed save.
+test("a rejected save can be corrected and committed through controlled rows", async ({
+  page,
+}) => {
+  const example = await openEditingExample(page);
+  const cell = example.locator(
+    '[data-pretable-row-id="s1"] [data-pretable-column-id="quantity"]',
+  );
+  await cell.click();
+  await page.keyboard.press("F2");
+  const editor = example.getByRole("textbox", {
+    name: "Quantity",
+    exact: true,
+  });
+  await expect(editor).toBeFocused();
+  await editor.fill("-1");
+  await editor.press("Enter");
+  await expect(example.locator("[data-pretable-edit-error]")).toHaveText(
+    "Quantity can't go negative",
+  );
+  await expect(editor).toHaveValue("-1");
+  await expect(editor).toBeEditable();
+
+  await editor.fill("25");
+  await editor.press("Enter");
+  await expect(editor).toHaveCount(0);
+  await expect(cell).toHaveText("25");
+  await expect(example.locator("[data-pretable-edit-error]")).toHaveCount(0);
+});
+
+test("a boolean keyboard toggle survives asynchronous save and rows reconciliation", async ({
+  page,
+}) => {
+  const example = await openEditingExample(page);
+  const checkbox = example
+    .locator('[data-pretable-row-id="s1"] [data-pretable-column-id="inStock"]')
+    .getByRole("checkbox");
+  await expect(checkbox).toBeChecked();
+  await checkbox.focus();
+  await checkbox.press("Space");
+  await expect(checkbox).not.toBeChecked();
+  await expect(checkbox).toBeEnabled();
+  await expect(example.locator("[data-pretable-edit-status]")).toHaveCount(0);
+});
diff --git a/apps/website/e2e/editor-kit.spec.ts b/apps/website/e2e/editor-kit.spec.ts
new file mode 100644
index 000000000..7184ed7b1
--- /dev/null
+++ b/apps/website/e2e/editor-kit.spec.ts
@@ -0,0 +1,240 @@
+import { expect, test, type Page } from "@playwright/test";
+import { waitForGridReady } from "./helpers";
+
+const cell = (page: Page, column: string) =>
+  page.locator(
+    `[data-pretable-row-id="a"] [data-pretable-column-id="${column}"]`,
+  );
+const field = (page: Page) => page.locator(".pretable-cell-editor");
+async function edit(page: Page, column: string) {
+  await cell(page, column).click();
+  await page.keyboard.press("F2");
+  await expect(field(page)).toBeFocused();
+}
+async function rows(page: Page) {
+  return JSON.parse(await page.locator("[data-saved-rows]").innerText());
+}
+test.beforeEach(async ({ page }) => {
+  await page.goto("/fixtures/editor-kit");
+  await waitForGridReady(page);
+});
+
+test("duplicate enum identity survives pristine commit, explicit choice, ambiguity and clearing", async ({
+  page,
+}) => {
+  await edit(page, "status");
+  await field(page).press("Enter");
+  await expect(field(page)).toHaveCount(0);
+  expect((await rows(page))[0].status).toBe("b");
+  await edit(page, "status");
+  await page.locator('[data-pretable-option-value="a"]').click();
+  await expect(field(page)).toHaveCount(0);
+  expect((await rows(page))[0].status).toBe("a");
+  await edit(page, "status");
+  await page.locator('[data-pretable-option-value="b"]').click();
+  await expect(field(page)).toHaveCount(0);
+  expect((await rows(page))[0].status).toBe("b");
+  await edit(page, "status");
+  await field(page).fill("");
+  await field(page).fill("Same");
+  await field(page).press("Enter");
+  await expect(field(page)).toHaveAttribute("aria-invalid", "true");
+  expect((await rows(page))[0].status).toBe("b");
+  await field(page).fill("");
+  await field(page).press("Enter");
+  await expect(field(page)).toHaveCount(0);
+  expect((await rows(page))[0].status).toBeNull();
+  await edit(page, "status");
+  await field(page).fill("");
+  await field(page).press("ArrowDown");
+  await page.getByRole("button", { name: "Outside editor" }).click();
+  await expect(field(page)).toHaveCount(0);
+  expect((await rows(page))[0].status).toBe("b");
+});
+
+test("reverse commit navigation and multiline native behavior survive component replacement", async ({
+  page,
+}) => {
+  await edit(page, "quantity");
+  await expect(field(page)).toHaveAttribute("data-fixture-input", "");
+  await expect(
+    page.getByRole("button", { name: "Increment", exact: true }),
+  ).toHaveAttribute("data-fixture-icon-button", "");
+  await field(page).fill("7");
+  await field(page).press("Shift+Tab");
+  await expect(field(page)).toHaveCount(0);
+  expect((await rows(page))[0].quantity).toBe(7);
+  await expect(cell(page, "name")).toHaveAttribute(
+    "data-pretable-focused",
+    "true",
+  );
+  await edit(page, "notes");
+  await expect(field(page)).toHaveAttribute("data-fixture-textarea", "");
+  await field(page).fill("One");
+  await field(page).press("End");
+  await field(page).press("Enter");
+  await page.keyboard.type("Two");
+  await expect(field(page)).toHaveValue("One\nTwo");
+  await field(page).press("Control+Enter");
+  await expect(field(page)).toHaveCount(0);
+  expect((await rows(page))[0].notes).toBe("One\nTwo");
+});
+
+test("composition retains native keys and never starts or commits grid editing", async ({
+  page,
+}) => {
+  await cell(page, "name").click();
+  await cell(page, "name").dispatchEvent("keydown", {
+    key: "Enter",
+    isComposing: true,
+    keyCode: 229,
+  });
+  await expect(field(page)).toHaveCount(0);
+  await edit(page, "quantity");
+  const result = await field(page).evaluate((el) => {
+    el.dispatchEvent(
+      new CompositionEvent("compositionstart", { bubbles: true }),
+    );
+    let consumed = false;
+    for (const key of ["Enter", "Escape", "ArrowUp", "Tab"]) {
+      const e = new KeyboardEvent("keydown", {
+        key,
+        bubbles: true,
+        cancelable: true,
+        isComposing: true,
+      });
+      el.dispatchEvent(e);
+      consumed ||= e.defaultPrevented;
+    }
+    el.dispatchEvent(new CompositionEvent("compositionend", { bubbles: true }));
+    return consumed;
+  });
+  expect(result).toBe(false);
+  await expect(field(page)).toHaveValue("2");
+  await expect(page.locator("[data-saved-count]")).toHaveText("0");
+  await field(page).press("Escape");
+  await expect(field(page)).toHaveCount(0);
+});
+
+test("calendar browsing preserves the draft until an explicit choice and exposes a grid combobox", async ({
+  page,
+}) => {
+  await edit(page, "date");
+  await expect(field(page)).toHaveAttribute("role", "combobox");
+  await expect(field(page)).toHaveAttribute("aria-haspopup", "grid");
+  await field(page).press("PageDown");
+  await expect(field(page)).toHaveValue("2026-08-18");
+  await page.getByRole("button", { name: "Outside editor" }).click();
+  await expect(field(page)).toHaveCount(0);
+  expect((await rows(page))[0].date).toBe("2026-08-18");
+  await edit(page, "date");
+  await page.getByRole("button", { name: "Next month", exact: true }).click();
+  await expect(field(page)).toHaveValue("2026-08-18");
+  await page.getByRole("gridcell", { name: "2026-09-18", exact: true }).click();
+  await expect(field(page)).toHaveCount(0);
+  expect((await rows(page))[0].date).toBe("2026-09-18");
+  await edit(page, "date");
+  await field(page).fill("   ");
+  await page.getByRole("button", { name: "Outside editor" }).click();
+  await expect(field(page)).toHaveCount(0);
+  expect((await rows(page))[0].date).toBeNull();
+  await edit(page, "date");
+  await field(page).fill("");
+  await field(page).press("Tab");
+  await expect(field(page)).toHaveCount(0);
+  expect((await rows(page))[0].date).toBeNull();
+});
+
+test("focused validation errors preserve usable width and error outline", async ({
+  page,
+}, info) => {
+  await edit(page, "quantity");
+  await field(page).fill("-1");
+  await field(page).press("Enter");
+  await expect(field(page)).toHaveAttribute("aria-invalid", "true");
+  await expect(page.locator("[data-pretable-edit-error]")).toHaveAttribute(
+    "title",
+    "Use a positive quantity",
+  );
+  const style = await field(page).evaluate((el) => ({
+    width: el.getBoundingClientRect().width,
+    outline: getComputedStyle(el).outlineColor,
+    error: getComputedStyle(el)
+      .getPropertyValue("--pretable-text-error")
+      .trim(),
+  }));
+  expect(style.width).toBeGreaterThan(110);
+  await expect(field(page)).toHaveCSS(
+    "outline-color",
+    await field(page).evaluate((el) => {
+      const probe = document.createElement("span");
+      probe.style.color = "var(--pretable-text-error)";
+      el.parentElement!.append(probe);
+      const color = getComputedStyle(probe).color;
+      probe.remove();
+      return color;
+    }),
+  );
+  await page.screenshot({ path: info.outputPath("number-error.png") });
+  await field(page).press("Escape");
+  await edit(page, "date");
+  await field(page).press("ArrowDown");
+  await expect(page.locator("[data-pretable-date-active]")).toHaveCount(1);
+  await page.screenshot({ path: info.outputPath("date-active.png") });
+  if (info.project.name === "chromium") {
+    await page.emulateMedia({ forcedColors: "active" });
+    await expect(page.locator("[data-pretable-date-active]")).toHaveCSS(
+      "outline-style",
+      "solid",
+    );
+    await page.screenshot({ path: info.outputPath("date-forced.png") });
+  }
+});
+
+test("compact errors leave room for readable field text", async ({ page }) => {
+  await page.getByRole("button", { name: "Toggle compact" }).click();
+  await waitForGridReady(page);
+  await edit(page, "quantity");
+  await field(page).fill("-1");
+  await field(page).press("Enter");
+  await expect(field(page)).toHaveAttribute("aria-invalid", "true");
+  const dimensions = await field(page).evaluate((el) => {
+    const style = getComputedStyle(el);
+    return {
+      content:
+        el.getBoundingClientRect().height -
+        parseFloat(style.paddingTop) -
+        parseFloat(style.paddingBottom),
+      font: parseFloat(style.fontSize),
+    };
+  });
+  expect(dimensions.content).toBeGreaterThanOrEqual(dimensions.font);
+});
+
+test("documentation date editor leaves room for the complete ISO date", async ({
+  page,
+}) => {
+  await page.goto("/docs/grid/editing");
+  const example = page.locator("figure").first();
+  await example.scrollIntoViewIfNeeded();
+  await example
+    .locator(
+      '[data-pretable-row-id="s1"] [data-pretable-column-id="restockBy"]',
+    )
+    .click();
+  await page.keyboard.press("F2");
+  await expect(field(page)).toBeFocused();
+  const size = await field(page).evaluate((el) => {
+    const style = getComputedStyle(el);
+    const context = document.createElement("canvas").getContext("2d")!;
+    context.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+    return {
+      text: context.measureText((el as HTMLInputElement).value).width,
+      space:
+        el.clientWidth -
+        parseFloat(style.paddingLeft) -
+        parseFloat(style.paddingRight),
+    };
+  });
+  expect(size.space).toBeGreaterThanOrEqual(size.text);
+});
diff --git a/apps/website/e2e/overlay-scope.spec.ts b/apps/website/e2e/overlay-scope.spec.ts
new file mode 100644
index 000000000..de63e0b77
--- /dev/null
+++ b/apps/website/e2e/overlay-scope.spec.ts
@@ -0,0 +1,155 @@
+import { expect, test, type Locator, type Page } from "@playwright/test";
+
+import { waitForGridReady } from "./helpers";
+
+async function expectAnchored(page: Page, trigger: Locator, overlay: Locator) {
+  await expect
+    .poll(async () => {
+      const anchor = await trigger.boundingBox();
+      const popup = await overlay.boundingBox();
+      const viewportWidth = await page.evaluate(() => window.innerWidth);
+      if (!anchor || !popup) return false;
+      const expectedLeft = Math.max(8, Math.min(anchor.x, viewportWidth - 248));
+      return (
+        Math.abs(popup.x - expectedLeft) < 1 &&
+        Math.abs(popup.y - (anchor.y + anchor.height + 4)) < 1
+      );
+    })
+    .toBe(true);
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/fixtures/overlay-scope");
+  await waitForGridReady(page, '[data-overlay-scope="Morning"]');
+  await waitForGridReady(page, '[data-overlay-scope="Evening"]');
+});
+
+test("sibling popups dismiss without swallowing outside presses or moving focus back", async ({
+  page,
+}) => {
+  const first = page.getByRole("combobox", {
+    name: "Morning first",
+    exact: true,
+  });
+  const second = page.getByRole("combobox", {
+    name: "Morning second",
+    exact: true,
+  });
+  await first.click();
+  await expect(first).toHaveAttribute("aria-expanded", "true");
+  await second.click();
+  await expect(first).toHaveAttribute("aria-expanded", "false");
+  await expect(second).toHaveAttribute("aria-expanded", "true");
+  await expect(page.getByRole("listbox")).toHaveCount(1);
+  await second.click();
+  await expect(second).toHaveAttribute("aria-expanded", "false");
+  await first.click();
+  const outside = page.getByRole("button", {
+    name: "Outside with stopped bubbling",
+  });
+  await outside.click();
+  await expect(page.getByRole("listbox")).toHaveCount(0);
+  await expect(first).not.toBeFocused();
+});
+
+test("portal hosts preserve two local token scopes and live direction/theme changes beyond clipping", async ({
+  page,
+}, testInfo) => {
+  for (const [name, background, direction] of [
+    ["Morning", "rgb(240, 248, 255)", "ltr"],
+    ["Evening", "rgb(17, 34, 51)", "rtl"],
+  ] as const) {
+    const scope = page.locator(`[data-overlay-scope="${name}"]`);
+    const host = scope.locator("[data-overlay-host]");
+    const trigger = page.getByRole("combobox", {
+      name: `${name} first`,
+      exact: true,
+    });
+    await trigger.click();
+    const list = host.getByRole("listbox");
+    await expect(list).toBeVisible();
+    await expect(list).toHaveCSS("background-color", background);
+    await expect(list).toHaveCSS("direction", direction);
+    const listBox = await list.boundingBox();
+    const clipBox = await scope.locator("[data-scope-clip]").boundingBox();
+    expect(listBox).not.toBeNull();
+    expect(clipBox).not.toBeNull();
+    expect(listBox!.y + listBox!.height).toBeGreaterThan(
+      clipBox!.y + clipBox!.height,
+    );
+    // Keyboard activation models an external live theme update without an
+    // outside pointerdown deliberately dismissing the popup first.
+    const themeToggle = page.getByRole("button", {
+      name: `Toggle ${name} theme`,
+      exact: true,
+    });
+    await themeToggle.focus();
+    await themeToggle.press("Enter");
+    await expect(list).toHaveCSS(
+      "background-color",
+      name === "Morning" ? "rgb(17, 34, 51)" : "rgb(240, 248, 255)",
+    );
+    const directionToggle = page.getByRole("button", {
+      name: `Toggle ${name} direction`,
+      exact: true,
+    });
+    await directionToggle.focus();
+    await directionToggle.press("Enter");
+    await expect(list).toHaveCSS(
+      "direction",
+      direction === "ltr" ? "rtl" : "ltr",
+    );
+    await expectAnchored(page, trigger, list);
+    await page.screenshot({
+      path: testInfo.outputPath(`live-${name}.png`),
+      fullPage: true,
+    });
+    await trigger.press("Escape");
+    await expect(list).toHaveCount(0);
+  }
+});
+
+test("nested filter choices stay in their local host and Escape dismisses one layer", async ({
+  page,
+}) => {
+  const scope = page.locator('[data-overlay-scope="Evening"]');
+  const host = scope.locator("[data-overlay-host]");
+  const funnel = scope.locator(
+    '[data-pretable-filter-funnel][data-pretable-column-id="name"]',
+  );
+  await funnel.click();
+  const dialog = host.locator("[data-pretable-filter-menu]");
+  await expect(dialog).toBeVisible();
+  const operator = dialog.locator("[data-pretable-filter-operator]");
+  await operator.click();
+  const list = host.getByRole("listbox");
+  await expect(list).toHaveCSS("background-color", "rgb(17, 34, 51)");
+  await expect(list).toHaveCSS("direction", "rtl");
+  const themeToggle = page.getByRole("button", {
+    name: "Toggle Evening theme",
+    exact: true,
+  });
+  await themeToggle.focus();
+  await themeToggle.press("Enter");
+  await expect(list).toHaveCSS("background-color", "rgb(240, 248, 255)");
+  const directionToggle = page.getByRole("button", {
+    name: "Toggle Evening direction",
+    exact: true,
+  });
+  await directionToggle.focus();
+  await directionToggle.press("Enter");
+  await expect(list).toHaveCSS("direction", "ltr");
+  await expect(dialog).toBeVisible();
+  await expectAnchored(page, funnel, dialog);
+  await expectAnchored(page, operator, list);
+  await list.locator('[data-pretable-option-value="startsWith"]').click();
+  await expect(dialog).toBeVisible();
+  await expect(operator).toHaveAttribute("data-pretable-value", "startsWith");
+  await operator.click();
+  await operator.press("Escape");
+  await expect(list).toHaveCount(0);
+  await expect(dialog).toBeVisible();
+  await expect(operator).toBeFocused();
+  await operator.press("Escape");
+  await expect(dialog).toHaveCount(0);
+});
diff --git a/apps/website/lib/docs/__tests__/docs-api-surface.test.ts b/apps/website/lib/docs/__tests__/docs-api-surface.test.ts
index 67c6ac529..c2e3b3505 100644
--- a/apps/website/lib/docs/__tests__/docs-api-surface.test.ts
+++ b/apps/website/lib/docs/__tests__/docs-api-surface.test.ts
@@ -1344,6 +1344,14 @@ const SLICE_OF = (type: string, owner: string): string =>
  * cannot slip in unbound and a deleted one cannot leave a stale entry.
  */
 const TABLES: Record<string, TableBinding> = {
+  "grid/components.mdx#Textarea": {
+    types: [{ pkg: "react", name: "PretableTextareaProps" }],
+    complete: true,
+  },
+  "grid/components.mdx#Overlay scope": {
+    types: [{ pkg: "react", name: "PretableOverlayProviderProps" }],
+    complete: true,
+  },
   "grid/tool-panel.mdx#Configuration": {
     types: [{ pkg: "react", name: "PretableToolPanelConfig" }],
     complete: true,
@@ -1567,6 +1575,8 @@ const MEMBER_TABLE_OPTIONALITY: Record<string, true | string> = {
  * entry fails too.
  */
 const MEMBER_TABLE_TYPES: Record<string, true | string> = {
+  "grid/components.mdx#Textarea": true,
+  "grid/components.mdx#Overlay scope": true,
   "grid/export.mdx#Options": true,
   "grid/tool-panel.mdx#Configuration": true,
   "grid/tool-panel.mdx#The descriptor": true,
diff --git a/docs/research/2026-09-08-component-kit-audit.md b/docs/research/2026-09-08-component-kit-audit.md
new file mode 100644
index 000000000..f50027011
--- /dev/null
+++ b/docs/research/2026-09-08-component-kit-audit.md
@@ -0,0 +1,362 @@
+# Component kit audit
+
+Date: 2026-09-08
+Baseline: `53c4a000` (`@pretable/react` 0.18.0)
+Status: A1–A14 repaired; final integration verification recorded in SP4D plan
+
+## Mandate and boundaries
+
+The user approved continuing SP4 and requested a fresh-slate audit. Existing
+SP1–SP3 decisions are revisable, and breaking changes are allowed when they
+correct a defect. The earlier handoff's frozen-contract language therefore
+does not govern new decisions.
+
+Reviewed: the five kit components, listbox keyboard/markup, context and refs,
+editor adapters and controller, their surface/core integration, relevant
+styles/themes, tests, and documentation. This is a targeted source and runtime
+audit, not a claim that every grid subsystem is correct. No production-browser
+visual measurement, physical IME session, or human screen-reader pass was
+performed in this audit.
+
+The handoff describes a native date picker; the source already contains a
+custom calendar. SP4 must start from the source's behavior.
+
+## Evidence
+
+Using Node 24.20.0 and the repository-pinned pnpm 10.12.1:
+
+- `pnpm --filter '@pretable/react...' build`: passed.
+- `pnpm --filter @pretable/react test components use-cell-edit-controller cell-editor`:
+  12 files, 156 tests passed.
+- `pnpm --filter @pretable/ui test`: 4 files, 113 tests passed.
+
+The tests were run through the package scripts, including jsdom. These are
+targeted baseline checks, not the full workspace or browser suites. The
+machine's default pnpm 11 initially added an `allowBuilds` placeholder and
+rejected its install; that generated change was removed and installation
+completed with pinned pnpm. No dependency manifest or lockfile change remains.
+
+Independent temporary harnesses against the baseline source produced:
+
+```text
+Two sequential trigger presses: open listboxes= 2
+Shrink options while open: active descendant exists= false
+Empty options while open: expanded= true listboxes= 0
+ReactNode Beta typeahead active= Alpha
+React 19 callback ref: cleanup= 0 null calls= 1
+Save before denied editable resolves: 1
+Concurrent save calls: 2
+Validator failure escaped: validator rejected remaining status: validating
+Second duplicate-label option parsed: { ok: true, value: 'a' }
+```
+
+The control harness used React 19, jsdom, and Testing Library against source
+imports. The controller harness used the exported controller factory with a
+minimal stateful grid adapter and deferred promises. The enum parser result
+was checked directly. These demonstrate the stated behaviors; they do not
+substitute for the surface and browser regressions required by the repairs.
+
+## Lifecycle repair verification
+
+A1–A3 were repaired in `8f4268ac`, `c8e94e4e`, `b70e6637`, and
+`bc6c3065`. Final checks passed: 1,939 React tests, 194 combined internal/public
+core tests, React/core type checking, 26 documentation tests, production site
+build, and six Chromium/WebKit editing checks. Mutation checks verified the
+admission, stale-session, pending-draft, parser-await, pending-key, and enum
+normalization guards. See the [implementation plan](../superpowers/plans/2026-09-08-components-sp4a-lifecycle.md)
+for commands and review evidence. This phase closed A1–A3; current resolution
+statuses appear below.
+
+## Control-state repair verification
+
+A8–A10/A14 are repaired by `8b6a1bf3`, `e0a648d1` and the final Select helper
+integration. Verification and migration details are in the
+[SP4B plan](../superpowers/plans/2026-09-08-components-sp4b-control-state.md).
+No CSS was changed in SP4B; overlay and visual repairs follow below.
+
+## Overlay and visual-state repair verification
+
+A7/A11–A13 are repaired in `21421a79`, `19cd1bae` and `bd5fe3c1`.
+Scoped inheritance requires the documented explicit provider host; body
+remains the default. Visual QA also exposed and repaired stale anchoring when
+live direction changes move a trigger. React and UI migrate together to the
+`data-pretable-active` marker.
+
+Verification passed 1,987 React tests, 116 UI tests, the packed React
+18.0.0/18.3.1/19.2.8 matrix, 38 documentation guards, and the production build.
+The [SP4C plan](../superpowers/plans/2026-09-08-components-sp4c-overlays.md)
+records final browser/type/API results, independent reviews and mutation checks.
+[Visual evidence](assets/sp4c/README.md) separates production scoped popups
+from exact-markup CSS state checks. Forced-color evidence is Chromium emulation;
+physical Windows and human assistive-technology checks remain unperformed.
+
+## Findings
+
+The descriptions and line references below record the baseline defects. A1–A3
+are resolved by the lifecycle repair; A8–A10/A14 by the control-state repair.
+A7/A11–A13 are resolved by the overlay repair; A4–A6 by SP4D.
+
+### A1 — P1: a pending edit can commit before permission resolves, or save twice
+
+**Resolved:** controller-owned permission and commit admission, exact session
+identity, pending core draft protection, and pending editor command guards.
+
+`packages/react/src/use-cell-edit-controller.ts:152` admits a commit whenever
+an edit exists. The optional authorization argument checks identity only when
+supplied; the normal surface editor calls `commit(dir)` without it at
+`pretable-surface.tsx:7709`. The shared keyboard handler commits Enter/Tab
+without checking pending status (`editors/use-editor-field.ts:55`).
+
+Reproduce with a deferred `editable` callback: begin, commit, then resolve
+permission false. One save has already happened. With a deferred save, call
+commit twice: the callback runs twice. Tokens suppress stale completion
+updates but cannot retract dispatched writes. This bypasses the application's
+editability predicate; it is not evidence of bypassing server authorization.
+
+Repair: controller-owned authorization and allowed transitions, a synchronous
+single-flight barrier before callbacks, and keyboard guards as a second layer.
+
+### A2 — P1: extension failures escape and leave pending states stuck
+
+**Resolved:** callback failures retain a recoverable draft; permission retries
+recheck authorization; asynchronous parsing is awaited; stale completions are
+inert. Failed replacement begins retire the previous edit before callbacks.
+
+`use-cell-edit-controller.ts:140,169,189` invokes `editable`, `parseEditValue`,
+and `validate` outside the save catch. A rejected validator leaves
+`validating` and rejects the controller promise. Surface callers discard that
+promise with `void`. Permission rejection similarly strands `checking`.
+
+Repair: token-aware error recovery for every callback boundary, with an
+explicit retry policy that cannot manufacture permission after a failed check.
+Also cover `formatEditValue` and row/value lookup failures at begin/commit.
+
+### A3 — P1: enum label normalization changes checking into editing
+
+**Resolved:** pending core draft writes are ignored and enum normalization waits
+for permission. User corrections after permission errors are preserved. Real
+surface regressions cover allowed and denied deferred permission.
+
+`editors/EnumCellEditor.tsx:106` writes the label into the draft on mount.
+`packages/grid-core/src/create-grid-ui-core.ts:891` changes every changed
+draft write to status `editing`. An async-editable enum whose value and label
+differ therefore becomes writable before permission resolves.
+
+This chain is source-confirmed, with a surface reproduction required during
+repair. Do not fix only the enum effect: draft writes must not unlock a
+pending phase, and the controller must independently require authorization.
+
+### A4 — P1: enum labels are used as identity and can save the wrong value
+
+**Resolved:** tagged canonical choices preserve pristine/formatted and explicit
+identity, including duplicate labels and value/label collisions. Built-in parsing
+rejects removed choices and ambiguous queries. Custom parsers remain authoritative.
+
+`EnumCellEditor.tsx:130` writes the chosen label, and
+`editors/enum-options.ts:19` resolves the first label match. For values `a`
+and `b`, both labelled `Same`, clicking `b` writes text that parses to `a`.
+Value/label collisions and case-folding produce related ambiguity.
+
+Repair: distinguish the canonical selected value from editable search text.
+A clicked option commits its identity, not a round-trip through its label.
+Typed ambiguous text must require a choice rather than silently take the first.
+
+### A5 — P2: composition keys are treated as editor commands
+
+**Resolved in automated coverage:** shared composition state, native composing
+flag and legacy 229 fallback guard fields and grid edit entry. Physical OS IME
+and human assistive-technology checks remain outside this automated evidence.
+
+No composition guard exists in `use-editor-field.ts`, the specialized editor
+key handlers, or the surface's edit-entry keyboard path. Enter confirming an
+IME candidate can commit the cell; number/date arrows can consume candidate
+navigation. This is a source-confirmed missing guard; validate actual IME
+behavior in a browser in addition to synthetic regression events.
+
+Repair: one composition policy before editor-specific and grid key behavior,
+including composition state and the relevant browser fallback. Preserve native
+text editing rather than intercepting composition keys.
+
+### A6 — P2: enum clearing and reverse navigation are broken
+
+**Resolved:** blank enum queries clear unless intentionally navigated; Tab/Enter
+honor Shift direction. Controlled row acknowledgement retains the direction
+under the existing session token, including delayed and cancelled saves.
+
+Empty enum text cancels on blur (`EnumCellEditor.tsx:181`), and Enter/Tab
+chooses the highlighted first option. The parser supports empty → null, but
+the editor offers no reliable way to reach it. Separately, shared Tab handling
+and the enum override always move right, including Shift+Tab.
+
+Repair: an explicit empty query commits null absent an intentional option
+choice; Shift+Tab commits left. Share the directional policy. Decide
+Shift+Enter consistently with existing grid navigation when specifying the
+editor interaction change.
+
+### A7 — P2: sibling selects can leave multiple popups open
+
+**Resolved:** Capture-phase outside presses follow logical portal ancestry and exempt the owning trigger. Siblings dismiss; nested portals preserve their parent. Escape unwinds one layer without stealing outside focus.
+
+Every Select stops pointerdown propagation (`components/select.tsx:250`),
+while Listbox dismisses from a bubbling document listener (`listbox.tsx:127`).
+Click A, then B: A never observes the outside press. Both remain expanded.
+
+Repair: explicit overlay ownership, with the trigger and descendant portals
+treated as inside the owning overlay. Sibling overlays are outside. Preserve
+the important nested-filter case without blanket propagation suppression.
+Test focus transfer and keyboard dismissal as well as clicks.
+
+### A8 — P2: changing options invalidates active-descendant state
+
+**Resolved:** Active identity now follows the option value across roster changes, with
+an enabled fallback on removal/disable and no stale resurrection. Empty Select
+rosters close; all-disabled lists have no active descendant or commit.
+
+`listbox.tsx:272` reseeds activeIndex only on open. Shrinking an open roster
+leaves a nonexistent active id; emptying it leaves an expanded trigger with no
+list; reordering can silently highlight a different value.
+
+Repair: track/reconcile active identity, select an enabled fallback when
+removed/disabled, and close an empty roster. Emit ARIA references only for
+rendered targets. Cover reorder, shrink, removal, disabling, and all-disabled.
+
+### A9 — P2: rich option labels cannot use typeahead
+
+**Resolved:** Rich labels now require explicit `textValue` in the public/internal option
+union. Primitive labels retain inferred text; migration docs and public type
+tests cover the deliberate type tightening.
+
+The public option label is `ReactNode`, but `listbox.tsx:84` recognizes only
+strings and numbers. `<span>Beta</span>` is visible but cannot match `b`.
+The comment claiming rendered-text support is incorrect.
+
+Repair: require an explicit textual representation for rich labels (a
+discriminated option shape can enforce this), while inferring it for plain
+strings/numbers. Do not attempt to execute arbitrary React components to
+discover text.
+
+### A10 — P2: merged refs discard React 19 cleanup callbacks
+
+**Resolved:** Select, Checkbox and TextInput share cleanup-aware ref composition.
+Replacement, StrictMode and detach are tested; packed consumers verify cleanup
+under React 18.0.0, 18.3.1 and 19.2.8.
+
+`select.tsx:145`, `checkbox.tsx:102`, and `text-input.tsx:85` discard the
+return value of consumer callback refs. The baseline invokes `ref(null)` but
+never the supplied cleanup. React 19 explicitly supports returned cleanup
+functions; see [React's ref callback contract](https://react.dev/reference/react-dom/components/common#ref-callback).
+
+Repair: a shared ref-composition helper covering React 18 null detach and
+React 19 returned cleanup. Test ref replacement, unmount, and StrictMode
+lifecycle, not just initial node assignment.
+
+### A11 — P2: portalled content loses scoped theme and direction inheritance
+
+**Resolved:** The public `PretableOverlayProvider` supports an explicit host in the local theme/direction scope, outside the clipping viewport. Applications must configure that host; the default remains body and does not copy trigger styles. Null targets wait with truthful ARIA and attachment-time focus.
+
+`overlay/OverlayPortal.tsx:19` always portals to body. A grid under a locally
+scoped token override or dark theme therefore has a correctly themed trigger
+and a popup inheriting the body theme. The per-section theming recipe promises
+scoped overrides (`apps/website/content/docs/theming/override-tokens.mdx:109`).
+
+Repair: a documented overlay theme/direction scope that survives escaping the
+clipping viewport. React context survives a portal, but CSS inheritance does
+not. Validate multiple differently themed grids and nested popups on one page,
+including live theme changes. Merely copying `data-theme` misses custom tokens.
+
+### A12 — P2: disabled and forced-colors listbox states are incomplete
+
+**Resolved:** Disabled options keep disabled ink/cursors without enabled hover paint. Forced-color active outlines and selected-disabled combinations are explicit. The active marker is now `data-pretable-active` in React, CSS and current docs.
+
+`packages/ui/grid.css:227` gives all options a pointer cursor and hover fill;
+`aria-disabled` is not styled. The forced-colors rule at `:2469` addresses
+committed selection only. Keyboard highlight uses an author background, with
+DOM focus retained on the trigger, so it has no independent system-color
+indicator when moving away from the selected option.
+
+The missing state selectors are proven; visual consequences need browser
+measurement. Add disabled ink/cursor and guarded hover, and distinguish active
+focus from committed selection in forced colors. The current CSS guards assert
+individual rules, not these state combinations.
+
+### A13 — P2: checked/disabled checkboxes collide in forced colors
+
+**Resolved:** Disabled checkbox states have distinct ordinary styling and explicit system-color fill, glyph, border and outline pairs. Chromium forced-color and ordinary Chromium/WebKit screenshots were inspected.
+
+The disabled `GrayText` rule at `grid.css:2454` loses to the later
+checked/mixed `HighlightText` rule at `:2480` at equal zero specificity.
+That checked rule sets `forced-color-adjust:none` but leaves author border and
+focus colors in place. Define the combined states with system border, fill,
+glyph, and outline colors and verify contrast visually.
+
+### A14 — P3: typeahead buffer survives closing and reopening
+
+**Resolved:** Typeahead clears at popup session boundaries. A fake-timer regression and
+real Chromium/WebKit rapid-reopen flow reproduce the old bug and verify repair.
+
+`listbox.tsx:284,337` resets the buffer only after its 500ms timer. Type `b`,
+close, reopen quickly, type `a`: the next session searches `ba`. This is
+source-confirmed and needs a fake-timer regression. Reset on session boundaries.
+
+## Additional corrections and design questions
+
+The baseline items below are resolved in SP4D (`45f9e073`, `71c4c13a` and
+integration changes): native Textarea and all five editor fields use the kit;
+number/date actions resolve IconButton; date cursor no longer writes the draft;
+date ARIA describes a grid-popup combobox. Naming warnings now inspect bounded
+DOM text sources, and source/docs explain their limits. Stale DOM/context claims
+are corrected. CSS preserves invalid/focus/pending states, leaves readable room
+for field text beside an error, and gives calendar states system-color pairs.
+See the [SP4D plan](../superpowers/plans/2026-09-08-components-sp4d-editors.md)
+and [visual evidence](assets/sp4d/README.md) for final verification and boundaries.
+
+- **Resolved in SP4C:** renamed bare `data-active` to `data-pretable-active`, updating consumers,
+  guards, docs, and migration notes. Old release notes are historical records;
+  document the new name in the new release rather than rewriting history.
+- Fix the four stale “warns in development” test names. `warnOnce` also runs
+  in production. `hasAccessibleName` is a heuristic: nonexistent labelledby
+  targets and empty labels suppress warnings. Either tighten it against the
+  actual named DOM nodes or describe its limitations accurately.
+- Correct the claim that buttons have no `.value`; HTMLButtonElement does.
+  The data attribute represents this component's committed value by design.
+- Correct “context crosses portals, props do not”: props can be passed through
+  portal-rendered React trees; context avoids manually forwarding every slot.
+- Native checkboxes do support tabindex. The docs' stated rationale for a
+  button checkbox is overstated. No demonstrated defect currently warrants
+  replacing that implementation wholesale; verify its native accessibility
+  tree and label interaction before keeping the rationale as a guarantee.
+- Date input supplies active-descendant to a plain textbox without a complete
+  combobox/grid-popup contract. Define it against the
+  [WAI combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
+  Calendar cursor navigation currently writes the draft, so browsing a month
+  then blurring can save a new date. Prefer separate cursor and committed
+  selection; this is a deliberate behavior change, not pixel parity work.
+- Date navigation and number steppers remain native buttons. They must be
+  included in the final control inventory; migrating five fields alone does
+  not mean every editor control uses the kit.
+- Moving editors onto TextInput without changing state precedence would erase
+  the invalid outline at `grid.css:1500` with the final focus outline shorthand
+  at `:2206`. This is a migration hazard, not a current native-editor bug.
+
+## Repair sequence
+
+1. **Lifecycle safety:** A1–A3. Specify and enforce authorization, phase,
+   single-flight, errors, stale results, and pending draft rules. This is the
+   first bounded implementation spec.
+2. **Shared kit foundations:** A7–A14, overlay scope, names and documentation.
+   Capture production visual baselines before any styling changes. Resolve
+   the overlay theme API in its own design, with live scoped-theme examples.
+3. **Editor semantics and SP4:** A4–A6, date interaction/accessibility,
+   TextInput adoption, Textarea, editor buttons, and state CSS. Thin kit
+   controls carry native/ARIA state; the edit controller retains lifecycle
+   authority. Each deliberate visual or interaction change is recorded.
+
+These are separate reviewable changes within the component-kit program. A
+one-shot rewrite would combine state authority, popup ownership, and editor
+semantics in a way that makes regressions difficult to attribute. Conversely,
+the original five-field migration alone would preserve demonstrated bugs.
+
+Completion requires all findings above to be repaired or explicitly resolved
+with evidence, plus production browser checks and a clearly reported human
+assistive-technology validation boundary. Passing the existing 269 targeted
+tests is a baseline, not that completion criterion.
diff --git a/docs/research/assets/sp4c/README.md b/docs/research/assets/sp4c/README.md
new file mode 100644
index 000000000..d1c1b0e2c
--- /dev/null
+++ b/docs/research/assets/sp4c/README.md
@@ -0,0 +1,30 @@
+# SP4C control-state visual evidence
+
+2026-09-08. Baseline CSS: `356e447f`; corrected CSS: `21421a79`.
+
+The state harness uses the kit's actual option/checkbox DOM attributes and SVG
+markup with the checked-in grid stylesheet and house theme. It isolates CSS
+state combinations from application layout. Production React popup scope is
+verified separately by `apps/website/e2e/overlay-scope.spec.ts`.
+
+- [Forced light before](baseline-light-active.png) / [after](after-chromium-light-active.png): active option now has an independent outline; disabled and committed-disabled options use disabled system ink; disabled checked/mixed glyphs remain visible on the disabled surface.
+- [Ordinary dark before](baseline-dark-none.png) / [after](after-chromium-dark-none.png): disabled checkboxes use a neutral surface, dim glyph and dashed border instead of looking enabled.
+- [Forced dark OS palette before](baseline-chromium-dark-os-forced.png) / [after](after-chromium-dark-os-forced.png): system Canvas, Highlight, GrayText and their corresponding text/focus colors survive without author blue borders.
+- [Ordinary WebKit dark after](after-webkit-dark-none.png): independent engine check of normal states.
+
+Images were inspected and computed-state assertions checked disabled hover,
+active outlines, checked/disabled fills and system borders/focus. Forced-color
+emulation is Chromium evidence; it is not a physical Windows high-contrast or
+human assistive-technology validation claim. Full task-local measurement logs
+and the HTML/CLI harness are at `/tmp/pretable-sp4c-visual` on the task machine.
+
+Production build after `bd5fe3c1`:
+
+- [Chromium live dark/RTL scope](production-chromium-live-scope.png)
+- [WebKit live light/LTR scope](production-webkit-live-scope.png)
+
+These are the real React fixture after keyboard-triggered theme/direction
+changes. Both engines assert token inheritance, direction, escaped clipping
+and popup coordinates relative to the moved trigger. Nested filter dialogs
+and their inner lists have the same position checks. Screenshots were visually
+inspected after the final 16-case production run passed.
diff --git a/docs/research/assets/sp4c/after-chromium-dark-none.png b/docs/research/assets/sp4c/after-chromium-dark-none.png
new file mode 100644
index 000000000..b134984cf
Binary files /dev/null and b/docs/research/assets/sp4c/after-chromium-dark-none.png differ
diff --git a/docs/research/assets/sp4c/after-chromium-dark-os-forced.png b/docs/research/assets/sp4c/after-chromium-dark-os-forced.png
new file mode 100644
index 000000000..6240b5d31
Binary files /dev/null and b/docs/research/assets/sp4c/after-chromium-dark-os-forced.png differ
diff --git a/docs/research/assets/sp4c/after-chromium-light-active.png b/docs/research/assets/sp4c/after-chromium-light-active.png
new file mode 100644
index 000000000..35dea80cb
Binary files /dev/null and b/docs/research/assets/sp4c/after-chromium-light-active.png differ
diff --git a/docs/research/assets/sp4c/after-webkit-dark-none.png b/docs/research/assets/sp4c/after-webkit-dark-none.png
new file mode 100644
index 000000000..358dddfa7
Binary files /dev/null and b/docs/research/assets/sp4c/after-webkit-dark-none.png differ
diff --git a/docs/research/assets/sp4c/baseline-chromium-dark-os-forced.png b/docs/research/assets/sp4c/baseline-chromium-dark-os-forced.png
new file mode 100644
index 000000000..63db7648c
Binary files /dev/null and b/docs/research/assets/sp4c/baseline-chromium-dark-os-forced.png differ
diff --git a/docs/research/assets/sp4c/baseline-dark-none.png b/docs/research/assets/sp4c/baseline-dark-none.png
new file mode 100644
index 000000000..f235390d4
Binary files /dev/null and b/docs/research/assets/sp4c/baseline-dark-none.png differ
diff --git a/docs/research/assets/sp4c/baseline-light-active.png b/docs/research/assets/sp4c/baseline-light-active.png
new file mode 100644
index 000000000..f3757e091
Binary files /dev/null and b/docs/research/assets/sp4c/baseline-light-active.png differ
diff --git a/docs/research/assets/sp4c/production-chromium-live-scope.png b/docs/research/assets/sp4c/production-chromium-live-scope.png
new file mode 100644
index 000000000..38f14b304
Binary files /dev/null and b/docs/research/assets/sp4c/production-chromium-live-scope.png differ
diff --git a/docs/research/assets/sp4c/production-webkit-live-scope.png b/docs/research/assets/sp4c/production-webkit-live-scope.png
new file mode 100644
index 000000000..2af569167
Binary files /dev/null and b/docs/research/assets/sp4c/production-webkit-live-scope.png differ
diff --git a/docs/research/assets/sp4d/README.md b/docs/research/assets/sp4d/README.md
new file mode 100644
index 000000000..6b9b8fdca
--- /dev/null
+++ b/docs/research/assets/sp4d/README.md
@@ -0,0 +1,38 @@
+# Editor kit production visual checks
+
+Baseline: `04dc1b5e`, production Next build, `/docs/grid/editing`, first
+async editing example, 1280 × 900 viewport. The matching flows open Quantity,
+enter `1.5` and commit to show the whole-number validation error, then cancel
+and open Restock by. Chromium and WebKit use the same flows.
+
+The baseline number error places its message beside the input and squeezes
+away the editable value. The repair gives the message its own line and keeps
+the field at the cell width. Editor-specific geometry and invalid outlines
+must remain authoritative when TextInput/Textarea provide the native field.
+
+- `baseline-*-number-error.png`: original validation layout.
+- `baseline-*-date.png`: original date field and calendar.
+- `baseline-chromium-date-forced.png`: original forced-color calendar.
+
+Matched `after-*` screenshots use the production build containing `71c4c13a`
+and the final editor CSS. Both engines display the number draft above a single
+error line, with the error outline retained; full error text remains in the
+alert and its hover title. The date-only padding correction leaves the full ISO
+date visible. The browser measurement initially failed in both engines:
+79.5px text competed for 78px of content space. The corrected field has 102px.
+
+The companion `*-measurements.json` files record number-field and stepper
+geometry. The narrow docs quantity field grows from its squeezed baseline to
+roughly 75px, with a roughly 28px height while the error is shown. The wider
+fixture also passes compact-density content-height and error-outline checks.
+
+Chromium forced-color screenshots show system-painted calendar selection and
+active outlines; WebKit screenshots verify ordinary layout. The fixture's
+calendar-active test distinguishes a moved cursor from the selected date.
+Direct Chrome MCP interaction verified save direction, full date selection,
+truthful combobox/grid references, browsing without a changed saved date, and
+no warning/error console messages.
+
+Final local focused production suite: 34 Chromium/WebKit checks passed. Chromium forced-colors emulation is a rendering
+check; synthetic composition events are regression checks. Neither represents
+a physical OS IME session or a human screen-reader pass.
diff --git a/docs/research/assets/sp4d/after-chromium-date-forced.png b/docs/research/assets/sp4d/after-chromium-date-forced.png
new file mode 100644
index 000000000..b252fe3ee
Binary files /dev/null and b/docs/research/assets/sp4d/after-chromium-date-forced.png differ
diff --git a/docs/research/assets/sp4d/after-chromium-date.png b/docs/research/assets/sp4d/after-chromium-date.png
new file mode 100644
index 000000000..dca110b08
Binary files /dev/null and b/docs/research/assets/sp4d/after-chromium-date.png differ
diff --git a/docs/research/assets/sp4d/after-chromium-measurements.json b/docs/research/assets/sp4d/after-chromium-measurements.json
new file mode 100644
index 000000000..03eb5aeee
--- /dev/null
+++ b/docs/research/assets/sp4d/after-chromium-measurements.json
@@ -0,0 +1,50 @@
+[
+  {
+    "tag": "INPUT",
+    "label": "Quantity",
+    "rect": {
+      "x": 504,
+      "y": 535.421875,
+      "width": 74.640625,
+      "height": 28.203125,
+      "top": 535.421875,
+      "right": 578.640625,
+      "bottom": 563.625,
+      "left": 504
+    },
+    "outline": "rgb(192, 39, 28) solid 2px",
+    "padding": "2px 16px"
+  },
+  {
+    "tag": "BUTTON",
+    "label": "Increment",
+    "rect": {
+      "x": 578.640625,
+      "y": 537.515625,
+      "width": 14.359375,
+      "height": 12,
+      "top": 537.515625,
+      "right": 593,
+      "bottom": 549.515625,
+      "left": 578.640625
+    },
+    "outline": "rgb(94, 94, 106) none 3px",
+    "padding": "2px 4px"
+  },
+  {
+    "tag": "BUTTON",
+    "label": "Decrement",
+    "rect": {
+      "x": 578.640625,
+      "y": 549.515625,
+      "width": 14.359375,
+      "height": 12,
+      "top": 549.515625,
+      "right": 593,
+      "bottom": 561.515625,
+      "left": 578.640625
+    },
+    "outline": "rgb(94, 94, 106) none 3px",
+    "padding": "2px 4px"
+  }
+]
diff --git a/docs/research/assets/sp4d/after-chromium-number-error.png b/docs/research/assets/sp4d/after-chromium-number-error.png
new file mode 100644
index 000000000..7ec5d15ba
Binary files /dev/null and b/docs/research/assets/sp4d/after-chromium-number-error.png differ
diff --git a/docs/research/assets/sp4d/after-webkit-date.png b/docs/research/assets/sp4d/after-webkit-date.png
new file mode 100644
index 000000000..b223349f8
Binary files /dev/null and b/docs/research/assets/sp4d/after-webkit-date.png differ
diff --git a/docs/research/assets/sp4d/after-webkit-measurements.json b/docs/research/assets/sp4d/after-webkit-measurements.json
new file mode 100644
index 000000000..dd67f2221
--- /dev/null
+++ b/docs/research/assets/sp4d/after-webkit-measurements.json
@@ -0,0 +1,50 @@
+[
+  {
+    "tag": "INPUT",
+    "label": "Quantity",
+    "rect": {
+      "x": 504,
+      "y": 534.515625,
+      "width": 74.65625,
+      "height": 28.203125,
+      "top": 534.515625,
+      "right": 578.65625,
+      "bottom": 562.71875,
+      "left": 504
+    },
+    "outline": "2px solid rgb(192, 39, 28)",
+    "padding": "2px 16px"
+  },
+  {
+    "tag": "BUTTON",
+    "label": "Increment",
+    "rect": {
+      "x": 578.65625,
+      "y": 536.609375,
+      "width": 14.34375,
+      "height": 12,
+      "top": 536.609375,
+      "right": 593,
+      "bottom": 548.609375,
+      "left": 578.65625
+    },
+    "outline": "3px none rgb(94, 94, 106)",
+    "padding": "2px 4px"
+  },
+  {
+    "tag": "BUTTON",
+    "label": "Decrement",
+    "rect": {
+      "x": 578.65625,
+      "y": 548.609375,
+      "width": 14.34375,
+      "height": 12,
+      "top": 548.609375,
+      "right": 593,
+      "bottom": 560.609375,
+      "left": 578.65625
+    },
+    "outline": "3px none rgb(94, 94, 106)",
+    "padding": "2px 4px"
+  }
+]
diff --git a/docs/research/assets/sp4d/after-webkit-number-error.png b/docs/research/assets/sp4d/after-webkit-number-error.png
new file mode 100644
index 000000000..035eb6895
Binary files /dev/null and b/docs/research/assets/sp4d/after-webkit-number-error.png differ
diff --git a/docs/research/assets/sp4d/baseline-chromium-date-forced.png b/docs/research/assets/sp4d/baseline-chromium-date-forced.png
new file mode 100644
index 000000000..a0c4065ee
Binary files /dev/null and b/docs/research/assets/sp4d/baseline-chromium-date-forced.png differ
diff --git a/docs/research/assets/sp4d/baseline-chromium-date.png b/docs/research/assets/sp4d/baseline-chromium-date.png
new file mode 100644
index 000000000..34eebc374
Binary files /dev/null and b/docs/research/assets/sp4d/baseline-chromium-date.png differ
diff --git a/docs/research/assets/sp4d/baseline-chromium-measurements.json b/docs/research/assets/sp4d/baseline-chromium-measurements.json
new file mode 100644
index 000000000..a171a73d1
--- /dev/null
+++ b/docs/research/assets/sp4d/baseline-chromium-measurements.json
@@ -0,0 +1,50 @@
+[
+  {
+    "tag": "INPUT",
+    "label": "Quantity",
+    "rect": {
+      "x": 520,
+      "y": 547.421875,
+      "width": 32,
+      "height": 24,
+      "top": 547.421875,
+      "right": 552,
+      "bottom": 571.421875,
+      "left": 520
+    },
+    "outline": "rgb(192, 39, 28) solid 2px",
+    "padding": "12px 16px"
+  },
+  {
+    "tag": "BUTTON",
+    "label": "Increment",
+    "rect": {
+      "x": 552,
+      "y": 546.921875,
+      "width": 14.359375,
+      "height": 12,
+      "top": 546.921875,
+      "right": 566.359375,
+      "bottom": 558.921875,
+      "left": 552
+    },
+    "outline": "rgb(94, 94, 106) none 3px",
+    "padding": "2px 4px"
+  },
+  {
+    "tag": "BUTTON",
+    "label": "Decrement",
+    "rect": {
+      "x": 552,
+      "y": 558.921875,
+      "width": 14.359375,
+      "height": 12,
+      "top": 558.921875,
+      "right": 566.359375,
+      "bottom": 570.921875,
+      "left": 552
+    },
+    "outline": "rgb(94, 94, 106) none 3px",
+    "padding": "2px 4px"
+  }
+]
diff --git a/docs/research/assets/sp4d/baseline-chromium-number-error.png b/docs/research/assets/sp4d/baseline-chromium-number-error.png
new file mode 100644
index 000000000..e01920948
Binary files /dev/null and b/docs/research/assets/sp4d/baseline-chromium-number-error.png differ
diff --git a/docs/research/assets/sp4d/baseline-webkit-date.png b/docs/research/assets/sp4d/baseline-webkit-date.png
new file mode 100644
index 000000000..9dae602f5
Binary files /dev/null and b/docs/research/assets/sp4d/baseline-webkit-date.png differ
diff --git a/docs/research/assets/sp4d/baseline-webkit-measurements.json b/docs/research/assets/sp4d/baseline-webkit-measurements.json
new file mode 100644
index 000000000..f6a5e730e
--- /dev/null
+++ b/docs/research/assets/sp4d/baseline-webkit-measurements.json
@@ -0,0 +1,50 @@
+[
+  {
+    "tag": "INPUT",
+    "label": "Quantity",
+    "rect": {
+      "x": 520,
+      "y": 546.515625,
+      "width": 32,
+      "height": 24,
+      "top": 546.515625,
+      "right": 552,
+      "bottom": 570.515625,
+      "left": 520
+    },
+    "outline": "2px solid rgb(192, 39, 28)",
+    "padding": "12px 16px"
+  },
+  {
+    "tag": "BUTTON",
+    "label": "Increment",
+    "rect": {
+      "x": 552,
+      "y": 546.015625,
+      "width": 14.34375,
+      "height": 12,
+      "top": 546.015625,
+      "right": 566.34375,
+      "bottom": 558.015625,
+      "left": 552
+    },
+    "outline": "3px none rgb(94, 94, 106)",
+    "padding": "2px 4px"
+  },
+  {
+    "tag": "BUTTON",
+    "label": "Decrement",
+    "rect": {
+      "x": 552,
+      "y": 558.015625,
+      "width": 14.34375,
+      "height": 12,
+      "top": 558.015625,
+      "right": 566.34375,
+      "bottom": 570.015625,
+      "left": 552
+    },
+    "outline": "3px none rgb(94, 94, 106)",
+    "padding": "2px 4px"
+  }
+]
diff --git a/docs/research/assets/sp4d/baseline-webkit-number-error.png b/docs/research/assets/sp4d/baseline-webkit-number-error.png
new file mode 100644
index 000000000..6d7303473
Binary files /dev/null and b/docs/research/assets/sp4d/baseline-webkit-number-error.png differ
diff --git a/docs/superpowers/plans/2026-09-08-components-sp4a-lifecycle.md b/docs/superpowers/plans/2026-09-08-components-sp4a-lifecycle.md
new file mode 100644
index 000000000..a6afcbda2
--- /dev/null
+++ b/docs/superpowers/plans/2026-09-08-components-sp4a-lifecycle.md
@@ -0,0 +1,182 @@
+# Edit lifecycle safety implementation plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox syntax for tracking.
+
+**Goal:** Close audit A1–A3: no save before permission, no duplicate dispatch, recoverable callback errors, and no draft write unlocking a pending edit.
+
+**Architecture:** The indexed core rejects pending draft changes. The existing controller owns permission, operation admission, and session identity; the surface bridges its existing session token. Fields provide pending UX but are not an authorization boundary.
+
+**Tech Stack:** TypeScript, React 18/19, Vitest/jsdom, indexed grid core, Playwright.
+
+**Spec:** `docs/superpowers/specs/2026-09-08-components-sp4a-lifecycle-design.md`.
+
+## Environment and sequence
+
+Use the current isolated `codex/component-kit-audit` worktree. The audit's
+targeted baseline is green. Use pnpm 10.12.1, available here as
+`node /Users/blove/.npm/_npx/86ec7d1239b732c4/node_modules/pnpm/bin/pnpm.cjs`;
+the machine's default pnpm 11 has an incompatible install-policy wrapper.
+For child scripts that invoke `pnpm`, prepend that pinned package's `bin`
+directory to PATH through a temporary executable shim outside the repository.
+Do not change dependency manifests or lockfiles to configure the machine.
+
+Execute tasks sequentially with spec and quality review after each code task.
+No concurrent builds. Every changed guard gets a targeted mutation check;
+restore it immediately and record the test and observed failure in the commit.
+
+## Task 1: pending draft writes stay pending
+
+**Files:** `packages/grid-core/src/create-grid-ui-core.ts` and
+`packages/grid-core/src/__tests__/grid-ui-core.test.ts` (or a focused sibling
+using the same real-core fixture).
+
+- [x] Add table-driven real-core tests for changed and unchanged draft writes
+  in checking/validating/saving. Assert the whole editing state stays equal.
+  Assert editing/error states still accept drafts and clear displayed errors.
+- [x] Run `pnpm --filter @pretable-internal/grid-core test`; observe the new
+  pending cases fail before changing source.
+- [x] Before publishing in `setEditDraft`, return when the edit status is
+  checking, validating, or saving. Preserve the null/Object.is fast paths and
+  current editable/error behavior. Do not alter explicit `setEditStatus`.
+- [x] Re-run tests. Remove the phase predicate temporarily and prove the
+  pending regression fails. Restore, review, and commit with mutation name.
+
+## Task 2: controller authority and failure recovery
+
+**Files:** `packages/react/src/use-cell-edit-controller.ts`,
+`packages/react/src/pretable-surface.tsx` (controller adapter only),
+`packages/react/src/__tests__/use-cell-edit-controller.test.ts`; add a focused
+controller/core regression sibling if needed. Use `dev-warn.ts`'s existing
+`warnOnce` for pre-session failures with a stable `edit-begin-failed` key.
+
+- [x] Extend the stateful factory test fixture with a per-begin session token
+  and checking transition. Add deferred-promise regressions for commit before
+  denied permission, duplicate validation/save, same-tick parser/permission
+  reentrancy, failed callback retries, and `keep-open` blocking.
+- [x] Cover throwing/rejecting editable, parser, validator, save, formatter,
+  row/value lookup. Test stale rejection/resolve after cancel, invalidation,
+  replacement (including same address), and failed replacement begin. Reset
+  diagnostic keys and assert a pre-session error is reported once.
+- [x] Run `pnpm --filter @pretable/react test use-cell-edit-controller` and
+  record intended failures. Add a real indexed-core parser that calls
+  setEditDraft and verify the admitted draft cannot be changed.
+- [x] Add internal adapter access to the surface session token and a checking
+  transition; capture identity after begin and compare generation, token and
+  address before and after consumer callbacks. Use an internal session record
+  with authorization and phase. Retire previous snapshot before begin lookup.
+- [x] Commit admission synchronously acquires a barrier and marks validating
+  before lookup/parsing. Checking rejects commits. Permission-error retry
+  marks checking before rechecking; denial cancels; rejection retains an
+  unauthorized error session. Authorized retries retain permission. Preserve
+  existing optional exact-begin authorization checks for boolean operations.
+- [x] Catch all consumer callback boundaries. For active sessions retain draft
+  and show error; before a new session exists leave no orphan and diagnose.
+  Check staleness after synchronous callbacks too. `keep-open` holds the
+  saving barrier until surface reconciliation ends/replaces the session.
+- [x] Run controller and surface editing/boolean suites; update test adapters
+  only as required by the new internal contract. Mutation-check admission,
+  authorization and identity guards using distinct behavioral tests. Review
+  then commit with mutation evidence. No enum semantic redesign in this task.
+
+## Task 3: pending fields and surface integration
+
+**Files:** `packages/react/src/editors/use-editor-field.ts`,
+`EnumCellEditor.tsx`, `MultilineCellEditor.tsx`, and other editor handlers only
+where necessary; existing editor tests and
+`packages/react/src/__tests__/pretable-surface-editing.test.tsx`.
+
+- [x] Add failing pending-key tests for shared Enter/Tab, multiline
+  Ctrl/Cmd+Enter and enum selection. Escape still cancels. Add a deferred
+  permission surface enum with differing value/label: pending draft/status
+  unchanged, true resolution normalizes once, false closes with no save.
+- [x] Add surface integration regressions with real controller/core for
+  unauthorized built-in/custom editor commits, repeated save while pending,
+  permission rejection/retry, controlled-row `keep-open`, boolean immediate
+  authorization, and model/unmount invalidation. Reuse existing fixtures and
+  extend only missing cases rather than duplicate passing coverage.
+- [x] Run `pnpm --filter @pretable/react test cell-editor pretable-surface-editing`
+  and observe intended new failures.
+- [x] Consume pending commit/navigation keys without commit; preserve Escape.
+  Guard specialized paths. Normalize enum display once after initial
+  permission success, not merely once at mount and not after later retries.
+  Keep native input props/refs, IME/directions/enum identity/calendar behavior
+  unchanged for their later audited repairs.
+- [x] Re-run all affected tests. Mutation-check pending-key and enum
+  normalization guards. Review and commit with evidence.
+
+## Task 4: delivery evidence and documentation
+
+**Files:** `apps/website/content/docs/grid/editing.mdx`,
+`.changeset/<descriptive-name>.md`, audit/spec/plan documents. Browser fixture
+or test additions only when required to exercise the changed lifecycle.
+
+- [x] Document pending draft restriction, serialization, permission retry,
+  and errors, without claiming cancellation rolls back dispatched writes.
+  Add patch changesets for `@pretable/react` and `@pretable/core` (core ships
+  the internal indexed engine); document intentional behavior restrictions.
+- [x] Build dependencies, run full affected package tests and React/core type
+  checks, lint changed TS/TSX and format changed documents. Check API reports
+  only if public exports changed; internal adapter additions do not require
+  fabricated API changes.
+- [x] Run existing browser editing coverage from the bench and/or website
+  after building their consumed dist; locate controlled-row/boolean cases by
+  repository search and record exact commands/results. Read the website's
+  AGENTS.md and local Next docs before any fixture implementation. No CSS
+  changes in this patch, so the visual baseline task remains with SP4B.
+- [x] Independently review the whole branch against the spec, resolve findings,
+  and update audit A1–A3 with concrete evidence. Do not mark later audit
+  findings fixed. Commit docs/evidence and leave a clean reviewable branch.
+
+## Completion
+
+Each task records its actual tests, red/green result and mutation outcomes
+below as executed. Finish this approved lifecycle repair in the current
+session without another execution-choice prompt. The user's instruction to
+continue already authorizes execution; publishing or merging is not part of
+this plan.
+
+## Execution log
+
+- Planning: user approved the written lifecycle spec; plan review approved.
+- Task 1: `8f4268ac`; 177 grid-core tests passed. RED and
+  `remove-pending-draft-phase-guard` mutation each failed the three changed
+  pending-draft cases. Spec and code-quality reviews approved. Dependencies
+  rebuilt successfully after the core change.
+
+- Task 2: `c8e94e4e`, `b70e6637`; 105 controller/editing/boolean
+  tests passed with typecheck and changed-file lint/format. Nine initial
+  regressions failed before implementation; nine async-parser regressions
+  failed before await. Admission, denial, generation/session, adapter identity,
+  pending core draft barrier and parser-await mutants were killed. Both
+  reviews approved. Production website build passed after Task 2.
+
+- Task 3: `bc6c3065`; 119 focused editor/surface/controller tests passed,
+  including 16 new regressions. Initial RED had seven failures. Shared pending
+  key, enum permission-normalization, and user-correction guards were each
+  removed temporarily and killed by three, three, and two tests respectively;
+  all restored. Spec and independent quality reviews approved. Type checking
+  caught test-fixture labels/schema inference; corrected without runtime edits.
+- Task 4: final independent whole-branch review approved A1–A3. Root validation
+  used Node 24.20.0 and pinned pnpm 10.12.1:
+  - `pnpm --filter @pretable/react test`: 138 files, 1,939 tests passed.
+    After test-fixture type corrections, `test pending-cell-editor
+    pretable-surface-edit-lifecycle` reran both changed suites: 16 passed.
+  - `pnpm --filter @pretable-internal/grid-core test`: 6 files, 177 passed.
+  - `pnpm --filter @pretable/core test`: 4 files, 17 passed.
+  - React and core `typecheck`: passed. Changed source/tests and browser test
+    ESLint passed. Changed documents/tests formatted; `git diff --check` clean.
+  - Website `exec vitest run --environment jsdom` for `docs-api-surface` and
+    `docs-links`: 2 files, 26 tests passed.
+  - `pnpm --filter @pretable/app-website build`: passed, including dependency
+    builds, registry generation, and production Next build.
+  - Against that production build at `http://127.0.0.1:3210`, website
+    `exec playwright test e2e/edit-lifecycle.spec.ts e2e/grid-keyboard-a11y.spec.ts
+    --grep 'rejected save|boolean keyboard|F2 opens' --workers=1`: 6 passed
+    across Chromium and WebKit. Covers rejected-save correction, controlled
+    rows, boolean save reconciliation, and existing F2 editor entry.
+  - No public exports changed, so no API report changes were necessary.
+    Existing Vite configuration, jsdom canvas/navigation, and terminal color
+    warnings were non-fatal. Browser checks are functional, not a visual/AT audit.
+
+The lifecycle repair is complete locally. Findings A4–A14 remain open and need
+separate scoped repairs; no package publication, push, or merge was performed.
diff --git a/docs/superpowers/plans/2026-09-08-components-sp4b-control-state.md b/docs/superpowers/plans/2026-09-08-components-sp4b-control-state.md
new file mode 100644
index 000000000..5204acc98
--- /dev/null
+++ b/docs/superpowers/plans/2026-09-08-components-sp4b-control-state.md
@@ -0,0 +1,124 @@
+# Control state and refs implementation plan
+
+> For agentic workers: use superpowers:subagent-driven-development for bounded
+> tasks, with spec and quality reviews. Existing user authorization covers
+> execution in this session; no execution-choice prompt is needed.
+
+**Goal:** fix audit A8/A9/A10/A14 without mixing overlay or editor redesign.
+**Architecture:** value-based internal listbox state and explicit textValue;
+shared internal ref composition with void callback/null-detach compatibility.
+**Tech stack:** React 18/19, TypeScript, Vitest, Playwright, pinned pnpm 10.12.1.
+
+Spec: `docs/superpowers/specs/2026-09-08-components-sp4b-control-state-design.md`.
+Existing worktree/branch: `codex/component-kit-audit`, baseline `c1cc8290`.
+Use `PATH=/tmp/pretable-kit-bin:$PATH pnpm` to select the repository version.
+
+## Task 1: listbox roster and text (one owner)
+
+Files: `packages/react/src/components/listbox.tsx`, `select.tsx`,
+`packages/react/src/__tests__/components-listbox.test.tsx`,
+`components-select.test.tsx`; type-level test in existing typecheck patterns.
+
+- [x] Add failing tests for active identity on reorder/insertion/removal,
+  disabled active/selected options, empty open Select closing and repopulating,
+  all-disabled no-highlight/no-commit, and live option target references.
+- [x] Add rich-label textValue behavior/type tests and reopen-within-500ms
+  typeahead regression; observe intended failures with component test scripts.
+- [x] Store/reconcile active value; derive index from current enabled roster
+  every render and keyboard event. Seed on opening and reconcile to first
+  enabled fallback. Empty Select closes and clears ARIA references.
+- [x] Add primitive/rich label option union with explicit textValue support;
+  reset session buffer, keeping accumulated-prefix behavior otherwise intact.
+- [x] Run focused component and enum tests. Temporarily remove identity and
+  session-reset guards to prove corresponding regressions fail; restore.
+- [x] Typecheck/lint/format owned files, review and commit. Do not build while
+  another worker edits; root builds after stable source.
+
+## Task 2: callback cleanup (separate owner)
+
+Files: new `packages/react/src/components/compose-refs.ts`,
+`checkbox.tsx`, `text-input.tsx`, dedicated ref tests. The owner provides the
+small Select integration diff to root after Task1 releases `select.tsx`.
+
+- [x] Write control lifecycle and helper null-detach tests. Observe current
+  returned-cleanup failure with real Checkbox/TextInput/Select ref callbacks.
+- [x] Implement stable internal helper supporting object, void callback and
+  cleanup-returning callback refs. Callback exposed to React returns void;
+  null detach invokes saved cleanup once and clears internal nodes.
+- [x] Test ref replacement, repeated detach, StrictMode, and stable rerenders;
+  no callback(null) after cleanup. Test the React18-compatible void return.
+- [x] Integrate Checkbox/TextInput; root integrates Select after Task1 commit.
+  Mutation-check cleanup invocation; restore, typecheck/lint/format, review
+  and commit only owned files.
+
+## Task 3: integration and delivery (root)
+
+Files: Select helper integration; component docs, React API report,
+`.changeset/*`, audit/spec/plan evidence; existing browser tests as applicable.
+
+- [x] Integrate Select composition helper, rerun lifecycle regressions.
+- [x] Update docs for textValue migration, dynamic roster behavior and refs;
+  correct touched inaccurate button.value prose. Add a minor React changeset
+  explaining the breaking type tightening in this pre-1.0 package.
+- [x] Build dependencies sequentially, generate React API report and check it;
+  run full React test suite/typecheck, changed-file lint/format and docs guards.
+- [x] Extend the packed React compatibility fixtures with composed-ref runtime
+  teardown and public rich-label option usage. Run `pnpm react:compat` across
+  React 18.0, 18.3 and 19.2 after source stabilizes. Root observed the packed
+  ref regression fail against the old dist: all three cleanups were skipped.
+- [x] Build production website; run existing Select/filter browser workflows
+  in Chromium and WebKit against local build. No CSS changes/visual claims.
+- [x] Obtain independent spec/quality review; resolve findings and revalidate
+  relevant changes. Mark only A8/A9/A10/A14 resolved with evidence.
+- [x] Commit final docs/evidence; clean working tree, preserve local branch.
+
+## Execution evidence
+
+- Spec and plan reviewed before implementation. Existing user authorization
+  covered this corrective continuation.
+- Task 1: `e0a648d1`; 59 targeted Select/Listbox/enum tests passed. Initial
+  RED: nine failed, fifteen passed; public types rejected unsupported
+  textValue. Added failing inline-roster render-loop regression and repaired
+  semantic reconciliation. Identity and session-reset mutants both failed
+  their targeted regressions and were restored. Spec and quality approved.
+- Task 2: `8b6a1bf3`; all three controls reproduced skipped cleanup (six
+  failures initially). Helper cleanup mutation failed actual control and
+  helper detach tests and was restored. Spec and quality approved. Root
+  observed two remaining Select failures before integrating useComposedRefs;
+  combined integration then passed 56 tests.
+- Root packed-ref fixture failed against old dist with zero cleanup calls and
+  three null callbacks. Browser rapid-reopen regression failed against old
+  production build in both Chromium and WebKit: expected count, remained avg.
+- Full React suite: 140 files, 1,964 tests passed. Documentation guards: 26
+  passed. Compatibility-runner unit tests: nine passed. Source/type-test/browser
+  lint and formatting passed. The public compatibility fixture retains its
+  existing mixed-export Fast Refresh warning.
+- API/type checking initially overlapped the compatibility runner rebuilding
+  UI declarations; those transient results are superseded by the final checks
+  below after all builds complete.
+
+- Final verification (Node 24.20.0, pinned pnpm 10.12.1):
+  - `pnpm --filter @pretable/react test`: 140 files, 1,964 passed.
+  - `pnpm react:compat`: passed all packed React 18.0.0, 18.3.1 and 19.2.8
+    runtime/type rows and the React17 unsupported-peer negative control.
+    The new runtime fixture verifies all three control cleanups on actual
+    runtimes; no synthetic compatibility assumption is needed for that claim.
+  - `pnpm --filter @pretable/app-website build`: passed, including dependencies,
+    example registry and production Next build.
+  - After that build, React `api` regeneration, `api:check`, `typecheck`, and
+    `pnpm exec tsc -p type-tests/tsconfig.react.json --noEmit` all passed.
+    Final API diff is only the intended PretableSelectOption union.
+  - Website `exec vitest run --environment jsdom` for docs-api-surface and
+    docs-links: 26 passed. `node --test
+    scripts/__tests__/check-react-compatibility.test.mjs`: nine passed.
+  - `BASE_URL=http://127.0.0.1:3210 pnpm --filter @pretable/app-website exec
+    playwright test e2e/components.spec.ts --workers=1`: ten passed, covering
+    replaced controls, menu anchoring/focus, picker typeahead/reopen, nested
+    filter selection/Escape, and checkbox keyboard/label activation in both
+    Chromium and WebKit. Old build failed the new reopen check in both.
+  - Changed source/test lint and formatting passed; no CSS changes. Existing
+    jsdom canvas/navigation and API Extractor compiler-version warnings were
+    non-fatal. `git diff --check` passed.
+- Final independent whole-change review approved. A8/A9/A10/A14 are resolved;
+  A4–A7 and A11–A13 remain open. Local branch retained; nothing published or
+  merged. The preview server was stopped after verification.
diff --git a/docs/superpowers/plans/2026-09-08-components-sp4c-overlays.md b/docs/superpowers/plans/2026-09-08-components-sp4c-overlays.md
new file mode 100644
index 000000000..cb6c639a6
--- /dev/null
+++ b/docs/superpowers/plans/2026-09-08-components-sp4c-overlays.md
@@ -0,0 +1,131 @@
+# Overlay ownership and state implementation plan
+
+> Use superpowers:subagent-driven-development and independent spec/quality
+> reviews. The user has authorized continuing repairs in this session.
+
+**Goal:** resolve A7/A11/A12/A13 with correct nested ownership and scoped visuals.
+**Architecture:** logical portal-origin registry, capture outside-press helper,
+public explicit portal-target provider, and complete control state selectors.
+**Stack:** React18/19, TypeScript, Vitest, Playwright; pinned pnpm10.12.1 via
+`PATH=/tmp/pretable-kit-bin:$PATH`. Baseline `356e447f` in existing worktree.
+
+Spec: `docs/superpowers/specs/2026-09-08-components-sp4c-overlays-design.md`.
+
+## Task 1: overlay behavior and API (one owner)
+
+Files: `packages/react/src/overlay/OverlayPortal.tsx`, new portal-context and
+outside-pointer/containment modules as needed, `overlay/menu-keyboard.ts`,
+`components/select.tsx`, `components/listbox.tsx`, `filter-menu/FilterMenu.tsx`,
+`column-menu/ColumnMenu.tsx`, tool-panel menu callers and surface adapter only
+as needed; `public_api.ts`; focused/new behavior tests and public type tests.
+
+- [x] Write regressions and observe baseline failures for sibling triggers,
+  nested portal presses, external stopPropagation, own-toggle and focus.
+- [x] Implement hidden origin + display:contents portal boundary registration,
+  logical containment and capture-phase outside press with trigger exemption.
+  Integrate existing menu paths; preserve independent drag handlers.
+- [x] Add provider null/default/custom/nested/switch/SSR tests; implement public
+  provider and exports. Container selection uses nearest context; null waits.
+  Preserve open intent while target unavailable; gate Select expanded/controls
+  and enum/date active-descendant ARIA on actual target readiness. Focus-taking
+  menus focus on attachment rather than initial component mount. Test opening
+  before null→target, target removal/replacement and hydration without repeated
+  focus steals. Minimal editor ARIA edits are part of this integration.
+- [x] Rename Listbox emitted active marker to data-pretable-active; CSS owner
+  handles stylesheet/tests, root handles docs. No CSS edits by this owner.
+- [x] Run focused tests/typecheck/lint; mutate containment ancestry and trigger
+  exemption, observe failures, restore. Commit owned files; notify root stable.
+  No builds while other sources are changing. Root owns API report/docs/browser.
+
+## Task 2: visual baseline and CSS (independent owner)
+
+Files: `packages/ui/grid.css`, `packages/ui/src/__tests__/css-cascade.test.ts`
+and other existing CSS guards as necessary; browser measurement harness and
+before/after screenshot evidence under task-local artifact directory.
+
+- [x] Capture baseline state screenshots before modifying CSS. Use exact kit
+  markup and checked-in styles in a browser harness; no Next build needed.
+  Measure light/dark and Chromium forced colors. Record defects precisely.
+- [x] Add failing state-combination guards; rename active CSS/test marker to
+  data-pretable-active. Implement disabled hover/ink/cursor, forced-color
+  active outline, selected-disabled option and checked/mixed-disabled checkbox
+  system-color pairs. Keep ordinary enabled states stable.
+- [x] Run UI suite; browser computed-state checks plus inspect before/after
+  screenshots, ordinary Chromium/WebKit + forced Chromium. Demonstrate guards
+  catch removed active/disabled rules, restore. Commit only owned CSS/tests;
+  send screenshot paths and evidence for root report. No React/build edits.
+
+## Task 3: production integration and delivery (root)
+
+Files: new `apps/website/app/fixtures/overlay-scope/page.tsx` and corresponding
+E2E spec for live scopes/nesting; existing component E2E parent assertions;
+component/theming docs, API report, changesets and audit/spec/plan evidence.
+
+- [x] Read website AGENTS/local Next docs. Add two local scopes with explicit
+  portal hosts, custom tokens and live dir/theme updates; exercise Select and
+  nested FilterMenu through real grid. Add provider public usage/type coverage.
+- [x] Document container setup, null behavior, constraints and active-attribute
+  migration. Correct touched context/props prose. Add minor React/UI changeset.
+- [x] After stable source, sequential production build then API update/check,
+  package/public typecheck. Full React/UI tests and docs guards; changed lint
+  and formatting. Do not run API/types during dependency rebuilds.
+- [x] Run component and scoped-overlay production E2E in Chromium/WebKit.
+  Inspect actual scoped popup screenshots/computed variables. No unverified AT
+  or physical high-contrast claims; record remaining human-validation boundary.
+- [x] Independent spec and quality review; resolve findings and revalidate.
+  Update only A7/A11/A12/A13 + marker correction. Commit clean local branch.
+
+## Evidence
+
+Implementation commits: `21421a79` (CSS) and `19cd1bae` (overlay API/ownership).
+Independent spec review approved Task1; CSS and whole-change quality reviews
+found no blockers. The visual QA correction `bd5fe3c1` remeasures moved anchors.
+
+- Ownership/provider/editor/header regressions were observed failing before
+  implementation; final initial focused run passed 267 tests in 14 files.
+- Physical-only containment and missing trigger exemption mutations failed
+  their targeted tests; both were restored. CSS mutations removing active
+  outlines, disabled hover guards and checkbox system pairs also failed.
+- UI: 116 tests in 4 files passed. Computed styles and inspected screenshots
+  cover ordinary Chromium/WebKit and Chromium forced light/dark OS palettes.
+  Durable screenshots: [visual evidence](../../research/assets/sp4c/README.md).
+- Packed React 18.0.0, 18.3.1 and 19.2.8 compatibility includes custom-host popup
+  attachment/unmount plus SSR/hydration and callback-ref cleanup. The React17
+  negative peer-contract control and 9 script tests also passed.
+- Production visual inspection caught stale popup position after direction
+  changes, despite the initial 16 browser cases passing. Added position checks
+  failed for both Select and header FilterMenu. Unit RED cases cover React
+  rerenders, ancestor CSS changes and deferred portal attachment. Their fix
+  shares bounded open-overlay observation; no polling or focus changes. Its
+  144 tests in 6 suites pass; removing observer disconnects failed the cleanup
+  regression, then was restored.
+- API report adds only provider and props. Documentation guard coverage now
+  binds the provider props table to its generated API names/types; all 38
+  selected docs tests passed after regeneration and table registration.
+
+Final checks after `bd5fe3c1` all passed: Logs use `/tmp/pretable-sp4c-*.log` on this machine.
+No deployment, publication or human assistive-technology pass is claimed.
+
+
+- `pnpm react:compat`: exact packed React18.0.0/18.3.1/19.2.8 matrix and React17
+  negative peer control, exit0.
+- `pnpm --filter @pretable/app-website build`: production build, exit0.
+- `pnpm --filter @pretable/react test`: 1,987 tests in142 files, exit0.
+- `pnpm --filter @pretable/ui test`: 116 tests in4 files (CSS unchanged since).
+- React `api:check`, package typecheck, `tsc -p type-tests/tsconfig.react.json
+  --noEmit`, and website typecheck: exit0, run after dependency builds finished.
+- Website Vitest docs-links, docs-api-surface and examples-registry-guard:
+  38 tests in3 files, exit0. `node --test scripts/__tests__/check-react-compatibility.test.mjs`:
+  9 passed.
+- Production `playwright test e2e/components.spec.ts e2e/overlay-scope.spec.ts
+  --workers=1`, `BASE_URL=http://127.0.0.1:3210`: 16 passed across Chromium/WebKit,
+  including new live-position assertions. Final screenshots inspected and saved.
+- Changed-file ESLint, Prettier and `git diff --check`: passed.
+- Independent final quality review approved `bd5fe3c1`, including stable
+  subscriptions, data-theme coverage, disconnects, bounds equality and nested
+  repositioning. No unresolved review findings.
+
+Known nonfatal tool warnings: jsdom canvas/navigation stubs, API Extractor's
+bundled TypeScript5.9 versus repository6.0, Vite config compatibility and terminal
+color settings. No test failures remain. A4–A6/editor migration remain separate;
+A7/A11–A13 and the active-attribute correction are closed in the audit.
diff --git a/docs/superpowers/plans/2026-09-08-components-sp4d-editors.md b/docs/superpowers/plans/2026-09-08-components-sp4d-editors.md
new file mode 100644
index 000000000..c3a97ebb8
--- /dev/null
+++ b/docs/superpowers/plans/2026-09-08-components-sp4d-editors.md
@@ -0,0 +1,94 @@
+# SP4D editor completion plan
+
+> Use superpowers:subagent-driven-development and independent spec/quality
+> reviews. User explicitly authorizes continuous execution through green merge.
+
+**Goal:** close A4–A6 and remaining kit/date/documentation follow-ups.
+**Architecture:** canonical enum choice draft, shared composition/direction
+policy, separate date cursor, native kit controls. Keep controller authority.
+**Stack:** React18/19, TS, Vitest, Playwright, Chrome MCP. Pinned pnpm10.12.1
+via PATH=/tmp/pretable-kit-bin:$PATH. Existing isolated worktree baseline04dc1b5e.
+Spec: docs/superpowers/specs/2026-09-08-components-sp4d-editors-design.md.
+
+## 1. React corrections (single owner)
+
+- [x] Before implementation, capture production editor baseline screenshots and
+  computed geometry in Chromium/WebKit, including error and number/date controls;
+  compare matched after screenshots and forced-color calendar states.
+
+- [x] In editors/{EnumCellEditor,enum-options,type-parsing,use-editor-field,
+  NumberCellEditor,MultilineCellEditor,DateCellEditor}, controller and surface,
+  add RED tests for canonical duplicate choices, ambiguous typed text, empty
+  commits, reverse commands, composition state/native/fallback and date cursor.
+- [x] Implement internal tagged enum selection and custom-parser unwrapping;
+  share composition/direction helpers; complete date combobox state and separate
+  browse/commit. Keep error/pending/authorization guards and typed text semantics.
+- [x] Add components/textarea.tsx plus context/public_api exports/type tests.
+  Migrate all five fields and date/number action buttons through resolved kit.
+  Verify consumer replacements, refs, autofocus, native props and pending state.
+- [x] Use existing observeAnchor for editor popup layout; test lifecycle.
+  Fix remaining inaccurate source comments/warning test names as touched.
+- [x] Focused tests, mutations of identity/composition/date-no-write guards,
+  restore, scoped type/lint/format. Commit stable sources; no builds while editing.
+
+## 2. UI states and docs/integration (root)
+
+- [x] Inspect baseline editor/kit selectors. Add RED CSS state guards and repair
+  geometry, invalid+focus, pending and date cursor normal/forced-color states.
+- [x] Read website AGENTS and local Next guide; add real surface fixture/tests
+  for duplicate enum identity/clear, composition, reverse navigation/date browse
+  and replacements. Update docs, API bindings, changeset and compatibility usage.
+- [x] Independent spec review then quality review; resolve and reverify.
+- [x] Sequential stable dependency builds, public API reports/checks/typechecks;
+  full affected suites, docs, lint/format and packed React18/19 compatibility.
+- [x] Production Chromium/WebKit flows and direct Chrome MCP interactions,
+  accessibility tree and visual inspection. Record physical IME/human AT boundary.
+
+## 3. PR, merge, post-merge verification
+
+- [ ] Audit closure with exact commands/evidence; commit clean worktree. Fetch
+  main, handle actual conflicts if any; push branch and create reviewable PR.
+- [ ] Inspect required CI and reviews; fix failures, never bypass required checks.
+  Merge only after green checks for final head. User already authorizes merge.
+- [ ] Verify merge SHA and resulting production deployment; Chrome MCP final
+  interaction/snapshot/console checks. Report remaining external validation
+  boundaries accurately rather than representing automation as a human pass.
+
+
+## Verification record
+
+Implementation: `45f9e073`; controlled-row browser correction: `71c4c13a`.
+Independent spec and quality reviews approved, including the corrective focus
+change and the test setup repair. Production baseline preceded the migration;
+matched screenshots and geometry are in `docs/research/assets/sp4d/`.
+
+With Node24.20.0 and pnpm10.12.1 (`PATH=/tmp/pretable-kit-bin:$PATH`):
+
+- `pnpm test`: 469 Node script tests and 4,522 Vitest tests passed across the
+  workspace, including 2,043 React, 122 UI, 212 benchmark and 625 website tests.
+- `pnpm typecheck`: passed. The first run exposed an older pending-draft test
+  calling `setEditStatus("checking")`; it now enters through `beginEdit` as the
+  public contract requires. All 177 grid-core tests passed after correction.
+- `pnpm react:compat`: packed React18.0.0,18.3.1,19.2.8 passed after Textarea
+  integration. CI repeats the matrix against the final PR head.
+- `pnpm api:check`, `pnpm lint:packaging`, public type-test configs and
+  `node scripts/check-type-performance.mjs`: passed.
+- `pnpm lint`, `pnpm format`, production website build: passed.
+- `pnpm security:audit`: clean after targeted js-yaml3.15.2/4.3.2 patches.
+  Registry integrity and frozen-lockfile installation were verified.
+- Production Playwright: editor-kit, edit-lifecycle, components and
+  overlay-scope, 34 tests passed across Chromium and WebKit. Direct Chrome MCP
+  confirmed corrected controlled-row Shift+Tab, date browsing without a write,
+  valid active-descendant/control targets, native text selection and clean console.
+
+RED and mutation evidence includes canonical enum identity, composition guards,
+date cursor writes, replacement ref attachment, all four controlled-row commit
+directions, and narrow date-field text measurement. Review added removed and
+formatted pristine choices, navigated enum blur, whitespace date clearing,
+pristine empty enums, delayed acknowledgement and cancelled acknowledgement.
+All temporary mutations were restored.
+
+Physical OS IME and human screen-reader validation were not performed. Synthetic
+composition events, DOM/AX inspection and forced-color emulation are bounded
+automated evidence, not a claim of those human/platform passes. GitHub records
+final PR checks, merge and deployment; the task's completion report links them.
diff --git a/docs/superpowers/specs/2026-09-08-components-sp4a-lifecycle-design.md b/docs/superpowers/specs/2026-09-08-components-sp4a-lifecycle-design.md
new file mode 100644
index 000000000..40cb40ae3
--- /dev/null
+++ b/docs/superpowers/specs/2026-09-08-components-sp4a-lifecycle-design.md
@@ -0,0 +1,221 @@
+# Components SP4A: edit lifecycle safety
+
+Date: 2026-09-08
+Status: implemented; final verification recorded in the implementation plan
+Program: [component kit audit](../../research/2026-09-08-component-kit-audit.md)
+
+## Purpose and scope
+
+Before adopting kit inputs inside editing sessions, repair the lifecycle those
+inputs would expose. The baseline can save while an async editability check is
+unresolved, issue duplicate saves, and strand an editor when validation
+rejects. Enum label normalization can also unlock checking via a draft write.
+
+The user approved SP4 and a fresh-slate audit, including breaking corrections.
+This is the first bounded repair, covering audit A1–A3. Shared kit/listbox
+repairs and editor interaction/identity changes follow separately. This spec
+does not add Textarea, redesign popups, or change their CSS.
+
+## Chosen approach
+
+Make the existing controller authoritative for edit authorization and commit
+admission, and make the indexed core reject ordinary draft writes in pending
+phases. Keep React field `readOnly` and keyboard guards as user-facing behavior,
+not as the protection against invalid writes.
+
+Alternatives considered:
+
+- **Only guard editor keys:** small, but custom editors and imperative calls
+  can still bypass it; enum draft normalization still changes status.
+- **Replace the entire edit engine and public status model:** could unify
+  transitions, but would unnecessarily mix a core redesign into three proven
+  defects. Existing tokens, statuses, and surface reconciliation can support
+  the required invariants.
+
+No new dependency is needed. Preserve supported React 18/19 behavior and the
+classic JSX build requirements. Breaking changes to unsafe pending mutation
+behavior are intentional; no compatibility path may preserve the bypass.
+
+## Controller-owned session
+
+Record the active session's address, generation, authorization state, and
+operation phase inside `createCellEditController`. The snapshot's visual
+status alone does not grant authority: external draft/status writes must not
+turn an unapproved session into an approved one.
+
+An approved session remains authorized across ordinary invalid input and
+retryable validation/save failures. A permission check grants authorization
+only after it resolves true for the current generation. A returned begin
+authorization remains tied to that exact session. When a caller supplies an
+authorization token, reject stale or foreign tokens as today; omitting the
+token never bypasses internal authorization.
+
+The address and session must still match the current snapshot before any
+callback or state transition. `begin`, `cancel`, and `invalidate` retire prior
+operations. Completion or rejection from a retired operation cannot mutate
+the new session, call a later save, or move focus.
+
+Expose the surface's existing edit-session token through the internal
+controller adapter and capture it after begin establishes the edit. Compare
+that token as well as the address; a replacement at the same address is still
+a different session. The factory test adapter must generate an equivalent
+token. Surface lifecycle wrappers must update it for every begin/end path.
+Direct callers orchestrating low-level core transitions outside those wrappers
+must invalidate the controller; those advanced operations are not a second
+route to controller authorization. This adds no public kit prop.
+
+## Admission and transitions
+
+| Current phase                           | Begin                       | Commit                                        | Ordinary draft write                      | Cancel/invalidate |
+| --------------------------------------- | --------------------------- | --------------------------------------------- | ----------------------------------------- | ----------------- |
+| No session                              | Start permission evaluation | No-op                                         | No-op                                     | Retire generation |
+| Checking permission                     | Replace session             | No-op                                         | No-op                                     | Retire generation |
+| Authorized editing                      | Replace session             | Acquire commit barrier and parse              | Update draft                              | Retire generation |
+| Parsing/validating                      | Replace session             | No-op                                         | No-op                                     | Retire generation |
+| Saving/awaiting controlled rows         | Replace session             | No-op                                         | No-op                                     | Retire generation |
+| Failed permission check                 | Replace session             | Retry permission, then commit only if allowed | Update draft, without granting permission | Retire generation |
+| Recoverable parse/validation/save error | Replace session             | Retry under retained authorization            | Update draft and clear displayed error    | Retire generation |
+
+`commit` acquires the barrier synchronously, before custom parsing, validation,
+or save callbacks. A callback reentering `commit` and two calls in the same
+event turn therefore cannot issue multiple writes. After every extension
+callback, including synchronous callbacks, check the generation before moving
+to the next phase; a callback may cancel or replace the session synchronously.
+
+Expose core status `validating` immediately after admission and before consumer
+lookup/value/parser callbacks, including when no custom validator is supplied.
+This makes synchronous parsing a pending phase visible to `setEditDraft` and
+prevents a parser from changing the displayed draft while an older draft is
+being saved. Capture the draft for the admitted operation once.
+
+Permission denial cancels the current edit without dispatching a save. A
+permission callback failure is different: show an error on the current cell
+and retain the draft, with no authorization. A commit retry re-runs permission
+first. Retrying a previously authorized validation/save error does not need
+another permission request unless the session was replaced or invalidated.
+Permission retry acquires its barrier and exposes `checking` synchronously
+before invoking the callback; after success it enters `validating` before
+parsing. Two immediate retries or a reentrant permission callback cannot start
+two permission checks or commits.
+
+Do not treat `onCommit` returning `"keep-open"` as completion. The rows-backed
+surface uses it while waiting for controlled rows to reflect the write; retain
+the barrier until reconciliation ends the session. Existing model-replacement
+and stale-operation paths using that sentinel must remain inert.
+
+Cancelling cannot undo a save already dispatched to an application. The
+guarantee is no duplicate dispatch and no stale completion affecting current
+state; cancellation is not advertised as transaction rollback.
+
+## Callback failure boundaries
+
+Handle thrown and rejected errors from editability, custom parsing,
+validation, and save. Normalize error text consistently. Invalid built-in
+parsing and a validator's returned message remain input validation results;
+an exception becomes an error that retains the draft and supports retry.
+
+During begin, establish/retire the session generation before invoking consumer
+lookup/format/editability code, and end any previous core edit snapshot. A
+failed replacement begin leaves both the controller and core with no active
+edit, even if the old session was editing or saving; it must not leave an
+orphan editor whose commits are all rejected. This does not retract an old
+save already dispatched. If failure occurs before a new cell edit can be
+established (for example, row lookup or initial formatting throws), leave no
+half-open checking state and no reusable authorization; report the failure
+through the existing diagnostic mechanism. Do not let a failure in a new begin
+leave an old pending permission result able to reopen the old session.
+
+If begin has already established a valid cell session, display its callback
+error on that session. After commit begins, lookup/value/parser failures are
+displayed on the current edit like validation exceptions. No callback error
+escapes an otherwise fire-and-forget UI invocation as an unhandled rejection.
+
+The implementation plan must identify the existing diagnostic helper and
+capture its output in tests for pre-session failures; it must not silently
+swallow those failures or introduce an unrelated global error API.
+
+## Core draft transition rule
+
+`createGridUiCore.setEditDraft` is an ordinary user draft operation, not a
+permission or lifecycle transition. Ignore changed draft writes during
+`checking`, `validating`, or `saving`; preserve the phase, draft, and error.
+Allow them during editing and recoverable error states, retaining the current
+behavior of clearing an input error and returning the visual state to editing.
+The controller's authorization remains independent of that visual state.
+
+Synchronous parser reentrancy is covered by the controller barrier; custom
+code cannot dispatch a second save even if it calls lower-level core methods.
+Audit the surface adapters and all relevant core draft paths so the live
+indexed path and tests obey the same rule.
+
+Enum display normalization must wait until permission succeeds. Guard its
+effect by status and perform it once per mounted session after initial
+permission success; the initial blocked mount must not permanently lose label
+normalization. Do not repeat it when validation/save errors return to editing
+and overwrite a later user-entered draft. This is a narrow fix
+until the later enum identity/query redesign. Do not solve A4's label ambiguity
+by changing enum parsing in this lifecycle patch.
+
+## Editor integration
+
+Read-only pending editors must not commit on Enter/Tab. They should consume
+those commit/navigation keys so the grid or form does not interpret them;
+Escape may cancel. Apply the same admission policy to specialized handlers,
+including multiline's explicit Ctrl/Cmd+Enter path and enum's selection path.
+Guard draft/selection actions as well as keyboard commits while pending.
+
+Custom editors remain protected by the controller even if they ignore pending
+props. Preserve the existing forwarding of native field props and refs. IME,
+Shift+Tab, enum clearing, and date browsing semantics are explicitly tracked
+for the editor interaction repair, not silently changed here.
+
+## Required validation
+
+Write failing regressions before the production fixes. At minimum:
+
+1. Deferred permission: Enter/Tab and direct commit before false resolution
+   produce zero validation/save calls; the pending status and draft persist.
+2. Concurrent and reentrant commits call validation/save at most once. Retry
+   after a returned validation error or rejected save is allowed exactly once.
+   A synchronous parser that calls the real core's `setEditDraft` cannot change
+   the admitted draft. Reentrant permission retries start one check only.
+3. Each callback failure boundary has recovery coverage. Permission failure
+   retry must pass permission before a save. Pre-session failure is diagnosed.
+4. Cancel, invalidate, new begin, row/model replacement, and unmount during
+   each async phase prevent stale state changes and stale downstream saves.
+   Include same-address replacement. A new begin that fails before mounting
+   its editor clears a previous editing/saving snapshot and permits a normal
+   later begin to work.
+5. `keep-open` remains saving and blocks another commit until controlled rows
+   reconciliation; boolean immediate commit retains exact-session authorization.
+6. Changed `setEditDraft` during checking/validating/saving is ignored in the
+   core. Editing/error writes still work. Test real core transitions.
+7. A surface enum with differing value/label and deferred permission never
+   leaves checking early. After true permission it normalizes its label;
+   after false permission it closes without a write.
+8. Pending editor Enter/Tab, multiline commit keys, and enum choose actions
+   do not commit. Tests exercise both built-ins and a custom editor that tries.
+
+Run package scripts with their jsdom environment. Build dependencies before
+tests that resolve package dist. Run the controller/editor/surface editing
+regressions, the affected grid-core tests, then relevant type/build checks and
+existing controlled-row/boolean editing browser coverage. Heavy builds run
+sequentially. This patch changes behavior, not styling; production visual
+baseline capture remains required before the following CSS/migration work.
+
+Mutation-check the new admission and generation guards by removing each and
+observing its named regression fail. Record the mutations in the commit
+message, following the kit's evidence convention. The current audit baseline
+passes 156 targeted React and 113 UI tests despite the defects; re-running only
+those preexisting tests is insufficient.
+
+## Delivery and later work
+
+Update edit lifecycle docs and add the appropriate public-package changesets
+for the shipped behavior, including the intentional pending-draft restriction.
+Refresh API reports only if the public surface actually changes.
+
+This patch is complete when A1–A3's reproductions fail to reproduce, the new
+regressions and required integration checks pass, and the audit records the
+fix evidence. It does not close the component-kit program. The audit's shared
+control and editor semantics findings remain explicit subsequent work.
diff --git a/docs/superpowers/specs/2026-09-08-components-sp4b-control-state-design.md b/docs/superpowers/specs/2026-09-08-components-sp4b-control-state-design.md
new file mode 100644
index 000000000..9b79edcf8
--- /dev/null
+++ b/docs/superpowers/specs/2026-09-08-components-sp4b-control-state-design.md
@@ -0,0 +1,75 @@
+# Components SP4B: control state and refs
+
+Date: 2026-09-08
+Status: implemented and verified; evidence in the SP4B implementation plan
+Baseline: `c1cc8290`
+
+## Scope and decision
+
+The user authorized continuing the component-kit audit repairs, including
+breaking corrections. This increment fixes A8, A9, A10 and A14. A7 popup
+ownership belongs with A11 portal scope because both affect nested overlays;
+A12/A13 require production visual baselines and remain separate. No CSS or
+editor value/keyboard semantics redesign is included here.
+
+Keep the existing Select/Listbox architecture and repair its state contracts.
+A full control replacement adds unnecessary migration work; index clamping
+alone would silently select a different option after a reorder. Track active
+option identity instead. Keep the internal index-shaped hook result so the
+enum editor can share the corrected navigation without a public editor change.
+
+## Option roster and typeahead
+
+Option values are stable unique identities. While open, preserve the active
+value across reorder and insertion. If removed or disabled, select the first
+enabled option; with none enabled, expose -1 and no active descendant. Opening
+seeds the enabled selected value, otherwise the first enabled option. An empty
+Select roster closes synchronously and removes its controls/active-descendant
+references. Re-population does not reopen it. An all-disabled nonempty list can
+remain open but cannot commit or expose an active descendant. Never emit an
+active-descendant id that does not exist in the rendered list.
+
+The shared keyboard hook resolves against the current roster before rendering
+or committing. Reset typeahead at open/close boundaries and on unmount, not
+only after the existing 500ms timeout. Preserve existing accumulated-prefix
+matching within one session. Do not add new repeat-character or IME policies.
+
+A public option becomes a union: string/number labels allow optional
+`textValue`; other ReactNode labels require `textValue: string`. Explicit text
+is the typeahead source; otherwise infer from the primitive label. Do not
+execute or introspect React components. Keep public and internal option types
+aligned and update exported API reports and migration docs. Existing plain
+labels remain source-compatible. Runtime JavaScript callers missing text must
+remain safe (no match), while TypeScript rejects missing text on rich labels.
+
+## Ref lifecycle
+
+Use one internal ref-composition helper for Select, Checkbox and TextInput.
+Consumer object refs receive node then null. Callback refs returning nothing
+receive node then null. Callback refs returning cleanup run that cleanup
+exactly once per attachment and do not also receive null. Clear internal refs
+on detach. Ref replacement and StrictMode attach/detach must work without
+stale nodes, duplicate cleanups, or React 18 callback-return warnings.
+
+The helper may return a void callback and internally invoke a stored cleanup
+on React's null detach, which supports React 18 and React 19 without runtime
+version checks. It must preserve stable callback identity when refs are stable.
+It is internal, not a new public export. This follows the supported React 19
+[callback ref contract](https://react.dev/reference/react-dom/components/common#ref-callback),
+including its compatibility null-detach path for callbacks without a return.
+Revisit the adapter if a future React release removes that compatibility path.
+
+## Verification and completion
+
+Add failing behavior tests before implementation: reorder/remove/disable/empty
+and all-disabled rosters, selected-disabled seed, immediate typeahead reopen,
+rich-label explicit text and type-level rejection, and actual control ref
+replacement/unmount/StrictMode. Run existing component and enum-editor suites
+for shared-hook regressions. Test helper null-detach explicitly for React 18's
+contract; validate production builds against the repository's React 19 runtime.
+
+Use focused mutation checks for identity reconciliation, typeahead boundary
+reset and cleanup invocation. Then full React tests, typecheck, API report,
+changed-file lint/format and production build. Existing browser Select/filter
+flows verify the built package integration. Record precise evidence and leave
+A7/A11–A13 and editor A4–A6 open. Commit locally; no merge or publication.
diff --git a/docs/superpowers/specs/2026-09-08-components-sp4c-overlays-design.md b/docs/superpowers/specs/2026-09-08-components-sp4c-overlays-design.md
new file mode 100644
index 000000000..7dfecdacb
--- /dev/null
+++ b/docs/superpowers/specs/2026-09-08-components-sp4c-overlays-design.md
@@ -0,0 +1,119 @@
+# Components SP4C: overlay ownership and visible states
+
+Date: 2026-09-08
+Baseline: `356e447f`
+Status: implemented, independently reviewed and verified; see SP4C plan
+
+## Scope and design choice
+
+User authorization covers continuing the fresh-slate audit and breaking fixes.
+Repair A7 (sibling popup dismissal), A11 (scoped portal themes), A12/A13
+(disabled/forced-colors states). Also namespace the touched listbox active
+attribute. Editor A4–A6/date semantics remain separate.
+
+Use explicit logical containment for outside presses, and an explicit public
+portal container for CSS scope. A global single-open flag would incorrectly
+close parent popups; blanket propagation suppression hides sibling presses.
+Copying computed styles cannot reliably reproduce arbitrary live CSS scope.
+The explicit container makes theme ownership a normal CSS inheritance choice.
+
+## Portal scope API
+
+Export `PretableOverlayProvider` and `PretableOverlayProviderProps` with
+`container: HTMLElement | null` and `children: ReactNode`. All existing
+OverlayPortal consumers use the nearest provider. Without a provider, retain
+the document.body default. Inside a provider, null means wait for its target;
+do not briefly fall back to body. The provider adds no visual wrapper and is
+SSR/hydration-safe. Switching targets moves mounted portal content through
+React's normal lifecycle; do not promise focus preservation across replacement.
+
+The documented scoped-theme pattern places the grid and a portal host inside
+one themed section, with the host outside the grid's clipping viewport. Tokens,
+dir, color-scheme and their live changes inherit naturally from that section.
+A provider alone does not copy styles from its trigger. Move grid-only overrides
+to the shared section or explicitly theme the target. Target must be connected,
+in the same document as the trigger, outside clipping/transformed containing
+blocks, and controlled by the application; no automatic transformed-coordinate
+support is promised. Nested providers choose their nearest target.
+
+Delayed attachment is explicit: preserve a popup's open intent while its
+provider target is null, but emit expanded/controls/active-descendant state
+only when the popup can actually render. Apply the target readiness gate to
+Select and to enum/date active-descendant references. Focus-taking menus must
+focus on actual portal attachment (including null→target and hydration), not
+only on their component's initial mount. Reposition/ordinary rerenders must not
+repeatedly steal focus. Tests cover opening before a target exists, supplying
+it, removing it, and attaching again.
+
+## Logical containment and dismissal
+
+Each portal retains a hidden origin marker in the React/DOM source tree and a
+nonvisual `display: contents` portal boundary in the target. A weak registry
+maps the boundary to its origin. A shared containment helper follows origin
+links, so an event in a nested portalled list counts as inside its parent
+filter dialog, while a sibling's popup/trigger counts as outside. No global
+single-popup singleton; separate grids and nested menus must coexist correctly.
+Unregister boundaries on detach and target replacement.
+
+Use a shared capture-phase outside-pointer listener so unrelated bubbling
+stopPropagation cannot hide outside presses. Exempt both the owning popup root
+and its trigger. Integrate Select/Listbox, FilterMenu, ColumnMenu and shared
+menu-keyboard users, passing trigger references through their internal callers
+where needed. Remove popup/trigger blanket pointer suppression whose sole job
+was dismissal. Preserve independent drag/grid selection propagation controls
+when they serve a different purpose, documenting those cases. Nested portal
+containment must work without blanket suppression. Keep existing Escape/Tab
+focus semantics: inner Escape closes only the inner popup; outside press does
+not return focus; pressing the same trigger toggles closed without reopening.
+
+Origin/boundary markers are internal DOM details. Replace tests assuming the
+list is a direct body child with assertions that it escapes the clipping grid
+and resides in the chosen portal target; do not weaken focus or dismissal tests.
+
+## Visual states
+
+Before CSS edits, capture a browser baseline for actual kit state markup with
+the current stylesheet. Cover enabled/disabled options, committed vs active
+options, and checked/mixed/unchecked checkboxes in light/dark and forced colors.
+
+Rename listbox `data-active` to `data-pretable-active`; update runtime, CSS,
+current tests/docs and migration note. Keep historical changelogs intact.
+Disabled options use disabled ink/cursor and never acquire enabled hover paint.
+In forced colors, active option focus has a visible system-color outline
+independent of committed selection. Define selected+disabled combinations
+explicitly so disabled ink wins. Define checked/mixed+disabled checkbox fill,
+border, glyph and focus using coherent system color pairs; no author border or
+outline colors under forced-color-adjust:none. Disabled controls remain visibly
+disabled, with checked/mixed glyphs still legible. Do not rely on opacity alone.
+
+Use browser computed-style checks and inspected screenshots. Chromium provides
+forced-colors emulation; report its boundary, do not claim physical Windows
+high-contrast or human screen-reader validation. Verify ordinary rendering in
+Chromium and WebKit and live local-theme/direction changes for two scopes and
+a nested popup. Keep changes confined to these state defects.
+
+## Verification
+
+TDD: sibling Select A→B; same-trigger toggle; outside target stopping bubble;
+inner list keeps filter/menu parent; sibling nested selects dismiss only sibling;
+Escape focus and portal registry teardown; provider null/default/custom/switch,
+SSR/hydration and nearest nested target. Reproduce old disabled/forced-color
+combinations in CSS/browser checks before fixes. Mutation-check containment
+ancestry and trigger exemption plus disabled/active styling guards.
+
+Then targeted overlay/control/filter/tool-panel suites, full React and UI
+suites, public type tests/API reports, builds and lint/format. Run production
+browser component flows plus scoped-overlay/state fixtures, inspect before/
+after screenshots, and record exact results. Docs must distinguish explicit
+theme-container setup from automatic style copying. Add React minor and UI
+minor changesets for new API/attribute migration. Commit locally, no publishing.
+
+## Visual QA correction
+
+Production screenshots exposed stale popup coordinates after a live direction
+change moved the trigger. Select and header popovers must remeasure when their
+anchor layout or ancestor direction/style changes, including deferred target
+attachment. Keep this observation bounded to open overlays and avoid state
+updates for unchanged rectangles. Production assertions now check attachment
+to the moved trigger as well as CSS inheritance; both Select and header-menu
+assertions failed against the first integration build.
diff --git a/docs/superpowers/specs/2026-09-08-components-sp4d-editors-design.md b/docs/superpowers/specs/2026-09-08-components-sp4d-editors-design.md
new file mode 100644
index 000000000..06908e4d7
--- /dev/null
+++ b/docs/superpowers/specs/2026-09-08-components-sp4d-editors-design.md
@@ -0,0 +1,77 @@
+# SP4D: finish editor correctness and kit adoption
+
+Baseline: `04dc1b5e`. User authorizes all remaining follow-ups, PR, merge on green,
+and direct Chrome MCP verification. Existing isolated worktree is retained.
+
+## Design
+
+Repair the existing typed editors rather than replace them with native pickers
+(which loses scoped styling) or redesign the controller (whose lifecycle guards
+are verified). Controller remains the only commit authority. Breaking corrections
+are permitted, and are documented in a changeset.
+
+Enum: keep editable query separate from an intentional canonical choice. An
+internal tagged draft may carry chosen identity through synchronous setDraft
+and controller parsing; never round-trip the chosen label. Validate membership
+before built-in commit, and unwrap the value as text for custom parseEditValue
+(which remains authoritative). A pristine existing selection keeps its identity,
+including duplicate labels/value-label collisions. Typed text resolves only if
+its case-insensitive label/value matches identify exactly one distinct option;
+ambiguous text produces a recoverable validation error, never picks the first.
+Blank query commits null via Enter/Tab/blur unless the user intentionally
+navigated to an option. Escape cancels. Explicit keyboard/click choices commit
+that identity. Preserve permission, error recovery, pending and stale-session
+invariants. Seeded type-to-replace must not be normalized to an old selection.
+
+Composition: shared guard checks native isComposing, compositionstart/end state,
+and legacy keyCode229 before specialized editor and surface key behavior.
+Composition keys retain browser defaults and cannot commit/cancel/step/navigate
+or enter an edit. Do not suppress the next genuine command after composition.
+Shared direction policy: Tab right, Shift+Tab left; Enter down, Shift+Enter up.
+Multiline plain/Shift+Enter remain native newlines; Ctrl/Meta+Enter commit with
+that directional policy. Pending controls remain inert.
+
+Date: editable combobox with a grid popup, truthful expanded/haspopup=grid,
+controls and active-descendant only for mounted popup nodes. DOM focus stays
+on the text input. Separate calendar cursor from draft: arrows/PageUp/PageDown
+browse only; Enter intentionally chooses a navigated cursor, while Tab/blur
+commit typed/current text. Left/Right/Home/End retain caret behavior before
+calendar navigation; ArrowDown/Up enter calendar navigation, typing returns to
+text editing. Month buttons browse without selection; clicks choose dates.
+Escape cancels the edit. Empty text clears, invalid text is not silently saved,
+null/invalid/custom-parser seed handling retains existing safety. The active
+cursor and selected date have distinct normal/forced-color state. Boundaries
+stay within supported calendar range. Disabled/pending calendar actions expose
+truthful state. Editor popups follow live layout with the existing observer.
+Reference: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ (read 2026-09-08).
+
+Kit: add native PretableTextarea with forwarded cleanup-aware ref, native props,
+site and data-pretable-textarea. Export props/component slot, wire memoized
+resolution. Migrate text/number/enum/date inputs through components.TextInput,
+multiline through Textarea, date month and number step buttons through the kit
+IconButton. Preserve existing class/data hooks and documented site identifiers.
+Do not convert calendar gridcells into conflicting button roles. Ensure editor
+geometry and error/pending/focus precedence survive base kit styling. Consumer
+replacements must receive real refs, names, handlers and pending state.
+
+Close remaining documentation inaccuracies: props cross portals, button.value
+exists, native checkbox supports tabindex. Accessible-name warning is explicitly
+a heuristic unless tightened with meaningful regressions. Rename stale test
+names that claim development-only warnings; preserve historical release notes.
+
+## Verification and delivery
+
+Capture and inspect production editor visual baselines before migration/CSS edits,
+then compare matched Chromium/WebKit screenshots and forced-color date states.
+Observe RED regressions for identity, ambiguity, clearing, reverse navigation,
+composition, date browsing without writes, ARIA, overrides/ref and CSS states.
+Focused/full React and UI tests, public types/API, React18/19 packed matrix,
+production build, docs guards, lint/format. Direct Chrome MCP interaction and
+accessibility snapshots plus Chromium/WebKit automated flows and inspected
+screenshots. Synthetic composition tests are not a claim of physical OS IME or
+human screen-reader validation; record that boundary honestly.
+
+Update the audit with evidence for every remaining finding. Review implementation
+independently, push PR, resolve required checks/review findings, merge only green,
+then verify merged/deployed state in Chrome MCP. Never claim human validation
+performed by automated browser tools. No unrelated dependency changes.
diff --git a/packages/grid-core/src/__tests__/grid-ui-core.test.ts b/packages/grid-core/src/__tests__/grid-ui-core.test.ts
index 71fe90ffb..550605bcc 100644
--- a/packages/grid-core/src/__tests__/grid-ui-core.test.ts
+++ b/packages/grid-core/src/__tests__/grid-ui-core.test.ts
@@ -348,6 +348,62 @@ describe("UI-only grid core", () => {
     ).toThrowError(expect.objectContaining({ code: "disposed-grid-ui" }));
   });
 
+  describe.each(["checking", "validating", "saving"] as const)(
+    "draft writes during %s",
+    (status) => {
+      test.each([42, 99])(
+        "preserves the entire editing state for draft %s",
+        (value) => {
+          const { grid } = make();
+          grid.observeRowModelRevision(0);
+          grid.beginEdit({
+            rowId: 1,
+            columnId: "quantity",
+            value: 42,
+            status: status === "checking" ? "checking" : "editing",
+          });
+          if (status !== "checking")
+            grid.setEditStatus(status, "Existing error");
+          const before = grid.getState();
+          const listener = vi.fn();
+          grid.subscribe(listener);
+
+          grid.setEditDraft(value);
+
+          expect(grid.getState().editing).toEqual({
+            rowId: 1,
+            columnId: "quantity",
+            value: 42,
+            status,
+            error: status === "checking" ? undefined : "Existing error",
+          });
+          expect(grid.getState()).toBe(before);
+          expect(listener).not.toHaveBeenCalled();
+        },
+      );
+    },
+  );
+
+  test.each(["editing", "error"] as const)(
+    "accepts a changed draft and clears the error during %s",
+    (status) => {
+      const { grid } = make();
+      grid.observeRowModelRevision(0);
+      grid.beginEdit({ rowId: 1, columnId: "quantity", value: 42 });
+      grid.setEditStatus(status, "Existing error");
+
+      grid.setEditDraft(99);
+
+      expect(grid.getState().editing).toEqual({
+        rowId: 1,
+        columnId: "quantity",
+        value: 99,
+        status: "editing",
+        error: undefined,
+      });
+    },
+  );
+
   test("keeps row, row-ID, and column correlations through editing", () => {
     const { grid } = make();
     grid.observeRowModelRevision(0);
diff --git a/packages/grid-core/src/create-grid-ui-core.ts b/packages/grid-core/src/create-grid-ui-core.ts
index 43576feb4..c2e72cf00 100644
--- a/packages/grid-core/src/create-grid-ui-core.ts
+++ b/packages/grid-core/src/create-grid-ui-core.ts
@@ -890,7 +890,13 @@ export function createGridUiCore<
     },
     setEditDraft(value) {
       command(() => {
-        if (state.editing === null || Object.is(state.editing.value, value))
+        if (
+          state.editing === null ||
+          state.editing.status === "checking" ||
+          state.editing.status === "validating" ||
+          state.editing.status === "saving" ||
+          Object.is(state.editing.value, value)
+        )
           return;
         publish({
           ...state,
diff --git a/packages/react/react.api.md b/packages/react/react.api.md
index 982e0692a..106c2d66d 100644
--- a/packages/react/react.api.md
+++ b/packages/react/react.api.md
@@ -14,6 +14,7 @@ import { InputHTMLAttributes } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
+import { TextareaHTMLAttributes } from 'react';
 
 // @public
 export function buildExportFileName(input: BuildExportFileNameArgs): string;
@@ -426,7 +427,7 @@ export type PretableBodyStateKind = "loading" | "empty" | "error" | "error-strip
 export type PretableBuiltinAggregate<TValue, TType extends PretableColumnType> = "count" | (TType extends "number" ? NonNullable<TValue> extends number ? "sum" | "avg" | "min" | "max" : never : TType extends "date" ? NonNullable<TValue> extends string ? "min" | "max" : never : never);
 
 // @public
-export type PretableBuiltInSite = "filter-add" | "add-group" | "expand-all" | "collapse-all" | "filter-clear" | "tool-reset" | "filter-funnel" | "column-menu-button" | "tool-row-menu-button" | "chip-remove" | "filter-row-remove" | "tool-group-remove" | "filter-operator" | "filter-row-column" | "filter-row-operator" | "aggregate" | "filter-value" | "filter-row-value" | "tool-search" | "row-select" | "row-select-all" | "bool-cell" | "tool-column-toggle" | "hide-grouped" | "filter-choice" | "filter-row-choice";
+export type PretableBuiltInSite = "cell-editor" | "number-increment" | "number-decrement" | "date-previous-month" | "date-next-month" | "filter-add" | "add-group" | "expand-all" | "collapse-all" | "filter-clear" | "tool-reset" | "filter-funnel" | "column-menu-button" | "tool-row-menu-button" | "chip-remove" | "filter-row-remove" | "tool-group-remove" | "filter-operator" | "filter-row-column" | "filter-row-operator" | "aggregate" | "filter-value" | "filter-row-value" | "tool-search" | "row-select" | "row-select-all" | "bool-cell" | "tool-column-toggle" | "hide-grouped" | "filter-choice" | "filter-row-choice";
 
 // @public
 export const PretableButton: ForwardRefExoticComponent<PretableButtonProps & RefAttributes<HTMLButtonElement>>;
@@ -859,6 +860,7 @@ export interface PretableComponents {
     readonly Checkbox?: PretableCheckboxComponent;
     readonly IconButton?: PretableIconButtonComponent;
     readonly Select?: PretableSelectComponent;
+    readonly Textarea?: PretableTextareaComponent;
     readonly TextInput?: PretableTextInputComponent;
 }
 
@@ -1606,6 +1608,16 @@ export interface PretableMutationResult<TRowId extends PretableRowId> {
 // @public
 export type PretableOpenEditStatus = "editing" | "validating" | "saving" | "error";
 
+// @public
+export function PretableOverlayProvider(input: PretableOverlayProviderProps): ReactElement;
+
+// @public
+export interface PretableOverlayProviderProps {
+    // (undocumented)
+    children: ReactNode;
+    container: HTMLElement | null;
+}
+
 // @public
 export type PretablePresentationColumns<TColumns, TRowId extends string | number> = TColumns extends readonly (infer TColumn)[] ? readonly (TColumn extends {
     readonly id: infer TId extends string;
@@ -2040,11 +2052,16 @@ export interface PretableSelectionState {
 }
 
 // @public
-export interface PretableSelectOption {
-    readonly disabled?: boolean;
-    readonly label: ReactNode;
+export type PretableSelectOption = {
     readonly value: string;
-}
+    readonly disabled?: boolean;
+} & ({
+    readonly label: string | number;
+    readonly textValue?: string;
+} | {
+    readonly label: Exclude<ReactNode, string | number>;
+    readonly textValue: string;
+});
 
 // @public
 export interface PretableSelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "value" | "onChange" | "aria-label" | "children"> {
@@ -2545,6 +2562,17 @@ export interface PretableTelemetry<TRowId extends PretableRowId = string> {
     };
 }
 
+// @public
+export const PretableTextarea: ForwardRefExoticComponent<PretableTextareaProps & RefAttributes<HTMLTextAreaElement>>;
+
+// @public
+export type PretableTextareaComponent = ComponentType<PretableTextareaProps & RefAttributes<HTMLTextAreaElement>>;
+
+// @public
+export interface PretableTextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "children"> {
+    site?: PretableSite;
+}
+
 // @public
 export const PretableTextInput: ForwardRefExoticComponent<PretableTextInputProps & RefAttributes<HTMLInputElement>>;
 
diff --git a/packages/react/src/__tests__/accessible-name.test.ts b/packages/react/src/__tests__/accessible-name.test.ts
new file mode 100644
index 000000000..311afed1e
--- /dev/null
+++ b/packages/react/src/__tests__/accessible-name.test.ts
@@ -0,0 +1,30 @@
+import { afterEach, expect, test } from "vitest";
+import { hasAccessibleName } from "../components/accessible-name";
+
+afterEach(() => {
+  document.body.replaceChildren();
+});
+
+test.each([
+  "<label><input /></label>",
+  '<span id="name"></span><input aria-labelledby="name" />',
+  '<input aria-labelledby="missing" />',
+  '<label for="field"> </label><input id="field" />',
+])("does not accept an empty or unresolved name: %s", (html) => {
+  const host = document.createElement("div");
+  host.innerHTML = html;
+  document.body.append(host);
+  expect(hasAccessibleName(host.querySelector("input")!)).toBe(false);
+  host.remove();
+});
+test.each([
+  '<input title="Value" />',
+  '<span id="name">Value</span><input aria-labelledby="missing name" />',
+  "<label>Value<input /></label>",
+])("accepts a meaningful bounded name source: %s", (html) => {
+  const host = document.createElement("div");
+  host.innerHTML = html;
+  document.body.append(host);
+  expect(hasAccessibleName(host.querySelector("input")!)).toBe(true);
+  host.remove();
+});
diff --git a/packages/react/src/__tests__/components-button.test.tsx b/packages/react/src/__tests__/components-button.test.tsx
index 27695b133..358d17348 100644
--- a/packages/react/src/__tests__/components-button.test.tsx
+++ b/packages/react/src/__tests__/components-button.test.tsx
@@ -137,7 +137,7 @@ describe("PretableIconButton", () => {
     expect(ref.current).toHaveAttribute("data-pretable-filter-funnel", "");
   });
 
-  test("warns in development when the accessible name is empty", () => {
+  test("warns once when the accessible name is empty", () => {
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
     render(<PretableIconButton aria-label="   " />);
     expect(warn).toHaveBeenCalledTimes(1);
@@ -236,6 +236,7 @@ describe("components context", () => {
       ComponentProps<typeof PretableIconButton>
     >((props, ref) => <button {...props} ref={ref} data-mine="" />);
     const value = {
+      ...DEFAULT_COMPONENTS,
       Button: PretableButton,
       IconButton: MyIcon,
       Select: PretableSelect,
diff --git a/packages/react/src/__tests__/components-checkbox.test.tsx b/packages/react/src/__tests__/components-checkbox.test.tsx
index e12deab2b..609c62424 100644
--- a/packages/react/src/__tests__/components-checkbox.test.tsx
+++ b/packages/react/src/__tests__/components-checkbox.test.tsx
@@ -208,7 +208,7 @@ describe("PretableCheckbox", () => {
     expect(onCheckedChange).toHaveBeenCalledWith(true);
   });
 
-  test("warns in development when nothing names it, and not when a label or aria-label does", () => {
+  test("warns once when nothing names it, and not when a label or aria-label does", () => {
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
 
     const bare = render(
diff --git a/packages/react/src/__tests__/components-listbox.test.tsx b/packages/react/src/__tests__/components-listbox.test.tsx
index 2db26eb4c..407b2b568 100644
--- a/packages/react/src/__tests__/components-listbox.test.tsx
+++ b/packages/react/src/__tests__/components-listbox.test.tsx
@@ -58,7 +58,9 @@ describe("Listbox", () => {
       />,
     );
     const list = document.querySelector("[data-pretable-listbox]")!;
-    expect(list.parentElement).toBe(document.body);
+    expect(list.closest("[data-pretable-overlay-root]")?.parentElement).toBe(
+      document.body,
+    );
     expect(list).toHaveAttribute("role", "listbox");
     expect(list).toHaveAttribute("id", "lb");
     // The MENU placement, not the dialog's: `position: fixed` alone is true
@@ -77,6 +79,9 @@ describe("Listbox", () => {
     expect(options[0]).toHaveAttribute("id", "lb-0"); // the format itself
     expect(options[3]).toHaveAttribute("id", listboxOptionId("lb", 3));
     expect(options[0]).toHaveAttribute("role", "option");
+    expect(options[0]).toHaveAttribute("data-pretable-active", "");
+    expect(options[1]).not.toHaveAttribute("data-pretable-active");
+    expect(list.querySelector("[data-active]")).toBeNull();
     expect(options[0]).toHaveAttribute(
       "data-pretable-option-value",
       "contains",
@@ -176,10 +181,8 @@ describe("Listbox", () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  test("a press inside the list does not reach a host popover's outside-press listener", () => {
-    // The list is portalled to body: unstopped, a press on an option would
-    // read as OUTSIDE to the dialog or menu the select sits in, dismissing
-    // the host under the pointer.
+  test("a press inside the list remains observable by document listeners", () => {
+    // Logical containment, rather than stopped bubbling, owns dismissal.
     const hostListener = vi.fn();
     document.addEventListener("pointerdown", hostListener);
     try {
@@ -195,10 +198,9 @@ describe("Listbox", () => {
         />,
       );
       fireEvent.pointerDown(document.querySelector("[data-pretable-option]")!);
-      expect(hostListener).not.toHaveBeenCalled();
-      // The positive twin: a real outside press still reaches the host.
-      fireEvent.pointerDown(document.body);
       expect(hostListener).toHaveBeenCalledTimes(1);
+      fireEvent.pointerDown(document.body);
+      expect(hostListener).toHaveBeenCalledTimes(2);
     } finally {
       document.removeEventListener("pointerdown", hostListener);
     }
@@ -398,4 +400,67 @@ describe("useListboxKeys", () => {
     hook.rerender({ open: true });
     expect(hook.result.current.activeIndex).toBe(1);
   });
+
+  test("an index reset in the same batch as filtering resolves against the new roster", () => {
+    const hook = renderHook(
+      ({ options }) =>
+        useListboxKeys({
+          options,
+          open: true,
+          initialIndex: 1,
+          onOpen: () => {},
+          onCommit: () => {},
+          onClose: () => {},
+        }),
+      { initialProps: { options: OPTIONS } },
+    );
+    act(() => {
+      hook.result.current.setActiveIndex(0);
+      hook.rerender({ options: [OPTIONS[3]!, OPTIONS[0]!] });
+    });
+    expect(hook.result.current.activeIndex).toBe(0);
+  });
+
+  test("missing rich-label text from JavaScript is safe and does not match", () => {
+    const options = [
+      { value: "a", label: "Alpha" },
+      { value: "b", label: <span>Beta</span> },
+    ] as readonly ListboxOption[];
+    const { hook } = setup(true, 0, options);
+    act(() => hook.result.current.onKeyDown(key("b")));
+    expect(hook.result.current.activeIndex).toBe(0);
+  });
+
+  test("accepts an inline option roster on every render", () => {
+    const hook = renderHook(() =>
+      useListboxKeys({
+        options: [{ value: "a", label: "Alpha" }],
+        open: true,
+        initialIndex: 0,
+        onOpen: () => {},
+        onCommit: () => {},
+        onClose: () => {},
+      }),
+    );
+    expect(hook.result.current.activeIndex).toBe(0);
+  });
+
+  test("reintroducing a removed option does not resurrect its old highlight", () => {
+    const hook = renderHook(
+      ({ options }) =>
+        useListboxKeys({
+          options,
+          open: true,
+          initialIndex: 1,
+          onOpen: () => {},
+          onCommit: () => {},
+          onClose: () => {},
+        }),
+      { initialProps: { options: OPTIONS } },
+    );
+    hook.rerender({ options: [OPTIONS[0]!] });
+    expect(hook.result.current.activeIndex).toBe(0);
+    hook.rerender({ options: [OPTIONS[1]!, OPTIONS[0]!] });
+    expect(hook.result.current.activeIndex).toBe(1);
+  });
 });
diff --git a/packages/react/src/__tests__/components-override.test.tsx b/packages/react/src/__tests__/components-override.test.tsx
index fbe4398a1..9df48eff0 100644
--- a/packages/react/src/__tests__/components-override.test.tsx
+++ b/packages/react/src/__tests__/components-override.test.tsx
@@ -178,7 +178,9 @@ describe("components on the surface", () => {
       if (!el) throw new Error("dialog not open");
       return el;
     });
-    expect(dialog.parentElement).toBe(document.body);
+    expect(dialog.closest("[data-pretable-overlay-root]")?.parentElement).toBe(
+      document.body,
+    );
     const clear = dialog.querySelector("[data-pretable-filter-clear]")!;
     expect(clear).toHaveAttribute("data-mine", "filter-clear");
   });
diff --git a/packages/react/src/__tests__/components-refs.test.tsx b/packages/react/src/__tests__/components-refs.test.tsx
new file mode 100644
index 000000000..757e22aa6
--- /dev/null
+++ b/packages/react/src/__tests__/components-refs.test.tsx
@@ -0,0 +1,137 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, render } from "@testing-library/react";
+import { createRef, StrictMode } from "react";
+import { afterEach, expect, it, vi } from "vitest";
+
+import { PretableCheckbox } from "../components/checkbox";
+import { PretableSelect } from "../components/select";
+import { PretableTextarea } from "../components/textarea";
+import { PretableTextInput } from "../components/text-input";
+
+afterEach(cleanup);
+
+type ConsumerRef = (node: HTMLElement | null) => void | (() => void);
+const controls = [
+  {
+    name: "Textarea",
+    render: (ref: ConsumerRef) => (
+      <PretableTextarea aria-label="Text" ref={ref} />
+    ),
+  },
+  {
+    name: "Checkbox",
+    render: (ref: ConsumerRef) => (
+      <PretableCheckbox
+        aria-label="Check"
+        checked={false}
+        onCheckedChange={() => {}}
+        ref={ref}
+      />
+    ),
+  },
+  {
+    name: "TextInput",
+    render: (ref: ConsumerRef) => (
+      <PretableTextInput aria-label="Text" ref={ref} />
+    ),
+  },
+  {
+    name: "Select",
+    render: (ref: ConsumerRef) => (
+      <PretableSelect
+        aria-label="Select"
+        options={[{ value: "a", label: "A" }]}
+        value="a"
+        onChange={() => {}}
+        ref={ref}
+      />
+    ),
+  },
+];
+
+it.each(controls)(
+  "$name invokes callback cleanup once on replacement and unmount",
+  ({ render: control }) => {
+    const disposeFirst = vi.fn();
+    const disposeSecond = vi.fn();
+    const first = vi.fn<ConsumerRef>(() => disposeFirst);
+    const second = vi.fn<ConsumerRef>(() => disposeSecond);
+    const { rerender, unmount } = render(control(first));
+    const node = first.mock.calls[0];
+    expect(first).toHaveBeenCalledOnce();
+    rerender(control(first));
+    expect(first).toHaveBeenCalledOnce();
+    expect(disposeFirst).not.toHaveBeenCalled();
+    rerender(control(second));
+    expect(disposeFirst).toHaveBeenCalledOnce();
+    expect(first).toHaveBeenCalledOnce();
+    expect(second.mock.calls[0]).toEqual(node);
+    unmount();
+    expect(disposeFirst).toHaveBeenCalledOnce();
+    expect(disposeSecond).toHaveBeenCalledOnce();
+    expect(second).toHaveBeenCalledOnce();
+  },
+);
+it.each(controls)(
+  "$name cleans every StrictMode attachment exactly once",
+  ({ render: control }) => {
+    const cleanups: ReturnType<typeof vi.fn>[] = [];
+    const ref = vi.fn((node: HTMLElement | null) => {
+      expect(node).not.toBeNull();
+      const dispose = vi.fn();
+      cleanups.push(dispose);
+      return dispose;
+    });
+    const { unmount } = render(<StrictMode>{control(ref)}</StrictMode>);
+    expect(cleanups.length).toBeGreaterThanOrEqual(2);
+    expect(
+      cleanups.slice(0, -1).every((dispose) => dispose.mock.calls.length === 1),
+    ).toBe(true);
+    expect(cleanups.at(-1)).not.toHaveBeenCalled();
+    unmount();
+    expect(cleanups.every((dispose) => dispose.mock.calls.length === 1)).toBe(
+      true,
+    );
+  },
+);
+it.each(controls)(
+  "$name delivers null to callback refs without cleanup",
+  ({ render: control }) => {
+    const ref = vi.fn<ConsumerRef>(() => {});
+    const { unmount } = render(control(ref));
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLElement));
+    unmount();
+    expect(ref).toHaveBeenLastCalledWith(null);
+    expect(ref).toHaveBeenCalledTimes(2);
+  },
+);
+it("clears all control object refs on unmount", () => {
+  const checkbox = createRef<HTMLButtonElement>();
+  const input = createRef<HTMLInputElement>();
+  const select = createRef<HTMLButtonElement>();
+  const { unmount } = render(
+    <>
+      <PretableCheckbox
+        aria-label="Check"
+        checked={false}
+        onCheckedChange={() => {}}
+        ref={checkbox}
+      />
+      <PretableTextInput aria-label="Text" ref={input} />
+      <PretableSelect
+        aria-label="Select"
+        options={[]}
+        value=""
+        onChange={() => {}}
+        ref={select}
+      />
+    </>,
+  );
+  expect(checkbox.current).toBeInstanceOf(HTMLButtonElement);
+  expect(input.current).toBeInstanceOf(HTMLInputElement);
+  expect(select.current).toBeInstanceOf(HTMLButtonElement);
+  unmount();
+  expect(checkbox.current).toBeNull();
+  expect(input.current).toBeNull();
+  expect(select.current).toBeNull();
+});
diff --git a/packages/react/src/__tests__/components-select.test.tsx b/packages/react/src/__tests__/components-select.test.tsx
index 44c7363a2..facce99ae 100644
--- a/packages/react/src/__tests__/components-select.test.tsx
+++ b/packages/react/src/__tests__/components-select.test.tsx
@@ -1,8 +1,9 @@
 import "@testing-library/jest-dom/vitest";
-import { cleanup, fireEvent, render } from "@testing-library/react";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
 import { createRef, type ComponentProps } from "react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
+import { PretableOverlayProvider } from "../overlay/portal-context";
 import { PretableSelect } from "../components/select";
 import { resetDevWarnings } from "../dev-warn";
 import { chooseOption, readOptions, selectValue } from "./select-helpers";
@@ -10,6 +11,7 @@ import { chooseOption, readOptions, selectValue } from "./select-helpers";
 afterEach(() => {
   cleanup();
   vi.restoreAllMocks();
+  vi.unstubAllGlobals();
 });
 
 beforeEach(() => {
@@ -224,7 +226,7 @@ describe("PretableSelect", () => {
     expect(document.querySelector("[data-pretable-listbox]")).toBeNull();
   });
 
-  test("warns in development on an empty accessible name", () => {
+  test("warns once on an empty accessible name", () => {
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
     render(
       <PretableSelect
@@ -237,4 +239,313 @@ describe("PretableSelect", () => {
     expect(warn).toHaveBeenCalledTimes(1);
     expect(warn.mock.calls[0]?.[0]).toMatch(/PretableSelect/);
   });
+
+  test("preserves the active value across insertion and reorder before committing", () => {
+    const { view, trigger, onChange } = renderSelect();
+    fireEvent.click(trigger);
+    fireEvent.keyDown(trigger, { key: "ArrowDown" });
+    const next = [OPTIONS[1]!, { value: "new", label: "New" }, OPTIONS[0]!];
+    view.rerender(
+      <PretableSelect
+        aria-label="Operator"
+        options={next}
+        value="contains"
+        onChange={onChange}
+      />,
+    );
+    const active = document.getElementById(
+      trigger.getAttribute("aria-activedescendant")!,
+    );
+    expect(active).toHaveAttribute("data-pretable-option-value", "equals");
+    fireEvent.keyDown(trigger, { key: "Enter" });
+    expect(onChange).toHaveBeenCalledWith("equals");
+  });
+
+  test.each(["removed", "disabled"])(
+    "falls back to the first enabled option when the active value is %s",
+    (change) => {
+      const { view, trigger, onChange } = renderSelect();
+      fireEvent.click(trigger);
+      fireEvent.keyDown(trigger, { key: "ArrowDown" });
+      const next =
+        change === "removed"
+          ? [OPTIONS[0]!]
+          : OPTIONS.map((o) =>
+              o.value === "equals" ? { ...o, disabled: true } : o,
+            );
+      view.rerender(
+        <PretableSelect
+          aria-label="Operator"
+          options={next}
+          value="missing"
+          onChange={onChange}
+        />,
+      );
+      const active = document.getElementById(
+        trigger.getAttribute("aria-activedescendant")!,
+      );
+      expect(active).toHaveAttribute("data-pretable-option-value", "contains");
+      fireEvent.keyDown(trigger, { key: "Enter" });
+      expect(onChange).toHaveBeenCalledWith("contains");
+    },
+  );
+
+  test("an empty open roster closes and repopulating does not reopen it", () => {
+    const { view, trigger, onChange } = renderSelect();
+    fireEvent.click(trigger);
+    view.rerender(
+      <PretableSelect
+        aria-label="Operator"
+        options={[]}
+        value="contains"
+        onChange={onChange}
+      />,
+    );
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(trigger).not.toHaveAttribute("aria-controls");
+    expect(trigger).not.toHaveAttribute("aria-activedescendant");
+    expect(view.queryByRole("listbox")).toBeNull();
+    view.rerender(
+      <PretableSelect
+        aria-label="Operator"
+        options={OPTIONS}
+        value="contains"
+        onChange={onChange}
+      />,
+    );
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(view.queryByRole("listbox")).toBeNull();
+  });
+
+  test("an all-disabled open roster clears the active descendant and cannot commit", () => {
+    const { view, trigger, onChange } = renderSelect();
+    fireEvent.click(trigger);
+    view.rerender(
+      <PretableSelect
+        aria-label="Operator"
+        options={OPTIONS.map((o) => ({ ...o, disabled: true }))}
+        value="contains"
+        onChange={onChange}
+      />,
+    );
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(trigger).not.toHaveAttribute("aria-activedescendant");
+    fireEvent.keyDown(trigger, { key: "Enter" });
+    expect(onChange).not.toHaveBeenCalled();
+    view.rerender(
+      <PretableSelect
+        aria-label="Operator"
+        options={OPTIONS}
+        value="contains"
+        onChange={onChange}
+      />,
+    );
+    expect(
+      document.getElementById(trigger.getAttribute("aria-activedescendant")!),
+    ).toHaveAttribute("data-pretable-option-value", "contains");
+  });
+
+  test("a disabled selected value seeds the first enabled option", () => {
+    const { trigger } = renderSelect({ value: "custom" });
+    fireEvent.click(trigger);
+    expect(
+      document.getElementById(trigger.getAttribute("aria-activedescendant")!),
+    ).toHaveAttribute("data-pretable-option-value", "contains");
+  });
+
+  test("a selected value in an initially all-disabled roster has no active descendant", () => {
+    const { trigger, onChange } = renderSelect({
+      options: OPTIONS.map((o) => ({ ...o, disabled: true })),
+    });
+    fireEvent.click(trigger);
+    expect(trigger).not.toHaveAttribute("aria-activedescendant");
+    fireEvent.keyDown(trigger, { key: "Enter" });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test("typeahead uses explicit text for rich labels and primitive overrides", () => {
+    const { trigger } = renderSelect({
+      options: [
+        { value: "contains", label: "contains" },
+        { value: "rich", label: <span>Visual label</span>, textValue: "Beta" },
+        { value: "plain", label: "Unrelated", textValue: "Gamma" },
+        { value: "number", label: 42 },
+      ],
+    });
+    fireEvent.click(trigger);
+    fireEvent.keyDown(trigger, { key: "b" });
+    expect(
+      document.getElementById(trigger.getAttribute("aria-activedescendant")!),
+    ).toHaveAttribute("data-pretable-option-value", "rich");
+    fireEvent.keyDown(trigger, { key: "Escape" });
+    fireEvent.click(trigger);
+    fireEvent.keyDown(trigger, { key: "g" });
+    expect(
+      document.getElementById(trigger.getAttribute("aria-activedescendant")!),
+    ).toHaveAttribute("data-pretable-option-value", "plain");
+    fireEvent.keyDown(trigger, { key: "Escape" });
+    fireEvent.click(trigger);
+    fireEvent.keyDown(trigger, { key: "4" });
+    expect(
+      document.getElementById(trigger.getAttribute("aria-activedescendant")!),
+    ).toHaveAttribute("data-pretable-option-value", "number");
+  });
+
+  test("reopening within 500ms starts a fresh typeahead query", () => {
+    const { trigger } = renderSelect({
+      options: [
+        { value: "a", label: "Alpha" },
+        { value: "b", label: "Beta" },
+        { value: "c", label: "Charlie" },
+      ],
+      value: "c",
+    });
+    fireEvent.click(trigger);
+    fireEvent.keyDown(trigger, { key: "b" });
+    fireEvent.keyDown(trigger, { key: "Escape" });
+    fireEvent.click(trigger);
+    fireEvent.keyDown(trigger, { key: "a" });
+    expect(
+      document.getElementById(trigger.getAttribute("aria-activedescendant")!),
+    ).toHaveAttribute("data-pretable-option-value", "a");
+  });
+
+  test("remeasures an open trigger after a render moves its layout without stealing focus", () => {
+    const { view, trigger, onChange } = renderSelect();
+    let left = 20;
+    vi.spyOn(trigger, "getBoundingClientRect").mockImplementation(
+      () => new DOMRect(left, 30, 100, 24),
+    );
+    trigger.focus();
+    fireEvent.click(trigger);
+    expect(view.getByRole("listbox")).toHaveStyle({ left: "20px" });
+    left = 320;
+    view.rerender(
+      <PretableSelect
+        aria-label="Operator"
+        options={OPTIONS}
+        value="contains"
+        onChange={onChange}
+        style={{ marginLeft: 300 }}
+      />,
+    );
+    expect(view.getByRole("listbox")).toHaveStyle({ left: "320px" });
+    expect(trigger).toHaveFocus();
+  });
+
+  test.each(["dir", "data-theme", "class", "style"])(
+    "remeasures when ancestor %s changes outside React",
+    async (attribute) => {
+      const view = render(
+        <section dir="ltr">
+          <PretableSelect
+            aria-label="Operator"
+            options={OPTIONS}
+            value="contains"
+            onChange={() => {}}
+          />
+        </section>,
+      );
+      const trigger = view.getByRole("combobox");
+      const scope = trigger.closest("section")!;
+      const measure = vi
+        .spyOn(trigger, "getBoundingClientRect")
+        .mockImplementation(
+          () =>
+            new DOMRect(
+              scope.getAttribute(attribute) ===
+                (attribute === "dir" ? "rtl" : "changed")
+                ? 320
+                : 20,
+              30,
+              100,
+              24,
+            ),
+        );
+      fireEvent.click(trigger);
+      expect(view.getByRole("listbox")).toHaveStyle({ left: "20px" });
+      await act(async () => {
+        scope.setAttribute(attribute, attribute === "dir" ? "rtl" : "changed");
+      });
+      expect(view.getByRole("listbox")).toHaveStyle({ left: "320px" });
+      fireEvent.keyDown(trigger, { key: "Escape" });
+      measure.mockClear();
+      await act(async () => {
+        scope.removeAttribute(attribute);
+      });
+      expect(measure).not.toHaveBeenCalled();
+    },
+  );
+
+  test("a delayed portal host measures the trigger's current position on attachment", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const content = (
+      <PretableSelect
+        aria-label="Operator"
+        options={OPTIONS}
+        value="contains"
+        onChange={() => {}}
+      />
+    );
+    const view = render(
+      <PretableOverlayProvider container={null}>
+        {content}
+      </PretableOverlayProvider>,
+    );
+    const trigger = view.getByRole("combobox");
+    let left = 20;
+    vi.spyOn(trigger, "getBoundingClientRect").mockImplementation(
+      () => new DOMRect(left, 30, 100, 24),
+    );
+    fireEvent.click(trigger);
+    left = 320;
+    view.rerender(
+      <PretableOverlayProvider container={host}>
+        {content}
+      </PretableOverlayProvider>,
+    );
+    expect(view.getByRole("listbox")).toHaveStyle({ left: "320px" });
+    view.unmount();
+    host.remove();
+  });
+
+  test("resize remeasurement keeps one subscription and observers detach on close and unmount", () => {
+    const resizes: {
+      notify: () => void;
+      disconnect: ReturnType<typeof vi.fn>;
+    }[] = [];
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        disconnect = vi.fn();
+        observe() {}
+        constructor(notify: () => void) {
+          resizes.push({ notify, disconnect: this.disconnect });
+        }
+      },
+    );
+    const stopMutations = vi.spyOn(MutationObserver.prototype, "disconnect");
+    const { view, trigger } = renderSelect();
+    let left = 20;
+    vi.spyOn(trigger, "getBoundingClientRect").mockImplementation(
+      () => new DOMRect(left, 30, 100, 24),
+    );
+    fireEvent.click(trigger);
+    expect(resizes).toHaveLength(1);
+    left = 320;
+    act(() => resizes[0]!.notify());
+    expect(view.getByRole("listbox")).toHaveStyle({ left: "320px" });
+    act(() => resizes[0]!.notify());
+    expect(resizes).toHaveLength(1);
+    expect(resizes[0]!.disconnect).not.toHaveBeenCalled();
+    fireEvent.keyDown(trigger, { key: "Escape" });
+    expect(resizes[0]!.disconnect).toHaveBeenCalledTimes(1);
+    expect(stopMutations).toHaveBeenCalledTimes(1);
+    fireEvent.click(trigger);
+    expect(resizes).toHaveLength(2);
+    view.unmount();
+    expect(resizes[1]!.disconnect).toHaveBeenCalledTimes(1);
+    expect(stopMutations).toHaveBeenCalledTimes(2);
+  });
 });
diff --git a/packages/react/src/__tests__/components-text-input.test.tsx b/packages/react/src/__tests__/components-text-input.test.tsx
index a3e61bba2..3f21cb16e 100644
--- a/packages/react/src/__tests__/components-text-input.test.tsx
+++ b/packages/react/src/__tests__/components-text-input.test.tsx
@@ -86,7 +86,7 @@ describe("PretableTextInput", () => {
     expect(input).toBeDisabled();
   });
 
-  test("warns in development when nothing can name it; silent for aria-label, aria-labelledby, or a label-for", () => {
+  test("warns once when nothing can name it; silent for aria-label, aria-labelledby, or a label-for", () => {
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
 
     render(<PretableTextInput />);
diff --git a/packages/react/src/__tests__/components-textarea.test.tsx b/packages/react/src/__tests__/components-textarea.test.tsx
new file mode 100644
index 000000000..e821ff6d7
--- /dev/null
+++ b/packages/react/src/__tests__/components-textarea.test.tsx
@@ -0,0 +1,65 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { createRef } from "react";
+import { afterEach, expect, test, vi } from "vitest";
+import { PretableTextarea } from "../components/textarea";
+import { resetDevWarnings } from "../dev-warn";
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  resetDevWarnings();
+});
+test("native multiline attributes, events, and element ref pass through", () => {
+  const ref = createRef<HTMLTextAreaElement>();
+  const change = vi.fn();
+  const view = render(
+    <PretableTextarea
+      ref={ref}
+      aria-label="Notes"
+      rows={3}
+      maxLength={120}
+      name="notes"
+      site="cell-editor"
+      data-pretable-site="wrong"
+      data-pretable-textarea="wrong"
+      value="A\nB"
+      onChange={change}
+    />,
+  );
+  const field = view.getByRole("textbox");
+  expect(field.tagName).toBe("TEXTAREA");
+  expect(ref.current).toBe(field);
+  expect(field).toHaveAttribute("rows", "3");
+  expect(field).toHaveAttribute("maxlength", "120");
+  expect(field).toHaveAttribute("name", "notes");
+  expect(field).toHaveAttribute("data-pretable-site", "cell-editor");
+  expect(field).toHaveAttribute("data-pretable-textarea", "");
+  fireEvent.change(field, { target: { value: "new" } });
+  expect(change).toHaveBeenCalledOnce();
+  view.rerender(
+    <PretableTextarea ref={ref} aria-label="Notes" disabled readOnly />,
+  );
+  expect(field).toBeDisabled();
+  expect(field).toHaveAttribute("readonly");
+  expect(field).not.toHaveAttribute("data-pretable-site");
+  view.unmount();
+  expect(ref.current).toBeNull();
+});
+test("warns once for unnamed fields and accepts a native label", () => {
+  const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+  const view = render(
+    <label>
+      Notes
+      <PretableTextarea />
+    </label>,
+  );
+  expect(warn).not.toHaveBeenCalled();
+  view.unmount();
+  render(
+    <>
+      <PretableTextarea />
+      <PretableTextarea />
+    </>,
+  );
+  expect(warn).toHaveBeenCalledOnce();
+});
diff --git a/packages/react/src/__tests__/compose-refs.test.tsx b/packages/react/src/__tests__/compose-refs.test.tsx
new file mode 100644
index 000000000..e691bd54e
--- /dev/null
+++ b/packages/react/src/__tests__/compose-refs.test.tsx
@@ -0,0 +1,53 @@
+import { renderHook } from "@testing-library/react";
+import { createRef } from "react";
+import { expect, it, vi } from "vitest";
+import { composeRefs, useComposedRefs } from "../components/compose-refs";
+
+it("returns void and implements React 18 null detach for mixed refs exactly once", () => {
+  const own = createRef<HTMLButtonElement>();
+  const consumerObject = createRef<HTMLButtonElement>();
+  const dispose = vi.fn();
+  const consumerCleanup = vi.fn<(node: HTMLButtonElement | null) => () => void>(
+    () => dispose,
+  );
+  const consumerVoid = vi.fn<(node: HTMLButtonElement | null) => void>(
+    () => {},
+  );
+  const ref = composeRefs(
+    own,
+    consumerObject,
+    consumerCleanup,
+    consumerVoid,
+    null,
+    undefined,
+  );
+  const node = document.createElement("button");
+  expect(ref(node)).toBeUndefined();
+  expect(own.current).toBe(node);
+  expect(consumerObject.current).toBe(node);
+  expect(ref(null)).toBeUndefined();
+  expect(ref(null)).toBeUndefined();
+  expect(own.current).toBeNull();
+  expect(consumerObject.current).toBeNull();
+  expect(dispose).toHaveBeenCalledOnce();
+  expect(consumerCleanup).toHaveBeenCalledExactlyOnceWith(node);
+  expect(consumerVoid.mock.calls).toEqual([[node], [null]]);
+  ref(node);
+  ref(null);
+  expect(dispose).toHaveBeenCalledTimes(2);
+});
+it("keeps hook callback identity stable while both refs remain stable", () => {
+  const own = createRef<HTMLButtonElement>();
+  const consumer = vi.fn();
+  const replacement = vi.fn();
+  const { result, rerender, unmount } = renderHook(
+    ({ ref }) => useComposedRefs(own, ref),
+    { initialProps: { ref: consumer } },
+  );
+  const first = result.current;
+  rerender({ ref: consumer });
+  expect(result.current).toBe(first);
+  rerender({ ref: replacement });
+  expect(result.current).not.toBe(first);
+  unmount();
+});
diff --git a/packages/react/src/__tests__/date-cell-editor.test.tsx b/packages/react/src/__tests__/date-cell-editor.test.tsx
index 1059a0da9..d2b45c3ea 100644
--- a/packages/react/src/__tests__/date-cell-editor.test.tsx
+++ b/packages/react/src/__tests__/date-cell-editor.test.tsx
@@ -2,6 +2,7 @@ import "@testing-library/jest-dom/vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
+import { PretableOverlayProvider } from "../overlay/portal-context";
 import { CellEditor } from "../cell-editor";
 import type { PretableEditorInput } from "../types";
 
@@ -26,7 +27,7 @@ function makeInput(
 }
 
 const activeDay = () =>
-  screen.getByRole("textbox").getAttribute("aria-activedescendant");
+  screen.getByRole("combobox").getAttribute("aria-activedescendant");
 const dayCell = (iso: string) =>
   screen.getByRole("gridcell", { name: new RegExp(`^${iso}$`) });
 
@@ -38,20 +39,20 @@ describe("DateCellEditor (via dispatcher)", () => {
     expect(dayCell("2026-08-06")).toHaveAttribute("aria-selected", "true");
   });
 
-  it("ArrowRight moves the active day by one, ArrowDown by a week", () => {
+  it("ArrowDown enters navigation and moves a week; ArrowRight then moves one day", () => {
     render(<CellEditor input={makeInput()} />);
-    const box = screen.getByRole("textbox");
+    const box = screen.getByRole("combobox");
     const start = activeDay();
-    fireEvent.keyDown(box, { key: "ArrowRight" });
-    expect(activeDay()).not.toBe(start);
-    expect(activeDay()).toBe(dayCell("2026-08-07").id);
     fireEvent.keyDown(box, { key: "ArrowDown" });
+    expect(activeDay()).not.toBe(start);
+    expect(activeDay()).toBe(dayCell("2026-08-13").id);
+    fireEvent.keyDown(box, { key: "ArrowRight" });
     expect(activeDay()).toBe(dayCell("2026-08-14").id);
   });
 
   it("PageDown moves to the next month", () => {
     render(<CellEditor input={makeInput()} />);
-    fireEvent.keyDown(screen.getByRole("textbox"), { key: "PageDown" });
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "PageDown" });
     expect(screen.getByText("September 2026")).toBeInTheDocument();
   });
 
@@ -59,10 +60,10 @@ describe("DateCellEditor (via dispatcher)", () => {
     const setDraft = vi.fn();
     const commit = vi.fn();
     render(<CellEditor input={makeInput({ setDraft, commit })} />);
-    const box = screen.getByRole("textbox");
-    fireEvent.keyDown(box, { key: "ArrowRight" });
+    const box = screen.getByRole("combobox");
+    fireEvent.keyDown(box, { key: "ArrowDown" });
     fireEvent.keyDown(box, { key: "Enter" });
-    expect(setDraft).toHaveBeenCalledWith("2026-08-07");
+    expect(setDraft).toHaveBeenCalledWith("2026-08-13");
     expect(commit).toHaveBeenCalledWith("down");
   });
 
@@ -77,7 +78,7 @@ describe("DateCellEditor (via dispatcher)", () => {
 
   it("typing a valid ISO date retargets the calendar", () => {
     render(<CellEditor input={makeInput()} />);
-    fireEvent.change(screen.getByRole("textbox"), {
+    fireEvent.change(screen.getByRole("combobox"), {
       target: { value: "2026-12-25" },
     });
     expect(screen.getByText("December 2026")).toBeInTheDocument();
@@ -90,7 +91,7 @@ describe("DateCellEditor (via dispatcher)", () => {
     render(
       <CellEditor input={makeInput({ draft: "nope", setDraft, commit })} />,
     );
-    fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" });
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "Enter" });
     // The calendar's day is NOT substituted for what the user typed.
     expect(setDraft).not.toHaveBeenCalled();
     expect(commit).toHaveBeenCalledWith("down");
@@ -100,7 +101,7 @@ describe("DateCellEditor (via dispatcher)", () => {
     const setDraft = vi.fn();
     const commit = vi.fn();
     render(<CellEditor input={makeInput({ draft: "", setDraft, commit })} />);
-    fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" });
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "Enter" });
     // No substitution: the empty draft reaches parseDraftForType, which maps
     // it to null.
     expect(setDraft).not.toHaveBeenCalled();
@@ -111,7 +112,7 @@ describe("DateCellEditor (via dispatcher)", () => {
     const setDraft = vi.fn();
     render(<CellEditor input={makeInput({ draft: "2", setDraft })} />);
     expect(setDraft).not.toHaveBeenCalled();
-    expect(screen.getByRole("textbox")).toHaveValue("2");
+    expect(screen.getByRole("combobox")).toHaveValue("2");
   });
 
   it("keeps aria-activedescendant resolvable when PageDown clamps the day", () => {
@@ -120,7 +121,7 @@ describe("DateCellEditor (via dispatcher)", () => {
         input={makeInput({ draft: "2026-08-31", value: "2026-08-31" })}
       />,
     );
-    fireEvent.keyDown(screen.getByRole("textbox"), { key: "PageDown" });
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "PageDown" });
     // September has 30 days, so the cursor clamps — and the clamped day is
     // still a rendered cell, so the id always resolves.
     expect(activeDay()).toBe(dayCell("2026-09-30").id);
@@ -130,7 +131,7 @@ describe("DateCellEditor (via dispatcher)", () => {
   it("ignores calendar navigation while an edit is in flight", () => {
     const setDraft = vi.fn();
     render(<CellEditor input={makeInput({ status: "saving", setDraft })} />);
-    fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowRight" });
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "ArrowRight" });
     fireEvent.click(screen.getByRole("button", { name: "Next month" }));
     expect(setDraft).not.toHaveBeenCalled();
     expect(screen.getByText("August 2026")).toBeInTheDocument();
@@ -146,7 +147,7 @@ describe("DateCellEditor (via dispatcher)", () => {
     const commit = vi.fn();
     const cancel = vi.fn();
     render(<CellEditor input={makeInput({ commit, cancel })} />);
-    fireEvent.blur(screen.getByRole("textbox"));
+    fireEvent.blur(screen.getByRole("combobox"));
     expect(commit).toHaveBeenCalledWith();
     cleanup();
 
@@ -157,7 +158,7 @@ describe("DateCellEditor (via dispatcher)", () => {
         input={makeInput({ draft: "nope", commit: commit2, cancel: cancel2 })}
       />,
     );
-    fireEvent.blur(screen.getByRole("textbox"));
+    fireEvent.blur(screen.getByRole("combobox"));
     expect(cancel2).toHaveBeenCalled();
     expect(commit2).not.toHaveBeenCalled();
   });
@@ -170,7 +171,7 @@ describe("DateCellEditor (via dispatcher)", () => {
         input={makeInput({ draft: null, value: null, commit, cancel })}
       />,
     );
-    fireEvent.blur(screen.getByRole("textbox"));
+    fireEvent.blur(screen.getByRole("combobox"));
     expect(commit).toHaveBeenCalledWith();
     expect(cancel).not.toHaveBeenCalled();
     cleanup();
@@ -187,7 +188,7 @@ describe("DateCellEditor (via dispatcher)", () => {
         })}
       />,
     );
-    fireEvent.blur(screen.getByRole("textbox"));
+    fireEvent.blur(screen.getByRole("combobox"));
     expect(emptyCancel).toHaveBeenCalledWith();
     expect(emptyCommit).not.toHaveBeenCalled();
   });
@@ -211,9 +212,9 @@ describe("DateCellEditor (via dispatcher)", () => {
           input={makeInput({ draft, value: draft, setDraft, commit, cancel })}
         />,
       );
-      expect(screen.getByRole("textbox")).toHaveValue(String(draft ?? ""));
+      expect(screen.getByRole("combobox")).toHaveValue(String(draft ?? ""));
       expect(setDraft).not.toHaveBeenCalled();
-      fireEvent.blur(screen.getByRole("textbox"));
+      fireEvent.blur(screen.getByRole("combobox"));
       expect(cancel).toHaveBeenCalledWith();
       expect(commit).not.toHaveBeenCalled();
     },
@@ -236,15 +237,15 @@ describe("DateCellEditor (via dispatcher)", () => {
       cancel,
     });
     const view = render(<CellEditor input={input} />);
-    fireEvent.blur(screen.getByRole("textbox"));
+    fireEvent.blur(screen.getByRole("combobox"));
     expect(cancel).toHaveBeenCalledTimes(1);
     expect(commit).not.toHaveBeenCalled();
 
     view.rerender(<CellEditor input={input} />);
-    fireEvent.change(screen.getByRole("textbox"), {
+    fireEvent.change(screen.getByRole("combobox"), {
       target: { value: "legacy changed" },
     });
-    fireEvent.blur(screen.getByRole("textbox"));
+    fireEvent.blur(screen.getByRole("combobox"));
     expect(commit).toHaveBeenCalledWith();
   });
 
@@ -268,7 +269,7 @@ describe("DateCellEditor (via dispatcher)", () => {
       />,
     );
 
-    fireEvent.blur(screen.getByRole("textbox"));
+    fireEvent.blur(screen.getByRole("combobox"));
 
     expect(commit).toHaveBeenCalledWith();
     expect(cancel).not.toHaveBeenCalled();
@@ -288,7 +289,7 @@ describe("DateCellEditor (via dispatcher)", () => {
       />,
     );
 
-    fireEvent.blur(screen.getByRole("textbox"));
+    fireEvent.blur(screen.getByRole("combobox"));
 
     expect(cancel).toHaveBeenCalledWith();
     expect(commit).not.toHaveBeenCalled();
@@ -302,7 +303,7 @@ describe("DateCellEditor (via dispatcher)", () => {
         input={{ ...input, draft: "9999-12-31", value: "9999-12-31" }}
       />,
     );
-    expect(screen.getByRole("textbox")).toHaveValue("9999-12-31");
+    expect(screen.getByRole("combobox")).toHaveValue("9999-12-31");
     expect(screen.getByText("December 9999")).toBeInTheDocument();
     expect(dayCell("9999-12-31")).toHaveAttribute("aria-selected", "true");
     expect(activeDay()).toBe(dayCell("9999-12-31").id);
@@ -317,19 +318,19 @@ describe("DateCellEditor (via dispatcher)", () => {
     view.rerender(<CellEditor input={{ ...input, draft: "not-a-date" }} />);
     expect(screen.getByText("August 2026")).toBeInTheDocument();
     expect(dayCell("2026-08-06")).not.toHaveAttribute("aria-selected", "true");
-    fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" });
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "Enter" });
     expect(setDraft).not.toHaveBeenCalled();
     expect(commit).toHaveBeenCalledWith("down");
   });
 
-  it("marks arrow and page navigation as modified so blur commits it", () => {
+  it("browses without writing and blur commits the unchanged draft", () => {
     const setDraft = vi.fn();
     const commit = vi.fn();
     render(<CellEditor input={makeInput({ setDraft, commit })} />);
-    const box = screen.getByRole("textbox");
+    const box = screen.getByRole("combobox");
     fireEvent.keyDown(box, { key: "ArrowRight" });
     fireEvent.blur(box);
-    expect(setDraft).toHaveBeenLastCalledWith("2026-08-07");
+    expect(setDraft).not.toHaveBeenCalled();
     expect(commit).toHaveBeenCalledWith();
   });
 
@@ -344,7 +345,7 @@ describe("DateCellEditor (via dispatcher)", () => {
         })}
       />,
     );
-    const minBox = screen.getByRole("textbox");
+    const minBox = screen.getByRole("combobox");
     expect(
       screen.getByRole("button", { name: "Previous month" }),
     ).toBeDisabled();
@@ -369,7 +370,7 @@ describe("DateCellEditor (via dispatcher)", () => {
         })}
       />,
     );
-    const maxBox = screen.getByRole("textbox");
+    const maxBox = screen.getByRole("combobox");
     expect(screen.getByRole("button", { name: "Next month" })).toBeDisabled();
     fireEvent.keyDown(maxBox, { key: "ArrowRight" });
     fireEvent.keyDown(maxBox, { key: "PageDown" });
@@ -381,7 +382,7 @@ describe("DateCellEditor (via dispatcher)", () => {
     const commit = vi.fn();
     const cancel = vi.fn();
     render(<CellEditor input={makeInput({ commit, cancel })} />);
-    const box = screen.getByRole("textbox");
+    const box = screen.getByRole("combobox");
     fireEvent.keyDown(box, { key: "Tab" });
     expect(commit).toHaveBeenCalledWith("right");
     fireEvent.keyDown(box, { key: "Escape" });
@@ -400,8 +401,43 @@ describe("DateCellEditor (via dispatcher)", () => {
       />,
     );
     expect(setDraft).not.toHaveBeenCalled();
-    expect(screen.getByRole("textbox")).toHaveValue(
+    expect(screen.getByRole("combobox")).toHaveValue(
       String(new Date(Date.UTC(2026, 7, 6))),
     );
   });
 });
+
+it("waits for its provider target before publishing popup ARIA references", () => {
+  const input = makeInput();
+  const target = document.createElement("div");
+  document.body.append(target);
+  const content = <CellEditor input={input} />;
+  const view = render(
+    <PretableOverlayProvider container={null}>
+      {content}
+    </PretableOverlayProvider>,
+  );
+  const field = view.getByRole("combobox");
+  expect(field).not.toHaveAttribute("aria-controls");
+  expect(field).not.toHaveAttribute("aria-activedescendant");
+  view.rerender(
+    <PretableOverlayProvider container={target}>
+      {content}
+    </PretableOverlayProvider>,
+  );
+  expect(
+    document.getElementById(field.getAttribute("aria-controls")!),
+  ).not.toBeNull();
+  expect(
+    document.getElementById(field.getAttribute("aria-activedescendant")!),
+  ).not.toBeNull();
+  view.rerender(
+    <PretableOverlayProvider container={null}>
+      {content}
+    </PretableOverlayProvider>,
+  );
+  expect(field).not.toHaveAttribute("aria-controls");
+  expect(field).not.toHaveAttribute("aria-activedescendant");
+  view.unmount();
+  target.remove();
+});
diff --git a/packages/react/src/__tests__/editor-correctness.test.tsx b/packages/react/src/__tests__/editor-correctness.test.tsx
new file mode 100644
index 000000000..47f82c1f7
--- /dev/null
+++ b/packages/react/src/__tests__/editor-correctness.test.tsx
@@ -0,0 +1,258 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { useRef, useState } from "react";
+import { afterEach, expect, test, vi } from "vitest";
+import { CellEditor } from "../cell-editor";
+import { parseDraftForType } from "../editors/type-parsing";
+import type { PretableEditorInput } from "../types";
+
+afterEach(cleanup);
+const duplicateOptions = [
+  { value: "one", label: "Shared" },
+  { value: "two", label: "Shared" },
+  { value: "Shared", label: "Other" },
+];
+function editor(over: Partial<PretableEditorInput> = {}): PretableEditorInput {
+  return {
+    rowId: "r1",
+    columnId: "value",
+    row: { id: "r1" },
+    column: { id: "value", header: "Value" },
+    value: "",
+    draft: "",
+    status: "editing",
+    setDraft: vi.fn(),
+    commit: vi.fn(),
+    cancel: vi.fn(),
+    ...over,
+  };
+}
+function EnumHarness({
+  value = "two",
+  typed = false,
+  onResult,
+  options = duplicateOptions,
+  formatted,
+}: {
+  formatted?: string;
+  options?: typeof duplicateOptions;
+  value?: string | null;
+  typed?: boolean;
+  onResult: (result: unknown) => void;
+}) {
+  const [draft, setDraft] = useState<unknown>(
+    typed ? "S" : (formatted ?? value),
+  );
+  const latest = useRef(draft);
+  const column = {
+    id: "value",
+    type: "enum" as const,
+    options,
+  };
+  return (
+    <CellEditor
+      input={{
+        ...editor({ column, value, draft, seededFromTyping: typed }),
+        setDraft: (next) => {
+          latest.current = next;
+          setDraft(next);
+        },
+        commit: () => onResult(parseDraftForType(column, latest.current)),
+      }}
+    />
+  );
+}
+
+test("explicit enum choice preserves the second duplicate label's canonical identity", () => {
+  const result = vi.fn();
+  const view = render(<EnumHarness onResult={result} />);
+  fireEvent.click(view.getAllByRole("option", { name: "Shared" })[1]!);
+  expect(result).toHaveBeenCalledWith({ ok: true, value: "two" });
+});
+test("a pristine enum keeps identity through a label/value collision", () => {
+  const result = vi.fn();
+  const view = render(<EnumHarness value="Shared" onResult={result} />);
+  fireEvent.keyDown(view.getByRole("combobox"), { key: "Tab" });
+  expect(result).toHaveBeenCalledWith({ ok: true, value: "Shared" });
+});
+test.each(["Shared", "SHARED"])(
+  "typed ambiguous enum text %s is rejected",
+  (text) => {
+    const result = vi.fn();
+    const view = render(<EnumHarness onResult={result} />);
+    fireEvent.change(view.getByRole("combobox"), { target: { value: "Sh" } });
+    fireEvent.change(view.getByRole("combobox"), { target: { value: text } });
+    fireEvent.keyDown(view.getByRole("combobox"), { key: "Enter" });
+    expect(result).toHaveBeenCalledWith({
+      ok: false,
+      message: "Pick an option",
+    });
+  },
+);
+test.each(["Enter", "Tab", "blur"])(
+  "blank enum clears via %s without implicitly choosing the first option",
+  (action) => {
+    const result = vi.fn();
+    const view = render(<EnumHarness onResult={result} />);
+    const field = view.getByRole("combobox");
+    fireEvent.change(field, { target: { value: "" } });
+    if (action === "blur") fireEvent.blur(field);
+    else fireEvent.keyDown(field, { key: action });
+    expect(result).toHaveBeenCalledWith({ ok: true, value: null });
+  },
+);
+const cases = [
+  { id: "value", type: "text" as const },
+  { id: "value", type: "number" as const },
+  { id: "value", type: "enum" as const, options: duplicateOptions },
+  { id: "value", type: "date" as const },
+  { id: "value", type: "text" as const, wrap: true },
+];
+test.each(cases)(
+  "composition keys are untouched for $type wrap=$wrap",
+  (column) => {
+    const props = editor({
+      column,
+      draft: column.type === "date" ? "2026-08-06" : "two",
+      value: "two",
+    });
+    const view = render(<CellEditor input={props} />);
+    const field = view.container.querySelector("input,textarea")!;
+    (props.setDraft as ReturnType<typeof vi.fn>).mockClear();
+    for (const key of [
+      "Enter",
+      "Tab",
+      "Escape",
+      "ArrowDown",
+      "ArrowRight",
+      "PageDown",
+    ])
+      expect(
+        fireEvent.keyDown(field, { key, isComposing: true, ctrlKey: true }),
+      ).toBe(true);
+    fireEvent.compositionStart(field);
+    for (const key of ["Enter", "Escape", "ArrowDown"])
+      expect(fireEvent.keyDown(field, { key, ctrlKey: true })).toBe(true);
+    fireEvent.compositionEnd(field);
+    expect(
+      fireEvent.keyDown(field, { key: "Enter", keyCode: 229, ctrlKey: true }),
+    ).toBe(true);
+    expect(props.commit).not.toHaveBeenCalled();
+    expect(props.cancel).not.toHaveBeenCalled();
+    expect(props.setDraft).not.toHaveBeenCalled();
+    fireEvent.keyDown(field, { key: "Tab", shiftKey: true });
+    expect(props.commit).toHaveBeenCalledWith("left");
+  },
+);
+test.each(cases)("reverse commit direction for $type wrap=$wrap", (column) => {
+  const props = editor({
+    column,
+    draft: column.type === "date" ? "2026-08-06" : "two",
+    value: "two",
+  });
+  const view = render(<CellEditor input={props} />);
+  const field = view.container.querySelector("input,textarea")!;
+  fireEvent.keyDown(field, { key: "Enter", shiftKey: true, ctrlKey: true });
+  expect(props.commit).toHaveBeenCalledWith("up");
+});
+test("date browsing does not write, caret arrows stay native until navigation, and Enter chooses the cursor", () => {
+  const props = editor({
+    column: { id: "value", type: "date" },
+    value: "2026-08-06",
+    draft: "2026-08-06",
+  });
+  const view = render(<CellEditor input={props} />);
+  const field = view.container.querySelector("input")!;
+  expect(field).toHaveAttribute("role", "combobox");
+  expect(field).toHaveAttribute("aria-haspopup", "grid");
+  expect(fireEvent.keyDown(field, { key: "ArrowRight" })).toBe(true);
+  fireEvent.keyDown(field, { key: "ArrowDown" });
+  fireEvent.keyDown(field, { key: "ArrowRight" });
+  expect(props.setDraft).not.toHaveBeenCalled();
+  expect(view.getByRole("gridcell", { name: "2026-08-06" })).toHaveAttribute(
+    "aria-selected",
+    "true",
+  );
+  expect(view.getByRole("gridcell", { name: "2026-08-14" })).toHaveAttribute(
+    "data-pretable-date-active",
+    "",
+  );
+  fireEvent.keyDown(field, { key: "Enter", shiftKey: true });
+  expect(props.setDraft).toHaveBeenCalledWith("2026-08-14");
+  expect(props.commit).toHaveBeenCalledWith("up");
+});
+test("month browsing followed by Tab commits the current typed draft without writing the cursor", () => {
+  const props = editor({
+    column: { id: "value", type: "date" },
+    value: "2026-08-06",
+    draft: "2026-08-06",
+  });
+  const view = render(<CellEditor input={props} />);
+  fireEvent.click(view.getByRole("button", { name: "Next month" }));
+  fireEvent.keyDown(view.container.querySelector("input")!, { key: "Tab" });
+  expect(props.setDraft).not.toHaveBeenCalled();
+  expect(props.commit).toHaveBeenCalledWith("right");
+});
+
+test("removing a pristine choice cannot reinterpret its value as another label", () => {
+  const result = vi.fn();
+  const view = render(<EnumHarness value="Shared" onResult={result} />);
+  view.rerender(
+    <EnumHarness
+      value="Shared"
+      options={[{ value: "other", label: "Shared" }]}
+      onResult={result}
+    />,
+  );
+  fireEvent.keyDown(view.getByRole("combobox"), { key: "Enter" });
+  expect(result).toHaveBeenCalledWith({ ok: false, message: "Pick an option" });
+});
+
+test("a pristine formatted enum draft keeps its original canonical identity", () => {
+  const result = vi.fn();
+  const view = render(
+    <EnumHarness value="two" formatted="Other" onResult={result} />,
+  );
+  fireEvent.keyDown(view.getByRole("combobox"), { key: "Enter" });
+  expect(result).toHaveBeenCalledWith({ ok: true, value: "two" });
+});
+test("explicit enum navigation after clearing chooses that option on blur", () => {
+  const result = vi.fn();
+  const view = render(<EnumHarness onResult={result} />);
+  const field = view.getByRole("combobox");
+  fireEvent.change(field, { target: { value: "" } });
+  fireEvent.keyDown(field, { key: "ArrowDown" });
+  fireEvent.blur(field);
+  expect(result).toHaveBeenCalledWith({ ok: true, value: "two" });
+});
+test("whitespace-only date typing clears on blur", () => {
+  const props = editor({
+    column: { id: "value", type: "date" },
+    value: "2026-08-06",
+    draft: "2026-08-06",
+  });
+  const view = render(<CellEditor input={props} />);
+  const field = view.getByRole("combobox");
+  fireEvent.change(field, { target: { value: "   " } });
+  view.rerender(<CellEditor input={{ ...props, draft: "   " }} />);
+  fireEvent.blur(field);
+  expect(props.commit).toHaveBeenCalledOnce();
+  expect(props.cancel).not.toHaveBeenCalled();
+});
+
+test.each([null, ""])("a pristine empty enum %s remains cleared", (value) => {
+  const result = vi.fn();
+  const view = render(<EnumHarness value={value} onResult={result} />);
+  fireEvent.keyDown(view.getByRole("combobox"), { key: "Enter" });
+  expect(result).toHaveBeenCalledWith({ ok: true, value: null });
+});
+test("a filtered explicit choice keeps its highlight when a failed commit leaves the editor open", () => {
+  const result = vi.fn();
+  const view = render(<EnumHarness onResult={result} />);
+  const field = view.getByRole("combobox");
+  fireEvent.change(field, { target: { value: "Ot" } });
+  fireEvent.click(view.getByRole("option", { name: "Other" }));
+  const selected = view.getByRole("option", { name: "Other" });
+  expect(selected).toHaveAttribute("aria-selected", "true");
+  expect(field).toHaveAttribute("aria-activedescendant", selected.id);
+});
diff --git a/packages/react/src/__tests__/editor-kit.test.tsx b/packages/react/src/__tests__/editor-kit.test.tsx
new file mode 100644
index 000000000..b9726fc9c
--- /dev/null
+++ b/packages/react/src/__tests__/editor-kit.test.tsx
@@ -0,0 +1,124 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render, renderHook } from "@testing-library/react";
+import {
+  forwardRef,
+  type InputHTMLAttributes,
+  type TextareaHTMLAttributes,
+  type ButtonHTMLAttributes,
+} from "react";
+import { afterEach, expect, test, vi } from "vitest";
+import { CellEditor } from "../cell-editor";
+import {
+  DEFAULT_COMPONENTS,
+  PretableComponentsProvider,
+  useResolvedComponents,
+} from "../components/context";
+import type { PretableEditorInput } from "../types";
+
+const TextInput = forwardRef<
+  HTMLInputElement,
+  InputHTMLAttributes<HTMLInputElement>
+>((props, ref) => <input {...props} ref={ref} data-replacement="input" />);
+const Textarea = forwardRef<
+  HTMLTextAreaElement,
+  TextareaHTMLAttributes<HTMLTextAreaElement>
+>((props, ref) => (
+  <textarea {...props} ref={ref} data-replacement="textarea" />
+));
+const IconButton = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement>
+>((props, ref) => <button {...props} ref={ref} data-replacement="button" />);
+afterEach(cleanup);
+const columns = [
+  { id: "value", type: "text" as const },
+  { id: "value", type: "text" as const, wrap: true },
+  { id: "value", type: "number" as const },
+  {
+    id: "value",
+    type: "enum" as const,
+    options: [{ value: "a", label: "Alpha" }],
+  },
+  { id: "value", type: "date" as const },
+];
+test.each(columns)(
+  "$type wrap=$wrap uses the replacement field with a working ref and pending/error props",
+  (column) => {
+    const input: PretableEditorInput = {
+      rowId: "r1",
+      columnId: "value",
+      row: { id: "r1" },
+      column: { ...column, header: "Value" },
+      value: column.type === "date" ? "2026-08-06" : "a",
+      draft: column.type === "date" ? "2026-08-06" : "a",
+      status: "saving",
+      error: "Try again",
+      setDraft: vi.fn(),
+      commit: vi.fn(),
+      cancel: vi.fn(),
+    };
+    const view = render(
+      <PretableComponentsProvider
+        value={{ ...DEFAULT_COMPONENTS, TextInput, Textarea, IconButton }}
+      >
+        <CellEditor input={input} />
+      </PretableComponentsProvider>,
+    );
+    const field = view.container.querySelector("input,textarea")!;
+    expect(field).toHaveAttribute(
+      "data-replacement",
+      column.wrap ? "textarea" : "input",
+    );
+    expect(field).toHaveFocus();
+    expect(field).toHaveAccessibleName("Value");
+    expect(field).toHaveAttribute("site", "cell-editor");
+    expect(field).toHaveAttribute("readonly");
+    expect(field).toHaveAttribute("aria-invalid", "true");
+    for (const button of view.queryAllByRole("button")) {
+      expect(button).toHaveAttribute("data-replacement", "button");
+      expect(button).toBeDisabled();
+      fireEvent.click(button);
+    }
+    fireEvent.change(field, { target: { value: "changed" } });
+    expect(input.setDraft).not.toHaveBeenCalled();
+  },
+);
+test("Textarea participates in stable slot resolution", () => {
+  const hook = renderHook(
+    ({ area }) => useResolvedComponents({ Textarea: area }),
+    { initialProps: { area: Textarea } },
+  );
+  expect(hook.result.current.Textarea).toBe(Textarea);
+  const first = hook.result.current;
+  hook.rerender({ area: Textarea });
+  expect(hook.result.current).toBe(first);
+});
+test("a replacement field attached during the edit receives focus and subsequent commands", () => {
+  const input: PretableEditorInput = {
+    rowId: "r1",
+    columnId: "value",
+    row: { id: "r1" },
+    column: { id: "value", type: "text" },
+    value: "a",
+    draft: "a",
+    status: "editing",
+    setDraft: vi.fn(),
+    commit: vi.fn(),
+    cancel: vi.fn(),
+  };
+  const tree = (custom: boolean) => (
+    <PretableComponentsProvider
+      value={{ ...DEFAULT_COMPONENTS, ...(custom ? { TextInput } : {}) }}
+    >
+      <CellEditor input={input} />
+    </PretableComponentsProvider>
+  );
+  const view = render(tree(false));
+  view.rerender(tree(true));
+  const field = view.getByRole("textbox");
+  expect(field).toHaveFocus();
+  fireEvent.change(field, { target: { value: "next" } });
+  expect(input.setDraft).toHaveBeenCalledWith("next");
+  fireEvent.keyDown(field, { key: "Tab", shiftKey: true });
+  expect(input.commit).toHaveBeenCalledWith("left");
+});
diff --git a/packages/react/src/__tests__/enum-cell-editor.test.tsx b/packages/react/src/__tests__/enum-cell-editor.test.tsx
index 81bd0415b..0fa1e1ece 100644
--- a/packages/react/src/__tests__/enum-cell-editor.test.tsx
+++ b/packages/react/src/__tests__/enum-cell-editor.test.tsx
@@ -1,7 +1,9 @@
+import { enumChoice } from "../editors/enum-draft";
 import "@testing-library/jest-dom/vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
+import { PretableOverlayProvider } from "../overlay/portal-context";
 import { CellEditor } from "../cell-editor";
 import type { PretableEditorInput } from "../types";
 
@@ -58,14 +60,14 @@ describe("EnumCellEditor (via dispatcher)", () => {
     expect(shown).toEqual(["Running"]);
   });
 
-  it("ArrowDown moves the highlight and Enter commits that option's label", () => {
+  it("ArrowDown moves the highlight and Enter commits that option's canonical identity", () => {
     const setDraft = vi.fn();
     const commit = vi.fn();
     render(<CellEditor input={makeInput({ setDraft, commit })} />);
     const box = screen.getByRole("combobox");
     fireEvent.keyDown(box, { key: "ArrowDown" });
     fireEvent.keyDown(box, { key: "Enter" });
-    expect(setDraft).toHaveBeenCalledWith("Running");
+    expect(setDraft).toHaveBeenCalledWith(enumChoice("running"));
     expect(commit).toHaveBeenCalledWith("down");
   });
 
@@ -87,7 +89,7 @@ describe("EnumCellEditor (via dispatcher)", () => {
     const commit = vi.fn();
     render(<CellEditor input={makeInput({ setDraft, commit })} />);
     fireEvent.click(screen.getByRole("option", { name: "Done" }));
-    expect(setDraft).toHaveBeenCalledWith("Done");
+    expect(setDraft).toHaveBeenCalledWith(enumChoice("done"));
     expect(commit).toHaveBeenCalledWith();
   });
 
@@ -97,13 +99,13 @@ describe("EnumCellEditor (via dispatcher)", () => {
     expect(notPrevented).toBe(false);
   });
 
-  it("blur cancels when the text matches no option", () => {
+  it("blur submits unmatched text to the parser for a recoverable error", () => {
     const commit = vi.fn();
     const cancel = vi.fn();
     render(<CellEditor input={makeInput({ draft: "zzz", commit, cancel })} />);
     fireEvent.blur(screen.getByRole("combobox"));
-    expect(cancel).toHaveBeenCalled();
-    expect(commit).not.toHaveBeenCalled();
+    expect(cancel).not.toHaveBeenCalled();
+    expect(commit).toHaveBeenCalledWith();
   });
 
   it("blur commits when the text matches an option", () => {
@@ -126,10 +128,11 @@ describe("EnumCellEditor (via dispatcher)", () => {
     expect(cancel).toHaveBeenCalled();
   });
 
-  it("re-seeds the field with the option's label when the draft holds the raw value", () => {
+  it("displays the option label without rewriting its canonical draft", () => {
     const setDraft = vi.fn();
     render(<CellEditor input={makeInput({ draft: "queued", setDraft })} />);
-    expect(setDraft).toHaveBeenCalledWith("Queued");
+    expect(setDraft).not.toHaveBeenCalled();
+    expect(screen.getByRole("combobox")).toHaveValue("Queued");
   });
 
   it("a type-to-replace seed filters the list immediately", () => {
@@ -142,7 +145,7 @@ describe("EnumCellEditor (via dispatcher)", () => {
     ]);
   });
 
-  it("a type-to-replace seed highlights the first visible option", () => {
+  it("a type-to-replace seed remains raw until explicitly navigated", () => {
     // The seeded highlight is an index into the *full* option list (here
     // "done" = 2), but the list starts filtered — so it must clamp to the
     // filtered list or a bare Enter would commit the raw seed text.
@@ -154,7 +157,7 @@ describe("EnumCellEditor (via dispatcher)", () => {
       />,
     );
     fireEvent.keyDown(screen.getByRole("combobox"), { key: "Enter" });
-    expect(setDraft).toHaveBeenCalledWith("Running");
+    expect(setDraft).not.toHaveBeenCalled();
     expect(commit).toHaveBeenCalledWith("down");
   });
 
@@ -196,7 +199,7 @@ describe("EnumCellEditor (via dispatcher)", () => {
     const box = screen.getByRole("combobox");
     fireEvent.keyDown(box, { key: "ArrowDown" });
     fireEvent.keyDown(box, { key: "Enter" });
-    expect(setDraft).toHaveBeenCalledWith("Done");
+    expect(setDraft).toHaveBeenCalledWith(enumChoice("done"));
     expect(commit).toHaveBeenCalledWith("down");
   });
 
@@ -221,3 +224,38 @@ describe("EnumCellEditor (via dispatcher)", () => {
     expect(screen.getByRole("textbox")).toBeInTheDocument();
   });
 });
+
+it("waits for its provider target before publishing popup ARIA references", () => {
+  const input = makeInput();
+  const target = document.createElement("div");
+  document.body.append(target);
+  const content = <CellEditor input={input} />;
+  const view = render(
+    <PretableOverlayProvider container={null}>
+      {content}
+    </PretableOverlayProvider>,
+  );
+  const field = view.getByRole("combobox");
+  expect(field).not.toHaveAttribute("aria-controls");
+  expect(field).not.toHaveAttribute("aria-activedescendant");
+  view.rerender(
+    <PretableOverlayProvider container={target}>
+      {content}
+    </PretableOverlayProvider>,
+  );
+  expect(
+    document.getElementById(field.getAttribute("aria-controls")!),
+  ).not.toBeNull();
+  expect(
+    document.getElementById(field.getAttribute("aria-activedescendant")!),
+  ).not.toBeNull();
+  view.rerender(
+    <PretableOverlayProvider container={null}>
+      {content}
+    </PretableOverlayProvider>,
+  );
+  expect(field).not.toHaveAttribute("aria-controls");
+  expect(field).not.toHaveAttribute("aria-activedescendant");
+  view.unmount();
+  target.remove();
+});
diff --git a/packages/react/src/__tests__/header-popover-anchor.test.tsx b/packages/react/src/__tests__/header-popover-anchor.test.tsx
index 76e51c3be..f7097e7bd 100644
--- a/packages/react/src/__tests__/header-popover-anchor.test.tsx
+++ b/packages/react/src/__tests__/header-popover-anchor.test.tsx
@@ -1,9 +1,18 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom/vitest";
-import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  renderHook,
+  screen,
+} from "@testing-library/react";
 import * as React from "react";
 import { afterEach, describe, expect, test } from "vitest";
 
+import { PretableOverlayProvider } from "../overlay/portal-context";
+import { useHeaderPopover } from "../overlay/useHeaderPopover";
 import { PretableSurface } from "../pretable-surface";
 import type { PretableColumn } from "../types";
 
@@ -171,4 +180,37 @@ describe("a header popover tracks its anchor", () => {
 
     expect(dialog()).toBeNull();
   });
+
+  test("an ancestor direction change repositions an already-open header dialog", async () => {
+    const { view, funnel, dialog } = open();
+    funnel.getBoundingClientRect = () => rectAt(140, 320);
+    await act(async () => {
+      view.container.dir = "rtl";
+    });
+    expect(dialog()).toHaveStyle({ left: "320px", top: "164px" });
+  });
+
+  test("a delayed host refreshes the stored header anchor on attachment", () => {
+    let container: HTMLElement | null = null;
+    const anchor = document.createElement("button");
+    const host = document.createElement("div");
+    document.body.append(anchor, host);
+    let left = 20;
+    anchor.getBoundingClientRect = () => rectAt(100, left);
+    const hook = renderHook(() => useHeaderPopover(), {
+      wrapper: ({ children }) => (
+        <PretableOverlayProvider container={container}>
+          {children}
+        </PretableOverlayProvider>
+      ),
+    });
+    act(() => hook.result.current.toggle("filter", "title", anchor));
+    left = 320;
+    container = host;
+    hook.rerender();
+    expect(hook.result.current.openState?.rect.left).toBe(320);
+    hook.unmount();
+    anchor.remove();
+    host.remove();
+  });
 });
diff --git a/packages/react/src/__tests__/overlay-ownership.test.tsx b/packages/react/src/__tests__/overlay-ownership.test.tsx
new file mode 100644
index 000000000..556aafa3b
--- /dev/null
+++ b/packages/react/src/__tests__/overlay-ownership.test.tsx
@@ -0,0 +1,160 @@
+import { useRef, useState } from "react";
+import { OverlayPortal } from "../overlay/OverlayPortal";
+import { useOutsidePointer } from "../overlay/outside-pointer";
+import { logicallyContains } from "../overlay/logical-containment";
+import { PretableOverlayProvider } from "../overlay/portal-context";
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, expect, test, vi } from "vitest";
+import { PretableSelect } from "../components/select";
+import { FilterMenu } from "../filter-menu/FilterMenu";
+
+const options = [
+  { value: "a", label: "Alpha" },
+  { value: "b", label: "Beta" },
+];
+afterEach(cleanup);
+
+test("a sibling trigger dismisses the old list and its own trigger toggles closed", () => {
+  const view = render(
+    <>
+      <PretableSelect
+        aria-label="A"
+        options={options}
+        value="a"
+        onChange={() => {}}
+      />
+      <PretableSelect
+        aria-label="B"
+        options={options}
+        value="a"
+        onChange={() => {}}
+      />
+    </>,
+  );
+  const a = view.getByRole("combobox", { name: "A" });
+  const b = view.getByRole("combobox", { name: "B" });
+  fireEvent.click(a);
+  fireEvent.pointerDown(b);
+  fireEvent.click(b);
+  expect(a).toHaveAttribute("aria-expanded", "false");
+  expect(view.getAllByRole("listbox")).toHaveLength(1);
+  fireEvent.pointerDown(b);
+  fireEvent.click(b);
+  expect(view.queryByRole("listbox")).toBeNull();
+});
+
+test("outside presses close even when the target stops bubbling", () => {
+  const view = render(
+    <>
+      <PretableSelect
+        aria-label="A"
+        options={options}
+        value="a"
+        onChange={() => {}}
+      />
+      <button onPointerDown={(e) => e.stopPropagation()}>Outside</button>
+    </>,
+  );
+  fireEvent.click(view.getByRole("combobox"));
+  fireEvent.pointerDown(view.getByText("Outside"));
+  expect(view.queryByRole("listbox")).toBeNull();
+});
+
+test("a nested option press bubbles while keeping its filter parent open", () => {
+  const close = vi.fn();
+  const bubble = vi.fn();
+  const view = render(
+    <div onPointerDown={bubble}>
+      <FilterMenu
+        columnId="a"
+        label="A"
+        type="text"
+        options={[]}
+        initialFilter={null}
+        onChange={() => {}}
+        onClose={close}
+      />
+    </div>,
+  );
+  fireEvent.click(view.getByRole("combobox"));
+  fireEvent.pointerDown(view.getAllByRole("option")[0]!);
+  expect(bubble).toHaveBeenCalledTimes(1);
+  expect(close).not.toHaveBeenCalled();
+});
+
+function NestedSelects() {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(true);
+  useOutsidePointer(rootRef, () => setOpen(false));
+  return open ? (
+    <OverlayPortal>
+      <div role="dialog" ref={rootRef}>
+        <PretableSelect
+          aria-label="A"
+          options={options}
+          value="a"
+          onChange={() => {}}
+        />
+        <PretableSelect
+          aria-label="B"
+          options={options}
+          value="a"
+          onChange={() => {}}
+        />
+      </div>
+    </OverlayPortal>
+  ) : null;
+}
+
+test("nested sibling lists dismiss only their sibling, and Escape retains parent and trigger focus", () => {
+  const view = render(<NestedSelects />);
+  const a = view.getByRole("combobox", { name: "A" });
+  const b = view.getByRole("combobox", { name: "B" });
+  fireEvent.click(a);
+  fireEvent.pointerDown(b);
+  fireEvent.click(b);
+  expect(view.getByRole("dialog")).toBeInTheDocument();
+  expect(view.getAllByRole("listbox")).toHaveLength(1);
+  expect(a).toHaveAttribute("aria-expanded", "false");
+  fireEvent.pointerDown(view.getAllByRole("option")[1]!);
+  expect(view.getByRole("dialog")).toBeInTheDocument();
+  fireEvent.keyDown(b, { key: "Escape" });
+  expect(view.queryByRole("listbox")).toBeNull();
+  expect(view.getByRole("dialog")).toBeInTheDocument();
+  expect(b).toHaveFocus();
+});
+
+test("portal boundaries unregister on replacement and unmount", () => {
+  const target = document.createElement("div");
+  const replacement = document.createElement("div");
+  document.body.append(target, replacement);
+  const content = (
+    <div data-testid="parent">
+      <OverlayPortal>
+        <span data-testid="child" />
+      </OverlayPortal>
+    </div>
+  );
+  const view = render(
+    <PretableOverlayProvider container={target}>
+      {content}
+    </PretableOverlayProvider>,
+  );
+  const parent = view.getByTestId("parent");
+  const oldChild = view.getByTestId("child");
+  expect(parent.contains(oldChild)).toBe(false);
+  expect(logicallyContains(parent, oldChild)).toBe(true);
+  view.rerender(
+    <PretableOverlayProvider container={replacement}>
+      {content}
+    </PretableOverlayProvider>,
+  );
+  expect(logicallyContains(parent, oldChild)).toBe(false);
+  const newChild = view.getByTestId("child");
+  expect(logicallyContains(parent, newChild)).toBe(true);
+  view.unmount();
+  expect(logicallyContains(parent, newChild)).toBe(false);
+  target.remove();
+  replacement.remove();
+});
diff --git a/packages/react/src/__tests__/overlay-provider.test.tsx b/packages/react/src/__tests__/overlay-provider.test.tsx
new file mode 100644
index 000000000..3d3d3560b
--- /dev/null
+++ b/packages/react/src/__tests__/overlay-provider.test.tsx
@@ -0,0 +1,229 @@
+import { FunnelButton } from "../filter-menu/FunnelButton";
+import { MenuButton } from "../column-menu/MenuButton";
+import { useMenuKeyboard } from "../overlay/menu-keyboard";
+import "@testing-library/jest-dom/vitest";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import { hydrateRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, expect, test } from "vitest";
+import { PretableOverlayProvider as Provider } from "../public_api";
+import { PretableSelect } from "../components/select";
+import { OverlayPortal } from "../overlay/OverlayPortal";
+import { FilterMenu } from "../filter-menu/FilterMenu";
+import { ColumnMenu } from "../column-menu/ColumnMenu";
+
+const hosts: HTMLElement[] = [];
+const host = () => {
+  const node = document.createElement("div");
+  document.body.append(node);
+  hosts.push(node);
+  return node;
+};
+afterEach(() => {
+  cleanup();
+  for (const node of hosts.splice(0)) node.remove();
+});
+const select = (
+  <PretableSelect
+    aria-label="Pick"
+    options={[{ value: "a", label: "Alpha" }]}
+    value="a"
+    onChange={() => {}}
+  />
+);
+
+test("null waits, target attachment reveals open intent, removal clears ARIA and reattachment restores", () => {
+  const target = host();
+  const view = render(<Provider container={null}>{select}</Provider>);
+  const trigger = view.getByRole("combobox");
+  fireEvent.click(trigger);
+  expect(trigger).toHaveAttribute("aria-expanded", "false");
+  expect(trigger).not.toHaveAttribute("aria-controls");
+  expect(trigger).not.toHaveAttribute("aria-activedescendant");
+  expect(view.queryByRole("listbox")).toBeNull();
+  view.rerender(<Provider container={target}>{select}</Provider>);
+  expect(trigger).toHaveAttribute("aria-expanded", "true");
+  expect(target).toContainElement(view.getByRole("listbox"));
+  expect(
+    document.getElementById(trigger.getAttribute("aria-activedescendant")!),
+  ).not.toBeNull();
+  view.rerender(<Provider container={null}>{select}</Provider>);
+  expect(trigger).toHaveAttribute("aria-expanded", "false");
+  expect(trigger).not.toHaveAttribute("aria-controls");
+  expect(trigger).not.toHaveAttribute("aria-activedescendant");
+  view.rerender(<Provider container={target}>{select}</Provider>);
+  expect(target).toContainElement(view.getByRole("listbox"));
+});
+
+test("default body, custom targets, nearest provider and target replacement", () => {
+  const outer = host();
+  const inner = host();
+  const replacement = host();
+  const content = (
+    <>
+      <OverlayPortal>
+        <div data-testid="outer" />
+      </OverlayPortal>
+      <Provider container={inner}>
+        <OverlayPortal>
+          <div data-testid="inner" />
+        </OverlayPortal>
+      </Provider>
+    </>
+  );
+  const view = render(<Provider container={outer}>{content}</Provider>);
+  expect(outer).toContainElement(view.getByTestId("outer"));
+  expect(inner).toContainElement(view.getByTestId("inner"));
+  expect(outer).not.toContainElement(view.getByTestId("inner"));
+  view.rerender(<Provider container={replacement}>{content}</Provider>);
+  expect(outer.querySelector('[data-testid="outer"]')).toBeNull();
+  expect(replacement).toContainElement(view.getByTestId("outer"));
+  view.rerender(
+    <OverlayPortal>
+      <div data-testid="default" />
+    </OverlayPortal>,
+  );
+  expect(document.body).toContainElement(view.getByTestId("default"));
+  expect(view.container).not.toContainElement(view.getByTestId("default"));
+});
+
+test.each(["filter", "column"])(
+  "%s menu takes focus on attachment and reattachment, not ordinary rerenders",
+  (kind) => {
+    const target = host();
+    const menu =
+      kind === "filter" ? (
+        <FilterMenu
+          columnId="a"
+          label="A"
+          type="text"
+          options={[]}
+          initialFilter={null}
+          onChange={() => {}}
+          onClose={() => {}}
+        />
+      ) : (
+        <ColumnMenu
+          anchor={null}
+          columnId="a"
+          label="A"
+          grouped={false}
+          onSelect={() => {}}
+          onClose={() => {}}
+        />
+      );
+    const view = render(<Provider container={null}>{menu}</Provider>);
+    expect(target.children).toHaveLength(0);
+    view.rerender(<Provider container={target}>{menu}</Provider>);
+    const focusTarget = view.getByRole(
+      kind === "filter" ? "combobox" : "menuitem",
+    );
+    expect(focusTarget).toHaveFocus();
+    const other = document.createElement("button");
+    target.append(other);
+    other.focus();
+    view.rerender(<Provider container={target}>{menu}</Provider>);
+    expect(other).toHaveFocus();
+    view.rerender(<Provider container={null}>{menu}</Provider>);
+    view.rerender(<Provider container={target}>{menu}</Provider>);
+    expect(
+      view.getByRole(kind === "filter" ? "combobox" : "menuitem"),
+    ).toHaveFocus();
+  },
+);
+
+test("server markup hydrates and focuses a menu when its portal attaches", async () => {
+  const target = host();
+  const source = host();
+  const content = (
+    <Provider container={target}>
+      <ColumnMenu
+        anchor={null}
+        columnId="a"
+        label="A"
+        grouped={false}
+        onSelect={() => {}}
+        onClose={() => {}}
+      />
+    </Provider>
+  );
+  source.innerHTML = renderToString(content);
+  expect(target.children).toHaveLength(0);
+  let root: ReturnType<typeof hydrateRoot>;
+  await act(async () => {
+    root = hydrateRoot(source, content);
+  });
+  expect(target.querySelector('[role="menuitem"]')).toHaveFocus();
+  await act(async () => root.unmount());
+});
+
+function ToolMenu() {
+  const { rootRef, onKeyDown } = useMenuKeyboard(() => {});
+  return (
+    <OverlayPortal>
+      <div ref={rootRef} onKeyDown={onKeyDown}>
+        <button data-pretable-menu-item="" disabled>
+          Disabled
+        </button>
+        <button data-pretable-menu-item="">Enabled</button>
+      </div>
+    </OverlayPortal>
+  );
+}
+
+test("shared tool menu keyboard focuses its first enabled item on delayed attachment", () => {
+  const target = host();
+  const view = render(
+    <Provider container={null}>
+      <ToolMenu />
+    </Provider>,
+  );
+  view.rerender(
+    <Provider container={target}>
+      <ToolMenu />
+    </Provider>,
+  );
+  expect(view.getByText("Enabled")).toHaveFocus();
+  const other = document.createElement("button");
+  target.append(other);
+  other.focus();
+  view.rerender(
+    <Provider container={target}>
+      <ToolMenu />
+    </Provider>,
+  );
+  expect(other).toHaveFocus();
+  view.rerender(
+    <Provider container={null}>
+      <ToolMenu />
+    </Provider>,
+  );
+  view.rerender(
+    <Provider container={target}>
+      <ToolMenu />
+    </Provider>,
+  );
+  expect(view.getByText("Enabled")).toHaveFocus();
+});
+
+test("header trigger expanded state waits for the overlay host", () => {
+  const target = host();
+  const triggers = (
+    <>
+      <FunnelButton
+        columnId="a"
+        label="A"
+        active={false}
+        open
+        onToggle={() => {}}
+      />
+      <MenuButton columnId="a" label="A" open onToggle={() => {}} />
+    </>
+  );
+  const view = render(<Provider container={null}>{triggers}</Provider>);
+  for (const button of view.getAllByRole("button"))
+    expect(button).toHaveAttribute("aria-expanded", "false");
+  view.rerender(<Provider container={target}>{triggers}</Provider>);
+  for (const button of view.getAllByRole("button"))
+    expect(button).toHaveAttribute("aria-expanded", "true");
+});
diff --git a/packages/react/src/__tests__/pending-cell-editor.test.tsx b/packages/react/src/__tests__/pending-cell-editor.test.tsx
new file mode 100644
index 000000000..8ef1197e0
--- /dev/null
+++ b/packages/react/src/__tests__/pending-cell-editor.test.tsx
@@ -0,0 +1,141 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import { CellEditor } from "../cell-editor";
+import type { PretableEditorInput } from "../types";
+
+afterEach(cleanup);
+const options = [
+  { value: "queued", label: "Queued" },
+  { value: "done", label: "Done" },
+];
+function input(over: Partial<PretableEditorInput> = {}): PretableEditorInput {
+  return {
+    rowId: "r1",
+    columnId: "value",
+    row: { id: "r1" },
+    column: { id: "value" },
+    value: "queued",
+    draft: "queued",
+    status: "editing",
+    setDraft: vi.fn(),
+    commit: vi.fn(),
+    cancel: vi.fn(),
+    ...over,
+  };
+}
+const columns: PretableEditorInput["column"][] = [
+  { id: "value" },
+  { id: "value", type: "number" },
+  { id: "value", type: "date" },
+  { id: "value", wrap: true },
+  { id: "value", type: "enum", options },
+];
+it.each(["checking", "validating", "saving"] as const)(
+  "consumes pending commands and freezes fields while %s",
+  (status) => {
+    for (const column of columns) {
+      const props = input({
+        status,
+        column,
+        draft: column.type === "enum" ? "Queued" : "7",
+      });
+      const parent = vi.fn();
+      const { unmount } = render(
+        <form onKeyDown={parent}>
+          <CellEditor input={props} />
+        </form>,
+      );
+      const box = screen.getByRole(
+        column.type === "enum" || column.type === "date"
+          ? "combobox"
+          : "textbox",
+      );
+      expect(box).toHaveAttribute("readonly");
+      expect(box).toHaveAttribute("aria-busy", "true");
+      for (const command of [
+        { key: "Enter", ctrlKey: true },
+        { key: "Enter", metaKey: true },
+        { key: "Tab" },
+      ]) {
+        expect(fireEvent.keyDown(box, command)).toBe(false);
+      }
+      fireEvent.blur(box);
+      expect(props.commit).not.toHaveBeenCalled();
+      fireEvent.change(box, { target: { value: "changed" } });
+      expect(props.setDraft).not.toHaveBeenCalled();
+      expect(parent).not.toHaveBeenCalled();
+      expect(fireEvent.keyDown(box, { key: "Escape" })).toBe(false);
+      expect(props.cancel).toHaveBeenCalledOnce();
+      unmount();
+    }
+  },
+);
+it.each(["checking", "validating", "saving"] as const)(
+  "freezes enum selection while %s",
+  (status) => {
+    const props = input({
+      status,
+      draft: "Queued",
+      column: { id: "value", type: "enum", options },
+    });
+    const parent = vi.fn();
+    render(
+      <div onKeyDown={parent}>
+        <CellEditor input={props} />
+      </div>,
+    );
+    const box = screen.getByRole("combobox");
+    const active = box.getAttribute("aria-activedescendant");
+    expect(fireEvent.keyDown(box, { key: "ArrowDown" })).toBe(false);
+    expect(box).toHaveAttribute("aria-activedescendant", active);
+    fireEvent.click(screen.getByRole("option", { name: "Done" }));
+    expect(props.setDraft).not.toHaveBeenCalled();
+    expect(props.commit).not.toHaveBeenCalled();
+    expect(parent).not.toHaveBeenCalled();
+  },
+);
+it("does not rewrite enum identity during permission or error transitions", () => {
+  const props = input({
+    status: "checking",
+    column: { id: "value", type: "enum", options },
+  });
+  const { rerender } = render(<CellEditor input={props} />);
+  expect(props.setDraft).not.toHaveBeenCalled();
+  rerender(
+    <CellEditor
+      input={{ ...props, status: "error", error: "permission unavailable" }}
+    />,
+  );
+  expect(props.setDraft).not.toHaveBeenCalled();
+  rerender(<CellEditor input={{ ...props, status: "editing" }} />);
+  expect(props.setDraft).not.toHaveBeenCalled();
+  for (const status of [
+    "validating",
+    "editing",
+    "saving",
+    "error",
+    "editing",
+  ] as const) {
+    rerender(<CellEditor input={{ ...props, status, draft: "done" }} />);
+  }
+  expect(props.setDraft).not.toHaveBeenCalled();
+});
+it("does not normalize a user correction after a permission error", () => {
+  const props = input({
+    status: "checking",
+    column: { id: "value", type: "enum", options },
+  });
+  const { rerender } = render(<CellEditor input={props} />);
+  rerender(
+    <CellEditor
+      input={{ ...props, status: "error", error: "permission failed" }}
+    />,
+  );
+  fireEvent.change(screen.getByRole("combobox"), { target: { value: "done" } });
+  expect(props.setDraft).toHaveBeenCalledExactlyOnceWith("done");
+  rerender(
+    <CellEditor input={{ ...props, status: "editing", draft: "done" }} />,
+  );
+  expect(props.setDraft).toHaveBeenCalledTimes(1);
+});
diff --git a/packages/react/src/__tests__/pretable-surface-edit-lifecycle.test.tsx b/packages/react/src/__tests__/pretable-surface-edit-lifecycle.test.tsx
new file mode 100644
index 000000000..1c32e1c81
--- /dev/null
+++ b/packages/react/src/__tests__/pretable-surface-edit-lifecycle.test.tsx
@@ -0,0 +1,299 @@
+import "@testing-library/jest-dom/vitest";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { useLayoutEffect } from "react";
+import { afterEach, expect, it, vi } from "vitest";
+import { createColumnHelper, createLocalRowModel } from "@pretable/core";
+import { PretableSurface } from "../pretable-surface";
+import type { PretableEditorInput } from "../types";
+
+afterEach(cleanup);
+const rows = [{ id: "r1", value: "queued" }];
+const getRowId = (row: (typeof rows)[number]) => row.id;
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (error: Error) => void;
+  const promise = new Promise<T>((r, fail) => {
+    resolve = r;
+    reject = fail;
+  });
+  return { promise, resolve, reject };
+}
+function begin() {
+  const cell = screen.getAllByRole("gridcell")[0];
+  fireEvent.click(cell);
+  fireEvent.keyDown(cell, { key: "Enter" });
+}
+it.each([true, false])(
+  "enum waits for deferred permission %s before saving",
+  async (allowed) => {
+    const permission = deferred<boolean>();
+    const save = vi.fn();
+    render(
+      <PretableSurface
+        ariaLabel="Lifecycle"
+        columns={[
+          {
+            id: "value",
+            type: "enum",
+            options: [
+              { value: "queued", label: "Queued" },
+              { value: "done", label: "Done" },
+            ],
+            editable: () => permission.promise,
+          },
+        ]}
+        rows={rows}
+        getRowId={getRowId}
+        viewportHeight={300}
+        onRowChange={save}
+      />,
+    );
+    begin();
+    const box = screen.getByRole("combobox");
+    expect(box).toHaveValue("Queued");
+    fireEvent.keyDown(box, { key: "Enter" });
+    fireEvent.click(screen.getByRole("option", { name: "Done" }));
+    expect(box).toHaveValue("Queued");
+    expect(save).not.toHaveBeenCalled();
+    await act(async () => {
+      permission.resolve(allowed);
+      await permission.promise;
+    });
+    if (!allowed) {
+      expect(screen.queryByRole("combobox")).not.toBeInTheDocument();
+      expect(save).not.toHaveBeenCalled();
+      return;
+    }
+    expect(screen.getByRole("combobox")).toBe(box);
+    expect(box).toHaveValue("Queued");
+    await act(async () => {
+      fireEvent.keyDown(box, { key: "Enter" });
+    });
+    expect(save).toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({ value: "queued" }),
+    );
+  },
+);
+
+function EagerEditor({
+  input,
+}: {
+  input: Pick<PretableEditorInput, "setDraft" | "commit" | "status">;
+}) {
+  useLayoutEffect(() => {
+    input.setDraft("early");
+    input.commit();
+    // Deliberately act only at mount, including when permission is pending.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <button type="button" onClick={() => input.commit()}>
+      Save {input.status}
+    </button>
+  );
+}
+it("contains direct custom-editor early commits and repeated controlled-row saves", async () => {
+  const permission = deferred<boolean>();
+  const saving = deferred<void>();
+  const save = vi.fn(() => saving.promise);
+  const columns = [
+    {
+      id: "value",
+      editable: () => permission.promise,
+      renderEditor: (input: PretableEditorInput) => (
+        <EagerEditor input={input} />
+      ),
+    },
+  ];
+  const { rerender } = render(
+    <PretableSurface
+      ariaLabel="Lifecycle"
+      columns={columns}
+      rows={rows}
+      getRowId={getRowId}
+      viewportHeight={300}
+      onRowChange={save}
+    />,
+  );
+  begin();
+  fireEvent.click(screen.getByRole("button", { name: "Save checking" }));
+  expect(save).not.toHaveBeenCalled();
+  await act(async () => {
+    permission.resolve(true);
+    await permission.promise;
+  });
+  await act(async () => {
+    fireEvent.click(screen.getByRole("button", { name: "Save editing" }));
+  });
+  expect(save).toHaveBeenCalledExactlyOnceWith(
+    expect.objectContaining({ value: "queued" }),
+  );
+  fireEvent.click(screen.getByRole("button", { name: "Save saving" }));
+  await act(async () => {
+    saving.resolve();
+    await saving.promise;
+  });
+  fireEvent.click(screen.getByRole("button", { name: "Save saving" }));
+  expect(save).toHaveBeenCalledTimes(1);
+  rerender(
+    <PretableSurface
+      ariaLabel="Lifecycle"
+      columns={columns}
+      rows={[{ id: "r1", value: "queued" }]}
+      getRowId={getRowId}
+      viewportHeight={300}
+      onRowChange={save}
+    />,
+  );
+  expect(
+    screen.queryByRole("button", { name: /Save/ }),
+  ).not.toBeInTheDocument();
+});
+it("drops permission completion after an eager editor is unmounted", async () => {
+  const permission = deferred<boolean>();
+  const save = vi.fn();
+  const { unmount } = render(
+    <PretableSurface
+      ariaLabel="Lifecycle"
+      columns={[
+        {
+          id: "value",
+          editable: () => permission.promise,
+          renderEditor: (input) => <EagerEditor input={input} />,
+        },
+      ]}
+      rows={rows}
+      getRowId={getRowId}
+      viewportHeight={300}
+      onRowChange={save}
+    />,
+  );
+  begin();
+  unmount();
+  await act(async () => {
+    permission.resolve(true);
+    await permission.promise;
+  });
+  expect(save).not.toHaveBeenCalled();
+});
+it.each([true, false])(
+  "boolean toggle waits for permission %s",
+  async (allowed) => {
+    const permission = deferred<boolean>();
+    const save = vi.fn();
+    render(
+      <PretableSurface
+        ariaLabel="Lifecycle"
+        columns={[
+          { id: "value", type: "boolean", editable: () => permission.promise },
+        ]}
+        rows={[{ id: "r1", value: false }]}
+        getRowId={(row) => row.id}
+        viewportHeight={300}
+        onRowChange={save}
+      />,
+    );
+    fireEvent.click(screen.getByRole("checkbox"));
+    expect(save).not.toHaveBeenCalled();
+    await act(async () => {
+      permission.resolve(allowed);
+      await permission.promise;
+    });
+    if (allowed)
+      expect(save).toHaveBeenCalledExactlyOnceWith(
+        expect.objectContaining({ value: true }),
+      );
+    else expect(save).not.toHaveBeenCalled();
+  },
+);
+it("model replacement retires pending permission without touching its new editor", async () => {
+  const permission = deferred<boolean>();
+  const editable = vi
+    .fn()
+    .mockReturnValueOnce(permission.promise)
+    .mockReturnValue(true);
+  const schema = [
+    createColumnHelper<(typeof rows)[number]>().accessor("value", {
+      type: "text",
+    }),
+  ] as const;
+  const first = createLocalRowModel({ rows, columns: schema, getRowId });
+  const second = createLocalRowModel({ rows, columns: schema, getRowId });
+  const columns = [{ ...schema[0], editable }] as const;
+  const save = vi.fn();
+  const { rerender, unmount } = render(
+    <PretableSurface
+      ariaLabel="Lifecycle"
+      model={first}
+      columns={columns}
+      viewportHeight={300}
+      beforeRowChange={save}
+    />,
+  );
+  begin();
+  expect(screen.getByRole("textbox")).toHaveAttribute("aria-busy", "true");
+  rerender(
+    <PretableSurface
+      ariaLabel="Lifecycle"
+      model={second}
+      columns={columns}
+      viewportHeight={300}
+      beforeRowChange={save}
+    />,
+  );
+  await act(async () => {});
+  begin();
+  await act(async () => {});
+  expect(editable).toHaveBeenCalledTimes(2);
+  const box = screen.getByRole("textbox");
+  fireEvent.change(box, { target: { value: "replacement draft" } });
+  await act(async () => {
+    permission.resolve(false);
+    await permission.promise;
+  });
+  expect(screen.getByRole("textbox")).toBe(box);
+  expect(box).toHaveValue("replacement draft");
+  expect(save).not.toHaveBeenCalled();
+  unmount();
+  first.dispose();
+  second.dispose();
+});
+it("preserves an enum correction when typing clears a permission error", async () => {
+  const permission = deferred<boolean>();
+  const save = vi.fn();
+  render(
+    <PretableSurface
+      ariaLabel="Lifecycle"
+      columns={[
+        {
+          id: "value",
+          type: "enum",
+          options: [
+            { value: "queued", label: "Queued" },
+            { value: "done", label: "Done" },
+          ],
+          editable: () => permission.promise,
+        },
+      ]}
+      rows={rows}
+      getRowId={getRowId}
+      viewportHeight={300}
+      onRowChange={save}
+    />,
+  );
+  begin();
+  await act(async () => {
+    permission.reject(new Error("permission unavailable"));
+    await permission.promise.catch(() => {});
+  });
+  const box = screen.getByRole("combobox");
+  fireEvent.change(box, { target: { value: "done" } });
+  expect(box).toHaveValue("done");
+  expect(save).not.toHaveBeenCalled();
+});
diff --git a/packages/react/src/__tests__/pretable-surface-editing.test.tsx b/packages/react/src/__tests__/pretable-surface-editing.test.tsx
index 6a6e40631..c45d0ddba 100644
--- a/packages/react/src/__tests__/pretable-surface-editing.test.tsx
+++ b/packages/react/src/__tests__/pretable-surface-editing.test.tsx
@@ -395,6 +395,53 @@ describe("PretableSurface editing", () => {
     expect(open).not.toHaveAttribute("readonly");
   });
 
+  it("retries failed permission in the same mounted editor and preserves its draft", async () => {
+    let allow!: (value: boolean) => void;
+    const editable = vi
+      .fn()
+      .mockRejectedValueOnce(new Error("offline"))
+      .mockImplementationOnce(
+        () =>
+          new Promise<boolean>((resolve) => {
+            allow = resolve;
+          }),
+      );
+    const onRowChange = vi.fn();
+    render(
+      <PretableSurface<Row>
+        ariaLabel="people"
+        columns={[{ id: "name", header: "Name", editable }]}
+        rows={ROWS}
+        getRowId={(r) => r.id}
+        viewportHeight={300}
+        onRowChange={onRowChange}
+      />,
+    );
+    fireEvent.click(firstNameCell());
+    fireEvent.keyDown(firstNameCell(), { key: "Enter" });
+    await flush();
+    const box = screen.getByRole("textbox");
+    expect(firstNameCell()).toHaveAttribute(
+      "data-pretable-edit-status",
+      "error",
+    );
+    fireEvent.change(box, { target: { value: "retry draft" } });
+    fireEvent.keyDown(box, { key: "Enter" });
+    expect(firstNameCell()).toHaveAttribute(
+      "data-pretable-edit-status",
+      "checking",
+    );
+    expect(screen.getByRole("textbox")).toBe(box);
+    expect(box).toHaveValue("retry draft");
+    fireEvent.keyDown(box, { key: "Enter" });
+    expect(editable).toHaveBeenCalledTimes(2);
+    allow(true);
+    await flush();
+    expect(onRowChange).toHaveBeenCalledWith(
+      expect.objectContaining({ value: "retry draft" }),
+    );
+  });
+
   it("closes without opening when async editable resolves false", async () => {
     let allow!: (v: boolean) => void;
     render(
@@ -750,3 +797,158 @@ describe("editing × row grouping", () => {
     expect(screen.getByRole("textbox")).toBeInTheDocument();
   });
 });
+
+it.each(["native", "lifecycle", "legacy"])(
+  "does not enter editing during %s composition, then accepts the next command",
+  (signal) => {
+    renderGrid();
+    const cell = firstNameCell();
+    fireEvent.click(cell);
+    if (signal === "lifecycle") fireEvent.compositionStart(cell);
+    expect(
+      fireEvent.keyDown(cell, {
+        key: "Enter",
+        isComposing: signal === "native",
+        keyCode: signal === "legacy" ? 229 : 13,
+      }),
+    ).toBe(true);
+    expect(screen.queryByRole("textbox")).toBeNull();
+    if (signal === "lifecycle") fireEvent.compositionEnd(cell);
+    fireEvent.keyDown(cell, { key: "Enter" });
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  },
+);
+
+it.each([
+  {
+    key: "Tab",
+    shiftKey: true,
+    row: "r1",
+    column: "quantity",
+    nextRow: "r1",
+    nextColumn: "name",
+  },
+  {
+    key: "Tab",
+    shiftKey: false,
+    row: "r1",
+    column: "name",
+    nextRow: "r1",
+    nextColumn: "quantity",
+  },
+  {
+    key: "Enter",
+    shiftKey: true,
+    row: "r2",
+    column: "quantity",
+    nextRow: "r1",
+    nextColumn: "quantity",
+  },
+  {
+    key: "Enter",
+    shiftKey: false,
+    row: "r1",
+    column: "quantity",
+    nextRow: "r2",
+    nextColumn: "quantity",
+  },
+])(
+  "controlled rows honor $key shift=$shiftKey after acknowledging the save",
+  async ({ key, shiftKey, row, column, nextRow, nextColumn }) => {
+    function Harness() {
+      const [rows, setRows] = React.useState([
+        { id: "r1", name: "Ada", quantity: 1 },
+        { id: "r2", name: "Linus", quantity: 2 },
+      ]);
+      return (
+        <PretableSurface
+          ariaLabel="Directional save"
+          columns={[
+            { id: "name", editable: true },
+            { id: "quantity", type: "number", editable: true },
+          ]}
+          rows={rows}
+          getRowId={(row) => row.id}
+          viewportHeight={300}
+          onRowChange={(change) =>
+            setRows((previous) =>
+              previous.map((row) =>
+                row.id === change.rowId ? { ...row, ...change.changes } : row,
+              ),
+            )
+          }
+        />
+      );
+    }
+    const view = render(<Harness />);
+    const cell = (rowId: string, columnId: string) =>
+      view.container.querySelector<HTMLElement>(
+        `[data-pretable-row-id="${rowId}"] [data-pretable-column-id="${columnId}"]`,
+      )!;
+    fireEvent.click(cell(row, column));
+    fireEvent.keyDown(cell(row, column), { key: "Enter" });
+    const field = await view.findByRole("textbox");
+    fireEvent.change(field, { target: { value: "7" } });
+    await act(async () => {
+      fireEvent.keyDown(field, { key, shiftKey });
+    });
+    expect(view.queryByRole("textbox")).toBeNull();
+    expect(cell(row, column)).toHaveTextContent("7");
+    expect(cell(nextRow, nextColumn)).toHaveAttribute(
+      "data-pretable-focused",
+      "true",
+    );
+  },
+);
+it.each([false, true])(
+  "delayed controlled acknowledgement moves only a live session (cancel=%s)",
+  async (cancel) => {
+    let acknowledge: () => void = () => {
+      throw new Error("Save not requested");
+    };
+    function Harness() {
+      const [rows, setRows] = React.useState([
+        { id: "r1", name: "Ada", quantity: 1 },
+      ]);
+      return (
+        <PretableSurface
+          ariaLabel="Delayed save"
+          columns={[
+            { id: "name", editable: true },
+            { id: "quantity", type: "number", editable: true },
+          ]}
+          rows={rows}
+          getRowId={(row) => row.id}
+          viewportHeight={300}
+          onRowChange={(change) => {
+            acknowledge = () =>
+              setRows((previous) =>
+                previous.map((row) => ({ ...row, ...change.changes })),
+              );
+          }}
+        />
+      );
+    }
+    const view = render(<Harness />);
+    const cell = (column: string) =>
+      view.container.querySelector<HTMLElement>(
+        `[data-pretable-row-id="r1"] [data-pretable-column-id="${column}"]`,
+      )!;
+    fireEvent.click(cell("quantity"));
+    fireEvent.keyDown(cell("quantity"), { key: "Enter" });
+    const field = await view.findByRole("textbox");
+    fireEvent.change(field, { target: { value: "7" } });
+    await act(async () => {
+      fireEvent.keyDown(field, { key: "Tab", shiftKey: true });
+    });
+    expect(field).toHaveAttribute("readonly");
+    expect(cell("quantity")).toHaveAttribute("data-pretable-focused", "true");
+    if (cancel) fireEvent.keyDown(field, { key: "Escape" });
+    await act(async () => acknowledge());
+    expect(view.queryByRole("textbox")).toBeNull();
+    expect(cell(cancel ? "quantity" : "name")).toHaveAttribute(
+      "data-pretable-focused",
+      "true",
+    );
+  },
+);
diff --git a/packages/react/src/__tests__/tool-panel.test.tsx b/packages/react/src/__tests__/tool-panel.test.tsx
index a04191d8a..c7c234009 100644
--- a/packages/react/src/__tests__/tool-panel.test.tsx
+++ b/packages/react/src/__tests__/tool-panel.test.tsx
@@ -795,7 +795,9 @@ describe("columns section pin menu", () => {
     // the viewport's `contain: content` traps AND clips `position: fixed`
     // descendants — jsdom cannot see that clipping, so the DOM location is
     // the enforceable proxy. An inline render would parent it in the pane.
-    expect(menu.parentElement).toBe(document.body);
+    expect(menu.closest("[data-pretable-overlay-root]")?.parentElement).toBe(
+      document.body,
+    );
     expect(
       h.view.container.querySelector("[data-pretable-tool-pane]"),
     ).not.toContainElement(menu);
diff --git a/packages/react/src/__tests__/use-cell-edit-controller.test.ts b/packages/react/src/__tests__/use-cell-edit-controller.test.ts
index c5d3ddec5..32a36c371 100644
--- a/packages/react/src/__tests__/use-cell-edit-controller.test.ts
+++ b/packages/react/src/__tests__/use-cell-edit-controller.test.ts
@@ -1,7 +1,15 @@
+import { enumChoice } from "../editors/enum-draft";
 import { describe, expect, it, vi } from "vitest";
 
 import type { PretableColumn } from "@pretable/core";
 
+import { createGridUiCore } from "@pretable-internal/grid-core";
+import {
+  createColumnHelper,
+  createLocalRowModel,
+} from "@pretable-internal/row-model";
+import { resetDevWarnings } from "../dev-warn";
+
 import { createCellEditController } from "../use-cell-edit-controller";
 
 interface Row extends Record<string, unknown> {
@@ -25,7 +33,12 @@ function setup(
     status: string;
     error?: string;
   } | null = null;
+  let sessionToken = 0;
   const grid = {
+    getEditSessionToken: () => sessionToken,
+    markChecking() {
+      if (editing !== null) editing = { ...editing, status: "checking" };
+    },
     beginEdit(
       addr: { readonly rowId: string; readonly columnId: string },
       edit?: {
@@ -34,6 +47,7 @@ function setup(
         readonly seededFromTyping?: boolean;
       },
     ) {
+      sessionToken += 1;
       editing = {
         ...addr,
         draft: edit?.draft,
@@ -73,7 +87,7 @@ function setup(
     getRowById: (id) => rows.find((r) => r.id === id) ?? null,
     onCommit,
   });
-  return { grid, controller, onCommit };
+  return { grid, controller, onCommit, columns };
 }
 
 describe("cell edit controller", () => {
@@ -302,3 +316,429 @@ describe("cell edit controller", () => {
     },
   );
 });
+
+describe("controller lifecycle admission", () => {
+  const addr = { rowId: "r1", columnId: "name" };
+  it("rejects an early tokenless commit while permission is checking", async () => {
+    let resolve!: (allowed: boolean) => void;
+    const { controller, grid, onCommit } = setup({
+      editable: () =>
+        new Promise<boolean>((r) => {
+          resolve = r;
+        }),
+    });
+    const begin = controller.begin(addr);
+    await controller.commit();
+    expect(onCommit).not.toHaveBeenCalled();
+    expect(grid.getSnapshot().editing?.status).toBe("checking");
+    resolve(false);
+    await begin;
+    expect(grid.getSnapshot().editing).toBeNull();
+  });
+  it("blocks duplicate and parser-reentrant commits synchronously", async () => {
+    let reentered = false;
+    const parse = vi.fn(() => {
+      expect(grid.getSnapshot().editing?.status).toBe("validating");
+      if (!reentered) {
+        reentered = true;
+        void controller.commit();
+      }
+      return "parsed";
+    });
+    const { controller, grid, onCommit } = setup({ parseEditValue: parse });
+    await controller.begin(addr);
+    await Promise.all([controller.commit(), controller.commit()]);
+    expect(parse).toHaveBeenCalledOnce();
+    expect(onCommit).toHaveBeenCalledOnce();
+  });
+  it.each(["editable", "parseEditValue", "validate"] as const)(
+    "contains %s exceptions and retains a recoverable draft",
+    async (stage) => {
+      const callback = vi
+        .fn()
+        .mockImplementationOnce(() => {
+          throw new Error(stage);
+        })
+        .mockReturnValue(true);
+      const { controller, grid, onCommit } = setup({ [stage]: callback });
+      await expect(controller.begin(addr, "draft")).resolves.toBeDefined();
+      if (stage !== "editable")
+        await expect(controller.commit()).resolves.toBeUndefined();
+      expect(grid.getSnapshot().editing).toMatchObject({
+        status: "error",
+        draft: "draft",
+        error: stage,
+      });
+      await controller.commit();
+      expect(grid.getSnapshot().editing).toBeNull();
+      expect(onCommit).toHaveBeenCalledOnce();
+    },
+  );
+  it("retries failed permission through checking before parsing", async () => {
+    const editable = vi
+      .fn()
+      .mockRejectedValueOnce(new Error("offline"))
+      .mockResolvedValueOnce(false);
+    const { controller, grid, onCommit } = setup({ editable });
+    await controller.begin(addr);
+    const retry = controller.commit();
+    expect(grid.getSnapshot().editing?.status).toBe("checking");
+    await retry;
+    expect(editable).toHaveBeenCalledTimes(2);
+    expect(onCommit).not.toHaveBeenCalled();
+    expect(grid.getSnapshot().editing).toBeNull();
+  });
+  it("retires the old session before a failed replacement begin", async () => {
+    const { controller, grid, onCommit } = setup();
+    await controller.begin(addr);
+    await controller.begin({ ...addr, columnId: "missing" });
+    await controller.commit();
+    expect(grid.getSnapshot().editing).toBeNull();
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+  it("rejects same-address adapter replacement during parsing", async () => {
+    const { controller, grid, onCommit } = setup({
+      parseEditValue: () => {
+        grid.beginEdit(addr, { draft: "replacement" });
+        return "old";
+      },
+    });
+    await controller.begin(addr);
+    await controller.commit();
+    expect(onCommit).not.toHaveBeenCalled();
+    expect(grid.getSnapshot().editing?.draft).toBe("replacement");
+  });
+  it("retains the saving barrier after keep-open", async () => {
+    const { controller, grid, onCommit } = setup(
+      {},
+      vi.fn().mockResolvedValue("keep-open"),
+    );
+    await controller.begin(addr);
+    await controller.commit();
+    await controller.commit();
+    expect(grid.getSnapshot().editing?.status).toBe("saving");
+    expect(onCommit).toHaveBeenCalledOnce();
+  });
+});
+
+describe("controller callback boundaries", () => {
+  const addr = { rowId: "r1", columnId: "name" };
+  it.each(["value", "formatEditValue"] as const)(
+    "diagnoses pre-session %s failure once and retires the old edit",
+    async (stage) => {
+      resetDevWarnings();
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const { controller, grid, columns } = setup();
+      await controller.begin(addr);
+      columns[0]![stage] = () => {
+        throw new Error("consumer failed");
+      };
+      await expect(controller.begin(addr)).resolves.toBeNull();
+      await expect(controller.begin(addr)).resolves.toBeNull();
+      expect(grid.getSnapshot().editing).toBeNull();
+      expect(warn).toHaveBeenCalledOnce();
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining("consumer failed"),
+      );
+      warn.mockRestore();
+    },
+  );
+  it.each(["getColumns", "getRowById", "value"] as const)(
+    "contains active %s failures",
+    async (stage) => {
+      const base = setup();
+      let fail = false;
+      const controller = createCellEditController({
+        grid: base.grid,
+        getColumns: () => {
+          if (fail && stage === "getColumns") throw new Error(stage);
+          return [
+            {
+              id: "name",
+              editable: true,
+              value: () => {
+                if (fail && stage === "value") throw new Error(stage);
+                return "Ada";
+              },
+            },
+          ];
+        },
+        getRowById: () => {
+          if (fail && stage === "getRowById") throw new Error(stage);
+          return ROWS[0]!;
+        },
+      });
+      await controller.begin(addr);
+      fail = true;
+      await expect(controller.commit()).resolves.toBeUndefined();
+      expect(base.grid.getSnapshot().editing).toMatchObject({
+        status: "error",
+        error: stage,
+        draft: "Ada",
+      });
+      fail = false;
+      await controller.commit();
+      expect(base.grid.getSnapshot().editing).toBeNull();
+    },
+  );
+  for (const stage of [
+    "editable",
+    "parseEditValue",
+    "validate",
+    "save",
+  ] as const) {
+    for (const retire of [
+      "cancel",
+      "invalidate",
+      "begin",
+      "adapter",
+    ] as const) {
+      it.each(["resolve", "reject"] as const)(
+        `ignores stale ${stage} %s after ${retire}`,
+        async (outcome) => {
+          let resolve!: (value: true) => void;
+          let reject!: (error: Error) => void;
+          const deferred = new Promise<true>((yes, no) => {
+            resolve = yes;
+            reject = no;
+          });
+          const callback = vi
+            .fn()
+            .mockReturnValueOnce(deferred)
+            .mockReturnValue(true);
+          const save = stage === "save" ? callback : vi.fn();
+          const { controller, grid } = setup(
+            stage === "save" ? {} : { [stage]: callback },
+            save,
+          );
+          let pending: Promise<unknown>;
+          if (stage === "editable") pending = controller.begin(addr);
+          else {
+            await controller.begin(addr);
+            pending = controller.commit();
+          }
+          if (retire === "begin") await controller.begin(addr, "replacement");
+          else if (retire === "adapter")
+            grid.beginEdit(addr, { draft: "replacement" });
+          else controller[retire]();
+          const before = grid.getSnapshot().editing;
+          if (outcome === "resolve") resolve(true);
+          else reject(new Error("stale"));
+          await pending;
+          expect(grid.getSnapshot().editing).toEqual(before);
+          if (stage !== "save") expect(save).not.toHaveBeenCalled();
+        },
+      );
+    }
+  }
+  it("does not overwrite an adapter replacement made by the begin formatter", async () => {
+    const { controller, grid } = setup({
+      formatEditValue: () => {
+        grid.beginEdit(addr, { draft: "replacement" });
+        return "stale seed";
+      },
+    });
+    expect(await controller.begin(addr)).toBeNull();
+    expect(grid.getSnapshot().editing?.draft).toBe("replacement");
+  });
+  it.each(["editable", "validate", "save"] as const)(
+    "blocks synchronous %s callback reentry",
+    async (stage) => {
+      const callback = vi.fn(() => {
+        void controller.commit();
+        return true;
+      });
+      const save =
+        stage === "save"
+          ? vi.fn(() => {
+              void controller.commit();
+            })
+          : vi.fn();
+      const { controller } = setup(
+        stage === "save" ? {} : { [stage]: callback },
+        save,
+      );
+      await controller.begin(addr);
+      await controller.commit();
+      if (stage !== "save") expect(callback).toHaveBeenCalledOnce();
+      expect(save).toHaveBeenCalledOnce();
+    },
+  );
+  it("retains granted permission across validation and save retries", async () => {
+    const editable = vi.fn().mockResolvedValue(true);
+    const validate = vi
+      .fn()
+      .mockReturnValueOnce("invalid")
+      .mockReturnValue(true);
+    const save = vi
+      .fn()
+      .mockRejectedValueOnce(new Error("retry"))
+      .mockResolvedValue(undefined);
+    const { controller, grid } = setup({ editable, validate }, save);
+    const authorization = await controller.begin(addr);
+    if (!authorization) throw new Error("expected authorization");
+    await controller.commit(undefined, authorization);
+    expect(grid.getSnapshot().editing?.status).toBe("editing");
+    await controller.commit(undefined, authorization);
+    expect(grid.getSnapshot().editing?.status).toBe("error");
+    await controller.commit(undefined, authorization);
+    expect(grid.getSnapshot().editing).toBeNull();
+    expect(editable).toHaveBeenCalledOnce();
+    expect(save).toHaveBeenCalledTimes(2);
+  });
+  it("protects the real indexed-core draft against parser reentry", async () => {
+    const helper = createColumnHelper<Row>();
+    const core = createGridUiCore({
+      rowModel: createLocalRowModel({
+        rows: ROWS,
+        columns: [helper.accessor("name", { type: "text" })],
+      }),
+      columns: [{ id: "name", widthPx: 180 }],
+    });
+    core.observeRowModelRevision(0);
+    const base = setup();
+    const controller = createCellEditController({
+      grid: {
+        ...base.grid,
+        beginEdit: (address, edit) =>
+          core.beginEdit({
+            ...address,
+            columnId: "name",
+            value: edit?.draft as never,
+            status: edit?.status,
+          }),
+        getSnapshot: () => ({
+          editing: core.getState().editing
+            ? {
+                ...core.getState().editing!,
+                draft: core.getState().editing!.value,
+              }
+            : null,
+        }),
+        markEditValidating: () => core.setEditStatus("validating"),
+        markEditSaving: () => core.setEditStatus("saving"),
+      },
+      getColumns: () => [
+        {
+          id: "name",
+          editable: true,
+          parseEditValue: (draft) => {
+            core.setEditDraft("corrupted" as never);
+            expect(core.getState().editing?.value).toBe("original");
+            return draft;
+          },
+        },
+      ],
+      getRowById: () => ROWS[0]!,
+      onCommit: () => "keep-open",
+    });
+    await controller.begin(addr, "original");
+    await controller.commit();
+    expect(core.getState().editing).toMatchObject({
+      status: "saving",
+      value: "original",
+    });
+  });
+});
+
+describe("async parser recovery", () => {
+  const addr = { rowId: "r1", columnId: "name" };
+  it("contains rejected parser results and retries with the resolved parsed value", async () => {
+    let reject!: (error: Error) => void;
+    const parse = vi
+      .fn()
+      .mockImplementationOnce(
+        () =>
+          new Promise<string>((_, no) => {
+            reject = no;
+          }),
+      )
+      .mockResolvedValue("parsed retry");
+    const validate = vi.fn().mockReturnValue(true);
+    const { controller, grid, onCommit } = setup({
+      parseEditValue: parse,
+      validate,
+    });
+    await controller.begin(addr, "draft");
+    const pending = controller.commit();
+    const status = grid.getSnapshot().editing?.status;
+    const validationCalls = validate.mock.calls.length;
+    reject(new Error("parse failed"));
+    await pending;
+    expect(status).toBe("validating");
+    expect(validationCalls).toBe(0);
+    expect(grid.getSnapshot().editing).toMatchObject({
+      status: "error",
+      error: "parse failed",
+      draft: "draft",
+    });
+    expect(onCommit).not.toHaveBeenCalled();
+    await controller.commit();
+    expect(validate).toHaveBeenCalledWith("parsed retry", expect.anything());
+    expect(onCommit).toHaveBeenCalledWith(
+      expect.objectContaining({ value: "parsed retry" }),
+    );
+    expect(grid.getSnapshot().editing).toBeNull();
+  });
+  it("retires saving before a failed replacement and permits a later successful begin", async () => {
+    let finish!: () => void;
+    const save = vi
+      .fn()
+      .mockImplementationOnce(
+        () =>
+          new Promise<void>((resolve) => {
+            finish = resolve;
+          }),
+      )
+      .mockResolvedValue(undefined);
+    const { controller, grid } = setup({}, save);
+    await controller.begin(addr, "old");
+    const pending = controller.commit();
+    expect(grid.getSnapshot().editing?.status).toBe("saving");
+    expect(await controller.begin({ ...addr, columnId: "missing" })).toBeNull();
+    expect(grid.getSnapshot().editing).toBeNull();
+    const authorization = await controller.begin(addr, "new");
+    expect(authorization).not.toBeNull();
+    finish();
+    await pending;
+    expect(grid.getSnapshot().editing).toMatchObject({
+      draft: "new",
+      status: "editing",
+    });
+    await controller.commit();
+    expect(save).toHaveBeenLastCalledWith(
+      expect.objectContaining({ value: "new" }),
+    );
+    expect(grid.getSnapshot().editing).toBeNull();
+  });
+});
+
+it("hands a canonical enum choice string to a custom parser", async () => {
+  const parseEditValue = vi.fn((value) => `parsed:${value}`);
+  const { controller, grid, onCommit } = setup({
+    type: "enum",
+    options: [
+      { value: "one", label: "Same" },
+      { value: "two", label: "Same" },
+    ],
+    parseEditValue,
+  });
+  await controller.begin({ rowId: "r1", columnId: "name" });
+  grid.setEditDraft(enumChoice("two"));
+  await controller.commit();
+  expect(parseEditValue).toHaveBeenCalledWith("two", expect.anything());
+  expect(onCommit).toHaveBeenCalledWith(
+    expect.objectContaining({ value: "parsed:two" }),
+  );
+});
+it("rejects a canonical enum choice removed before commit", async () => {
+  const { controller, grid, onCommit } = setup({
+    type: "enum",
+    options: [{ value: "one", label: "Same" }],
+  });
+  await controller.begin({ rowId: "r1", columnId: "name" });
+  grid.setEditDraft(enumChoice("two"));
+  await controller.commit();
+  expect(onCommit).not.toHaveBeenCalled();
+  expect(grid.getSnapshot().editing?.error).toBe("Pick an option");
+});
diff --git a/packages/react/src/cell-editor.tsx b/packages/react/src/cell-editor.tsx
index ad8616806..3750733a9 100644
--- a/packages/react/src/cell-editor.tsx
+++ b/packages/react/src/cell-editor.tsx
@@ -38,7 +38,12 @@ export function CellEditor({ input }: CellEditorProps) {
     <>
       {editorFor(input)}
       {input.error ? (
-        <div id={errorId} data-pretable-edit-error role="alert">
+        <div
+          id={errorId}
+          data-pretable-edit-error
+          role="alert"
+          title={input.error}
+        >
           {input.error}
         </div>
       ) : null}
diff --git a/packages/react/src/column-menu/ColumnMenu.tsx b/packages/react/src/column-menu/ColumnMenu.tsx
index ee61fe52a..f8a63c04e 100644
--- a/packages/react/src/column-menu/ColumnMenu.tsx
+++ b/packages/react/src/column-menu/ColumnMenu.tsx
@@ -1,12 +1,13 @@
 // packages/react/src/column-menu/ColumnMenu.tsx
 import {
   createElement,
-  useEffect,
+  useCallback,
   useRef,
   type CSSProperties,
   type JSX,
 } from "react";
 
+import { useOutsidePointer } from "../overlay/outside-pointer";
 import { OverlayPortal } from "../overlay/OverlayPortal";
 
 /** What a menu item does when chosen. */
@@ -57,26 +58,12 @@ export function ColumnMenu({
   onClose: () => void;
 }): JSX.Element {
   const rootRef = useRef<HTMLDivElement>(null);
-  const firstItemRef = useRef<HTMLButtonElement>(null);
-  const action: ColumnMenuAction = grouped ? "ungroup" : "group";
-
-  // A menu opened from a button owns the focus while it is up.
-  useEffect(() => {
-    firstItemRef.current?.focus();
+  const firstItemRef = useCallback((node: HTMLButtonElement | null) => {
+    node?.focus();
   }, []);
+  const action: ColumnMenuAction = grouped ? "ungroup" : "group";
 
-  // Outside-click → close. No focus return: the click is already moving focus
-  // somewhere the user chose, and yanking it back to the ⋮ would fight that.
-  useEffect(() => {
-    const onPointerDown = (e: PointerEvent) => {
-      const root = rootRef.current;
-      if (root && e.target instanceof Node && !root.contains(e.target)) {
-        onClose();
-      }
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
-  }, [onClose]);
+  useOutsidePointer(rootRef, onClose, anchor);
 
   const dismiss = (restoreFocus: boolean) => {
     onClose();
diff --git a/packages/react/src/column-menu/MenuButton.tsx b/packages/react/src/column-menu/MenuButton.tsx
index f31a7c498..e22c84d13 100644
--- a/packages/react/src/column-menu/MenuButton.tsx
+++ b/packages/react/src/column-menu/MenuButton.tsx
@@ -1,5 +1,6 @@
 // packages/react/src/column-menu/MenuButton.tsx
 import { createElement, type CSSProperties } from "react";
+import { useOverlayContainer } from "../overlay/portal-context";
 import { usePretableComponents } from "../components/context";
 import { OverflowIcon } from "../icons";
 
@@ -24,6 +25,7 @@ export function MenuButton({
   onToggle: (columnId: string, anchor: HTMLElement) => void;
 }) {
   const { IconButton } = usePretableComponents();
+  const overlayReady = useOverlayContainer() !== null;
 
   return (
     <IconButton
@@ -31,7 +33,7 @@ export function MenuButton({
       data-pretable-column-menu-button=""
       data-pretable-column-id={columnId}
       aria-haspopup="menu"
-      aria-expanded={open}
+      aria-expanded={open && overlayReady}
       aria-label={`Column menu for ${label}`}
       ref={(node) => onNodeChange?.(columnId, node)}
       style={style}
@@ -41,13 +43,6 @@ export function MenuButton({
       // documented key. `.focus()` still works on it — which is what lets
       // ColumnMenu restore focus here on Escape.
       tabIndex={-1}
-      // Load-bearing, exactly as on FunnelButton: React delegates at the root
-      // container, so stopping here also keeps the pointerdown off `document`
-      // — where the open ColumnMenu listens for outside-clicks. Without it,
-      // pointerdown would close the menu and the following click would reopen
-      // it, so the menu could never be dismissed by clicking its own button.
-      // Covered by "closes on a real pointerdown+click on its own button".
-      onPointerDown={(e) => e.stopPropagation()}
       onClick={(e) => {
         e.stopPropagation();
         onToggle(columnId, e.currentTarget);
diff --git a/packages/react/src/components/accessible-name.ts b/packages/react/src/components/accessible-name.ts
index 96232131e..dbd2ce7e8 100644
--- a/packages/react/src/components/accessible-name.ts
+++ b/packages/react/src/components/accessible-name.ts
@@ -1,40 +1,25 @@
 /**
- * The half of an accessible name a component cannot see in its own props.
- *
- * `aria-label` arrives as a prop and is checked in render, the way
- * `PretableIconButton` checks it. A wrapping `<label>`, a `<label for>`
- * pointing at the control's id, and an `aria-labelledby` that resolves
- * elsewhere in the document are all facts about the rendered tree, not the
- * props — so they can only be read from the DOM, after mount.
- *
- * @internal
- */
-
-/**
- * Whether a rendered control has an accessible name from any of the sources
- * the kit can see once it is in the document: `aria-label`,
- * `aria-labelledby`, a wrapping `<label>`, or a `<label for>` naming its id.
- *
- * Deliberately not a full accname computation — this backs a development
- * warning, so the bar is "would a screen reader have anything to say", and a
- * false negative that nags is worse than an exotic naming path it misses.
- * Called once after mount, never in a hot path.
- *
+ * A bounded naming heuristic for the kit's once-per-page warnings in every
+ * build. Checks nonempty aria-label, resolved reference text, native label
+ * text, and title. This is not the full accessible-name algorithm: hidden
+ * content, image alternatives, and naming precedence may differ.
  * @internal
  */
 export function hasAccessibleName(el: HTMLElement): boolean {
-  if ((el.getAttribute("aria-label") ?? "").trim() !== "") {
-    return true;
-  }
-  if ((el.getAttribute("aria-labelledby") ?? "").trim() !== "") {
-    return true;
-  }
-  if (el.closest("label")) {
+  const meaningful = (text: string | null | undefined) => Boolean(text?.trim());
+  if (meaningful(el.getAttribute("aria-label"))) return true;
+  const ids = (el.getAttribute("aria-labelledby") ?? "").trim().split(/\s+/);
+  if (
+    ids.some((id) =>
+      meaningful(el.ownerDocument.getElementById(id)?.textContent),
+    )
+  )
     return true;
-  }
-  const { id } = el;
-  if (id && el.ownerDocument.querySelector(`label[for="${CSS.escape(id)}"]`)) {
+  const labels = "labels" in el ? (el as HTMLInputElement).labels : null;
+  if (
+    labels &&
+    Array.from(labels).some((label) => meaningful(label.textContent))
+  )
     return true;
-  }
-  return false;
+  return meaningful(el.getAttribute("title"));
 }
diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx
index a0319fe94..89d54fa8b 100644
--- a/packages/react/src/components/button.tsx
+++ b/packages/react/src/components/button.tsx
@@ -44,6 +44,11 @@ export type PretableButtonVariant = "ghost" | "link";
  * @public
  */
 export type PretableBuiltInSite =
+  | "cell-editor"
+  | "number-increment"
+  | "number-decrement"
+  | "date-previous-month"
+  | "date-next-month"
   | "filter-add"
   | "add-group"
   | "expand-all"
diff --git a/packages/react/src/components/checkbox.tsx b/packages/react/src/components/checkbox.tsx
index 18a5b8c1e..19cad9e34 100644
--- a/packages/react/src/components/checkbox.tsx
+++ b/packages/react/src/components/checkbox.tsx
@@ -3,12 +3,9 @@
  * cell, the column toggle and the boolean cell already used, now one
  * component for every site — the three native inputs included.
  *
- * A button rather than a styled native input because mixed state, the roving
- * tabindex in body cells and a glyph that takes the theme's tokens are all
- * plain on a button and a fight on an `<input>`: `indeterminate` is a DOM
- * property with no attribute, `tabindex="-1"` on an input still leaves a
- * focusable box in the tab order's way when it is re-enabled, and the tick is
- * the user agent's until `appearance: none` throws the whole control away.
+ * The button preserves the grid's existing Space/Enter activation and themed
+ * mixed-state glyphs. Native checkbox inputs also support tabIndex=-1 and
+ * indeterminate state; this choice keeps the kit's existing interaction model.
  *
  * Styled by `@pretable/ui`'s grid.css through `data-pretable-checkbox` and
  * `aria-checked`; a site's own attribute (`data-pretable-row-select`) still
@@ -24,7 +21,6 @@
 import {
   createElement,
   forwardRef,
-  useCallback,
   useEffect,
   useRef,
   type ButtonHTMLAttributes,
@@ -35,6 +31,7 @@ import { warnOnce } from "../dev-warn";
 import { CheckIcon, MinusIcon } from "../icons";
 import { hasAccessibleName } from "./accessible-name";
 import type { PretableSite } from "./button";
+import { useComposedRefs } from "./compose-refs";
 
 /**
  * Props for {@link PretableCheckbox}.
@@ -95,21 +92,7 @@ export const PretableCheckbox = forwardRef<
   ref,
 ): ReactElement {
   const ownRef = useRef<HTMLButtonElement>(null);
-  // One node, two readers: the component's own name check and the
-  // consumer's ref. A merged callback ref, as in `PretableSelect` — writing
-  // `ref` straight onto the button would leave the check with nothing to
-  // read.
-  const setRef = useCallback(
-    (node: HTMLButtonElement | null) => {
-      ownRef.current = node;
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    },
-    [ref],
-  );
+  const setRef = useComposedRefs(ownRef, ref);
 
   // The name may come from a wrapping <label>, which props cannot see: check
   // the DOM once, after mount.
diff --git a/packages/react/src/components/compose-refs.ts b/packages/react/src/components/compose-refs.ts
new file mode 100644
index 000000000..17789ba35
--- /dev/null
+++ b/packages/react/src/components/compose-refs.ts
@@ -0,0 +1,38 @@
+import { useMemo, type Ref } from "react";
+
+/** Compose refs without returning a cleanup to React (also works in React 18). */
+export function composeRefs<T>(
+  ...refs: (Ref<T> | undefined)[]
+): (node: T | null) => void {
+  let detach: (() => void) | undefined;
+  return (node) => {
+    const previous = detach;
+    detach = undefined;
+    previous?.();
+    if (node === null) return;
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const cleanup = ref(node);
+        return typeof cleanup === "function" ? cleanup : () => ref(null);
+      }
+      if (ref) {
+        ref.current = node;
+        return () => {
+          ref.current = null;
+        };
+      }
+      return undefined;
+    });
+    detach = () => {
+      for (const cleanup of cleanups) cleanup?.();
+    };
+  };
+}
+
+/** Stable identity avoids detaching and reattaching consumer refs on rerender. */
+export function useComposedRefs<T>(
+  first: Ref<T> | undefined,
+  second: Ref<T> | undefined,
+): (node: T | null) => void {
+  return useMemo(() => composeRefs(first, second), [first, second]);
+}
diff --git a/packages/react/src/components/context.ts b/packages/react/src/components/context.ts
index bdf1da43d..e2dce2b5c 100644
--- a/packages/react/src/components/context.ts
+++ b/packages/react/src/components/context.ts
@@ -8,9 +8,9 @@
  * branch on `site` to treat one place differently. No per-site public names:
  * the API does not grow a name for every control the grid gains.
  *
- * CONTEXT, not props. pretable portals its popovers — the filter dialog, the
- * column menus — into document.body. Context crosses a portal; props do not,
- * and the popovers are exactly where an override matters most. The value is
+ * Context avoids threading replacement props through every intermediate
+ * component, including portaled menus. Both props and React context work
+ * across portals. The value is
  * resolved once at the surface and memoised on the identity of each slot, so
  * an inline `{{ Button: MyButton }}` literal does not re-render every button
  * on every keystroke.
@@ -35,6 +35,7 @@ import {
 import { PretableCheckbox, type PretableCheckboxProps } from "./checkbox";
 import { PretableSelect, type PretableSelectProps } from "./select";
 import { PretableTextInput, type PretableTextInputProps } from "./text-input";
+import { PretableTextarea, type PretableTextareaProps } from "./textarea";
 
 /**
  * The component a `components.Button` replacement must be: it receives
@@ -74,9 +75,7 @@ export type PretableSelectComponent = ComponentType<
 /**
  * The component a `components.TextInput` replacement must be: it receives
  * {@link PretableTextInputProps} and forwards its `ref` to the input node —
- * the handle a caller reaches the real field through. The grid takes no ref
- * to a field today; the ref is the contract a replacement owes, not a live
- * caller.
+ * editors use that node for focus, selection, and popup anchoring.
  *
  * @public
  */
@@ -84,6 +83,13 @@ export type PretableTextInputComponent = ComponentType<
   PretableTextInputProps & RefAttributes<HTMLInputElement>
 >;
 
+/** A multiline field replacement must forward its ref to the textarea node.
+ * @public
+ */
+export type PretableTextareaComponent = ComponentType<
+  PretableTextareaProps & RefAttributes<HTMLTextAreaElement>
+>;
+
 /**
  * The component a `components.Checkbox` replacement must be: it receives
  * {@link PretableCheckboxProps} and forwards its `ref` to the button node —
@@ -109,8 +115,10 @@ export interface PretableComponents {
   readonly IconButton?: PretableIconButtonComponent;
   /** Every select-only picker the grid draws; receives {@link PretableSelectProps}. */
   readonly Select?: PretableSelectComponent;
-  /** Every chrome text field the grid draws — the filter value, the filter row's value and the tool panel's search; receives {@link PretableTextInputProps}. */
+  /** Every single-line field in grid chrome and cell editors; receives {@link PretableTextInputProps}. */
   readonly TextInput?: PretableTextInputComponent;
+  /** Multiline cell editor fields; receives {@link PretableTextareaProps}. */
+  readonly Textarea?: PretableTextareaComponent;
   /** Every checkbox the grid draws — the row-select cells, the column toggles, the boolean cell, the checklists; receives {@link PretableCheckboxProps}. */
   readonly Checkbox?: PretableCheckboxComponent;
 }
@@ -121,6 +129,7 @@ export interface ResolvedPretableComponents {
   readonly IconButton: PretableIconButtonComponent;
   readonly Select: PretableSelectComponent;
   readonly TextInput: PretableTextInputComponent;
+  readonly Textarea: PretableTextareaComponent;
   readonly Checkbox: PretableCheckboxComponent;
 }
 
@@ -130,6 +139,7 @@ export const DEFAULT_COMPONENTS: ResolvedPretableComponents = Object.freeze({
   IconButton: PretableIconButton,
   Select: PretableSelect,
   TextInput: PretableTextInput,
+  Textarea: PretableTextarea,
   Checkbox: PretableCheckbox,
 });
 
@@ -158,6 +168,7 @@ export function useResolvedComponents(
   const IconButton = components?.IconButton ?? DEFAULT_COMPONENTS.IconButton;
   const Select = components?.Select ?? DEFAULT_COMPONENTS.Select;
   const TextInput = components?.TextInput ?? DEFAULT_COMPONENTS.TextInput;
+  const Textarea = components?.Textarea ?? DEFAULT_COMPONENTS.Textarea;
   const Checkbox = components?.Checkbox ?? DEFAULT_COMPONENTS.Checkbox;
   return useMemo(
     () =>
@@ -165,9 +176,17 @@ export function useResolvedComponents(
       IconButton === DEFAULT_COMPONENTS.IconButton &&
       Select === DEFAULT_COMPONENTS.Select &&
       TextInput === DEFAULT_COMPONENTS.TextInput &&
+      Textarea === DEFAULT_COMPONENTS.Textarea &&
       Checkbox === DEFAULT_COMPONENTS.Checkbox
         ? DEFAULT_COMPONENTS
-        : Object.freeze({ Button, IconButton, Select, TextInput, Checkbox }),
-    [Button, IconButton, Select, TextInput, Checkbox],
+        : Object.freeze({
+            Button,
+            IconButton,
+            Select,
+            TextInput,
+            Textarea,
+            Checkbox,
+          }),
+    [Button, IconButton, Select, TextInput, Textarea, Checkbox],
   );
 }
diff --git a/packages/react/src/components/listbox.tsx b/packages/react/src/components/listbox.tsx
index e7f14272d..da114cfb1 100644
--- a/packages/react/src/components/listbox.tsx
+++ b/packages/react/src/components/listbox.tsx
@@ -14,11 +14,6 @@
  * would clip a fixed popover. Placed by `menuPopoverStyle`, so a list clamps
  * against the viewport exactly as the menus do.
  *
- * A TOGGLING trigger — one whose click both opens and closes the list — must
- * `stopPropagation()` on its own pointerdown, or the outside-press listener
- * below closes what the click then reopens, and the trigger could never
- * dismiss its own list. Same contract `menu-keyboard.ts` states for menus.
- *
  * Every option carries `data-pretable-option-value`: which option it IS, the
  * one name the whole kit uses for that — the checklists' choices wear it too.
  * Not `data-pretable-value`, which is a select trigger's one COMMITTED value.
@@ -32,9 +27,11 @@ import {
   type KeyboardEvent,
   type ReactElement,
   type ReactNode,
+  type RefObject,
 } from "react";
 
 import { menuPopoverStyle, popoverStyle } from "../overlay/popover-position";
+import { useOutsidePointer } from "../overlay/outside-pointer";
 import { OverlayPortal } from "../overlay/OverlayPortal";
 
 /**
@@ -71,20 +68,27 @@ export const EMPTY_RECT: DOMRect =
       } as DOMRect)
     : new DOMRect(0, 0, 0, 0);
 
-/** One entry in a list. `disabled` is skipped by the keyboard and inert to click. */
-export interface ListboxOption {
+/** One entry with a stable unique value. Disabled entries are inert to input. */
+export type ListboxOption = {
   readonly value: string;
-  readonly label: ReactNode;
   readonly disabled?: boolean;
-}
+} & (
+  | { readonly label: string | number; readonly textValue?: string }
+  | {
+      readonly label: Exclude<ReactNode, string | number>;
+      readonly textValue: string;
+    }
+);
 
 /** How long two keystrokes stay one typeahead query. The native control's feel. */
 const TYPEAHEAD_RESET_MS = 500;
 
-/** Text for typeahead: a string label as is, a node by its rendered text. */
-function labelText(label: ReactNode): string {
-  if (typeof label === "string") return label;
-  if (typeof label === "number") return String(label);
+/** Explicit text wins; only primitive labels can supply their own text. */
+function optionText(option: ListboxOption): string {
+  if (typeof option.textValue === "string") return option.textValue;
+  if (typeof option.label === "string") return option.label;
+  if (typeof option.label === "number") return String(option.label);
+  // JavaScript callers can omit the text required by the rich-label type.
   return "";
 }
 
@@ -109,6 +113,7 @@ export interface ListboxProps {
   onSelect: (value: string) => void;
   /** Outside pointerdown. No focus return: the press chose a new target. */
   onClose: () => void;
+  trigger?: HTMLElement | RefObject<HTMLElement | null> | null;
 }
 
 export function Listbox({
@@ -121,20 +126,11 @@ export function Listbox({
   "aria-label": ariaLabel,
   onSelect,
   onClose,
+  trigger,
 }: ListboxProps): ReactElement | null {
   const rootRef = useRef<HTMLUListElement>(null);
 
-  useEffect(() => {
-    const onPointerDown = (e: PointerEvent) => {
-      const root = rootRef.current;
-      // A null root is OUTSIDE, not "no answer": the empty list renders
-      // nothing (below) while these hooks still run, and a guard that
-      // required a root would swallow the only press that can close it.
-      if (e.target instanceof Node && !root?.contains(e.target)) onClose();
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
-  }, [onClose]);
+  useOutsidePointer(rootRef, onClose, trigger);
 
   // `options` is a dependency, not noise: filtering the list changes WHICH
   // option sits at `activeIndex` without changing the index itself.
@@ -164,14 +160,6 @@ export function Listbox({
         // Keep focus on the trigger: a blur before the click lands would
         // close (or, in the editor, commit) under the pointer.
         onMouseDown={(e) => e.preventDefault()}
-        // The list is portalled to body, so every host popover's own
-        // outside-press listener (the filter menu's, a dialog's) would read a
-        // press INSIDE this list as outside and dismiss itself under the
-        // pointer. Stopping it here is the mirror of the toggling trigger's
-        // own stopPropagation. This list's dismissal is unaffected: its
-        // listener tests containment, so the press it must not see is exactly
-        // the one it no longer receives, and an outside press still arrives.
-        onPointerDown={(e) => e.stopPropagation()}
       >
         {options.map((option, i) => (
           <li
@@ -182,7 +170,7 @@ export function Listbox({
             aria-disabled={option.disabled ? true : undefined}
             data-pretable-option=""
             data-pretable-option-value={option.value}
-            data-active={i === activeIndex ? "" : undefined}
+            data-pretable-active={i === activeIndex ? "" : undefined}
             onClick={() => {
               if (!option.disabled) onSelect(option.value);
             }}
@@ -269,17 +257,50 @@ export function useListboxKeys({
   onCommit,
   onClose,
 }: UseListboxKeysInput): UseListboxKeysResult {
-  const [activeIndex, setActiveIndex] = useState(initialIndex);
-
-  // Re-seed the highlight from the value each time the list opens —
-  // adjusting state during render, the React-sanctioned form; an effect
-  // would commit one frame of stale highlight and trips the
-  // set-state-in-effect rule.
-  const [prevOpen, setPrevOpen] = useState(open);
-  if (open !== prevOpen) {
-    setPrevOpen(open);
-    if (open) setActiveIndex(initialIndex);
+  // Values preserve identity through roster changes. An explicit index request
+  // is resolved on the next render, against that render's roster: an editor
+  // can reset to 0 in the same event that changes its filtered options.
+  const [active, setActive] = useState<
+    { value: string | null } | { index: number }
+  >({ index: initialIndex });
+  const firstEnabled = firstEnabledIndex(options);
+  const hasEnabled = firstEnabled >= 0;
+  const [previous, setPrevious] = useState({ open, hasEnabled });
+  const opening = open && !previous.open;
+  const requestedIndex = opening
+    ? initialIndex
+    : "index" in active
+      ? active.index
+      : undefined;
+  let activeIndex: number;
+  if (requestedIndex !== undefined) {
+    // -1 is the hook's explicit no-highlight sentinel. Other invalid seeds
+    // (including disabled options) fall back to the first enabled choice.
+    activeIndex =
+      requestedIndex < 0
+        ? -1
+        : options[requestedIndex] && !options[requestedIndex].disabled
+          ? requestedIndex
+          : firstEnabled;
+  } else {
+    const value = "value" in active ? active.value : null;
+    activeIndex = options.findIndex((o) => o.value === value && !o.disabled);
+    if (activeIndex < 0 && (value !== null || !previous.hasEnabled)) {
+      activeIndex = firstEnabled;
+    }
+  }
+  const activeValue = options[activeIndex]?.value ?? null;
+  if (previous.open !== open || previous.hasEnabled !== hasEnabled) {
+    setPrevious({ open, hasEnabled });
   }
+  if (!("value" in active) || active.value !== activeValue) {
+    // Remember the fallback too: removing and later reintroducing an option
+    // must not resurrect a highlight the user has already moved away from.
+    setActive({ value: activeValue });
+  }
+  const setActiveIndex = useCallback((index: number) => {
+    setActive({ index });
+  }, []);
 
   const buffer = useRef("");
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -302,7 +323,9 @@ export function useListboxKeys({
       if (key === "ArrowDown" || key === "ArrowUp") {
         e.preventDefault();
         e.stopPropagation();
-        setActiveIndex((i) => step(options, i, key === "ArrowDown" ? 1 : -1));
+        setActiveIndex(
+          step(options, activeIndex, key === "ArrowDown" ? 1 : -1),
+        );
         return;
       }
       if (key === "Home" || key === "End") {
@@ -343,21 +366,25 @@ export function useListboxKeys({
         }, TYPEAHEAD_RESET_MS);
         const query = buffer.current;
         const hit = options.findIndex(
-          (o) =>
-            !o.disabled && labelText(o.label).toLowerCase().startsWith(query),
+          (o) => !o.disabled && optionText(o).toLowerCase().startsWith(query),
         );
         if (hit >= 0) setActiveIndex(hit);
       }
     },
-    [open, options, activeIndex, onOpen, onCommit, onClose],
+    [open, options, activeIndex, onOpen, onCommit, onClose, setActiveIndex],
   );
 
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    // Each open/close boundary starts a new query, even within 500ms.
+    buffer.current = "";
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+    return () => {
+      buffer.current = "";
       if (timer.current) clearTimeout(timer.current);
-    },
-    [],
-  );
+      timer.current = null;
+    };
+  }, [open]);
 
   return { activeIndex, setActiveIndex, onKeyDown };
 }
diff --git a/packages/react/src/components/select.tsx b/packages/react/src/components/select.tsx
index 0e538f13b..b9fce93cd 100644
--- a/packages/react/src/components/select.tsx
+++ b/packages/react/src/components/select.tsx
@@ -7,10 +7,9 @@
  * span) and `data-pretable-listbox` / `data-pretable-option` (list), and a
  * site's own attribute still arrives on the trigger through the spread.
  *
- * `data-pretable-value` is written for one reason: a button has no `.value`,
- * and every test that used to read one reads this instead. It is the ONE
- * COMMITTED value — deliberately not the name the options wear, which is
- * `data-pretable-option-value` and says which option an element IS.
+ * `data-pretable-value` exposes the committed option value independently of
+ * the native button's `.value`. Options use `data-pretable-option-value` to
+ * identify themselves; the trigger carries only the committed selection.
  */
 import {
   createElement,
@@ -26,9 +25,12 @@ import {
   type ReactNode,
 } from "react";
 
+import { observeAnchor } from "../overlay/observe-anchor";
+import { useOverlayContainer } from "../overlay/portal-context";
 import { warnOnce } from "../dev-warn";
 import { ChevronDownIcon } from "../icons";
 import type { PretableSite } from "./button";
+import { useComposedRefs } from "./compose-refs";
 import {
   EMPTY_RECT,
   firstEnabledIndex,
@@ -45,14 +47,25 @@ import {
  *
  * @public
  */
-export interface PretableSelectOption {
-  /** The string handed back to `onChange` and written to `data-pretable-value`. */
+export type PretableSelectOption = {
+  /** Stable unique identity, passed to `onChange` and `data-pretable-value`. */
   readonly value: string;
-  /** What the option shows, and what the trigger shows once it is chosen. */
-  readonly label: ReactNode;
   /** Shown, skipped by the keyboard, inert to click. */
   readonly disabled?: boolean;
-}
+} & (
+  | {
+      /** What the option and selected trigger show. */
+      readonly label: string | number;
+      /** Optional typeahead text; otherwise inferred from the label. */
+      readonly textValue?: string;
+    }
+  | {
+      /** Rich content shown in the option and selected trigger. */
+      readonly label: Exclude<ReactNode, string | number>;
+      /** Required typeahead text for a non-primitive label. */
+      readonly textValue: string;
+    }
+);
 
 /**
  * Type identity, not two-way assignability: an OPTIONAL field added to one
@@ -124,7 +137,6 @@ export const PretableSelect = forwardRef<
     disabled,
     onClick,
     onKeyDown,
-    onPointerDown,
     ...buttonProps
   },
   ref,
@@ -140,23 +152,16 @@ export const PretableSelect = forwardRef<
 
   const listId = useId();
   const triggerRef = useRef<HTMLButtonElement>(null);
-  // A merged callback ref: the component needs the node (to measure and to
-  // restore focus) and the consumer still gets whichever ref form it passed.
-  const setTriggerRef = useCallback(
-    (node: HTMLButtonElement | null) => {
-      triggerRef.current = node;
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
-    },
-    [ref],
-  );
+  const setTriggerRef = useComposedRefs(triggerRef, ref);
   const [open, setOpen] = useState(false);
+  const container = useOverlayContainer();
+  const visible = open && container !== null;
   const [rect, setRect] = useState<DOMRect>(EMPTY_RECT);
 
-  // Disabled mid-open: nothing else can close the list, and a disabled button
-  // receives no keydown, so Escape goes with it. Adjusting state during
-  // render, the React-sanctioned form.
-  if (disabled && open) setOpen(false);
+  // Close synchronously if the trigger becomes disabled or its roster empties:
+  // a disabled button cannot dismiss with Escape, and an empty Listbox has no
+  // DOM target for the trigger's ARIA references.
+  if (open && (disabled || options.length === 0)) setOpen(false);
 
   const selectedIndex = options.findIndex((o) => o.value === value);
   const selected = options[selectedIndex];
@@ -179,6 +184,18 @@ export const PretableSelect = forwardRef<
     },
     [value, onChange, close],
   );
+  const measure = useCallback(() => {
+    const next = triggerRef.current?.getBoundingClientRect();
+    if (!next) return;
+    setRect((previous) =>
+      previous.left === next.left &&
+      previous.top === next.top &&
+      previous.width === next.width &&
+      previous.height === next.height
+        ? previous
+        : next,
+    );
+  }, []);
   const openList = useCallback(() => {
     if (disabled) return;
     // Nothing to choose. Opening on an empty roster would leave the trigger
@@ -187,37 +204,37 @@ export const PretableSelect = forwardRef<
     // no list. The keyboard path lands here too: `useListboxKeys` opens a
     // closed trigger through `onOpen`, which is this.
     if (options.length === 0) return;
-    if (triggerRef.current) setRect(triggerRef.current.getBoundingClientRect());
+    measure();
     setOpen(true);
-  }, [disabled, options.length]);
+  }, [disabled, options.length, measure]);
 
   const keys = useListboxKeys({
     options,
     open,
     initialIndex:
-      selectedIndex >= 0 ? selectedIndex : firstEnabledIndex(options),
+      selectedIndex >= 0 && !selected?.disabled
+        ? selectedIndex
+        : firstEnabledIndex(options),
     onOpen: openList,
     onCommit: commit,
     onClose: close,
   });
 
-  // The list is `position: fixed` in a portal: re-anchor when anything
-  // scrolls or resizes while it is open (capture catches the grid's own
-  // scrollers, which do not bubble).
+  // React layout changes and delayed portal attachment can move the trigger
+  // without a scroll/resize event. Equal bounds retain state, so measuring
+  // after each visible render cannot create a render loop.
   useLayoutEffect(() => {
-    if (!open) return;
-    const measure = () => {
-      if (triggerRef.current) {
-        setRect(triggerRef.current.getBoundingClientRect());
-      }
-    };
-    window.addEventListener("scroll", measure, true);
-    window.addEventListener("resize", measure);
-    return () => {
-      window.removeEventListener("scroll", measure, true);
-      window.removeEventListener("resize", measure);
-    };
-  }, [open]);
+    if (visible) measure();
+  });
+
+  // While visible, also follow CSS changes made outside React. Observe only
+  // the trigger's ancestor chain, rather than polling or watching the entire
+  // document subtree; scope direction, classes and tokens can all move it.
+  useLayoutEffect(() => {
+    const trigger = triggerRef.current;
+    if (!visible || !trigger) return;
+    return observeAnchor(trigger, measure);
+  }, [visible, measure]);
 
   return (
     <>
@@ -236,10 +253,10 @@ export const PretableSelect = forwardRef<
         role="combobox"
         aria-label={ariaLabel}
         aria-haspopup="listbox"
-        aria-expanded={open}
-        aria-controls={open ? listId : undefined}
+        aria-expanded={visible}
+        aria-controls={visible ? listId : undefined}
         aria-activedescendant={
-          open && keys.activeIndex >= 0
+          visible && keys.activeIndex >= 0
             ? listboxOptionId(listId, keys.activeIndex)
             : undefined
         }
@@ -247,13 +264,6 @@ export const PretableSelect = forwardRef<
         data-pretable-select=""
         data-pretable-site={site}
         data-pretable-value={value}
-        onPointerDown={(e) => {
-          onPointerDown?.(e);
-          // The toggling-anchor contract (see listbox.tsx): the document's
-          // outside-press listener must not see this press, or it closes the
-          // list that the click then reopens.
-          e.stopPropagation();
-        }}
         onClick={(e) => {
           onClick?.(e);
           if (e.defaultPrevented) return;
@@ -281,6 +291,7 @@ export const PretableSelect = forwardRef<
           anchor={rect}
           onSelect={commit}
           onClose={closeFromOutside}
+          trigger={triggerRef}
         />
       ) : null}
     </>
diff --git a/packages/react/src/components/text-input.tsx b/packages/react/src/components/text-input.tsx
index 20a3ac8f1..cb3566934 100644
--- a/packages/react/src/components/text-input.tsx
+++ b/packages/react/src/components/text-input.tsx
@@ -7,10 +7,8 @@
  * needs from this control is only the box, which `@pretable/ui`'s grid.css
  * draws through `data-pretable-text-input`.
  *
- * So there is no wrapper element, no clear button and no debounce here: the
- * three chrome fields that use it — the filter value, the filter row's value
- * and the tool panel's search — each own their own value semantics, and a
- * component that owned them for all three would be wrong for two.
+ * Chrome fields and cell editors own their value and commit semantics.
+ * This control adds no wrapper, clear button, or debounce.
  *
  * A site's own attribute (`data-pretable-filter-value`) still arrives through
  * the spread, so nothing that identified a field before this component stops
@@ -20,7 +18,6 @@
 import {
   createElement,
   forwardRef,
-  useCallback,
   useEffect,
   useRef,
   type InputHTMLAttributes,
@@ -30,6 +27,7 @@ import {
 import { warnOnce } from "../dev-warn";
 import { hasAccessibleName } from "./accessible-name";
 import type { PretableSite } from "./button";
+import { useComposedRefs } from "./compose-refs";
 
 /**
  * Props for {@link PretableTextInput}: the native input's, plus `site`.
@@ -52,7 +50,7 @@ export interface PretableTextInputProps extends Omit<
 }
 
 /**
- * A text field in the grid's own chrome.
+ * A native text field for grid chrome and cell editors.
  *
  * `type`, `inputMode`, `value`, `onChange`, `className`, `style` and every
  * other input attribute pass straight through — this is the native element,
@@ -79,20 +77,7 @@ export const PretableTextInput = forwardRef<
   PretableTextInputProps
 >(function PretableTextInput({ site, ...inputProps }, ref): ReactElement {
   const ownRef = useRef<HTMLInputElement>(null);
-  // One node, two readers: the component's own name check and the consumer's
-  // ref. A merged callback ref, as in `PretableCheckbox` — writing `ref`
-  // straight onto the input would leave the check with nothing to read.
-  const setRef = useCallback(
-    (node: HTMLInputElement | null) => {
-      ownRef.current = node;
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    },
-    [ref],
-  );
+  const setRef = useComposedRefs(ownRef, ref);
 
   // A <label for> names it and props cannot see one: check the DOM once,
   // after mount.
diff --git a/packages/react/src/components/textarea.tsx b/packages/react/src/components/textarea.tsx
new file mode 100644
index 000000000..ff271f711
--- /dev/null
+++ b/packages/react/src/components/textarea.tsx
@@ -0,0 +1,67 @@
+import {
+  createElement,
+  forwardRef,
+  useEffect,
+  useRef,
+  type TextareaHTMLAttributes,
+  type ReactElement,
+} from "react";
+
+import { warnOnce } from "../dev-warn";
+import { hasAccessibleName } from "./accessible-name";
+import type { PretableSite } from "./button";
+import { useComposedRefs } from "./compose-refs";
+
+/** Native textarea attributes plus a kit site.
+ * @public
+ */
+export interface PretableTextareaProps extends Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "children"
+> {
+  /**
+   * Where in the grid this field is; lands as `data-pretable-site`. A
+   * replacement passed through `components` receives it and can branch on it.
+   * Named `site`, not `role`: `role` is the ARIA attribute on every element.
+   * The contract attributes are written after the spread, so a
+   * `data-pretable-site` passed as a raw attribute is replaced by this
+   * prop's value, or removed when the prop is absent.
+   */
+  site?: PretableSite;
+}
+
+/** A native multiline field. Value, events, sizing, and refs pass through.
+ * Warns once when its mounted DOM has no recognized accessible-name source.
+ * @public
+ */
+export const PretableTextarea = forwardRef<
+  HTMLTextAreaElement,
+  PretableTextareaProps
+>(function PretableTextarea({ site, ...textareaProps }, ref): ReactElement {
+  const ownRef = useRef<HTMLTextAreaElement>(null);
+  const setRef = useComposedRefs(ownRef, ref);
+
+  // A <label for> names it and props cannot see one: check the DOM once,
+  // after mount.
+  useEffect(() => {
+    const el = ownRef.current;
+    if (el && !hasAccessibleName(el)) {
+      warnOnce(
+        "textarea-empty-name",
+        "[pretable] <PretableTextarea> rendered with no accessible name. " +
+          "An unnamed field reads as a bare edit box to a screen reader. " +
+          "Give it an aria-label, an aria-labelledby, or a <label for> its " +
+          "id.",
+      );
+    }
+  }, []);
+
+  return (
+    <textarea
+      {...textareaProps}
+      ref={setRef}
+      data-pretable-textarea=""
+      data-pretable-site={site}
+    />
+  );
+});
diff --git a/packages/react/src/editors/DateCellEditor.tsx b/packages/react/src/editors/DateCellEditor.tsx
index fc2717d90..40836f290 100644
--- a/packages/react/src/editors/DateCellEditor.tsx
+++ b/packages/react/src/editors/DateCellEditor.tsx
@@ -1,4 +1,5 @@
-import { createElement, useId, useLayoutEffect, useRef, useState } from "react";
+import { usePretableComponents } from "../components/context";
+import { createElement, useId, useState } from "react";
 
 import type { PretableFocusDirection } from "@pretable/core";
 import {
@@ -7,12 +8,16 @@ import {
   addDateValueDays,
   addDateValueMonths,
   isValidDateValue,
+  dateValueToUtcMs,
 } from "@pretable-internal/calendar-date";
 
+import { useOverlayContainer } from "../overlay/portal-context";
 import { OverlayPortal } from "../overlay/OverlayPortal";
 import { popoverStyle } from "../overlay/popover-position";
 import type { PretableEditorInput } from "../types";
 import { monthLabel, monthMatrix, todayIso } from "./date-utils";
+import { editorCommitDirection } from "./editor-keyboard";
+import { useEditorAnchor } from "./use-editor-anchor";
 import { useEditorField } from "./use-editor-field";
 
 const WEEKDAYS = [
@@ -26,6 +31,7 @@ const WEEKDAYS = [
 ] as const;
 
 interface DateEditorState {
+  readonly navigating: boolean;
   readonly observedDraft: unknown;
   readonly cursor: string;
   readonly selected: string | null;
@@ -39,6 +45,7 @@ const initialState = (
 ): DateEditorState => {
   const canonical = isValidDateValue(draft) ? draft : null;
   return {
+    navigating: false,
     observedDraft: draft,
     cursor: canonical ?? todayIso(),
     selected: canonical,
@@ -48,10 +55,12 @@ const initialState = (
 };
 
 export function DateCellEditor({ input }: { input: PretableEditorInput }) {
-  const { ref, pending, fieldProps } = useEditorField<HTMLInputElement>(input);
+  const { TextInput, IconButton } = usePretableComponents();
+  const { attachRef, pending, fieldProps, isComposing } =
+    useEditorField<HTMLInputElement>(input);
   const gridId = useId();
-  const anchorRef = useRef<HTMLSpanElement>(null);
-  const [rect, setRect] = useState<DOMRect | null>(null);
+  const overlayReady = useOverlayContainer() !== null;
+  const { anchorRef, rect } = useEditorAnchor(overlayReady);
   const [storedState, setStoredState] = useState<DateEditorState>(() =>
     initialState(input.draft, input.seededFromTyping ?? false),
   );
@@ -62,6 +71,7 @@ export function DateCellEditor({ input }: { input: PretableEditorInput }) {
     const reflectsUserWrite =
       state.userModified && Object.is(state.userDraft, input.draft);
     state = {
+      navigating: reflectsUserWrite && state.navigating,
       observedDraft: input.draft,
       cursor: canonical ?? state.cursor,
       selected: canonical,
@@ -71,29 +81,18 @@ export function DateCellEditor({ input }: { input: PretableEditorInput }) {
     setStoredState(state);
   }
 
-  useLayoutEffect(() => {
-    const measure = () => {
-      if (anchorRef.current) setRect(anchorRef.current.getBoundingClientRect());
-    };
-    measure();
-    window.addEventListener("scroll", measure, true);
-    window.addEventListener("resize", measure);
-    return () => {
-      window.removeEventListener("scroll", measure, true);
-      window.removeEventListener("resize", measure);
-    };
-  }, []);
-
   const text = String(input.draft ?? "");
   const active = state.cursor;
   const weeks = monthMatrix(active);
   const today = todayIso();
   const previousMonthDisabled =
-    active.slice(0, 7) === MIN_DATE_VALUE.slice(0, 7);
-  const nextMonthDisabled = active.slice(0, 7) === MAX_DATE_VALUE.slice(0, 7);
+    pending || active.slice(0, 7) === MIN_DATE_VALUE.slice(0, 7);
+  const nextMonthDisabled =
+    pending || active.slice(0, 7) === MAX_DATE_VALUE.slice(0, 7);
 
   const writeUserDraft = (next: string, selected: string | null) => {
     setStoredState({
+      navigating: true,
       observedDraft: input.draft,
       cursor: selected ?? state.cursor,
       selected,
@@ -111,8 +110,8 @@ export function DateCellEditor({ input }: { input: PretableEditorInput }) {
   };
 
   const move = (next: string) => {
-    if (pending || next === state.cursor) return;
-    writeUserDraft(next, next);
+    if (pending) return;
+    setStoredState({ ...state, cursor: next, navigating: true });
   };
 
   const blur = () => {
@@ -126,7 +125,7 @@ export function DateCellEditor({ input }: { input: PretableEditorInput }) {
     }
     if (
       input.column.parseEditValue ||
-      state.userDraft === "" ||
+      (typeof state.userDraft === "string" && state.userDraft.trim() === "") ||
       isValidDateValue(state.userDraft)
     ) {
       input.commit();
@@ -137,18 +136,24 @@ export function DateCellEditor({ input }: { input: PretableEditorInput }) {
 
   return (
     <span ref={anchorRef} data-pretable-date-editor="">
-      <input
-        ref={ref}
+      <TextInput
+        site="cell-editor"
+        ref={attachRef}
         className="pretable-cell-editor"
+        role="combobox"
+        aria-haspopup="grid"
+        aria-expanded={overlayReady}
         inputMode="numeric"
         placeholder="YYYY-MM-DD"
-        aria-controls={gridId}
-        aria-activedescendant={`${gridId}-${active}`}
+        aria-controls={overlayReady ? gridId : undefined}
+        aria-activedescendant={overlayReady ? `${gridId}-${active}` : undefined}
         value={text}
         onChange={(event) => {
+          if (pending) return;
           const next = event.target.value;
           const canonical = isValidDateValue(next) ? next : null;
           setStoredState({
+            navigating: false,
             observedDraft: input.draft,
             cursor: canonical ?? state.cursor,
             selected: canonical,
@@ -160,6 +165,12 @@ export function DateCellEditor({ input }: { input: PretableEditorInput }) {
         {...fieldProps}
         onBlur={blur}
         onKeyDown={(event) => {
+          if (isComposing(event)) return;
+          if (
+            !state.navigating &&
+            ["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)
+          )
+            return;
           const step =
             event.key === "ArrowLeft"
               ? -1
@@ -182,10 +193,23 @@ export function DateCellEditor({ input }: { input: PretableEditorInput }) {
             move(addDateValueMonths(active, event.key === "PageDown" ? 1 : -1));
             return;
           }
-          if (event.key === "Enter" && state.selected !== null) {
+          if (
+            state.navigating &&
+            (event.key === "Home" || event.key === "End")
+          ) {
             event.preventDefault();
             event.stopPropagation();
-            choose(state.selected, "down");
+            const day =
+              (new Date(dateValueToUtcMs(active)).getUTCDay() + 6) % 7;
+            move(
+              addDateValueDays(active, event.key === "Home" ? -day : 6 - day),
+            );
+            return;
+          }
+          if (event.key === "Enter" && state.navigating) {
+            event.preventDefault();
+            event.stopPropagation();
+            choose(active, editorCommitDirection(event));
             return;
           }
           fieldProps.onKeyDown(event);
@@ -194,29 +218,31 @@ export function DateCellEditor({ input }: { input: PretableEditorInput }) {
       <OverlayPortal>
         <div
           data-pretable-date-popover=""
-          style={rect ? popoverStyle(rect) : undefined}
+          style={popoverStyle(rect)}
           onMouseDown={(event) => event.preventDefault()}
         >
           <div data-pretable-date-header="">
-            <button
-              type="button"
+            <IconButton
               tabIndex={-1}
               aria-label="Previous month"
+              site="date-previous-month"
+              data-pretable-date-previous-month=""
               disabled={previousMonthDisabled}
               onClick={() => move(addDateValueMonths(active, -1))}
             >
               ‹
-            </button>
+            </IconButton>
             <span>{monthLabel(active)}</span>
-            <button
-              type="button"
+            <IconButton
               tabIndex={-1}
               aria-label="Next month"
+              site="date-next-month"
+              data-pretable-date-next-month=""
               disabled={nextMonthDisabled}
               onClick={() => move(addDateValueMonths(active, 1))}
             >
               ›
-            </button>
+            </IconButton>
           </div>
           <div id={gridId} role="grid" aria-label={monthLabel(active)}>
             <div role="row" data-pretable-date-weekdays="">
@@ -244,8 +270,11 @@ export function DateCellEditor({ input }: { input: PretableEditorInput }) {
                           ? undefined
                           : day.iso === state.selected
                       }
-                      aria-disabled={day.disabled || undefined}
+                      aria-disabled={pending || day.disabled || undefined}
                       data-pretable-date-day=""
+                      data-pretable-date-active={
+                        day.iso === active ? "" : undefined
+                      }
                       data-pretable-date-outside={day.inMonth ? undefined : ""}
                       data-pretable-date-today={
                         day.iso === today ? "" : undefined
diff --git a/packages/react/src/editors/EnumCellEditor.tsx b/packages/react/src/editors/EnumCellEditor.tsx
index ca15b3bf2..64dffd9bc 100644
--- a/packages/react/src/editors/EnumCellEditor.tsx
+++ b/packages/react/src/editors/EnumCellEditor.tsx
@@ -1,230 +1,160 @@
-import {
-  createElement,
-  useId,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
+import { usePretableComponents } from "../components/context";
+import { createElement, useId, useMemo, useState } from "react";
 import type { ColumnOption, PretableFocusDirection } from "@pretable/core";
-
 import {
-  EMPTY_RECT,
   Listbox,
   listboxOptionId,
   useListboxKeys,
 } from "../components/listbox";
+import { useOverlayContainer } from "../overlay/portal-context";
 import type { PretableEditorInput } from "../types";
 import { filterOptions, matchOption, optionLabel } from "./enum-options";
+import { enumChoice, enumDraftText, isEnumChoice } from "./enum-draft";
+import { editorCommitDirection } from "./editor-keyboard";
 import { useEditorField } from "./use-editor-field";
+import { useEditorAnchor } from "./use-editor-anchor";
 
-/**
- * What the list shows: every option until the user has typed, the filtered
- * set after. One function because the mount seed and every render must agree
- * on it — a seed clamped against a different list than the one drawn puts the
- * highlight on the wrong row.
- */
-function shownFor(
-  options: readonly ColumnOption[],
-  dirty: boolean,
-  text: string,
-): readonly ColumnOption[] {
-  return dirty ? filterOptions(options, text) : options;
-}
-
-/**
- * The inert handlers. The list is always open — the field and its list mount
- * and unmount together — so nothing here opens or closes it; the outside
- * press that would close a select is answered by the input's own strict blur.
- * Module-level so the list's outside-press listener is not re-subscribed on
- * every keystroke (it is keyed on `onClose`).
- */
 const NOOP = () => {};
 
-/**
- * Strict enum combobox: the engine draft holds the input text, and commit maps
- * it to an option value (`parseDraftForType`). Free text that matches nothing
- * is rejected — `renderEditor` is the escape hatch for creatable comboboxes.
- *
- * The list and the arrow keys are the kit's `Listbox`/`useListboxKeys`; what
- * stays here is what makes this editor an editable combobox rather than a
- * select — the filtering input, the direction-aware commit, and the strict
- * blur that reverts unmatched text.
- */
+/** Editable query and intentional choice use separate channels; labels never encode identity. */
 export function EnumCellEditor({ input }: { input: PretableEditorInput }) {
-  const { ref, pending, fieldProps } = useEditorField<HTMLInputElement>(input);
+  const { TextInput } = usePretableComponents();
+  const { ref, attachRef, pending, fieldProps, isComposing } =
+    useEditorField<HTMLInputElement>(input);
   const options = useMemo(
     () => input.column.options ?? [],
     [input.column.options],
   );
   const listId = useId();
-  const anchorRef = useRef<HTMLSpanElement>(null);
-  const [rect, setRect] = useState<DOMRect | null>(null);
-  // The mount state, computed once and together because the highlight's seed
-  // depends on whether the list starts filtered.
-  //
-  // `dirty`: until the user types, show every option — the seeded text is the
-  // current value and would otherwise filter the list down to one. A seed
-  // matching nothing is a type-to-replace character, so filter right away.
-  //
-  // `index`: the current value's row, clamped against the list actually
-  // shown, because that row indexes the FULL option list. The hook owns the
-  // arrow arithmetic and steps from its own state, so the clamp lives in the
-  // seed instead of at each keypress, or the first press from a filtered
-  // mount skips a row.
-  const [initial] = useState(() => {
-    const seeded = String(input.draft ?? "");
-    const match = matchOption(options, seeded);
-    const shown = shownFor(options, !match, seeded);
-    const i = options.findIndex((o) => o.value === String(input.value ?? ""));
-    const raw = i >= 0 ? i : 0;
-    return { dirty: !match, index: raw < shown.length ? raw : 0 };
-  });
-  const [dirty, setDirty] = useState(initial.dirty);
-
-  useLayoutEffect(() => {
-    const measure = () => {
-      if (anchorRef.current) setRect(anchorRef.current.getBoundingClientRect());
-    };
-    measure();
-    // The listbox is portaled and `position: fixed`, so it detaches visually
-    // when anything scrolls. Capture phase catches grid-internal scrollers,
-    // which don't bubble.
-    window.addEventListener("scroll", measure, true);
-    window.addEventListener("resize", measure);
-    return () => {
-      window.removeEventListener("scroll", measure, true);
-      window.removeEventListener("resize", measure);
-    };
-  }, []);
-
-  // The controller seeds the draft with the raw cell value; show the option's
-  // label instead so the field reads the way the cell does. One-shot: it only
-  // fires when the seed matches an option whose label differs.
-  useLayoutEffect(() => {
-    const seeded = String(input.draft ?? "");
-    const match = matchOption(options, seeded);
-    if (match && optionLabel(match) !== seeded)
-      input.setDraft(optionLabel(match));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const text = String(input.draft ?? "");
+  const overlayReady = useOverlayContainer() !== null;
+  const { anchorRef, rect } = useEditorAnchor(overlayReady);
+  const [dirty, setDirty] = useState(
+    () =>
+      input.seededFromTyping ??
+      (!Object.is(input.draft, input.value) &&
+        !matchOption(options, enumDraftText(input.draft))),
+  );
+  const [navigated, setNavigated] = useState(false);
+  const chosenValue = isEnumChoice(input.draft)
+    ? input.draft.value
+    : !dirty &&
+        input.value !== null &&
+        input.value !== undefined &&
+        input.value !== ""
+      ? String(input.value)
+      : null;
+  const chosen = options.find((option) => option.value === chosenValue);
+  const text = chosen ? optionLabel(chosen) : enumDraftText(input.draft);
   const visible = useMemo(
-    () => shownFor(options, dirty, text),
+    () => (dirty ? filterOptions(options, text) : options),
     [options, dirty, text],
   );
   const listOptions = useMemo(
-    () => visible.map((o) => ({ value: o.value, label: optionLabel(o) })),
+    () =>
+      visible.map((option) => ({
+        value: option.value,
+        label: optionLabel(option),
+      })),
     [visible],
   );
-
+  const seed = Math.max(
+    0,
+    visible.findIndex((option) => option.value === chosenValue),
+  );
   const choose = (
     option: ColumnOption | undefined,
     direction?: PretableFocusDirection,
   ) => {
     if (!option || pending) return;
-    // setDraft mutates engine state synchronously, so the commit that follows
-    // reads the option we just wrote.
-    input.setDraft(optionLabel(option));
-    // No direction = commit in place (a click); don't pass an explicit
-    // undefined, so the call matches the shared chrome's `commit()`.
+    setDirty(false);
+    setNavigated(false);
+    keys.setActiveIndex(
+      options.findIndex((entry) => entry.value === option.value),
+    );
+    input.setDraft(enumChoice(option.value));
     if (direction) input.commit(direction);
     else input.commit();
   };
-
   const keys = useListboxKeys({
     options: listOptions,
-    // Always open: the field and its list mount and unmount together.
     open: true,
-    // Read once, on mount: the hook re-seeds the highlight on an open EDGE,
-    // and this list is always open.
-    initialIndex: initial.index,
+    initialIndex: seed,
     onOpen: NOOP,
-    onCommit: (value) =>
-      choose(
-        visible.find((o) => o.value === value),
-        "down",
-      ),
+    onCommit: NOOP,
     onClose: NOOP,
   });
-
-  // Belt and braces: the seed is already clamped and typing resets the
-  // highlight to 0, but a render must never point at an option that is not
-  // there.
-  const index = Math.min(
-    Math.max(keys.activeIndex, 0),
-    Math.max(visible.length - 1, 0),
-  );
-  const active = visible[index];
-
+  const active = visible[keys.activeIndex];
+  const commitCurrent = (direction?: PretableFocusDirection) => {
+    if (pending) return;
+    if (chosenValue !== null) input.setDraft(enumChoice(chosenValue));
+    if (direction) input.commit(direction);
+    else input.commit();
+  };
   return (
     <span ref={anchorRef} data-pretable-enum-editor="">
-      <input
-        ref={ref}
+      <TextInput
+        site="cell-editor"
+        ref={attachRef}
         className="pretable-cell-editor"
         role="combobox"
-        aria-expanded
-        aria-controls={listId}
+        aria-expanded={overlayReady && visible.length > 0}
+        aria-controls={overlayReady && visible.length > 0 ? listId : undefined}
         aria-autocomplete="list"
         aria-activedescendant={
-          active ? listboxOptionId(listId, index) : undefined
+          overlayReady && active
+            ? listboxOptionId(listId, keys.activeIndex)
+            : undefined
         }
         value={text}
-        onChange={(e) => {
+        onChange={(event) => {
+          if (pending) return;
           setDirty(true);
+          setNavigated(false);
           keys.setActiveIndex(0);
-          input.setDraft(e.target.value);
+          input.setDraft(event.target.value);
         }}
         {...fieldProps}
         onBlur={() => {
-          // Strict: clicking away with unmatched text reverts rather than
-          // leaving a rejected edit stuck open on the cell.
-          if (input.status !== "editing") return;
-          if (matchOption(options, text)) input.commit();
-          else input.cancel();
+          if (input.status === "editing") {
+            if (navigated && active) choose(active);
+            else commitCurrent();
+          }
         }}
-        onKeyDown={(e) => {
-          // Only the arrows go to the kit's keyboard; Home/End stay on the
-          // caret (the editable-combobox pattern), printable keys filter —
-          // the hook's typeahead would preventDefault the very characters the
-          // field is there to receive.
-          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-            // Wrap and skip-disabled come from the hook now — the arithmetic
-            // this editor used to spell out itself.
-            keys.onKeyDown(e);
+        onKeyDown={(event) => {
+          if (isComposing(event)) return;
+          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            if (pending) {
+              event.preventDefault();
+              event.stopPropagation();
+            } else {
+              setNavigated(true);
+              keys.onKeyDown(event);
+            }
             return;
           }
-          if ((e.key === "Enter" || e.key === "Tab") && active) {
-            e.preventDefault();
-            e.stopPropagation();
-            // The editor's own commit, not the hook's: it carries a DIRECTION
-            // (Enter moves down, Tab right) that a list has no notion of.
-            choose(active, e.key === "Enter" ? "down" : "right");
+          if (event.key === "Enter" || event.key === "Tab") {
+            event.preventDefault();
+            event.stopPropagation();
+            if (navigated && active)
+              choose(active, editorCommitDirection(event));
+            else commitCurrent(editorCommitDirection(event));
             return;
           }
-          // No highlighted option (or Escape): let the shared chrome commit
-          // the raw text — parseDraftForType rejects it — or cancel.
-          fieldProps.onKeyDown(e);
+          fieldProps.onKeyDown(event);
         }}
       />
       <Listbox
         id={listId}
-        // The cell editors' fixed column, not a menu's content width.
         width="dialog"
         options={listOptions}
-        // For an editable combobox aria-selected follows the HIGHLIGHT (the
-        // APG editable-combobox pattern), so the editor feeds the highlight
-        // in as the value; there is no separately committed value while
-        // editing.
-        value={active ? active.value : null}
-        activeIndex={index}
-        anchor={rect ?? EMPTY_RECT}
-        onSelect={(value) => choose(visible.find((o) => o.value === value))}
-        // Outside press: the strict combobox reverts unmatched text, as its
-        // onBlur does — the blur fires on its own.
+        value={chosen?.value ?? null}
+        activeIndex={keys.activeIndex}
+        anchor={rect}
+        onSelect={(value) =>
+          choose(visible.find((option) => option.value === value))
+        }
         onClose={NOOP}
+        trigger={ref}
       />
     </span>
   );
diff --git a/packages/react/src/editors/MultilineCellEditor.tsx b/packages/react/src/editors/MultilineCellEditor.tsx
index a163fb09c..b48ad56a5 100644
--- a/packages/react/src/editors/MultilineCellEditor.tsx
+++ b/packages/react/src/editors/MultilineCellEditor.tsx
@@ -1,10 +1,13 @@
+import { usePretableComponents } from "../components/context";
 import { createElement, useLayoutEffect } from "react";
 
 import type { PretableEditorInput } from "../types";
 import { useEditorField } from "./use-editor-field";
 
 export function MultilineCellEditor({ input }: { input: PretableEditorInput }) {
-  const { ref, fieldProps } = useEditorField<HTMLTextAreaElement>(input);
+  const { Textarea } = usePretableComponents();
+  const { ref, attachRef, pending, fieldProps, isComposing } =
+    useEditorField<HTMLTextAreaElement>(input);
 
   // Auto-grow with the draft; the skin caps growth via max-height.
   useLayoutEffect(() => {
@@ -12,29 +15,27 @@ export function MultilineCellEditor({ input }: { input: PretableEditorInput }) {
     if (!el) return;
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
-  }, [ref, input.draft]);
+  });
 
   return (
-    <textarea
-      ref={ref}
+    <Textarea
+      site="cell-editor"
+      ref={attachRef}
       className="pretable-cell-editor"
       data-pretable-multiline-editor=""
       rows={1}
       value={String(input.draft ?? "")}
-      onChange={(e) => input.setDraft(e.target.value)}
+      onChange={(e) => {
+        if (!pending) input.setDraft(e.target.value);
+      }}
       {...fieldProps}
       onKeyDown={(e) => {
+        if (isComposing(e)) return;
         if (e.key === "Enter" && !(e.metaKey || e.ctrlKey)) {
           // Plain Enter = newline: keep the default, stop the grid handler.
           e.stopPropagation();
           return;
         }
-        if (e.key === "Enter") {
-          e.preventDefault();
-          e.stopPropagation();
-          input.commit("down");
-          return;
-        }
         fieldProps.onKeyDown(e);
       }}
     />
diff --git a/packages/react/src/editors/NumberCellEditor.tsx b/packages/react/src/editors/NumberCellEditor.tsx
index 56b4f9959..574cadfc2 100644
--- a/packages/react/src/editors/NumberCellEditor.tsx
+++ b/packages/react/src/editors/NumberCellEditor.tsx
@@ -1,3 +1,4 @@
+import { usePretableComponents } from "../components/context";
 import { createElement } from "react";
 
 import type { PretableEditorInput } from "../types";
@@ -12,7 +13,9 @@ function stepDraft(draft: unknown, step: number, dir: 1 | -1): string {
 }
 
 export function NumberCellEditor({ input }: { input: PretableEditorInput }) {
-  const { ref, pending, fieldProps } = useEditorField<HTMLInputElement>(input);
+  const { TextInput, IconButton } = usePretableComponents();
+  const { attachRef, pending, fieldProps, isComposing } =
+    useEditorField<HTMLInputElement>(input);
   const step = input.column.step ?? 1;
   const bump = (dir: 1 | -1) => {
     if (!pending) input.setDraft(stepDraft(input.draft, step, dir));
@@ -20,14 +23,18 @@ export function NumberCellEditor({ input }: { input: PretableEditorInput }) {
 
   return (
     <span data-pretable-number-editor="">
-      <input
-        ref={ref}
+      <TextInput
+        site="cell-editor"
+        ref={attachRef}
         className="pretable-cell-editor"
         inputMode="decimal"
         value={String(input.draft ?? "")}
-        onChange={(e) => input.setDraft(e.target.value)}
+        onChange={(e) => {
+          if (!pending) input.setDraft(e.target.value);
+        }}
         {...fieldProps}
         onKeyDown={(e) => {
+          if (isComposing(e)) return;
           if (e.key === "ArrowUp" || e.key === "ArrowDown") {
             e.preventDefault();
             e.stopPropagation();
@@ -53,22 +60,26 @@ export function NumberCellEditor({ input }: { input: PretableEditorInput }) {
         data-pretable-number-steppers=""
         onMouseDown={(e) => e.preventDefault()}
       >
-        <button
-          type="button"
+        <IconButton
           tabIndex={-1}
           aria-label="Increment"
+          site="number-increment"
+          data-pretable-number-increment=""
+          disabled={pending}
           onClick={() => bump(1)}
         >
           ▲
-        </button>
-        <button
-          type="button"
+        </IconButton>
+        <IconButton
           tabIndex={-1}
           aria-label="Decrement"
+          site="number-decrement"
+          data-pretable-number-decrement=""
+          disabled={pending}
           onClick={() => bump(-1)}
         >
           ▼
-        </button>
+        </IconButton>
       </span>
     </span>
   );
diff --git a/packages/react/src/editors/TextCellEditor.tsx b/packages/react/src/editors/TextCellEditor.tsx
index 2e2a3e0a0..fd39b89db 100644
--- a/packages/react/src/editors/TextCellEditor.tsx
+++ b/packages/react/src/editors/TextCellEditor.tsx
@@ -1,16 +1,22 @@
+import { usePretableComponents } from "../components/context";
 import { createElement } from "react";
 
 import type { PretableEditorInput } from "../types";
 import { useEditorField } from "./use-editor-field";
 
 export function TextCellEditor({ input }: { input: PretableEditorInput }) {
-  const { ref, fieldProps } = useEditorField<HTMLInputElement>(input);
+  const { TextInput } = usePretableComponents();
+  const { attachRef, pending, fieldProps } =
+    useEditorField<HTMLInputElement>(input);
   return (
-    <input
-      ref={ref}
+    <TextInput
+      site="cell-editor"
+      ref={attachRef}
       className="pretable-cell-editor"
       value={String(input.draft ?? "")}
-      onChange={(e) => input.setDraft(e.target.value)}
+      onChange={(e) => {
+        if (!pending) input.setDraft(e.target.value);
+      }}
       {...fieldProps}
     />
   );
diff --git a/packages/react/src/editors/editor-keyboard.ts b/packages/react/src/editors/editor-keyboard.ts
new file mode 100644
index 000000000..9b32bf322
--- /dev/null
+++ b/packages/react/src/editors/editor-keyboard.ts
@@ -0,0 +1,37 @@
+import {
+  useCallback,
+  useRef,
+  type CompositionEvent,
+  type KeyboardEvent,
+} from "react";
+import type { PretableFocusDirection } from "@pretable/core";
+
+/** Shared command boundary for fields and the surface's edit-entry shortcuts. */
+export function useCompositionGuard() {
+  const target = useRef<EventTarget | null>(null);
+  const onCompositionStart = useCallback((event: CompositionEvent) => {
+    target.current = event.target;
+  }, []);
+  const onCompositionEnd = useCallback(() => {
+    target.current = null;
+  }, []);
+  const isComposing = useCallback(
+    (event: KeyboardEvent) =>
+      event.nativeEvent.isComposing ||
+      event.nativeEvent.keyCode === 229 ||
+      target.current === event.target,
+    [],
+  );
+  return { isComposing, onCompositionStart, onCompositionEnd };
+}
+export function editorCommitDirection(
+  event: Pick<KeyboardEvent, "key" | "shiftKey">,
+): PretableFocusDirection {
+  return event.key === "Tab"
+    ? event.shiftKey
+      ? "left"
+      : "right"
+    : event.shiftKey
+      ? "up"
+      : "down";
+}
diff --git a/packages/react/src/editors/enum-draft.ts b/packages/react/src/editors/enum-draft.ts
new file mode 100644
index 000000000..69dc1e607
--- /dev/null
+++ b/packages/react/src/editors/enum-draft.ts
@@ -0,0 +1,23 @@
+const ENUM_CHOICE = Symbol("pretable.enum-choice");
+
+/** Internal identity channel: only intentional choices bypass text matching. */
+export interface EnumChoiceDraft {
+  readonly [ENUM_CHOICE]: true;
+  readonly value: string;
+}
+export function enumChoice(value: string): EnumChoiceDraft {
+  return { [ENUM_CHOICE]: true, value };
+}
+export function isEnumChoice(draft: unknown): draft is EnumChoiceDraft {
+  return (
+    typeof draft === "object" &&
+    draft !== null &&
+    ENUM_CHOICE in draft &&
+    draft[ENUM_CHOICE] === true &&
+    "value" in draft &&
+    typeof draft.value === "string"
+  );
+}
+export function enumDraftText(draft: unknown): string {
+  return isEnumChoice(draft) ? draft.value : String(draft ?? "");
+}
diff --git a/packages/react/src/editors/enum-options.ts b/packages/react/src/editors/enum-options.ts
index 0a39f478f..8c69d30c4 100644
--- a/packages/react/src/editors/enum-options.ts
+++ b/packages/react/src/editors/enum-options.ts
@@ -6,8 +6,8 @@ export function optionLabel(option: ColumnOption): string {
 }
 
 /**
- * The option a typed string selects: an exact (case-insensitive) label match
- * first, then an exact value match. Blank text selects nothing.
+ * Typed text resolves only when label/value matches identify one distinct
+ * value. Blank or ambiguous text selects nothing.
  */
 export function matchOption(
   options: readonly ColumnOption[],
@@ -15,10 +15,14 @@ export function matchOption(
 ): ColumnOption | undefined {
   const needle = text.trim().toLowerCase();
   if (needle === "") return undefined;
-  return (
-    options.find((o) => optionLabel(o).toLowerCase() === needle) ??
-    options.find((o) => o.value.toLowerCase() === needle)
+  const matches = options.filter(
+    (option) =>
+      optionLabel(option).toLowerCase() === needle ||
+      option.value.toLowerCase() === needle,
   );
+  return new Set(matches.map((option) => option.value)).size === 1
+    ? matches[0]
+    : undefined;
 }
 
 /** Typeahead filter: substring over label and value. Blank text keeps all. */
diff --git a/packages/react/src/editors/type-parsing.ts b/packages/react/src/editors/type-parsing.ts
index 2c142e700..0a32c1893 100644
--- a/packages/react/src/editors/type-parsing.ts
+++ b/packages/react/src/editors/type-parsing.ts
@@ -1,6 +1,7 @@
 import type { ColumnOption, ColumnType } from "@pretable/core";
 import { isValidDateValue } from "@pretable-internal/calendar-date";
 
+import { isEnumChoice } from "./enum-draft";
 import { matchOption } from "./enum-options";
 
 export type DraftParseResult =
@@ -25,6 +26,11 @@ export function parseDraftForType(
     }
     case "enum": {
       const options = column.options ?? [];
+      if (isEnumChoice(draft)) {
+        return options.some((option) => option.value === draft.value)
+          ? { ok: true, value: draft.value }
+          : { ok: false, message: "Pick an option" };
+      }
       // An enum column without options behaves as a plain text column.
       if (options.length === 0) return { ok: true, value: draft };
       const raw = String(draft ?? "").trim();
diff --git a/packages/react/src/editors/use-editor-anchor.ts b/packages/react/src/editors/use-editor-anchor.ts
new file mode 100644
index 000000000..7cc6abf6c
--- /dev/null
+++ b/packages/react/src/editors/use-editor-anchor.ts
@@ -0,0 +1,29 @@
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { EMPTY_RECT } from "../components/listbox";
+import { observeAnchor } from "../overlay/observe-anchor";
+
+/** Editor popup coordinates follow rendered layout and live ancestor scope changes. */
+export function useEditorAnchor(visible: boolean) {
+  const anchorRef = useRef<HTMLSpanElement>(null);
+  const [rect, setRect] = useState<DOMRect>(EMPTY_RECT);
+  const measure = useCallback(() => {
+    const next = anchorRef.current?.getBoundingClientRect();
+    if (next)
+      setRect((previous) =>
+        previous.left === next.left &&
+        previous.top === next.top &&
+        previous.width === next.width &&
+        previous.height === next.height
+          ? previous
+          : next,
+      );
+  }, []);
+  useLayoutEffect(() => {
+    if (visible) measure();
+  });
+  useLayoutEffect(() => {
+    if (!visible || !anchorRef.current) return;
+    return observeAnchor(anchorRef.current, measure);
+  }, [visible, measure]);
+  return { anchorRef, rect };
+}
diff --git a/packages/react/src/editors/use-editor-field.ts b/packages/react/src/editors/use-editor-field.ts
index 075ce653a..99526b08c 100644
--- a/packages/react/src/editors/use-editor-field.ts
+++ b/packages/react/src/editors/use-editor-field.ts
@@ -1,5 +1,6 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useRef } from "react";
 
+import { editorCommitDirection, useCompositionGuard } from "./editor-keyboard";
 import type { PretableEditorInput } from "../types";
 
 const PENDING_STATUSES: ReadonlySet<string> = new Set([
@@ -17,31 +18,38 @@ const PENDING_STATUSES: ReadonlySet<string> = new Set([
 export function useEditorField<
   E extends HTMLInputElement | HTMLTextAreaElement,
 >(input: PretableEditorInput) {
-  const ref = useRef<E>(null);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    el.focus();
-    if (input.seededFromTyping) {
-      // The draft IS the character the user just typed: collapse the caret
-      // after it so the next keystroke appends rather than replacing.
-      const end = el.value.length;
-      el.setSelectionRange(end, end);
-    } else {
-      el.select();
-    }
-    // Mount-only: the entry path can't change for the life of one edit.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const ref = useRef<E | null>(null);
+  const composition = useCompositionGuard();
+  const seededFromTyping = input.seededFromTyping;
+  const attachRef = useCallback(
+    (el: E | null) => {
+      ref.current = el;
+      if (!el) return;
+      // Focus each actual field attachment, including a changed replacement slot.
+      // Ordinary draft/status renders retain this callback and leave the caret alone.
+      el.focus();
+      if (seededFromTyping) {
+        const end = el.value.length;
+        el.setSelectionRange(end, end);
+      } else {
+        el.select();
+      }
+    },
+    [seededFromTyping],
+  );
 
   const pending = PENDING_STATUSES.has(input.status);
   const errorId = `pretable-edit-error-${input.rowId}-${input.columnId}`;
 
   return {
     ref,
+    attachRef,
     pending,
     errorId,
+    isComposing: composition.isComposing,
     fieldProps: {
+      onCompositionStart: composition.onCompositionStart,
+      onCompositionEnd: composition.onCompositionEnd,
       "aria-label": input.column.header ?? input.columnId,
       "aria-invalid": input.error ? true : undefined,
       "aria-errormessage": input.error ? errorId : undefined,
@@ -53,14 +61,15 @@ export function useEditorField<
         if (input.status === "editing") input.commit();
       },
       onKeyDown: (e: React.KeyboardEvent) => {
+        if (composition.isComposing(e)) return;
         if (e.key === "Enter") {
           e.preventDefault();
           e.stopPropagation();
-          input.commit("down");
+          if (!pending) input.commit(editorCommitDirection(e));
         } else if (e.key === "Tab") {
           e.preventDefault();
           e.stopPropagation();
-          input.commit("right");
+          if (!pending) input.commit(editorCommitDirection(e));
         } else if (e.key === "Escape" || e.key === "Esc") {
           e.preventDefault();
           e.stopPropagation();
diff --git a/packages/react/src/filter-menu/FilterMenu.tsx b/packages/react/src/filter-menu/FilterMenu.tsx
index 2e04c4567..2f3371979 100644
--- a/packages/react/src/filter-menu/FilterMenu.tsx
+++ b/packages/react/src/filter-menu/FilterMenu.tsx
@@ -26,6 +26,7 @@ import {
   type FilterDraft,
 } from "./filter-operators";
 import { usePretableComponents } from "../components/context";
+import { useOutsidePointer } from "../overlay/outside-pointer";
 import { OverlayPortal } from "../overlay/OverlayPortal";
 
 const DEBOUNCE_MS = 200;
@@ -52,6 +53,7 @@ type VisibleDistinctValueState =
   DistinctValueState | { readonly kind: "loading" };
 
 export function FilterMenu({
+  anchor,
   columnId,
   label,
   type,
@@ -63,6 +65,7 @@ export function FilterMenu({
   onChange,
   onClose,
 }: {
+  anchor?: HTMLElement | null;
   columnId: string;
   label: string;
   type: ColumnType;
@@ -82,7 +85,9 @@ export function FilterMenu({
     useState<DistinctValueState>({ kind: "idle" });
 
   const rootRef = useRef<HTMLDivElement>(null);
-  const selectRef = useRef<HTMLButtonElement>(null);
+  const selectRef = useCallback((node: HTMLButtonElement | null) => {
+    node?.focus({ preventScroll: true });
+  }, []);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Keep the latest draft in a ref so the unmount flush sees current state.
@@ -142,37 +147,8 @@ export function FilterMenu({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Focus the operator select on mount.
-  //
-  // `preventScroll` no longer decides whether this popover survives its own
-  // mount — `useHeaderPopover` follows its anchor now instead of closing on
-  // any window scroll, so a scrolling `.focus()` would be repositioned rather
-  // than fatal. It stays because scrolling the page is not something opening a
-  // menu should do to the reader in the first place: the popover is drawn
-  // beside a header the user was already looking at, and yanking the document
-  // to reveal a control inside it moves everything else out from under them.
-  //
-  // Kept as the historical record of why it was added, because the shape is
-  // worth recognising again: opening the filter from the keyboard for the
-  // FIRST time on a page failed in both engines, 1 of 3 reps each, always the
-  // first — the only open with any scrolling left to do. Every later open was
-  // already in view and therefore silent. It read as flaky and was
-  // deterministic.
-  useEffect(() => {
-    selectRef.current?.focus({ preventScroll: true });
-  }, []);
-
-  // Outside-click → close.
-  useEffect(() => {
-    const onPointerDown = (e: PointerEvent) => {
-      const root = rootRef.current;
-      if (root && e.target instanceof Node && !root.contains(e.target)) {
-        onClose();
-      }
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
-  }, [onClose]);
+  // Focus belongs to actual DOM attachment, including delayed portal targets.
+  useOutsidePointer(rootRef, onClose, anchor);
 
   const onOperatorChange = useCallback(
     (operator: FilterOperator) => {
diff --git a/packages/react/src/filter-menu/FunnelButton.tsx b/packages/react/src/filter-menu/FunnelButton.tsx
index a37c26ecc..739dd869b 100644
--- a/packages/react/src/filter-menu/FunnelButton.tsx
+++ b/packages/react/src/filter-menu/FunnelButton.tsx
@@ -1,5 +1,6 @@
 // packages/react/src/filter-menu/FunnelButton.tsx
 import { createElement, type CSSProperties } from "react";
+import { useOverlayContainer } from "../overlay/portal-context";
 import { usePretableComponents } from "../components/context";
 import { FunnelIcon } from "../icons";
 
@@ -19,6 +20,7 @@ export function FunnelButton({
   onToggle: (columnId: string, anchor: HTMLElement) => void;
 }) {
   const { IconButton } = usePretableComponents();
+  const overlayReady = useOverlayContainer() !== null;
 
   return (
     <IconButton
@@ -27,7 +29,7 @@ export function FunnelButton({
       data-pretable-column-id={columnId}
       data-pretable-filter-active={active ? "true" : "false"}
       aria-haspopup="dialog"
-      aria-expanded={open}
+      aria-expanded={open && overlayReady}
       aria-label={`Filter ${label}`}
       style={style}
       // Out of the sequential tab order, exactly like the row-select checkbox
@@ -38,13 +40,6 @@ export function FunnelButton({
       // one — and zero in Safari, which keeps bare <button>s out of the
       // sequential order. Neither number was the contract.
       tabIndex={-1}
-      // Load-bearing: React delegates at the root container, so stopping here
-      // also keeps the pointerdown off `document` — where the open FilterMenu
-      // listens for outside-clicks. Without it, pointerdown would close the
-      // menu and the following click would reopen it, so the menu could never
-      // be dismissed by clicking its own funnel. Covered by
-      // "closes on a real pointerdown+click on the open funnel".
-      onPointerDown={(e) => e.stopPropagation()}
       onClick={(e) => {
         e.stopPropagation();
         onToggle(columnId, e.currentTarget);
diff --git a/packages/react/src/overlay/OverlayPortal.tsx b/packages/react/src/overlay/OverlayPortal.tsx
index fa3bd2d31..cce9de71c 100644
--- a/packages/react/src/overlay/OverlayPortal.tsx
+++ b/packages/react/src/overlay/OverlayPortal.tsx
@@ -1,20 +1,43 @@
-import type { ReactNode } from "react";
+import {
+  createElement,
+  Fragment,
+  useCallback,
+  useRef,
+  type ReactNode,
+} from "react";
 import { createPortal } from "react-dom";
+import { registerPortalBoundary } from "./logical-containment";
+import { useOverlayContainer } from "./portal-context";
 
-import { useHydrated } from "../use-hydrated";
-
-/**
- * Renders children into `document.body`.
- *
- * The grid viewport sets `contain: content`, which makes it a containing block
- * for `position: fixed` descendants *and* clips them to its box. Any popover
- * positioned from `getBoundingClientRect()` coordinates must therefore escape
- * the viewport subtree entirely. The hydration gate renders nothing on the
- * server and during hydration — `createPortal` has no server counterpart —
- * then swaps the portal in on the first client-only render.
- */
+/** Escapes clipping while retaining the source tree's logical containment. */
 export function OverlayPortal({ children }: { children: ReactNode }) {
-  const hydrated = useHydrated();
-  if (!hydrated || typeof document === "undefined") return null;
-  return createPortal(children, document.body);
+  const container = useOverlayContainer();
+  const origin = useRef<HTMLSpanElement>(null);
+  const unregister = useRef<(() => void) | null>(null);
+  const attachBoundary = useCallback((node: HTMLDivElement | null) => {
+    unregister.current?.();
+    unregister.current = node ? registerPortalBoundary(node, origin) : null;
+  }, []);
+  return (
+    <>
+      <span
+        data-pretable-overlay-origin=""
+        hidden
+        aria-hidden="true"
+        ref={origin}
+      />
+      {container
+        ? createPortal(
+            <div
+              data-pretable-overlay-root=""
+              ref={attachBoundary}
+              style={{ display: "contents" }}
+            >
+              {children}
+            </div>,
+            container,
+          )
+        : null}
+    </>
+  );
 }
diff --git a/packages/react/src/overlay/logical-containment.ts b/packages/react/src/overlay/logical-containment.ts
new file mode 100644
index 000000000..9715e45a4
--- /dev/null
+++ b/packages/react/src/overlay/logical-containment.ts
@@ -0,0 +1,25 @@
+import type { RefObject } from "react";
+
+// Weak keys plus explicit detach cleanup avoid keeping abandoned portal trees.
+const origins = new WeakMap<Node, RefObject<HTMLElement | null>>();
+
+export function registerPortalBoundary(
+  boundary: Node,
+  origin: RefObject<HTMLElement | null>,
+): () => void {
+  origins.set(boundary, origin);
+  return () => {
+    origins.delete(boundary);
+  };
+}
+
+/** Physical descendants and descendants reached through nested portal origins. */
+export function logicallyContains(root: Node | null, target: Node): boolean {
+  const seen = new Set<Node>();
+  for (let node: Node | null = target; node && !seen.has(node);) {
+    if (root?.contains(node)) return true;
+    seen.add(node);
+    node = origins.get(node)?.current ?? node.parentNode;
+  }
+  return false;
+}
diff --git a/packages/react/src/overlay/menu-keyboard.ts b/packages/react/src/overlay/menu-keyboard.ts
index ed908d834..18b9be8c3 100644
--- a/packages/react/src/overlay/menu-keyboard.ts
+++ b/packages/react/src/overlay/menu-keyboard.ts
@@ -1,5 +1,7 @@
-import type { KeyboardEvent, RefObject } from "react";
-import { useEffect, useRef } from "react";
+import type { KeyboardEvent, RefCallback } from "react";
+import { useCallback, useRef } from "react";
+
+import { useOutsidePointer } from "./outside-pointer";
 
 /**
  * The shared `role="menu"` behavior for the tool panel's popovers — one home
@@ -19,12 +21,6 @@ import { useEffect, useRef } from "react";
  *   interlock, and a portal still bubbles through the React tree to it.
  * - ArrowUp/ArrowDown rove focus across the enabled items, wrapping.
  *
- * A TOGGLING anchor must `stopPropagation()` on its own pointerdown, or the
- * outside-press close and the toggle fight — the document listener closes
- * the menu first and the anchor's click reopens it, so the button could
- * never dismiss its own menu. Both current callers do this on the button;
- * this bullet is the contract's home.
- *
  * Items are discovered by the popover contract's own attribute
  * (`[data-pretable-menu-item]`), queried live so a menu whose items change
  * while open needs no bookkeeping. The header's `ColumnMenu` is deliberately
@@ -35,8 +31,11 @@ import { useEffect, useRef } from "react";
  * caller knows whether its anchor survives the close (the pin menu's kebab
  * can remount across subgroup fragments; the add-group button never moves).
  */
-export function useMenuKeyboard(onClose: (restoreFocus: boolean) => void): {
-  rootRef: RefObject<HTMLDivElement | null>;
+export function useMenuKeyboard(
+  onClose: (restoreFocus: boolean) => void,
+  anchor?: HTMLElement | null,
+): {
+  rootRef: RefCallback<HTMLDivElement>;
   onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
 } {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -48,21 +47,16 @@ export function useMenuKeyboard(onClose: (restoreFocus: boolean) => void): {
       ) ?? [],
     );
 
-  // Mount-only on purpose: focus is taken when the menu OPENS, never again.
-  useEffect(() => {
-    enabledItems()[0]?.focus();
+  const attachRoot = useCallback((node: HTMLDivElement | null) => {
+    rootRef.current = node;
+    node
+      ?.querySelector<HTMLButtonElement>(
+        "[data-pretable-menu-item]:not(:disabled)",
+      )
+      ?.focus();
   }, []);
-
-  useEffect(() => {
-    const onPointerDown = (e: PointerEvent) => {
-      const root = rootRef.current;
-      if (root && e.target instanceof Node && !root.contains(e.target)) {
-        onClose(false);
-      }
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
-  }, [onClose]);
+  const closeFromOutside = useCallback(() => onClose(false), [onClose]);
+  useOutsidePointer(rootRef, closeFromOutside, anchor);
 
   const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     if (event.key === "Escape" || event.key === "Esc") {
@@ -79,5 +73,5 @@ export function useMenuKeyboard(onClose: (restoreFocus: boolean) => void): {
     items[(index + delta + items.length) % items.length]?.focus();
   };
 
-  return { rootRef, onKeyDown };
+  return { rootRef: attachRoot, onKeyDown };
 }
diff --git a/packages/react/src/overlay/observe-anchor.ts b/packages/react/src/overlay/observe-anchor.ts
new file mode 100644
index 000000000..dd64348a1
--- /dev/null
+++ b/packages/react/src/overlay/observe-anchor.ts
@@ -0,0 +1,27 @@
+/** Observe layout signals only while a popup is open; never poll for position. */
+export function observeAnchor(
+  anchor: HTMLElement,
+  measure: () => void,
+): () => void {
+  const ownerWindow = anchor.ownerDocument.defaultView;
+  if (!ownerWindow) return () => {};
+  const mutation = new ownerWindow.MutationObserver(measure);
+  const resize = ownerWindow.ResizeObserver
+    ? new ownerWindow.ResizeObserver(measure)
+    : null;
+  for (let node: HTMLElement | null = anchor; node; node = node.parentElement) {
+    mutation.observe(node, {
+      attributes: true,
+      attributeFilter: ["dir", "class", "style", "data-theme"],
+    });
+    resize?.observe(node);
+  }
+  ownerWindow.addEventListener("scroll", measure, true);
+  ownerWindow.addEventListener("resize", measure);
+  return () => {
+    mutation.disconnect();
+    resize?.disconnect();
+    ownerWindow.removeEventListener("scroll", measure, true);
+    ownerWindow.removeEventListener("resize", measure);
+  };
+}
diff --git a/packages/react/src/overlay/outside-pointer.ts b/packages/react/src/overlay/outside-pointer.ts
new file mode 100644
index 000000000..41360614d
--- /dev/null
+++ b/packages/react/src/overlay/outside-pointer.ts
@@ -0,0 +1,31 @@
+import { useEffect, type RefObject } from "react";
+import { logicallyContains } from "./logical-containment";
+
+type Trigger = HTMLElement | RefObject<HTMLElement | null> | null;
+
+/** Capture sees outside presses even when another control stops bubbling. */
+export function useOutsidePointer(
+  rootRef: RefObject<HTMLElement | null>,
+  onClose: () => void,
+  trigger?: Trigger,
+): void {
+  useEffect(() => {
+    const anchor = () =>
+      trigger && "current" in trigger ? trigger.current : trigger;
+    const ownerDocument =
+      rootRef.current?.ownerDocument ?? anchor()?.ownerDocument ?? document;
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof ownerDocument.defaultView!.Node)) return;
+      if (
+        logicallyContains(rootRef.current, target) ||
+        logicallyContains(anchor() ?? null, target)
+      )
+        return;
+      onClose();
+    };
+    ownerDocument.addEventListener("pointerdown", onPointerDown, true);
+    return () =>
+      ownerDocument.removeEventListener("pointerdown", onPointerDown, true);
+  }, [rootRef, onClose, trigger]);
+}
diff --git a/packages/react/src/overlay/portal-context.tsx b/packages/react/src/overlay/portal-context.tsx
new file mode 100644
index 000000000..5a0927c1c
--- /dev/null
+++ b/packages/react/src/overlay/portal-context.tsx
@@ -0,0 +1,48 @@
+import {
+  createContext,
+  createElement,
+  useContext,
+  type ReactNode,
+  type ReactElement,
+} from "react";
+import { useHydrated } from "../use-hydrated";
+
+const PortalContainerContext = createContext<HTMLElement | null | undefined>(
+  undefined,
+);
+
+/**
+ * Props for {@link PretableOverlayProvider}.
+ *
+ * @public
+ */
+export interface PretableOverlayProviderProps {
+  /** Connected, same-document portal host outside the grid's clipping viewport. Null waits for a host. */
+  container: HTMLElement | null;
+  children: ReactNode;
+}
+
+/**
+ * Places overlays in the nearest provider's host, inheriting that host's CSS scope.
+ * Without a provider, overlays use document.body. A null target renders no popup
+ * until a host is supplied; it never falls back to body.
+ * @public
+ */
+export function PretableOverlayProvider({
+  container,
+  children,
+}: PretableOverlayProviderProps): ReactElement {
+  return (
+    <PortalContainerContext.Provider value={container}>
+      {children}
+    </PortalContainerContext.Provider>
+  );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components -- the provider and its internal target reader share one context
+export function useOverlayContainer(): HTMLElement | null {
+  const container = useContext(PortalContainerContext);
+  const hydrated = useHydrated();
+  if (!hydrated || typeof document === "undefined") return null;
+  return container === undefined ? document.body : container;
+}
diff --git a/packages/react/src/overlay/useHeaderPopover.ts b/packages/react/src/overlay/useHeaderPopover.ts
index 9e02fa36a..b06ee518c 100644
--- a/packages/react/src/overlay/useHeaderPopover.ts
+++ b/packages/react/src/overlay/useHeaderPopover.ts
@@ -1,15 +1,15 @@
 // packages/react/src/overlay/useHeaderPopover.ts
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useState } from "react";
+
+import { observeAnchor } from "./observe-anchor";
+import { useOverlayContainer } from "./portal-context";
 
 /**
  * Which popover a header cell's trailing strip has open.
  *
- * There is exactly ONE of these for the whole surface, discriminated by kind
- * rather than one hook per popover. Both buttons stop their own `pointerdown`
- * (they have to — see `FunnelButton`), which means neither ever reaches the
- * other popover's document-level outside-click listener. With independent
- * states the funnel dialog and the ⋮ menu would simply stack on top of each
- * other; with one state, opening either closes the other for free.
+ * One state per surface distinguishes the column and popover kind. Opening
+ * either header action replaces the previous action; outside presses use
+ * logical portal containment and explicitly exempt the owning anchor.
  */
 export type HeaderPopoverKind = "filter" | "menu";
 
@@ -130,60 +130,41 @@ export function useHeaderPopover() {
 
   const close = useCallback(() => setOpenState(null), []);
 
-  const isOpen = openState !== null;
+  const anchor = openState?.anchor ?? null;
+  const container = useOverlayContainer();
+  const measure = useCallback(() => {
+    setOpenState((previous) => {
+      if (previous === null) return previous;
+      const next = anchorRect(previous.anchor);
+      if (next === null) return null;
+      return sameRect(previous.rect, next)
+        ? previous
+        : { ...previous, rect: next };
+    });
+  }, []);
+
+  // Parent layout renders and delayed portal targets can move an anchor without
+  // scrolling. Bounds equality prevents another update when nothing moved.
+  useLayoutEffect(() => {
+    // Publish measured DOM bounds before paint; sameRect prevents cascading updates.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    if (anchor && container) measure();
+  });
 
   useEffect(() => {
-    if (!isOpen) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") close();
-    };
-
-    // The page moving is not, by itself, a reason to close.
-    //
-    // This listener used to call `close()` outright, which read as "the
-    // popover must never float away from its anchor" — the right goal, applied
-    // to the wrong signal. A scroll EVENT is not detachment; it is the thing
-    // that might cause detachment, and the two come apart badly whenever the
-    // page is already in motion when a popover opens. Measured before this: a
-    // filter opened during the tail of the site's own smooth `scrollIntoView`
-    // was unmounted in the same breath, in both engines, which is why
-    // `grid-header-keyboard.spec.ts` had to grow a `waitForScrollSettled`
-    // helper to get a filter open at all. A user mid-scroll got no such
-    // helper.
-    //
-    // So respond to the condition rather than the event: re-measure, FOLLOW
-    // the anchor while it is still on screen, and close only when it is
-    // genuinely gone. Following is strictly better than closing even in the
-    // cases the old rule handled — the popover stays usable through a scroll
-    // instead of making the user re-open it — and there is nothing left for a
-    // scrolling `.focus()` to trip over.
-    const onViewportChange = () => {
-      setOpenState((prev) => {
-        if (prev === null) return prev;
-        const next = anchorRect(prev.anchor);
-        if (next === null) return null;
-        // Returning `prev` publishes nothing, so a scroll that leaves the
-        // anchor where it was — the grid's own vertical body scroll, under a
-        // sticky header — costs one rect read and no re-render.
-        return sameRect(prev.rect, next) ? prev : { ...prev, rect: next };
-      });
+    if (!anchor) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") close();
     };
-
-    document.addEventListener("keydown", onKey);
-    window.addEventListener("resize", onViewportChange);
-    // Capture: scrolls of inner elements (the grid's own viewport) do not
-    // bubble to `window`, and moving the grid's header is exactly the case
-    // that has to be followed.
-    window.addEventListener("scroll", onViewportChange, true);
+    anchor.ownerDocument.addEventListener("keydown", onKey);
+    // Follow while on-screen; anchorRect retains the existing clipping and
+    // detach checks. Nested Selects observe the moved popup's style in turn.
+    const stopObserving = observeAnchor(anchor, measure);
     return () => {
-      document.removeEventListener("keydown", onKey);
-      window.removeEventListener("resize", onViewportChange);
-      window.removeEventListener("scroll", onViewportChange, true);
+      anchor.ownerDocument.removeEventListener("keydown", onKey);
+      stopObserving();
     };
-    // Deliberately `isOpen` rather than `openState`: the handler reads the
-    // current state through the functional updater, so re-subscribing on every
-    // repositioned frame would be pure churn.
-  }, [isOpen, close]);
+  }, [anchor, close, measure]);
 
   return { openState, toggle, close };
 }
diff --git a/packages/react/src/pretable-surface.tsx b/packages/react/src/pretable-surface.tsx
index 163ed8da7..d179d037e 100644
--- a/packages/react/src/pretable-surface.tsx
+++ b/packages/react/src/pretable-surface.tsx
@@ -419,6 +419,7 @@ import {
   parseTsv,
   type RejectedPasteCell,
 } from "./paste";
+import { useCompositionGuard } from "./editors/editor-keyboard";
 import { parseDraftForType } from "./editors/type-parsing";
 import { deriveRowChange } from "./row-change";
 import {
@@ -2217,6 +2218,7 @@ export function PretableSurface<
     [messages],
   );
   const resolvedComponents = useResolvedComponents(components);
+  const composition = useCompositionGuard();
   // The surface draws two checkboxes itself — the header select-all and the
   // row-select cell. Read off the resolved map rather than through
   // `usePretableComponents()`: this component is the one that PROVIDES that
@@ -4502,6 +4504,7 @@ export function PretableSurface<
     effectiveMessagesRef.current = effectiveMessages;
   });
   const pendingRowsEditRef = useRef<{
+    readonly moveDirection?: PretableFocusDirection;
     readonly rowId: PretableRowId;
     readonly changes: Partial<TRow>;
     readonly sessionToken: number | null;
@@ -4533,10 +4536,31 @@ export function PretableSurface<
           edit,
         ),
       getSnapshot: () => {
-        // Capturing the core is the bridge's lifecycle boundary even though
-        // operations deliberately forward through the latest projection.
-        void controllerCore;
-        return editGridProjectionRef.current.getSnapshot();
+        // Read the live core: the render projection can lag synchronous
+        // begin/status transitions and would misidentify the active session.
+        const editing = controllerCore.getState().editing;
+        return {
+          editing:
+            editing === null
+              ? null
+              : {
+                  rowId: editing.rowId,
+                  columnId: editing.columnId,
+                  draft: editing.value,
+                },
+        };
+      },
+      getEditSessionToken: () => editSessionRef.current.activeToken,
+      markChecking: () => {
+        const editing = controllerCore.getState().editing;
+        if (editing === null) return;
+        // Permission retry belongs to the same surface session. The public
+        // status setter excludes checking, so re-enter it through core begin.
+        controllerCore.beginEdit({
+          ...editing,
+          value: editing.value as never,
+          status: "checking",
+        });
       },
       markEditing: () => editGridProjectionRef.current.markEditing(),
       markEditValidating: () =>
@@ -4564,6 +4588,7 @@ export function PretableSurface<
     }, []),
     onCommit: useCallback(
       async (payload: {
+        moveDirection?: PretableFocusDirection;
         rowId: PretableRowId;
         columnId: string;
         value: unknown;
@@ -4590,6 +4615,7 @@ export function PretableSurface<
           const callback = onRowChangeRef.current;
           if (callback === undefined) return;
           const pending = {
+            moveDirection: payload.moveDirection,
             rowId: change.rowId,
             changes: change.changes,
             sessionToken: editSessionRef.current.activeToken,
@@ -4684,6 +4710,10 @@ export function PretableSurface<
     pendingRowsEditRef.current = null;
     if (pending.sessionToken !== editSessionRef.current.activeToken) return;
     endEditSession();
+    // Controlled rows acknowledge saves here rather than in the controller's
+    // immediate completion path. Follow its requested direction exactly once.
+    if (pending.moveDirection)
+      editGridProjectionRef.current.moveFocus(pending.moveDirection);
   }, [endEditSession, rowModelSnapshot]);
 
   // Boolean cells toggle-and-commit directly through the edit lifecycle (no
@@ -5978,7 +6008,10 @@ export function PretableSurface<
         );
         emitFocusChange(entryRow.ref, columnId);
       }}
+      onCompositionStartCapture={composition.onCompositionStart}
+      onCompositionEndCapture={composition.onCompositionEnd}
       onKeyDown={(event) => {
+        if (composition.isComposing(event)) return;
         // Esc during reorder drag cancels without engine mutation.
         if (
           (event.key === "Escape" || event.key === "Esc") &&
@@ -7686,6 +7719,7 @@ export function PretableSurface<
                             id={`pretable-edit-error-${id}-${column.id}`}
                             data-pretable-edit-error
                             role="alert"
+                            title={cellEdit.error}
                           >
                             {cellEdit.error}
                           </div>
@@ -7856,6 +7890,7 @@ export function PretableSurface<
             const options = resolveColumnOptions(col, () => [], processing);
             return (
               <FilterMenu
+                anchor={filterOpenState.anchor}
                 key={filterOpenState.columnId}
                 columnId={filterOpenState.columnId}
                 label={col.header ?? filterOpenState.columnId}
diff --git a/packages/react/src/public_api.ts b/packages/react/src/public_api.ts
index 1ea60ed2b..0892107da 100644
--- a/packages/react/src/public_api.ts
+++ b/packages/react/src/public_api.ts
@@ -43,6 +43,8 @@ export type {
 } from "./components/select";
 export { PretableTextInput } from "./components/text-input";
 export type { PretableTextInputProps } from "./components/text-input";
+export { PretableTextarea } from "./components/textarea";
+export type { PretableTextareaProps } from "./components/textarea";
 export { PretableCheckbox } from "./components/checkbox";
 export type { PretableCheckboxProps } from "./components/checkbox";
 export type {
@@ -52,6 +54,7 @@ export type {
   PretableIconButtonComponent,
   PretableSelectComponent,
   PretableTextInputComponent,
+  PretableTextareaComponent,
 } from "./components/context";
 
 // Hooks
@@ -326,3 +329,6 @@ export type {
   ɵPretableIndexedSelectionWindow,
   ɵPretableIndexedWindowing,
 } from "@pretable/core";
+
+export { PretableOverlayProvider } from "./overlay/portal-context";
+export type { PretableOverlayProviderProps } from "./overlay/portal-context";
diff --git a/packages/react/src/tool-panel/ColumnRowMenu.tsx b/packages/react/src/tool-panel/ColumnRowMenu.tsx
index c8bb18e88..9621344ae 100644
--- a/packages/react/src/tool-panel/ColumnRowMenu.tsx
+++ b/packages/react/src/tool-panel/ColumnRowMenu.tsx
@@ -42,6 +42,7 @@ const PIN_MENU_ITEMS = [
  * section (with its per-id node map) can find the button again.
  */
 export function ColumnRowMenu({
+  anchor,
   columnId,
   label,
   pinned,
@@ -52,6 +53,7 @@ export function ColumnRowMenu({
   onClose,
   messages,
 }: {
+  anchor?: HTMLElement | null;
   columnId: string;
   label: string;
   pinned: "left" | "right" | null;
@@ -66,7 +68,7 @@ export function ColumnRowMenu({
   /** Resolved surface messages — this component defaults no string itself. */
   messages: ColumnRowMenuMessages;
 }) {
-  const { rootRef, onKeyDown } = useMenuKeyboard(onClose);
+  const { rootRef, onKeyDown } = useMenuKeyboard(onClose, anchor);
 
   return (
     <OverlayPortal>
diff --git a/packages/react/src/tool-panel/ColumnsSection.tsx b/packages/react/src/tool-panel/ColumnsSection.tsx
index 7b2854a36..c4f7a8e7d 100644
--- a/packages/react/src/tool-panel/ColumnsSection.tsx
+++ b/packages/react/src/tool-panel/ColumnsSection.tsx
@@ -11,6 +11,7 @@ import {
 
 import { GROUP_COLUMN_ID } from "@pretable/core";
 
+import { useOverlayContainer } from "../overlay/portal-context";
 import { usePretableComponents } from "../components/context";
 import { ROW_SELECT_COLUMN_ID } from "../constants";
 import { GripIcon, OverflowIcon } from "../icons";
@@ -120,6 +121,7 @@ export function ColumnsSection({
   messages,
 }: ColumnsSectionProps) {
   const { Button, IconButton, TextInput, Checkbox } = usePretableComponents();
+  const overlayReady = useOverlayContainer() !== null;
 
   // Live engine state, read through the section's OWN subscription — never a
   // snapshot baked into the descriptor closure. The read returns the state's
@@ -505,7 +507,7 @@ export function ColumnsSection({
                     <span data-pretable-tool-column-label="">{label}</span>
                     <IconButton
                       site="tool-row-menu-button"
-                      aria-expanded={openColumnId === entry.id}
+                      aria-expanded={openColumnId === entry.id && overlayReady}
                       aria-haspopup="menu"
                       aria-label={messages.toolPanelColumnMenuLabel({ label })}
                       data-pretable-tool-row-menu-button=""
@@ -513,13 +515,6 @@ export function ColumnsSection({
                         if (node) kebabNodesRef.current.set(entry.id, node);
                         else kebabNodesRef.current.delete(entry.id);
                       }}
-                      // Load-bearing, exactly as on the header MenuButton: React
-                      // delegates at the root container, so stopping here keeps
-                      // the pointerdown off `document` — where the open menu
-                      // listens for outside-clicks. Without it, pointerdown
-                      // would close the menu and the following click reopen it,
-                      // so the kebab could never dismiss its own menu.
-                      onPointerDown={(e) => e.stopPropagation()}
                       onClick={(e) => {
                         toggleMenu("menu", entry.id, e.currentTarget);
                       }}
@@ -553,6 +548,7 @@ export function ColumnsSection({
         if (open === undefined) return null;
         return (
           <ColumnRowMenu
+            anchor={menu.anchor}
             autoWidth={autoWidthSet.has(open.entry.id)}
             columnId={open.entry.id}
             label={open.label}
diff --git a/packages/react/src/tool-panel/grouping/AddGroupMenu.tsx b/packages/react/src/tool-panel/grouping/AddGroupMenu.tsx
index 78f03df6a..b878d1c0c 100644
--- a/packages/react/src/tool-panel/grouping/AddGroupMenu.tsx
+++ b/packages/react/src/tool-panel/grouping/AddGroupMenu.tsx
@@ -25,12 +25,14 @@ import type { GroupingSectionMessages } from "../messages";
  * via `onClose`/`onSelect`: only the section knows the add button.
  */
 export function AddGroupMenu({
+  anchor,
   options,
   style,
   onSelect,
   onClose,
   messages,
 }: {
+  anchor?: HTMLElement | null;
   /** Ungrouped schema columns, in schema order — id plus resolved label. */
   options: readonly { readonly id: string; readonly label: string }[];
   style?: CSSProperties;
@@ -40,7 +42,7 @@ export function AddGroupMenu({
   /** Resolved surface messages — this component defaults no string itself. */
   messages: GroupingSectionMessages;
 }) {
-  const { rootRef, onKeyDown } = useMenuKeyboard(onClose);
+  const { rootRef, onKeyDown } = useMenuKeyboard(onClose, anchor);
 
   return (
     <OverlayPortal>
diff --git a/packages/react/src/tool-panel/grouping/GroupingSection.tsx b/packages/react/src/tool-panel/grouping/GroupingSection.tsx
index d7bdebf20..82955c7b1 100644
--- a/packages/react/src/tool-panel/grouping/GroupingSection.tsx
+++ b/packages/react/src/tool-panel/grouping/GroupingSection.tsx
@@ -9,6 +9,7 @@ import {
 
 import type { ColumnType } from "@pretable/core";
 
+import { useOverlayContainer } from "../../overlay/portal-context";
 import { usePretableComponents } from "../../components/context";
 import { CloseIcon, GripIcon } from "../../icons";
 import { menuPopoverStyle } from "../../overlay/popover-position";
@@ -149,6 +150,7 @@ export function GroupingSection({
   messages,
 }: GroupingSectionProps) {
   const { Button, IconButton, Select, Checkbox } = usePretableComponents();
+  const overlayReady = useOverlayContainer() !== null;
   // The section's OWN subscription, and the SNAPSHOT slice rather than the
   // state (FiltersSection's pattern): `rowGroups` changes identity only when
   // a query commits, so every other publish bails in useSyncExternalStore's
@@ -441,16 +443,11 @@ export function GroupingSection({
         ) : null}
         <Button
           site="add-group"
-          aria-expanded={menu !== null}
+          aria-expanded={menu !== null && overlayReady}
           aria-haspopup="menu"
           data-pretable-add-group=""
           disabled={ungrouped.length === 0}
           ref={addButtonRef}
-          // Load-bearing, exactly as on the kebab: React delegates at the
-          // root container, so stopping here keeps the pointerdown off
-          // `document` — where the open menu listens for outside-clicks.
-          // Without it the button could never dismiss its own menu.
-          onPointerDown={(event) => event.stopPropagation()}
           onClick={(event) => {
             toggleMenu("menu", "add-group", event.currentTarget);
           }}
@@ -459,6 +456,7 @@ export function GroupingSection({
         </Button>
         {menu !== null && ungrouped.length > 0 ? (
           <AddGroupMenu
+            anchor={menu.anchor}
             messages={messages}
             options={ungrouped}
             style={menuPopoverStyle(menu.rect)}
diff --git a/packages/react/src/use-cell-edit-controller.ts b/packages/react/src/use-cell-edit-controller.ts
index 4bad24f48..83c12637d 100644
--- a/packages/react/src/use-cell-edit-controller.ts
+++ b/packages/react/src/use-cell-edit-controller.ts
@@ -8,6 +8,9 @@ import type {
 
 import type { PretableColumn, PretableEditInput } from "./types";
 
+import { warnOnce } from "./dev-warn";
+
+import { enumDraftText } from "./editors/enum-draft";
 import { parseDraftForType } from "./editors/type-parsing";
 
 declare const cellEditAuthorizationBrand: unique symbol;
@@ -49,6 +52,8 @@ export interface CellEditControllerOptions<
         readonly draft: unknown;
       } | null;
     };
+    getEditSessionToken(): unknown;
+    markChecking(): void;
     markEditing(): void;
     markEditValidating(): void;
     markEditSaving(): void;
@@ -61,6 +66,7 @@ export interface CellEditControllerOptions<
   getColumns: () => PretableColumn<TRow>[];
   getRowById: (rowId: TRowId) => TRow | null;
   onCommit?: (payload: {
+    moveDirection?: PretableFocusDirection;
     rowId: TRowId;
     columnId: string;
     value: unknown;
@@ -78,26 +84,46 @@ export function createCellEditController<
   TRowId extends PretableRowId = string,
 >(opts: CellEditControllerOptions<TRow, TRowId>): CellEditController<TRowId> {
   const { grid, getColumns, getRowById, onCommit } = opts;
-  // Monotonic token: every begin()/cancel() bumps it, so a stale async
-  // resolution (editable/commit) can detect it is no longer the active edit.
-  let token = 0;
-  let activeAuthorization: CellEditAuthorization | null = null;
-
+  type Session = {
+    addr: { readonly rowId: TRowId; readonly columnId: string };
+    generation: number;
+    adapterToken: unknown;
+    authorization: CellEditAuthorization;
+    phase: "checking" | "editing" | "validating" | "saving" | "error";
+    permitted: boolean;
+  };
+  let generation = 0;
+  let session: Session | null = null;
   const invalidate = () => {
-    token += 1;
-    activeAuthorization = null;
+    generation += 1;
+    session = null;
   };
-
-  const inputFor = (addr: {
-    readonly rowId: TRowId;
-    readonly columnId: string;
-  }): PretableEditInput<TRow> | null => {
-    const column = getColumns().find((c) => c.id === addr.columnId);
+  const current = (s: Session) => {
+    const editing = grid.getSnapshot().editing;
+    return (
+      session === s &&
+      generation === s.generation &&
+      grid.getEditSessionToken() === s.adapterToken &&
+      editing?.rowId === s.addr.rowId &&
+      editing.columnId === s.addr.columnId
+    );
+  };
+  // Consumer callbacks may synchronously cancel or replace this edit. Check
+  // each lookup separately so no subsequent callback receives a stale input.
+  const inputFor = (
+    addr: Session["addr"],
+    alive: () => boolean,
+  ): PretableEditInput<TRow> | null => {
+    if (!alive()) return null;
+    const columns = getColumns();
+    if (!alive()) return null;
+    const column = columns.find((c) => c.id === addr.columnId);
     const row = getRowById(addr.rowId);
-    if (!column || !row) return null;
+    if (!alive() || !column || !row) return null;
     const value = column.value
       ? column.value(row)
       : Reflect.get(row, addr.columnId);
+    if (!alive()) return null;
     return {
       rowId: addr.rowId as unknown as string,
       columnId: addr.columnId,
@@ -106,117 +132,166 @@ export function createCellEditController<
       value,
     };
   };
+  const fail = (s: Session, err: unknown) => {
+    if (!current(s)) return;
+    s.phase = "error";
+    grid.markEditError(errorMessage(err));
+  };
+  const permit = async (s: Session, input: PretableEditInput<TRow>) => {
+    if (!current(s)) return false;
+    const editable = input.column.editable ?? false;
+    const allowed =
+      typeof editable === "function" ? await editable(input) : editable;
+    if (!current(s)) return false;
+    if (!allowed) {
+      invalidate();
+      grid.cancelEdit();
+      return false;
+    }
+    s.permitted = true;
+    return true;
+  };
 
   return {
     async begin(addr, initialDraft, provenance) {
-      const input = inputFor(addr);
-      if (!input) return null;
-      const editable = input.column.editable ?? false;
-      const seed =
-        initialDraft !== undefined
-          ? initialDraft
-          : input.column.formatEditValue
-            ? input.column.formatEditValue(input.value, input)
-            : input.value;
-
-      if (editable === false) return null;
-      const myToken = (token += 1);
-      const authorization = {} as CellEditAuthorization;
-      activeAuthorization = authorization;
-      if (editable === true) {
+      invalidate();
+      const myGeneration = generation;
+      if (grid.getSnapshot().editing) grid.cancelEdit();
+      const priorAdapterToken = grid.getEditSessionToken();
+      const alive = () =>
+        generation === myGeneration &&
+        grid.getEditSessionToken() === priorAdapterToken;
+      let started: Session | null = null;
+      try {
+        const input = inputFor(addr, alive);
+        if (!input || !alive()) return null;
+        const editable = input.column.editable ?? false;
+        if (editable === false) return null;
+        const seed =
+          initialDraft !== undefined
+            ? initialDraft
+            : input.column.formatEditValue
+              ? input.column.formatEditValue(input.value, input)
+              : input.value;
+        if (!alive()) return null;
         grid.beginEdit(addr, {
           draft: seed,
-          status: "editing",
+          status: editable === true ? "editing" : "checking",
           seededFromTyping: provenance?.seededFromTyping ?? false,
         });
-        return authorization;
-      }
-      // async / function editable
-      grid.beginEdit(addr, {
-        draft: seed,
-        status: "checking",
-        seededFromTyping: provenance?.seededFromTyping ?? false,
-      });
-      const allowed = await editable(input);
-      if (myToken !== token || activeAuthorization !== authorization)
+        if (generation !== myGeneration) return null;
+        const s: Session = {
+          addr: { ...addr },
+          generation: myGeneration,
+          adapterToken: grid.getEditSessionToken(),
+          authorization: {} as CellEditAuthorization,
+          phase: editable === true ? "editing" : "checking",
+          permitted: editable === true,
+        };
+        session = s;
+        started = s;
+        if (!current(s)) {
+          session = null;
+          return null;
+        }
+        if (!s.permitted && !(await permit(s, input))) return null;
+        if (!current(s)) return null;
+        s.phase = "editing";
+        if (editable !== true) grid.markEditing();
+        return current(s) ? s.authorization : null;
+      } catch (err) {
+        if (started) fail(started, err);
+        else if (alive())
+          warnOnce(
+            "edit-begin-failed",
+            `Unable to begin cell edit: ${errorMessage(err)}`,
+          );
         return null;
-      if (allowed) {
-        grid.markEditing();
-        return authorization;
       }
-      activeAuthorization = null;
-      grid.cancelEdit();
-      return null;
     },
 
     async commit(moveDirection, authorization) {
+      const s = session;
       if (
-        authorization !== undefined &&
-        authorization !== activeAuthorization
-      ) {
+        !s ||
+        !current(s) ||
+        (authorization !== undefined && authorization !== s.authorization)
+      )
         return;
-      }
-      const editing = grid.getSnapshot().editing;
-      if (!editing) return;
-      const addr = { rowId: editing.rowId, columnId: editing.columnId };
-      const input = inputFor(addr);
-      if (!input) return;
-      const myToken = (token += 1);
-      activeAuthorization = null;
-      const draft = editing.draft;
-      let value: unknown;
-      if (input.column.parseEditValue) {
-        value = input.column.parseEditValue(String(draft ?? ""), input);
-      } else if (
-        input.column.type === "date" &&
-        draft === null &&
-        input.value === null
-      ) {
-        // Null is the canonical empty cell value, not a user-entered draft.
-        // Retain an untouched null seed without weakening the strict parser.
-        value = null;
-      } else {
-        const parsed = parseDraftForType(input.column, draft);
-        if (!parsed.ok) {
-          grid.markEditInvalid(parsed.message);
-          return;
+      if (s.phase !== "editing" && s.phase !== "error") return;
+      // Close admission and protect the core draft before any consumer code.
+      s.phase = s.permitted ? "validating" : "checking";
+      try {
+        if (s.permitted) grid.markEditValidating();
+        else grid.markChecking();
+        const editing = grid.getSnapshot().editing;
+        if (!editing || !current(s)) return;
+        const draft = editing.draft;
+        const input = inputFor(s.addr, () => current(s));
+        if (!current(s)) return;
+        if (!input)
+          throw new Error("The edited row or column is no longer available");
+        if (!s.permitted) {
+          if (!(await permit(s, input)) || !current(s)) return;
+          s.phase = "validating";
+          grid.markEditValidating();
         }
-        value = parsed.value;
-      }
-
-      if (input.column.validate) {
-        grid.markEditValidating();
-        const result = await input.column.validate(value, input);
-        if (myToken !== token) return; // stale
-        if (result !== true) {
-          grid.markEditInvalid(result);
-          return;
+        if (!current(s)) return;
+        let value: unknown;
+        if (input.column.parseEditValue) {
+          value = await input.column.parseEditValue(
+            enumDraftText(draft),
+            input,
+          );
+        } else if (
+          input.column.type === "date" &&
+          draft === null &&
+          input.value === null
+        ) {
+          value = null;
+        } else {
+          const parsed = parseDraftForType(input.column, draft);
+          if (!current(s)) return;
+          if (!parsed.ok) {
+            s.phase = "editing";
+            grid.markEditInvalid(parsed.message);
+            return;
+          }
+          value = parsed.value;
         }
-      }
-
-      grid.markEditSaving();
-      try {
+        if (!current(s)) return;
+        if (input.column.validate) {
+          const result = await input.column.validate(value, input);
+          if (!current(s)) return;
+          if (result !== true) {
+            s.phase = "editing";
+            grid.markEditInvalid(result);
+            return;
+          }
+        }
+        if (!current(s)) return;
+        s.phase = "saving";
+        grid.markEditSaving();
+        if (!current(s)) return;
         const result = await onCommit?.({
-          rowId: addr.rowId,
-          columnId: addr.columnId,
+          ...s.addr,
           value,
           row: input.row,
+          ...(moveDirection ? { moveDirection } : {}),
         });
-        if (myToken !== token) return; // stale
-        if (result === "keep-open") return;
+        if (!current(s) || result === "keep-open") return;
+        invalidate();
         grid.commitEditSucceeded();
-        if (moveDirection) grid.moveFocus(moveDirection);
+        if (moveDirection && generation === s.generation + 1)
+          grid.moveFocus(moveDirection);
       } catch (err) {
-        if (myToken !== token) return; // stale
-        grid.markEditError(errorMessage(err));
+        fail(s, err);
       }
     },
-
     cancel() {
       invalidate();
       grid.cancelEdit();
     },
-
     invalidate,
   };
 }
diff --git a/packages/ui/grid.css b/packages/ui/grid.css
index 7a55f991a..64102410d 100644
--- a/packages/ui/grid.css
+++ b/packages/ui/grid.css
@@ -229,15 +229,15 @@
     cursor: pointer;
   }
 
-  :where([data-pretable-option]:hover) {
+  :where([data-pretable-option]:hover:not([aria-disabled="true"])) {
     background: var(--pretable-bg-hover);
   }
 
-  /* The roving highlight: keyboard navigation's `data-active`, painted like
+  /* The roving highlight: keyboard navigation's `data-pretable-active`, painted like
      a hover. DECLARED BEFORE the selected rule on purpose — an option that
      is both active and committed should read as SELECTED, and at equal
      (0,0,0) specificity source order is what decides that. */
-  :where([data-pretable-option][data-active]) {
+  :where([data-pretable-option][data-pretable-active]) {
     background: var(--pretable-bg-hover);
   }
 
@@ -246,6 +246,13 @@
     color: var(--pretable-text-selected);
   }
 
+  /* Disabled may also be committed. Keep its selection fill, but let the
+     disabled ink and cursor win after the selected rule. */
+  :where([data-pretable-option][aria-disabled="true"]) {
+    color: var(--pretable-text-dim);
+    cursor: default;
+  }
+
   /* ---- Kit components: text input --------------------------------------
      The native input in the grid's box: the same rule border, grid surface
      and cell ink the select trigger draws, so a field and the picker beside
@@ -262,6 +269,16 @@
     font: inherit;
   }
 
+  :where([data-pretable-textarea]) {
+    box-sizing: border-box;
+    padding-inline: 6px;
+    border: 1px solid var(--pretable-rule);
+    border-radius: var(--pretable-radius-control);
+    background: var(--pretable-bg-grid);
+    color: var(--pretable-text-cell);
+    font: inherit;
+  }
+
   /* ---- Kit components: checkbox ----------------------------------------
      The 16px square every checkbox in the grid is — the row-select cell, the
      header select-all, the boolean cell, the column toggle, the checklists
@@ -1409,6 +1426,7 @@
     /* Portaled into <body> — see the filter menu above. */
     font-family: var(--pretable-font-sans);
     font-size: var(--pretable-font-size-cell);
+    line-height: 1.4;
     color: var(--pretable-text-cell);
   }
 
@@ -1420,7 +1438,10 @@
     padding-bottom: 6px;
   }
 
-  :where([data-pretable-date-header] button) {
+  :where(
+    [data-pretable-date-header]
+      :is([data-pretable-date-previous-month], [data-pretable-date-next-month])
+  ) {
     border: none;
     background: none;
     color: var(--pretable-text-header);
@@ -1428,13 +1449,25 @@
     padding: 0 6px;
   }
 
-  :where([data-pretable-date-header] button:hover:not(:disabled)) {
+  :where(
+    [data-pretable-date-header]
+      :is(
+        [data-pretable-date-previous-month],
+        [data-pretable-date-next-month]
+      ):hover:not(:disabled)
+  ) {
     color: var(--pretable-accent);
   }
   /* The month steppers disable at the calendar's min/max month. Without this
      they kept the enabled colour, the pointer cursor and the hover accent —
      the same defect the menu items had. */
-  :where([data-pretable-date-header] button:disabled) {
+  :where(
+    [data-pretable-date-header]
+      :is(
+        [data-pretable-date-previous-month],
+        [data-pretable-date-next-month]
+      ):disabled
+  ) {
     color: var(--pretable-text-dim);
     cursor: default;
   }
@@ -1457,7 +1490,7 @@
     cursor: pointer;
   }
 
-  :where([data-pretable-date-day]:hover) {
+  :where([data-pretable-date-day]:hover:not([aria-disabled="true"])) {
     background: var(--pretable-bg-hover);
   }
 
@@ -1474,6 +1507,15 @@
     color: var(--pretable-text-selected);
   }
 
+  :where([data-pretable-date-day][data-pretable-date-active]) {
+    outline: 2px solid var(--pretable-focus-ring);
+    outline-offset: -2px;
+  }
+  :where([data-pretable-date-day][aria-disabled="true"]) {
+    color: var(--pretable-text-dim);
+    cursor: default;
+  }
+
   /* Tooltip / popover */
   :where([data-pretable-popover]) {
     background: var(--pretable-bg-tooltip);
@@ -1482,12 +1524,38 @@
     border-radius: var(--pretable-radius);
   }
 
+  /* Validation messages occupy their own line; the field keeps the full
+     column width instead of shrinking beside the error text. */
+  :where(
+    [data-pretable-cell][data-pretable-edit-status]:has(.pretable-cell-editor)
+  ) {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    padding: 0;
+  }
+  :where(
+    [data-pretable-cell][data-pretable-edit-status]
+      > :is(
+        [data-pretable-number-editor],
+        [data-pretable-enum-editor],
+        [data-pretable-date-editor]
+      )
+  ) {
+    flex: 1;
+    min-height: 0;
+  }
+
   /* Cell editor (inline editing) */
   :where(.pretable-cell-editor) {
+    border-radius: 0;
+    min-height: 0;
+    min-width: 0;
+    flex: 1;
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    padding: var(--pretable-cell-padding-y) var(--pretable-cell-padding-x);
+    padding: 2px var(--pretable-cell-padding-x);
     border: none;
     outline: 2px solid var(--pretable-focus-ring);
     outline-offset: -2px;
@@ -1534,7 +1602,10 @@
     justify-content: center;
   }
 
-  :where([data-pretable-number-steppers] button) {
+  :where(
+    [data-pretable-number-steppers]
+      :is([data-pretable-number-increment], [data-pretable-number-decrement])
+  ) {
     border: none;
     background: var(--pretable-bg-header);
     color: var(--pretable-text-header);
@@ -1544,11 +1615,27 @@
     cursor: pointer;
   }
 
-  :where([data-pretable-number-steppers] button:hover) {
+  :where(
+    [data-pretable-number-steppers]
+      :is(
+        [data-pretable-number-increment],
+        [data-pretable-number-decrement]
+      ):hover:not(:disabled)
+  ) {
     background: var(--pretable-bg-hover);
   }
 
+  /* Preserve room for an ISO date and caret in narrow date columns. */
+  :where([data-pretable-date-editor] .pretable-cell-editor) {
+    padding-inline: 4px;
+  }
+
   :where([data-pretable-edit-error]) {
+    white-space: nowrap;
+    flex: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.2;
     margin-top: 2px;
     color: var(--pretable-text-error);
     font-family: var(--pretable-font-sans);
@@ -2208,11 +2295,16 @@
     [data-pretable-icon-button]:focus-visible,
     [data-pretable-select]:focus-visible,
     [data-pretable-text-input]:focus-visible,
+    [data-pretable-textarea]:focus-visible,
     [data-pretable-checkbox]:focus-visible
   ) {
     outline: 2px solid var(--pretable-focus-ring);
     outline-offset: -2px;
   }
+  /* Editor errors win over the generic focused-field shorthand. */
+  :where(.pretable-cell-editor[aria-invalid="true"]) {
+    outline-color: var(--pretable-text-error);
+  }
   /* A checkbox rings OUTSIDE its box, alone among the kit controls. The
      square is 16px and paints to its own edge — border, fill and glyph all
      the way out — so the inset ring above would land ON the box rather than
@@ -2232,21 +2324,20 @@
     [data-pretable-button]:disabled,
     [data-pretable-icon-button]:disabled,
     [data-pretable-select]:disabled,
-    [data-pretable-text-input]:disabled
+    [data-pretable-text-input]:disabled,
+    [data-pretable-textarea]:disabled
   ) {
     color: var(--pretable-text-dim);
     cursor: default;
   }
-  /* The checkbox is deliberately NOT in that list. Its `color` is not ink for
-     a label, it is the CHECK GLYPH, painted on the checked fill — so dimming
-     it puts --pretable-text-dim on --pretable-checkbox-checked-bg at about
-     1.9:1 and the tick all but vanishes. A read-only boolean column renders
-     its cell control disabled on EVERY row, so that would be every tick in
-     the column. A checkbox's disabled look is its own tokens (border, fill,
-     and the shared opacity/forced-colors treatment), never text ink; all this
-     rule owes is the pointer. Declaring no `color` here also leaves the
-     checked rule above as the last word on the glyph. */
+  /* A disabled checkbox keeps a legible tick on the grid surface. Changing
+     fill together with ink avoids dim ink on an accent fill. A dashed border
+     distinguishes the unchecked disabled state without relying on opacity. */
   :where([data-pretable-checkbox]:disabled) {
+    background: var(--pretable-bg-grid);
+    color: var(--pretable-text-dim);
+    border-color: var(--pretable-text-dim);
+    border-style: dashed;
     cursor: default;
   }
 
@@ -2457,6 +2548,7 @@
       [data-pretable-icon-button]:disabled,
       [data-pretable-select]:disabled,
       [data-pretable-text-input]:disabled,
+      [data-pretable-textarea]:disabled,
       [data-pretable-checkbox]:disabled
     ) {
       color: GrayText;
@@ -2480,9 +2572,87 @@
     :where([data-pretable-checkbox][aria-checked="true"]),
     :where([data-pretable-checkbox][aria-checked="mixed"]) {
       forced-color-adjust: none;
+      background-color: Highlight;
+      border-color: Highlight;
+      outline-color: CanvasText;
+      color: HighlightText;
+    }
+    /* Disabled wins over both committed selection and checked/mixed state.
+       Canvas/GrayText is the platform disabled pair. The dashed selected
+       outline preserves the committed mark without using an enabled fill. */
+    :where([data-pretable-option][aria-disabled="true"]) {
+      forced-color-adjust: none;
+      background-color: Canvas;
+      color: GrayText;
+      border-color: GrayText;
+    }
+    :where([data-pretable-option][aria-disabled="true"][aria-selected="true"]) {
+      outline: 1px dashed GrayText;
+      outline-offset: -2px;
+    }
+    /* DOM focus stays on the trigger; this is the visible roving focus.
+       currentColor pairs with Canvas, Highlight, or the disabled surface. */
+    :where([data-pretable-option][data-pretable-active]) {
+      outline: 2px solid currentColor;
+      outline-offset: -2px;
+    }
+    :where([data-pretable-checkbox]:disabled) {
+      forced-color-adjust: none;
+      background-color: Canvas;
+      color: GrayText;
+      border-color: GrayText;
+      outline-color: GrayText;
+    }
+    :where(
+      [data-pretable-number-increment],
+      [data-pretable-number-decrement],
+      [data-pretable-date-previous-month],
+      [data-pretable-date-next-month]
+    ) {
+      forced-color-adjust: none;
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      outline-color: CanvasText;
+    }
+    :where(
+      [data-pretable-number-increment]:disabled,
+      [data-pretable-number-decrement]:disabled,
+      [data-pretable-date-previous-month]:disabled,
+      [data-pretable-date-next-month]:disabled
+    ) {
+      color: GrayText;
+    }
+    :where([data-pretable-date-day]) {
+      box-shadow: none;
+      forced-color-adjust: none;
+      background-color: Canvas;
+      color: CanvasText;
+    }
+    :where([data-pretable-date-day][aria-selected="true"]) {
       background-color: Highlight;
       color: HighlightText;
     }
+    :where([data-pretable-date-day][data-pretable-date-today]) {
+      text-decoration: underline;
+    }
+    :where([data-pretable-date-day][aria-disabled="true"]) {
+      background-color: Canvas;
+      color: GrayText;
+    }
+    :where([data-pretable-date-day][data-pretable-date-active]) {
+      outline: 2px solid currentColor;
+      outline-offset: -2px;
+    }
+    :where(.pretable-cell-editor) {
+      forced-color-adjust: none;
+      background-color: Canvas;
+      color: CanvasText;
+      outline-color: Highlight;
+    }
+    :where(.pretable-cell-editor[aria-invalid="true"]) {
+      outline: 2px dashed CanvasText;
+    }
   }
 
   /* Reduced motion. Every animated declaration in this file is named here:
diff --git a/packages/ui/src/__tests__/css-cascade.test.ts b/packages/ui/src/__tests__/css-cascade.test.ts
index 4e6d3a69b..385b1aa4b 100644
--- a/packages/ui/src/__tests__/css-cascade.test.ts
+++ b/packages/ui/src/__tests__/css-cascade.test.ts
@@ -550,7 +550,7 @@ describe("grid.css cascade contract", () => {
       /background:\s*var\(--pretable-bg-selected\)/,
     );
     const activeOption = rulesSelecting(css, (s) =>
-      s.includes("data-pretable-option][data-active]"),
+      s.includes("data-pretable-option][data-pretable-active]"),
     )
       .map((m) => m[2])
       .join("");
@@ -566,6 +566,84 @@ describe("grid.css cascade contract", () => {
     ).toMatch(/background-color:\s*Highlight/);
   });
 
+  test("disabled options keep disabled ink after selection and never hover", () => {
+    const css = strippedCss();
+    const plain = css.replace(forcedColorsBlock(css), "");
+    const selected = plain.indexOf(
+      '[data-pretable-option][aria-selected="true"]',
+    );
+    const disabled = rulesSelecting(
+      plain,
+      (s) =>
+        s.includes('[data-pretable-option][aria-disabled="true"]') &&
+        !s.includes(":not("),
+    );
+    expect(disabled.length).toBeGreaterThan(0);
+    expect(disabled[0]?.index).toBeGreaterThan(selected);
+    expect(disabled.map((m) => m[2]).join("")).toMatch(
+      /color:\s*var\(--pretable-text-dim\)/,
+    );
+    expect(disabled.map((m) => m[2]).join("")).toMatch(/cursor:\s*default/);
+    for (const [, selector] of rulesSelecting(
+      plain,
+      (s) => s.includes("data-pretable-option]") && s.includes(":hover"),
+    ))
+      expect(selector).toContain(':not([aria-disabled="true"])');
+  });
+
+  test("forced-color option focus survives independently of selected and disabled states", () => {
+    const css = strippedCss();
+    expect(css).not.toContain("[data-active]");
+    const forced = forcedColorsBlock(css);
+    const active = rulesSelecting(forced, (s) =>
+      s.includes("[data-pretable-option][data-pretable-active]"),
+    );
+    expect(active.map((m) => m[2]).join("")).toMatch(
+      /outline:\s*2px solid (?:CanvasText|currentColor)/,
+    );
+    const disabled = rulesSelecting(forced, (s) =>
+      s.includes('[data-pretable-option][aria-disabled="true"]'),
+    );
+    expect(disabled[0]?.index).toBeGreaterThan(
+      forced.indexOf('[data-pretable-option][aria-selected="true"]'),
+    );
+    const body = disabled.map((m) => m[2]).join("");
+    expect(body).toMatch(/color:\s*GrayText/);
+    expect(body).toMatch(/background-color:\s*Canvas/);
+    expect(body).toMatch(/border-color:\s*GrayText/);
+  });
+
+  test("disabled checkbox glyphs have their own contrasting fill and system states win last", () => {
+    const css = strippedCss();
+    const plain = css.replace(forcedColorsBlock(css), "");
+    const disabled = rulesSelecting(plain, (s) =>
+      s.includes("[data-pretable-checkbox]:disabled"),
+    );
+    const body = disabled.map((m) => m[2]).join("");
+    expect(body).toMatch(/background:\s*var\(--pretable-bg-grid\)/);
+    expect(body).toMatch(/color:\s*var\(--pretable-text-dim\)/);
+    expect(body).toMatch(/border-style:\s*dashed/);
+    const forced = forcedColorsBlock(css);
+    const checked = rulesSelecting(forced, (s) =>
+      s.includes('[data-pretable-checkbox][aria-checked="true"]'),
+    );
+    expect(checked.map((m) => m[2]).join("")).toMatch(
+      /border-color:\s*Highlight/,
+    );
+    expect(checked.map((m) => m[2]).join("")).toMatch(
+      /outline-color:\s*CanvasText/,
+    );
+    const off = rulesSelecting(forced, (s) =>
+      s.includes("[data-pretable-checkbox]:disabled"),
+    );
+    const last = off.at(-1);
+    expect(last?.index).toBeGreaterThan(checked[0]?.index ?? Infinity);
+    expect(last?.[2]).toMatch(/background-color:\s*Canvas/);
+    expect(last?.[2]).toMatch(/color:\s*GrayText/);
+    expect(last?.[2]).toMatch(/border-color:\s*GrayText/);
+    expect(last?.[2]).toMatch(/outline-color:\s*GrayText/);
+  });
+
   test("the kit text input carries the field box", () => {
     // The three fields each drew their own frame, surface, ink and font —
     // three hand-kept copies of the select trigger's box, which is what made
@@ -674,14 +752,8 @@ describe("grid.css cascade contract", () => {
     expect(state).toMatch(/outline:\s*2px solid var\(--pretable-focus-ring\)/);
     expect(state).toMatch(/cursor:\s*default/);
 
-    // …and the disabled rule declares NO colour. `color` on a checkbox is the
-    // CHECK GLYPH, not label ink: the kit's --pretable-text-dim lands on the
-    // checked fill at about 1.9:1, and a read-only boolean column renders its
-    // control disabled on every row, so a dimmed tick is the whole column's
-    // ticks. The checkbox's disabled look is its own tokens; only the pointer
-    // belongs here. Scoped to the plain cascade — the forced-colours block
-    // below does set GrayText on it, and is answered there by the checked
-    // rules that follow it in source order.
+    // Disabled ink must bring its neutral surface with it, never dim the
+    // glyph while leaving it on the checked accent fill.
     const plain = css.replace(forcedColorsBlock(css), "");
     const off = rulesSelecting(plain, (s) =>
       s.includes("data-pretable-checkbox]:disabled"),
@@ -690,8 +762,8 @@ describe("grid.css cascade contract", () => {
     for (const [, selector, decls] of off)
       expect(
         decls,
-        `"${selector.trim()}" dims the check glyph on the checked fill`,
-      ).not.toMatch(/(^|[;{\s])color\s*:/);
+        `"${selector.trim()}" omits the disabled glyph’s contrasting surface`,
+      ).toMatch(/background:\s*var\(--pretable-bg-grid\)/);
 
     // Forced colours erase the fill AND the glyph's colour, which between
     // them are the whole of what a checkbox says — the committed option's
@@ -2796,3 +2868,123 @@ describe("grid.css cascade contract", () => {
     }
   });
 });
+
+describe("editor kit migration state precedence", () => {
+  test("an inline validation message cannot squeeze the field into a horizontal sliver", () => {
+    const css = strippedCss();
+    expect(
+      rulesSelecting(css, (s) =>
+        s.includes("[data-pretable-cell][data-pretable-edit-status]"),
+      )
+        .map((r) => r[2])
+        .join(""),
+    ).toMatch(/flex-direction:\s*column/);
+  });
+  test("focused invalid input and textarea retain the error outline", () => {
+    const css = strippedCss();
+    const plain = css.replace(forcedColorsBlock(css), "");
+    const focus = plain.lastIndexOf("[data-pretable-text-input]:focus-visible");
+    const invalid = plain.lastIndexOf(
+      '.pretable-cell-editor[aria-invalid="true"]',
+    );
+    expect(invalid).toBeGreaterThan(focus);
+    expect(plain).toContain("[data-pretable-textarea]:focus-visible");
+  });
+  test("textarea has a native field box and editor geometry resets its radius", () => {
+    const css = strippedCss();
+    expect(
+      rulesSelecting(
+        css,
+        (s) => s.trim() === ":where([data-pretable-textarea])",
+      )
+        .map((r) => r[2])
+        .join(""),
+    ).toMatch(/box-sizing:\s*border-box/);
+    expect(
+      rulesSelecting(css, (s) => s.trim() === ":where(.pretable-cell-editor)")
+        .map((r) => r[2])
+        .join(""),
+    ).toMatch(/border-radius:\s*0/);
+  });
+  test("calendar cursor and disabled states survive forced colors independently of selection", () => {
+    const css = strippedCss();
+    const forced = forcedColorsBlock(css);
+    expect(
+      rulesSelecting(forced, (s) => s.includes("[data-pretable-date-active]"))
+        .map((r) => r[2])
+        .join(""),
+    ).toMatch(/outline:\s*2px solid/);
+    expect(
+      rulesSelecting(forced, (s) =>
+        s.includes('[data-pretable-date-day][aria-disabled="true"]'),
+      )
+        .map((r) => r[2])
+        .join(""),
+    ).toMatch(/color:\s*GrayText/);
+    expect(
+      rulesSelecting(
+        css,
+        (s) =>
+          s.includes("[data-pretable-date-day]:hover") &&
+          !s.includes(':not([aria-disabled="true"])'),
+      ),
+    ).toHaveLength(0);
+  });
+  test("number action hover excludes disabled kit controls", () => {
+    const css = strippedCss();
+    expect(
+      rulesSelecting(
+        css,
+        (s) =>
+          s.includes("data-pretable-number-steppers") &&
+          s.includes(":hover") &&
+          !s.includes(":not(:disabled)"),
+      ),
+    ).toHaveLength(0);
+  });
+});
+
+test("editor state rules preserve boolean placement and system-painted action controls", () => {
+  const css = strippedCss();
+  const plain = css.replace(forcedColorsBlock(css), "");
+  const layout = rulesSelecting(
+    css,
+    (s) =>
+      s.includes("[data-pretable-cell][data-pretable-edit-status]") &&
+      !s.includes(" > "),
+  );
+  expect(
+    layout.every((r) => r[1].includes(":has(.pretable-cell-editor)")),
+  ).toBe(true);
+  expect(
+    rulesSelecting(plain, (s) =>
+      s.includes("[data-pretable-textarea]:disabled"),
+    )
+      .map((r) => r[2])
+      .join(""),
+  ).toMatch(/color:\s*var\(--pretable-text-dim\)/);
+  const forced = forcedColorsBlock(css);
+  expect(
+    rulesSelecting(forced, (s) =>
+      s.includes("[data-pretable-number-increment]"),
+    )
+      .map((r) => r[2])
+      .join(""),
+  ).toMatch(/background-color:\s*Canvas/);
+  expect(
+    rulesSelecting(
+      forced,
+      (s) => s.trim() === ":where([data-pretable-date-day])",
+    )
+      .map((r) => r[2])
+      .join(""),
+  ).toMatch(/box-shadow:\s*none/);
+  expect(
+    rulesSelecting(
+      css,
+      (s) => s.trim() === ":where([data-pretable-edit-error])",
+    )
+      .map((r) => r[2])
+      .join(""),
+  ).toMatch(/white-space:\s*nowrap/);
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 15d74cb54..82ce175d2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -106,10 +106,10 @@ importers:
         version: 4.1.11(@types/node@26.4.0)(jsdom@30.0.1)(vite@8.2.2(@types/node@26.4.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.51.2)(tsx@4.23.12)(yaml@2.9.0))
       webpack:
         specifier: 5.110.2
-        version: 5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2))
+        version: 5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2))
       webpack-cli:
         specifier: 7.2.3
-        version: 7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2)
+        version: 7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2)
       yaml:
         specifier: ^2.9.0
         version: 2.9.0
@@ -240,7 +240,7 @@ importers:
     devDependencies:
       '@mdx-js/loader':
         specifier: ^3.1.0
-        version: 3.1.1(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2)))
+        version: 3.1.1(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2)))
       '@mdx-js/react':
         specifier: ^3.1.0
         version: 3.1.1(@types/react@19.2.18)(react@19.2.8)
@@ -249,7 +249,7 @@ importers:
         version: 3.1.1(rollup@4.60.1)
       '@next/mdx':
         specifier: ^16.3.3
-        version: 16.3.3(@mdx-js/loader@3.1.1(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2))))(@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8))
+        version: 16.3.3(@mdx-js/loader@3.1.1(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2))))(@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8))
       '@tailwindcss/postcss':
         specifier: ^4.3.3
         version: 4.3.3
@@ -3009,12 +3009,12 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@3.15.1:
-    resolution: {integrity: sha512-S99WuO3HlhO3XN41EtYUNl9zzXjoJx7QvmipxsJVxtCBT0YHEFy+iOJhjSvrmV12nYhWpZaM8lPHkJm0yUMbag==}
+  js-yaml@3.15.2:
+    resolution: {integrity: sha512-6EuL879VkRA+1Cz578mKMiKvjPNEuk6+r1JaFzoSWejZmtf7xWbIyw1e3KkxlkzTIt9Taw6JBhEppG7utc1P+w==}
     hasBin: true
 
-  js-yaml@4.3.1:
-    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
+  js-yaml@4.3.2:
+    resolution: {integrity: sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==}
     hasBin: true
 
   jsdom@30.0.1:
@@ -5169,12 +5169,12 @@ snapshots:
       tinyglobby: 0.2.17
       yaml: 2.9.0
 
-  '@mdx-js/loader@3.1.1(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2)))':
+  '@mdx-js/loader@3.1.1(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2)))':
     dependencies:
       '@mdx-js/mdx': 3.1.1
       source-map: 0.7.6
     optionalDependencies:
-      webpack: 5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2))
+      webpack: 5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2))
     transitivePeerDependencies:
       - supports-color
 
@@ -5383,11 +5383,11 @@ snapshots:
 
   '@next/env@16.3.3': {}
 
-  '@next/mdx@16.3.3(@mdx-js/loader@3.1.1(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2))))(@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8))':
+  '@next/mdx@16.3.3(@mdx-js/loader@3.1.1(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2))))(@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8))':
     dependencies:
       source-map: 0.7.6
     optionalDependencies:
-      '@mdx-js/loader': 3.1.1(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2)))
+      '@mdx-js/loader': 3.1.1(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2)))
       '@mdx-js/react': 3.1.1(@types/react@19.2.18)(react@19.2.8)
 
   '@next/swc-darwin-arm64@16.3.3':
@@ -6773,7 +6773,7 @@ snapshots:
 
   gray-matter@4.0.3:
     dependencies:
-      js-yaml: 3.15.1
+      js-yaml: 3.15.2
       kind-of: 6.0.3
       section-matter: 1.0.0
       strip-bom-string: 1.0.0
@@ -6986,12 +6986,12 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-yaml@3.15.1:
+  js-yaml@3.15.2:
     dependencies:
       argparse: 1.0.10
       esprima: 4.0.1
 
-  js-yaml@4.3.1:
+  js-yaml@4.3.2:
     dependencies:
       argparse: 2.0.1
     optional: true
@@ -7664,13 +7664,13 @@ snapshots:
     dependencies:
       brace-expansion: 5.0.9
 
-  minimizer-webpack-plugin@5.8.0(esbuild@0.28.1)(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2))):
+  minimizer-webpack-plugin@5.8.0(esbuild@0.28.1)(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2))):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
       schema-utils: 4.3.3
       terser: 5.51.2
-      webpack: 5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2))
+      webpack: 5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2))
     optionalDependencies:
       esbuild: 0.28.1
 
@@ -8593,7 +8593,7 @@ snapshots:
 
   webidl-conversions@8.0.1: {}
 
-  webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2):
+  webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2):
     dependencies:
       '@discoveryjs/json-ext': 1.1.0
       commander: 14.0.3
@@ -8602,10 +8602,10 @@ snapshots:
       import-local: 3.2.0
       interpret: 3.1.1
       rechoir: 0.8.0
-      webpack: 5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2))
+      webpack: 5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2))
       webpack-merge: 6.0.1
     optionalDependencies:
-      js-yaml: 4.3.1
+      js-yaml: 4.3.2
       json5: 2.2.3
 
   webpack-merge@6.0.1:
@@ -8616,7 +8616,7 @@ snapshots:
 
   webpack-sources@3.5.1: {}
 
-  webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2)):
+  webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2)):
     dependencies:
       '@types/estree': 1.0.9
       '@types/json-schema': 7.0.15
@@ -8631,14 +8631,14 @@ snapshots:
       events: 3.3.0
       graceful-fs: 4.2.11
       mime-db: 1.54.0
-      minimizer-webpack-plugin: 5.8.0(esbuild@0.28.1)(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2)))
+      minimizer-webpack-plugin: 5.8.0(esbuild@0.28.1)(webpack@5.110.2(esbuild@0.28.1)(webpack-cli@7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2)))
       neo-async: 2.6.2
       schema-utils: 4.3.3
       tapable: 2.3.3
       watchpack: 2.5.2
       webpack-sources: 3.5.1
     optionalDependencies:
-      webpack-cli: 7.2.3(js-yaml@4.3.1)(json5@2.2.3)(webpack@5.110.2)
+      webpack-cli: 7.2.3(js-yaml@4.3.2)(json5@2.2.3)(webpack@5.110.2)
     transitivePeerDependencies:
       - '@minify-html/node'
       - '@swc/core'
diff --git a/test-fixtures/react-compatibility/public-api.tsx b/test-fixtures/react-compatibility/public-api.tsx
index a9d6420b2..60850168f 100644
--- a/test-fixtures/react-compatibility/public-api.tsx
+++ b/test-fixtures/react-compatibility/public-api.tsx
@@ -1,5 +1,13 @@
 import { createColumnHelper } from "@pretable/core";
-import { Pretable, PretableBadge, type PretableLocale } from "@pretable/react";
+import {
+  Pretable,
+  PretableBadge,
+  PretableOverlayProvider,
+  PretableSelect,
+  PretableTextarea,
+  type PretableLocale,
+  type PretableSelectOption,
+} from "@pretable/react";
 import { createBatcher } from "@pretable/stream-adapter";
 import { getDensityHeights } from "@pretable/ui";
 import * as React from "react";
@@ -16,12 +24,24 @@ const columns = [
 const rows = [{ id: "1", name: "Ada" }] as const satisfies readonly Person[];
 const locale: PretableLocale = ["en-US"];
 
+const choices: readonly PretableSelectOption[] = [
+  { value: "one", label: "One" },
+  { value: "two", label: <strong>Two</strong>, textValue: "Two" },
+];
+
 export const publicValues = [createBatcher, getDensityHeights, locale] as const;
 
 export function CompatibilityGrid() {
   return (
-    <>
+    <PretableOverlayProvider container={null}>
       <PretableBadge tone="positive">Ready</PretableBadge>
+      <PretableSelect
+        aria-label="Choice"
+        options={choices}
+        value="one"
+        onChange={() => {}}
+      />
+      <PretableTextarea aria-label="Notes" defaultValue="Ready" />
       <Pretable
         ariaLabel="People"
         columns={columns}
@@ -29,6 +49,6 @@ export function CompatibilityGrid() {
         locale={locale}
         rows={rows}
       />
-    </>
+    </PretableOverlayProvider>
   );
 }
diff --git a/test-fixtures/react-compatibility/runtime.mjs b/test-fixtures/react-compatibility/runtime.mjs
index b5f8b19e4..f82f0aebb 100644
--- a/test-fixtures/react-compatibility/runtime.mjs
+++ b/test-fixtures/react-compatibility/runtime.mjs
@@ -3,7 +3,14 @@ import { createElement, useState } from "react";
 import { hydrateRoot } from "react-dom/client";
 import { renderToString } from "react-dom/server";
 
-import { PretableBadge } from "@pretable/react";
+import {
+  PretableBadge,
+  PretableOverlayProvider,
+  PretableCheckbox,
+  PretableSelect,
+  PretableTextInput,
+  PretableTextarea,
+} from "@pretable/react";
 
 function CompatibilityApp() {
   const [count, setCount] = useState(0);
@@ -83,7 +90,66 @@ await waitFor(
   "hydrated interaction",
 );
 const afterInteraction = container.querySelector("[data-value]")?.textContent;
+// Exercise the composed refs in the packed package under every supported
+// runtime. A cleanup-returning consumer callback must work through the kit's
+// adapter even on React 18, where the DOM ref itself must return void.
+const attached = [];
+const detached = [];
+const nullCalls = [];
+const controlRef = (name) => (node) => {
+  if (node === null) {
+    nullCalls.push(name);
+    return;
+  }
+  attached.push(name);
+  return () => detached.push(name);
+};
+const portalHost = dom.window.document.createElement("div");
+dom.window.document.body.append(portalHost);
+root.render(
+  createElement(
+    PretableOverlayProvider,
+    { container: portalHost },
+    createElement(PretableCheckbox, {
+      "aria-label": "Compatibility checkbox",
+      checked: false,
+      onCheckedChange: () => {},
+      ref: controlRef("checkbox"),
+    }),
+    createElement(PretableSelect, {
+      "aria-label": "Compatibility select",
+      value: "one",
+      options: [{ value: "one", label: "One" }],
+      onChange: () => {},
+      ref: controlRef("select"),
+    }),
+    createElement(PretableTextarea, {
+      "aria-label": "Compatibility notes",
+      ref: controlRef("textarea"),
+    }),
+    createElement(PretableTextInput, {
+      "aria-label": "Compatibility input",
+      ref: controlRef("input"),
+    }),
+  ),
+);
+await waitFor(() => attached.length === 4, "control ref attachment");
+container
+  .querySelector("[data-pretable-select]")
+  .dispatchEvent(new dom.window.MouseEvent("click", { bubbles: true }));
+await waitFor(
+  () => portalHost.querySelector('[role="listbox"]') !== null,
+  "scoped portal attachment",
+);
 root.unmount();
+if (portalHost.childNodes.length !== 0)
+  throw new Error("Scoped portal did not detach");
+portalHost.remove();
+if (detached.length !== 4 || nullCalls.length !== 0) {
+  throw new Error(
+    `Control ref cleanup failed: ${JSON.stringify({ attached, detached, nullCalls })}`,
+  );
+}
 await new Promise((resolve) => setTimeout(resolve, 0));
 
 process.off("unhandledRejection", onUnhandledRejection);
diff --git a/type-tests/react/components-select.types.tsx b/type-tests/react/components-select.types.tsx
index f6cbc2ec6..26e5942dc 100644
--- a/type-tests/react/components-select.types.tsx
+++ b/type-tests/react/components-select.types.tsx
@@ -128,3 +128,20 @@ const components: PretableComponents = { Select: PretableSelect };
 void components;
 const slot: PretableSelectComponent = PretableSelect;
 void slot;
+
+const textOptions: readonly PretableSelectOption[] = [
+  { value: "number", label: 42 },
+  { value: "override", label: "Displayed", textValue: "Searchable" },
+  { value: "rich", label: <span>Rich</span>, textValue: "Rich" },
+  { value: "empty", label: null, textValue: "Empty" },
+];
+void textOptions;
+// @ts-expect-error — rich labels require explicit typeahead text
+const missingRichText: PretableSelectOption = {
+  value: "rich",
+  label: <span>Rich</span>,
+};
+// @ts-expect-error — non-primitive labels also require explicit text
+const missingEmptyText: PretableSelectOption = { value: "empty", label: null };
+void missingRichText;
+void missingEmptyText;
diff --git a/type-tests/react/components-textarea.types.tsx b/type-tests/react/components-textarea.types.tsx
new file mode 100644
index 000000000..f91bc701b
--- /dev/null
+++ b/type-tests/react/components-textarea.types.tsx
@@ -0,0 +1,45 @@
+import {
+  PretableTextarea,
+  type PretableTextareaProps,
+  type PretableTextareaComponent,
+  type PretableComponents,
+  type PretableBuiltInSite,
+} from "@pretable/react";
+import { forwardRef } from "react";
+const ref = { current: null as HTMLTextAreaElement | null };
+<PretableTextarea
+  ref={ref}
+  site="cell-editor"
+  rows={3}
+  wrap="soft"
+  name="notes"
+  autoComplete="off"
+  readOnly
+  aria-invalid
+  onChange={(event) => {
+    const node: HTMLTextAreaElement = event.currentTarget;
+    void node;
+  }}
+/>;
+// @ts-expect-error textarea has no input type
+<PretableTextarea type="number" />;
+// @ts-expect-error textarea refs require the textarea node
+<PretableTextarea ref={{ current: null as HTMLInputElement | null }} />;
+// @ts-expect-error use value or defaultValue rather than children
+<PretableTextarea>Notes</PretableTextarea>;
+const Replacement: PretableTextareaComponent = forwardRef<
+  HTMLTextAreaElement,
+  PretableTextareaProps
+>(({ site, ...props }, fieldRef) => (
+  <textarea {...props} ref={fieldRef} data-site={site} />
+));
+const slots: PretableComponents = { Textarea: Replacement };
+const sites: PretableBuiltInSite[] = [
+  "cell-editor",
+  "number-increment",
+  "number-decrement",
+  "date-previous-month",
+  "date-next-month",
+];
+void slots;
+void sites;
diff --git a/type-tests/react/overlay-provider.types.tsx b/type-tests/react/overlay-provider.types.tsx
new file mode 100644
index 000000000..966be98e6
--- /dev/null
+++ b/type-tests/react/overlay-provider.types.tsx
@@ -0,0 +1,23 @@
+import {
+  PretableOverlayProvider,
+  type PretableOverlayProviderProps,
+} from "@pretable/react";
+import type { Equal, Expect } from "../shared/assert";
+export type OverlayContainer = Expect<
+  Equal<PretableOverlayProviderProps["container"], HTMLElement | null>
+>;
+const container = document.createElement("div");
+<PretableOverlayProvider container={container}>
+  <div />
+</PretableOverlayProvider>;
+<PretableOverlayProvider container={null}>
+  <div />
+</PretableOverlayProvider>;
+// @ts-expect-error — null waits, but omission must not silently select body
+<PretableOverlayProvider>
+  <div />
+</PretableOverlayProvider>;
+// @ts-expect-error — the portal host is an element, not a selector
+<PretableOverlayProvider container="#host">
+  <div />
+</PretableOverlayProvider>;