diff --git a/packages/core/src/components/data-table/body.tsx b/packages/core/src/components/data-table/body.tsx
new file mode 100644
index 00000000..40951bb0
--- /dev/null
+++ b/packages/core/src/components/data-table/body.tsx
@@ -0,0 +1,115 @@
+import { useContext, useMemo } from "react";
+import { Table } from "@/components/table";
+import { DataTableContext, PinMeasureContext } from "./context";
+import { buildColumnKeys, computePinLayout } from "./column-layout";
+import { DataTableLoaderRows, DataTableStatusRow } from "./status-rows";
+import { DataTableRows } from "./rows";
+import { useDataTableT } from "./i18n";
+
+// Fallback row count when no pageSize is configured (static / uncontrolled tables)
+const DEFAULT_ROWS = 5;
+
+/** @internal */
+function DataTableBody({ className }: { className?: string }) {
+  const ctx = useContext(DataTableContext);
+  if (!ctx) {
+    throw new Error("<DataTable.Body> must be used within <DataTable.Root>");
+  }
+  const {
+    columns: allColumns,
+    visibleColumns: columns,
+    pinnedColumns,
+    rows,
+    loading,
+    error,
+    onClickRow,
+    rowActions,
+    isRowSelected,
+    toggleRowSelection,
+    pageSize,
+    rowExpansion,
+    isRowExpanded,
+    toggleRowExpansion,
+  } = ctx;
+  const t = useDataTableT();
+  const widths = useContext(PinMeasureContext);
+  const hasRowActions = !!(rowActions && rowActions.length > 0);
+  const hasSelection = !!toggleRowSelection;
+  const hasExpand = !!rowExpansion;
+  const totalColSpan =
+    (columns?.length ?? 1) + (hasRowActions ? 1 : 0) + (hasSelection ? 1 : 0) + (hasExpand ? 1 : 0);
+  const rowCount = pageSize > 0 ? pageSize : DEFAULT_ROWS;
+  const columnKeys = useMemo(() => buildColumnKeys(allColumns), [allColumns]);
+  const pinLayout = useMemo(
+    () =>
+      computePinLayout(columns, pinnedColumns, {
+        hasSelection,
+        hasExpand,
+        hasRowActions,
+        widths,
+        columnKeys,
+      }),
+    [columns, pinnedColumns, hasSelection, hasExpand, hasRowActions, widths, columnKeys],
+  );
+  const tableBodyProps = {
+    "data-slot": "data-table-body",
+    className,
+  };
+  if (loading) {
+    return (
+      <Table.Body {...tableBodyProps}>
+        <DataTableLoaderRows
+          rowCount={rowCount}
+          pinLayout={pinLayout}
+          hasSelection={hasSelection}
+          hasExpand={hasExpand}
+          hasRowActions={hasRowActions}
+        />
+      </Table.Body>
+    );
+  }
+
+  if (error) {
+    return (
+      <Table.Body {...tableBodyProps}>
+        <DataTableStatusRow totalColSpan={totalColSpan} state="error">
+          <span className="astw:text-danger-text">
+            {t("errorPrefix")} {error.message}
+          </span>
+        </DataTableStatusRow>
+      </Table.Body>
+    );
+  }
+
+  if (!rows || rows.length === 0) {
+    return (
+      <Table.Body {...tableBodyProps}>
+        <DataTableStatusRow totalColSpan={totalColSpan} state="empty">
+          <span className="astw:text-muted-foreground">{t("noData")}</span>
+        </DataTableStatusRow>
+      </Table.Body>
+    );
+  }
+
+  return (
+    <Table.Body {...tableBodyProps}>
+      <DataTableRows
+        rows={rows}
+        pinLayout={pinLayout}
+        hasSelection={hasSelection}
+        hasRowActions={hasRowActions}
+        isRowSelected={isRowSelected}
+        toggleRowSelection={toggleRowSelection}
+        rowActions={rowActions}
+        onClickRow={onClickRow}
+        totalColSpan={totalColSpan}
+        rowExpansion={rowExpansion}
+        isRowExpanded={isRowExpanded}
+        toggleRowExpansion={toggleRowExpansion}
+      />
+    </Table.Body>
+  );
+}
+DataTableBody.displayName = "DataTable.Body";
+
+export { DataTableBody };
diff --git a/packages/core/src/components/data-table/cell-renderers.tsx b/packages/core/src/components/data-table/cell-renderers.tsx
index ade1595e..c6b91dcf 100644
--- a/packages/core/src/components/data-table/cell-renderers.tsx
+++ b/packages/core/src/components/data-table/cell-renderers.tsx
@@ -3,7 +3,7 @@ import { parseDate } from "@internationalized/date";
 import { Link } from "react-router";
 import { BadgeList, toValueArray } from "@/components/badge-list";
 import type { SelectOption } from "@/types/collection";
-import { optionLabel, resolveBadgeOptions } from "./cell-edit";
+import { optionLabel, resolveBadgeOptions } from "./cell-values";
 import { normalizeTemporalFilterValue } from "@/lib/temporal-filter-values";
 import type {
   BadgeCellOptions,
diff --git a/packages/core/src/components/data-table/cell-rendering.test.tsx b/packages/core/src/components/data-table/cell-rendering.test.tsx
new file mode 100644
index 00000000..5217ba45
--- /dev/null
+++ b/packages/core/src/components/data-table/cell-rendering.test.tsx
@@ -0,0 +1,620 @@
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import type { ReactNode } from "react";
+import { resetLocalTimeZone } from "@internationalized/date";
+import { AppShellConfigContext, buildConfigurations } from "@/contexts/appshell-context";
+import { DataTable } from "./data-table";
+import { useDataTable } from "./use-data-table";
+import type { Column } from "./types";
+import { wrapper, createTimeZoneWrapper, stubBrowserTimeZone } from "./test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+  resetLocalTimeZone();
+  vi.restoreAllMocks();
+});
+
+describe("DataTable", () => {
+  it("renders editable and read-only dates in the same AppShell timezone", () => {
+    stubBrowserTimeZone();
+    type Row = { id: string; value: string };
+    function Harness() {
+      const table = useDataTable<Row>({
+        columns: [
+          {
+            id: "value",
+            label: "Date",
+            type: "date",
+            typeOptions: { locale: "en-US" },
+            edit: { canEdit: (row) => row.id === "1", onValueCommitted: vi.fn() },
+          },
+        ],
+        data: {
+          rows: [
+            { id: "1", value: "2026-10-09T00:00:00Z" },
+            { id: "2", value: "2026-10-09T00:00:00Z" },
+            { id: "3", value: "2026-10-09" },
+          ],
+        },
+      });
+      return (
+        <DataTable.Root value={table}>
+          <DataTable.Table />
+        </DataTable.Root>
+      );
+    }
+    render(<Harness />, { wrapper: createTimeZoneWrapper("America/New_York") });
+    expect(screen.getAllByText("Oct 8, 2026")).toHaveLength(2);
+    expect(screen.getByRole("button", { name: "Date, Oct 8, 2026" })).toBeDefined();
+    expect(screen.getByText("Oct 9, 2026")).toBeDefined();
+  });
+
+  it("reuses date formatters on row updates and refreshes them for column or timezone changes", () => {
+    const DateTimeFormat = Intl.DateTimeFormat;
+    const formatterSpy = vi
+      .spyOn(Intl, "DateTimeFormat")
+      .mockImplementation(function (locales, options) {
+        return new DateTimeFormat(locales, options);
+      });
+    type Row = { id: string; value: string };
+    const columns: Column<Row>[] = [
+      { id: "value", type: "date", typeOptions: { locale: "en-US" } },
+      {
+        id: "custom",
+        type: "date",
+        typeOptions: { locale: "not a locale" },
+        render: () => "Custom renderer",
+      },
+    ];
+    const rows = [
+      { id: "1", value: "2026-10-09" },
+      { id: "2", value: "2026-10-09T00:00:00Z" },
+    ];
+    function Harness({
+      rows: currentRows,
+      columns: currentColumns,
+      timeZone,
+    }: {
+      rows: Row[];
+      columns: Column<Row>[];
+      timeZone: string;
+    }) {
+      const table = useDataTable<Row>({ columns: currentColumns, data: { rows: currentRows } });
+      return (
+        <AppShellConfigContext.Provider
+          value={{ configurations: buildConfigurations({ modules: [], locale: "en", timeZone }) }}
+        >
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        </AppShellConfigContext.Provider>
+      );
+    }
+    const formatterCount = () =>
+      formatterSpy.mock.calls.filter(
+        ([, options]) => options?.month === "short" || options?.month === "long",
+      ).length;
+    const { rerender } = render(
+      <Harness rows={rows} columns={columns} timeZone="America/New_York" />,
+    );
+    expect(screen.getByText("Oct 8, 2026")).toBeDefined();
+    const initialCount = formatterCount();
+    expect(initialCount).toBeGreaterThan(0);
+
+    const nextRows = [...rows, { id: "3", value: "2026-10-10" }];
+    rerender(<Harness rows={nextRows} columns={columns} timeZone="America/New_York" />);
+    expect(screen.getByText("Oct 10, 2026")).toBeDefined();
+    expect(formatterCount()).toBe(initialCount);
+
+    rerender(<Harness rows={nextRows} columns={columns} timeZone="Asia/Tokyo" />);
+    expect(screen.queryByText("Oct 8, 2026")).toBeNull();
+    const zonedCount = formatterCount();
+    expect(zonedCount).toBeGreaterThan(initialCount);
+
+    const nextColumns: Column<Row>[] = [
+      { id: "value", type: "date", typeOptions: { locale: "de-DE", dateFormat: "long" } },
+    ];
+    rerender(<Harness rows={nextRows} columns={nextColumns} timeZone="Asia/Tokyo" />);
+    expect(screen.getAllByText("9. Oktober 2026")).toHaveLength(2);
+    expect(formatterCount()).toBeGreaterThan(zonedCount);
+  });
+
+  describe("column type renderers", () => {
+    type TypedRow = {
+      id: string;
+      name: string | null;
+      total: number | null;
+      currency: string;
+      placedAt: string | null;
+      status: string;
+      detailUrl: string | null;
+    };
+
+    const typedRows: TypedRow[] = [
+      {
+        id: "1",
+        name: "Order 1",
+        total: 1234.5,
+        currency: "USD",
+        placedAt: "2026-04-09T12:00:00Z",
+        status: "shipped",
+        detailUrl: "/orders/1",
+      },
+      {
+        id: "2",
+        name: null,
+        total: null,
+        currency: "JPY",
+        placedAt: null,
+        status: "unknown",
+        detailUrl: null,
+      },
+    ];
+
+    function renderTypedTable(columns: Column<TypedRow>[]) {
+      function Harness() {
+        const table = useDataTable<TypedRow>({
+          columns,
+          data: { rows: typedRows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      return render(<Harness />, { wrapper });
+    }
+
+    it("renders text cells with — placeholder for null values", () => {
+      const { container } = renderTypedTable([
+        { label: "Name", type: "text", accessor: (r) => r.name },
+      ]);
+      expect(container.textContent).toContain("Order 1");
+      expect(container.textContent).toContain("—");
+    });
+
+    it("renders money cells with currency formatting", () => {
+      const { container } = renderTypedTable([
+        {
+          label: "Total",
+          type: "money",
+          accessor: (r) => r.total,
+          typeOptions: { currency: "USD", locale: "en-US" },
+        },
+      ]);
+      expect(container.textContent).toContain("$1,234.50");
+    });
+
+    it("reads currency from row via function accessor", () => {
+      const { container } = renderTypedTable([
+        {
+          label: "Total",
+          type: "money",
+          accessor: (r) => r.total ?? 0,
+          typeOptions: { currency: (r) => r.currency, locale: "en-US" },
+        },
+      ]);
+      // First row: USD 1234.5 → "$1,234.50". Second row: JPY 0 → "¥0".
+      expect(container.textContent).toContain("$1,234.50");
+      expect(container.textContent).toContain("¥0");
+    });
+
+    it("renders date cells with short format by default", () => {
+      const { container } = renderTypedTable([
+        {
+          label: "Placed",
+          type: "date",
+          accessor: (r) => r.placedAt,
+          typeOptions: { locale: "en-US" },
+        },
+      ]);
+      expect(container.textContent).toMatch(/Apr 9, 2026/);
+    });
+
+    it("renders badge cells via variant/label maps", () => {
+      const { container } = renderTypedTable([
+        {
+          label: "Status",
+          type: "badge",
+          accessor: (r) => r.status,
+          typeOptions: {
+            badgeVariantMap: { shipped: "success" },
+            badgeLabelMap: { shipped: "Shipped" },
+          },
+        },
+      ]);
+      expect(container.textContent).toContain("Shipped");
+      // Unknown values still render but with default variant + raw label
+      expect(container.textContent).toContain("unknown");
+    });
+
+    it("renders multiple badges from array accessor", () => {
+      const rows = [
+        {
+          id: "1",
+          name: "Item",
+          tags: ["urgent", "fragile"],
+          status: "shipped",
+          amount: 100,
+          date: "2026-01-01",
+          detailUrl: "/items/1",
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<(typeof rows)[number]>({
+          columns: [
+            {
+              label: "Tags",
+              type: "badge",
+              accessor: (r) => r.tags,
+              typeOptions: {
+                badgeVariantMap: { urgent: "error", fragile: "warning" },
+              },
+            },
+          ],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain("urgent");
+      expect(container.textContent).toContain("fragile");
+    });
+
+    it("renders maxVisible badges with +N overflow in DataTable", () => {
+      const rows = [
+        {
+          id: "1",
+          name: "Item",
+          tags: ["a", "b", "c", "d"],
+          status: "shipped",
+          amount: 100,
+          date: "2026-01-01",
+          detailUrl: "/items/1",
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<(typeof rows)[number]>({
+          columns: [
+            {
+              label: "Tags",
+              type: "badge",
+              accessor: (r) => r.tags,
+              typeOptions: { maxVisible: 2 },
+            },
+          ],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain("a");
+      expect(container.textContent).toContain("b");
+      expect(container.textContent).toContain("+2");
+      expect(container.textContent).not.toContain("c");
+      expect(container.textContent).not.toContain("d");
+    });
+
+    it("renders placeholder for empty array in badge column", () => {
+      const rows = [
+        {
+          id: "1",
+          name: "Item",
+          tags: [] as string[],
+          status: "shipped",
+          amount: 100,
+          date: "2026-01-01",
+          detailUrl: "/items/1",
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<(typeof rows)[number]>({
+          columns: [
+            {
+              label: "Tags",
+              type: "badge",
+              accessor: (r) => r.tags,
+            },
+          ],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain("—");
+    });
+
+    it("renders placeholder for array of all-null values in badge column", () => {
+      const rows = [
+        {
+          id: "1",
+          name: "Item",
+          tags: [null, null] as (string | null)[],
+          status: "shipped",
+          amount: 100,
+          date: "2026-01-01",
+          detailUrl: "/items/1",
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<(typeof rows)[number]>({
+          columns: [
+            {
+              label: "Tags",
+              type: "badge",
+              accessor: (r) => r.tags as unknown as string[],
+            },
+          ],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain("—");
+    });
+
+    it("renders placeholder for array of empty strings in badge column", () => {
+      const rows = [
+        {
+          id: "1",
+          name: "Item",
+          tags: ["", ""],
+          status: "shipped",
+          amount: 100,
+          date: "2026-01-01",
+          detailUrl: "/items/1",
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<(typeof rows)[number]>({
+          columns: [
+            {
+              label: "Tags",
+              type: "badge",
+              accessor: (r) => r.tags,
+            },
+          ],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain("—");
+    });
+
+    it("renders link cells with anchor when href is provided", () => {
+      function RouterWrapper({ children }: { children: ReactNode }) {
+        return <MemoryRouter>{wrapper({ children })}</MemoryRouter>;
+      }
+      function Harness() {
+        const table = useDataTable<TypedRow>({
+          columns: [
+            {
+              label: "Name",
+              type: "link",
+              accessor: (r) => r.name,
+              typeOptions: { href: (r) => r.detailUrl },
+            },
+          ],
+          data: { rows: typedRows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper: RouterWrapper });
+      const anchor = container.querySelector("a[href='/orders/1']");
+      expect(anchor).not.toBeNull();
+      expect(anchor?.textContent).toBe("Order 1");
+    });
+
+    it("falls back to row[id] when accessor is omitted", () => {
+      const { container } = renderTypedTable([{ id: "name", type: "text" }]);
+      expect(container.textContent).toContain("Order 1");
+    });
+
+    it("renders boolean as ✓/✗ when no type is set", () => {
+      type BoolRow = { id: string; active: boolean };
+      const rows: BoolRow[] = [
+        { id: "1", active: true },
+        { id: "2", active: false },
+      ];
+      function Harness() {
+        const table = useDataTable<BoolRow>({
+          columns: [{ id: "active", label: "Active", accessor: (r) => r.active }],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain("✓");
+      expect(container.textContent).toContain("✗");
+    });
+
+    it("renders Date as locale string when no type is set", () => {
+      type DateRow = { id: string; createdAt: Date };
+      const date = new Date("2026-03-15T00:00:00Z");
+      const rows: DateRow[] = [{ id: "1", createdAt: date }];
+      function Harness() {
+        const table = useDataTable<DateRow>({
+          columns: [{ id: "createdAt", label: "Created", accessor: (r) => r.createdAt }],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain(date.toLocaleDateString());
+    });
+
+    it("renders object as JSON when no type is set", () => {
+      type ObjRow = { id: string; meta: Record<string, unknown> };
+      const rows: ObjRow[] = [{ id: "1", meta: { foo: "bar" } }];
+      function Harness() {
+        const table = useDataTable<ObjRow>({
+          columns: [{ id: "meta", label: "Meta", accessor: (r) => r.meta }],
+          data: { rows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      expect(container.textContent).toContain('{"foo":"bar"}');
+    });
+
+    it("explicit render overrides type renderer", () => {
+      const { container } = renderTypedTable([
+        {
+          label: "Status",
+          type: "badge",
+          accessor: (r) => r.status,
+          render: (r) => <span data-testid="custom">{r.status.toUpperCase()}</span>,
+        },
+      ]);
+      expect(container.querySelector("[data-testid='custom']")).not.toBeNull();
+      expect(container.textContent).toContain("SHIPPED");
+    });
+
+    // Compile-time tests — these assertions verify the discriminated-union
+    // shape rejects wrong-type options. Runtime behavior is incidental.
+    it("[types] rejects wrong-type options on each branch", () => {
+      const moneyCol: Column<TypedRow> = {
+        type: "money",
+        accessor: (r) => r.total,
+        // @ts-expect-error — badgeVariantMap is not a money option
+        typeOptions: { badgeVariantMap: { shipped: "success" } },
+      };
+      const badgeCol: Column<TypedRow> = {
+        type: "badge",
+        accessor: (r) => r.status,
+        // @ts-expect-error — currency is not a badge option
+        typeOptions: { currency: "USD" },
+      };
+      // @ts-expect-error — text columns reject typeOptions entirely
+      const textCol: Column<TypedRow> = {
+        type: "text",
+        accessor: (r) => r.name,
+        typeOptions: { locale: "en-US" },
+      };
+      // Reference the variables so the binding isn't elided.
+      expect([moneyCol, badgeCol, textCol]).toHaveLength(3);
+    });
+
+    it("[types] requires href on link columns", () => {
+      // @ts-expect-error — link branch requires typeOptions.href
+      const linkColMissingHref: Column<TypedRow> = {
+        type: "link",
+        accessor: (r) => r.name,
+      };
+      const linkColOk: Column<TypedRow> = {
+        type: "link",
+        accessor: (r) => r.name,
+        typeOptions: { href: (r) => r.detailUrl },
+      };
+      expect([linkColMissingHref, linkColOk]).toHaveLength(2);
+    });
+
+    it("[types] rejects array and object accessor return values on typed branches", () => {
+      // Each typed branch narrows accessor's return type to values its
+      // renderer can display. Arrays and plain objects are compile errors —
+      // the built-in renderers never produced anything useful for them. Pass
+      // `render` (and drop `type`) when the cell value isn't a primitive.
+
+      // @ts-expect-error — text accessor cannot return an array
+      const textArr: Column<TypedRow> = {
+        type: "text",
+        accessor: () => [1, 2],
+      };
+      // @ts-expect-error — text accessor cannot return a plain object
+      const textObj: Column<TypedRow> = {
+        type: "text",
+        accessor: () => ({ a: 1 }),
+      };
+      // @ts-expect-error — number accessor cannot return an object
+      const numberObj: Column<TypedRow> = {
+        type: "number",
+        accessor: () => ({ value: 1 }),
+      };
+      // @ts-expect-error — money accessor cannot return an array
+      const moneyArr: Column<TypedRow> = {
+        type: "money",
+        accessor: () => [100],
+      };
+      // @ts-expect-error — date accessor cannot return an array
+      const dateArr: Column<TypedRow> = {
+        type: "date",
+        accessor: () => [2026, 5, 13],
+      };
+      // badge accessor CAN return an array (multi-badge support)
+      const badgeArr: Column<TypedRow> = {
+        type: "badge",
+        accessor: () => ["a", "b"],
+      };
+      // @ts-expect-error — link accessor cannot return a plain object
+      const linkObj: Column<TypedRow> = {
+        type: "link",
+        accessor: () => ({ label: "x" }),
+        typeOptions: { href: () => "/x" },
+      };
+
+      // Date is allowed on the date branch (and only there).
+      const dateOk: Column<TypedRow> = {
+        type: "date",
+        accessor: () => new Date(),
+      };
+      // The untyped branch keeps `unknown` — callers escape the built-in
+      // renderer entirely by providing `render`, so any return is fine.
+      const untypedAny: Column<TypedRow> = {
+        accessor: () => ({ shape: "anything" }),
+        render: () => null,
+      };
+
+      expect([
+        textArr,
+        textObj,
+        numberObj,
+        moneyArr,
+        dateArr,
+        badgeArr,
+        linkObj,
+        dateOk,
+        untypedAny,
+      ]).toHaveLength(9);
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/cell-edit.test.ts b/packages/core/src/components/data-table/cell-values.test.ts
similarity index 99%
rename from packages/core/src/components/data-table/cell-edit.test.ts
rename to packages/core/src/components/data-table/cell-values.test.ts
index aede0122..e6bf9eaa 100644
--- a/packages/core/src/components/data-table/cell-edit.test.ts
+++ b/packages/core/src/components/data-table/cell-values.test.ts
@@ -13,7 +13,7 @@ import {
   toNumberEditText,
   toNumberValue,
   toTextValue,
-} from "./cell-edit";
+} from "./cell-values";
 
 describe("typed text that isn't a number", () => {
   it("is reported as not a number, not silently accepted", () => {
diff --git a/packages/core/src/components/data-table/cell-edit.ts b/packages/core/src/components/data-table/cell-values.ts
similarity index 100%
rename from packages/core/src/components/data-table/cell-edit.ts
rename to packages/core/src/components/data-table/cell-values.ts
diff --git a/packages/core/src/components/data-table/column-footer.tsx b/packages/core/src/components/data-table/column-footer.tsx
new file mode 100644
index 00000000..8f61fd2c
--- /dev/null
+++ b/packages/core/src/components/data-table/column-footer.tsx
@@ -0,0 +1,140 @@
+import { useContext, useMemo, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { Table } from "@/components/table";
+import { DataTableContext, PinMeasureContext } from "./context";
+import {
+  SELECTION_WIDTH,
+  SELECTION_KEY,
+  EXPAND_WIDTH,
+  EXPAND_KEY,
+  ACTIONS_WIDTH,
+  ACTIONS_KEY,
+  buildColumnKeys,
+  computePinLayout,
+  pinCellProps,
+  resolveAlign,
+} from "./column-layout";
+
+function DataTableColumnFooter() {
+  const ctx = useContext(DataTableContext);
+  if (!ctx) {
+    throw new Error("<DataTableColumnFooter> must be used within <DataTable.Root>");
+  }
+  const {
+    columns: allColumns,
+    visibleColumns: columns,
+    pinnedColumns,
+    rows,
+    loading,
+    error,
+    toggleRowSelection,
+    rowExpansion,
+    rowActions,
+  } = ctx;
+  const widths = useContext(PinMeasureContext);
+  const hasSelection = !!toggleRowSelection;
+  const hasExpand = !!rowExpansion;
+  const hasRowActions = !!rowActions?.length;
+  const columnKeys = useMemo(() => buildColumnKeys(allColumns), [allColumns]);
+  const { ordered, keys, placements, selection, expand, actions } = useMemo(
+    () =>
+      computePinLayout(columns, pinnedColumns, {
+        hasSelection,
+        hasExpand,
+        hasRowActions,
+        widths,
+        columnKeys,
+      }),
+    [columns, pinnedColumns, hasSelection, hasExpand, hasRowActions, widths, columnKeys],
+  );
+
+  if (error || !ordered.some((col) => col.footer !== undefined)) return null;
+
+  return (
+    <Table.Footer
+      data-slot="data-table-column-footer"
+      className={cn(
+        "astw:sticky astw:bottom-0 astw:z-10 astw:bg-card",
+        "astw:border-t-0 astw:shadow-[inset_0_1px_0_0_var(--border)]",
+      )}
+    >
+      <Table.Row className="astw:hover:bg-transparent">
+        {hasSelection && (
+          <Table.Cell
+            data-slot="data-table-column-footer-cell"
+            data-col-key={SELECTION_KEY}
+            {...pinCellProps(
+              selection,
+              { style: { width: SELECTION_WIDTH }, className: "astw:pl-3!" },
+              "footer",
+            )}
+          />
+        )}
+        {hasExpand && (
+          <Table.Cell
+            data-slot="data-table-column-footer-cell"
+            data-col-key={EXPAND_KEY}
+            {...pinCellProps(expand, { style: { width: EXPAND_WIDTH } }, "footer")}
+          />
+        )}
+        {ordered.map((col) => {
+          const key = keys.get(col) as string;
+          const footerContext = { rows };
+          const customFooterProps = loading ? undefined : col.footerProps?.(footerContext);
+          let footerContent: ReactNode = null;
+          if (!loading) {
+            footerContent =
+              typeof col.footer === "function" ? col.footer(footerContext) : col.footer;
+          }
+          const { style, className } = pinCellProps(
+            placements.get(col),
+            {
+              style: {
+                ...customFooterProps?.style,
+                ...(col.width ? { width: col.width } : {}),
+              },
+              className: cn(resolveAlign(col) === "right" && "astw:text-right"),
+            },
+            "footer",
+          );
+          return (
+            <Table.Cell
+              key={key}
+              data-slot="data-table-column-footer-cell"
+              data-col-key={key}
+              title={customFooterProps?.title}
+              style={style}
+              className={cn(className, customFooterProps?.className)}
+            >
+              {col.footer !== undefined &&
+                (loading ? (
+                  <div
+                    aria-hidden="true"
+                    className={cn(
+                      "astw:h-4 astw:my-0.5 astw:w-3/5 astw:rounded astw:bg-muted astw:animate-pulse",
+                      resolveAlign(col) === "right" && "astw:ml-auto",
+                    )}
+                  />
+                ) : (
+                  footerContent
+                ))}
+            </Table.Cell>
+          );
+        })}
+        {hasRowActions && (
+          <Table.Cell
+            data-slot="data-table-column-footer-cell"
+            data-col-key={ACTIONS_KEY}
+            {...pinCellProps(
+              actions,
+              { style: { width: ACTIONS_WIDTH }, className: "astw:pr-2!" },
+              "footer",
+            )}
+          />
+        )}
+      </Table.Row>
+    </Table.Footer>
+  );
+}
+
+export { DataTableColumnFooter };
diff --git a/packages/core/src/components/data-table/column-layout.test.tsx b/packages/core/src/components/data-table/column-layout.test.tsx
new file mode 100644
index 00000000..385bf1a2
--- /dev/null
+++ b/packages/core/src/components/data-table/column-layout.test.tsx
@@ -0,0 +1,285 @@
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { act, cleanup, render } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { resetLocalTimeZone } from "@internationalized/date";
+import { TestDataTable, wrapper, headByText, type TestRow } from "./test-utils";
+import { DataTable } from "./data-table";
+import { useDataTable } from "./use-data-table";
+import type { Column, UseDataTableReturn } from "./types";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+  resetLocalTimeZone();
+  vi.restoreAllMocks();
+});
+
+describe("DataTable", () => {
+  describe("column alignment", () => {
+    const alignedColumns: Column<TestRow>[] = [
+      { label: "Name", render: (row) => row.name },
+      { label: "Amount", render: (row) => row.status, align: "right" },
+    ];
+
+    it("applies text-right to the header cell when align=right", () => {
+      const { container } = render(<TestDataTable columns={alignedColumns} />, {
+        wrapper,
+      });
+      const heads = container.querySelectorAll('[data-slot="data-table-header"] th');
+      expect(heads[0]?.className).not.toContain("text-right");
+      expect(heads[1]?.className).toContain("text-right");
+    });
+
+    it("applies text-right to body cells when align=right", () => {
+      const { container } = render(<TestDataTable columns={alignedColumns} />, {
+        wrapper,
+      });
+      const firstRow = container.querySelector('[data-slot="data-table-row"]');
+      const cells = firstRow?.querySelectorAll('[data-slot="data-table-cell"]') ?? [];
+      expect(cells[0]?.className).not.toContain("text-right");
+      expect(cells[1]?.className).toContain("text-right");
+    });
+
+    it("right-aligns the skeleton bar so it doesn't shift on load", () => {
+      const { container } = render(
+        <TestDataTable columns={alignedColumns} data={undefined} loading />,
+        { wrapper },
+      );
+      const firstSkeleton = container.querySelector('[data-datatable-state="loading"]');
+      const skeletonCells = firstSkeleton?.querySelectorAll("td") ?? [];
+      const rightCellBar = skeletonCells[1]?.querySelector("div");
+      expect(rightCellBar?.className).toContain("ml-auto");
+      const leftCellBar = skeletonCells[0]?.querySelector("div");
+      expect(leftCellBar?.className).not.toContain("ml-auto");
+    });
+
+    it("defaults to left alignment when align is unset", () => {
+      const { container } = render(<TestDataTable />, { wrapper });
+      const heads = container.querySelectorAll('[data-slot="data-table-header"] th');
+      heads.forEach((th) => {
+        expect(th.className).not.toContain("text-right");
+      });
+    });
+
+    it("auto-aligns number columns to the right", () => {
+      type NumRow = { id: string; count: number };
+      const numRows: NumRow[] = [{ id: "1", count: 42 }];
+      const cols: Column<NumRow>[] = [{ label: "Count", type: "number", accessor: (r) => r.count }];
+      function Harness() {
+        const table = useDataTable<NumRow>({
+          columns: cols,
+          data: { rows: numRows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      const head = container.querySelector('[data-slot="data-table-header"] th');
+      const cell = container.querySelector('[data-slot="data-table-cell"]');
+      expect(head?.className).toContain("text-right");
+      expect(cell?.className).toContain("text-right");
+    });
+
+    it("auto-aligns money columns to the right", () => {
+      type MoneyRow = { id: string; total: number };
+      const moneyRows: MoneyRow[] = [{ id: "1", total: 100 }];
+      const cols: Column<MoneyRow>[] = [
+        {
+          label: "Total",
+          type: "money",
+          accessor: (r) => r.total,
+          typeOptions: { currency: "USD" },
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<MoneyRow>({
+          columns: cols,
+          data: { rows: moneyRows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      const head = container.querySelector('[data-slot="data-table-header"] th');
+      const cell = container.querySelector('[data-slot="data-table-cell"]');
+      expect(head?.className).toContain("text-right");
+      expect(cell?.className).toContain("text-right");
+    });
+
+    it("does not auto-align non-numeric typed columns (text, date, badge, link)", () => {
+      type Row = { id: string; v: string };
+      const rows: Row[] = [{ id: "1", v: "x" }];
+      const cols: Column<Row>[] = [
+        { label: "Text", type: "text", accessor: (r) => r.v },
+        { label: "Date", type: "date", accessor: (r) => r.v },
+        { label: "Badge", type: "badge", accessor: (r) => r.v },
+        {
+          label: "Link",
+          type: "link",
+          accessor: (r) => r.v,
+          typeOptions: { href: () => "/x" },
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<Row>({ columns: cols, data: { rows } });
+        return (
+          <MemoryRouter>
+            <DataTable.Root value={table}>
+              <DataTable.Table />
+            </DataTable.Root>
+          </MemoryRouter>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      container.querySelectorAll('[data-slot="data-table-header"] th').forEach((th) => {
+        expect(th.className).not.toContain("text-right");
+      });
+    });
+
+    it("explicit align=left overrides the numeric-type auto-default", () => {
+      type NumRow = { id: string; count: number };
+      const numRows: NumRow[] = [{ id: "1", count: 42 }];
+      const cols: Column<NumRow>[] = [
+        {
+          label: "Count",
+          type: "number",
+          accessor: (r) => r.count,
+          align: "left",
+        },
+      ];
+      function Harness() {
+        const table = useDataTable<NumRow>({
+          columns: cols,
+          data: { rows: numRows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      const head = container.querySelector('[data-slot="data-table-header"] th');
+      expect(head?.className).not.toContain("text-right");
+    });
+  });
+
+  describe("pinned columns", () => {
+    type Row = { id: string; a: string; b: string; c: string };
+    const rows: Row[] = [{ id: "1", a: "A1", b: "B1", c: "C1" }];
+    const pinnedCols: Column<Row>[] = [
+      { id: "a", label: "A", width: 100, pin: "left", render: (r) => r.a },
+      { id: "b", label: "B", width: 100, render: (r) => r.b },
+      { id: "c", label: "C", width: 100, pin: "right", render: (r) => r.c },
+    ];
+
+    function PinHarness(props: { onSelectionChange?: (ids: string[]) => void }) {
+      const table = useDataTable<Row>({
+        columns: pinnedCols,
+        data: { rows },
+        onSelectionChange: props.onSelectionChange,
+      });
+      return (
+        <DataTable.Root value={table}>
+          <DataTable.Table />
+        </DataTable.Root>
+      );
+    }
+
+    it("applies sticky positioning + edge offsets to pinned columns", () => {
+      const { container } = render(<PinHarness />, { wrapper });
+      const a = headByText(container, "A");
+      const c = headByText(container, "C");
+      expect(a?.style.position).toBe("sticky");
+      expect(a?.style.left).toBe("0px");
+      expect(c?.style.position).toBe("sticky");
+      expect(c?.style.right).toBe("0px");
+      // Non-pinned column is not sticky.
+      expect(headByText(container, "B")?.style.position).toBe("");
+    });
+
+    it("offsets a left-pinned column past the auto-pinned selection column", () => {
+      const { container } = render(<PinHarness onSelectionChange={() => {}} />, { wrapper });
+      // Selection column auto-pins to the left edge; column A stacks after it.
+      const a = headByText(container, "A");
+      expect(a?.style.left).toBe("52px");
+    });
+
+    it("marks the boundary pinned cell with a scroll-aware freeze shadow", () => {
+      const { container } = render(<PinHarness />, { wrapper });
+      // The shadow pseudo-element is revealed only when the container is scrolled
+      // under that edge (data-pin-shadow-left / -right toggled by DataTable.Table).
+      expect(headByText(container, "A")?.className).toContain("data-pin-shadow-left");
+      expect(headByText(container, "C")?.className).toContain("data-pin-shadow-right");
+    });
+
+    it("honours a pin without a width (offsets come from measured widths)", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      const cols: Column<Row>[] = [
+        { id: "a", label: "A", pin: "left", render: (r) => r.a },
+        { id: "b", label: "B", width: 100, render: (r) => r.b },
+      ];
+      function Harness() {
+        const table = useDataTable<Row>({ columns: cols, data: { rows } });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      // Width is no longer required to pin — the column is still frozen (offsets
+      // are measured at runtime), and there is no dev warning.
+      expect(headByText(container, "A")?.style.position).toBe("sticky");
+      expect(headByText(container, "A")?.style.left).toBe("0px");
+      expect(warn).not.toHaveBeenCalled();
+      warn.mockRestore();
+    });
+
+    it("keeps stored pin state keyed to definition order for a column with no id/label", () => {
+      // The middle column has neither `id` nor `label`, so its key falls back to
+      // its definition index ("1"). Regression for the two-index-space bug:
+      // resolving the render key from the *visible* array would re-key this
+      // column to "0" once the column ahead of it is hidden, silently detaching
+      // its stored pin (and visibility) state.
+      type R = { id: string; a: string; b: string; c: string };
+      const dataRows: R[] = [{ id: "1", a: "A1", b: "B1", c: "C1" }];
+      const cols: Column<R>[] = [
+        { id: "a", label: "A", width: 100, render: (r) => r.a },
+        { width: 100, render: (r) => r.b }, // no id, no label → definition key "1"
+        { id: "c", label: "C", width: 100, render: (r) => r.c },
+      ];
+      let api!: UseDataTableReturn<R>;
+      function Harness() {
+        const table = useDataTable<R>({ columns: cols, data: { rows: dataRows } });
+        api = table;
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      const keyless = () =>
+        container.querySelector<HTMLElement>(
+          '[data-slot="data-table-header"] th[data-col-key="1"]',
+        );
+
+      // Renders under its definition-order key, then pin it (stored under "1").
+      expect(keyless()).not.toBeNull();
+      act(() => api.setPin("1", "left"));
+      expect(keyless()?.style.position).toBe("sticky");
+
+      // Hiding the column ahead of it must NOT re-key it to its new visible
+      // index and drop the pin.
+      act(() => api.toggleColumn("a"));
+      expect(keyless()?.style.position).toBe("sticky");
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/column-layout.ts b/packages/core/src/components/data-table/column-layout.ts
new file mode 100644
index 00000000..06d9d7d2
--- /dev/null
+++ b/packages/core/src/components/data-table/column-layout.ts
@@ -0,0 +1,236 @@
+import type { CSSProperties } from "react";
+import { cn } from "@/lib/utils";
+import type { Column } from "./types";
+
+// Resolve the effective horizontal alignment for a column. Numeric `type`
+// values default to `"right"` so digits line up along their decimal place;
+// everything else defaults to `"left"`. Explicit `col.align` always wins.
+function resolveAlign<TRow extends Record<string, unknown>>(col: Column<TRow>): "left" | "right" {
+  if (col.align) return col.align;
+  if (col.type === "number" || col.type === "money") return "right";
+  return "left";
+}
+
+// Fallback widths of the built-in selection / row-actions columns, used as the
+// innermost anchors before the real widths are measured.
+const SELECTION_WIDTH = 52;
+const ACTIONS_WIDTH = 50;
+const EXPAND_WIDTH = 44;
+// Keys for the built-in selection / row-actions columns in the measured-width map.
+const SELECTION_KEY = "__datatable_selection__";
+const ACTIONS_KEY = "__datatable_actions__";
+const EXPAND_KEY = "__datatable_expand__";
+
+type PinSide = "left" | "right";
+type ColumnWidths = Record<string, number>;
+
+interface PinPlacement {
+  side: PinSide;
+  /** Distance from the pinned edge, in px. */
+  offset: number;
+  /** True for the cell at the freeze seam — it draws the divider border. */
+  isBoundary: boolean;
+}
+
+interface PinLayout<TRow extends Record<string, unknown>> {
+  /** Visible columns reordered into `[left-pinned, unpinned, right-pinned]`. */
+  ordered: Column<TRow>[];
+  /** Render key per column (data-col-key + React key), keyed by column reference. */
+  keys: Map<Column<TRow>, string>;
+  /** Sticky placement per pinned column (keyed by column reference). */
+  placements: Map<Column<TRow>, PinPlacement>;
+  /** Placement for the built-in selection column, when pinned. */
+  selection?: PinPlacement;
+  /** Placement for the built-in expand column, when present. */
+  expand?: PinPlacement;
+  /** Placement for the built-in row-actions column, when pinned. */
+  actions?: PinPlacement;
+}
+
+function columnKeyAt<TRow extends Record<string, unknown>>(
+  col: Column<TRow>,
+  index: number,
+): string {
+  return col.id ?? col.label ?? String(index);
+}
+
+/** Rendered width for a column key: the measured value wins once > 0, else the
+ *  declared width, else 0. */
+function resolveWidth(key: string, declared: number | undefined, widths: ColumnWidths): number {
+  const measured = widths[key];
+  return measured && measured > 0 ? measured : (declared ?? 0);
+}
+
+/**
+ * Resolve a column's effective pin: the per-user override wins over the static
+ * default. `"none"` is an explicit unpin (overrides a pinned default).
+ */
+function resolvePin(
+  stored: "left" | "right" | "none" | undefined,
+  defaultPin: PinSide | undefined,
+): PinSide | undefined {
+  if (stored === "none") return undefined;
+  return stored ?? defaultPin;
+}
+
+/**
+ * Definition-order `col → key` map — the single source of truth for a column's
+ * identity, matching how `useDataTable` / `ColumnSettings` store order,
+ * visibility, and pin state. Built from the **full** column list so a key never
+ * depends on the column's position in the filtered/reordered *visible* array: a
+ * column with neither `id` nor `label` falls back to `String(index)`, and keying
+ * it off its visible index would silently detach its stored pin/visibility once
+ * a sibling is hidden or moved. Keyed by reference — `visibleColumns` reuses
+ * these same column objects.
+ */
+function buildColumnKeys<TRow extends Record<string, unknown>>(
+  columns: Column<TRow>[],
+): Map<Column<TRow>, string> {
+  const keys = new Map<Column<TRow>, string>();
+  columns.forEach((col, index) => keys.set(col, columnKeyAt(col, index)));
+  return keys;
+}
+
+/**
+ * Group the visible columns by pin side and compute cumulative sticky offsets.
+ * The selection and expand columns (when present) auto-pin to the left edge and
+ * row-actions (if present) auto-pins to the right edge, with user-pinned columns
+ * stacking outward from them.
+ *
+ * `columnKeys` is the definition-order key map (see {@link buildColumnKeys});
+ * `columns` here is the visible/reordered subset, so keys are resolved by
+ * reference from that map rather than from each column's position in it.
+ */
+function computePinLayout<TRow extends Record<string, unknown>>(
+  columns: Column<TRow>[],
+  pinnedColumns: Record<string, "left" | "right" | "none">,
+  opts: {
+    hasSelection: boolean;
+    hasExpand: boolean;
+    hasRowActions: boolean;
+    widths: ColumnWidths;
+    columnKeys: Map<Column<TRow>, string>;
+  },
+): PinLayout<TRow> {
+  const { hasSelection, hasExpand, hasRowActions, widths, columnKeys } = opts;
+
+  const keyOf = (col: Column<TRow>): string => columnKeys.get(col) as string;
+
+  const keys = new Map<Column<TRow>, string>();
+  columns.forEach((col) => keys.set(col, keyOf(col)));
+
+  const left: Column<TRow>[] = [];
+  const middle: Column<TRow>[] = [];
+  const right: Column<TRow>[] = [];
+
+  columns.forEach((col) => {
+    const pin = resolvePin(pinnedColumns[keyOf(col)], col.pin);
+    if (pin === "left") left.push(col);
+    else if (pin === "right") right.push(col);
+    else middle.push(col);
+  });
+
+  const placements = new Map<Column<TRow>, PinPlacement>();
+
+  // Left group, visually [selection?, expand?, ...left]; offsets accumulate
+  // rightward using the measured (or declared) width of each preceding pinned
+  // column. `isBoundary` marks the outermost cell of the group — the one that
+  // draws the freeze seam — so it moves to `expand` as soon as that column exists.
+  let leftOffset = 0;
+  let selection: PinPlacement | undefined;
+  let expand: PinPlacement | undefined;
+  if (hasSelection) {
+    selection = { side: "left", offset: 0, isBoundary: !hasExpand && left.length === 0 };
+    leftOffset = resolveWidth(SELECTION_KEY, SELECTION_WIDTH, widths);
+  }
+  if (hasExpand) {
+    expand = { side: "left", offset: leftOffset, isBoundary: left.length === 0 };
+    leftOffset += resolveWidth(EXPAND_KEY, EXPAND_WIDTH, widths);
+  }
+  left.forEach((col, i) => {
+    placements.set(col, { side: "left", offset: leftOffset, isBoundary: i === left.length - 1 });
+    leftOffset += resolveWidth(keys.get(col) as string, col.width, widths);
+  });
+
+  // Right group, visually [...right, actions?]; offsets accumulate leftward.
+  let rightOffset = 0;
+  let actions: PinPlacement | undefined;
+  if (hasRowActions) {
+    actions = { side: "right", offset: 0, isBoundary: right.length === 0 };
+    rightOffset = resolveWidth(ACTIONS_KEY, ACTIONS_WIDTH, widths);
+  }
+  for (let i = right.length - 1; i >= 0; i--) {
+    const col = right[i];
+    placements.set(col, { side: "right", offset: rightOffset, isBoundary: i === 0 });
+    rightOffset += resolveWidth(keys.get(col) as string, col.width, widths);
+  }
+
+  return { ordered: [...left, ...middle, ...right], keys, placements, selection, expand, actions };
+}
+
+/**
+ * Merge sticky positioning + background + boundary-divider styles onto a cell's
+ * existing style/className. Pinned body cells stay opaque across hover/selected
+ * states so scrolled content never bleeds through them.
+ */
+function pinCellProps(
+  placement: PinPlacement | undefined,
+  base: { style?: CSSProperties; className?: string },
+  variant: "header" | "body" | "footer",
+): { style?: CSSProperties; className?: string } {
+  if (!placement) return base;
+  const style: CSSProperties = {
+    ...base.style,
+    position: "sticky",
+    [placement.side]: placement.offset,
+  };
+  const className = cn(
+    base.className,
+    // Below the sticky header/footer (z-10) but above non-pinned scrolling cells.
+    "astw:z-[1]",
+    variant !== "body"
+      ? // Opaque pinned cells cover the section's inset-shadow divider; redraw
+        // it on the cell because collapsed borders disappear on sticky sections.
+        cn(
+          "astw:bg-card astw:before:pointer-events-none astw:before:absolute astw:before:inset-x-0 astw:before:h-px astw:before:bg-border astw:before:content-['']",
+          variant === "header" ? "astw:before:bottom-0" : "astw:before:top-0",
+        )
+      : cn(
+          "astw:bg-card astw:transition-colors",
+          // Match the row's hover/selected fade timing; without the cell-level
+          // transition, sticky pinned cells snap while the rest of the row fades.
+          "astw:group-hover:[background-color:color-mix(in_srgb,var(--muted)_50%,var(--card))]",
+          "astw:group-aria-selected:bg-muted",
+        ),
+    // Freeze-seam shadow via a pseudo-element gradient. A real `box-shadow` is
+    // dropped by browsers on cells under `border-collapse: collapse` (the table's
+    // model), so we paint a gradient just outside the boundary edge instead — it
+    // sits above the scrolling cells and reads as depth. Hidden at rest; revealed
+    // only while content is scrolled under that edge (data attributes set on the
+    // scroll container by DataTable.Table).
+    placement.isBoundary &&
+      placement.side === "left" &&
+      "astw:after:pointer-events-none astw:after:absolute astw:after:inset-y-0 astw:after:right-0 astw:after:w-1 astw:after:translate-x-full astw:after:bg-gradient-to-r astw:after:from-black/10 astw:dark:after:from-black/20 astw:after:to-transparent astw:after:content-[''] astw:after:opacity-0 astw:after:transition-opacity astw:[[data-pin-shadow-left]_&]:after:opacity-100",
+    placement.isBoundary &&
+      placement.side === "right" &&
+      "astw:after:pointer-events-none astw:after:absolute astw:after:inset-y-0 astw:after:left-0 astw:after:w-1 astw:after:-translate-x-full astw:after:bg-gradient-to-l astw:after:from-black/10 astw:dark:after:from-black/20 astw:after:to-transparent astw:after:content-[''] astw:after:opacity-0 astw:after:transition-opacity astw:[[data-pin-shadow-right]_&]:after:opacity-100",
+  );
+  return { style, className };
+}
+
+export {
+  resolveAlign,
+  SELECTION_WIDTH,
+  ACTIONS_WIDTH,
+  EXPAND_WIDTH,
+  SELECTION_KEY,
+  ACTIONS_KEY,
+  EXPAND_KEY,
+  columnKeyAt,
+  resolvePin,
+  buildColumnKeys,
+  computePinLayout,
+  pinCellProps,
+  type ColumnWidths,
+  type PinLayout,
+};
diff --git a/packages/core/src/components/data-table/column-settings.tsx b/packages/core/src/components/data-table/column-settings.tsx
index 6194e334..5f49af5e 100644
--- a/packages/core/src/components/data-table/column-settings.tsx
+++ b/packages/core/src/components/data-table/column-settings.tsx
@@ -6,8 +6,9 @@ import { Button } from "@/components/button";
 import { Checkbox } from "@/components/checkbox";
 import { Input } from "@/components/input";
 import { Tooltip } from "@/components/tooltip";
-import { useDataTableContext } from "./data-table-context";
+import { useDataTableContext } from "./context";
 import { useDataTableT } from "./i18n";
+import { columnKeyAt } from "./column-layout";
 
 // Shared popup styling, matching DataTable's filter popover. The width cap lives
 // on the popup itself (not the inner fieldset) so base-ui measures the real width
@@ -17,13 +18,6 @@ const POPUP_CLASS = cn(
   "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
 );
 
-// The DataTable column key formula (mirrors useDataTable's getColumnKey);
-// ctx.columns is the full column list in definition order, so the index-based
-// fallback lines up with the keys in ctx.columnOrder.
-function columnKey(col: { id?: string; label?: string }, index: number): string {
-  return col.id ?? col.label ?? String(index);
-}
-
 type Section = "left" | "scrollable" | "right";
 
 // Which pin value a section maps to. "none" explicitly unpins (overriding a
@@ -76,7 +70,7 @@ function DataTableColumnSettings({ className }: { className?: string }) {
     const label = new Map<string, string>();
     const defaultPin = new Map<string, "left" | "right" | undefined>();
     columns.forEach((col, i) => {
-      const key = columnKey(col, i);
+      const key = columnKeyAt(col, i);
       label.set(key, col.label ?? key);
       defaultPin.set(key, col.pin);
     });
diff --git a/packages/core/src/components/data-table/context-menu.test.tsx b/packages/core/src/components/data-table/context-menu.test.tsx
new file mode 100644
index 00000000..22404dca
--- /dev/null
+++ b/packages/core/src/components/data-table/context-menu.test.tsx
@@ -0,0 +1,492 @@
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { cleanup, render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { resetLocalTimeZone } from "@internationalized/date";
+import {
+  TestDataTable,
+  testData,
+  makeControl,
+  wrapper,
+  createTimeZoneWrapper,
+  stubBrowserTimeZone,
+  headByText,
+  openHeaderContextMenu,
+  type TestRow,
+} from "./test-utils";
+import { DataTable } from "./data-table";
+import { useDataTable } from "./use-data-table";
+import type { Column } from "./types";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+  resetLocalTimeZone();
+  vi.restoreAllMocks();
+});
+
+const cellByText = (container: HTMLElement, text: string) =>
+  Array.from(container.querySelectorAll<HTMLElement>('[data-slot="data-table-cell"]')).find(
+    (cell) => cell.textContent?.trim() === text,
+  );
+
+const openCellContextMenu = (container: HTMLElement, text: string) => {
+  fireEvent.contextMenu(cellByText(container, text)!);
+};
+
+const hoverMenuItem = (name: string) => {
+  const item = screen.getByRole("menuitem", { name });
+  fireEvent.mouseEnter(item);
+  fireEvent.mouseMove(item);
+  fireEvent.pointerMove(item);
+};
+
+describe("DataTable", () => {
+  describe("header context menu", () => {
+    it("shows copy, pin, and sort actions on right click", () => {
+      const control = makeControl();
+
+      function Harness() {
+        const table = useDataTable<TestRow>({
+          columns: [
+            {
+              label: "Name",
+              sort: { field: "name", type: "string" },
+              render: (row) => row.name,
+            },
+            { label: "Status", render: (row) => row.status },
+          ],
+          data: testData,
+          control,
+        });
+
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+
+      const { container } = render(<Harness />, { wrapper });
+
+      openHeaderContextMenu(container, "Name");
+
+      expect(screen.getByRole("menuitem", { name: "Copy label" })).toBeDefined();
+      expect(screen.getByRole("menuitem", { name: "Pin column" })).toBeDefined();
+      expect(screen.getByRole("menuitem", { name: "Sort column" })).toBeDefined();
+      expect(screen.queryByRole("menuitem", { name: "Hide column" })).toBeNull();
+    });
+
+    it("copies the column label", async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", {
+        configurable: true,
+        value: { writeText },
+      });
+
+      const { container } = render(<TestDataTable />, { wrapper });
+
+      openHeaderContextMenu(container, "Name");
+      fireEvent.click(screen.getByRole("menuitem", { name: "Copy label" }));
+
+      await waitFor(() => {
+        expect(writeText).toHaveBeenCalledWith("Name");
+      });
+    });
+
+    it("pins a column to the right from the pin submenu", async () => {
+      const user = userEvent.setup();
+      const columns: Column<TestRow>[] = [
+        { id: "name", label: "Name", width: 100, render: (row) => row.name },
+        { id: "status", label: "Status", width: 100, render: (row) => row.status },
+      ];
+      const { container } = render(<TestDataTable columns={columns} />, { wrapper });
+
+      openHeaderContextMenu(container, "Name");
+      hoverMenuItem("Pin column");
+      await user.click(await screen.findByRole("menuitem", { name: "Pin to right" }));
+
+      await waitFor(() => {
+        expect(headByText(container, "Name")?.style.position).toBe("sticky");
+        expect(headByText(container, "Name")?.style.right).toBe("0px");
+      });
+    });
+
+    it("unpins a fixed column from the pin submenu", async () => {
+      const user = userEvent.setup();
+      const columns: Column<TestRow>[] = [
+        { id: "name", label: "Name", width: 100, pin: "left", render: (row) => row.name },
+        { id: "status", label: "Status", width: 100, render: (row) => row.status },
+      ];
+      const { container } = render(<TestDataTable columns={columns} />, { wrapper });
+
+      expect(headByText(container, "Name")?.style.position).toBe("sticky");
+      expect(headByText(container, "Name")?.style.left).toBe("0px");
+
+      openHeaderContextMenu(container, "Name");
+      hoverMenuItem("Pin column");
+      await user.click(await screen.findByRole("menuitem", { name: "Unpin" }));
+
+      await waitFor(() => {
+        expect(headByText(container, "Name")?.style.position).toBe("");
+        expect(headByText(container, "Name")?.style.left).toBe("");
+      });
+    });
+
+    it("sorts a column from the sort submenu", async () => {
+      const user = userEvent.setup();
+      const control = makeControl();
+
+      function Harness() {
+        const table = useDataTable<TestRow>({
+          columns: [
+            {
+              label: "Name",
+              sort: { field: "name", type: "string" },
+              render: (row) => row.name,
+            },
+          ],
+          data: testData,
+          control,
+        });
+
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+
+      const { container } = render(<Harness />, { wrapper });
+
+      openHeaderContextMenu(container, "Name");
+      hoverMenuItem("Sort column");
+      await user.click(await screen.findByRole("menuitem", { name: "Descending" }));
+
+      await waitFor(() => {
+        expect(control.clearSort).toHaveBeenCalledTimes(1);
+        expect(control.setSort).toHaveBeenCalledWith("name", "Desc");
+      });
+    });
+
+    it("resets sort from the sort submenu", async () => {
+      const user = userEvent.setup();
+      const control = makeControl({
+        sortStates: [{ field: "name", direction: "Asc" }],
+      });
+
+      function Harness() {
+        const table = useDataTable<TestRow>({
+          columns: [
+            {
+              label: "Name",
+              sort: { field: "name", type: "string" },
+              render: (row) => row.name,
+            },
+          ],
+          data: testData,
+          control,
+        });
+
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+
+      const { container } = render(<Harness />, { wrapper });
+
+      openHeaderContextMenu(container, "Name");
+      hoverMenuItem("Sort column");
+      await user.click(await screen.findByRole("menuitem", { name: "Reset sort" }));
+
+      await waitFor(() => {
+        expect(control.clearSort).not.toHaveBeenCalled();
+        expect(control.setSort).toHaveBeenCalledWith("name", undefined);
+      });
+    });
+  });
+
+  describe("cell context menu", () => {
+    it("shows copy actions and filter submenu for filterable cells", () => {
+      const control = makeControl();
+
+      function Harness() {
+        const table = useDataTable<TestRow>({
+          columns: [
+            {
+              label: "Name",
+              render: (row) => row.name,
+              filter: { type: "string", field: "name", operators: ["eq", "contains"] },
+            },
+          ],
+          data: testData,
+          control,
+        });
+
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+
+      const { container } = render(<Harness />, { wrapper });
+
+      openCellContextMenu(container, "Alice");
+
+      expect(screen.getByRole("menuitem", { name: "Copy value" })).toBeDefined();
+      expect(screen.getByRole("menuitem", { name: "Copy header and value" })).toBeDefined();
+      expect(screen.getByRole("menuitem", { name: "Add filter" })).toBeDefined();
+    });
+
+    it("copies the cell value", async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", {
+        configurable: true,
+        value: { writeText },
+      });
+
+      const { container } = render(<TestDataTable />, { wrapper });
+
+      openCellContextMenu(container, "Alice");
+      fireEvent.click(screen.getByRole("menuitem", { name: "Copy value" }));
+
+      await waitFor(() => {
+        expect(writeText).toHaveBeenCalledWith("Alice");
+      });
+    });
+
+    it("copies the header and cell value", async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, "clipboard", {
+        configurable: true,
+        value: { writeText },
+      });
+
+      const { container } = render(<TestDataTable />, { wrapper });
+
+      openCellContextMenu(container, "Alice");
+      fireEvent.click(screen.getByRole("menuitem", { name: "Copy header and value" }));
+
+      await waitFor(() => {
+        expect(writeText).toHaveBeenCalledWith("Name Alice");
+      });
+    });
+
+    it("adds a filter from the cell value", async () => {
+      const user = userEvent.setup();
+      const control = makeControl();
+
+      function Harness() {
+        const table = useDataTable<TestRow>({
+          columns: [
+            {
+              label: "Name",
+              render: (row) => row.name,
+              filter: { type: "string", field: "name", operators: ["eq", "contains"] },
+            },
+          ],
+          data: testData,
+          control,
+        });
+
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+
+      const { container } = render(<Harness />, { wrapper });
+
+      openCellContextMenu(container, "Alice");
+      hoverMenuItem("Add filter");
+      await user.click(await screen.findByRole("menuitem", { name: "contains" }));
+
+      expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Alice");
+    });
+
+    it("preserves decimal strings when filtering by a cell value", async () => {
+      const user = userEvent.setup();
+      const control = makeControl();
+      const amount = "9007199254740993.123456789";
+      function Harness() {
+        const table = useDataTable<{ amount: string }>({
+          columns: [
+            { id: "amount", label: "Amount", filter: { type: "decimal", field: "amount" } },
+          ],
+          data: { rows: [{ amount }] },
+          control,
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+      openCellContextMenu(container, amount);
+      hoverMenuItem("Add filter");
+      await user.click(await screen.findByRole("menuitem", { name: "is" }));
+      expect(control.addFilter).toHaveBeenCalledWith("amount", "eq", amount);
+    });
+
+    it.each([
+      ["2026-10-09T01:00:00Z", "Oct 8, 2026, 6:00 PM", "2026-10-09T01:00:00.000Z"],
+      ["2026-10-09T10:00:00+09:00", "Oct 8, 2026, 6:00 PM", "2026-10-09T01:00:00.000Z"],
+      ["2026-10-09T00:00:00", "Oct 9, 2026, 12:00 AM", "2026-10-09T07:00:00.000Z"],
+      ["2026-10-09T00:00", "Oct 9, 2026, 12:00 AM", "2026-10-09T07:00:00.000Z"],
+      [new Date("2026-10-09T01:00:00Z"), "Oct 8, 2026, 6:00 PM", "2026-10-09T01:00:00.000Z"],
+      [Date.parse("2026-10-09T01:00:00Z"), "Oct 8, 2026, 6:00 PM", "2026-10-09T01:00:00.000Z"],
+    ])(
+      "uses the AppShell timezone for the cell and datetime filter from %s",
+      async (value, displayed, instant) => {
+        stubBrowserTimeZone();
+        const user = userEvent.setup();
+        const control = makeControl();
+        type Row = { id: string; createdAt: string | Date | number };
+
+        function Harness() {
+          const table = useDataTable<Row>({
+            columns: [
+              {
+                id: "createdAt",
+                label: "Created At",
+                type: "date",
+                accessor: (row) => row.createdAt,
+                typeOptions: { locale: "en-US", dateFormat: "datetime" },
+                filter: { type: "datetime", field: "createdAt", operators: ["eq"] },
+              },
+            ],
+            data: { rows: [{ id: "1", createdAt: value }] },
+            control,
+          });
+          return (
+            <DataTable.Root value={table}>
+              <DataTable.Table />
+            </DataTable.Root>
+          );
+        }
+
+        const { container } = render(<Harness />, {
+          wrapper: createTimeZoneWrapper("America/Los_Angeles"),
+        });
+        expect(cellByText(container, displayed)).toBeDefined();
+        openCellContextMenu(container, displayed);
+        hoverMenuItem("Add filter");
+        await user.click(await screen.findByRole("menuitem", { name: "is" }));
+        expect(control.addFilter).toHaveBeenCalledWith("createdAt", "eq", instant);
+      },
+    );
+
+    it.each(["America/Los_Angeles", "Asia/Tokyo"])(
+      "preserves date-only cells and filters in %s",
+      async (timeZone) => {
+        stubBrowserTimeZone();
+        const user = userEvent.setup();
+        const control = makeControl();
+        type Row = { id: string; placedOn: string };
+
+        function Harness() {
+          const table = useDataTable<Row>({
+            columns: [
+              {
+                id: "placedOn",
+                label: "Placed On",
+                type: "date",
+                accessor: (row) => row.placedOn,
+                typeOptions: { locale: "en-US" },
+                filter: { type: "date", field: "placedOn", operators: ["eq"] },
+              },
+            ],
+            data: { rows: [{ id: "1", placedOn: "2026-10-09" }] },
+            control,
+          });
+          return (
+            <DataTable.Root value={table}>
+              <DataTable.Table />
+            </DataTable.Root>
+          );
+        }
+
+        const { container } = render(<Harness />, { wrapper: createTimeZoneWrapper(timeZone) });
+        expect(cellByText(container, "Oct 9, 2026")).toBeDefined();
+        openCellContextMenu(container, "Oct 9, 2026");
+        hoverMenuItem("Add filter");
+        await user.click(await screen.findByRole("menuitem", { name: "exact date" }));
+        expect(control.addFilter).toHaveBeenCalledWith("placedOn", "eq", "2026-10-09");
+      },
+    );
+
+    it("normalizes date filters from Date values in the AppShell timezone", async () => {
+      stubBrowserTimeZone();
+      const user = userEvent.setup();
+      const control = makeControl();
+      const value = new Date("2026-09-07T15:00:00.000Z");
+      type Row = { id: string; label: string };
+
+      function Harness() {
+        const table = useDataTable<Row>({
+          columns: [
+            {
+              id: "createdAt",
+              label: "Created At",
+              accessor: () => value,
+              render: (row) => row.label,
+              filter: { type: "date", field: "createdAt", operators: ["eq"] },
+            },
+          ],
+          data: { rows: [{ id: "1", label: "Sep 8, 2026" }] },
+          control,
+        });
+
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+
+      const { container } = render(<Harness />, { wrapper: createTimeZoneWrapper("Asia/Tokyo") });
+
+      openCellContextMenu(container, "Sep 8, 2026");
+      hoverMenuItem("Add filter");
+      await user.click(await screen.findByRole("menuitem", { name: "exact date" }));
+
+      expect(control.addFilter).toHaveBeenCalledWith("createdAt", "eq", "2026-09-08");
+    });
+
+    it("omits Add filter when a temporal value cannot be normalized", () => {
+      const control = makeControl();
+      type Row = { id: string; opensAt: string };
+
+      function Harness() {
+        const table = useDataTable<Row>({
+          columns: [
+            {
+              id: "opensAt",
+              label: "Opens At",
+              render: (row) => row.opensAt,
+              filter: { type: "time", field: "opensAt", operators: ["eq"] },
+            },
+          ],
+          data: { rows: [{ id: "1", opensAt: "not-a-time" }] },
+          control,
+        });
+
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+
+      const { container } = render(<Harness />, { wrapper });
+
+      openCellContextMenu(container, "not-a-time");
+
+      expect(screen.queryByRole("menuitem", { name: "Add filter" })).toBeNull();
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/context-menu.tsx b/packages/core/src/components/data-table/context-menu.tsx
new file mode 100644
index 00000000..f0afedfc
--- /dev/null
+++ b/packages/core/src/components/data-table/context-menu.tsx
@@ -0,0 +1,345 @@
+import type { ReactNode } from "react";
+import { ContextMenu } from "@base-ui/react/context-menu";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTimeZone } from "@/contexts/appshell-context";
+import { useCollectionControlOptional } from "@/contexts/collection-control-context";
+import { isTemporalFilterType, normalizeTemporalFilterValue } from "@/lib/temporal-filter-values";
+import type { Column, DataTableFilterConfig } from "./types";
+import { getCellValue } from "./cell-renderers";
+import { resolvePin } from "./column-layout";
+import { getOperatorLabel, getVisibleFilterOperators } from "./filters/operators";
+import { isDecimalFilterValueValid } from "./filters/values";
+import { useDataTableT } from "./i18n";
+import type { CellContextMenuState } from "./use-cell-context-menu";
+
+const HEADER_CONTEXT_MENU_POPUP_CLASS = cn(
+  "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:min-w-[10rem] astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:p-1 astw:shadow-md",
+  "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
+);
+const HEADER_CONTEXT_MENU_ITEM_CLASS = cn(
+  "astw:relative astw:flex astw:w-full astw:cursor-default astw:select-none astw:items-center astw:gap-2 astw:rounded-sm astw:px-2 astw:py-1.5 astw:text-body-md astw:outline-hidden",
+  "astw:data-highlighted:bg-accent astw:data-highlighted:text-accent-foreground",
+  "astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50",
+);
+const HEADER_CONTEXT_MENU_SUBMENU_TRIGGER_CLASS = cn(
+  HEADER_CONTEXT_MENU_ITEM_CLASS,
+  "astw:justify-between astw:gap-4",
+  "astw:data-popup-open:bg-accent astw:data-popup-open:text-accent-foreground",
+);
+const HEADER_CONTEXT_MENU_SEPARATOR_CLASS = "astw:bg-border astw:-mx-1 astw:my-1 astw:h-px";
+
+function copyTextToClipboard(text: string) {
+  if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return;
+  void navigator.clipboard.writeText(text).catch(() => {
+    // Silently fail if clipboard access is denied.
+  });
+}
+
+function primitiveCellContentValue(content: ReactNode): unknown {
+  if (
+    typeof content === "string" ||
+    typeof content === "number" ||
+    typeof content === "boolean" ||
+    typeof content === "bigint"
+  ) {
+    return content;
+  }
+  return undefined;
+}
+
+function getCellContextValue<TRow extends Record<string, unknown>>(
+  row: TRow,
+  col: Column<TRow>,
+  content: ReactNode,
+): unknown {
+  const raw = getCellValue(row, col);
+  return raw !== undefined ? raw : primitiveCellContentValue(content);
+}
+
+function toClipboardText(value: unknown): string | undefined {
+  if (value == null || value === "") return undefined;
+  if (value instanceof Date) return value.toISOString();
+  if (Array.isArray(value)) {
+    const items = value
+      .map((item) => toClipboardText(item))
+      .filter((item) => item != null && item !== "");
+    return items.length > 0 ? items.join(", ") : undefined;
+  }
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+
+function toFilterValue(value: unknown, config: DataTableFilterConfig, timeZone: string): unknown {
+  if (value == null || value === "") return undefined;
+  if (isTemporalFilterType(config.type)) {
+    return normalizeTemporalFilterValue(config.type, value, timeZone);
+  }
+
+  switch (config.type) {
+    case "number": {
+      const parsed = typeof value === "number" ? value : Number(value);
+      return Number.isNaN(parsed) ? undefined : parsed;
+    }
+    case "decimal": {
+      const decimal = String(value).trim();
+      return isDecimalFilterValueValid(decimal) ? decimal : undefined;
+    }
+    case "boolean": {
+      if (typeof value === "boolean") return value;
+      if (value === "true" || value === "false") return value === "true";
+      return undefined;
+    }
+    case "enum": {
+      if (Array.isArray(value)) {
+        const values = value.map((item) => String(item)).filter((item) => item !== "");
+        return values.length > 0 ? values : undefined;
+      }
+      return [String(value)];
+    }
+    case "string":
+    case "uuid":
+    default:
+      return String(value);
+  }
+}
+
+function supportsCellFilterOperator(operator: string): boolean {
+  return operator !== "between";
+}
+
+function DataTableHeaderContextMenu<TRow extends Record<string, unknown>>({
+  align,
+  children,
+  column,
+  columnKey,
+  pinnedColumns,
+  setPin,
+  sortDirection,
+  onSortDirectionChange,
+}: {
+  align: "left" | "right";
+  children: ReactNode;
+  column: Column<TRow>;
+  columnKey: string;
+  pinnedColumns: Record<string, "left" | "right" | "none">;
+  setPin: (key: string, side: "left" | "right" | "none" | null) => void;
+  sortDirection?: "Asc" | "Desc";
+  onSortDirectionChange?: (direction: "Asc" | "Desc" | undefined) => void;
+}) {
+  const t = useDataTableT();
+  const label = column.label ?? columnKey;
+  const pin = resolvePin(pinnedColumns[columnKey], column.pin);
+
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger
+        data-slot="data-table-header-context-menu-trigger"
+        className={cn(
+          "astw:flex astw:h-full astw:w-full astw:items-center",
+          align === "right" ? "astw:justify-end astw:text-right" : "astw:text-left",
+        )}
+      >
+        {children}
+      </ContextMenu.Trigger>
+      <ContextMenu.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
+        <ContextMenu.Positioner className="astw:outline-hidden">
+          <ContextMenu.Popup
+            data-slot="data-table-header-context-menu"
+            className={HEADER_CONTEXT_MENU_POPUP_CLASS}
+          >
+            <ContextMenu.Item
+              className={HEADER_CONTEXT_MENU_ITEM_CLASS}
+              onClick={() => copyTextToClipboard(label)}
+            >
+              {t("copyColumnLabel")}
+            </ContextMenu.Item>
+            <ContextMenu.Separator className={HEADER_CONTEXT_MENU_SEPARATOR_CLASS} />
+            <ContextMenu.SubmenuRoot>
+              <ContextMenu.SubmenuTrigger
+                className={HEADER_CONTEXT_MENU_SUBMENU_TRIGGER_CLASS}
+                delay={0}
+              >
+                {t("pinColumn")}
+                <ChevronRight className="astw:size-4" />
+              </ContextMenu.SubmenuTrigger>
+              <ContextMenu.Portal>
+                <ContextMenu.Positioner
+                  className="astw:outline-hidden"
+                  sideOffset={-4}
+                  alignOffset={-4}
+                >
+                  <ContextMenu.Popup className={HEADER_CONTEXT_MENU_POPUP_CLASS}>
+                    <ContextMenu.Item
+                      className={HEADER_CONTEXT_MENU_ITEM_CLASS}
+                      disabled={pin === "left"}
+                      onClick={() => setPin(columnKey, "left")}
+                    >
+                      {t("pinColumnLeft")}
+                    </ContextMenu.Item>
+                    <ContextMenu.Item
+                      className={HEADER_CONTEXT_MENU_ITEM_CLASS}
+                      disabled={pin === "right"}
+                      onClick={() => setPin(columnKey, "right")}
+                    >
+                      {t("pinColumnRight")}
+                    </ContextMenu.Item>
+                    <ContextMenu.Item
+                      className={HEADER_CONTEXT_MENU_ITEM_CLASS}
+                      disabled={pin == null}
+                      onClick={() => setPin(columnKey, "none")}
+                    >
+                      {t("unpinColumn")}
+                    </ContextMenu.Item>
+                  </ContextMenu.Popup>
+                </ContextMenu.Positioner>
+              </ContextMenu.Portal>
+            </ContextMenu.SubmenuRoot>
+            {onSortDirectionChange && (
+              <ContextMenu.SubmenuRoot>
+                <ContextMenu.SubmenuTrigger
+                  className={HEADER_CONTEXT_MENU_SUBMENU_TRIGGER_CLASS}
+                  delay={0}
+                >
+                  {t("sortColumn")}
+                  <ChevronRight className="astw:size-4" />
+                </ContextMenu.SubmenuTrigger>
+                <ContextMenu.Portal>
+                  <ContextMenu.Positioner
+                    className="astw:outline-hidden"
+                    sideOffset={-4}
+                    alignOffset={-4}
+                  >
+                    <ContextMenu.Popup className={HEADER_CONTEXT_MENU_POPUP_CLASS}>
+                      <ContextMenu.Item
+                        className={HEADER_CONTEXT_MENU_ITEM_CLASS}
+                        disabled={sortDirection === "Asc"}
+                        onClick={() => onSortDirectionChange("Asc")}
+                      >
+                        {t("sortColumnAsc")}
+                      </ContextMenu.Item>
+                      <ContextMenu.Item
+                        className={HEADER_CONTEXT_MENU_ITEM_CLASS}
+                        disabled={sortDirection === "Desc"}
+                        onClick={() => onSortDirectionChange("Desc")}
+                      >
+                        {t("sortColumnDesc")}
+                      </ContextMenu.Item>
+                      <ContextMenu.Item
+                        className={HEADER_CONTEXT_MENU_ITEM_CLASS}
+                        disabled={sortDirection == null}
+                        onClick={() => onSortDirectionChange(undefined)}
+                      >
+                        {t("sortColumnReset")}
+                      </ContextMenu.Item>
+                    </ContextMenu.Popup>
+                  </ContextMenu.Positioner>
+                </ContextMenu.Portal>
+              </ContextMenu.SubmenuRoot>
+            )}
+          </ContextMenu.Popup>
+        </ContextMenu.Positioner>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}
+DataTableHeaderContextMenu.displayName = "DataTable.HeaderContextMenu";
+
+function DataTableCellContextMenu({
+  context,
+  open,
+  onOpenChange,
+  onCloseComplete,
+}: {
+  context: CellContextMenuState | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCloseComplete: () => void;
+}) {
+  const t = useDataTableT();
+  const control = useCollectionControlOptional();
+  const { value: timeZone } = useTimeZone();
+  const filterConfig = context?.filterConfig;
+  const copyText = context ? toClipboardText(context.value) : undefined;
+  const headerAndValueText = copyText ? `${context?.headerLabel} ${copyText}` : undefined;
+  const filterValue =
+    filterConfig && context ? toFilterValue(context.value, filterConfig, timeZone) : undefined;
+  const filterOperators =
+    control && filterConfig && filterValue !== undefined
+      ? getVisibleFilterOperators(filterConfig).filter(supportsCellFilterOperator)
+      : [];
+  const hasFilterMenu = !!filterConfig && filterValue !== undefined && filterOperators.length > 0;
+
+  return (
+    <ContextMenu.Root
+      open={open}
+      onOpenChange={onOpenChange}
+      onOpenChangeComplete={(nextOpen) => !nextOpen && onCloseComplete()}
+    >
+      <ContextMenu.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
+        <ContextMenu.Positioner className="astw:outline-hidden" anchor={context?.anchor ?? null}>
+          <ContextMenu.Popup className={HEADER_CONTEXT_MENU_POPUP_CLASS}>
+            <ContextMenu.Item
+              className={HEADER_CONTEXT_MENU_ITEM_CLASS}
+              disabled={copyText == null}
+              onClick={() => copyText && copyTextToClipboard(copyText)}
+            >
+              {t("copyCellValue")}
+            </ContextMenu.Item>
+            <ContextMenu.Item
+              className={HEADER_CONTEXT_MENU_ITEM_CLASS}
+              disabled={headerAndValueText == null}
+              onClick={() => headerAndValueText && copyTextToClipboard(headerAndValueText)}
+            >
+              {t("copyCellHeaderValue")}
+            </ContextMenu.Item>
+            {hasFilterMenu && control && filterConfig && (
+              <>
+                <ContextMenu.Separator className={HEADER_CONTEXT_MENU_SEPARATOR_CLASS} />
+                <ContextMenu.SubmenuRoot>
+                  <ContextMenu.SubmenuTrigger
+                    className={HEADER_CONTEXT_MENU_SUBMENU_TRIGGER_CLASS}
+                    delay={0}
+                  >
+                    {t("addFilter")}
+                    <ChevronRight className="astw:size-4" />
+                  </ContextMenu.SubmenuTrigger>
+                  <ContextMenu.Portal>
+                    <ContextMenu.Positioner
+                      className="astw:outline-hidden"
+                      sideOffset={-4}
+                      alignOffset={-4}
+                    >
+                      <ContextMenu.Popup className={HEADER_CONTEXT_MENU_POPUP_CLASS}>
+                        {filterOperators.map((operator) => (
+                          <ContextMenu.Item
+                            key={operator}
+                            className={HEADER_CONTEXT_MENU_ITEM_CLASS}
+                            onClick={() =>
+                              control.addFilter(filterConfig.field, operator, filterValue)
+                            }
+                          >
+                            {getOperatorLabel(operator, t, filterConfig.type)}
+                          </ContextMenu.Item>
+                        ))}
+                      </ContextMenu.Popup>
+                    </ContextMenu.Positioner>
+                  </ContextMenu.Portal>
+                </ContextMenu.SubmenuRoot>
+              </>
+            )}
+          </ContextMenu.Popup>
+        </ContextMenu.Positioner>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}
+DataTableCellContextMenu.displayName = "DataTable.CellContextMenu";
+
+export { DataTableHeaderContextMenu, DataTableCellContextMenu, getCellContextValue };
diff --git a/packages/core/src/components/data-table/data-table-context.tsx b/packages/core/src/components/data-table/context.tsx
similarity index 94%
rename from packages/core/src/components/data-table/data-table-context.tsx
rename to packages/core/src/components/data-table/context.tsx
index 8d45406f..32676491 100644
--- a/packages/core/src/components/data-table/data-table-context.tsx
+++ b/packages/core/src/components/data-table/context.tsx
@@ -1,6 +1,7 @@
 import { createContext, useContext } from "react";
 import type { Column, RowAction, RowExpansionOptions, RowSelectionOptions } from "./types";
 import type { PageInfo, SortState } from "@/types/collection";
+import type { ColumnWidths } from "./column-layout";
 
 /**
  * Context value provided by `DataTable.Root`.
@@ -109,6 +110,13 @@ const DataTableContext = createContext<DataTableContextValue<any> | null>(null);
 
 export { DataTableContext };
 
+/**
+ * Rendered column widths (px) keyed by column key, published by `DataTable.Table`
+ * after it measures the header row. Empty until the first measurement; consumers
+ * fall back to each column's declared `width` (or 0) meanwhile.
+ */
+export const PinMeasureContext = createContext<ColumnWidths>({});
+
 /**
  * Hook to access the full DataTable state (rows, columns, sorting, pagination,
  * column visibility, and row operations) from the nearest `DataTable.Root`.
diff --git a/packages/core/src/components/data-table/data-table-choice.test.tsx b/packages/core/src/components/data-table/data-table-choice.test.tsx
deleted file mode 100644
index 48af31eb..00000000
--- a/packages/core/src/components/data-table/data-table-choice.test.tsx
+++ /dev/null
@@ -1,337 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { MemoryRouter } from "react-router";
-import type { ReactNode } from "react";
-import { createAppShellWrapper } from "../../../tests/test-utils";
-import { DataTable } from "./data-table";
-import { useDataTable } from "./use-data-table";
-import { createColumnHelper } from "./field-helpers";
-
-afterEach(() => {
-  cleanup();
-  vi.useRealTimers();
-});
-
-type Row = { id: string; warehouse: string | null };
-const { column } = createColumnHelper<Row>();
-const OPTIONS = [
-  { value: "north", label: "North Tokyo DC" },
-  { value: "annex", label: "Tokyo DC Annex" },
-  { value: "tokyo", label: "Tokyo DC" },
-  { value: "extra", label: "Tokyo DC Extra" },
-  { value: "south", label: "South Tokyo DC" },
-  { value: "osaka", label: "Osaka" },
-  { value: "initial", label: "Initial" },
-];
-
-function Harness({
-  value = "initial",
-  onDraft,
-  onCommit,
-  badge = false,
-}: {
-  value?: string | null;
-  onDraft: (row: Row, value: string | null) => void;
-  onCommit: (row: Row, value: string | null) => void;
-  badge?: boolean;
-}) {
-  const edit = { options: OPTIONS, onValueChange: onDraft, onValueCommitted: onCommit };
-  const table = useDataTable<Row>({
-    data: {
-      rows: [
-        { id: "1", warehouse: value },
-        { id: "2", warehouse: "initial" },
-      ],
-    },
-    columns: [
-      badge
-        ? column({ id: "warehouse", label: "Warehouse", type: "badge", edit })
-        : column({ id: "warehouse", label: "Warehouse", type: "text", edit }),
-    ],
-  });
-  return (
-    <DataTable.Root value={table}>
-      <DataTable.Table />
-    </DataTable.Root>
-  );
-}
-
-const AppShellWrapper = createAppShellWrapper("en");
-function Wrapper({ children }: { children: ReactNode }) {
-  return (
-    <MemoryRouter>
-      <AppShellWrapper>{children}</AppShellWrapper>
-    </MemoryRouter>
-  );
-}
-
-function setup({ badge = false }: { badge?: boolean } = {}) {
-  const onDraft = vi.fn();
-  const onCommit = vi.fn();
-  const view = render(<Harness onDraft={onDraft} onCommit={onCommit} badge={badge} />, {
-    wrapper: Wrapper,
-  });
-  const user = userEvent.setup();
-  const [input, next] = screen.getAllByRole("combobox", {
-    name: "Warehouse",
-  }) as HTMLInputElement[];
-  const search = async (text: string) => {
-    await user.click(input);
-    await user.clear(input);
-    await user.keyboard(text);
-  };
-  return { user, input, next, onDraft, onCommit, search, ...view };
-}
-
-function hoverOption(item: HTMLElement) {
-  fireEvent.pointerMove(item, { pointerType: "mouse" });
-  // Base UI ignores stationary WebKit mousemoves; happy-dom defaults movement to zero.
-  fireEvent.mouseMove(item, { movementX: 1, movementY: 1 });
-}
-
-describe("DataTable dropdown confirmation", () => {
-  it("ranks exact, prefix, then substring matches, keeping original order within each rank", async () => {
-    const { search, onDraft, onCommit } = setup();
-    await search("Tokyo DC");
-    expect((await screen.findAllByRole("option")).map((item) => item.textContent)).toEqual([
-      "Tokyo DC",
-      "Tokyo DC Annex",
-      "Tokyo DC Extra",
-      "North Tokyo DC",
-      "South Tokyo DC",
-    ]);
-    expect(onDraft).not.toHaveBeenCalled();
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  it.each(["Enter", "Tab"])("confirms a fully typed exact label on %s", async (confirmation) => {
-    const { user, input, next, onDraft, onCommit, search } = setup();
-    await search("TOKYO DC");
-    await screen.findByRole("option", { name: "Tokyo DC" });
-    await user.keyboard(`{${confirmation}}`);
-    expect(onDraft).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
-    expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
-    expect(onDraft.mock.invocationCallOrder[0]).toBeLessThan(onCommit.mock.invocationCallOrder[0]);
-    if (confirmation === "Enter") {
-      expect(document.activeElement).toBe(input);
-      expect(input.readOnly).toBe(true);
-      expect(input.closest("td")?.querySelector(":scope > span")?.className).not.toContain(
-        "astw:invisible",
-      );
-    }
-    if (confirmation === "Tab") expect(document.activeElement).toBe(next);
-  });
-
-  it.each(["Enter", "Tab"])(
-    "respects an explicit highlight instead of the exact match on %s",
-    async (confirmation) => {
-      const { user, onDraft, onCommit, search } = setup();
-      await search("Tokyo DC");
-      await screen.findByRole("option", { name: "Tokyo DC" });
-      await user.keyboard("{ArrowDown}");
-      const annex = screen.getByRole("option", { name: "Tokyo DC Annex" });
-      expect(annex.hasAttribute("data-highlighted")).toBe(true);
-      expect(onDraft).not.toHaveBeenCalled();
-      expect(onCommit).not.toHaveBeenCalled();
-      await user.keyboard(`{${confirmation}}`);
-      expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "annex");
-    },
-  );
-
-  describe.each(["outside click", "blur"])("cancelling via %s", (dismissal) => {
-    it.each(["exact label", "keyboard highlight", "hover"])(
-      "discards %s without callbacks and restores the latest data",
-      async (candidate) => {
-        const { user, input, onDraft, onCommit, search, rerender } = setup();
-        await search("Tokyo DC");
-        const annex = await screen.findByRole("option", { name: "Tokyo DC Annex" });
-        if (candidate === "keyboard highlight") await user.keyboard("{ArrowDown}");
-        if (candidate === "hover") hoverOption(annex);
-        if (candidate !== "exact label") {
-          expect(annex.hasAttribute("data-highlighted")).toBe(true);
-        }
-        rerender(<Harness value="osaka" onDraft={onDraft} onCommit={onCommit} />);
-        if (dismissal === "outside click") await user.click(document.body);
-        else act(() => input.blur());
-        expect(input.value).toBe("Osaka");
-        expect(input.readOnly).toBe(true);
-        expect(input.getAttribute("aria-expanded")).toBe("false");
-        expect(onDraft).not.toHaveBeenCalled();
-        expect(onCommit).not.toHaveBeenCalled();
-      },
-    );
-  });
-
-  it.each([false, true])(
-    "opens on the first Enter after Tab navigation, including badge=%s",
-    async (badge) => {
-      const { user, input, next, onDraft, onCommit } = setup({ badge });
-      act(() => input.focus());
-      await user.tab();
-      expect(document.activeElement).toBe(next);
-      expect(next.getAttribute("aria-expanded")).toBe("false");
-      await user.keyboard("{Enter}");
-      expect(next.getAttribute("aria-expanded")).toBe("true");
-      expect(next.readOnly).toBe(false);
-      await user.keyboard("{Escape}");
-      await user.tab({ shift: true });
-      expect(document.activeElement).toBe(input);
-      expect(input.getAttribute("aria-expanded")).toBe("false");
-      await user.keyboard("{Enter}");
-      expect(input.getAttribute("aria-expanded")).toBe("true");
-      expect(input.readOnly).toBe(false);
-      expect(onDraft).not.toHaveBeenCalled();
-      expect(onCommit).not.toHaveBeenCalled();
-    },
-  );
-
-  it("does not treat a hovered choice as an explicit Tab selection", async () => {
-    const { user, input, next, onDraft, onCommit } = setup();
-    await user.click(input);
-    const osaka = await screen.findByRole("option", { name: "Osaka" });
-    hoverOption(osaka);
-    expect(osaka.hasAttribute("data-highlighted")).toBe(true);
-    await user.keyboard("{Tab}");
-    expect(document.activeElement).toBe(next);
-    expect(onDraft).not.toHaveBeenCalled();
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  it.each(["Enter", "Tab"])(
-    "does not let hover override a ranked search match on %s",
-    async (key) => {
-      const { user, onCommit, search } = setup();
-      await search("Tokyo DC");
-      const annex = await screen.findByRole("option", { name: "Tokyo DC Annex" });
-      hoverOption(annex);
-      expect(annex.hasAttribute("data-highlighted")).toBe(true);
-      await user.keyboard(`{${key}}`);
-      expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
-    },
-  );
-
-  it("does not notify again when a confirmed cell loses focus", async () => {
-    const { user, next, onDraft, onCommit, search } = setup();
-    await search("Tokyo DC");
-    await user.keyboard("{Enter}");
-    await user.click(next);
-    expect(onDraft).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
-    expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
-  });
-
-  it.each(["o", "n", "e", "no", "on"])(
-    "excludes the clearing option while searching for %s",
-    async (text) => {
-      const { user, onCommit, search } = setup();
-      await search(text);
-      expect(screen.queryByRole("option", { name: "None" })).toBeNull();
-      await user.keyboard("{Tab}");
-      expect(onCommit.mock.calls.every(([, value]) => value !== null)).toBe(true);
-    },
-  );
-
-  it("keeps None available for an empty query and notifies before explicitly clearing", async () => {
-    const { user, input, onDraft, onCommit } = setup();
-    await user.click(input);
-    await user.clear(input);
-    await user.click(await screen.findByRole("option", { name: "None" }));
-    expect(onDraft).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, null);
-    expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, null);
-    expect(onDraft.mock.invocationCallOrder[0]).toBeLessThan(onCommit.mock.invocationCallOrder[0]);
-  });
-
-  it.each([false, true])("notifies only a changed selection, including badge=%s", async (badge) => {
-    const { user, input, onDraft, onCommit } = setup({ badge });
-    await user.click(input);
-    await user.click(await screen.findByRole("option", { name: "Initial" }));
-    expect(onDraft).not.toHaveBeenCalled();
-    expect(onCommit).not.toHaveBeenCalled();
-    await user.click(input);
-    await user.click(await screen.findByRole("option", { name: "Osaka" }));
-    expect(onDraft).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "osaka");
-    expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "osaka");
-  });
-
-  it("preserves active search across an external update, then cancels to the latest data without callbacks", async () => {
-    const { user, input, onDraft, onCommit, search, rerender } = setup();
-    await search("Tokyo");
-    rerender(<Harness value="osaka" onDraft={onDraft} onCommit={onCommit} />);
-    expect(input.value).toBe("Tokyo");
-    expect(onDraft).not.toHaveBeenCalled();
-    expect(onCommit).not.toHaveBeenCalled();
-    await user.keyboard("{Escape}");
-    expect(input.value).toBe("Osaka");
-    expect(onDraft).not.toHaveBeenCalled();
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  it("compares a confirmed selection with the latest data", async () => {
-    const { user, onDraft, onCommit, search, rerender } = setup();
-    await search("Tokyo DC");
-    rerender(<Harness value="tokyo" onDraft={onDraft} onCommit={onCommit} />);
-    await user.keyboard("{Enter}");
-    expect(onDraft).not.toHaveBeenCalled();
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  it("ends editing on Shift+Enter, and Enter or clicking the focused display starts editing again", async () => {
-    const { user, input, search } = setup();
-    await search("Tokyo DC");
-    await user.keyboard("{Shift>}{Enter}{/Shift}");
-    expect(document.activeElement).toBe(input);
-    expect(input.readOnly).toBe(true);
-    expect(input.getAttribute("aria-expanded")).toBe("false");
-    await user.keyboard("{Enter}");
-    expect(input.readOnly).toBe(false);
-    expect(input.getAttribute("aria-expanded")).toBe("true");
-    await user.keyboard("{Escape}");
-    expect(input.readOnly).toBe(true);
-    await user.click(input);
-    expect(input.readOnly).toBe(false);
-    expect(input.getAttribute("aria-expanded")).toBe("true");
-  });
-
-  it("does not confirm an IME conversion Enter", async () => {
-    const { user, input, onDraft, onCommit, search } = setup();
-    await search("Tokyo DC");
-    fireEvent.compositionStart(input);
-    fireEvent.keyDown(input, { key: "Enter", isComposing: true });
-    expect(onDraft).not.toHaveBeenCalled();
-    expect(onCommit).not.toHaveBeenCalled();
-    expect(input.readOnly).toBe(false);
-    fireEvent.compositionEnd(input);
-    await user.keyboard("{Enter}");
-    expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
-  });
-
-  it("keeps the cell context menu available while the dropdown is at rest", async () => {
-    const { input } = setup();
-    fireEvent.contextMenu(input);
-    expect(await screen.findByRole("menuitem", { name: "Copy value" })).toBeDefined();
-  });
-
-  it("preserves native context menus and touch interactions while searching", async () => {
-    const { input, onDraft, onCommit, search } = setup();
-    await search("Tokyo");
-    const contextMenu = new MouseEvent("contextmenu", { bubbles: true, cancelable: true });
-    fireEvent(input, contextMenu);
-    expect(contextMenu.defaultPrevented).toBe(false);
-    expect(screen.queryByRole("menu")).toBeNull();
-    vi.useFakeTimers();
-    fireEvent.touchStart(input, { touches: [{ clientX: 10, clientY: 10 }] });
-    act(() => vi.advanceTimersByTime(600));
-    expect(screen.queryByRole("menu")).toBeNull();
-    expect(input.value).toBe("Tokyo");
-    expect(onDraft).not.toHaveBeenCalled();
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-
-  it("silently discards the search on unmount", async () => {
-    const { search, unmount, onDraft, onCommit } = setup();
-    await search("Tokyo DC");
-    unmount();
-    expect(onDraft).not.toHaveBeenCalled();
-    expect(onCommit).not.toHaveBeenCalled();
-  });
-});
diff --git a/packages/core/src/components/data-table/data-table-editing.test.tsx b/packages/core/src/components/data-table/data-table-editing.test.tsx
deleted file mode 100644
index be762b5a..00000000
--- a/packages/core/src/components/data-table/data-table-editing.test.tsx
+++ /dev/null
@@ -1,1451 +0,0 @@
-import { afterEach, describe, expect, expectTypeOf, it, vi } from "vitest";
-import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Link, MemoryRouter, createMemoryRouter } from "react-router";
-import { RouterProvider } from "react-router/dom";
-import { StrictMode, useState } from "react";
-import { createAppShellWrapper } from "../../../tests/test-utils";
-import { DataTable } from "./data-table";
-import { useDataTable } from "./use-data-table";
-import { createColumnHelper } from "./field-helpers";
-import type { CellEditState, Column, UseDataTableOptions } from "./types";
-
-afterEach(() => {
-  cleanup();
-  vi.restoreAllMocks();
-});
-
-type Line = {
-  id: string;
-  sku: string;
-  status?: string;
-  expected?: string | null;
-  ordered: number;
-  received: number | null;
-  price: number;
-  currency: string;
-  note: string | null;
-  supplier: string;
-};
-
-const LINES: Line[] = [
-  {
-    id: "1",
-    sku: "TS-M",
-    ordered: 24,
-    received: 12,
-    price: 9.5,
-    currency: "USD",
-    note: "Box 1",
-    supplier: "Acme",
-  },
-  {
-    id: "2",
-    sku: "TS-L",
-    ordered: 24,
-    received: null,
-    price: 1200,
-    currency: "JPY",
-    note: null,
-    supplier: "Globex",
-  },
-  {
-    id: "3",
-    sku: "TS-XL",
-    ordered: 12,
-    received: 10,
-    price: 4,
-    currency: "USD",
-    note: "",
-    supplier: "Acme",
-  },
-];
-
-const noop = () => {};
-
-type Update = (id: string, patch: Partial<Line>) => void;
-
-function Harness({
-  columns,
-  rows: initialRows = LINES,
-  options,
-}: {
-  columns: (update: Update) => Column<Line>[];
-  rows?: Line[];
-  options?: Partial<UseDataTableOptions<Line>>;
-}) {
-  const [rows, setRows] = useState(initialRows);
-  const update: Update = (id, patch) =>
-    setRows((prev) => prev.map((row) => (row.id === id ? { ...row, ...patch } : row)));
-  const table = useDataTable<Line>({ columns: columns(update), data: { rows }, ...options });
-  return (
-    <DataTable.Root value={table}>
-      <DataTable.Table />
-    </DataTable.Root>
-  );
-}
-
-function renderTable(ui: React.ReactElement, locale = "en") {
-  const user = userEvent.setup();
-  render(<MemoryRouter>{ui}</MemoryRouter>, { wrapper: createAppShellWrapper(locale) });
-  return user;
-}
-
-function renderInAppRouter(ui: React.ReactElement) {
-  const user = userEvent.setup();
-  const router = createMemoryRouter([
-    {
-      path: "/",
-      element: (
-        <>
-          {ui}
-          <Link to="/elsewhere">Elsewhere</Link>
-        </>
-      ),
-    },
-    { path: "/elsewhere", element: <p>Somewhere else</p> },
-  ]);
-  render(<RouterProvider router={router} />, { wrapper: createAppShellWrapper("en") });
-  return user;
-}
-
-function wouldWarnOnUnload() {
-  const event = new Event("beforeunload", { cancelable: true });
-  window.dispatchEvent(event);
-  return event.defaultPrevented;
-}
-
-const { column } = createColumnHelper<Line>();
-
-const skuColumn = column({ id: "sku", label: "SKU", type: "text" });
-
-function receivedColumn(
-  onValueCommitted: (id: string, value: number | null) => void,
-  update: Update,
-  edit: { canEdit?: (row: Line, state: CellEditState) => boolean } = {},
-): Column<Line> {
-  return column({
-    id: "received",
-    label: "Received",
-    type: "number",
-    edit: {
-      onValueCommitted: (row, value) => {
-        onValueCommitted(row.id, value);
-        update(row.id, { received: value });
-      },
-      ...edit,
-    },
-  });
-}
-
-const blocked = (cell: Element | null | undefined) =>
-  cell?.className.includes("astw:cursor-not-allowed") ?? false;
-
-const hasIconSpace = (cell: Element | undefined) =>
-  cell?.querySelector(":scope > span")?.className.includes("astw:pr-5") ?? false;
-
-const errorText = (input: HTMLElement) =>
-  document.getElementById(input.getAttribute("aria-describedby") ?? "")?.textContent;
-
-// user-event collapses the real editor's select-all, so replace explicitly.
-async function retype(user: ReturnType<typeof userEvent.setup>, input: HTMLElement, text: string) {
-  await user.click(input);
-  await user.clear(input);
-  if (text) await user.keyboard(text);
-}
-
-describe("DataTable inline editing", () => {
-  describe("rendering", () => {
-    it("renders an editor only where canEdit allows it, named by the column label", () => {
-      renderTable(
-        <Harness
-          columns={(update) => [
-            skuColumn,
-            receivedColumn(vi.fn(), update, { canEdit: (row) => row.id !== "2" }),
-          ]}
-        />,
-      );
-      const inputs = screen.getAllByRole("textbox", { name: "Received" });
-      expect(inputs).toHaveLength(2);
-      expect(inputs.map((input) => (input as HTMLInputElement).value)).toEqual(["12", "10"]);
-      expect(screen.queryByRole("textbox", { name: "SKU" })).toBeNull();
-    });
-
-    it("keeps an editable link cell as text and a read-only one as a link", () => {
-      renderTable(
-        <Harness
-          columns={() => [
-            column({
-              id: "supplier",
-              label: "Supplier",
-              type: "link",
-              typeOptions: { href: (row) => `/suppliers/${row.supplier}` },
-              edit: { canEdit: (row) => row.id === "1", onValueCommitted: noop },
-            }),
-          ]}
-        />,
-      );
-      expect(screen.getAllByRole("textbox", { name: "Supplier" })).toHaveLength(1);
-      expect(screen.getAllByRole("link").map((link) => link.textContent)).toEqual([
-        "Globex",
-        "Acme",
-      ]);
-    });
-
-    it("keeps rows without an id read-only and warns once", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
-      renderTable(
-        <Harness
-          rows={LINES.map(({ id: _id, ...rest }) => rest as unknown as Line)}
-          columns={(update) => [receivedColumn(vi.fn(), update)]}
-        />,
-      );
-      expect(screen.queryAllByRole("textbox")).toHaveLength(0);
-      expect(warn).toHaveBeenCalledTimes(1);
-      expect(warn.mock.calls[0][0]).toContain("has no `id`");
-    });
-
-    it("uses typeOptions for display precision", async () => {
-      const user = renderTable(
-        <Harness
-          columns={(update) => [
-            column({
-              id: "received",
-              label: "Received",
-              type: "number",
-              typeOptions: { maxDecimals: 2 },
-              edit: { onValueCommitted: (row, value) => update(row.id, { received: value }) },
-            }),
-          ]}
-        />,
-      );
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, input, "2.5{Enter}");
-      expect(input.parentElement?.textContent).toContain("2.5");
-    });
-  });
-
-  describe("keyboard", () => {
-    it("notifies once on Enter without moving focus or notifying again on Tab", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <StrictMode>
-          <Harness
-            columns={(update) => [
-              receivedColumn(onValueCommitted, update, { canEdit: (row) => row.id !== "2" }),
-            ]}
-          />
-        </StrictMode>,
-      );
-      const [first, third] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, first, "20{Enter}");
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect(onValueCommitted).toHaveBeenCalledWith("1", 20);
-      expect(document.activeElement).toBe(first);
-      expect((first as HTMLInputElement).value).toBe("20");
-      expect(first.getAttribute("enterkeyhint")).toBe("done");
-      await user.keyboard("{Enter}");
-      await user.tab();
-      expect(document.activeElement).toBe(third);
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-    });
-
-    it("confirms on Shift+Enter without moving focus", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
-      );
-      const inputs = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, inputs[2], "11");
-      await user.keyboard("{Shift>}{Enter}{/Shift}");
-      expect(onValueCommitted).toHaveBeenCalledExactlyOnceWith("3", 11);
-      expect(document.activeElement).toBe(inputs[2]);
-    });
-
-    it("moves to the next editable cell on Tab, skipping read-only columns", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          columns={(update) => [
-            receivedColumn(onValueCommitted, update),
-            skuColumn,
-            column({
-              id: "note",
-              label: "Note",
-              type: "text",
-              edit: { onValueCommitted: (row, value) => update(row.id, { note: value }) },
-            }),
-          ]}
-        />,
-      );
-      const received = screen.getAllByRole("textbox", { name: "Received" });
-      const notes = screen.getAllByRole("textbox", { name: "Note" });
-      await retype(user, received[0], "18");
-      await user.tab();
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect(onValueCommitted).toHaveBeenCalledWith("1", 18);
-      expect(document.activeElement).toBe(notes[0]);
-      await user.tab();
-      expect(document.activeElement).toBe(received[1]);
-      await user.tab({ shift: true });
-      expect(document.activeElement).toBe(notes[0]);
-    });
-
-    it("reverts the draft on Escape without notifying", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
-      );
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, input, "7{Escape}");
-      expect((input as HTMLInputElement).value).toBe("12");
-      await user.tab();
-      expect(onValueCommitted).not.toHaveBeenCalled();
-    });
-
-    it("selects the whole value when a cell receives focus", () => {
-      renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
-      const [input] = screen.getAllByRole("textbox", { name: "Received" }) as HTMLInputElement[];
-      act(() => input.focus());
-      expect([input.selectionStart, input.selectionEnd]).toEqual([0, input.value.length]);
-    });
-
-    it("ignores Enter while an IME is composing and parses full-width digits", () => {
-      const onValueCommitted = vi.fn();
-      renderTable(<Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />);
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      act(() => input.focus());
-      fireEvent.compositionStart(input);
-      fireEvent.change(input, { target: { value: "１５" } });
-      fireEvent.keyDown(input, { key: "Enter", isComposing: true });
-      expect(onValueCommitted).not.toHaveBeenCalled();
-      fireEvent.compositionEnd(input);
-      fireEvent.keyDown(input, { key: "Enter" });
-      expect(onValueCommitted).toHaveBeenCalledWith("1", 15);
-      expect(document.activeElement).toBe(input);
-    });
-  });
-
-  describe("parsing", () => {
-    it("accepts negative and fractional numbers independently of display precision", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          columns={(update) => [
-            column({
-              id: "received",
-              label: "Received",
-              type: "number",
-              typeOptions: { maxDecimals: 0 },
-              edit: {
-                onValueCommitted: (row, value) => {
-                  onValueCommitted(row.id, value);
-                  update(row.id, { received: value });
-                },
-              },
-            }),
-          ]}
-        />,
-      );
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, input, "-3.5678{Enter}");
-      expect(onValueCommitted).toHaveBeenCalledWith("1", -3.5678);
-      expect((input as HTMLInputElement).value).toBe("-3.5678");
-      expect(input.getAttribute("aria-invalid")).toBeNull();
-    });
-
-    it("does not restrict money input to the currency's display precision", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          columns={(update) => [
-            column({
-              id: "price",
-              label: "Price",
-              type: "money",
-              typeOptions: { currency: (row) => row.currency },
-              edit: {
-                onValueCommitted: (row, value) => {
-                  onValueCommitted(row.id, value);
-                  update(row.id, { price: value ?? 0 });
-                },
-              },
-            }),
-          ]}
-        />,
-      );
-      const [usd, jpy] = screen.getAllByRole("textbox", { name: "Price" });
-      await retype(user, usd, "9.999{Enter}");
-      await retype(user, jpy, "12.5{Enter}");
-      expect(onValueCommitted.mock.calls).toEqual([
-        ["1", 9.999],
-        ["2", 12.5],
-      ]);
-    });
-
-    it("reads full-width digits and thousands separators on confirmation", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
-      );
-      const [first, second] = screen.getAllByRole("textbox", { name: "Received" });
-      await user.click(first);
-      await user.clear(first);
-      await user.paste("1,234.50");
-      await user.keyboard("{Enter}");
-      expect(onValueCommitted).toHaveBeenCalledWith("1", 1234.5);
-      await retype(user, second, "１５００{Enter}");
-      expect(onValueCommitted).toHaveBeenCalledWith("2", 1500);
-    });
-
-    it("flags malformed numbers only on confirmation and holds Enter and Tab", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
-      );
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, input, "abc");
-      expect(input.getAttribute("aria-invalid")).toBeNull();
-      await user.keyboard("{Enter}");
-      expect(input.getAttribute("aria-invalid")).toBe("true");
-      expect(errorText(input)).toBe("Enter a number. Press Esc to undo");
-      expect(document.activeElement).toBe(input);
-      await user.tab();
-      expect(document.activeElement).toBe(input);
-      expect(onValueCommitted).not.toHaveBeenCalled();
-      await user.keyboard("{Escape}");
-      expect((input as HTMLInputElement).value).toBe("12");
-      expect(input.getAttribute("aria-invalid")).toBeNull();
-    });
-
-    it("clears the parsing error after the malformed number is corrected", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
-      );
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, input, "-{Enter}");
-      expect(input.getAttribute("aria-invalid")).toBe("true");
-      await user.keyboard("3");
-      expect(input.getAttribute("aria-invalid")).toBeNull();
-      await user.keyboard("{Enter}");
-      expect(onValueCommitted).toHaveBeenCalledWith("1", -3);
-    });
-
-    it("discards an unparseable draft on blur without changing data", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
-      );
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, input, "1,5{Enter}");
-      await user.click(document.body);
-      expect(onValueCommitted).not.toHaveBeenCalled();
-      expect((input as HTMLInputElement).value).toBe("12");
-      expect(input.getAttribute("aria-invalid")).toBeNull();
-      expect(input.className).not.toContain("astw:ring-status-attention");
-    });
-
-    it("localizes the parsing message", async () => {
-      const user = renderTable(
-        <Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />,
-        "ja",
-      );
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, input, "abc{Enter}");
-      expect(errorText(input)).toBe("数値を入力してください. Escキーで元に戻せます");
-    });
-  });
-
-  describe("consumer-owned values", () => {
-    it("notifies on blur, but never for intermediate keystrokes", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
-      );
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, input, "18");
-      expect(onValueCommitted).not.toHaveBeenCalled();
-      await user.click(document.body);
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect(onValueCommitted).toHaveBeenCalledWith("1", 18);
-    });
-
-    it("does not notify when numeric formatting alone changes", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
-      );
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, input, "12.00{Enter}");
-      await user.click(input);
-      await user.keyboard("{Enter}");
-      expect(onValueCommitted).not.toHaveBeenCalled();
-    });
-
-    it("preserves safe integers when editing and notifies distinct values", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={[{ ...LINES[0], received: 1234567890123456 }]}
-          columns={(update) => [receivedColumn(onValueCommitted, update)]}
-        />,
-      );
-      const input = screen.getByRole("textbox", { name: "Received" }) as HTMLInputElement;
-      expect(input.value).toBe("1234567890123456");
-      await retype(user, input, "1234567890123457{Enter}");
-      expect(onValueCommitted).toHaveBeenCalledExactlyOnceWith("1", 1234567890123457);
-      expect(input.value).toBe("1234567890123457");
-    });
-
-    it("notifies text as typed and empty text or number cells as null", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          columns={(update) => [
-            receivedColumn(onValueCommitted, update),
-            column({
-              id: "note",
-              label: "Note",
-              type: "text",
-              edit: {
-                onValueCommitted: (row, value) => {
-                  onValueCommitted(row.id, value);
-                  update(row.id, { note: value });
-                },
-              },
-            }),
-          ]}
-        />,
-      );
-      const [note] = screen.getAllByRole("textbox", { name: "Note" });
-      await retype(user, note, " Box 2 {Enter}");
-      await retype(user, note, "{Enter}");
-      const [received] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, received, "{Enter}");
-      expect(onValueCommitted.mock.calls).toEqual([
-        ["1", " Box 2 "],
-        ["1", null],
-        ["1", null],
-      ]);
-    });
-
-    it("lets the consumer reject a change without retaining it or blocking movement", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          columns={(update) => [
-            column({
-              id: "received",
-              label: "Received",
-              type: "number",
-              edit: {
-                onValueCommitted: (row, value) => {
-                  onValueCommitted(row.id, value);
-                  if (value !== null && value > row.ordered) return;
-                  update(row.id, { received: value });
-                },
-              },
-            }),
-          ]}
-        />,
-      );
-      const [first, second] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, first, "99{Tab}");
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect(onValueCommitted).toHaveBeenCalledWith("1", 99);
-      expect((first as HTMLInputElement).value).toBe("12");
-      expect(first.getAttribute("aria-invalid")).toBeNull();
-      expect(document.activeElement).toBe(second);
-      await retype(user, first, "98");
-      await user.click(document.body);
-      expect(onValueCommitted).toHaveBeenCalledWith("1", 98);
-      expect((first as HTMLInputElement).value).toBe("12");
-    });
-
-    it("shows the consumer's normalized value instead of keeping the submitted draft", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          columns={(update) => [
-            column({
-              id: "note",
-              label: "Note",
-              type: "text",
-              edit: {
-                onValueCommitted: (row, value) => {
-                  onValueCommitted(value);
-                  update(row.id, { note: value?.normalize("NFKC").trim() ?? null });
-                },
-              },
-            }),
-          ]}
-        />,
-      );
-      const [input] = screen.getAllByRole("textbox", { name: "Note" });
-      await retype(user, input, " ＡＢＣ {Enter}");
-      expect(onValueCommitted).toHaveBeenCalledWith(" ＡＢＣ ");
-      expect((input as HTMLInputElement).value).toBe("ABC");
-      expect(input.closest("td")?.textContent).toContain("ABC");
-    });
-
-    it("retains a pending draft without adopting it or blocking focus movement", async () => {
-      let finish = noop;
-      const onValueCommitted = vi.fn(() => new Promise<void>((resolve) => (finish = resolve)));
-      const user = renderTable(
-        <Harness
-          columns={() => [
-            column({
-              id: "received",
-              label: "Received",
-              type: "number",
-              edit: { onValueCommitted },
-            }),
-          ]}
-        />,
-      );
-      const [first, second] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, first, "20{Enter}");
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect((first as HTMLInputElement).value).toBe("20");
-      expect(document.activeElement).toBe(first);
-      await user.tab();
-      expect(document.activeElement).toBe(second);
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect((first as HTMLInputElement).value).toBe("20");
-      await act(async () => finish());
-      expect((first as HTMLInputElement).value).toBe("12");
-    });
-
-    it("preserves a previous field update when another field changes immediately", async () => {
-      const user = renderTable(
-        <Harness
-          columns={(update) => [
-            receivedColumn(vi.fn(), update),
-            column({
-              id: "note",
-              label: "Note",
-              type: "text",
-              edit: { onValueCommitted: (row, value) => update(row.id, { note: value }) },
-            }),
-          ]}
-        />,
-      );
-      const [received] = screen.getAllByRole("textbox", { name: "Received" });
-      const [note] = screen.getAllByRole("textbox", { name: "Note" });
-      await retype(user, received, "18{Tab}");
-      await user.clear(note);
-      await user.keyboard("Updated{Tab}");
-      expect((received as HTMLInputElement).value).toBe("18");
-      expect((note as HTMLInputElement).value).toBe("Updated");
-    });
-  });
-
-  describe("interplay", () => {
-    it("lets canEdit follow row selection", async () => {
-      const user = renderTable(
-        <Harness
-          columns={(update) => [
-            receivedColumn(vi.fn(), update, { canEdit: (_, { selected }) => selected }),
-          ]}
-          options={{ rowSelection: {} }}
-        />,
-      );
-      expect(screen.queryAllByRole("textbox")).toHaveLength(0);
-      const [selectFirst] = screen.getAllByRole("checkbox", { name: "Select row" });
-      await user.click(selectFirst);
-      expect(screen.getAllByRole("textbox", { name: "Received" })).toHaveLength(1);
-      await user.click(selectFirst);
-      expect(screen.queryAllByRole("textbox")).toHaveLength(0);
-    });
-
-    it("updates editability when controlled selected ids change externally", async () => {
-      function ControlledSelection() {
-        const [selectedIds, setSelectedIds] = useState(["2"]);
-        return (
-          <>
-            <button onClick={() => setSelectedIds(["1"])}>Select first externally</button>
-            <Harness
-              columns={(update) => [
-                skuColumn,
-                receivedColumn(vi.fn(), update, { canEdit: (_, { selected }) => selected }),
-              ]}
-              options={{ rowSelection: { selectedIds, onChange: setSelectedIds } }}
-            />
-          </>
-        );
-      }
-      const user = renderTable(<ControlledSelection />);
-      const firstRow = screen.getByText("TS-M").closest("tr")!;
-      const secondRow = screen.getByText("TS-L").closest("tr")!;
-      expect(within(firstRow).queryByRole("textbox")).toBeNull();
-      expect(within(secondRow).getByRole("textbox", { name: "Received" })).toBeDefined();
-      await user.click(screen.getByRole("button", { name: "Select first externally" }));
-      expect((within(firstRow).getByRole("textbox") as HTMLInputElement).value).toBe("12");
-      expect(within(secondRow).queryByRole("textbox")).toBeNull();
-    });
-
-    it("shows a not-allowed cursor on read-only cells of a table people edit", () => {
-      renderTable(
-        <Harness
-          columns={(update) => [
-            skuColumn,
-            receivedColumn(vi.fn(), update, { canEdit: (row) => row.id !== "2" }),
-          ]}
-        />,
-      );
-      const skuCell = screen.getByText("TS-M").closest("td");
-      const [editable] = screen.getAllByRole("textbox", { name: "Received" });
-      const lockedRow = screen.getByText("TS-L").closest("tr");
-      expect(blocked(skuCell)).toBe(true);
-      expect(blocked(editable.closest("td"))).toBe(false);
-      expect(blocked(lockedRow?.querySelectorAll("td")[1])).toBe(true);
-    });
-
-    it("keeps the default cursor when no column is editable, or rows are clickable", () => {
-      renderTable(<Harness columns={() => [skuColumn]} />);
-      expect(screen.getByText("TS-M").closest("td")?.className).not.toContain("cursor-not-allowed");
-      cleanup();
-      renderTable(
-        <Harness
-          columns={(update) => [skuColumn, receivedColumn(vi.fn(), update)]}
-          options={{ onClickRow: noop }}
-        />,
-      );
-      expect(screen.getByText("TS-M").closest("td")?.className).not.toContain("cursor-not-allowed");
-    });
-
-    it("never fires onClickRow from an editable cell", async () => {
-      const onClickRow = vi.fn();
-      const user = renderTable(
-        <Harness
-          columns={(update) => [skuColumn, receivedColumn(vi.fn(), update)]}
-          options={{ onClickRow }}
-        />,
-      );
-      await user.click(screen.getAllByRole("textbox", { name: "Received" })[0]);
-      expect(onClickRow).not.toHaveBeenCalled();
-      await user.click(screen.getByText("TS-M"));
-      expect(onClickRow).toHaveBeenCalledTimes(1);
-    });
-
-    it("opens the cell context menu on a resting editor", async () => {
-      renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      fireEvent.contextMenu(input);
-      expect(await screen.findByRole("menuitem", { name: "Copy value" })).toBeTruthy();
-    });
-
-    it("leaves the browser context menu alone while typing", async () => {
-      const user = renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await user.click(input);
-      const event = new MouseEvent("contextmenu", { bubbles: true, cancelable: true });
-      fireEvent(input, event);
-      expect(event.defaultPrevented).toBe(false);
-      expect(screen.queryByRole("menuitem", { name: "Copy value" })).toBeNull();
-    });
-  });
-
-  describe("dropdowns", () => {
-    const SUPPLIERS = [
-      { value: "acme", label: "Acme Corp" },
-      { value: "globex", label: "Globex" },
-    ];
-
-    function supplierColumn(
-      onValueCommitted: (id: string, value: string | null) => void,
-      update: Update,
-    ): Column<Line> {
-      return column({
-        id: "supplier",
-        label: "Supplier",
-        type: "text",
-        edit: {
-          options: SUPPLIERS,
-          onValueCommitted: (row, value) => {
-            onValueCommitted(row.id, value);
-            update(row.id, { supplier: value ?? "" });
-          },
-        },
-      });
-    }
-
-    const rowsWith = (supplier: string) => LINES.map((line) => ({ ...line, supplier }));
-
-    it("shows choice labels and notifies the picked value", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={rowsWith("acme")}
-          columns={(update) => [supplierColumn(onValueCommitted, update)]}
-        />,
-      );
-      const [trigger] = screen.getAllByRole("combobox", { name: "Supplier" });
-      expect(trigger.closest("td")?.textContent).toContain("Acme Corp");
-      await user.click(trigger);
-      await user.click(await screen.findByRole("option", { name: "Globex" }));
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect(onValueCommitted).toHaveBeenCalledWith("1", "globex");
-      expect(trigger.closest("td")?.textContent).toContain("Globex");
-    });
-
-    it("offers None and notifies null", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={rowsWith("acme")}
-          columns={(update) => [supplierColumn(onValueCommitted, update)]}
-        />,
-      );
-      await user.click(screen.getAllByRole("combobox", { name: "Supplier" })[0]);
-      await user.click(await screen.findByRole("option", { name: "None" }));
-      expect(onValueCommitted).toHaveBeenCalledWith("1", null);
-    });
-
-    it("uses data as the source of truth when a consumer rejects a pick", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={rowsWith("acme")}
-          columns={() => [
-            column({
-              id: "supplier",
-              label: "Supplier",
-              type: "text",
-              edit: { options: SUPPLIERS, onValueCommitted },
-            }),
-          ]}
-        />,
-      );
-      const [trigger] = screen.getAllByRole("combobox", { name: "Supplier" });
-      await user.click(trigger);
-      await user.click(await screen.findByRole("option", { name: "Globex" }));
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect(onValueCommitted).toHaveBeenCalledWith(expect.objectContaining({ id: "1" }), "globex");
-      expect((trigger as HTMLInputElement).value).toBe("Acme Corp");
-      expect(trigger.getAttribute("aria-invalid")).toBeNull();
-    });
-
-    it("filters choices and picks with Enter without moving focus", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={rowsWith("acme")}
-          columns={(update) => [supplierColumn(onValueCommitted, update)]}
-        />,
-      );
-      const [first] = screen.getAllByRole("combobox", { name: "Supplier" });
-      await user.click(first);
-      await user.clear(first);
-      await user.keyboard("glo");
-      expect((await screen.findAllByRole("option")).map((option) => option.textContent)).toEqual([
-        "Globex",
-      ]);
-      await user.keyboard("{Enter}");
-      expect(onValueCommitted).toHaveBeenCalledExactlyOnceWith("1", "globex");
-      await act(() => new Promise<void>((resolve) => requestAnimationFrame(() => resolve())));
-      expect(first.getAttribute("aria-expanded")).toBe("false");
-      expect((first as HTMLInputElement).value).toBe("Globex");
-      expect(first.getAttribute("enterkeyhint")).toBe("done");
-      expect(document.activeElement).toBe(first);
-    });
-
-    it.each(["{Enter}", "{Shift>}{Enter}{/Shift}"])(
-      "keeps focus on %s when the dropdown is closed",
-      async (key) => {
-        const onValueCommitted = vi.fn();
-        const user = renderTable(
-          <Harness
-            rows={rowsWith("acme")}
-            columns={(update) => [supplierColumn(onValueCommitted, update)]}
-          />,
-        );
-        const [first] = screen.getAllByRole("combobox", { name: "Supplier" });
-        await user.click(first);
-        await user.keyboard(`{Escape}${key}`);
-        expect(document.activeElement).toBe(first);
-        expect(onValueCommitted).not.toHaveBeenCalled();
-      },
-    );
-
-    it("takes the highlighted match on Tab after typing", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={rowsWith("acme")}
-          columns={(update) => [supplierColumn(onValueCommitted, update)]}
-        />,
-      );
-      const [first, second] = screen.getAllByRole("combobox", { name: "Supplier" });
-      await user.click(first);
-      await user.clear(first);
-      await user.keyboard("glo");
-      await screen.findByRole("option", { name: "Globex" });
-      await user.keyboard("{Tab}");
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect(onValueCommitted).toHaveBeenCalledWith("1", "globex");
-      expect(document.activeElement).toBe(second);
-    });
-
-    it("discards a fully typed label when the user clicks outside the cell", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={rowsWith("acme")}
-          columns={(update) => [supplierColumn(onValueCommitted, update)]}
-        />,
-      );
-      const [first] = screen.getAllByRole("combobox", { name: "Supplier" });
-      await user.click(first);
-      await user.clear(first);
-      await user.keyboard("GLOBEX");
-      await user.click(document.body);
-      expect(onValueCommitted).not.toHaveBeenCalled();
-      expect((first as HTMLInputElement).value).toBe("Acme Corp");
-    });
-
-    it("says so when nothing matches, and leaves the value alone", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={rowsWith("acme")}
-          columns={(update) => [supplierColumn(onValueCommitted, update)]}
-        />,
-      );
-      const [first] = screen.getAllByRole("combobox", { name: "Supplier" });
-      await user.click(first);
-      await user.clear(first);
-      await user.keyboard("zzz");
-      expect(await screen.findByText("No matches")).toBeTruthy();
-      await user.click(document.body);
-      expect(onValueCommitted).not.toHaveBeenCalled();
-      expect(first.closest("td")?.textContent).toContain("Acme Corp");
-    });
-
-    it("does not notify when the current choice is picked again", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={rowsWith("acme")}
-          columns={(update) => [supplierColumn(onValueCommitted, update)]}
-        />,
-      );
-      await user.click(screen.getAllByRole("combobox", { name: "Supplier" })[0]);
-      await user.click(await screen.findByRole("option", { name: "Acme Corp" }));
-      expect(onValueCommitted).not.toHaveBeenCalled();
-    });
-
-    it("shows a read-only link cell's choice label as the link", () => {
-      renderTable(
-        <Harness
-          rows={rowsWith("globex")}
-          columns={() => [
-            column({
-              id: "supplier",
-              label: "Supplier",
-              type: "link",
-              typeOptions: { href: (row) => `/suppliers/${row.supplier}` },
-              edit: {
-                options: SUPPLIERS,
-                canEdit: (row) => row.id === "1",
-                onValueCommitted: noop,
-              },
-            }),
-          ]}
-        />,
-      );
-      expect(screen.getAllByRole("combobox", { name: "Supplier" })).toHaveLength(1);
-      expect(screen.getAllByRole("link").map((link) => link.textContent)).toEqual([
-        "Globex",
-        "Globex",
-      ]);
-    });
-
-    it("keeps icon space on read-only rows so the column's width never shifts", () => {
-      renderTable(
-        <Harness
-          rows={rowsWith("globex")}
-          columns={() => [
-            skuColumn,
-            column({
-              id: "supplier",
-              label: "Supplier",
-              type: "text",
-              edit: {
-                options: SUPPLIERS,
-                canEdit: (row) => row.id === "1",
-                onValueCommitted: noop,
-              },
-            }),
-          ]}
-        />,
-      );
-      const rows = screen.getAllByRole("row").slice(1);
-      expect(rows.map((row) => hasIconSpace(row.querySelectorAll("td")[1]))).toEqual([
-        true,
-        true,
-        true,
-      ]);
-      expect(hasIconSpace(rows[1].querySelectorAll("td")[0])).toBe(false);
-    });
-
-    it("offers a badge column's labelled values as badges", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={LINES.map((line) => ({ ...line, status: "pending" }))}
-          columns={(update) => [
-            column({
-              id: "status",
-              label: "Status",
-              type: "badge",
-              typeOptions: {
-                badgeLabelMap: { pending: "Pending", received: "Received" },
-                badgeVariantMap: { pending: "outline-neutral", received: "success" },
-              },
-              edit: {
-                onValueCommitted: (row, value) => {
-                  onValueCommitted(row.id, value);
-                  update(row.id, { status: value ?? undefined });
-                },
-              },
-            }),
-          ]}
-        />,
-      );
-      const [trigger] = screen.getAllByRole("combobox", { name: "Status" });
-      await user.click(trigger);
-      const received = await screen.findByRole("option", { name: "Received" });
-      expect(received.querySelector('[data-slot="badge"], .astw\\:inline-flex')).not.toBeNull();
-      await user.click(received);
-      expect(onValueCommitted).toHaveBeenCalledWith("1", "received");
-      expect(trigger.closest("td")?.textContent).toContain("Received");
-    });
-
-    it("keeps enum fallback labels on editable and locked badge cells after selection", async () => {
-      const user = renderTable(
-        <Harness
-          rows={LINES.map((line) => ({ ...line, status: "pending" }))}
-          columns={(update) => [
-            column({
-              id: "status",
-              label: "Status",
-              type: "badge",
-              filter: {
-                field: "status",
-                type: "enum",
-                options: [
-                  { value: "pending", label: "Pending review" },
-                  { value: "qa_approved", label: "Quality approved" },
-                ],
-              },
-              edit: {
-                canEdit: (row) => row.id === "1",
-                onValueCommitted: (row, value) => update(row.id, { status: value ?? undefined }),
-              },
-            }),
-          ]}
-        />,
-      );
-      expect(screen.getAllByText("Pending review")).toHaveLength(3);
-      const input = screen.getByRole("combobox", { name: "Status" });
-      await user.click(input);
-      await user.click(await screen.findByRole("option", { name: "Quality approved" }));
-      expect(input.closest("td")?.textContent).toBe("Quality approved");
-      expect(screen.getAllByText("Pending review")).toHaveLength(2);
-    });
-
-    it("keeps a badge cell with several values read-only", () => {
-      renderTable(
-        <Harness
-          rows={LINES.map((line, i) =>
-            i === 0 ? { ...line, status: ["pending", "partial"] as unknown as string } : line,
-          )}
-          columns={() => [
-            column({
-              id: "status",
-              label: "Status",
-              type: "badge",
-              typeOptions: { badgeLabelMap: { pending: "Pending", partial: "Partial" } },
-              edit: { onValueCommitted: noop },
-            }),
-          ]}
-        />,
-      );
-      expect(screen.queryAllByRole("combobox", { name: "Status" })).toHaveLength(2);
-    });
-
-    it("isn't editable when a badge column has no choices", () => {
-      renderTable(
-        <Harness
-          rows={LINES.map((line) => ({ ...line, status: "pending" }))}
-          columns={() => [
-            column({
-              id: "status",
-              label: "Status",
-              type: "badge",
-              edit: { onValueCommitted: noop },
-            }),
-          ]}
-        />,
-      );
-      expect(screen.queryAllByRole("combobox")).toHaveLength(0);
-    });
-
-    it("moves on with Tab from a closed dropdown", async () => {
-      const user = renderTable(
-        <Harness
-          rows={rowsWith("acme")}
-          columns={(update) => [supplierColumn(vi.fn(), update), receivedColumn(vi.fn(), update)]}
-        />,
-      );
-      const [supplier] = screen.getAllByRole("combobox", { name: "Supplier" });
-      act(() => supplier.focus());
-      await user.tab();
-      expect(document.activeElement).toBe(screen.getAllByRole("textbox", { name: "Received" })[0]);
-    });
-  });
-
-  describe("dates", () => {
-    const dateRows = LINES.map((line) => ({ ...line, expected: "2026-10-02" }));
-
-    function expectedColumn(
-      onValueCommitted: (id: string, value: string | null) => void,
-      update: Update,
-      datetime = false,
-    ): Column<Line> {
-      return column({
-        id: "expected",
-        label: "Expected",
-        type: "date",
-        typeOptions: { dateFormat: datetime ? "datetime" : "short" },
-        edit: {
-          onValueCommitted: (row, value) => {
-            onValueCommitted(row.id, value);
-            update(row.id, { expected: value });
-          },
-        },
-      });
-    }
-
-    const dayButton = (day: string) =>
-      within(document.querySelector<HTMLElement>('[data-slot="data-table-cell-calendar"]')!)
-        .getAllByRole("button")
-        .find((button) => button.textContent === day && !button.dataset.outsideMonth)!;
-
-    it("shows a date-only value as that day in any time zone", () => {
-      const tz = process.env.TZ;
-      process.env.TZ = "America/Los_Angeles";
-      try {
-        renderTable(
-          <Harness
-            rows={dateRows}
-            columns={() => [
-              column({
-                id: "expected",
-                label: "Expected",
-                type: "date",
-                typeOptions: { locale: "en-US" },
-              }),
-            ]}
-          />,
-        );
-        expect(screen.getAllByText("Oct 2, 2026")).toHaveLength(3);
-      } finally {
-        process.env.TZ = tz;
-      }
-    });
-
-    it("names the date trigger with its current value", () => {
-      renderTable(
-        <Harness
-          rows={dateRows}
-          columns={() => [
-            column({
-              id: "expected",
-              label: "Expected",
-              type: "date",
-              typeOptions: { locale: "en-US" },
-              edit: { onValueCommitted: noop },
-            }),
-          ]}
-        />,
-      );
-      expect(screen.getAllByRole("button", { name: "Expected, Oct 2, 2026" })).toHaveLength(3);
-    });
-
-    it("notifies a picked day as YYYY-MM-DD", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={dateRows}
-          columns={(update) => [expectedColumn(onValueCommitted, update)]}
-        />,
-      );
-      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
-      await user.click(dayButton("15"));
-      expect(onValueCommitted).toHaveBeenCalledWith("1", "2026-10-15");
-    });
-
-    it("clears a date to null", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={dateRows}
-          columns={(update) => [expectedColumn(onValueCommitted, update)]}
-        />,
-      );
-      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
-      await user.click(screen.getByRole("button", { name: "Clear" }));
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect(onValueCommitted).toHaveBeenCalledWith("1", null);
-    });
-
-    it("uses data when the consumer rejects a date change", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={dateRows}
-          columns={() => [
-            column({ id: "expected", label: "Expected", type: "date", edit: { onValueCommitted } }),
-          ]}
-        />,
-      );
-      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
-      await user.click(dayButton("15"));
-      expect(onValueCommitted).toHaveBeenCalledWith(
-        expect.objectContaining({ id: "1" }),
-        "2026-10-15",
-      );
-      expect(screen.getAllByRole("button", { name: "Expected, Oct 2, 2026" })).toHaveLength(3);
-    });
-
-    it("notifies a date-time as ISO only when Done is pressed", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={dateRows}
-          columns={(update) => [expectedColumn(onValueCommitted, update, true)]}
-        />,
-      );
-      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
-      await user.click(dayButton("20"));
-      fireEvent.change(screen.getByLabelText("Expected (Choose time)"), {
-        target: { value: "14:30" },
-      });
-      expect(onValueCommitted).not.toHaveBeenCalled();
-      await user.click(screen.getByRole("button", { name: "Done" }));
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect(onValueCommitted).toHaveBeenCalledWith(
-        "1",
-        new Date(2026, 9, 20, 14, 30).toISOString(),
-      );
-    });
-
-    it("abandons a date-time draft when the calendar closes with Escape", async () => {
-      const onValueCommitted = vi.fn();
-      const user = renderTable(
-        <Harness
-          rows={dateRows}
-          columns={(update) => [expectedColumn(onValueCommitted, update, true)]}
-        />,
-      );
-      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
-      await user.click(dayButton("20"));
-      await user.keyboard("{Escape}");
-      expect(onValueCommitted).not.toHaveBeenCalled();
-    });
-  });
-
-  it("drops an unticked row's editor from Tab navigation", async () => {
-    const user = renderTable(
-      <Harness
-        columns={(update) => [
-          receivedColumn(vi.fn(), update, { canEdit: (_, { selected }) => selected }),
-        ]}
-        options={{ rowSelection: {} }}
-      />,
-    );
-    const boxes = screen.getAllByRole("checkbox", { name: "Select row" });
-    for (const box of boxes) await user.click(box);
-    await user.click(boxes[1]);
-    const [first, third] = screen.getAllByRole("textbox", { name: "Received" });
-    act(() => first.focus());
-    await user.tab();
-    expect(document.activeElement).toBe(third);
-  });
-
-  it("types each column's edit config without validation or persistence options", () => {
-    column({
-      id: "received",
-      type: "number",
-      edit: {
-        canEdit: (row, state) => {
-          expectTypeOf(row).toEqualTypeOf<Line>();
-          expectTypeOf(state).toEqualTypeOf<CellEditState>();
-          return true;
-        },
-        onValueCommitted: (row, value) => {
-          expectTypeOf(row).toEqualTypeOf<Line>();
-          expectTypeOf(value).toEqualTypeOf<number | null>();
-        },
-      },
-    });
-    column({
-      id: "price",
-      type: "money",
-      edit: {
-        onValueCommitted: (_row, value) => {
-          expectTypeOf(value).toEqualTypeOf<number | null>();
-        },
-      },
-    });
-    column({
-      id: "note",
-      type: "text",
-      edit: {
-        onValueCommitted: (_row, value) => {
-          expectTypeOf(value).toEqualTypeOf<string | null>();
-        },
-      },
-    });
-    column({
-      id: "supplier",
-      type: "link",
-      typeOptions: { href: () => "/" },
-      edit: { onValueCommitted: noop },
-    });
-    column({
-      id: "expected",
-      type: "date",
-      edit: {
-        onValueCommitted: (_row, value) => {
-          expectTypeOf(value).toEqualTypeOf<string | null>();
-        },
-      },
-    });
-    column({
-      id: "status",
-      type: "badge",
-      edit: {
-        options: [{ value: "open", label: "Open" }],
-        onValueCommitted: (_row, value) => {
-          expectTypeOf(value).toEqualTypeOf<string | null>();
-        },
-      },
-    });
-    // @ts-expect-error — business constraints are consumer-owned
-    column({ id: "received", type: "number", edit: { min: 0, onValueCommitted: noop } });
-    column({
-      id: "note",
-      type: "text",
-      // @ts-expect-error — validation is not an editor option
-      edit: { validate: () => undefined, onValueCommitted: noop },
-    });
-    // @ts-expect-error — required state is consumer-owned
-    column({ id: "note", type: "text", edit: { required: true, onValueCommitted: noop } });
-    // @ts-expect-error — display precision belongs to typeOptions
-    column({ id: "price", type: "money", edit: { maxDecimals: 2, onValueCommitted: noop } });
-    // @ts-expect-error — calendar business bounds are consumer-owned
-    column({ id: "expected", type: "date", edit: { max: "2027-01-01", onValueCommitted: noop } });
-    // @ts-expect-error — onCommit is replaced by a value-change notification
-    column({ id: "note", type: "text", edit: { onCommit: noop } });
-    // @ts-expect-error — dropdown choices aren't a number / money option
-    column({ id: "received", type: "number", edit: { options: [], onValueCommitted: noop } });
-    // @ts-expect-error — columns without a type have no built-in editor
-    column({ id: "sku", render: () => null, edit: { onValueCommitted: noop } });
-    column({
-      id: "received",
-      type: "number",
-      // @ts-expect-error — an emptied cell notifies null
-      edit: { onValueCommitted: (_row, _value: number) => {} },
-    });
-  });
-
-  describe("affordance", () => {
-    it("shows an icon only for dropdown and date editors", () => {
-      renderTable(
-        <Harness
-          rows={LINES.map((line) => ({ ...line, expected: "2026-10-01" }))}
-          columns={(update) => [
-            skuColumn,
-            receivedColumn(vi.fn(), update),
-            column({
-              id: "supplier",
-              label: "Supplier",
-              type: "text",
-              edit: { options: [{ value: "Acme", label: "Acme" }], onValueCommitted: noop },
-            }),
-            column({
-              id: "expected",
-              label: "Expected",
-              type: "date",
-              edit: { onValueCommitted: noop },
-            }),
-          ]}
-        />,
-      );
-      const cells = screen.getAllByRole("row")[1].querySelectorAll("td");
-      expect(cells[0].querySelector("svg")).toBeNull();
-      expect(cells[1].querySelector("svg")).toBeNull();
-      expect(cells[2].querySelector(".lucide-chevron-down")).not.toBeNull();
-      expect(cells[3].querySelector(".lucide-calendar-days")).not.toBeNull();
-    });
-
-    it("leaves editable column headers unmarked", () => {
-      renderTable(<Harness columns={(update) => [skuColumn, receivedColumn(vi.fn(), update)]} />);
-      const [, received] = screen.getAllByRole("columnheader");
-      expect(received.querySelector("svg")).toBeNull();
-      expect(received.textContent).toBe("Received");
-    });
-
-    it("marks only the rows that can be edited", () => {
-      renderTable(
-        <Harness
-          columns={(update) => [
-            receivedColumn(vi.fn(), update, { canEdit: (row) => row.id === "1" }),
-          ]}
-        />,
-      );
-      const [first, second] = screen.getAllByRole("row").slice(1);
-      expect(first.querySelector("td[data-editable]")).not.toBeNull();
-      expect(second.querySelector("td[data-editable]")).toBeNull();
-    });
-  });
-
-  describe("leaving the page", () => {
-    it("does not hold navigation for a returned promise", async () => {
-      let finish = noop;
-      const onValueCommitted = vi.fn(() => new Promise<void>((resolve) => (finish = resolve)));
-      const user = renderInAppRouter(
-        <Harness
-          columns={() => [
-            column({
-              id: "received",
-              label: "Received",
-              type: "number",
-              edit: { onValueCommitted },
-            }),
-          ]}
-        />,
-      );
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, input, "20");
-      await user.click(screen.getByRole("link", { name: "Elsewhere" }));
-      expect(await screen.findByText("Somewhere else")).toBeTruthy();
-      expect(onValueCommitted).toHaveBeenCalledTimes(1);
-      expect(screen.queryByRole("dialog")).toBeNull();
-      await act(async () => finish());
-    });
-
-    it("does not register an unload guard for drafts or parse failures", async () => {
-      const user = renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
-      const [input] = screen.getAllByRole("textbox", { name: "Received" });
-      await retype(user, input, "20");
-      expect(wouldWarnOnUnload()).toBe(false);
-      await retype(user, input, "abc{Enter}");
-      expect(wouldWarnOnUnload()).toBe(false);
-    });
-  });
-});
diff --git a/packages/core/src/components/data-table/data-table-styling.test.tsx b/packages/core/src/components/data-table/data-table-styling.test.tsx
index e36f9934..1e4a3e15 100644
--- a/packages/core/src/components/data-table/data-table-styling.test.tsx
+++ b/packages/core/src/components/data-table/data-table-styling.test.tsx
@@ -4,6 +4,7 @@ import type { ComponentProps } from "react";
 import { createAppShellWrapper } from "../../../tests/test-utils";
 import { DataTable } from "./data-table";
 import { useDataTable } from "./use-data-table";
+import { TestDataTable, type TestRow } from "./test-utils";
 import type {
   Column,
   FooterRenderContext,
@@ -36,6 +37,147 @@ function Harness({
 
 const cell = (name: string) => screen.getByText(name).closest("td")!;
 
+// Tooltip.Trigger's generated id proves the tooltip is wired without hover timers.
+const isTooltipWired = (element: Element | null) =>
+  typeof element?.id === "string" && element.id.startsWith("base-ui-");
+
+describe("DataTable", () => {
+  describe("column truncate", () => {
+    it("constrains the cell width and truncates in an inner span when truncate=true", () => {
+      const cols: Column<TestRow>[] = [
+        {
+          label: "Name",
+          render: (row) => row.name,
+          accessor: (row) => row.name,
+          truncate: true,
+        },
+        { label: "Status", render: (row) => row.status },
+      ];
+      const { container } = render(<TestDataTable columns={cols} />, {
+        wrapper,
+      });
+      const firstRow = container.querySelector('[data-slot="data-table-row"]');
+      const cells = firstRow?.querySelectorAll('[data-slot="data-table-cell"]') ?? [];
+      // The cell keeps the width constraint but NOT `overflow: hidden` (which would
+      // clip a pinned column's freeze shadow); truncation moves to an inner span.
+      expect(cells[0]?.className).toContain("max-w-0");
+      expect(cells[0]?.className).not.toContain("astw:truncate");
+      expect(cells[0]?.querySelector('span[class*="truncate"]')).toBeTruthy();
+      expect(cells[1]?.className).not.toContain("max-w-0");
+      expect(cells[1]?.querySelector('span[class*="truncate"]')).toBeFalsy();
+    });
+
+    it("wires a Tooltip when accessor returns a string", () => {
+      const cols: Column<TestRow>[] = [
+        {
+          label: "Name",
+          render: (row) => <strong>{row.name}</strong>,
+          accessor: (row) => row.name,
+          truncate: true,
+        },
+      ];
+      const { container } = render(<TestDataTable columns={cols} />, {
+        wrapper,
+      });
+      const cells = container.querySelectorAll('[data-slot="data-table-cell"]');
+      expect(isTooltipWired(cells[0] ?? null)).toBe(true);
+      expect(isTooltipWired(cells[1] ?? null)).toBe(true);
+    });
+
+    it("wires a Tooltip when accessor returns a number", () => {
+      type NumRow = { id: string; count: number };
+      const numRows: NumRow[] = [{ id: "1", count: 42 }];
+      const cols: Column<NumRow>[] = [
+        {
+          label: "Count",
+          render: (row) => row.count,
+          accessor: (row) => row.count,
+          truncate: true,
+        },
+      ];
+      function TruncatedNumberHarness() {
+        const table = useDataTable<NumRow>({
+          columns: cols,
+          data: { rows: numRows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<TruncatedNumberHarness />, { wrapper });
+      const truncatedCell = container.querySelector('[data-slot="data-table-cell"]');
+      expect(isTooltipWired(truncatedCell)).toBe(true);
+    });
+
+    it("does not wire a Tooltip when accessor returns a non-stringifiable value", () => {
+      type ObjRow = { id: string; meta: { tags: string[] } };
+      const objRows: ObjRow[] = [{ id: "1", meta: { tags: ["a"] } }];
+      const cols: Column<ObjRow>[] = [
+        {
+          label: "Meta",
+          render: (row) => JSON.stringify(row.meta),
+          accessor: (row) => row.meta,
+          truncate: true,
+        },
+      ];
+      function TruncatedObjectHarness() {
+        const table = useDataTable<ObjRow>({
+          columns: cols,
+          data: { rows: objRows },
+        });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<TruncatedObjectHarness />, { wrapper });
+      const truncatedCell = container.querySelector('[data-slot="data-table-cell"]');
+      // Truncation still applies (inner span), but no Tooltip wraps the cell.
+      expect(truncatedCell?.querySelector('span[class*="truncate"]')).toBeTruthy();
+      expect(isTooltipWired(truncatedCell)).toBe(false);
+    });
+
+    it("does not wire a Tooltip when accessor is not provided", () => {
+      const cols: Column<TestRow>[] = [
+        {
+          label: "Name",
+          render: (row) => row.name,
+          truncate: true,
+        },
+      ];
+      const { container } = render(<TestDataTable columns={cols} />, {
+        wrapper,
+      });
+      const truncatedCell = container.querySelector('[data-slot="data-table-cell"]');
+      expect(truncatedCell?.querySelector('span[class*="truncate"]')).toBeTruthy();
+      expect(isTooltipWired(truncatedCell)).toBe(false);
+    });
+
+    it("wires a Tooltip via row[col.id] when accessor is omitted but id matches a row field", () => {
+      // Mirrors the `infer("...")` shape: no `accessor`, but `id` is pinned
+      // to a row field so the cell renderer's `row[col.id]` fallback can
+      // resolve the value for both rendering and the truncate tooltip.
+      const cols: Column<TestRow>[] = [
+        {
+          id: "name",
+          label: "Name",
+          render: (row) => <strong>{row.name}</strong>,
+          truncate: true,
+        },
+      ];
+      const { container } = render(<TestDataTable columns={cols} />, {
+        wrapper,
+      });
+      const cells = container.querySelectorAll('[data-slot="data-table-cell"]');
+      expect(isTooltipWired(cells[0] ?? null)).toBe(true);
+      expect(isTooltipWired(cells[1] ?? null)).toBe(true);
+    });
+  });
+});
+
 describe("DataTable cellProps", () => {
   it("limits the public contract to className, style, and title", () => {
     type CellProps = NonNullable<ReturnType<NonNullable<Column<Row>["cellProps"]>>>;
diff --git a/packages/core/src/components/data-table/data-table.test.tsx b/packages/core/src/components/data-table/data-table.test.tsx
index 865ef7ba..f05441ef 100644
--- a/packages/core/src/components/data-table/data-table.test.tsx
+++ b/packages/core/src/components/data-table/data-table.test.tsx
@@ -1,30 +1,17 @@
-import { afterEach, describe, it, expect, expectTypeOf, vi } from "vitest";
-import {
-  act,
-  cleanup,
-  render,
-  renderHook,
-  screen,
-  fireEvent,
-  waitFor,
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { MemoryRouter } from "react-router";
-import { StrictMode, type ReactNode } from "react";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { cleanup, render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { resetLocalTimeZone } from "@internationalized/date";
-import { createAppShellWrapper } from "../../../tests/test-utils";
-import { AppShellConfigContext, buildConfigurations } from "@/contexts/appshell-context";
-import type { CollectionControl } from "@/types/collection";
+import {
+  TestDataTable,
+  testColumns,
+  testData,
+  makeControl,
+  wrapper,
+  type TestRow,
+} from "./test-utils";
 import { DataTable } from "./data-table";
 import { useDataTable } from "./use-data-table";
-import type {
-  Column,
-  DataTableData,
-  RowAction,
-  RowExpansionOptions,
-  UseDataTableOptions,
-  UseDataTableReturn,
-} from "./types";
+import type { DataTableData, RowAction } from "./types";
 
 afterEach(() => {
   cleanup();
@@ -33,181 +20,6 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 
-type TestRow = { id: string; name: string; status: string };
-
-const testColumns: Column<TestRow>[] = [
-  { label: "Name", render: (row) => row.name },
-  { label: "Status", render: (row) => row.status },
-];
-
-const testData: DataTableData<TestRow> = {
-  rows: [
-    { id: "1", name: "Alice", status: "Active" },
-    { id: "2", name: "Bob", status: "Inactive" },
-  ],
-};
-
-function stubBrowserTimeZone() {
-  vi.stubEnv("TZ", "UTC");
-  resetLocalTimeZone();
-}
-
-function makeControl(overrides?: Partial<CollectionControl>): CollectionControl {
-  return {
-    filters: [],
-    addFilter: vi.fn(),
-    setFilters: vi.fn(),
-    removeFilter: vi.fn(),
-    clearFilters: vi.fn(),
-    sortStates: [],
-    setSort: vi.fn(),
-    clearSort: vi.fn(),
-    pageSize: 10,
-    setPageSize: vi.fn(),
-    goToNextPage: vi.fn(),
-    goToPrevPage: vi.fn(),
-    resetPage: vi.fn(),
-    goToFirstPage: vi.fn(),
-    goToLastPage: vi.fn(),
-    resetCount: 0,
-    getHasPrevPage: () => false,
-    getHasNextPage: (pageInfo) => pageInfo.hasNextPage,
-    ...overrides,
-  };
-}
-
-function TestDataTable(props: {
-  columns?: Column<TestRow>[];
-  data?: DataTableData<TestRow> | undefined;
-  loading?: boolean;
-  error?: Error | null;
-  onSelectionChange?: (ids: string[]) => void;
-}) {
-  const {
-    columns = testColumns,
-    data = "data" in props ? props.data : testData,
-    loading,
-    error,
-    onSelectionChange,
-  } = props;
-  const table = useDataTable<TestRow>({
-    columns,
-    data,
-    loading,
-    error,
-    onSelectionChange,
-  });
-  return (
-    <DataTable.Root value={table}>
-      <DataTable.Table />
-    </DataTable.Root>
-  );
-}
-
-function SortableHeaderHarness({ control }: { control: CollectionControl }) {
-  const table = useDataTable<TestRow>({
-    columns: [
-      {
-        label: "Name",
-        sort: { field: "name", type: "string" },
-        header: (ctx) =>
-          ctx.sortable ? (
-            <button type="button" onClick={ctx.activateSort}>
-              {ctx.label} {ctx.sortDirection}
-            </button>
-          ) : null,
-        render: (row) => row.name,
-      },
-    ],
-    data: testData,
-    control,
-  });
-
-  return (
-    <DataTable.Root value={table}>
-      <DataTable.Table />
-    </DataTable.Root>
-  );
-}
-
-const wrapper = createAppShellWrapper("en");
-
-function createTimeZoneWrapper(timeZone: string) {
-  const configurations = buildConfigurations({ modules: [], locale: "en", timeZone });
-  return function TimeZoneWrapper({ children }: { children: ReactNode }) {
-    return (
-      <AppShellConfigContext.Provider value={{ configurations }}>
-        {children}
-      </AppShellConfigContext.Provider>
-    );
-  };
-}
-
-const headByText = (container: HTMLElement, text: string) =>
-  Array.from(container.querySelectorAll<HTMLElement>('[data-slot="data-table-header"] th')).find(
-    (th) => th.textContent?.trim().startsWith(text),
-  );
-
-const headerContextMenuTrigger = (container: HTMLElement, text: string) =>
-  headByText(container, text)?.querySelector<HTMLElement>(
-    '[data-slot="data-table-header-context-menu-trigger"]',
-  );
-
-const openHeaderContextMenu = (container: HTMLElement, text: string) => {
-  fireEvent.contextMenu(headerContextMenuTrigger(container, text)!);
-};
-
-const cellByText = (container: HTMLElement, text: string) =>
-  Array.from(container.querySelectorAll<HTMLElement>('[data-slot="data-table-cell"]')).find(
-    (cell) => cell.textContent?.trim() === text,
-  );
-
-const openCellContextMenu = (container: HTMLElement, text: string) => {
-  fireEvent.contextMenu(cellByText(container, text)!);
-};
-
-const hoverMenuItem = (name: string) => {
-  const item = screen.getByRole("menuitem", { name });
-  fireEvent.mouseEnter(item);
-  fireEvent.mouseMove(item);
-  fireEvent.pointerMove(item);
-};
-
-// When a cell is wrapped in `Tooltip.Trigger`, Base UI tags the trigger
-// element with a generated `base-ui-…` id (used for the popup's
-// `aria-describedby` pointer). We assert that id's presence as the
-// structural signal that the tooltip is wired — it sidesteps Base UI's
-// hover-delay timer machinery, which is awkward to drive in jsdom.
-const isTooltipWired = (cell: Element | null) =>
-  typeof cell?.id === "string" && cell.id.startsWith("base-ui-");
-
-// Detail-panel render props shared by the "expandable rows" block. The
-// focusable variant lets tests drive focus into an open panel.
-const detail = (row: TestRow) => <div>Details for {row.name}</div>;
-const focusableDetail = () => (
-  <button type="button" data-testid="inner">
-    Inner
-  </button>
-);
-
-// StrictMode double-invokes state updaters to surface impure ones, so it is what
-// proves the selection/expansion callbacks fire outside the updater.
-const strictWrapper = ({ children }: { children: ReactNode }) => {
-  const Wrapper = wrapper;
-  return (
-    <StrictMode>
-      <Wrapper>{children}</Wrapper>
-    </StrictMode>
-  );
-};
-
-// Opens the kebab menu of the row at `index` and returns its "Activate" item.
-async function activateItemFor(index: number) {
-  const user = userEvent.setup();
-  await user.click(screen.getAllByRole("button", { name: "Row actions" })[index]);
-  return screen.findByRole("menuitem", { name: "Activate" });
-}
-
 describe("DataTable", () => {
   it("renders a basic data table with headers and rows", () => {
     render(<TestDataTable />, { wrapper });
@@ -220,110 +32,6 @@ describe("DataTable", () => {
     expect(screen.getByText("Inactive")).toBeDefined();
   });
 
-  it("renders editable and read-only dates in the same AppShell timezone", () => {
-    stubBrowserTimeZone();
-    type Row = { id: string; value: string };
-    function Harness() {
-      const table = useDataTable<Row>({
-        columns: [
-          {
-            id: "value",
-            label: "Date",
-            type: "date",
-            typeOptions: { locale: "en-US" },
-            edit: { canEdit: (row) => row.id === "1", onValueCommitted: vi.fn() },
-          },
-        ],
-        data: {
-          rows: [
-            { id: "1", value: "2026-10-09T00:00:00Z" },
-            { id: "2", value: "2026-10-09T00:00:00Z" },
-            { id: "3", value: "2026-10-09" },
-          ],
-        },
-      });
-      return (
-        <DataTable.Root value={table}>
-          <DataTable.Table />
-        </DataTable.Root>
-      );
-    }
-    render(<Harness />, { wrapper: createTimeZoneWrapper("America/New_York") });
-    expect(screen.getAllByText("Oct 8, 2026")).toHaveLength(2);
-    expect(screen.getByRole("button", { name: "Date, Oct 8, 2026" })).toBeDefined();
-    expect(screen.getByText("Oct 9, 2026")).toBeDefined();
-  });
-
-  it("reuses date formatters on row updates and refreshes them for column or timezone changes", () => {
-    const DateTimeFormat = Intl.DateTimeFormat;
-    const formatterSpy = vi
-      .spyOn(Intl, "DateTimeFormat")
-      .mockImplementation(function (locales, options) {
-        return new DateTimeFormat(locales, options);
-      });
-    type Row = { id: string; value: string };
-    const columns: Column<Row>[] = [
-      { id: "value", type: "date", typeOptions: { locale: "en-US" } },
-      {
-        id: "custom",
-        type: "date",
-        typeOptions: { locale: "not a locale" },
-        render: () => "Custom renderer",
-      },
-    ];
-    const rows = [
-      { id: "1", value: "2026-10-09" },
-      { id: "2", value: "2026-10-09T00:00:00Z" },
-    ];
-    function Harness({
-      rows: currentRows,
-      columns: currentColumns,
-      timeZone,
-    }: {
-      rows: Row[];
-      columns: Column<Row>[];
-      timeZone: string;
-    }) {
-      const table = useDataTable<Row>({ columns: currentColumns, data: { rows: currentRows } });
-      return (
-        <AppShellConfigContext.Provider
-          value={{ configurations: buildConfigurations({ modules: [], locale: "en", timeZone }) }}
-        >
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        </AppShellConfigContext.Provider>
-      );
-    }
-    const formatterCount = () =>
-      formatterSpy.mock.calls.filter(
-        ([, options]) => options?.month === "short" || options?.month === "long",
-      ).length;
-    const { rerender } = render(
-      <Harness rows={rows} columns={columns} timeZone="America/New_York" />,
-    );
-    expect(screen.getByText("Oct 8, 2026")).toBeDefined();
-    const initialCount = formatterCount();
-    expect(initialCount).toBeGreaterThan(0);
-
-    const nextRows = [...rows, { id: "3", value: "2026-10-10" }];
-    rerender(<Harness rows={nextRows} columns={columns} timeZone="America/New_York" />);
-    expect(screen.getByText("Oct 10, 2026")).toBeDefined();
-    expect(formatterCount()).toBe(initialCount);
-
-    rerender(<Harness rows={nextRows} columns={columns} timeZone="Asia/Tokyo" />);
-    expect(screen.queryByText("Oct 8, 2026")).toBeNull();
-    const zonedCount = formatterCount();
-    expect(zonedCount).toBeGreaterThan(initialCount);
-
-    const nextColumns: Column<Row>[] = [
-      { id: "value", type: "date", typeOptions: { locale: "de-DE", dateFormat: "long" } },
-    ];
-    rerender(<Harness rows={nextRows} columns={nextColumns} timeZone="Asia/Tokyo" />);
-    expect(screen.getAllByText("9. Oktober 2026")).toHaveLength(2);
-    expect(formatterCount()).toBeGreaterThan(zonedCount);
-  });
-
   it("renders loading state", () => {
     const { container } = render(<TestDataTable data={undefined} loading />, {
       wrapper,
@@ -358,256 +66,170 @@ describe("DataTable", () => {
     expect(container.querySelector('[data-slot="data-table-body"]')).toBeDefined();
   });
 
-  describe("header context menu", () => {
-    it("shows copy, pin, and sort actions on right click", () => {
-      const control = makeControl();
+  it("resets the table scroll position when pagination changes page", async () => {
+    const pagedData: DataTableData<TestRow> = {
+      rows: testData.rows,
+      pageInfo: {
+        hasNextPage: true,
+        hasPreviousPage: true,
+        endCursor: "next-tok",
+        startCursor: "prev-tok",
+      },
+      total: 50,
+    };
 
-      function Harness() {
-        const table = useDataTable<TestRow>({
-          columns: [
-            {
-              label: "Name",
-              sort: { field: "name", type: "string" },
-              render: (row) => row.name,
-            },
-            { label: "Status", render: (row) => row.status },
-          ],
-          data: testData,
-          control,
-        });
+    function PaginatedTable() {
+      const table = useDataTable<TestRow>({
+        columns: testColumns,
+        data: pagedData,
+        control: makeControl({ getHasPrevPage: () => true }),
+      });
 
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
+      return (
+        <DataTable.Root value={table}>
+          <DataTable.Table />
+          <DataTable.Footer>
+            <DataTable.Pagination />
+          </DataTable.Footer>
+        </DataTable.Root>
+      );
+    }
+
+    const { container } = render(<PaginatedTable />, { wrapper });
+    const scrollContainer = container.querySelector<HTMLDivElement>(
+      '[data-slot="table-container"]',
+    );
 
-      const { container } = render(<Harness />, { wrapper });
+    expect(scrollContainer).not.toBeNull();
+    if (!scrollContainer) return;
 
-      openHeaderContextMenu(container, "Name");
+    scrollContainer.scrollTop = 120;
+    fireEvent.click(screen.getByLabelText("Next page"));
 
-      expect(screen.getByRole("menuitem", { name: "Copy label" })).toBeDefined();
-      expect(screen.getByRole("menuitem", { name: "Pin column" })).toBeDefined();
-      expect(screen.getByRole("menuitem", { name: "Sort column" })).toBeDefined();
-      expect(screen.queryByRole("menuitem", { name: "Hide column" })).toBeNull();
+    await waitFor(() => {
+      expect(scrollContainer.scrollTop).toBe(0);
     });
+  });
 
-    it("copies the column label", async () => {
-      const writeText = vi.fn().mockResolvedValue(undefined);
-      Object.defineProperty(navigator, "clipboard", {
-        configurable: true,
-        value: { writeText },
+  describe("state exclusivity", () => {
+    it("shows only skeleton when loading=true, regardless of data", () => {
+      const { container } = render(<TestDataTable data={testData} loading />, {
+        wrapper,
       });
 
-      const { container } = render(<TestDataTable />, { wrapper });
-
-      openHeaderContextMenu(container, "Name");
-      fireEvent.click(screen.getByRole("menuitem", { name: "Copy label" }));
-
-      await waitFor(() => {
-        expect(writeText).toHaveBeenCalledWith("Name");
-      });
+      expect(container.querySelectorAll('[data-datatable-state="loading"]').length).toBeGreaterThan(
+        0,
+      );
+      expect(container.querySelector('[data-datatable-state="error"]')).toBeNull();
+      expect(container.querySelector('[data-datatable-state="empty"]')).toBeNull();
+      expect(container.querySelector('[data-slot="data-table-row"]')).toBeNull();
     });
 
-    it("pins a column to the right from the pin submenu", async () => {
-      const user = userEvent.setup();
-      const columns: Column<TestRow>[] = [
-        { id: "name", label: "Name", width: 100, render: (row) => row.name },
-        { id: "status", label: "Status", width: 100, render: (row) => row.status },
-      ];
-      const { container } = render(<TestDataTable columns={columns} />, { wrapper });
-
-      openHeaderContextMenu(container, "Name");
-      hoverMenuItem("Pin column");
-      await user.click(await screen.findByRole("menuitem", { name: "Pin to right" }));
+    it("shows only skeleton when loading=true and error is also set", () => {
+      const { container } = render(
+        <TestDataTable data={undefined} loading error={new Error("fail")} />,
+        { wrapper },
+      );
 
-      await waitFor(() => {
-        expect(headByText(container, "Name")?.style.position).toBe("sticky");
-        expect(headByText(container, "Name")?.style.right).toBe("0px");
-      });
+      expect(container.querySelectorAll('[data-datatable-state="loading"]').length).toBeGreaterThan(
+        0,
+      );
+      expect(container.querySelector('[data-datatable-state="error"]')).toBeNull();
     });
 
-    it("unpins a fixed column from the pin submenu", async () => {
-      const user = userEvent.setup();
-      const columns: Column<TestRow>[] = [
-        { id: "name", label: "Name", width: 100, pin: "left", render: (row) => row.name },
-        { id: "status", label: "Status", width: 100, render: (row) => row.status },
-      ];
-      const { container } = render(<TestDataTable columns={columns} />, { wrapper });
-
-      expect(headByText(container, "Name")?.style.position).toBe("sticky");
-      expect(headByText(container, "Name")?.style.left).toBe("0px");
-
-      openHeaderContextMenu(container, "Name");
-      hoverMenuItem("Pin column");
-      await user.click(await screen.findByRole("menuitem", { name: "Unpin" }));
-
-      await waitFor(() => {
-        expect(headByText(container, "Name")?.style.position).toBe("");
-        expect(headByText(container, "Name")?.style.left).toBe("");
+    it("shows only error when loading=false and error is set, even with data", () => {
+      const { container } = render(<TestDataTable data={testData} error={new Error("fail")} />, {
+        wrapper,
       });
-    });
 
-    it("sorts a column from the sort submenu", async () => {
-      const user = userEvent.setup();
-      const control = makeControl();
-
-      function Harness() {
-        const table = useDataTable<TestRow>({
-          columns: [
-            {
-              label: "Name",
-              sort: { field: "name", type: "string" },
-              render: (row) => row.name,
-            },
-          ],
-          data: testData,
-          control,
-        });
-
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-
-      const { container } = render(<Harness />, { wrapper });
-
-      openHeaderContextMenu(container, "Name");
-      hoverMenuItem("Sort column");
-      await user.click(await screen.findByRole("menuitem", { name: "Descending" }));
-
-      await waitFor(() => {
-        expect(control.clearSort).toHaveBeenCalledTimes(1);
-        expect(control.setSort).toHaveBeenCalledWith("name", "Desc");
-      });
+      expect(container.querySelector('[data-datatable-state="error"]')).not.toBeNull();
+      expect(container.querySelectorAll('[data-datatable-state="loading"]')).toHaveLength(0);
+      expect(container.querySelector('[data-datatable-state="empty"]')).toBeNull();
+      expect(container.querySelector('[data-slot="data-table-row"]')).toBeNull();
     });
 
-    it("resets sort from the sort submenu", async () => {
-      const user = userEvent.setup();
-      const control = makeControl({
-        sortStates: [{ field: "name", direction: "Asc" }],
+    it("shows only empty state when loading=false, no error, and rows is empty", () => {
+      const { container } = render(<TestDataTable data={{ rows: [] }} />, {
+        wrapper,
       });
 
-      function Harness() {
-        const table = useDataTable<TestRow>({
-          columns: [
-            {
-              label: "Name",
-              sort: { field: "name", type: "string" },
-              render: (row) => row.name,
-            },
-          ],
-          data: testData,
-          control,
-        });
-
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-
-      const { container } = render(<Harness />, { wrapper });
+      expect(container.querySelector('[data-datatable-state="empty"]')).not.toBeNull();
+      expect(container.querySelectorAll('[data-datatable-state="loading"]')).toHaveLength(0);
+      expect(container.querySelector('[data-datatable-state="error"]')).toBeNull();
+      expect(container.querySelector('[data-slot="data-table-row"]')).toBeNull();
+    });
 
-      openHeaderContextMenu(container, "Name");
-      hoverMenuItem("Sort column");
-      await user.click(await screen.findByRole("menuitem", { name: "Reset sort" }));
+    it("shows only data rows when loading=false, no error, and rows exist", () => {
+      const { container } = render(<TestDataTable />, { wrapper });
 
-      await waitFor(() => {
-        expect(control.clearSort).not.toHaveBeenCalled();
-        expect(control.setSort).toHaveBeenCalledWith("name", undefined);
-      });
+      expect(container.querySelectorAll('[data-slot="data-table-row"]').length).toBeGreaterThan(0);
+      expect(container.querySelectorAll('[data-datatable-state="loading"]')).toHaveLength(0);
+      expect(container.querySelector('[data-datatable-state="error"]')).toBeNull();
+      expect(container.querySelector('[data-datatable-state="empty"]')).toBeNull();
     });
   });
 
-  describe("cell context menu", () => {
-    it("shows copy actions and filter submenu for filterable cells", () => {
-      const control = makeControl();
-
-      function Harness() {
-        const table = useDataTable<TestRow>({
-          columns: [
-            {
-              label: "Name",
-              render: (row) => row.name,
-              filter: { type: "string", field: "name", operators: ["eq", "contains"] },
-            },
-          ],
-          data: testData,
-          control,
-        });
-
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-
-      const { container } = render(<Harness />, { wrapper });
-
-      openCellContextMenu(container, "Alice");
+  describe("loading skeleton", () => {
+    it("renders DEFAULT_ROWS (5) skeleton rows when loading with no data", () => {
+      const { container } = render(<TestDataTable data={undefined} loading />, {
+        wrapper,
+      });
 
-      expect(screen.getByRole("menuitem", { name: "Copy value" })).toBeDefined();
-      expect(screen.getByRole("menuitem", { name: "Copy header and value" })).toBeDefined();
-      expect(screen.getByRole("menuitem", { name: "Add filter" })).toBeDefined();
+      const skeletonRows = container.querySelectorAll('[data-datatable-state="loading"]');
+      expect(skeletonRows).toHaveLength(5);
     });
 
-    it("copies the cell value", async () => {
-      const writeText = vi.fn().mockResolvedValue(undefined);
-      Object.defineProperty(navigator, "clipboard", {
-        configurable: true,
-        value: { writeText },
+    it("renders skeleton rows even when data is present while loading", () => {
+      const { container } = render(<TestDataTable data={testData} loading />, {
+        wrapper,
       });
 
-      const { container } = render(<TestDataTable />, { wrapper });
+      const skeletonRows = container.querySelectorAll('[data-datatable-state="loading"]');
+      expect(skeletonRows.length).toBeGreaterThan(0);
+    });
 
-      openCellContextMenu(container, "Alice");
-      fireEvent.click(screen.getByRole("menuitem", { name: "Copy value" }));
+    it("hides actual data rows while loading", () => {
+      render(<TestDataTable data={testData} loading />, { wrapper });
 
-      await waitFor(() => {
-        expect(writeText).toHaveBeenCalledWith("Alice");
-      });
+      expect(screen.queryByText("Alice")).toBeNull();
+      expect(screen.queryByText("Bob")).toBeNull();
     });
 
-    it("copies the header and cell value", async () => {
-      const writeText = vi.fn().mockResolvedValue(undefined);
-      Object.defineProperty(navigator, "clipboard", {
-        configurable: true,
-        value: { writeText },
+    it("each skeleton row has one cell per visible column", () => {
+      const { container } = render(<TestDataTable data={undefined} loading />, {
+        wrapper,
       });
 
-      const { container } = render(<TestDataTable />, { wrapper });
+      const skeletonRows = container.querySelectorAll('[data-datatable-state="loading"]');
+      skeletonRows.forEach((row) => {
+        // testColumns has 2 columns, no selection, no row actions
+        expect(row.querySelectorAll("td")).toHaveLength(2);
+      });
+    });
 
-      openCellContextMenu(container, "Alice");
-      fireEvent.click(screen.getByRole("menuitem", { name: "Copy header and value" }));
+    it("skeleton rows include selection cell when onSelectionChange is provided", () => {
+      const { container } = render(
+        <TestDataTable data={undefined} loading onSelectionChange={vi.fn()} />,
+        { wrapper },
+      );
 
-      await waitFor(() => {
-        expect(writeText).toHaveBeenCalledWith("Name Alice");
+      const skeletonRows = container.querySelectorAll('[data-datatable-state="loading"]');
+      skeletonRows.forEach((row) => {
+        // 2 columns + 1 selection cell
+        expect(row.querySelectorAll("td")).toHaveLength(3);
       });
     });
 
-    it("adds a filter from the cell value", async () => {
-      const user = userEvent.setup();
-      const control = makeControl();
+    it("skeleton rows include actions cell when rowActions are provided", () => {
+      const rowActions: RowAction<TestRow>[] = [{ id: "edit", label: "Edit", onClick: vi.fn() }];
 
-      function Harness() {
+      function TestDataTableWithActions() {
         const table = useDataTable<TestRow>({
-          columns: [
-            {
-              label: "Name",
-              render: (row) => row.name,
-              filter: { type: "string", field: "name", operators: ["eq", "contains"] },
-            },
-          ],
-          data: testData,
-          control,
+          columns: testColumns,
+          data: undefined,
+          loading: true,
+          rowActions,
         });
-
         return (
           <DataTable.Root value={table}>
             <DataTable.Table />
@@ -615,2373 +237,20 @@ describe("DataTable", () => {
         );
       }
 
-      const { container } = render(<Harness />, { wrapper });
-
-      openCellContextMenu(container, "Alice");
-      hoverMenuItem("Add filter");
-      await user.click(await screen.findByRole("menuitem", { name: "contains" }));
-
-      expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Alice");
-    });
+      const { container } = render(<TestDataTableWithActions />, { wrapper });
 
-    it("preserves decimal strings when filtering by a cell value", async () => {
-      const user = userEvent.setup();
-      const control = makeControl();
-      const amount = "9007199254740993.123456789";
-      function Harness() {
-        const table = useDataTable<{ amount: string }>({
-          columns: [
-            { id: "amount", label: "Amount", filter: { type: "decimal", field: "amount" } },
-          ],
-          data: { rows: [{ amount }] },
-          control,
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      openCellContextMenu(container, amount);
-      hoverMenuItem("Add filter");
-      await user.click(await screen.findByRole("menuitem", { name: "is" }));
-      expect(control.addFilter).toHaveBeenCalledWith("amount", "eq", amount);
+      const skeletonRows = container.querySelectorAll('[data-datatable-state="loading"]');
+      skeletonRows.forEach((row) => {
+        // 2 columns + 1 actions cell
+        expect(row.querySelectorAll("td")).toHaveLength(3);
+      });
     });
 
-    it.each([
-      ["2026-10-09T01:00:00Z", "Oct 8, 2026, 6:00 PM", "2026-10-09T01:00:00.000Z"],
-      ["2026-10-09T10:00:00+09:00", "Oct 8, 2026, 6:00 PM", "2026-10-09T01:00:00.000Z"],
-      ["2026-10-09T00:00:00", "Oct 9, 2026, 12:00 AM", "2026-10-09T07:00:00.000Z"],
-      ["2026-10-09T00:00", "Oct 9, 2026, 12:00 AM", "2026-10-09T07:00:00.000Z"],
-      [new Date("2026-10-09T01:00:00Z"), "Oct 8, 2026, 6:00 PM", "2026-10-09T01:00:00.000Z"],
-      [Date.parse("2026-10-09T01:00:00Z"), "Oct 8, 2026, 6:00 PM", "2026-10-09T01:00:00.000Z"],
-    ])(
-      "uses the AppShell timezone for the cell and datetime filter from %s",
-      async (value, displayed, instant) => {
-        stubBrowserTimeZone();
-        const user = userEvent.setup();
-        const control = makeControl();
-        type Row = { id: string; createdAt: string | Date | number };
-
-        function Harness() {
-          const table = useDataTable<Row>({
-            columns: [
-              {
-                id: "createdAt",
-                label: "Created At",
-                type: "date",
-                accessor: (row) => row.createdAt,
-                typeOptions: { locale: "en-US", dateFormat: "datetime" },
-                filter: { type: "datetime", field: "createdAt", operators: ["eq"] },
-              },
-            ],
-            data: { rows: [{ id: "1", createdAt: value }] },
-            control,
-          });
-          return (
-            <DataTable.Root value={table}>
-              <DataTable.Table />
-            </DataTable.Root>
-          );
-        }
-
-        const { container } = render(<Harness />, {
-          wrapper: createTimeZoneWrapper("America/Los_Angeles"),
-        });
-        expect(cellByText(container, displayed)).toBeDefined();
-        openCellContextMenu(container, displayed);
-        hoverMenuItem("Add filter");
-        await user.click(await screen.findByRole("menuitem", { name: "is" }));
-        expect(control.addFilter).toHaveBeenCalledWith("createdAt", "eq", instant);
-      },
-    );
-
-    it.each(["America/Los_Angeles", "Asia/Tokyo"])(
-      "preserves date-only cells and filters in %s",
-      async (timeZone) => {
-        stubBrowserTimeZone();
-        const user = userEvent.setup();
-        const control = makeControl();
-        type Row = { id: string; placedOn: string };
-
-        function Harness() {
-          const table = useDataTable<Row>({
-            columns: [
-              {
-                id: "placedOn",
-                label: "Placed On",
-                type: "date",
-                accessor: (row) => row.placedOn,
-                typeOptions: { locale: "en-US" },
-                filter: { type: "date", field: "placedOn", operators: ["eq"] },
-              },
-            ],
-            data: { rows: [{ id: "1", placedOn: "2026-10-09" }] },
-            control,
-          });
-          return (
-            <DataTable.Root value={table}>
-              <DataTable.Table />
-            </DataTable.Root>
-          );
-        }
-
-        const { container } = render(<Harness />, { wrapper: createTimeZoneWrapper(timeZone) });
-        expect(cellByText(container, "Oct 9, 2026")).toBeDefined();
-        openCellContextMenu(container, "Oct 9, 2026");
-        hoverMenuItem("Add filter");
-        await user.click(await screen.findByRole("menuitem", { name: "exact date" }));
-        expect(control.addFilter).toHaveBeenCalledWith("placedOn", "eq", "2026-10-09");
-      },
-    );
-
-    it("normalizes date filters from Date values in the AppShell timezone", async () => {
-      stubBrowserTimeZone();
-      const user = userEvent.setup();
-      const control = makeControl();
-      const value = new Date("2026-09-07T15:00:00.000Z");
-      type Row = { id: string; label: string };
-
-      function Harness() {
-        const table = useDataTable<Row>({
-          columns: [
-            {
-              id: "createdAt",
-              label: "Created At",
-              accessor: () => value,
-              render: (row) => row.label,
-              filter: { type: "date", field: "createdAt", operators: ["eq"] },
-            },
-          ],
-          data: { rows: [{ id: "1", label: "Sep 8, 2026" }] },
-          control,
-        });
-
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-
-      const { container } = render(<Harness />, { wrapper: createTimeZoneWrapper("Asia/Tokyo") });
-
-      openCellContextMenu(container, "Sep 8, 2026");
-      hoverMenuItem("Add filter");
-      await user.click(await screen.findByRole("menuitem", { name: "exact date" }));
-
-      expect(control.addFilter).toHaveBeenCalledWith("createdAt", "eq", "2026-09-08");
-    });
-
-    it("omits Add filter when a temporal value cannot be normalized", () => {
-      const control = makeControl();
-      type Row = { id: string; opensAt: string };
-
-      function Harness() {
-        const table = useDataTable<Row>({
-          columns: [
-            {
-              id: "opensAt",
-              label: "Opens At",
-              render: (row) => row.opensAt,
-              filter: { type: "time", field: "opensAt", operators: ["eq"] },
-            },
-          ],
-          data: { rows: [{ id: "1", opensAt: "not-a-time" }] },
-          control,
-        });
-
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-
-      const { container } = render(<Harness />, { wrapper });
-
-      openCellContextMenu(container, "not-a-time");
-
-      expect(screen.queryByRole("menuitem", { name: "Add filter" })).toBeNull();
-    });
-  });
-
-  it("resets the table scroll position when pagination changes page", async () => {
-    const pagedData: DataTableData<TestRow> = {
-      rows: testData.rows,
-      pageInfo: {
-        hasNextPage: true,
-        hasPreviousPage: true,
-        endCursor: "next-tok",
-        startCursor: "prev-tok",
-      },
-      total: 50,
-    };
-
-    function PaginatedTable() {
-      const table = useDataTable<TestRow>({
-        columns: testColumns,
-        data: pagedData,
-        control: makeControl({ getHasPrevPage: () => true }),
-      });
-
-      return (
-        <DataTable.Root value={table}>
-          <DataTable.Table />
-          <DataTable.Footer>
-            <DataTable.Pagination />
-          </DataTable.Footer>
-        </DataTable.Root>
-      );
-    }
-
-    const { container } = render(<PaginatedTable />, { wrapper });
-    const scrollContainer = container.querySelector<HTMLDivElement>(
-      '[data-slot="table-container"]',
-    );
-
-    expect(scrollContainer).not.toBeNull();
-    if (!scrollContainer) return;
-
-    scrollContainer.scrollTop = 120;
-    fireEvent.click(screen.getByLabelText("Next page"));
-
-    await waitFor(() => {
-      expect(scrollContainer.scrollTop).toBe(0);
-    });
-  });
-
-  describe("custom headers", () => {
-    it("renders custom header content", () => {
-      const columns: Column<TestRow>[] = [
-        {
-          label: "Name",
-          header: () => (
-            <>
-              <span>Customer</span>
-              <span aria-hidden>*</span>
-            </>
-          ),
-          render: (row) => row.name,
-        },
-      ];
-
-      render(<TestDataTable columns={columns} />, { wrapper });
-
-      expect(screen.getByText("Customer")).toBeDefined();
-      expect(screen.getByText("*")).toBeDefined();
-      expect(screen.queryByText("Name")).toBeNull();
-    });
-
-    it("keeps built-in sort behavior, hit area, and context menu with headerProps", () => {
-      const control = makeControl();
-
-      function Harness() {
-        const table = useDataTable<TestRow>({
-          columns: [
-            {
-              label: "Name",
-              sort: { field: "name", type: "string" },
-              headerProps: () => ({
-                className: "astw:tabular-nums",
-                style: { backgroundColor: "red" },
-                title: "Employee name",
-              }),
-              render: (row) => row.name,
-            },
-          ],
-          data: testData,
-          control,
-        });
-
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-
-      const { container } = render(<Harness />, { wrapper });
-
-      expect(headByText(container, "Name")?.title).toBe("Employee name");
-      const button = screen.getByRole("button", { name: "Name" });
-      expect(button.className).toContain("astw:h-10");
-      expect(button.className).toContain("astw:-mx-2");
-      expect(button.className).toContain("astw:px-2");
-
-      fireEvent.click(button);
-
-      expect(control.clearSort).toHaveBeenCalledTimes(1);
-      expect(control.setSort).toHaveBeenCalledTimes(1);
-      expect(control.setSort).toHaveBeenCalledWith("name", "Asc");
-
-      openHeaderContextMenu(container, "Name");
-      expect(screen.getByRole("menuitem", { name: "Copy label" })).toBeDefined();
-    });
-
-    it("recomputes headerProps from sort context and restores defaults for undefined", () => {
-      const columns: Column<TestRow>[] = [
-        {
-          label: "Name",
-          sort: { field: "name", type: "string" },
-          render: (row) => row.name,
-          headerProps: (ctx) => {
-            if (!ctx.sortable) return undefined;
-            expectTypeOf(ctx.sortDirection).toEqualTypeOf<"Asc" | "Desc" | undefined>();
-            expectTypeOf(ctx.activateSort).toEqualTypeOf<() => void>();
-            return ctx.sortDirection
-              ? {
-                  className: "astw:tabular-nums",
-                  style: { backgroundColor: ctx.sortDirection === "Asc" ? "red" : "blue" },
-                  title: `${ctx.label} ${ctx.sortDirection}`,
-                }
-              : undefined;
-          },
-        },
-      ];
-      function Harness({ control }: { control?: CollectionControl }) {
-        const table = useDataTable({ columns, data: testData, control });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-
-      const { rerender } = render(
-        <Harness control={makeControl({ sortStates: [{ field: "name", direction: "Asc" }] })} />,
-        { wrapper },
-      );
-      expect(screen.getByRole("columnheader").title).toBe("Name Asc");
-      expect(screen.getByRole("columnheader").style.backgroundColor).toBe("red");
-      rerender(
-        <Harness control={makeControl({ sortStates: [{ field: "name", direction: "Desc" }] })} />,
-      );
-      expect(screen.getByRole("columnheader").title).toBe("Name Desc");
-      expect(screen.getByRole("columnheader").style.backgroundColor).toBe("blue");
-
-      for (const control of [makeControl(), undefined]) {
-        rerender(<Harness control={control} />);
-        const header = screen.getByRole("columnheader");
-        expect(header.style.backgroundColor).toBe("");
-        expect(header.title).toBe("");
-        expect(header.className).not.toContain("astw:tabular-nums");
-      }
-    });
-
-    it("passes non-sortable context when sort config exists but sorting is inactive", () => {
-      let seenSortable: boolean | undefined;
-      const columns: Column<TestRow>[] = [
-        {
-          label: "Name",
-          sort: { field: "name", type: "string" },
-          header: (ctx) => {
-            seenSortable = ctx.sortable;
-            return ctx.sortable ? "sortable" : "static";
-          },
-          render: (row) => row.name,
-        },
-      ];
-
-      render(<TestDataTable columns={columns} />, { wrapper });
-
-      expect(screen.getByText("static")).toBeDefined();
-      expect(seenSortable).toBe(false);
-    });
-
-    it("passes sortable context and activateSort reuses the shared sort behavior", () => {
-      const control = makeControl({
-        sortStates: [{ field: "name", direction: "Asc" }],
-      });
-
-      render(<SortableHeaderHarness control={control} />, { wrapper });
-
-      fireEvent.click(screen.getByRole("button", { name: "Name Asc" }));
-
-      expect(control.clearSort).toHaveBeenCalledTimes(1);
-      expect(control.setSort).toHaveBeenCalledTimes(1);
-      expect(control.setSort).toHaveBeenCalledWith("name", "Desc");
-    });
-
-    it("narrows header render context by sortable", () => {
-      const column: Column<TestRow> = {
-        label: "Name",
-        header: (ctx) => {
-          if (ctx.sortable) {
-            expectTypeOf(ctx).toEqualTypeOf<{
-              label?: string;
-              sortable: true;
-              sortDirection: "Asc" | "Desc" | undefined;
-              activateSort: () => void;
-            }>();
-          } else {
-            expectTypeOf(ctx).toEqualTypeOf<{
-              label?: string;
-              sortable: false;
-            }>();
-          }
-          return ctx.label;
-        },
-        render: (row) => row.name,
-      };
-
-      expect(column).toBeDefined();
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // State exclusivity (loading / error / empty / data)
-  // -------------------------------------------------------------------------
-  describe("state exclusivity", () => {
-    it("shows only skeleton when loading=true, regardless of data", () => {
-      const { container } = render(<TestDataTable data={testData} loading />, {
-        wrapper,
-      });
-
-      expect(container.querySelectorAll('[data-datatable-state="loading"]').length).toBeGreaterThan(
-        0,
-      );
-      expect(container.querySelector('[data-datatable-state="error"]')).toBeNull();
-      expect(container.querySelector('[data-datatable-state="empty"]')).toBeNull();
-      expect(container.querySelector('[data-slot="data-table-row"]')).toBeNull();
-    });
-
-    it("shows only skeleton when loading=true and error is also set", () => {
-      const { container } = render(
-        <TestDataTable data={undefined} loading error={new Error("fail")} />,
-        { wrapper },
-      );
-
-      expect(container.querySelectorAll('[data-datatable-state="loading"]').length).toBeGreaterThan(
-        0,
-      );
-      expect(container.querySelector('[data-datatable-state="error"]')).toBeNull();
-    });
-
-    it("shows only error when loading=false and error is set, even with data", () => {
-      const { container } = render(<TestDataTable data={testData} error={new Error("fail")} />, {
-        wrapper,
-      });
-
-      expect(container.querySelector('[data-datatable-state="error"]')).not.toBeNull();
-      expect(container.querySelectorAll('[data-datatable-state="loading"]')).toHaveLength(0);
-      expect(container.querySelector('[data-datatable-state="empty"]')).toBeNull();
-      expect(container.querySelector('[data-slot="data-table-row"]')).toBeNull();
-    });
-
-    it("shows only empty state when loading=false, no error, and rows is empty", () => {
-      const { container } = render(<TestDataTable data={{ rows: [] }} />, {
-        wrapper,
-      });
-
-      expect(container.querySelector('[data-datatable-state="empty"]')).not.toBeNull();
-      expect(container.querySelectorAll('[data-datatable-state="loading"]')).toHaveLength(0);
-      expect(container.querySelector('[data-datatable-state="error"]')).toBeNull();
-      expect(container.querySelector('[data-slot="data-table-row"]')).toBeNull();
-    });
-
-    it("shows only data rows when loading=false, no error, and rows exist", () => {
-      const { container } = render(<TestDataTable />, { wrapper });
-
-      expect(container.querySelectorAll('[data-slot="data-table-row"]').length).toBeGreaterThan(0);
-      expect(container.querySelectorAll('[data-datatable-state="loading"]')).toHaveLength(0);
-      expect(container.querySelector('[data-datatable-state="error"]')).toBeNull();
-      expect(container.querySelector('[data-datatable-state="empty"]')).toBeNull();
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // Loading skeleton
-  // -------------------------------------------------------------------------
-  describe("loading skeleton", () => {
-    it("renders DEFAULT_ROWS (5) skeleton rows when loading with no data", () => {
-      const { container } = render(<TestDataTable data={undefined} loading />, {
-        wrapper,
-      });
-
-      const skeletonRows = container.querySelectorAll('[data-datatable-state="loading"]');
-      expect(skeletonRows).toHaveLength(5);
-    });
-
-    it("renders skeleton rows even when data is present while loading", () => {
-      const { container } = render(<TestDataTable data={testData} loading />, {
-        wrapper,
-      });
-
-      const skeletonRows = container.querySelectorAll('[data-datatable-state="loading"]');
-      expect(skeletonRows.length).toBeGreaterThan(0);
-    });
-
-    it("hides actual data rows while loading", () => {
-      render(<TestDataTable data={testData} loading />, { wrapper });
-
-      expect(screen.queryByText("Alice")).toBeNull();
-      expect(screen.queryByText("Bob")).toBeNull();
-    });
-
-    it("each skeleton row has one cell per visible column", () => {
-      const { container } = render(<TestDataTable data={undefined} loading />, {
-        wrapper,
-      });
-
-      const skeletonRows = container.querySelectorAll('[data-datatable-state="loading"]');
-      skeletonRows.forEach((row) => {
-        // testColumns has 2 columns, no selection, no row actions
-        expect(row.querySelectorAll("td")).toHaveLength(2);
-      });
-    });
-
-    it("skeleton rows include selection cell when onSelectionChange is provided", () => {
-      const { container } = render(
-        <TestDataTable data={undefined} loading onSelectionChange={vi.fn()} />,
-        { wrapper },
-      );
-
-      const skeletonRows = container.querySelectorAll('[data-datatable-state="loading"]');
-      skeletonRows.forEach((row) => {
-        // 2 columns + 1 selection cell
-        expect(row.querySelectorAll("td")).toHaveLength(3);
-      });
-    });
-
-    it("skeleton rows include actions cell when rowActions are provided", () => {
-      const rowActions: RowAction<TestRow>[] = [{ id: "edit", label: "Edit", onClick: vi.fn() }];
-
-      function TestDataTableWithActions() {
-        const table = useDataTable<TestRow>({
-          columns: testColumns,
-          data: undefined,
-          loading: true,
-          rowActions,
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-
-      const { container } = render(<TestDataTableWithActions />, { wrapper });
-
-      const skeletonRows = container.querySelectorAll('[data-datatable-state="loading"]');
-      skeletonRows.forEach((row) => {
-        // 2 columns + 1 actions cell
-        expect(row.querySelectorAll("td")).toHaveLength(3);
-      });
-    });
-
-    it("does not render skeleton rows when not loading", () => {
-      const { container } = render(<TestDataTable />, { wrapper });
+    it("does not render skeleton rows when not loading", () => {
+      const { container } = render(<TestDataTable />, { wrapper });
 
       const skeletonRows = container.querySelectorAll('[data-datatable-state="loading"]');
       expect(skeletonRows).toHaveLength(0);
     });
   });
-
-  // -------------------------------------------------------------------------
-  // Column alignment
-  // -------------------------------------------------------------------------
-  describe("column alignment", () => {
-    const alignedColumns: Column<TestRow>[] = [
-      { label: "Name", render: (row) => row.name },
-      { label: "Amount", render: (row) => row.status, align: "right" },
-    ];
-
-    it("applies text-right to the header cell when align=right", () => {
-      const { container } = render(<TestDataTable columns={alignedColumns} />, {
-        wrapper,
-      });
-      const heads = container.querySelectorAll('[data-slot="data-table-header"] th');
-      expect(heads[0]?.className).not.toContain("text-right");
-      expect(heads[1]?.className).toContain("text-right");
-    });
-
-    it("applies text-right to body cells when align=right", () => {
-      const { container } = render(<TestDataTable columns={alignedColumns} />, {
-        wrapper,
-      });
-      const firstRow = container.querySelector('[data-slot="data-table-row"]');
-      const cells = firstRow?.querySelectorAll('[data-slot="data-table-cell"]') ?? [];
-      expect(cells[0]?.className).not.toContain("text-right");
-      expect(cells[1]?.className).toContain("text-right");
-    });
-
-    it("right-aligns the skeleton bar so it doesn't shift on load", () => {
-      const { container } = render(
-        <TestDataTable columns={alignedColumns} data={undefined} loading />,
-        { wrapper },
-      );
-      const firstSkeleton = container.querySelector('[data-datatable-state="loading"]');
-      const skeletonCells = firstSkeleton?.querySelectorAll("td") ?? [];
-      const rightCellBar = skeletonCells[1]?.querySelector("div");
-      expect(rightCellBar?.className).toContain("ml-auto");
-      const leftCellBar = skeletonCells[0]?.querySelector("div");
-      expect(leftCellBar?.className).not.toContain("ml-auto");
-    });
-
-    it("defaults to left alignment when align is unset", () => {
-      const { container } = render(<TestDataTable />, { wrapper });
-      const heads = container.querySelectorAll('[data-slot="data-table-header"] th');
-      heads.forEach((th) => {
-        expect(th.className).not.toContain("text-right");
-      });
-    });
-
-    it("auto-aligns number columns to the right", () => {
-      type NumRow = { id: string; count: number };
-      const numRows: NumRow[] = [{ id: "1", count: 42 }];
-      const cols: Column<NumRow>[] = [{ label: "Count", type: "number", accessor: (r) => r.count }];
-      function Harness() {
-        const table = useDataTable<NumRow>({
-          columns: cols,
-          data: { rows: numRows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      const head = container.querySelector('[data-slot="data-table-header"] th');
-      const cell = container.querySelector('[data-slot="data-table-cell"]');
-      expect(head?.className).toContain("text-right");
-      expect(cell?.className).toContain("text-right");
-    });
-
-    it("auto-aligns money columns to the right", () => {
-      type MoneyRow = { id: string; total: number };
-      const moneyRows: MoneyRow[] = [{ id: "1", total: 100 }];
-      const cols: Column<MoneyRow>[] = [
-        {
-          label: "Total",
-          type: "money",
-          accessor: (r) => r.total,
-          typeOptions: { currency: "USD" },
-        },
-      ];
-      function Harness() {
-        const table = useDataTable<MoneyRow>({
-          columns: cols,
-          data: { rows: moneyRows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      const head = container.querySelector('[data-slot="data-table-header"] th');
-      const cell = container.querySelector('[data-slot="data-table-cell"]');
-      expect(head?.className).toContain("text-right");
-      expect(cell?.className).toContain("text-right");
-    });
-
-    it("does not auto-align non-numeric typed columns (text, date, badge, link)", () => {
-      type Row = { id: string; v: string };
-      const rows: Row[] = [{ id: "1", v: "x" }];
-      const cols: Column<Row>[] = [
-        { label: "Text", type: "text", accessor: (r) => r.v },
-        { label: "Date", type: "date", accessor: (r) => r.v },
-        { label: "Badge", type: "badge", accessor: (r) => r.v },
-        {
-          label: "Link",
-          type: "link",
-          accessor: (r) => r.v,
-          typeOptions: { href: () => "/x" },
-        },
-      ];
-      function Harness() {
-        const table = useDataTable<Row>({ columns: cols, data: { rows } });
-        return (
-          <MemoryRouter>
-            <DataTable.Root value={table}>
-              <DataTable.Table />
-            </DataTable.Root>
-          </MemoryRouter>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      container.querySelectorAll('[data-slot="data-table-header"] th').forEach((th) => {
-        expect(th.className).not.toContain("text-right");
-      });
-    });
-
-    it("explicit align=left overrides the numeric-type auto-default", () => {
-      type NumRow = { id: string; count: number };
-      const numRows: NumRow[] = [{ id: "1", count: 42 }];
-      const cols: Column<NumRow>[] = [
-        {
-          label: "Count",
-          type: "number",
-          accessor: (r) => r.count,
-          align: "left",
-        },
-      ];
-      function Harness() {
-        const table = useDataTable<NumRow>({
-          columns: cols,
-          data: { rows: numRows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      const head = container.querySelector('[data-slot="data-table-header"] th');
-      expect(head?.className).not.toContain("text-right");
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // Column truncate
-  // -------------------------------------------------------------------------
-  describe("column truncate", () => {
-    it("constrains the cell width and truncates in an inner span when truncate=true", () => {
-      const cols: Column<TestRow>[] = [
-        {
-          label: "Name",
-          render: (row) => row.name,
-          accessor: (row) => row.name,
-          truncate: true,
-        },
-        { label: "Status", render: (row) => row.status },
-      ];
-      const { container } = render(<TestDataTable columns={cols} />, {
-        wrapper,
-      });
-      const firstRow = container.querySelector('[data-slot="data-table-row"]');
-      const cells = firstRow?.querySelectorAll('[data-slot="data-table-cell"]') ?? [];
-      // The cell keeps the width constraint but NOT `overflow: hidden` (which would
-      // clip a pinned column's freeze shadow); truncation moves to an inner span.
-      expect(cells[0]?.className).toContain("max-w-0");
-      expect(cells[0]?.className).not.toContain("astw:truncate");
-      expect(cells[0]?.querySelector('span[class*="truncate"]')).toBeTruthy();
-      expect(cells[1]?.className).not.toContain("max-w-0");
-      expect(cells[1]?.querySelector('span[class*="truncate"]')).toBeFalsy();
-    });
-
-    it("wires a Tooltip when accessor returns a string", () => {
-      const cols: Column<TestRow>[] = [
-        {
-          label: "Name",
-          render: (row) => <strong>{row.name}</strong>,
-          accessor: (row) => row.name,
-          truncate: true,
-        },
-      ];
-      const { container } = render(<TestDataTable columns={cols} />, {
-        wrapper,
-      });
-      const cells = container.querySelectorAll('[data-slot="data-table-cell"]');
-      expect(isTooltipWired(cells[0] ?? null)).toBe(true);
-      expect(isTooltipWired(cells[1] ?? null)).toBe(true);
-    });
-
-    it("wires a Tooltip when accessor returns a number", () => {
-      type NumRow = { id: string; count: number };
-      const numRows: NumRow[] = [{ id: "1", count: 42 }];
-      const cols: Column<NumRow>[] = [
-        {
-          label: "Count",
-          render: (row) => row.count,
-          accessor: (row) => row.count,
-          truncate: true,
-        },
-      ];
-      function Harness() {
-        const table = useDataTable<NumRow>({
-          columns: cols,
-          data: { rows: numRows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      const cell = container.querySelector('[data-slot="data-table-cell"]');
-      expect(isTooltipWired(cell)).toBe(true);
-    });
-
-    it("does not wire a Tooltip when accessor returns a non-stringifiable value", () => {
-      type ObjRow = { id: string; meta: { tags: string[] } };
-      const objRows: ObjRow[] = [{ id: "1", meta: { tags: ["a"] } }];
-      const cols: Column<ObjRow>[] = [
-        {
-          label: "Meta",
-          render: (row) => JSON.stringify(row.meta),
-          accessor: (row) => row.meta,
-          truncate: true,
-        },
-      ];
-      function Harness() {
-        const table = useDataTable<ObjRow>({
-          columns: cols,
-          data: { rows: objRows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      const cell = container.querySelector('[data-slot="data-table-cell"]');
-      // Truncation still applies (inner span), but no Tooltip wraps the cell.
-      expect(cell?.querySelector('span[class*="truncate"]')).toBeTruthy();
-      expect(isTooltipWired(cell)).toBe(false);
-    });
-
-    it("does not wire a Tooltip when accessor is not provided", () => {
-      const cols: Column<TestRow>[] = [
-        {
-          label: "Name",
-          render: (row) => row.name,
-          truncate: true,
-        },
-      ];
-      const { container } = render(<TestDataTable columns={cols} />, {
-        wrapper,
-      });
-      const cell = container.querySelector('[data-slot="data-table-cell"]');
-      expect(cell?.querySelector('span[class*="truncate"]')).toBeTruthy();
-      expect(isTooltipWired(cell)).toBe(false);
-    });
-
-    it("wires a Tooltip via row[col.id] when accessor is omitted but id matches a row field", () => {
-      // Mirrors the `infer("...")` shape: no `accessor`, but `id` is pinned
-      // to a row field so the cell renderer's `row[col.id]` fallback can
-      // resolve the value for both rendering and the truncate tooltip.
-      const cols: Column<TestRow>[] = [
-        {
-          id: "name",
-          label: "Name",
-          render: (row) => <strong>{row.name}</strong>,
-          truncate: true,
-        },
-      ];
-      const { container } = render(<TestDataTable columns={cols} />, {
-        wrapper,
-      });
-      const cells = container.querySelectorAll('[data-slot="data-table-cell"]');
-      expect(isTooltipWired(cells[0] ?? null)).toBe(true);
-      expect(isTooltipWired(cells[1] ?? null)).toBe(true);
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // Row selection (DOM)
-  // -------------------------------------------------------------------------
-  // -------------------------------------------------------------------------
-  // Type-aware cell renderers
-  // -------------------------------------------------------------------------
-  describe("column type renderers", () => {
-    type TypedRow = {
-      id: string;
-      name: string | null;
-      total: number | null;
-      currency: string;
-      placedAt: string | null;
-      status: string;
-      detailUrl: string | null;
-    };
-
-    const typedRows: TypedRow[] = [
-      {
-        id: "1",
-        name: "Order 1",
-        total: 1234.5,
-        currency: "USD",
-        placedAt: "2026-04-09T12:00:00Z",
-        status: "shipped",
-        detailUrl: "/orders/1",
-      },
-      {
-        id: "2",
-        name: null,
-        total: null,
-        currency: "JPY",
-        placedAt: null,
-        status: "unknown",
-        detailUrl: null,
-      },
-    ];
-
-    function renderTypedTable(columns: Column<TypedRow>[]) {
-      function Harness() {
-        const table = useDataTable<TypedRow>({
-          columns,
-          data: { rows: typedRows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      return render(<Harness />, { wrapper });
-    }
-
-    it("renders text cells with — placeholder for null values", () => {
-      const { container } = renderTypedTable([
-        { label: "Name", type: "text", accessor: (r) => r.name },
-      ]);
-      expect(container.textContent).toContain("Order 1");
-      expect(container.textContent).toContain("—");
-    });
-
-    it("renders money cells with currency formatting", () => {
-      const { container } = renderTypedTable([
-        {
-          label: "Total",
-          type: "money",
-          accessor: (r) => r.total,
-          typeOptions: { currency: "USD", locale: "en-US" },
-        },
-      ]);
-      expect(container.textContent).toContain("$1,234.50");
-    });
-
-    it("reads currency from row via function accessor", () => {
-      const { container } = renderTypedTable([
-        {
-          label: "Total",
-          type: "money",
-          accessor: (r) => r.total ?? 0,
-          typeOptions: { currency: (r) => r.currency, locale: "en-US" },
-        },
-      ]);
-      // First row: USD 1234.5 → "$1,234.50". Second row: JPY 0 → "¥0".
-      expect(container.textContent).toContain("$1,234.50");
-      expect(container.textContent).toContain("¥0");
-    });
-
-    it("renders date cells with short format by default", () => {
-      const { container } = renderTypedTable([
-        {
-          label: "Placed",
-          type: "date",
-          accessor: (r) => r.placedAt,
-          typeOptions: { locale: "en-US" },
-        },
-      ]);
-      expect(container.textContent).toMatch(/Apr 9, 2026/);
-    });
-
-    it("renders badge cells via variant/label maps", () => {
-      const { container } = renderTypedTable([
-        {
-          label: "Status",
-          type: "badge",
-          accessor: (r) => r.status,
-          typeOptions: {
-            badgeVariantMap: { shipped: "success" },
-            badgeLabelMap: { shipped: "Shipped" },
-          },
-        },
-      ]);
-      expect(container.textContent).toContain("Shipped");
-      // Unknown values still render but with default variant + raw label
-      expect(container.textContent).toContain("unknown");
-    });
-
-    it("renders multiple badges from array accessor", () => {
-      const rows = [
-        {
-          id: "1",
-          name: "Item",
-          tags: ["urgent", "fragile"],
-          status: "shipped",
-          amount: 100,
-          date: "2026-01-01",
-          detailUrl: "/items/1",
-        },
-      ];
-      function Harness() {
-        const table = useDataTable<(typeof rows)[number]>({
-          columns: [
-            {
-              label: "Tags",
-              type: "badge",
-              accessor: (r) => r.tags,
-              typeOptions: {
-                badgeVariantMap: { urgent: "error", fragile: "warning" },
-              },
-            },
-          ],
-          data: { rows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      expect(container.textContent).toContain("urgent");
-      expect(container.textContent).toContain("fragile");
-    });
-
-    it("renders maxVisible badges with +N overflow in DataTable", () => {
-      const rows = [
-        {
-          id: "1",
-          name: "Item",
-          tags: ["a", "b", "c", "d"],
-          status: "shipped",
-          amount: 100,
-          date: "2026-01-01",
-          detailUrl: "/items/1",
-        },
-      ];
-      function Harness() {
-        const table = useDataTable<(typeof rows)[number]>({
-          columns: [
-            {
-              label: "Tags",
-              type: "badge",
-              accessor: (r) => r.tags,
-              typeOptions: { maxVisible: 2 },
-            },
-          ],
-          data: { rows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      expect(container.textContent).toContain("a");
-      expect(container.textContent).toContain("b");
-      expect(container.textContent).toContain("+2");
-      expect(container.textContent).not.toContain("c");
-      expect(container.textContent).not.toContain("d");
-    });
-
-    it("renders placeholder for empty array in badge column", () => {
-      const rows = [
-        {
-          id: "1",
-          name: "Item",
-          tags: [] as string[],
-          status: "shipped",
-          amount: 100,
-          date: "2026-01-01",
-          detailUrl: "/items/1",
-        },
-      ];
-      function Harness() {
-        const table = useDataTable<(typeof rows)[number]>({
-          columns: [
-            {
-              label: "Tags",
-              type: "badge",
-              accessor: (r) => r.tags,
-            },
-          ],
-          data: { rows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      expect(container.textContent).toContain("—");
-    });
-
-    it("renders placeholder for array of all-null values in badge column", () => {
-      const rows = [
-        {
-          id: "1",
-          name: "Item",
-          tags: [null, null] as (string | null)[],
-          status: "shipped",
-          amount: 100,
-          date: "2026-01-01",
-          detailUrl: "/items/1",
-        },
-      ];
-      function Harness() {
-        const table = useDataTable<(typeof rows)[number]>({
-          columns: [
-            {
-              label: "Tags",
-              type: "badge",
-              accessor: (r) => r.tags as unknown as string[],
-            },
-          ],
-          data: { rows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      expect(container.textContent).toContain("—");
-    });
-
-    it("renders placeholder for array of empty strings in badge column", () => {
-      const rows = [
-        {
-          id: "1",
-          name: "Item",
-          tags: ["", ""],
-          status: "shipped",
-          amount: 100,
-          date: "2026-01-01",
-          detailUrl: "/items/1",
-        },
-      ];
-      function Harness() {
-        const table = useDataTable<(typeof rows)[number]>({
-          columns: [
-            {
-              label: "Tags",
-              type: "badge",
-              accessor: (r) => r.tags,
-            },
-          ],
-          data: { rows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      expect(container.textContent).toContain("—");
-    });
-
-    it("renders link cells with anchor when href is provided", () => {
-      function RouterWrapper({ children }: { children: ReactNode }) {
-        return <MemoryRouter>{wrapper({ children })}</MemoryRouter>;
-      }
-      function Harness() {
-        const table = useDataTable<TypedRow>({
-          columns: [
-            {
-              label: "Name",
-              type: "link",
-              accessor: (r) => r.name,
-              typeOptions: { href: (r) => r.detailUrl },
-            },
-          ],
-          data: { rows: typedRows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper: RouterWrapper });
-      const anchor = container.querySelector("a[href='/orders/1']");
-      expect(anchor).not.toBeNull();
-      expect(anchor?.textContent).toBe("Order 1");
-    });
-
-    it("falls back to row[id] when accessor is omitted", () => {
-      const { container } = renderTypedTable([{ id: "name", type: "text" }]);
-      expect(container.textContent).toContain("Order 1");
-    });
-
-    it("renders boolean as ✓/✗ when no type is set", () => {
-      type BoolRow = { id: string; active: boolean };
-      const rows: BoolRow[] = [
-        { id: "1", active: true },
-        { id: "2", active: false },
-      ];
-      function Harness() {
-        const table = useDataTable<BoolRow>({
-          columns: [{ id: "active", label: "Active", accessor: (r) => r.active }],
-          data: { rows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      expect(container.textContent).toContain("✓");
-      expect(container.textContent).toContain("✗");
-    });
-
-    it("renders Date as locale string when no type is set", () => {
-      type DateRow = { id: string; createdAt: Date };
-      const date = new Date("2026-03-15T00:00:00Z");
-      const rows: DateRow[] = [{ id: "1", createdAt: date }];
-      function Harness() {
-        const table = useDataTable<DateRow>({
-          columns: [{ id: "createdAt", label: "Created", accessor: (r) => r.createdAt }],
-          data: { rows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      expect(container.textContent).toContain(date.toLocaleDateString());
-    });
-
-    it("renders object as JSON when no type is set", () => {
-      type ObjRow = { id: string; meta: Record<string, unknown> };
-      const rows: ObjRow[] = [{ id: "1", meta: { foo: "bar" } }];
-      function Harness() {
-        const table = useDataTable<ObjRow>({
-          columns: [{ id: "meta", label: "Meta", accessor: (r) => r.meta }],
-          data: { rows },
-        });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      expect(container.textContent).toContain('{"foo":"bar"}');
-    });
-
-    it("explicit render overrides type renderer", () => {
-      const { container } = renderTypedTable([
-        {
-          label: "Status",
-          type: "badge",
-          accessor: (r) => r.status,
-          render: (r) => <span data-testid="custom">{r.status.toUpperCase()}</span>,
-        },
-      ]);
-      expect(container.querySelector("[data-testid='custom']")).not.toBeNull();
-      expect(container.textContent).toContain("SHIPPED");
-    });
-
-    // Compile-time tests — these assertions verify the discriminated-union
-    // shape rejects wrong-type options. Runtime behavior is incidental.
-    it("[types] rejects wrong-type options on each branch", () => {
-      const moneyCol: Column<TypedRow> = {
-        type: "money",
-        accessor: (r) => r.total,
-        // @ts-expect-error — badgeVariantMap is not a money option
-        typeOptions: { badgeVariantMap: { shipped: "success" } },
-      };
-      const badgeCol: Column<TypedRow> = {
-        type: "badge",
-        accessor: (r) => r.status,
-        // @ts-expect-error — currency is not a badge option
-        typeOptions: { currency: "USD" },
-      };
-      // @ts-expect-error — text columns reject typeOptions entirely
-      const textCol: Column<TypedRow> = {
-        type: "text",
-        accessor: (r) => r.name,
-        typeOptions: { locale: "en-US" },
-      };
-      // Reference the variables so the binding isn't elided.
-      expect([moneyCol, badgeCol, textCol]).toHaveLength(3);
-    });
-
-    it("[types] requires href on link columns", () => {
-      // @ts-expect-error — link branch requires typeOptions.href
-      const linkColMissingHref: Column<TypedRow> = {
-        type: "link",
-        accessor: (r) => r.name,
-      };
-      const linkColOk: Column<TypedRow> = {
-        type: "link",
-        accessor: (r) => r.name,
-        typeOptions: { href: (r) => r.detailUrl },
-      };
-      expect([linkColMissingHref, linkColOk]).toHaveLength(2);
-    });
-
-    it("[types] rejects array and object accessor return values on typed branches", () => {
-      // Each typed branch narrows accessor's return type to values its
-      // renderer can display. Arrays and plain objects are compile errors —
-      // the built-in renderers never produced anything useful for them. Pass
-      // `render` (and drop `type`) when the cell value isn't a primitive.
-
-      // @ts-expect-error — text accessor cannot return an array
-      const textArr: Column<TypedRow> = {
-        type: "text",
-        accessor: () => [1, 2],
-      };
-      // @ts-expect-error — text accessor cannot return a plain object
-      const textObj: Column<TypedRow> = {
-        type: "text",
-        accessor: () => ({ a: 1 }),
-      };
-      // @ts-expect-error — number accessor cannot return an object
-      const numberObj: Column<TypedRow> = {
-        type: "number",
-        accessor: () => ({ value: 1 }),
-      };
-      // @ts-expect-error — money accessor cannot return an array
-      const moneyArr: Column<TypedRow> = {
-        type: "money",
-        accessor: () => [100],
-      };
-      // @ts-expect-error — date accessor cannot return an array
-      const dateArr: Column<TypedRow> = {
-        type: "date",
-        accessor: () => [2026, 5, 13],
-      };
-      // badge accessor CAN return an array (multi-badge support)
-      const badgeArr: Column<TypedRow> = {
-        type: "badge",
-        accessor: () => ["a", "b"],
-      };
-      // @ts-expect-error — link accessor cannot return a plain object
-      const linkObj: Column<TypedRow> = {
-        type: "link",
-        accessor: () => ({ label: "x" }),
-        typeOptions: { href: () => "/x" },
-      };
-
-      // Date is allowed on the date branch (and only there).
-      const dateOk: Column<TypedRow> = {
-        type: "date",
-        accessor: () => new Date(),
-      };
-      // The untyped branch keeps `unknown` — callers escape the built-in
-      // renderer entirely by providing `render`, so any return is fine.
-      const untypedAny: Column<TypedRow> = {
-        accessor: () => ({ shape: "anything" }),
-        render: () => null,
-      };
-
-      expect([
-        textArr,
-        textObj,
-        numberObj,
-        moneyArr,
-        dateArr,
-        badgeArr,
-        linkObj,
-        dateOk,
-        untypedAny,
-      ]).toHaveLength(9);
-    });
-  });
-
-  describe("row selection", () => {
-    it("renders checkboxes when onSelectionChange is provided", () => {
-      render(<TestDataTable onSelectionChange={vi.fn()} />, { wrapper });
-
-      const checkboxes = screen.getAllByRole("checkbox");
-      // 1 header checkbox + 2 row checkboxes
-      expect(checkboxes).toHaveLength(3);
-    });
-
-    it("does not render checkboxes when onSelectionChange is not provided", () => {
-      render(<TestDataTable />, { wrapper });
-
-      expect(screen.queryByLabelText("Select all rows")).toBeNull();
-      expect(screen.queryByLabelText("Select row")).toBeNull();
-    });
-
-    it("clicking a row checkbox calls onSelectionChange with the row id", () => {
-      const onSelectionChange = vi.fn();
-      render(<TestDataTable onSelectionChange={onSelectionChange} />, {
-        wrapper,
-      });
-
-      const checkboxes = screen.getAllByRole("checkbox");
-      // checkboxes[0] = header, checkboxes[1] = Alice (id "1")
-      fireEvent.click(checkboxes[1]);
-
-      expect(onSelectionChange).toHaveBeenCalledWith(["1"]);
-    });
-
-    it("calls onSelectionChange once per toggle under StrictMode", () => {
-      const onSelectionChange = vi.fn();
-      render(<TestDataTable onSelectionChange={onSelectionChange} />, {
-        wrapper: strictWrapper,
-      });
-
-      fireEvent.click(screen.getAllByRole("checkbox")[1]);
-
-      expect(onSelectionChange).toHaveBeenCalledTimes(1);
-      expect(onSelectionChange).toHaveBeenCalledWith(["1"]);
-    });
-
-    it("clicking the header checkbox selects all rows", () => {
-      const onSelectionChange = vi.fn();
-      render(<TestDataTable onSelectionChange={onSelectionChange} />, {
-        wrapper,
-      });
-
-      const checkboxes = screen.getAllByRole("checkbox");
-      fireEvent.click(checkboxes[0]);
-
-      expect(onSelectionChange).toHaveBeenCalledWith(["1", "2"]);
-    });
-
-    it("composes several toggles dispatched in one commit", () => {
-      // Consumer code like `overdue.forEach((r) => toggleRowSelection(r))`.
-      // Every built-in affordance fires exactly one toggle per commit, so this
-      // is only reachable through the public API.
-      const onSelectionChange = vi.fn();
-      const { result } = renderHook(() =>
-        useDataTable<TestRow>({
-          columns: testColumns,
-          data: testData,
-          onSelectionChange,
-        }),
-      );
-
-      act(() => {
-        result.current.toggleRowSelection?.(testData.rows[0]);
-        result.current.toggleRowSelection?.(testData.rows[1]);
-      });
-
-      expect(result.current.selectedIds).toEqual(["1", "2"]);
-      expect(onSelectionChange).toHaveBeenLastCalledWith(["1", "2"]);
-    });
-
-    it("applies clearSelection before a toggle in the same commit", () => {
-      const onSelectionChange = vi.fn();
-      const { result } = renderHook(() =>
-        useDataTable<TestRow>({
-          columns: testColumns,
-          data: testData,
-          onSelectionChange,
-        }),
-      );
-
-      act(() => result.current.selectAllRows?.());
-      expect(result.current.selectedIds).toEqual(["1", "2"]);
-
-      // "replace the selection with just this row"
-      act(() => {
-        result.current.clearSelection?.();
-        result.current.toggleRowSelection?.(testData.rows[1]);
-      });
-
-      expect(result.current.selectedIds).toEqual(["2"]);
-      expect(onSelectionChange).toHaveBeenLastCalledWith(["2"]);
-    });
-
-    it("marks the selected row with data-state='selected' so the whole row highlights", () => {
-      const { container } = render(<TestDataTable onSelectionChange={vi.fn()} />, { wrapper });
-
-      // Nothing selected initially.
-      expect(
-        container.querySelector('[data-slot="data-table-row"][data-state="selected"]'),
-      ).toBeNull();
-
-      // checkboxes[0] = header, checkboxes[1] = first data row.
-      fireEvent.click(screen.getAllByRole("checkbox")[1]);
-
-      // The row (not just the pinned cells) must carry data-state="selected",
-      // which is what `Table.Row` keys its selected background off of.
-      expect(
-        container.querySelectorAll('[data-slot="data-table-row"][data-state="selected"]'),
-      ).toHaveLength(1);
-    });
-
-    it("the header checkbox adds and removes only the current page's rows", () => {
-      const onSelectionChange = vi.fn();
-      const pageB: DataTableData<TestRow> = {
-        rows: [
-          { id: "3", name: "Carol", status: "Active" },
-          { id: "4", name: "Dave", status: "Inactive" },
-        ],
-      };
-      const { rerender } = render(<TestDataTable onSelectionChange={onSelectionChange} />, {
-        wrapper,
-      });
-
-      // Pick Alice on the first page, then move to the second.
-      fireEvent.click(screen.getAllByRole("checkbox")[1]);
-      rerender(<TestDataTable data={pageB} onSelectionChange={onSelectionChange} />);
-
-      // Checking the header adds this page without dropping Alice…
-      fireEvent.click(screen.getByLabelText("Select all rows"));
-      expect(onSelectionChange).toHaveBeenLastCalledWith(["1", "3", "4"]);
-
-      // …and unchecking it removes only this page's rows.
-      fireEvent.click(screen.getByLabelText("Select all rows"));
-      expect(onSelectionChange).toHaveBeenLastCalledWith(["1"]);
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // Row actions
-  // -------------------------------------------------------------------------
-  describe("row actions", () => {
-    function TestRowActions({ rowActions }: { rowActions: RowAction<TestRow>[] }) {
-      const table = useDataTable<TestRow>({ columns: testColumns, data: testData, rowActions });
-      return (
-        <DataTable.Root value={table}>
-          <DataTable.Table />
-        </DataTable.Root>
-      );
-    }
-
-    it("disables an action for rows where canApply returns false", async () => {
-      const onClick = vi.fn();
-      render(
-        <TestRowActions
-          rowActions={[
-            { id: "activate", label: "Activate", canApply: (r) => r.status !== "Active", onClick },
-          ]}
-        />,
-        { wrapper },
-      );
-
-      // Alice is Active → disabled; Bob is Inactive → enabled.
-      expect((await activateItemFor(0)).getAttribute("aria-disabled")).toBe("true");
-      cleanup();
-      render(
-        <TestRowActions
-          rowActions={[
-            { id: "activate", label: "Activate", canApply: (r) => r.status !== "Active", onClick },
-          ]}
-        />,
-        { wrapper },
-      );
-      const bobItem = await activateItemFor(1);
-      expect(bobItem.getAttribute("aria-disabled")).not.toBe("true");
-      fireEvent.click(bobItem);
-      expect(onClick).toHaveBeenCalledWith(testData.rows[1]);
-    });
-
-    it("still honours the deprecated isDisabled", async () => {
-      render(
-        <TestRowActions
-          rowActions={[
-            {
-              id: "activate",
-              label: "Activate",
-              isDisabled: (r) => r.status === "Active",
-              onClick: vi.fn(),
-            },
-          ]}
-        />,
-        { wrapper },
-      );
-
-      expect((await activateItemFor(0)).getAttribute("aria-disabled")).toBe("true");
-    });
-
-    it("shares presentation with rowSelection.actions while keeping the row predicate separate", () => {
-      const activate = { id: "activate", label: "Activate" };
-      const options: UseDataTableOptions<TestRow> = {
-        columns: testColumns,
-        data: testData,
-        rowActions: [
-          { ...activate, canApply: (row) => row.status !== "Active", onClick: (row) => void row },
-        ],
-        rowSelection: { actions: [{ ...activate, onClick: (ids) => void ids }] },
-      };
-      expectTypeOf(options.rowActions![0].canApply).toEqualTypeOf<
-        ((row: TestRow) => boolean) | undefined
-      >();
-      expectTypeOf(options.rowSelection!.actions![0].onClick)
-        .parameter(0)
-        .toEqualTypeOf<string[]>();
-      expect(options.rowSelection!.actions).toHaveLength(1);
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // Expandable rows
-  // -------------------------------------------------------------------------
-  describe("expandable rows", () => {
-    const EXPAND_TH = '[data-slot="data-table-header"] th[data-col-key="__datatable_expand__"]';
-    const EXPANDED_ROW = '[data-slot="data-table-expanded-row"]';
-
-    function ExpandHarness(props: {
-      data?: DataTableData<TestRow>;
-      loading?: boolean;
-      error?: Error | null;
-      onClickRow?: (row: TestRow) => void;
-      onSelectionChange?: (ids: string[]) => void;
-      rowActions?: RowAction<TestRow>[];
-      renderExpandedRow?: (row: TestRow) => ReactNode;
-      canExpandRow?: (row: TestRow) => boolean;
-      expandRowLabel?: (row: TestRow) => string;
-      expandedIds?: string[];
-      onExpandedChange?: (ids: string[]) => void;
-    }) {
-      const table = useDataTable<TestRow>({
-        columns: testColumns,
-        data: "data" in props ? props.data : testData,
-        loading: props.loading,
-        error: props.error,
-        onClickRow: props.onClickRow,
-        onSelectionChange: props.onSelectionChange,
-        rowActions: props.rowActions,
-        rowExpansion: props.renderExpandedRow
-          ? // Cast because the harness keeps flat props and picks the union
-            // branch at runtime; the branches themselves are covered by the
-            // type-level test below.
-            ({
-              render: props.renderExpandedRow,
-              canExpand: props.canExpandRow,
-              getLabel: props.expandRowLabel,
-              expandedIds: props.expandedIds,
-              onChange: props.onExpandedChange,
-            } as RowExpansionOptions<TestRow>)
-          : undefined,
-      });
-      return (
-        <DataTable.Root value={table}>
-          <DataTable.Table />
-        </DataTable.Root>
-      );
-    }
-
-    it("rejects incoherent rowExpansion configs at compile time", () => {
-      const base = { columns: testColumns, data: testData };
-      type Options = UseDataTableOptions<TestRow>;
-
-      // The directive sits on the offending property, which is where TS reports
-      // the mismatch.
-      const missingOnChange: Options = {
-        ...base,
-        // @ts-expect-error — `expandedIds` without `onChange` is inert. Making it
-        // unrepresentable is what removed the hook's dev-time warning effect.
-        rowExpansion: { render: detail, expandedIds: ["1"] },
-      };
-
-      const labelWithoutRender: Options = {
-        ...base,
-        // @ts-expect-error — a label with no renderer does nothing.
-        rowExpansion: { getLabel: (r: TestRow) => r.name },
-      };
-
-      const controlled: Options = {
-        ...base,
-        rowExpansion: { render: detail, expandedIds: ["1"], onChange: () => {} },
-      };
-      const uncontrolled: Options = { ...base, rowExpansion: { render: detail } };
-      // `onChange` alone stays legal — in uncontrolled mode it is a notification.
-      const notified: Options = {
-        ...base,
-        rowExpansion: { render: detail, onChange: () => {} },
-      };
-
-      expect([
-        missingOnChange,
-        labelWithoutRender,
-        controlled,
-        uncontrolled,
-        notified,
-      ]).toHaveLength(5);
-    });
-
-    it("renders no expand column when renderExpandedRow is absent", () => {
-      const { container } = render(<ExpandHarness />, { wrapper });
-
-      expect(container.querySelector(EXPAND_TH)).toBeNull();
-      expect(screen.queryByLabelText("Expand row")).toBeNull();
-    });
-
-    it("renders an expand column when renderExpandedRow is provided", () => {
-      const { container } = render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
-
-      const th = container.querySelector(EXPAND_TH);
-      expect(th).not.toBeNull();
-      // Never an empty <th> — the header carries sr-only text.
-      expect(th?.textContent).toBe("Expand");
-      expect(screen.getAllByLabelText("Expand row")).toHaveLength(2);
-    });
-
-    it("clicking the chevron reveals the render prop's content", () => {
-      render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
-
-      expect(screen.queryByText("Details for Alice")).toBeNull();
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-
-      expect(screen.getByText("Details for Alice")).toBeDefined();
-      // Only the clicked row opens.
-      expect(screen.queryByText("Details for Bob")).toBeNull();
-    });
-
-    it("clicking the chevron again collapses the row", async () => {
-      render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
-
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-      expect(screen.getByText("Details for Alice")).toBeDefined();
-
-      fireEvent.click(screen.getByLabelText("Collapse row"));
-
-      // The row stays mounted while the collapse transition plays, so removal
-      // is asynchronous — `aria-expanded` flips immediately, the DOM catches up.
-      await waitFor(() => expect(screen.queryByText("Details for Alice")).toBeNull());
-    });
-
-    it("keeps the detail row mounted while collapsing, marked data-state='closed'", async () => {
-      const { container } = render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
-
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-      expect(container.querySelector(`${EXPANDED_ROW}[data-state="open"]`)).not.toBeNull();
-
-      fireEvent.click(screen.getByLabelText("Collapse row"));
-
-      // Still in the DOM, but flipped to the closed state — this is what gives
-      // the exit transition something to animate. Without the presence state
-      // machine React would remove the row on the same tick and it would snap.
-      expect(container.querySelector(`${EXPANDED_ROW}[data-state="closed"]`)).not.toBeNull();
-      // The trigger's state is not deferred — it reports collapsed right away
-      // (both rows now read "Expand row", so index into them).
-      expect(screen.getAllByLabelText("Expand row")[0].getAttribute("aria-expanded")).toBe("false");
-
-      await waitFor(() => expect(container.querySelector(EXPANDED_ROW)).toBeNull());
-    });
-
-    it("exposes aria-expanded on the trigger, flipping false → true", () => {
-      render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
-
-      const trigger = screen.getAllByLabelText("Expand row")[0];
-      expect(trigger.getAttribute("aria-expanded")).toBe("false");
-
-      fireEvent.click(trigger);
-      expect(screen.getByLabelText("Collapse row").getAttribute("aria-expanded")).toBe("true");
-    });
-
-    it("points aria-controls at a present element while expanded, and omits it while collapsed", () => {
-      render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
-
-      const trigger = screen.getAllByLabelText("Expand row")[0];
-      // Must never point at an id that is absent from the DOM.
-      expect(trigger.getAttribute("aria-controls")).toBeNull();
-
-      fireEvent.click(trigger);
-      const controls = screen.getByLabelText("Collapse row").getAttribute("aria-controls");
-      expect(controls).toBeTruthy();
-      expect(document.getElementById(controls as string)).not.toBeNull();
-    });
-
-    it("spans the detail cell across selection + expand + columns + actions", () => {
-      const { container } = render(
-        <ExpandHarness
-          renderExpandedRow={detail}
-          onSelectionChange={vi.fn()}
-          rowActions={[{ id: "edit", label: "Edit", onClick: vi.fn() }]}
-        />,
-        { wrapper },
-      );
-
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-
-      // 1 selection + 1 expand + 2 visible columns + 1 actions
-      expect(container.querySelector(`${EXPANDED_ROW} td`)?.getAttribute("colspan")).toBe("5");
-    });
-
-    it("keeps several rows open at once", () => {
-      const { container } = render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
-
-      const triggers = screen.getAllByLabelText("Expand row");
-      fireEvent.click(triggers[0]);
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]); // Bob's, after Alice's flipped
-
-      expect(screen.getByText("Details for Alice")).toBeDefined();
-      expect(screen.getByText("Details for Bob")).toBeDefined();
-      expect(container.querySelectorAll(EXPANDED_ROW)).toHaveLength(2);
-    });
-
-    it("does not fire onClickRow when the chevron is used", () => {
-      const onClickRow = vi.fn();
-      render(<ExpandHarness renderExpandedRow={detail} onClickRow={onClickRow} />, { wrapper });
-
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-
-      expect(onClickRow).not.toHaveBeenCalled();
-      expect(screen.getByText("Details for Alice")).toBeDefined();
-    });
-
-    it("renders no chevron for rows without an id", () => {
-      // Expansion is keyed by id, so an id-less row gets no chevron at all
-      // rather than a disabled one — a row must never be un-toggleable.
-      const mixed: DataTableData<TestRow> = {
-        rows: [
-          { id: "1", name: "Alice", status: "Active" },
-          { name: "Bob", status: "Inactive" } as TestRow,
-        ],
-      };
-      const { container } = render(<ExpandHarness data={mixed} renderExpandedRow={detail} />, {
-        wrapper,
-      });
-
-      expect(screen.getAllByLabelText("Expand row")).toHaveLength(1);
-      // The cell is still rendered (empty), so the column count stays consistent.
-      const bodyRows = container.querySelectorAll('[data-slot="data-table-row"]');
-      expect(bodyRows[1].querySelectorAll("td")).toHaveLength(3);
-    });
-
-    it("renders no chevron for a row that canExpandRow rejects", () => {
-      render(
-        <ExpandHarness renderExpandedRow={detail} canExpandRow={(row) => row.name === "Alice"} />,
-        { wrapper },
-      );
-
-      const triggers = screen.getAllByLabelText("Expand row");
-      expect(triggers).toHaveLength(1);
-      fireEvent.click(triggers[0]);
-      expect(screen.getByText("Details for Alice")).toBeDefined();
-    });
-
-    it("builds a contextual accessible name from expandRowLabel", () => {
-      render(<ExpandHarness renderExpandedRow={detail} expandRowLabel={(row) => row.name} />, {
-        wrapper,
-      });
-
-      const trigger = screen.getByLabelText("Expand row Alice");
-      expect(screen.getByLabelText("Expand row Bob")).toBeDefined();
-
-      fireEvent.click(trigger);
-      expect(screen.getByLabelText("Collapse row Alice")).toBeDefined();
-    });
-
-    it("renders the panel as a named region", () => {
-      render(<ExpandHarness renderExpandedRow={detail} expandRowLabel={(row) => row.name} />, {
-        wrapper,
-      });
-
-      fireEvent.click(screen.getByLabelText("Expand row Alice"));
-
-      const region = screen.getByRole("region", { name: "Alice details" });
-      expect(region.textContent).toBe("Details for Alice");
-    });
-
-    it("returns focus to the trigger when the panel collapses while focus is inside it", async () => {
-      render(<ExpandHarness renderExpandedRow={focusableDetail} />, { wrapper });
-
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-
-      const inner = screen.getByTestId("inner");
-      act(() => inner.focus());
-      expect(document.activeElement).toBe(inner);
-
-      const trigger = screen.getByLabelText("Collapse row");
-      fireEvent.click(trigger);
-
-      // The handoff runs on unmount, which now waits for the collapse
-      // transition. Without it, focus would fall to <body> and the user would
-      // lose their place in the table.
-      await waitFor(() => expect(document.activeElement).toBe(trigger));
-    });
-
-    it("renders the matching rows open from a controlled expandedIds", () => {
-      const { container } = render(
-        <ExpandHarness renderExpandedRow={detail} expandedIds={["2"]} onExpandedChange={vi.fn()} />,
-        { wrapper },
-      );
-
-      expect(screen.getByText("Details for Bob")).toBeDefined();
-      expect(screen.queryByText("Details for Alice")).toBeNull();
-      expect(container.querySelectorAll(EXPANDED_ROW)).toHaveLength(1);
-    });
-
-    it("reports controlled toggles through onExpandedChange without changing internal state", () => {
-      const onExpandedChange = vi.fn();
-      render(
-        <ExpandHarness
-          renderExpandedRow={detail}
-          expandedIds={[]}
-          onExpandedChange={onExpandedChange}
-        />,
-        { wrapper },
-      );
-
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-
-      expect(onExpandedChange).toHaveBeenCalledWith(["1"]);
-      // The caller owns the state — nothing opens until `expandedIds` changes.
-      expect(screen.queryByText("Details for Alice")).toBeNull();
-    });
-
-    it("pins the expand column left at the selection column's measured offset", () => {
-      const { container } = render(
-        <ExpandHarness renderExpandedRow={detail} onSelectionChange={vi.fn()} />,
-        { wrapper },
-      );
-
-      const th = container.querySelector<HTMLElement>(EXPAND_TH);
-      expect(th?.style.position).toBe("sticky");
-      expect(th?.style.left).toBe("52px");
-      // The freeze seam moves off the selection column onto the expand column.
-      const selectionTh = container.querySelector<HTMLElement>(
-        '[data-slot="data-table-header"] th[data-col-key="__datatable_selection__"]',
-      );
-      expect(th?.className).toContain("data-pin-shadow-left");
-      expect(selectionTh?.className).not.toContain("data-pin-shadow-left");
-    });
-
-    it("includes an expand cell in the skeleton rows", () => {
-      const { container } = render(
-        <ExpandHarness data={undefined} loading renderExpandedRow={detail} />,
-        { wrapper },
-      );
-
-      const loadingRow = container.querySelector('[data-datatable-state="loading"]');
-      // 1 expand + 2 visible columns — row heights match before and after load.
-      expect(loadingRow?.querySelectorAll("td")).toHaveLength(3);
-    });
-
-    it("spans the expand column in the empty and error status rows", () => {
-      const { container: emptyContainer } = render(
-        <ExpandHarness data={{ rows: [] }} renderExpandedRow={detail} />,
-        { wrapper },
-      );
-      expect(
-        emptyContainer.querySelector('[data-datatable-state="empty"] td')?.getAttribute("colspan"),
-      ).toBe("3");
-
-      const { container: errorContainer } = render(
-        <ExpandHarness data={undefined} error={new Error("boom")} renderExpandedRow={detail} />,
-        { wrapper },
-      );
-      expect(
-        errorContainer.querySelector('[data-datatable-state="error"] td')?.getAttribute("colspan"),
-      ).toBe("3");
-    });
-
-    // -----------------------------------------------------------------------
-    // Regressions found in review
-    // -----------------------------------------------------------------------
-
-    it("keeps row keys unique when an id-less row's index matches another row's id", () => {
-      // `{id: "1"}` at index 0 and an id-less row at index 1 both keyed to "1"
-      // (React stringifies keys), so React reconciled two siblings under one key.
-      // The keys are namespaced now, so the two spaces can't overlap.
-      const err = vi.spyOn(console, "error").mockImplementation(() => {});
-      const collidingData: DataTableData<TestRow> = {
-        rows: [
-          { id: "1", name: "Alice", status: "Active" },
-          { name: "Bob", status: "Inactive" } as TestRow,
-          { id: "2", name: "Carol", status: "Active" },
-        ],
-      };
-      render(<ExpandHarness data={collidingData} renderExpandedRow={detail} />, { wrapper });
-
-      expect(err.mock.calls.filter((call) => String(call[0]).includes("same key"))).toHaveLength(0);
-      err.mockRestore();
-    });
-
-    it("closes a row that becomes non-expandable while open", async () => {
-      // `canExpandRow` gates both directions. A row whose predicate flips to
-      // false goes quiet: no panel, no chevron. Its id stays in `expandedIds`
-      // but is inert — the alternative (letting the set alone open a panel)
-      // renders detail content for a row the consumer told us to skip.
-      function Harness({ canExpand }: { canExpand: boolean }) {
-        return (
-          <ExpandHarness
-            renderExpandedRow={detail}
-            canExpandRow={() => canExpand}
-            expandedIds={["1"]}
-            onExpandedChange={vi.fn()}
-          />
-        );
-      }
-      const { rerender } = render(<Harness canExpand />, { wrapper });
-      expect(screen.getByText("Details for Alice")).toBeDefined();
-
-      rerender(<Harness canExpand={false} />);
-
-      await waitFor(() => expect(screen.queryByText("Details for Alice")).toBeNull());
-      expect(screen.queryByLabelText("Collapse row")).toBeNull();
-      expect(screen.queryByLabelText("Expand row")).toBeNull();
-    });
-
-    it("does not open a panel for a row canExpandRow rejects, even when its id is in expandedIds", () => {
-      // Restoring `expandedIds` from a URL or storage must not run
-      // `renderExpandedRow` against a row the consumer excluded — that row may
-      // have no detail data at all.
-      const renderExpandedRow = vi.fn(detail);
-      render(
-        <ExpandHarness
-          renderExpandedRow={renderExpandedRow}
-          canExpandRow={() => false}
-          expandedIds={["1", "2"]}
-          onExpandedChange={vi.fn()}
-        />,
-        { wrapper },
-      );
-
-      expect(screen.queryByText("Details for Alice")).toBeNull();
-      expect(screen.queryByRole("region")).toBeNull();
-      expect(renderExpandedRow).not.toHaveBeenCalled();
-    });
-
-    it("marks the closing panel inert so it leaves the tab order and a11y tree", async () => {
-      const { container } = render(<ExpandHarness renderExpandedRow={focusableDetail} />, {
-        wrapper,
-      });
-
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-      const panel = container.querySelector(`${EXPANDED_ROW} section`);
-      expect(panel?.hasAttribute("inert")).toBe(false);
-
-      fireEvent.click(screen.getByLabelText("Collapse row"));
-
-      // Zero height and zero opacity still leave descendants focusable and
-      // announced, so the closing window needs `inert` explicitly.
-      expect(container.querySelector(`${EXPANDED_ROW} section`)?.hasAttribute("inert")).toBe(true);
-      await waitFor(() => expect(container.querySelector(EXPANDED_ROW)).toBeNull());
-    });
-
-    it("sanitises whitespace in row ids so the panel id and aria-controls stay valid", () => {
-      const spaced: DataTableData<TestRow> = {
-        rows: [{ id: "ORD 4471", name: "Alice", status: "Active" }],
-      };
-      render(<ExpandHarness data={spaced} renderExpandedRow={detail} />, { wrapper });
-
-      fireEvent.click(screen.getByLabelText("Expand row"));
-
-      const controls = screen
-        .getByLabelText("Collapse row")
-        .getAttribute("aria-controls") as string;
-      // `aria-controls` is an IDREF *list*: a space would split it into two
-      // references that resolve to nothing, silently dropping the association.
-      expect(controls).not.toMatch(/\s/);
-      expect(document.getElementById(controls)).not.toBeNull();
-    });
-
-    it("moves focus to the table container when the whole row unmounts from under it", () => {
-      // The collapse-by-click test covers the case where the trigger survives.
-      // Here the row disappears (refetch/filter/pagination) while focus is in the
-      // panel, so the trigger is gone too and focus would otherwise hit <body>.
-      const { container, rerender } = render(
-        <ExpandHarness data={testData} renderExpandedRow={focusableDetail} />,
-        { wrapper },
-      );
-
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-      const inner = screen.getByTestId("inner");
-      act(() => inner.focus());
-      expect(document.activeElement).toBe(inner);
-
-      // Alice drops out of the result set entirely.
-      rerender(
-        <ExpandHarness
-          data={{ rows: [{ id: "2", name: "Bob", status: "Inactive" }] }}
-          renderExpandedRow={focusableDetail}
-        />,
-      );
-
-      const scrollContainer = container.querySelector<HTMLElement>('[data-slot="table-container"]');
-      expect(document.activeElement).toBe(scrollContainer);
-      expect(document.activeElement).not.toBe(document.body);
-    });
-
-    it("does not measure a nested DataTable's header into the outer table's widths", () => {
-      // Shared column keys must not let a nested header overwrite the outer width.
-      vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
-        function (this: HTMLElement) {
-          if (this.dataset.colKey !== "__datatable_selection__") return new DOMRect();
-          return new DOMRect(0, 0, this.closest("[data-nested]") ? 40 : 70, 40);
-        },
-      );
-
-      function NestedTable() {
-        const table = useDataTable<TestRow>({
-          columns: testColumns,
-          data: { rows: [testData.rows[0]] },
-          onSelectionChange: vi.fn(),
-        });
-        return (
-          <div data-nested>
-            <DataTable.Root value={table}>
-              <DataTable.Table />
-            </DataTable.Root>
-          </div>
-        );
-      }
-
-      let api!: UseDataTableReturn<TestRow>;
-      function Harness() {
-        const table = useDataTable<TestRow>({
-          columns: testColumns,
-          data: testData,
-          onSelectionChange: vi.fn(),
-          rowExpansion: { render: () => <NestedTable /> },
-        });
-        api = table;
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-      expect(container.querySelectorAll("table").length).toBeGreaterThan(1);
-
-      const selectionHeaders = container.querySelectorAll<HTMLElement>(
-        '[data-slot="data-table-header"] th[data-col-key="__datatable_selection__"]',
-      );
-      expect(selectionHeaders).toHaveLength(2);
-      expect(Array.from(selectionHeaders, (cell) => cell.getBoundingClientRect().width)).toEqual([
-        70, 40,
-      ]);
-
-      // Resubscribe while the nested table is mounted to exercise the ownership filter.
-      act(() => api.toggleColumn("Status"));
-
-      expect(container.querySelector<HTMLElement>(EXPAND_TH)?.style.left).toBe("70px");
-    });
-
-    it("keeps collapseAllRows stable and inert while nothing is expanded", () => {
-      // The documented "collapse on page change" recipe lists it in an effect's
-      // dependency array; an unstable identity plus an unconditional state write
-      // there loops until React bails with a max-update-depth error.
-      const seen: (() => void)[] = [];
-      const onExpandedChange = vi.fn();
-      function Harness() {
-        const table = useDataTable<TestRow>({
-          columns: testColumns,
-          data: testData,
-          rowExpansion: { render: detail, onChange: onExpandedChange },
-        });
-        if (table.collapseAllRows) seen.push(table.collapseAllRows);
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { rerender } = render(<Harness />, { wrapper });
-      rerender(<Harness />);
-
-      expect(seen.length).toBeGreaterThan(1);
-      expect(seen[seen.length - 1]).toBe(seen[0]);
-
-      // Collapsing an already-collapsed table is a no-op, not a spurious event.
-      act(() => seen[0]());
-      expect(onExpandedChange).not.toHaveBeenCalled();
-
-      // The identity must survive an actual expansion, not just a re-render.
-      // `expandedRowIds` is a fresh Set on every expansion change, so having it
-      // in the useCallback deps kept the identity churning — and the documented
-      // effect recipe then re-fired on expand and collapsed the row the user had
-      // just opened. A rerender-only assertion never sees that.
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-      expect(screen.getByText("Details for Alice")).toBeDefined();
-      expect(seen[seen.length - 1]).toBe(seen[0]);
-    });
-
-    it("calls onExpandedChange once per toggle under StrictMode", () => {
-      const onExpandedChange = vi.fn();
-      render(<ExpandHarness renderExpandedRow={detail} onExpandedChange={onExpandedChange} />, {
-        wrapper: strictWrapper,
-      });
-
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-
-      expect(onExpandedChange).toHaveBeenCalledTimes(1);
-      expect(onExpandedChange).toHaveBeenCalledWith(["1"]);
-    });
-
-    it("composes several expansion toggles dispatched in one commit", () => {
-      const onChange = vi.fn();
-      const { result } = renderHook(() =>
-        useDataTable<TestRow>({
-          columns: testColumns,
-          data: testData,
-          rowExpansion: { render: detail, onChange },
-        }),
-      );
-
-      act(() => {
-        result.current.toggleRowExpansion?.(testData.rows[0]);
-        result.current.toggleRowExpansion?.(testData.rows[1]);
-      });
-
-      expect(result.current.expandedIds).toEqual(["1", "2"]);
-      expect(onChange).toHaveBeenLastCalledWith(["1", "2"]);
-    });
-
-    it("applies collapseAllRows before a toggle in the same commit", () => {
-      const { result } = renderHook(() =>
-        useDataTable<TestRow>({
-          columns: testColumns,
-          data: testData,
-          rowExpansion: { render: detail },
-        }),
-      );
-
-      act(() => {
-        result.current.toggleRowExpansion?.(testData.rows[0]);
-        result.current.toggleRowExpansion?.(testData.rows[1]);
-      });
-
-      act(() => {
-        result.current.collapseAllRows?.();
-        result.current.toggleRowExpansion?.(testData.rows[1]);
-      });
-
-      expect(result.current.expandedIds).toEqual(["2"]);
-    });
-
-    it("keeps toggleRowExpansion stable across an expansion", () => {
-      const seen: ((row: TestRow) => void)[] = [];
-      function Harness() {
-        const table = useDataTable<TestRow>({
-          columns: testColumns,
-          data: testData,
-          rowExpansion: { render: detail },
-        });
-        if (table.toggleRowExpansion) seen.push(table.toggleRowExpansion);
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      render(<Harness />, { wrapper });
-
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-
-      expect(seen.length).toBeGreaterThan(1);
-      expect(seen[seen.length - 1]).toBe(seen[0]);
-    });
-
-    it("leaves --data-table-viewport unset when the scrollport measures zero", () => {
-      // jsdom reports clientWidth 0, matching a table mounted inside a hidden
-      // container. Writing `0px` would collapse every panel via min(100%, 0px).
-      const { container } = render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
-
-      const scrollContainer = container.querySelector<HTMLElement>('[data-slot="table-container"]');
-      expect(scrollContainer?.style.getPropertyValue("--data-table-viewport")).toBe("");
-
-      // The panel therefore falls back to 100% rather than 0.
-      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
-      expect(screen.getByText("Details for Alice")).toBeDefined();
-    });
-  });
-
-  // -------------------------------------------------------------------------
-  // Sticky / pinned columns
-  // -------------------------------------------------------------------------
-  describe("pinned columns", () => {
-    type Row = { id: string; a: string; b: string; c: string };
-    const rows: Row[] = [{ id: "1", a: "A1", b: "B1", c: "C1" }];
-    const pinnedCols: Column<Row>[] = [
-      { id: "a", label: "A", width: 100, pin: "left", render: (r) => r.a },
-      { id: "b", label: "B", width: 100, render: (r) => r.b },
-      { id: "c", label: "C", width: 100, pin: "right", render: (r) => r.c },
-    ];
-
-    function PinHarness(props: { onSelectionChange?: (ids: string[]) => void }) {
-      const table = useDataTable<Row>({
-        columns: pinnedCols,
-        data: { rows },
-        onSelectionChange: props.onSelectionChange,
-      });
-      return (
-        <DataTable.Root value={table}>
-          <DataTable.Table />
-        </DataTable.Root>
-      );
-    }
-
-    it("applies sticky positioning + edge offsets to pinned columns", () => {
-      const { container } = render(<PinHarness />, { wrapper });
-      const a = headByText(container, "A");
-      const c = headByText(container, "C");
-      expect(a?.style.position).toBe("sticky");
-      expect(a?.style.left).toBe("0px");
-      expect(c?.style.position).toBe("sticky");
-      expect(c?.style.right).toBe("0px");
-      // Non-pinned column is not sticky.
-      expect(headByText(container, "B")?.style.position).toBe("");
-    });
-
-    it("offsets a left-pinned column past the auto-pinned selection column", () => {
-      const { container } = render(<PinHarness onSelectionChange={() => {}} />, { wrapper });
-      // Selection column auto-pins to the left edge; column A stacks after it.
-      const a = headByText(container, "A");
-      expect(a?.style.left).toBe("52px");
-    });
-
-    it("marks the boundary pinned cell with a scroll-aware freeze shadow", () => {
-      const { container } = render(<PinHarness />, { wrapper });
-      // The shadow pseudo-element is revealed only when the container is scrolled
-      // under that edge (data-pin-shadow-left / -right toggled by DataTable.Table).
-      expect(headByText(container, "A")?.className).toContain("data-pin-shadow-left");
-      expect(headByText(container, "C")?.className).toContain("data-pin-shadow-right");
-    });
-
-    it("honours a pin without a width (offsets come from measured widths)", () => {
-      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
-      const cols: Column<Row>[] = [
-        { id: "a", label: "A", pin: "left", render: (r) => r.a },
-        { id: "b", label: "B", width: 100, render: (r) => r.b },
-      ];
-      function Harness() {
-        const table = useDataTable<Row>({ columns: cols, data: { rows } });
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      // Width is no longer required to pin — the column is still frozen (offsets
-      // are measured at runtime), and there is no dev warning.
-      expect(headByText(container, "A")?.style.position).toBe("sticky");
-      expect(headByText(container, "A")?.style.left).toBe("0px");
-      expect(warn).not.toHaveBeenCalled();
-      warn.mockRestore();
-    });
-
-    it("keeps stored pin state keyed to definition order for a column with no id/label", () => {
-      // The middle column has neither `id` nor `label`, so its key falls back to
-      // its definition index ("1"). Regression for the two-index-space bug:
-      // resolving the render key from the *visible* array would re-key this
-      // column to "0" once the column ahead of it is hidden, silently detaching
-      // its stored pin (and visibility) state.
-      type R = { id: string; a: string; b: string; c: string };
-      const dataRows: R[] = [{ id: "1", a: "A1", b: "B1", c: "C1" }];
-      const cols: Column<R>[] = [
-        { id: "a", label: "A", width: 100, render: (r) => r.a },
-        { width: 100, render: (r) => r.b }, // no id, no label → definition key "1"
-        { id: "c", label: "C", width: 100, render: (r) => r.c },
-      ];
-      let api!: UseDataTableReturn<R>;
-      function Harness() {
-        const table = useDataTable<R>({ columns: cols, data: { rows: dataRows } });
-        api = table;
-        return (
-          <DataTable.Root value={table}>
-            <DataTable.Table />
-          </DataTable.Root>
-        );
-      }
-      const { container } = render(<Harness />, { wrapper });
-      const keyless = () =>
-        container.querySelector<HTMLElement>(
-          '[data-slot="data-table-header"] th[data-col-key="1"]',
-        );
-
-      // Renders under its definition-order key, then pin it (stored under "1").
-      expect(keyless()).not.toBeNull();
-      act(() => api.setPin("1", "left"));
-      expect(keyless()?.style.position).toBe("sticky");
-
-      // Hiding the column ahead of it must NOT re-key it to its new visible
-      // index and drop the pin.
-      act(() => api.toggleColumn("a"));
-      expect(keyless()?.style.position).toBe("sticky");
-    });
-  });
 });
diff --git a/packages/core/src/components/data-table/data-table.tsx b/packages/core/src/components/data-table/data-table.tsx
index 9ea32852..a72fc7d1 100644
--- a/packages/core/src/components/data-table/data-table.tsx
+++ b/packages/core/src/components/data-table/data-table.tsx
@@ -1,2162 +1,13 @@
-import {
-  createContext,
-  Fragment,
-  useContext,
-  useEffect,
-  useId,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactNode,
-} from "react";
-import { ContextMenu } from "@base-ui/react/context-menu";
-import { ChevronRight, Ellipsis } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { useTimeZone } from "@/contexts/appshell-context";
-import {
-  CollectionControlProvider,
-  useCollectionControlOptional,
-} from "@/contexts/collection-control-context";
-import { Table } from "@/components/table";
-import { Button } from "@/components/button";
-import { Checkbox } from "@/components/checkbox";
-import { Menu } from "@/components/menu";
-import { Tooltip } from "@/components/tooltip";
-import type {
-  Column,
-  DataTableFilterConfig,
-  HeaderRenderContext,
-  RowAction,
-  RowExpansionOptions,
-  UseDataTableReturn,
-} from "./types";
-import { DataTableContext, type DataTableContextValue } from "./data-table-context";
-import { useDataTableT } from "./i18n";
-import { getCellValue, createTypedCellRenderer } from "./cell-renderers";
-import { isDecimalFilterValueValid } from "./filter-value-utils";
-import { isTemporalFilterType, normalizeTemporalFilterValue } from "@/lib/temporal-filter-values";
-import { useCellContextMenu, type CellContextMenuState } from "./use-cell-context-menu";
-import { useCellEditNavigation } from "./use-cell-edit-navigation";
-import {
-  DataTableEditableCell,
-  hasEditorIcon,
-  ICON_SPACE_CLASS_NAME,
-  isEditableColumn,
-} from "./editable-cell";
-import {
-  DataTableToolbar,
-  DataTableFilters,
-  getOperatorLabel,
-  getVisibleFilterOperators,
-} from "./toolbar";
+import { DataTableRoot } from "./root";
+import { DataTableToolbar } from "./toolbar";
+import { DataTableFilters } from "./filters/filters";
 import { DataTableColumnSettings } from "./column-settings";
+import { DataTableTable } from "./table";
+import { DataTableFooter } from "./footer";
 import { DataTablePagination } from "./pagination";
-import {
-  DataTableSelectionAnnouncer,
-  DataTableSelectionBar,
-  hasBulkActions,
-  isSelectionBarOpen,
-} from "./selection-bar";
-export type { DataTablePaginationProps } from "./pagination";
-
-// Fallback row count when no pageSize is configured (static / uncontrolled tables)
-const DEFAULT_ROWS = 5;
-
-// Empty/error states reserve a fixed 3 rows' worth of height — enough to
-// read as an intentional region, independent of pageSize (so large page
-// sizes don't create a huge blank or, when height-constrained, scrollable
-// area, and tiny page sizes don't collapse to a thin strip).
-const STATUS_ROWS = 3;
-const ROW_HEIGHT_PX = 53;
-
-// Resolve the effective horizontal alignment for a column. Numeric `type`
-// values default to `"right"` so digits line up along their decimal place;
-// everything else defaults to `"left"`. Explicit `col.align` always wins.
-function resolveAlign<TRow extends Record<string, unknown>>(col: Column<TRow>): "left" | "right" {
-  if (col.align) return col.align;
-  if (col.type === "number" || col.type === "money") return "right";
-  return "left";
-}
-
-function nextSortDirection(current: string | undefined): "Asc" | "Desc" | undefined {
-  if (current === "Asc") return "Desc";
-  if (current === "Desc") return undefined;
-  return "Asc";
-}
-
-function renderDefaultHeader(
-  content: ReactNode,
-  ctx: HeaderRenderContext,
-  align: "left" | "right",
-  edges?: { bleedLeft?: boolean; bleedRight?: boolean },
-): ReactNode {
-  if (!ctx.sortable) return content;
-
-  return (
-    <button
-      type="button"
-      onClick={ctx.activateSort}
-      className={cn(
-        "astw:flex astw:h-10 astw:w-full astw:cursor-pointer astw:select-none astw:items-center astw:gap-1 astw:border-0 astw:bg-transparent astw:-mx-2 astw:p-0 astw:px-2 astw:text-inherit astw:outline-none astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px]",
-        edges?.bleedLeft && "astw:-ml-6 astw:pl-6",
-        edges?.bleedRight && "astw:-mr-6 astw:pr-6",
-        align === "right" ? "astw:justify-end astw:text-right" : "astw:text-left",
-      )}
-    >
-      {content}
-      {ctx.sortDirection && <SortIndicator direction={ctx.sortDirection} />}
-    </button>
-  );
-}
-
-const HEADER_CONTEXT_MENU_POPUP_CLASS = cn(
-  "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:min-w-[10rem] astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:p-1 astw:shadow-md",
-  "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
-);
-const HEADER_CONTEXT_MENU_ITEM_CLASS = cn(
-  "astw:relative astw:flex astw:w-full astw:cursor-default astw:select-none astw:items-center astw:gap-2 astw:rounded-sm astw:px-2 astw:py-1.5 astw:text-body-md astw:outline-hidden",
-  "astw:data-highlighted:bg-accent astw:data-highlighted:text-accent-foreground",
-  "astw:data-disabled:pointer-events-none astw:data-disabled:opacity-50",
-);
-const HEADER_CONTEXT_MENU_SUBMENU_TRIGGER_CLASS = cn(
-  HEADER_CONTEXT_MENU_ITEM_CLASS,
-  "astw:justify-between astw:gap-4",
-  "astw:data-popup-open:bg-accent astw:data-popup-open:text-accent-foreground",
-);
-const HEADER_CONTEXT_MENU_SEPARATOR_CLASS = "astw:bg-border astw:-mx-1 astw:my-1 astw:h-px";
-
-function copyTextToClipboard(text: string) {
-  if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return;
-  void navigator.clipboard.writeText(text).catch(() => {
-    // Silently fail if clipboard access is denied.
-  });
-}
-
-function primitiveCellContentValue(content: ReactNode): unknown {
-  if (
-    typeof content === "string" ||
-    typeof content === "number" ||
-    typeof content === "boolean" ||
-    typeof content === "bigint"
-  ) {
-    return content;
-  }
-  return undefined;
-}
-
-function getCellContextValue<TRow extends Record<string, unknown>>(
-  row: TRow,
-  col: Column<TRow>,
-  content: ReactNode,
-): unknown {
-  const raw = getCellValue(row, col);
-  return raw !== undefined ? raw : primitiveCellContentValue(content);
-}
-
-function toClipboardText(value: unknown): string | undefined {
-  if (value == null || value === "") return undefined;
-  if (value instanceof Date) return value.toISOString();
-  if (Array.isArray(value)) {
-    const items = value
-      .map((item) => toClipboardText(item))
-      .filter((item) => item != null && item !== "");
-    return items.length > 0 ? items.join(", ") : undefined;
-  }
-  if (typeof value === "object") {
-    try {
-      return JSON.stringify(value);
-    } catch {
-      return String(value);
-    }
-  }
-  return String(value);
-}
-
-function toFilterValue(value: unknown, config: DataTableFilterConfig, timeZone: string): unknown {
-  if (value == null || value === "") return undefined;
-  if (isTemporalFilterType(config.type)) {
-    return normalizeTemporalFilterValue(config.type, value, timeZone);
-  }
-
-  switch (config.type) {
-    case "number": {
-      const parsed = typeof value === "number" ? value : Number(value);
-      return Number.isNaN(parsed) ? undefined : parsed;
-    }
-    case "decimal": {
-      const decimal = String(value).trim();
-      return isDecimalFilterValueValid(decimal) ? decimal : undefined;
-    }
-    case "boolean": {
-      if (typeof value === "boolean") return value;
-      if (value === "true" || value === "false") return value === "true";
-      return undefined;
-    }
-    case "enum": {
-      if (Array.isArray(value)) {
-        const values = value.map((item) => String(item)).filter((item) => item !== "");
-        return values.length > 0 ? values : undefined;
-      }
-      return [String(value)];
-    }
-    case "string":
-    case "uuid":
-    default:
-      return String(value);
-  }
-}
-
-function supportsCellFilterOperator(operator: string): boolean {
-  return operator !== "between";
-}
-
-// =============================================================================
-// Column pinning (sticky columns)
-// =============================================================================
-
-// Fallback widths of the built-in selection / row-actions columns, used as the
-// innermost anchors before the real widths are measured.
-const SELECTION_WIDTH = 52;
-const ACTIONS_WIDTH = 50;
-const EXPAND_WIDTH = 44;
-// Keys for the built-in selection / row-actions columns in the measured-width map.
-const SELECTION_KEY = "__datatable_selection__";
-const ACTIONS_KEY = "__datatable_actions__";
-const EXPAND_KEY = "__datatable_expand__";
-
-// Drives both the CSS transition and how long the detail row stays mounted while
-// collapsing, so the two cannot drift apart.
-const EXPAND_TRANSITION_MS = 300;
-
-type PinSide = "left" | "right";
-type ColumnWidths = Record<string, number>;
-
-/**
- * Rendered column widths (px) keyed by column key, published by `DataTable.Table`
- * after it measures the header row. Empty until the first measurement; consumers
- * fall back to each column's declared `width` (or 0) meanwhile.
- */
-const PinMeasureContext = createContext<ColumnWidths>({});
-
-// `useLayoutEffect` warns during SSR; the measurement it drives is client-only,
-// so fall back to `useEffect` on the server.
-const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
-
-interface PinPlacement {
-  side: PinSide;
-  /** Distance from the pinned edge, in px. */
-  offset: number;
-  /** True for the cell at the freeze seam — it draws the divider border. */
-  isBoundary: boolean;
-}
-
-interface PinLayout<TRow extends Record<string, unknown>> {
-  /** Visible columns reordered into `[left-pinned, unpinned, right-pinned]`. */
-  ordered: Column<TRow>[];
-  /** Render key per column (data-col-key + React key), keyed by column reference. */
-  keys: Map<Column<TRow>, string>;
-  /** Sticky placement per pinned column (keyed by column reference). */
-  placements: Map<Column<TRow>, PinPlacement>;
-  /** Placement for the built-in selection column, when pinned. */
-  selection?: PinPlacement;
-  /** Placement for the built-in expand column, when present. */
-  expand?: PinPlacement;
-  /** Placement for the built-in row-actions column, when pinned. */
-  actions?: PinPlacement;
-}
-
-function columnKeyAt<TRow extends Record<string, unknown>>(
-  col: Column<TRow>,
-  index: number,
-): string {
-  return col.id ?? col.label ?? String(index);
-}
-
-/** Rendered width for a column key: the measured value wins once > 0, else the
- *  declared width, else 0. */
-function resolveWidth(key: string, declared: number | undefined, widths: ColumnWidths): number {
-  const measured = widths[key];
-  return measured && measured > 0 ? measured : (declared ?? 0);
-}
-
-/** Shallow equality of two width maps — guards the measure effect against
- *  setting state (and re-rendering) when nothing actually changed. */
-function sameWidths(a: ColumnWidths, b: ColumnWidths): boolean {
-  const aKeys = Object.keys(a);
-  if (aKeys.length !== Object.keys(b).length) return false;
-  return aKeys.every((k) => a[k] === b[k]);
-}
-
-/**
- * Resolve a column's effective pin: the per-user override wins over the static
- * default. `"none"` is an explicit unpin (overrides a pinned default).
- */
-function resolvePin(
-  stored: "left" | "right" | "none" | undefined,
-  defaultPin: PinSide | undefined,
-): PinSide | undefined {
-  if (stored === "none") return undefined;
-  return stored ?? defaultPin;
-}
-
-/**
- * Definition-order `col → key` map — the single source of truth for a column's
- * identity, matching how `useDataTable` / `ColumnSettings` store order,
- * visibility, and pin state. Built from the **full** column list so a key never
- * depends on the column's position in the filtered/reordered *visible* array: a
- * column with neither `id` nor `label` falls back to `String(index)`, and keying
- * it off its visible index would silently detach its stored pin/visibility once
- * a sibling is hidden or moved. Keyed by reference — `visibleColumns` reuses
- * these same column objects.
- */
-function buildColumnKeys<TRow extends Record<string, unknown>>(
-  columns: Column<TRow>[],
-): Map<Column<TRow>, string> {
-  const keys = new Map<Column<TRow>, string>();
-  columns.forEach((col, index) => keys.set(col, columnKeyAt(col, index)));
-  return keys;
-}
-
-/**
- * Group the visible columns by pin side and compute cumulative sticky offsets.
- * The selection and expand columns (when present) auto-pin to the left edge and
- * row-actions (if present) auto-pins to the right edge, with user-pinned columns
- * stacking outward from them.
- *
- * `columnKeys` is the definition-order key map (see {@link buildColumnKeys});
- * `columns` here is the visible/reordered subset, so keys are resolved by
- * reference from that map rather than from each column's position in it.
- */
-function computePinLayout<TRow extends Record<string, unknown>>(
-  columns: Column<TRow>[],
-  pinnedColumns: Record<string, "left" | "right" | "none">,
-  opts: {
-    hasSelection: boolean;
-    hasExpand: boolean;
-    hasRowActions: boolean;
-    widths: ColumnWidths;
-    columnKeys: Map<Column<TRow>, string>;
-  },
-): PinLayout<TRow> {
-  const { hasSelection, hasExpand, hasRowActions, widths, columnKeys } = opts;
-
-  const keyOf = (col: Column<TRow>): string => columnKeys.get(col) as string;
-
-  const keys = new Map<Column<TRow>, string>();
-  columns.forEach((col) => keys.set(col, keyOf(col)));
-
-  const left: Column<TRow>[] = [];
-  const middle: Column<TRow>[] = [];
-  const right: Column<TRow>[] = [];
-
-  columns.forEach((col) => {
-    const pin = resolvePin(pinnedColumns[keyOf(col)], col.pin);
-    if (pin === "left") left.push(col);
-    else if (pin === "right") right.push(col);
-    else middle.push(col);
-  });
-
-  const placements = new Map<Column<TRow>, PinPlacement>();
-
-  // Left group, visually [selection?, expand?, ...left]; offsets accumulate
-  // rightward using the measured (or declared) width of each preceding pinned
-  // column. `isBoundary` marks the outermost cell of the group — the one that
-  // draws the freeze seam — so it moves to `expand` as soon as that column exists.
-  let leftOffset = 0;
-  let selection: PinPlacement | undefined;
-  let expand: PinPlacement | undefined;
-  if (hasSelection) {
-    selection = { side: "left", offset: 0, isBoundary: !hasExpand && left.length === 0 };
-    leftOffset = resolveWidth(SELECTION_KEY, SELECTION_WIDTH, widths);
-  }
-  if (hasExpand) {
-    expand = { side: "left", offset: leftOffset, isBoundary: left.length === 0 };
-    leftOffset += resolveWidth(EXPAND_KEY, EXPAND_WIDTH, widths);
-  }
-  left.forEach((col, i) => {
-    placements.set(col, { side: "left", offset: leftOffset, isBoundary: i === left.length - 1 });
-    leftOffset += resolveWidth(keys.get(col) as string, col.width, widths);
-  });
-
-  // Right group, visually [...right, actions?]; offsets accumulate leftward.
-  let rightOffset = 0;
-  let actions: PinPlacement | undefined;
-  if (hasRowActions) {
-    actions = { side: "right", offset: 0, isBoundary: right.length === 0 };
-    rightOffset = resolveWidth(ACTIONS_KEY, ACTIONS_WIDTH, widths);
-  }
-  for (let i = right.length - 1; i >= 0; i--) {
-    const col = right[i];
-    placements.set(col, { side: "right", offset: rightOffset, isBoundary: i === 0 });
-    rightOffset += resolveWidth(keys.get(col) as string, col.width, widths);
-  }
-
-  return { ordered: [...left, ...middle, ...right], keys, placements, selection, expand, actions };
-}
-
-/**
- * Merge sticky positioning + background + boundary-divider styles onto a cell's
- * existing style/className. Pinned body cells stay opaque across hover/selected
- * states so scrolled content never bleeds through them.
- */
-function pinCellProps(
-  placement: PinPlacement | undefined,
-  base: { style?: CSSProperties; className?: string },
-  variant: "header" | "body" | "footer",
-): { style?: CSSProperties; className?: string } {
-  if (!placement) return base;
-  const style: CSSProperties = {
-    ...base.style,
-    position: "sticky",
-    [placement.side]: placement.offset,
-  };
-  const className = cn(
-    base.className,
-    // Below the sticky header/footer (z-10) but above non-pinned scrolling cells.
-    "astw:z-[1]",
-    variant !== "body"
-      ? // Opaque pinned cells cover the section's inset-shadow divider; redraw
-        // it on the cell because collapsed borders disappear on sticky sections.
-        cn(
-          "astw:bg-card astw:before:pointer-events-none astw:before:absolute astw:before:inset-x-0 astw:before:h-px astw:before:bg-border astw:before:content-['']",
-          variant === "header" ? "astw:before:bottom-0" : "astw:before:top-0",
-        )
-      : cn(
-          "astw:bg-card astw:transition-colors",
-          // Match the row's hover/selected fade timing; without the cell-level
-          // transition, sticky pinned cells snap while the rest of the row fades.
-          "astw:group-hover:[background-color:color-mix(in_srgb,var(--muted)_50%,var(--card))]",
-          "astw:group-aria-selected:bg-muted",
-        ),
-    // Freeze-seam shadow via a pseudo-element gradient. A real `box-shadow` is
-    // dropped by browsers on cells under `border-collapse: collapse` (the table's
-    // model), so we paint a gradient just outside the boundary edge instead — it
-    // sits above the scrolling cells and reads as depth. Hidden at rest; revealed
-    // only while content is scrolled under that edge (data attributes set on the
-    // scroll container by DataTable.Table).
-    placement.isBoundary &&
-      placement.side === "left" &&
-      "astw:after:pointer-events-none astw:after:absolute astw:after:inset-y-0 astw:after:right-0 astw:after:w-1 astw:after:translate-x-full astw:after:bg-gradient-to-r astw:after:from-black/10 astw:dark:after:from-black/20 astw:after:to-transparent astw:after:content-[''] astw:after:opacity-0 astw:after:transition-opacity astw:[[data-pin-shadow-left]_&]:after:opacity-100",
-    placement.isBoundary &&
-      placement.side === "right" &&
-      "astw:after:pointer-events-none astw:after:absolute astw:after:inset-y-0 astw:after:left-0 astw:after:w-1 astw:after:-translate-x-full astw:after:bg-gradient-to-l astw:after:from-black/10 astw:dark:after:from-black/20 astw:after:to-transparent astw:after:content-[''] astw:after:opacity-0 astw:after:transition-opacity astw:[[data-pin-shadow-right]_&]:after:opacity-100",
-  );
-  return { style, className };
-}
-
-// =============================================================================
-// DataTableLoaderRows (internal)
-// =============================================================================
-
-interface DataTableLoaderRowsProps<TRow extends Record<string, unknown>> {
-  rowCount: number;
-  pinLayout: PinLayout<TRow>;
-  hasSelection: boolean;
-  hasExpand: boolean;
-  hasRowActions: boolean;
-}
-
-// Skeleton cell widths (%) — varied per row+col to look natural
-const SKELETON_WIDTHS = [75, 55, 85, 65, 70];
-
-/** @internal */
-function DataTableLoaderRows<TRow extends Record<string, unknown>>({
-  rowCount,
-  pinLayout,
-  hasSelection,
-  hasExpand,
-  hasRowActions,
-}: DataTableLoaderRowsProps<TRow>) {
-  const { ordered: columns, keys, placements, selection, expand, actions } = pinLayout;
-  // No fixed row height: each cell's placeholder matches the height of the
-  // real content it stands in for (text line, badge, icon button), so the
-  // skeleton rows resolve to exactly the same row height as loaded rows and
-  // the table doesn't shift when data arrives.
-  return (
-    <>
-      {Array.from({ length: rowCount }).map((_, rowIndex) => (
-        <Table.Row key={rowIndex} data-datatable-state="loading" className="astw:group">
-          {hasSelection &&
-            (() => {
-              const { style, className } = pinCellProps(
-                selection,
-                { style: { width: SELECTION_WIDTH }, className: "astw:pl-3!" },
-                "body",
-              );
-              return (
-                <Table.Cell style={style} className={className}>
-                  <div className="astw:size-4 astw:rounded-xs astw:bg-muted astw:animate-pulse" />
-                </Table.Cell>
-              );
-            })()}
-          {hasExpand &&
-            (() => {
-              const { style, className } = pinCellProps(
-                expand,
-                { style: { width: EXPAND_WIDTH } },
-                "body",
-              );
-              return (
-                <Table.Cell style={style} className={className}>
-                  {/* size-9 box = the real chevron Button's footprint, so the
-                      skeleton row resolves to the same height as a loaded row */}
-                  <div className="astw:mx-auto astw:flex astw:size-9 astw:items-center astw:justify-center">
-                    <div className="astw:size-4 astw:rounded astw:bg-muted astw:animate-pulse" />
-                  </div>
-                </Table.Cell>
-              );
-            })()}
-          {columns?.map((col, colIndex) => {
-            const key = keys.get(col) as string;
-            const skeletonWidth = SKELETON_WIDTHS[(rowIndex + colIndex) % SKELETON_WIDTHS.length];
-            const isBadge = col.type === "badge";
-            const { style, className } = pinCellProps(
-              placements.get(col),
-              { style: col.width ? { width: col.width } : undefined },
-              "body",
-            );
-            return (
-              <Table.Cell key={key} style={style} className={className}>
-                <div
-                  className={cn(
-                    "astw:bg-muted astw:animate-pulse",
-                    // badge cells render 22px pills; text cells occupy one
-                    // 20px line box (bar inset by my-0.5 to keep the lighter
-                    // 16px placeholder look)
-                    isBadge ? "astw:h-5.5 astw:rounded-full" : "astw:h-4 astw:my-0.5 astw:rounded",
-                    resolveAlign(col) === "right" && "astw:ml-auto",
-                  )}
-                  style={{ width: `${skeletonWidth}%` }}
-                />
-              </Table.Cell>
-            );
-          })}
-          {hasRowActions &&
-            (() => {
-              const { style, className } = pinCellProps(
-                actions,
-                { style: { width: ACTIONS_WIDTH }, className: "astw:pr-2!" },
-                "body",
-              );
-              return (
-                <Table.Cell style={style} className={className}>
-                  {/* size-9 box = the real icon Button's footprint; the visible
-                      pulse stays 24px to read as an ellipsis placeholder */}
-                  <div className="astw:mx-auto astw:flex astw:size-9 astw:items-center astw:justify-center">
-                    <div className="astw:size-6 astw:rounded astw:bg-muted astw:animate-pulse" />
-                  </div>
-                </Table.Cell>
-              );
-            })()}
-        </Table.Row>
-      ))}
-    </>
-  );
-}
-
-// =============================================================================
-// DataTableStatusRow (internal)
-// =============================================================================
-
-interface DataTableStatusRowProps {
-  totalColSpan: number;
-  state: string;
-  children: ReactNode;
-}
-
-/** @internal */
-function DataTableStatusRow({ totalColSpan, state, children }: DataTableStatusRowProps) {
-  return (
-    <Table.Row data-datatable-state={state} className="astw:border-0 astw:hover:bg-transparent">
-      {/* Reserve a fixed 3-row height (acts as a minimum — the cell grows if a
-          bounded container makes the row taller), independent of pageSize so
-          large page sizes don't create a huge blank/scrollable region.
-          `align-middle` centres the message vertically within that height. */}
-      <Table.Cell
-        colSpan={totalColSpan}
-        style={{ height: `${STATUS_ROWS * ROW_HEIGHT_PX}px` }}
-        className="astw:text-center astw:align-middle"
-      >
-        {children}
-      </Table.Cell>
-    </Table.Row>
-  );
-}
-
-// =============================================================================
-// DataTable.Root
-// =============================================================================
-
-export interface DataTableRootProps<TRow extends Record<string, unknown>> {
-  value: UseDataTableReturn<TRow>;
-  children: ReactNode;
-  className?: string;
-}
-
-/** Use `DataTable.Root` instead of calling this directly. */
-function DataTableRoot<TRow extends Record<string, unknown>>({
-  value,
-  children,
-  className,
-}: DataTableRootProps<TRow>) {
-  const dataTableValue: DataTableContextValue<TRow> = {
-    columns: value.columns,
-    rows: value.rows,
-    loading: value.loading,
-    error: value.error,
-    sortStates: value.sortStates ?? [],
-    onSort: value.onSort,
-    visibleColumns: value.visibleColumns,
-    isColumnVisible: value.isColumnVisible,
-    toggleColumn: value.toggleColumn,
-    showAllColumns: value.showAllColumns,
-    hideAllColumns: value.hideAllColumns,
-    columnOrder: value.columnOrder,
-    moveColumn: value.moveColumn,
-    setColumnOrder: value.setColumnOrder,
-    pinnedColumns: value.pinnedColumns,
-    setPin: value.setPin,
-    pageInfo: value.pageInfo,
-    total: value.total,
-    totalPages: value.totalPages,
-    currentPage: value.currentPage,
-    pageSize: value.pageSize,
-    setPageSize: value.setPageSize,
-    goToNextPage: value.goToNextPage,
-    goToPrevPage: value.goToPrevPage,
-    goToFirstPage: value.goToFirstPage,
-    goToLastPage: value.goToLastPage,
-    hasPrevPage: value.hasPrevPage,
-    hasNextPage: value.hasNextPage,
-    onClickRow: value.onClickRow,
-    rowActions: value.rowActions,
-    rowSelection: value.rowSelection,
-    selectedIds: value.selectedIds,
-    isRowSelected: value.isRowSelected,
-    toggleRowSelection: value.toggleRowSelection,
-    selectAllRows: value.selectAllRows,
-    deselectAllRows: value.deselectAllRows,
-    clearSelection: value.clearSelection,
-    pendingActionId: value.pendingActionId,
-    runSelectionAction: value.runSelectionAction,
-    isAllSelected: value.isAllSelected,
-    isIndeterminate: value.isIndeterminate,
-    expandedIds: value.expandedIds,
-    isRowExpanded: value.isRowExpanded,
-    toggleRowExpansion: value.toggleRowExpansion,
-    collapseAllRows: value.collapseAllRows,
-    rowExpansion: value.rowExpansion,
-  };
-
-  const controlValue = value.control ?? null;
-
-  // Tooltip.Provider shares hover-delay state for the per-cell truncate
-  // tooltips; benign no-op when no column opts into `truncate`.
-  const inner = (
-    <Tooltip.Provider delay={300}>
-      <DataTableContext.Provider value={dataTableValue}>
-        {/* flex-col + min-h-0 (no flex-1): natural height when content fits,
-            but able to shrink when the parent chain constrains height (e.g.
-            <Layout fill>). When shrunk, the Table region scrolls internally
-            while the Toolbar and Footer (shrink-0) stay visible.
-            overflow-clip, not overflow-hidden: both clip children to the
-            rounded frame, but `hidden` also makes this a scroll container,
-            which would pin the sticky selection-actions footer to the table
-            instead of letting it ride the page's scroll container. */}
-        <div
-          data-slot="data-table"
-          className={cn(
-            "astw:flex astw:flex-col astw:min-h-0 astw:overflow-clip astw:border astw:border-border astw:rounded-md astw:bg-card",
-            // A generic Toolbar becomes the table's top edge: preserve its top
-            // corners, but retain only the divider beneath it.
-            "astw:[&>[data-slot=toolbar]]:rounded-b-none astw:[&>[data-slot=toolbar]]:border-x-0 astw:[&>[data-slot=toolbar]]:border-t-0",
-            className,
-          )}
-        >
-          {children}
-        </div>
-      </DataTableContext.Provider>
-    </Tooltip.Provider>
-  );
-
-  if (controlValue) {
-    return <CollectionControlProvider value={controlValue}>{inner}</CollectionControlProvider>;
-  }
-
-  return inner;
-}
-DataTableRoot.displayName = "DataTable.Root";
-
-function DataTableHeaderContextMenu<TRow extends Record<string, unknown>>({
-  align,
-  children,
-  column,
-  columnKey,
-  pinnedColumns,
-  setPin,
-  sortDirection,
-  onSortDirectionChange,
-}: {
-  align: "left" | "right";
-  children: ReactNode;
-  column: Column<TRow>;
-  columnKey: string;
-  pinnedColumns: Record<string, "left" | "right" | "none">;
-  setPin: (key: string, side: "left" | "right" | "none" | null) => void;
-  sortDirection?: "Asc" | "Desc";
-  onSortDirectionChange?: (direction: "Asc" | "Desc" | undefined) => void;
-}) {
-  const t = useDataTableT();
-  const label = column.label ?? columnKey;
-  const pin = resolvePin(pinnedColumns[columnKey], column.pin);
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger
-        data-slot="data-table-header-context-menu-trigger"
-        className={cn(
-          "astw:flex astw:h-full astw:w-full astw:items-center",
-          align === "right" ? "astw:justify-end astw:text-right" : "astw:text-left",
-        )}
-      >
-        {children}
-      </ContextMenu.Trigger>
-      <ContextMenu.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
-        <ContextMenu.Positioner className="astw:outline-hidden">
-          <ContextMenu.Popup
-            data-slot="data-table-header-context-menu"
-            className={HEADER_CONTEXT_MENU_POPUP_CLASS}
-          >
-            <ContextMenu.Item
-              className={HEADER_CONTEXT_MENU_ITEM_CLASS}
-              onClick={() => copyTextToClipboard(label)}
-            >
-              {t("copyColumnLabel")}
-            </ContextMenu.Item>
-            <ContextMenu.Separator className={HEADER_CONTEXT_MENU_SEPARATOR_CLASS} />
-            <ContextMenu.SubmenuRoot>
-              <ContextMenu.SubmenuTrigger
-                className={HEADER_CONTEXT_MENU_SUBMENU_TRIGGER_CLASS}
-                delay={0}
-              >
-                {t("pinColumn")}
-                <ChevronRight className="astw:size-4" />
-              </ContextMenu.SubmenuTrigger>
-              <ContextMenu.Portal>
-                <ContextMenu.Positioner
-                  className="astw:outline-hidden"
-                  sideOffset={-4}
-                  alignOffset={-4}
-                >
-                  <ContextMenu.Popup className={HEADER_CONTEXT_MENU_POPUP_CLASS}>
-                    <ContextMenu.Item
-                      className={HEADER_CONTEXT_MENU_ITEM_CLASS}
-                      disabled={pin === "left"}
-                      onClick={() => setPin(columnKey, "left")}
-                    >
-                      {t("pinColumnLeft")}
-                    </ContextMenu.Item>
-                    <ContextMenu.Item
-                      className={HEADER_CONTEXT_MENU_ITEM_CLASS}
-                      disabled={pin === "right"}
-                      onClick={() => setPin(columnKey, "right")}
-                    >
-                      {t("pinColumnRight")}
-                    </ContextMenu.Item>
-                    <ContextMenu.Item
-                      className={HEADER_CONTEXT_MENU_ITEM_CLASS}
-                      disabled={pin == null}
-                      onClick={() => setPin(columnKey, "none")}
-                    >
-                      {t("unpinColumn")}
-                    </ContextMenu.Item>
-                  </ContextMenu.Popup>
-                </ContextMenu.Positioner>
-              </ContextMenu.Portal>
-            </ContextMenu.SubmenuRoot>
-            {onSortDirectionChange && (
-              <ContextMenu.SubmenuRoot>
-                <ContextMenu.SubmenuTrigger
-                  className={HEADER_CONTEXT_MENU_SUBMENU_TRIGGER_CLASS}
-                  delay={0}
-                >
-                  {t("sortColumn")}
-                  <ChevronRight className="astw:size-4" />
-                </ContextMenu.SubmenuTrigger>
-                <ContextMenu.Portal>
-                  <ContextMenu.Positioner
-                    className="astw:outline-hidden"
-                    sideOffset={-4}
-                    alignOffset={-4}
-                  >
-                    <ContextMenu.Popup className={HEADER_CONTEXT_MENU_POPUP_CLASS}>
-                      <ContextMenu.Item
-                        className={HEADER_CONTEXT_MENU_ITEM_CLASS}
-                        disabled={sortDirection === "Asc"}
-                        onClick={() => onSortDirectionChange("Asc")}
-                      >
-                        {t("sortColumnAsc")}
-                      </ContextMenu.Item>
-                      <ContextMenu.Item
-                        className={HEADER_CONTEXT_MENU_ITEM_CLASS}
-                        disabled={sortDirection === "Desc"}
-                        onClick={() => onSortDirectionChange("Desc")}
-                      >
-                        {t("sortColumnDesc")}
-                      </ContextMenu.Item>
-                      <ContextMenu.Item
-                        className={HEADER_CONTEXT_MENU_ITEM_CLASS}
-                        disabled={sortDirection == null}
-                        onClick={() => onSortDirectionChange(undefined)}
-                      >
-                        {t("sortColumnReset")}
-                      </ContextMenu.Item>
-                    </ContextMenu.Popup>
-                  </ContextMenu.Positioner>
-                </ContextMenu.Portal>
-              </ContextMenu.SubmenuRoot>
-            )}
-          </ContextMenu.Popup>
-        </ContextMenu.Positioner>
-      </ContextMenu.Portal>
-    </ContextMenu.Root>
-  );
-}
-DataTableHeaderContextMenu.displayName = "DataTable.HeaderContextMenu";
-
-function DataTableCellContextMenu({
-  context,
-  open,
-  onOpenChange,
-  onCloseComplete,
-}: {
-  context: CellContextMenuState | null;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onCloseComplete: () => void;
-}) {
-  const t = useDataTableT();
-  const control = useCollectionControlOptional();
-  const { value: timeZone } = useTimeZone();
-  const filterConfig = context?.filterConfig;
-  const copyText = context ? toClipboardText(context.value) : undefined;
-  const headerAndValueText = copyText ? `${context?.headerLabel} ${copyText}` : undefined;
-  const filterValue =
-    filterConfig && context ? toFilterValue(context.value, filterConfig, timeZone) : undefined;
-  const filterOperators =
-    control && filterConfig && filterValue !== undefined
-      ? getVisibleFilterOperators(filterConfig).filter(supportsCellFilterOperator)
-      : [];
-  const hasFilterMenu = !!filterConfig && filterValue !== undefined && filterOperators.length > 0;
-
-  return (
-    <ContextMenu.Root
-      open={open}
-      onOpenChange={onOpenChange}
-      onOpenChangeComplete={(nextOpen) => !nextOpen && onCloseComplete()}
-    >
-      <ContextMenu.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
-        <ContextMenu.Positioner className="astw:outline-hidden" anchor={context?.anchor ?? null}>
-          <ContextMenu.Popup className={HEADER_CONTEXT_MENU_POPUP_CLASS}>
-            <ContextMenu.Item
-              className={HEADER_CONTEXT_MENU_ITEM_CLASS}
-              disabled={copyText == null}
-              onClick={() => copyText && copyTextToClipboard(copyText)}
-            >
-              {t("copyCellValue")}
-            </ContextMenu.Item>
-            <ContextMenu.Item
-              className={HEADER_CONTEXT_MENU_ITEM_CLASS}
-              disabled={headerAndValueText == null}
-              onClick={() => headerAndValueText && copyTextToClipboard(headerAndValueText)}
-            >
-              {t("copyCellHeaderValue")}
-            </ContextMenu.Item>
-            {hasFilterMenu && control && filterConfig && (
-              <>
-                <ContextMenu.Separator className={HEADER_CONTEXT_MENU_SEPARATOR_CLASS} />
-                <ContextMenu.SubmenuRoot>
-                  <ContextMenu.SubmenuTrigger
-                    className={HEADER_CONTEXT_MENU_SUBMENU_TRIGGER_CLASS}
-                    delay={0}
-                  >
-                    {t("addFilter")}
-                    <ChevronRight className="astw:size-4" />
-                  </ContextMenu.SubmenuTrigger>
-                  <ContextMenu.Portal>
-                    <ContextMenu.Positioner
-                      className="astw:outline-hidden"
-                      sideOffset={-4}
-                      alignOffset={-4}
-                    >
-                      <ContextMenu.Popup className={HEADER_CONTEXT_MENU_POPUP_CLASS}>
-                        {filterOperators.map((operator) => (
-                          <ContextMenu.Item
-                            key={operator}
-                            className={HEADER_CONTEXT_MENU_ITEM_CLASS}
-                            onClick={() =>
-                              control.addFilter(filterConfig.field, operator, filterValue)
-                            }
-                          >
-                            {getOperatorLabel(operator, t, filterConfig.type)}
-                          </ContextMenu.Item>
-                        ))}
-                      </ContextMenu.Popup>
-                    </ContextMenu.Positioner>
-                  </ContextMenu.Portal>
-                </ContextMenu.SubmenuRoot>
-              </>
-            )}
-          </ContextMenu.Popup>
-        </ContextMenu.Positioner>
-      </ContextMenu.Portal>
-    </ContextMenu.Root>
-  );
-}
-DataTableCellContextMenu.displayName = "DataTable.CellContextMenu";
-
-// =============================================================================
-// DataTable.Headers
-// =============================================================================
-
-/** @internal */
-function DataTableHeaders({ className: headerClassName }: { className?: string }) {
-  const ctx = useContext(DataTableContext);
-  if (!ctx) {
-    throw new Error("<DataTable.Headers> must be used within <DataTable.Root>");
-  }
-  const {
-    columns: allColumns,
-    visibleColumns: columns,
-    pinnedColumns,
-    sortStates,
-    onSort,
-    rowActions,
-    setPin,
-    toggleRowSelection,
-    selectAllRows,
-    deselectAllRows,
-    clearSelection,
-    isAllSelected,
-    isIndeterminate,
-    rowExpansion,
-  } = ctx;
-  const t = useDataTableT();
-  const widths = useContext(PinMeasureContext);
-  const hasSelection = !!toggleRowSelection;
-  const hasExpand = !!rowExpansion;
-  const hasRowActions = !!(rowActions && rowActions.length > 0);
-  const columnKeys = useMemo(() => buildColumnKeys(allColumns), [allColumns]);
-  const { ordered, keys, placements, selection, expand, actions } = useMemo(
-    () =>
-      computePinLayout(columns, pinnedColumns, {
-        hasSelection,
-        hasExpand,
-        hasRowActions,
-        widths,
-        columnKeys,
-      }),
-    [columns, pinnedColumns, hasSelection, hasExpand, hasRowActions, widths, columnKeys],
-  );
 
-  return (
-    // Sticky within the DataTable.Table scroll container so column headers
-    // stay visible while rows scroll beneath. bg-card keeps rows from showing
-    // through; the inset shadow re-draws the bottom border, which Chrome drops
-    // from sticky rows under `border-collapse: collapse`.
-    <Table.Header
-      data-slot="data-table-header"
-      className={cn(
-        "astw:sticky astw:top-0 astw:z-10 astw:bg-card",
-        "astw:shadow-[inset_0_-1px_0_0_var(--border)] astw:[&_tr]:border-b-0",
-        headerClassName,
-      )}
-    >
-      <Table.Row className="astw:group">
-        {hasSelection &&
-          (() => {
-            const { style, className } = pinCellProps(
-              selection,
-              { style: { width: SELECTION_WIDTH }, className: "astw:pl-3!" },
-              "header",
-            );
-            return (
-              <Table.Head data-col-key={SELECTION_KEY} style={style} className={className}>
-                <Checkbox
-                  checked={isAllSelected}
-                  indeterminate={isIndeterminate}
-                  onCheckedChange={(checked) => {
-                    if (checked) {
-                      selectAllRows?.();
-                    } else {
-                      // Page-scoped, so rows selected on other pages survive.
-                      // Hand-built contexts that predate it fall back to clearing.
-                      (deselectAllRows ?? clearSelection)?.();
-                    }
-                  }}
-                  aria-label={t("selectAll")}
-                />
-              </Table.Head>
-            );
-          })()}
-        {hasExpand &&
-          (() => {
-            const { style, className } = pinCellProps(
-              expand,
-              { style: { width: EXPAND_WIDTH } },
-              "header",
-            );
-            return (
-              <Table.Head data-col-key={EXPAND_KEY} style={style} className={className}>
-                <span className="astw:sr-only">{t("expandColumnHeader")}</span>
-              </Table.Head>
-            );
-          })()}
-        {ordered?.map((col, index) => {
-          const key = keys.get(col) as string;
-          const label = col.label;
-          const sortField = col.sort?.field;
-          const currentSort = sortField
-            ? sortStates?.find((s) => s.field === sortField)
-            : undefined;
-          const isSortable = !!sortField && !!onSort;
-
-          const activateSort = () => {
-            if (!sortField || !onSort) return;
-            onSort(sortField, nextSortDirection(currentSort?.direction));
-          };
-
-          const headerContext: HeaderRenderContext = isSortable
-            ? {
-                label,
-                sortable: true,
-                sortDirection: currentSort?.direction,
-                activateSort,
-              }
-            : { label, sortable: false };
-
-          const customHeaderProps = col.headerProps?.(headerContext);
-          const align = resolveAlign(col);
-          const content = col.header
-            ? col.header(headerContext)
-            : renderDefaultHeader(label, headerContext, align, {
-                bleedLeft: !hasSelection && !hasExpand && index === 0,
-                bleedRight: !hasRowActions && index === ordered.length - 1,
-              });
-
-          const { style, className } = pinCellProps(
-            placements.get(col),
-            {
-              style: {
-                ...customHeaderProps?.style,
-                ...(col.width ? { width: col.width } : {}),
-              },
-              className: cn(align === "right" && "astw:text-right"),
-            },
-            "header",
-          );
-          return (
-            <Table.Head
-              key={key}
-              data-col-key={key}
-              title={customHeaderProps?.title}
-              style={style}
-              className={cn(className, customHeaderProps?.className)}
-            >
-              <DataTableHeaderContextMenu
-                align={align}
-                column={col}
-                columnKey={key}
-                pinnedColumns={pinnedColumns}
-                setPin={setPin}
-                sortDirection={currentSort?.direction}
-                onSortDirectionChange={
-                  isSortable ? (direction) => onSort(sortField, direction) : undefined
-                }
-              >
-                {content}
-              </DataTableHeaderContextMenu>
-            </Table.Head>
-          );
-        })}
-        {hasRowActions &&
-          (() => {
-            const { style, className } = pinCellProps(
-              actions,
-              { style: { width: ACTIONS_WIDTH }, className: "astw:pr-2!" },
-              "header",
-            );
-            return (
-              <Table.Head data-col-key={ACTIONS_KEY} style={style} className={className}>
-                <span className="astw:sr-only">{t("actionsHeader")}</span>
-              </Table.Head>
-            );
-          })()}
-      </Table.Row>
-    </Table.Header>
-  );
-}
-DataTableHeaders.displayName = "DataTable.Headers";
-
-/** @internal */
-function SortIndicator({ direction }: { direction: "Asc" | "Desc" }) {
-  return (
-    <span
-      data-slot="data-table-sort-indicator"
-      className="astw:text-muted-foreground astw:text-label-sm"
-      aria-hidden
-    >
-      {direction === "Asc" ? "▲" : "▼"}
-    </span>
-  );
-}
-
-// =============================================================================
-// DataTable.Body
-// =============================================================================
-
-/** @internal */
-function DataTableBody({ className }: { className?: string }) {
-  const ctx = useContext(DataTableContext);
-  if (!ctx) {
-    throw new Error("<DataTable.Body> must be used within <DataTable.Root>");
-  }
-  const {
-    columns: allColumns,
-    visibleColumns: columns,
-    pinnedColumns,
-    rows,
-    loading,
-    error,
-    onClickRow,
-    rowActions,
-    isRowSelected,
-    toggleRowSelection,
-    pageSize,
-    rowExpansion,
-    isRowExpanded,
-    toggleRowExpansion,
-  } = ctx;
-  const t = useDataTableT();
-  const widths = useContext(PinMeasureContext);
-  const hasRowActions = !!(rowActions && rowActions.length > 0);
-  const hasSelection = !!toggleRowSelection;
-  const hasExpand = !!rowExpansion;
-  const totalColSpan =
-    (columns?.length ?? 1) + (hasRowActions ? 1 : 0) + (hasSelection ? 1 : 0) + (hasExpand ? 1 : 0);
-  const rowCount = pageSize > 0 ? pageSize : DEFAULT_ROWS;
-  const columnKeys = useMemo(() => buildColumnKeys(allColumns), [allColumns]);
-  const pinLayout = useMemo(
-    () =>
-      computePinLayout(columns, pinnedColumns, {
-        hasSelection,
-        hasExpand,
-        hasRowActions,
-        widths,
-        columnKeys,
-      }),
-    [columns, pinnedColumns, hasSelection, hasExpand, hasRowActions, widths, columnKeys],
-  );
-  const tableBodyProps = {
-    "data-slot": "data-table-body",
-    className,
-  };
-  if (loading) {
-    return (
-      <Table.Body {...tableBodyProps}>
-        <DataTableLoaderRows
-          rowCount={rowCount}
-          pinLayout={pinLayout}
-          hasSelection={hasSelection}
-          hasExpand={hasExpand}
-          hasRowActions={hasRowActions}
-        />
-      </Table.Body>
-    );
-  }
-
-  if (error) {
-    return (
-      <Table.Body {...tableBodyProps}>
-        <DataTableStatusRow totalColSpan={totalColSpan} state="error">
-          <span className="astw:text-danger-text">
-            {t("errorPrefix")} {error.message}
-          </span>
-        </DataTableStatusRow>
-      </Table.Body>
-    );
-  }
-
-  if (!rows || rows.length === 0) {
-    return (
-      <Table.Body {...tableBodyProps}>
-        <DataTableStatusRow totalColSpan={totalColSpan} state="empty">
-          <span className="astw:text-muted-foreground">{t("noData")}</span>
-        </DataTableStatusRow>
-      </Table.Body>
-    );
-  }
-
-  return (
-    <Table.Body {...tableBodyProps}>
-      <DataTableRows
-        rows={rows}
-        pinLayout={pinLayout}
-        hasSelection={hasSelection}
-        hasRowActions={hasRowActions}
-        isRowSelected={isRowSelected}
-        toggleRowSelection={toggleRowSelection}
-        rowActions={rowActions}
-        onClickRow={onClickRow}
-        totalColSpan={totalColSpan}
-        rowExpansion={rowExpansion}
-        isRowExpanded={isRowExpanded}
-        toggleRowExpansion={toggleRowExpansion}
-      />
-    </Table.Body>
-  );
-}
-DataTableBody.displayName = "DataTable.Body";
-
-// =============================================================================
-// Column footer (internal — separate from DataTable.Footer)
-// =============================================================================
-
-function DataTableColumnFooter() {
-  const ctx = useContext(DataTableContext);
-  if (!ctx) {
-    throw new Error("<DataTableColumnFooter> must be used within <DataTable.Root>");
-  }
-  const {
-    columns: allColumns,
-    visibleColumns: columns,
-    pinnedColumns,
-    rows,
-    loading,
-    error,
-    toggleRowSelection,
-    rowExpansion,
-    rowActions,
-  } = ctx;
-  const widths = useContext(PinMeasureContext);
-  const hasSelection = !!toggleRowSelection;
-  const hasExpand = !!rowExpansion;
-  const hasRowActions = !!rowActions?.length;
-  const columnKeys = useMemo(() => buildColumnKeys(allColumns), [allColumns]);
-  const { ordered, keys, placements, selection, expand, actions } = useMemo(
-    () =>
-      computePinLayout(columns, pinnedColumns, {
-        hasSelection,
-        hasExpand,
-        hasRowActions,
-        widths,
-        columnKeys,
-      }),
-    [columns, pinnedColumns, hasSelection, hasExpand, hasRowActions, widths, columnKeys],
-  );
-
-  if (error || !ordered.some((col) => col.footer !== undefined)) return null;
-
-  return (
-    <Table.Footer
-      data-slot="data-table-column-footer"
-      className={cn(
-        "astw:sticky astw:bottom-0 astw:z-10 astw:bg-card",
-        "astw:border-t-0 astw:shadow-[inset_0_1px_0_0_var(--border)]",
-      )}
-    >
-      <Table.Row className="astw:hover:bg-transparent">
-        {hasSelection && (
-          <Table.Cell
-            data-slot="data-table-column-footer-cell"
-            data-col-key={SELECTION_KEY}
-            {...pinCellProps(
-              selection,
-              { style: { width: SELECTION_WIDTH }, className: "astw:pl-3!" },
-              "footer",
-            )}
-          />
-        )}
-        {hasExpand && (
-          <Table.Cell
-            data-slot="data-table-column-footer-cell"
-            data-col-key={EXPAND_KEY}
-            {...pinCellProps(expand, { style: { width: EXPAND_WIDTH } }, "footer")}
-          />
-        )}
-        {ordered.map((col) => {
-          const key = keys.get(col) as string;
-          const footerContext = { rows };
-          const customFooterProps = loading ? undefined : col.footerProps?.(footerContext);
-          let footerContent: ReactNode = null;
-          if (!loading) {
-            footerContent =
-              typeof col.footer === "function" ? col.footer(footerContext) : col.footer;
-          }
-          const { style, className } = pinCellProps(
-            placements.get(col),
-            {
-              style: {
-                ...customFooterProps?.style,
-                ...(col.width ? { width: col.width } : {}),
-              },
-              className: cn(resolveAlign(col) === "right" && "astw:text-right"),
-            },
-            "footer",
-          );
-          return (
-            <Table.Cell
-              key={key}
-              data-slot="data-table-column-footer-cell"
-              data-col-key={key}
-              title={customFooterProps?.title}
-              style={style}
-              className={cn(className, customFooterProps?.className)}
-            >
-              {col.footer !== undefined &&
-                (loading ? (
-                  <div
-                    aria-hidden="true"
-                    className={cn(
-                      "astw:h-4 astw:my-0.5 astw:w-3/5 astw:rounded astw:bg-muted astw:animate-pulse",
-                      resolveAlign(col) === "right" && "astw:ml-auto",
-                    )}
-                  />
-                ) : (
-                  footerContent
-                ))}
-            </Table.Cell>
-          );
-        })}
-        {hasRowActions && (
-          <Table.Cell
-            data-slot="data-table-column-footer-cell"
-            data-col-key={ACTIONS_KEY}
-            {...pinCellProps(
-              actions,
-              { style: { width: ACTIONS_WIDTH }, className: "astw:pr-2!" },
-              "footer",
-            )}
-          />
-        )}
-      </Table.Row>
-    </Table.Footer>
-  );
-}
-
-// =============================================================================
-// Row rendering
-// =============================================================================
-
-interface DataTableRowsProps<TRow extends Record<string, unknown>> {
-  rows: TRow[];
-  pinLayout: PinLayout<TRow>;
-  hasSelection: boolean;
-  hasRowActions: boolean;
-  isRowSelected: (row: TRow) => boolean;
-  toggleRowSelection?: (row: TRow) => void;
-  rowActions?: RowAction<TRow>[];
-  onClickRow?: (row: TRow) => void;
-  totalColSpan: number;
-  rowExpansion?: RowExpansionOptions<TRow>;
-  /** Optional — `DataTableContextValue` may be hand-constructed without it. */
-  isRowExpanded?: (row: TRow) => boolean;
-  toggleRowExpansion?: (row: TRow) => void;
-}
-
-/** @internal */
-function DataTableRows<TRow extends Record<string, unknown>>({
-  rows,
-  pinLayout,
-  hasSelection,
-  hasRowActions,
-  isRowSelected,
-  toggleRowSelection,
-  rowActions,
-  onClickRow,
-  totalColSpan,
-  rowExpansion,
-  isRowExpanded,
-  toggleRowExpansion,
-}: DataTableRowsProps<TRow>) {
-  const t = useDataTableT();
-  const baseId = useId();
-  const { value: timeZone } = useTimeZone();
-  const hasExpand = !!rowExpansion;
-  const { ordered, keys, placements, selection, expand, actions } = pinLayout;
-  // Intl formatter construction is costly; avoid repeating it for every cell render.
-  const cellRenderers = useMemo(
-    () =>
-      new Map(
-        ordered
-          .filter((col) => !col.render)
-          .map((col) => [col, createTypedCellRenderer(col, timeZone)]),
-      ),
-    [ordered, timeZone],
-  );
-  const {
-    contextMenu: cellContextMenu,
-    contextMenuOpen: cellContextMenuOpen,
-    handleContextMenuOpenChange: handleCellContextMenuOpenChange,
-    handleContextMenuCloseComplete: handleCellContextMenuCloseComplete,
-    getCellContextMenuHandlers,
-  } = useCellContextMenu();
-  const navigation = useCellEditNavigation();
-  // Namespaced so an id-less row's index fallback can't collide with a real
-  // id of the same digits — React reconciles duplicate keys by position,
-  // pairing a detail panel with the wrong row.
-  const rowKeys = rows.map((row, rowIndex) => {
-    const rowId = (row as Record<string, unknown>)["id"];
-    return rowId != null ? `id:${String(rowId)}` : `idx:${rowIndex}`;
-  });
-  // Tab / Shift+Tab move between editable cells in the order they render.
-  navigation.setOrder(rowKeys, ordered?.map((col) => keys.get(col) as string) ?? []);
-  // In a table people edit, every data cell says what a click does: editors
-  // show a text or pointer cursor, and the rest show "not allowed". Skipped when
-  // rows are clickable, where the row click is what the cursor should promise.
-  const blockReadOnlyCells = !onClickRow && (ordered?.some(isEditableColumn) ?? false);
-  const warnedMissingIdRef = useRef(false);
-
-  return (
-    <>
-      {rows.map((row, rowIndex) => {
-        const rowId = (row as Record<string, unknown>)["id"];
-        const selected = isRowSelected?.(row) ?? false;
-        const rowKey = rowKeys[rowIndex];
-        // Expansion is keyed by id, so a row without one gets no chevron at all
-        // rather than a disabled one — it must never be un-toggleable (D5).
-        const expandable = hasExpand && rowId != null && (rowExpansion?.canExpand?.(row) ?? true);
-        // Gated on `canExpand` in both directions, so a stale id (restored from
-        // a URL, say) can't open a panel for a row the consumer excluded. Such an
-        // id stays in `expandedIds` inert until `collapseAllRows()`.
-        const expanded = expandable && (isRowExpanded?.(row) ?? false);
-        // `aria-controls` is an IDREF *list*, so whitespace in a row id would split
-        // it into dead references (and make the `id` itself invalid).
-        const domKey = rowKey.replace(/\s+/g, "_");
-        const panelId = `${baseId}-panel-${domKey}`;
-        const triggerId = `${baseId}-trigger-${domKey}`;
-        const dataRow = (
-          <Table.Row
-            data-slot="data-table-row"
-            aria-selected={hasSelection ? selected : undefined}
-            // `Table.Row` styles the selected background off `data-[state=selected]`,
-            // so set it here too. Without it, only the pinned cells (which carry
-            // their own `group-aria-selected:bg-muted`) tint on selection, leaving
-            // the scrollable cells un-highlighted. `aria-selected` stays for a11y.
-            data-state={hasSelection && selected ? "selected" : undefined}
-            className={cn("astw:group", onClickRow && "astw:cursor-pointer")}
-            onClick={onClickRow ? () => onClickRow(row) : undefined}
-          >
-            {hasSelection &&
-              toggleRowSelection &&
-              (() => {
-                const { style, className } = pinCellProps(
-                  selection,
-                  { style: { width: SELECTION_WIDTH }, className: "astw:pl-3!" },
-                  "body",
-                );
-                return (
-                  <Table.Cell
-                    style={style}
-                    className={className}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <Checkbox
-                      checked={selected}
-                      onCheckedChange={() => toggleRowSelection(row)}
-                      aria-label={t("selectRow")}
-                    />
-                  </Table.Cell>
-                );
-              })()}
-            {hasExpand &&
-              (() => {
-                const { style, className } = pinCellProps(
-                  expand,
-                  { style: { width: EXPAND_WIDTH } },
-                  "body",
-                );
-                return (
-                  // `stopPropagation` so using the chevron never fires `onClickRow`
-                  // (the selection cell does the same). Non-expandable rows still
-                  // render the cell — empty — so the column count stays consistent.
-                  <Table.Cell
-                    style={style}
-                    className={className}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {expandable && toggleRowExpansion && (
-                      <RowExpandToggle
-                        id={triggerId}
-                        expanded={expanded}
-                        label={rowExpansion?.getLabel?.(row)}
-                        panelId={panelId}
-                        onToggle={() => toggleRowExpansion(row)}
-                      />
-                    )}
-                  </Table.Cell>
-                );
-              })()}
-            {ordered?.map((col) => {
-              const key = keys.get(col) as string;
-              const editableColumn = isEditableColumn(col);
-              if (editableColumn && rowId == null && !warnedMissingIdRef.current) {
-                warnedMissingIdRef.current = true;
-                console.warn(
-                  `[DataTable] Column "${key}" has an \`edit\` config, but a row has no \`id\`. Rows without an \`id\` are shown read-only.`,
-                );
-              }
-              const editable =
-                editableColumn &&
-                rowId != null &&
-                // A badge dropdown picks one value; a cell holding several stays
-                // read-only rather than have its list replaced by a single pick.
-                !(col.type === "badge" && Array.isArray(getCellValue(row, col))) &&
-                (col.edit?.canEdit?.(row, { selected }) ?? true);
-              // An editable cell renders its own display; skip rendering it twice.
-              let content: ReactNode;
-              if (!editable) content = col.render ? col.render(row) : cellRenderers.get(col)?.(row);
-
-              const customCellProps = col.cellProps?.(row);
-              const { style: cellStyle, className: cellClassName } = pinCellProps(
-                placements.get(col),
-                {
-                  style: {
-                    ...customCellProps?.style,
-                    ...(col.width ? { width: col.width } : {}),
-                  },
-                  className: cn(
-                    resolveAlign(col) === "right" && "astw:text-right",
-                    // Keep the width constraint on the cell, but move the
-                    // `overflow: hidden` truncation to an inner span (below) — a
-                    // truncating cell would otherwise clip the freeze-shadow
-                    // `::after`, which is drawn just outside the cell edge.
-                    col.truncate && "astw:max-w-0",
-                  ),
-                },
-                "body",
-              );
-              // Truncate via an inner element so the cell's overflow stays visible.
-              // A read-only cell of a dropdown / date column keeps the icon's
-              // space like its editable neighbours, so the column's width never shifts.
-              const iconSpace = editableColumn && hasEditorIcon(col);
-              const cellBody =
-                col.truncate || iconSpace ? (
-                  <span
-                    className={cn(
-                      "astw:block",
-                      col.truncate && "astw:truncate",
-                      iconSpace && ICON_SPACE_CLASS_NAME,
-                    )}
-                  >
-                    {content}
-                  </span>
-                ) : (
-                  content
-                );
-              const menuValue = getCellContextValue(row, col, content);
-              const headerLabel = col.label ?? key;
-
-              // Surface the full value on hover when the cell is truncated
-              // and the resolved cell value is a stringifiable primitive.
-              // `getCellValue` is the same precedence rule the built-in
-              // renderers use (`accessor` first, then `row[col.id]`), so
-              // typed and inferred columns get tooltip wiring for free.
-              // Objects / arrays / no value are skipped — pass a custom
-              // `render` for those cases.
-              let tooltipLabel: string | undefined;
-              if (col.truncate) {
-                const raw = getCellValue(row, col);
-                if (typeof raw === "string" || typeof raw === "number") {
-                  tooltipLabel = String(raw);
-                }
-              }
-
-              const cellContextMenuHandlers = getCellContextMenuHandlers({
-                headerLabel,
-                value: menuValue,
-                filterConfig: col.filter,
-              });
-              const cellProps = {
-                "data-slot": "data-table-cell" as const,
-                title: customCellProps?.title,
-                style: { ...cellStyle, WebkitTouchCallout: "none" } satisfies CSSProperties,
-                className: cn(
-                  cellClassName,
-                  blockReadOnlyCells && !editable && "astw:cursor-not-allowed",
-                  customCellProps?.className,
-                ),
-                ...cellContextMenuHandlers,
-              };
-              if (editable) {
-                return (
-                  <DataTableEditableCell
-                    key={key}
-                    row={row}
-                    col={col}
-                    rowKey={rowKey}
-                    colKey={key}
-                    label={headerLabel}
-                    align={resolveAlign(col)}
-                    navigation={navigation}
-                    dateRenderer={col.type === "date" ? cellRenderers.get(col) : undefined}
-                    tooltipLabel={tooltipLabel}
-                    cellProps={cellProps}
-                  />
-                );
-              }
-
-              const cellElement = <Table.Cell {...cellProps} />;
-
-              if (tooltipLabel !== undefined) {
-                return (
-                  <Tooltip.Root key={key}>
-                    <Tooltip.Trigger render={cellElement}>{cellBody}</Tooltip.Trigger>
-                    <Tooltip.Content>{tooltipLabel}</Tooltip.Content>
-                  </Tooltip.Root>
-                );
-              }
-
-              return (
-                <Table.Cell key={key} {...cellProps}>
-                  {cellBody}
-                </Table.Cell>
-              );
-            })}
-            {hasRowActions &&
-              rowActions &&
-              (() => {
-                const { style, className } = pinCellProps(
-                  actions,
-                  { style: { width: ACTIONS_WIDTH }, className: "astw:pr-2!" },
-                  "body",
-                );
-                return (
-                  <Table.Cell
-                    style={style}
-                    className={className}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    <RowActionsMenu actions={rowActions} row={row} />
-                  </Table.Cell>
-                );
-              })()}
-          </Table.Row>
-        );
-
-        // `expanded` is always false without `rowExpansion`, so a table
-        // that doesn't use the feature renders exactly the rows it did before.
-        return (
-          <Fragment key={rowKey}>
-            {dataRow}
-            {expandable && rowExpansion && (
-              // Mounted whenever the row could be open, not only while it is —
-              // the component owns the open/closed transition and renders
-              // nothing until there is something to show.
-              <DataTableExpandedRow
-                open={expanded}
-                totalColSpan={totalColSpan}
-                panelId={panelId}
-                triggerId={triggerId}
-                label={rowExpansion.getLabel?.(row)}
-                render={() => rowExpansion.render(row)}
-              />
-            )}
-          </Fragment>
-        );
-      })}
-      <DataTableCellContextMenu
-        context={cellContextMenu}
-        open={cellContextMenuOpen}
-        onOpenChange={handleCellContextMenuOpenChange}
-        onCloseComplete={handleCellContextMenuCloseComplete}
-      />
-    </>
-  );
-}
-
-// =============================================================================
-// RowExpandToggle (internal)
-// =============================================================================
-
-interface RowExpandToggleProps {
-  id: string;
-  expanded: boolean;
-  label: string | undefined;
-  panelId: string;
-  onToggle: () => void;
-}
-
-/**
- * The chevron trigger. A native `<button>` (via app-shell's `Button`), so
- * Enter/Space activation and the focus ring come for free — no custom key
- * handling. `aria-expanded` is what announces the state change on activation.
- *
- * @internal
- */
-function RowExpandToggle({ id, expanded, label, panelId, onToggle }: RowExpandToggleProps) {
-  const t = useDataTableT();
-  // A contextual name ("Expand row INV-1001") — "Expand row" repeated down the
-  // column conveys nothing. The locale owns word order and the unnamed fallback.
-  const name = t(expanded ? "collapseRow" : "expandRow", { label });
-
-  return (
-    <Button
-      id={id}
-      type="button"
-      variant="ghost"
-      size="icon"
-      aria-expanded={expanded}
-      // Only while expanded — it must never point at an id absent from the DOM.
-      aria-controls={expanded ? panelId : undefined}
-      aria-label={name}
-      onClick={onToggle}
-    >
-      <ChevronRight
-        className={cn(
-          "astw:size-4 astw:transition-transform astw:motion-reduce:transition-none",
-          expanded && "astw:rotate-90",
-        )}
-      />
-    </Button>
-  );
-}
-
-// =============================================================================
-// DataTableExpandedRow (internal)
-// =============================================================================
-
-interface DataTableExpandedRowProps {
-  open: boolean;
-  totalColSpan: number;
-  panelId: string;
-  triggerId: string;
-  label: string | undefined;
-  render: () => ReactNode;
-}
-
-/**
- * The detail row: one full-width `<tr>` with a single `colSpan` cell, rendered
- * immediately after its parent row so forward-tabbing reaches the panel next.
- *
- * Mounted for every expandable row (returning `null` while closed) so the
- * collapse has something to animate. `render` is a thunk, not `children`, so
- * `rowExpansion.render` only runs while the panel is on screen.
- *
- * @internal
- */
-function DataTableExpandedRow({
-  open,
-  totalColSpan,
-  panelId,
-  triggerId,
-  label,
-  render,
-}: DataTableExpandedRowProps) {
-  // `present` is DOM presence, `entered` the visual state. Opening must mount
-  // collapsed so the transition has a "from" value; closing must stay mounted
-  // until it has played out.
-  const [present, setPresent] = useState(open);
-  const [entered, setEntered] = useState(false);
-
-  useIsomorphicLayoutEffect(() => {
-    if (open) setPresent(true);
-  }, [open]);
-
-  // One frame after mounting, so `0fr → 1fr` is a transition, not an initial value.
-  useIsomorphicLayoutEffect(() => {
-    if (!open || !present) return;
-    if (typeof requestAnimationFrame !== "function") {
-      // No frame scheduler — reveal immediately rather than stay stuck collapsed.
-      setEntered(true);
-      return;
-    }
-    const frame = requestAnimationFrame(() => setEntered(true));
-    return () => cancelAnimationFrame(frame);
-  }, [open, present]);
-
-  // A timer rather than `transitionend`: under `prefers-reduced-motion` there is
-  // no transition, so the event would never fire and the row would never unmount.
-  useEffect(() => {
-    if (open || !present) return;
-    setEntered(false);
-    const timer = setTimeout(() => setPresent(false), EXPAND_TRANSITION_MS);
-    return () => clearTimeout(timer);
-  }, [open, present]);
-
-  if (!present) return null;
-
-  return (
-    <ExpandedRowContent
-      open={open}
-      entered={entered}
-      totalColSpan={totalColSpan}
-      panelId={panelId}
-      triggerId={triggerId}
-      label={label}
-      render={render}
-    />
-  );
-}
-
-interface ExpandedRowContentProps extends DataTableExpandedRowProps {
-  entered: boolean;
-}
-
-/**
- * The rendered detail row. Split from the presence owner above so that it truly
- * unmounts when the collapse finishes: the focus handoff runs from a layout
- * effect's cleanup, which only fires before React detaches the nodes when the
- * component itself is removed. Keeping it in the always-mounted parent would run
- * the cleanup after the panel had already left the DOM, by which point
- * `document.activeElement` has fallen back to `<body>` and the handoff is a
- * no-op — the exact bug it exists to prevent.
- *
- * @internal
- */
-function ExpandedRowContent({
-  open,
-  entered,
-  totalColSpan,
-  panelId,
-  triggerId,
-  label,
-  render,
-}: ExpandedRowContentProps) {
-  const t = useDataTableT();
-  const panelRef = useRef<HTMLElement>(null);
-
-  // Hand focus back when the collapse starts, before the panel goes `inert`
-  // below — making an element inert while it holds focus drops focus to <body>.
-  useIsomorphicLayoutEffect(() => {
-    if (open) return;
-    const panel = panelRef.current;
-    if (!panel || !panel.contains(document.activeElement)) return;
-    document.getElementById(triggerId)?.focus();
-  }, [open, triggerId]);
-
-  // Safety net for the row unmounting outright (refetch, filter, pagination).
-  // Both targets are resolved at setup, while still in the document; by cleanup
-  // the trigger may be gone too, so the scroll container is the fallback.
-  useIsomorphicLayoutEffect(() => {
-    const panel = panelRef.current;
-    const trigger = document.getElementById(triggerId);
-    const container = panel?.closest<HTMLElement>("[data-slot='table-container']") ?? null;
-    return () => {
-      if (!panel || !panel.contains(document.activeElement)) return;
-      if (trigger?.isConnected) {
-        trigger.focus();
-        return;
-      }
-      if (container?.isConnected) {
-        // Borrow `tabindex` only for the focus call: a scrollable div is tabbable
-        // by default *unless* the author sets one, and this container is shared
-        // by every `Table.Root` consumer.
-        const hadTabIndex = container.hasAttribute("tabindex");
-        if (!hadTabIndex) container.setAttribute("tabindex", "-1");
-        container.focus();
-        if (!hadTabIndex) container.removeAttribute("tabindex");
-      }
-    };
-  }, [triggerId]);
-
-  return (
-    <Table.Row
-      data-slot="data-table-expanded-row"
-      data-state={open ? "open" : "closed"}
-      className="astw:bg-muted/30 astw:hover:bg-transparent"
-    >
-      {/* `p-0!` — this cell is both first and last, and `Table.Cell`'s
-          `first:pl-6 last:pr-6` outranks a plain `p-0` on specificity, insetting
-          the sticky panel by 24px. */}
-      <Table.Cell colSpan={totalColSpan} className="astw:p-0!">
-        {/* The colSpan cell spans the whole table, so pin the panel to the left
-            edge of the scrollport or it sits off-screen once scrolled. The
-            `min(100%, …)` makes this a no-op when the table already fits. */}
-        <div
-          className="astw:sticky astw:left-0"
-          style={{ width: "min(100%, var(--data-table-viewport, 100%))" }}
-        >
-          {/* `0fr → 1fr` resolves to the panel's exact natural height, so consumer
-              content of any size is neither clipped nor left with dead time at the
-              end. The `<tr>`/`<td>` are left alone — rows size to their content,
-              and animating row heights under `border-collapse` is unreliable. */}
-          <div
-            className="astw:grid astw:transition-[grid-template-rows,opacity] astw:ease-out astw:motion-reduce:transition-none"
-            style={{
-              gridTemplateRows: entered ? "1fr" : "0fr",
-              opacity: entered ? 1 : 0,
-              transitionDuration: `${EXPAND_TRANSITION_MS}ms`,
-            }}
-          >
-            {/* `min-h-0` — grid items default to `min-height: auto` and would
-                refuse to collapse. `overflow-y-hidden` clips mid-reveal;
-                `overflow-x-auto` keeps wide content reachable. */}
-            <div className="astw:min-h-0 astw:overflow-x-auto astw:overflow-y-hidden">
-              {/* A named `<section>` maps to `role="region"`. `inert` covers the
-                  closing window — zero height and opacity still leave descendants
-                  focusable and announced. */}
-              <section
-                ref={panelRef}
-                id={panelId}
-                inert={open ? undefined : true}
-                aria-label={t("expandedDetails", { label })}
-                className="astw:px-6 astw:py-3"
-              >
-                {render()}
-              </section>
-            </div>
-          </div>
-        </div>
-      </Table.Cell>
-    </Table.Row>
-  );
-}
-
-// =============================================================================
-// RowActionsMenu (internal — uses app-shell Menu)
-// =============================================================================
-
-function RowActionsMenu<TRow extends Record<string, unknown>>({
-  actions,
-  row,
-}: {
-  actions: RowAction<TRow>[];
-  row: TRow;
-}) {
-  const t = useDataTableT();
-
-  return (
-    <div data-slot="data-table-row-actions">
-      <Menu.Root>
-        <Menu.Trigger
-          render={
-            <Button variant="ghost" size="icon" aria-label={t("rowActions")}>
-              <Ellipsis className="astw:size-4" />
-            </Button>
-          }
-        />
-        <Menu.Content>
-          {actions.map((action) => {
-            // `canApply` is the positive form; the deprecated
-            // `isDisabled` still counts, so either one can switch it off.
-            const disabled =
-              (action.canApply ? !action.canApply(row) : false) ||
-              (action.isDisabled?.(row) ?? false);
-            return (
-              <Menu.Item
-                key={action.id}
-                disabled={disabled}
-                onClick={() => {
-                  if (!disabled) {
-                    action.onClick(row);
-                  }
-                }}
-                className={cn(action.variant === "destructive" && "astw:text-danger-text")}
-              >
-                {action.icon}
-                {action.label}
-              </Menu.Item>
-            );
-          })}
-        </Menu.Content>
-      </Menu.Root>
-    </div>
-  );
-}
-
-// =============================================================================
-// DataTable.Table
-// =============================================================================
-
-/** Use `DataTable.Table` instead of calling this directly. */
-function DataTableTable({ className }: { className?: string }) {
-  const ctx = useContext(DataTableContext);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [widths, setWidths] = useState<ColumnWidths>({});
-
-  const visibleColumns = ctx?.visibleColumns;
-  const pinnedColumns = ctx?.pinnedColumns;
-  const currentPage = ctx?.currentPage;
-  const pageSize = ctx?.pageSize;
-  const hasSelection = !!ctx?.toggleRowSelection;
-  const hasExpand = !!ctx?.rowExpansion;
-  const hasRowActions = !!ctx?.rowActions?.length;
-
-  // Measure each column's *rendered* width from the (always-present) header row
-  // and publish it via PinMeasureContext, so sticky offsets reflect real
-  // geometry rather than declared `width`. This keeps the table on its natural
-  // `table-auto` sizing — pinning no longer forces `table-fixed` (which would
-  // require every column to set an explicit width or collapse). Runs before
-  // paint and re-measures on container/column changes.
-  useIsomorphicLayoutEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    // Own table only: an expanded row can contain another DataTable.
-    const ownTable = el.querySelector("table");
-    const cells = Array.from(
-      el.querySelectorAll<HTMLElement>("[data-slot='data-table-header'] [data-col-key]"),
-    ).filter((cell) => cell.closest("table") === ownTable);
-    let lastWidth = -1;
-
-    const measure = () => {
-      const width = el.clientWidth;
-      lastWidth = width;
-      const next: ColumnWidths = {};
-      cells.forEach((cell) => {
-        const key = cell.dataset.colKey;
-        // Fractional width (not the integer-rounded offsetWidth) so accumulated
-        // sticky offsets land exactly on each column's real edge — otherwise the
-        // rounding drift opens a sub-pixel gap between adjacent pinned columns
-        // where scrolling rows bleed through.
-        if (key) next[key] = cell.getBoundingClientRect().width;
-      });
-      setWidths((prev) => (sameWidths(prev, next) ? prev : next));
-      // Publish the scrollport width for an expanded row's sticky panel to cap
-      // itself to. Skipping zero keeps a hidden-tab mount from collapsing every
-      // panel via `min(100%, 0px)`; writing only on change keeps this mutation
-      // from feeding back into the ResizeObserver.
-      if (width > 0) {
-        const value = `${width}px`;
-        if (el.style.getPropertyValue("--data-table-viewport") !== value) {
-          el.style.setProperty("--data-table-viewport", value);
-        }
-      }
-    };
-    measure();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver((entries) => {
-      // Footer content can redistribute columns without changing table width.
-      // Ignore container-only height changes while detail rows animate.
-      if (el.clientWidth !== lastWidth || entries.some((entry) => entry.target !== el)) measure();
-    });
-    observer.observe(el);
-    cells.forEach((cell) => observer.observe(cell));
-    return () => observer.disconnect();
-  }, [visibleColumns, pinnedColumns, hasSelection, hasExpand, hasRowActions]);
-
-  // Reflect horizontal scroll position onto the container as data attributes so
-  // the pinned-column freeze shadows show only while there is content scrolled
-  // under that edge (left once scrolled from the start; right while more remains
-  // to the right). Re-runs when the column set changes and observes size changes.
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const update = () => {
-      const maxScroll = el.scrollWidth - el.clientWidth;
-      el.toggleAttribute("data-pin-shadow-left", el.scrollLeft > 0);
-      el.toggleAttribute("data-pin-shadow-right", el.scrollLeft < maxScroll - 1);
-    };
-    update();
-    el.addEventListener("scroll", update, { passive: true });
-    if (typeof ResizeObserver === "undefined") {
-      return () => el.removeEventListener("scroll", update);
-    }
-    const observer = new ResizeObserver(update);
-    observer.observe(el);
-    return () => {
-      el.removeEventListener("scroll", update);
-      observer.disconnect();
-    };
-  }, [visibleColumns, pinnedColumns]);
-
-  // Keep pagination-driven scroll reset local to the scroll owner. The scroll
-  // container lives here in `DataTable.Table`, while page changes can come from
-  // the built-in pagination or any custom consumer using the same context.
-  // Threading an imperative callback/event bus through `DataTable.Root` just to
-  // reach this ref would add API surface and create opt-in call sites; this
-  // effect stays as the single place that synchronizes page/page-size state to
-  // the DOM scroll position.
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    el.scrollTop = 0;
-  }, [currentPage, pageSize]);
-
-  return (
-    // min-h-0 lets the scroll container shrink within DataTable.Root's flex
-    // column; combined with the container's overflow-auto this is the region
-    // that scrolls vertically when height is constrained. The sticky header
-    // (DataTableHeaders) stays pinned to the top of this scrollport.
-    <PinMeasureContext.Provider value={widths}>
-      <Table.Root
-        data-slot="data-table-table"
-        containerRef={containerRef}
-        containerClassName="astw:min-h-0 astw:overflow-auto"
-        className={className}
-      >
-        <DataTableHeaders />
-        <DataTableBody />
-        <DataTableColumnFooter />
-      </Table.Root>
-    </PinMeasureContext.Provider>
-  );
-}
-DataTableTable.displayName = "DataTable.Table";
-
-// =============================================================================
-// DataTable.Footer
-// =============================================================================
-
-/** Use `DataTable.Footer` instead of calling this directly. */
-function DataTableFooter({ children, className }: { children?: ReactNode; className?: string }) {
-  const ctx = useContext(DataTableContext);
-  const offersBulkActions = hasBulkActions(ctx);
-  const selecting = isSelectionBarOpen(ctx);
-
-  return (
-    <div
-      data-slot="data-table-footer"
-      data-selecting={selecting ? "" : undefined}
-      className={cn(
-        "astw:flex astw:shrink-0 astw:items-center astw:border-t astw:border-border astw:px-4 astw:py-2",
-        offersBulkActions && "astw:transition-colors astw:motion-reduce:transition-none",
-        selecting && [
-          "astw:flex-wrap astw:gap-x-3 astw:gap-y-2",
-          "astw:bg-accent astw:text-accent-foreground",
-          "astw:rounded-b-[calc(var(--radius-md)-1px)]",
-          // Sticky while the bar is up: on a page-scrolling table it rides the
-          // bottom of the viewport until the table's own end scrolls into view.
-          // A no-op in <Layout fill>, where the footer is already pinned.
-          "astw:sticky astw:bottom-0 astw:z-20",
-          // The bar's surface, captured for the wrapper below: a token can't be
-          // re-pointed in terms of itself on a single element.
-          "astw:[--data-table-selection-surface:var(--accent)]",
-        ],
-        className,
-      )}
-    >
-      {offersBulkActions ? (
-        // `contents` keeps the wrapper out of layout. It re-points the hover and
-        // secondary-text tokens for everything on the tinted bar — the bar's own
-        // buttons and the consumer's Pagination alike — which would otherwise
-        // hover to the bar's colour and lose contrast on it.
-        <div
-          className={cn(
-            "astw:contents",
-            selecting && [
-              "astw:[--accent:color-mix(in_srgb,var(--accent-foreground)_8%,var(--data-table-selection-surface))]",
-              "astw:[--muted-foreground:color-mix(in_srgb,var(--accent-foreground)_70%,var(--data-table-selection-surface))]",
-            ],
-          )}
-        >
-          {selecting && <DataTableSelectionBar />}
-          {children}
-          <DataTableSelectionAnnouncer open={selecting} />
-        </div>
-      ) : (
-        children
-      )}
-    </div>
-  );
-}
-DataTableFooter.displayName = "DataTable.Footer";
-
-// =============================================================================
-// DataTable namespace
-// =============================================================================
+export type { DataTableRootProps } from "./root";
+export type { DataTablePaginationProps } from "./pagination";
 
 export const DataTable = {
   /**
diff --git a/packages/core/src/components/data-table/data-table-date-cache.test.tsx b/packages/core/src/components/data-table/date-cache.test.tsx
similarity index 100%
rename from packages/core/src/components/data-table/data-table-date-cache.test.tsx
rename to packages/core/src/components/data-table/date-cache.test.tsx
diff --git a/packages/core/src/components/data-table/editable-cell.tsx b/packages/core/src/components/data-table/editable-cell.tsx
deleted file mode 100644
index 4d1847e2..00000000
--- a/packages/core/src/components/data-table/editable-cell.tsx
+++ /dev/null
@@ -1,1329 +0,0 @@
-import {
-  useCallback,
-  useId,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ChangeEvent,
-  type ComponentProps,
-  type FocusEvent,
-  type KeyboardEvent,
-  type MouseEvent,
-  type ReactNode,
-  type RefObject,
-  type TouchEvent,
-} from "react";
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-import { Popover } from "@base-ui/react/popover";
-import type { CalendarDate } from "@internationalized/date";
-import { CalendarDays, ChevronDown, CircleAlert, X } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { isComposing } from "@/lib/is-composing";
-import { useTimeZone } from "@/contexts/appshell-context";
-import { BadgeList } from "@/components/badge-list";
-import { Button } from "@/components/button";
-import { Calendar } from "@/components/calendar";
-import { ComboboxParts } from "@/components/combobox";
-import { Input } from "@/components/input";
-import { Table } from "@/components/table";
-import { Tooltip } from "@/components/tooltip";
-import type { Column, DateTimeDraft } from "./types";
-import { getCellValue, renderTypedValue } from "./cell-renderers";
-import { CellEditError } from "./cell-edit-error";
-import {
-  normalizeNumberText,
-  parseNumberText,
-  resolveBadgeOptions,
-  sameDate,
-  sameNumber,
-  toCalendarDate,
-  toIsoDateTime,
-  toNumberEditText,
-  toNumberValue,
-  toTextValue,
-  toTimeText,
-} from "./cell-edit";
-import type { CellEditNavigation } from "./use-cell-edit-navigation";
-import { useDataTableT } from "./i18n";
-import { useCellEditSession, type CellEditFailure } from "./use-cell-edit-session";
-
-/**
- * A column whose cells can be edited in place.
- *
- * @internal
- */
-export type EditableColumn<TRow extends Record<string, unknown>> = Extract<
-  Column<TRow>,
-  { type: "text" | "number" | "money" | "date" | "badge" | "link" }
->;
-
-type ChoiceColumn<TRow extends Record<string, unknown>> = Extract<
-  EditableColumn<TRow>,
-  { type: "text" | "link" | "badge" }
->;
-
-type DateColumn<TRow extends Record<string, unknown>> = Extract<
-  EditableColumn<TRow>,
-  { type: "date" }
->;
-
-// The dropdown choices a column offers, or `undefined` when it's typed into.
-function columnChoices<TRow extends Record<string, unknown>>(col: Column<TRow>) {
-  if (col.type === "badge")
-    return resolveBadgeOptions(col.edit?.options, col.typeOptions, col.filter);
-  if (col.type === "text" || col.type === "link") return col.edit?.options;
-  return undefined;
-}
-
-/**
- * Whether the column carries an `edit` config it can use: any typed column
- * except a `badge` one with no choices to offer.
- *
- * @internal
- */
-export function isEditableColumn<TRow extends Record<string, unknown>>(
-  col: Column<TRow>,
-): col is EditableColumn<TRow> {
-  if (col.edit === undefined || col.type === undefined) return false;
-  return col.type !== "badge" || (columnChoices(col)?.length ?? 0) > 0;
-}
-
-/**
- * Whether the column's editor shows an icon (a dropdown's chevron or a date's
- * calendar). Typed-into cells show none: the cell's tint already says it's
- * editable, and a pen in every cell reads as noise.
- *
- * @internal
- */
-export function hasEditorIcon<TRow extends Record<string, unknown>>(col: Column<TRow>): boolean {
-  return (
-    col.type === "date" ||
-    col.type === "badge" ||
-    ((col.type === "text" || col.type === "link") && !!col.edit?.options)
-  );
-}
-
-/**
- * Room for the icon a dropdown or date cell shows at its right edge (a chevron
- * or a calendar; 14px plus a gap), so a value ends — or truncates — before it
- * instead of running underneath. Read-only cells of the same column keep it
- * too, so the column's width doesn't change as rows become editable or not.
- *
- * @internal
- */
-export const ICON_SPACE_CLASS_NAME = "astw:pr-5";
-
-// Editors cover the whole cell, end to end, instead of taking part in layout,
-// so a cell becoming editable — or being edited — never changes row height or
-// column width. They inherit the cell's padding (they're its direct children),
-// so their text lines up exactly with the cell's own display underneath.
-const OVERLAY_CLASS_NAME =
-  "astw:absolute astw:inset-0 astw:h-full astw:w-full astw:p-[inherit] astw:rounded-none astw:border-0 astw:shadow-none astw:bg-transparent astw:dark:bg-transparent";
-
-// Spreadsheet-style: the cell being edited outlines its edges (an inset ring,
-// so it never spills onto neighbouring cells).
-const CELL_FOCUS_CLASS_NAME = cn(
-  "astw:outline-none astw:focus:ring-2 astw:focus:ring-inset astw:focus:ring-primary",
-  "astw:focus-visible:ring-2 astw:focus-visible:ring-inset astw:focus-visible:ring-primary",
-);
-
-// Parsing and callback errors share the cell's error outline.
-const CELL_ERROR_CLASS_NAME =
-  "astw:ring-[1.5px] astw:ring-inset astw:ring-danger-solid astw:focus:ring-[1.5px] astw:focus:ring-danger-solid astw:focus-visible:ring-[1.5px] astw:focus-visible:ring-danger-solid";
-
-// An editable cell says so at rest with a subtle tint instead of an icon. It's
-// a background *image* layered over whatever colour the cell already has (the
-// row's hover / selected fade, a pinned cell's opaque card), so it never
-// replaces them and stays a step darker than its read-only neighbours. The
-// cell being edited drops it: an untinted cell with a ring reads as "active".
-// (Written out in full: Tailwind only generates classes it finds as literals.)
-const EDITABLE_CELL_CLASS_NAME = cn(
-  "astw:[background-image:linear-gradient(color-mix(in_srgb,var(--foreground)_4%,transparent),color-mix(in_srgb,var(--foreground)_4%,transparent))]",
-  "astw:hover:[background-image:linear-gradient(color-mix(in_srgb,var(--foreground)_7%,transparent),color-mix(in_srgb,var(--foreground)_7%,transparent))]",
-  "astw:focus-within:[background-image:none]",
-);
-
-// Text, number and dropdown cells are typed into: the whole cell shows a text
-// cursor.
-const INPUT_CLASS_NAME = cn(
-  OVERLAY_CLASS_NAME,
-  CELL_FOCUS_CLASS_NAME,
-  "astw:text-body-md astw:cursor-text",
-);
-
-// A dropdown's text stops before its chevron.
-const ICON_INPUT_CLASS_NAME = "astw:pr-7 astw:[td:last-child>&]:pr-11";
-
-// Date cells: a transparent button over the cell's own display, with a pointer.
-const TRIGGER_CLASS_NAME = cn(
-  OVERLAY_CLASS_NAME,
-  CELL_FOCUS_CLASS_NAME,
-  "astw:cursor-pointer",
-  "astw:data-popup-open:ring-2 astw:data-popup-open:ring-inset astw:data-popup-open:ring-primary",
-);
-
-// The icon that says how a cell is edited: shown while the cell is hovered or
-// being edited (the cell's tint says it's editable at rest).
-// Decoration only: a click anywhere in the cell goes to the editor underneath.
-const CELL_ICON_CLASS_NAME = cn(
-  "astw:pointer-events-none astw:absolute astw:inset-y-0 astw:right-2 astw:flex astw:items-center astw:[td:last-child>&]:right-6",
-  "astw:text-muted-foreground astw:opacity-0 astw:transition-opacity",
-  "astw:group-hover/cell:opacity-30 astw:group-focus-within/cell:opacity-30",
-  "astw:[&_svg]:size-3.5",
-);
-
-interface CellErrorUI {
-  failure: CellEditFailure;
-  id: string;
-  message: string;
-  content: ReactNode;
-  triggerRef: RefObject<HTMLButtonElement | null>;
-  popupRef: RefObject<HTMLDivElement | null>;
-  containsTarget: (target: EventTarget | null) => boolean;
-}
-
-// The standard popover body: the alert icon makes it read as an error rather
-// than a tooltip.
-function DefaultCellErrorContent({ message }: { message: string }) {
-  return (
-    <div className="astw:flex astw:gap-1.5">
-      {/* One line-height tall, so the icon centres on the first line of text. */}
-      <span className="astw:flex astw:h-lh astw:shrink-0 astw:items-center">
-        <CircleAlert
-          aria-hidden="true"
-          strokeWidth={2.5}
-          className="astw:size-3.5 astw:opacity-70"
-        />
-      </span>
-      <p>{message}</p>
-    </div>
-  );
-}
-
-function useCellValue<TRow extends Record<string, unknown>>(
-  row: TRow,
-  col: EditableColumn<TRow>,
-  failure: CellEditFailure | undefined,
-  dateRenderer?: (row: TRow) => ReactNode,
-) {
-  const { value: timeZone } = useTimeZone();
-  const current = getCellValue(row, col);
-  const render = col.render ?? dateRenderer;
-  const display = render
-    ? render(row)
-    : renderTypedValue(row, col, current, { linkAsText: true, timeZone });
-  const t = useDataTableT();
-  const errorId = useId();
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const popupRef = useRef<HTMLDivElement>(null);
-  const containsErrorTarget = (target: EventTarget | null) =>
-    target instanceof Node &&
-    !!(triggerRef.current?.contains(target) || popupRef.current?.contains(target));
-  const change = (value: unknown) =>
-    (col.edit?.onValueChange as ((row: TRow, value: unknown) => unknown) | undefined)?.(row, value);
-  const commit = (value: unknown) =>
-    (col.edit?.onValueCommitted as ((row: TRow, value: unknown) => unknown) | undefined)?.(
-      row,
-      value,
-    );
-  const errorConfig = col.edit?.error;
-  const renderError = errorConfig && errorConfig.render;
-  const message =
-    failure?.error instanceof CellEditError && failure.error.message
-      ? failure.error.message
-      : t("editCallbackError");
-  const callbackError: CellErrorUI | undefined =
-    failure && failure.source !== "parse"
-      ? {
-          failure,
-          id: errorId,
-          message: renderError ? t("editCallbackError") : message,
-          content: renderError ? (
-            renderError({ row, error: failure.error })
-          ) : (
-            <DefaultCellErrorContent message={message} />
-          ),
-          triggerRef,
-          popupRef,
-          containsTarget: containsErrorTarget,
-        }
-      : undefined;
-  return { current, display, change, commit, callbackError, containsErrorTarget };
-}
-
-/**
- * Registers the cell's focusable element with the table's Tab
- * navigation. Unregisters on every detach instead of returning a ref cleanup:
- * `Input` and `Combobox.Input` merge refs with a plain callback that calls ours
- * with `null` and drops any cleanup we return.
- */
-function useNavigationRef<T extends HTMLElement>(
-  navigation: CellEditNavigation,
-  rowKey: string,
-  colKey: string,
-) {
-  const unregisterRef = useRef<(() => void) | null>(null);
-  return useCallback(
-    (element: T | null) => {
-      unregisterRef.current?.();
-      unregisterRef.current = element ? navigation.register(rowKey, colKey, element) : null;
-    },
-    [navigation, rowKey, colKey],
-  );
-}
-
-function EditableCellFrame({
-  cellProps,
-  display,
-  truncate,
-  hideDisplay,
-  icon,
-  tooltipLabel,
-  editing,
-  callbackError,
-  label,
-  onEditorLeave,
-  onEditorCancel,
-  getFailure,
-  confirming,
-  children,
-}: {
-  cellProps: ComponentProps<typeof Table.Cell>;
-  display: ReactNode;
-  truncate?: boolean;
-  tooltipLabel?: string;
-  editing: boolean;
-  callbackError?: CellErrorUI;
-  label: string;
-  onEditorLeave?: () => void;
-  onEditorCancel: () => void;
-  getFailure: () => CellEditFailure | undefined;
-  confirming: boolean;
-  /** Typed-into cells hide the display while the input shows the text. */
-  hideDisplay?: "focused" | "forced-colors";
-  /** Shown on hover or focus; the cell's tint marks editability at rest. */
-  icon?: ReactNode;
-  children: ReactNode;
-}) {
-  const t = useDataTableT();
-  const [tooltipOpen, setTooltipOpen] = useState(false);
-  const [dismissedFailure, setDismissedFailure] = useState<CellEditFailure | null>(null);
-  const [manuallyOpenedFailure, setManuallyOpenedFailure] = useState<CellEditFailure | null>(null);
-  const [navigationDismissedFailure, setNavigationDismissedFailure] =
-    useState<CellEditFailure | null>(null);
-  const errorActionsRef = useRef<Popover.Root.Actions | null>(null);
-  const tabNavigationRef = useRef(false);
-  const errorOpen = !!callbackError && dismissedFailure !== callbackError.failure;
-  const showTooltip = tooltipLabel !== undefined && !editing && !callbackError;
-  const dismissForNavigation = () => {
-    const failure = getFailure();
-    if (!failure || failure.source === "parse") return;
-    setNavigationDismissedFailure(failure);
-    setDismissedFailure(failure);
-  };
-  useLayoutEffect(() => {
-    // Remove closing focus guards before native Tab chooses its destination.
-    if (!errorOpen && navigationDismissedFailure === callbackError?.failure)
-      errorActionsRef.current?.unmount();
-  }, [errorOpen, callbackError?.failure, navigationDismissedFailure]);
-  const cell = (
-    <Table.Cell
-      {...cellProps}
-      data-editable=""
-      aria-busy={confirming || undefined}
-      // The editor is positioned against the cell. A pinned cell is already
-      // positioned (sticky), which its inline style keeps.
-      className={cn(
-        cellProps.className,
-        "astw:relative astw:group/cell",
-        EDITABLE_CELL_CLASS_NAME,
-        callbackError && CELL_ERROR_CLASS_NAME,
-      )}
-      // The editor and its portaled error popup are one logical focus group.
-      onBlur={(event) => {
-        if (
-          event.currentTarget.contains(event.relatedTarget) ||
-          callbackError?.containsTarget(event.relatedTarget)
-        )
-          return;
-        if (tabNavigationRef.current) dismissForNavigation();
-        onEditorLeave?.();
-      }}
-      onKeyDown={(event) => {
-        if (
-          event.key === "Tab" &&
-          !event.defaultPrevented &&
-          event.currentTarget.contains(event.target as Node)
-        )
-          dismissForNavigation();
-        tabNavigationRef.current = false;
-      }}
-      onKeyDownCapture={(event) => {
-        tabNavigationRef.current =
-          event.key === "Tab" && event.currentTarget.contains(event.target as Node);
-        if (
-          callbackError &&
-          event.key === "Escape" &&
-          !callbackError.popupRef.current?.contains(event.target as Node)
-        ) {
-          event.preventDefault();
-          event.stopPropagation();
-          if (errorOpen) setDismissedFailure(callbackError.failure);
-          else onEditorCancel();
-          return;
-        }
-        if (callbackError && event.altKey && event.key === "ArrowDown") {
-          event.preventDefault();
-          event.stopPropagation();
-          setNavigationDismissedFailure(null);
-          setManuallyOpenedFailure(callbackError.failure);
-          setDismissedFailure(null);
-          if (errorOpen) callbackError.popupRef.current?.focus({ preventScroll: true });
-        }
-      }}
-      // Editing a cell must never fire `onClickRow`.
-      onClick={(event) => event.stopPropagation()}
-    >
-      <span
-        aria-hidden="true"
-        className={cn(
-          "astw:block",
-          (icon !== undefined || callbackError) && ICON_SPACE_CLASS_NAME,
-          truncate && "astw:truncate",
-          // Transparent input text is forced visible in forced-colors mode;
-          // hide the display instead so the two don't overlap.
-          hideDisplay && "astw:forced-colors:invisible",
-          hideDisplay === "focused" && "astw:invisible",
-        )}
-      >
-        {display}
-      </span>
-      {children}
-      {callbackError && (
-        <>
-          <output id={callbackError.id} className="astw:sr-only">
-            {callbackError.message}. {t("editErrorHint")}
-          </output>
-          <Popover.Root
-            actionsRef={errorActionsRef}
-            open={errorOpen}
-            onOpenChange={(open) => {
-              setDismissedFailure(open ? null : callbackError.failure);
-              if (open) {
-                setNavigationDismissedFailure(null);
-                setManuallyOpenedFailure(callbackError.failure);
-              }
-            }}
-          >
-            <Popover.Trigger
-              ref={callbackError.triggerRef}
-              aria-label={t("editShowError", { label })}
-              aria-keyshortcuts="Alt+ArrowDown"
-              tabIndex={-1}
-              className="astw:absolute astw:inset-y-0 astw:right-2 astw:z-10 astw:flex astw:items-center astw:text-danger-text astw:outline-none astw:[td:last-child>&]:right-6"
-              onContextMenu={(event) => event.stopPropagation()}
-            >
-              <CircleAlert aria-hidden="true" strokeWidth={2.5} className="astw:size-3.5" />
-            </Popover.Trigger>
-            <Popover.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
-              {/* Opens directly under the cell, not under the small icon trigger. */}
-              <Popover.Positioner
-                anchor={() => callbackError.triggerRef.current?.closest("td") ?? null}
-                sideOffset={2}
-                side="bottom"
-                align="start"
-              >
-                <Popover.Popup
-                  ref={callbackError.popupRef}
-                  initialFocus={manuallyOpenedFailure === callbackError.failure}
-                  finalFocus={navigationDismissedFailure !== callbackError.failure}
-                  aria-label={t("editErrorDialog", { label })}
-                  data-slot="data-table-cell-error"
-                  className={cn(
-                    POPUP_CLASS_NAME,
-                    // Same tint as Alert's error variant. --danger-surface is
-                    // translucent, so it's layered as an image over the opaque
-                    // popover colour; table lines don't show through.
-                    "astw:[background-image:linear-gradient(var(--danger-surface),var(--danger-surface))]",
-                    "astw:max-w-xs astw:border-0 astw:px-2.5 astw:py-2 astw:text-body-sm astw:text-danger-text astw:shadow-sm astw:outline-none",
-                  )}
-                  onContextMenu={(event) => event.stopPropagation()}
-                  onTouchStart={(event) => event.stopPropagation()}
-                  onKeyDown={(event) => {
-                    if (event.key === "Escape") event.stopPropagation();
-                  }}
-                >
-                  <div className="astw:flex astw:items-center astw:gap-2">
-                    <div className="astw:min-w-0 astw:flex-1">{callbackError.content}</div>
-                    <Popover.Close
-                      aria-label={t("editCloseError")}
-                      render={<Button variant="ghost" size="icon" className="astw:size-6" />}
-                    >
-                      <X aria-hidden="true" className="astw:size-4" />
-                    </Popover.Close>
-                  </div>
-                </Popover.Popup>
-              </Popover.Positioner>
-            </Popover.Portal>
-          </Popover.Root>
-        </>
-      )}
-      {icon !== undefined && !callbackError && (
-        <span aria-hidden="true" className={CELL_ICON_CLASS_NAME}>
-          {icon}
-        </span>
-      )}
-    </Table.Cell>
-  );
-  return (
-    <Tooltip.Root open={showTooltip && tooltipOpen} onOpenChange={setTooltipOpen}>
-      <Tooltip.Trigger disabled={!showTooltip} render={cell} />
-      <Tooltip.Content>{tooltipLabel}</Tooltip.Content>
-    </Tooltip.Root>
-  );
-}
-
-interface DataTableEditableCellProps<
-  TRow extends Record<string, unknown>,
-  TColumn extends EditableColumn<TRow> = EditableColumn<TRow>,
-> {
-  row: TRow;
-  col: TColumn;
-  rowKey: string;
-  colKey: string;
-  /** Accessible name for the editor — the column's label. */
-  label: string;
-  align: "left" | "right";
-  tooltipLabel?: string;
-  navigation: CellEditNavigation;
-  /** Reuses the table's column-level date formatter cache. */
-  dateRenderer?: (row: TRow) => ReactNode;
-  /** `data-slot`, style, class and context-menu handlers shared with static cells. */
-  cellProps: ComponentProps<typeof Table.Cell>;
-}
-
-/**
- * A body cell whose value can be edited in place. The value belongs to the
- * consumer: the cell only holds a draft while it is being edited, and notifies
- * `edit.onValueChange` for drafts and `edit.onValueCommitted` for changed,
- * confirmed values. Validation and persistence belong to the consumer.
- *
- * - `number`, `money`, and `text` / `link` without choices are typed into.
- * - `badge`, and `text` / `link` with `edit.options`, are dropdowns you can
- *   type into to search.
- * - `date` opens a calendar.
- *
- * @internal
- */
-export function DataTableEditableCell<TRow extends Record<string, unknown>>(
-  props: DataTableEditableCellProps<TRow>,
-) {
-  const { col } = props;
-  const mode = col.edit?.error === false ? "unhandled" : "handled";
-  if (col.type === "date") return <DateEditCell key={mode} {...props} col={col} />;
-  if (col.type === "badge" || ((col.type === "text" || col.type === "link") && col.edit?.options)) {
-    return <ChoiceEditCell key={mode} {...props} col={col} />;
-  }
-  return <TypingEditCell key={mode} {...props} col={col} />;
-}
-
-// ── Typing: text, number, money, link ───────────────────────────────────────
-
-function TypingEditCell<TRow extends Record<string, unknown>>({
-  row,
-  col,
-  rowKey,
-  colKey,
-  label,
-  align,
-  navigation,
-  cellProps,
-  tooltipLabel,
-}: DataTableEditableCellProps<TRow>) {
-  const t = useDataTableT();
-  const errorId = useId();
-  const session = useCellEditSession<string>(col.edit?.error !== false);
-  const { state } = session;
-  const failure = state.status === "failed" ? state : undefined;
-  const { current, display, change, commit, callbackError, containsErrorTarget } = useCellValue(
-    row,
-    col,
-    failure,
-  );
-  const register = useNavigationRef<HTMLInputElement>(navigation, rowKey, colKey);
-  const editing = state.status !== "idle";
-  const [focused, setFocused] = useState(false);
-  const [hovered, setHovered] = useState(false);
-  const composingRef = useRef(false);
-  const selectOnMouseUpRef = useRef(false);
-
-  const numeric = col.type === "number" || col.type === "money";
-  const baselineText = numeric
-    ? toNumberEditText(toNumberValue(current))
-    : (toTextValue(current) ?? "");
-  const text = state.status === "idle" ? baselineText : state.draft;
-  const message = failure?.source === "parse" ? t("editNotANumber") : undefined;
-
-  const revert = (notify = false) => {
-    const previous = session.getState();
-    session.cancel(
-      notify && previous.status !== "idle" && previous.draft !== baselineText
-        ? () => change(baselineText)
-        : undefined,
-    );
-  };
-
-  const commitDraft = (): boolean => {
-    const active = session.getState();
-    if (active.status === "idle" || active.status === "confirming") return true;
-    const draftText = active.draft;
-    const value = numeric
-      ? parseNumberText(normalizeNumberText(draftText))
-      : toTextValue(draftText);
-    if (value === undefined) {
-      session.fail(undefined, "parse");
-      return false;
-    }
-    const unchanged =
-      draftText === baselineText ||
-      (numeric
-        ? sameNumber(value as number | null, toNumberValue(current))
-        : value === toTextValue(current));
-    session.confirm(() => (unchanged ? undefined : commit(value)));
-    return true;
-  };
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const next = event.target.value;
-    const active = session.getState();
-    const previous = active.status === "idle" ? baselineText : active.draft;
-    if (next !== previous) session.change(next, () => change(next));
-  };
-
-  // Keep IME output raw until cell confirmation, just like other draft changes.
-  const handleCompositionEnd = () => {
-    composingRef.current = false;
-  };
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    // While an IME is composing, Enter confirms the conversion, not the cell.
-    if (isComposing(event.nativeEvent, composingRef.current)) return;
-    const from = { rowKey, colKey };
-    switch (event.key) {
-      case "Enter":
-        event.preventDefault();
-        if (session.getState().status === "idle") {
-          session.begin(baselineText);
-          event.currentTarget.select();
-        } else {
-          commitDraft();
-        }
-        return;
-      case "Tab": {
-        const active = session.getState();
-        const failedCommit = active.status === "failed" && active.source === "commit";
-        if (!failedCommit && !commitDraft()) {
-          event.preventDefault();
-          return;
-        }
-        // At the first / last editable cell, native Tab leaves the table.
-        if (navigation.move(from, event.shiftKey ? "prev" : "next")) event.preventDefault();
-        return;
-      }
-      case "Escape":
-        if (session.getState().status === "idle") return;
-        // Handled here, so an enclosing dialog doesn't also close on this Esc.
-        event.preventDefault();
-        event.stopPropagation();
-        revert(true);
-        return;
-    }
-  };
-
-  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
-    const withinCell = focused || containsErrorTarget(event.relatedTarget);
-    setFocused(true);
-    if (withinCell) return;
-    session.begin(baselineText);
-    event.currentTarget.select();
-  };
-
-  const handleBlur = () => {
-    setFocused(false);
-    const active = session.getState();
-    if (active.status === "failed") {
-      // Preserve callback failures; malformed numeric blur still cancels the edit.
-      if (active.source === "parse") revert(true);
-      return;
-    }
-    if (!commitDraft()) revert(true);
-  };
-
-  const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {
-    if (editing) return;
-    // A right-click on a resting cell opens DataTable's cell menu instead of editing.
-    if (event.button === 2) {
-      event.preventDefault();
-      return;
-    }
-    session.begin(baselineText);
-    if (focused) event.currentTarget.select();
-    selectOnMouseUpRef.current = true;
-  };
-
-  // The click that focuses the cell keeps the select-all from `handleFocus`;
-  // otherwise mouseup would collapse it to a caret.
-  const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {
-    if (!selectOnMouseUpRef.current) return;
-    selectOnMouseUpRef.current = false;
-    event.preventDefault();
-  };
-
-  // While editing, the browser's own menu and long-press (paste, select) win
-  // over DataTable's cell menu.
-  const stopWhileEditing = (event: MouseEvent | TouchEvent) => {
-    if (editing) event.stopPropagation();
-  };
-
-  const hint = t("editRevertHint");
-
-  return (
-    <EditableCellFrame
-      cellProps={cellProps}
-      display={display}
-      truncate={col.truncate}
-      hideDisplay={editing ? "focused" : "forced-colors"}
-      tooltipLabel={tooltipLabel}
-      editing={editing}
-      callbackError={callbackError}
-      label={label}
-      onEditorLeave={handleBlur}
-      onEditorCancel={() => revert(true)}
-      getFailure={session.getFailure}
-      confirming={state.status === "confirming"}
-    >
-      {message !== undefined && (
-        <span id={errorId} className="astw:sr-only">
-          {message}. {hint}
-        </span>
-      )}
-      <Tooltip.Root open={message !== undefined && (focused || hovered)}>
-        <Tooltip.Trigger
-          render={
-            <Input
-              ref={register}
-              type="text"
-              value={text}
-              readOnly={!editing}
-              aria-label={label}
-              aria-invalid={message !== undefined || callbackError ? true : undefined}
-              aria-describedby={message !== undefined ? errorId : callbackError?.id}
-              aria-keyshortcuts={callbackError ? "Alt+ArrowDown" : undefined}
-              inputMode={numeric ? "text" : undefined}
-              enterKeyHint="done"
-              autoComplete="off"
-              spellCheck={numeric ? false : undefined}
-              className={cn(
-                INPUT_CLASS_NAME,
-                !editing && "astw:text-transparent",
-                numeric && "astw:tabular-nums",
-                align === "right" && "astw:text-right",
-                (message !== undefined || callbackError) && CELL_ERROR_CLASS_NAME,
-                callbackError && ICON_INPUT_CLASS_NAME,
-              )}
-              style={editing ? { WebkitTouchCallout: "default" } : undefined}
-              onChange={handleChange}
-              onKeyDown={handleKeyDown}
-              onFocus={handleFocus}
-              onCompositionStart={() => {
-                composingRef.current = true;
-              }}
-              onCompositionEnd={handleCompositionEnd}
-              onMouseDown={handleMouseDown}
-              onMouseUp={handleMouseUp}
-              onPointerEnter={() => setHovered(true)}
-              onPointerLeave={() => setHovered(false)}
-              onContextMenu={stopWhileEditing}
-              onTouchStart={stopWhileEditing}
-            />
-          }
-        />
-        <Tooltip.Content>
-          {message}
-          <span className="astw:block astw:opacity-70">{hint}</span>
-        </Tooltip.Content>
-      </Tooltip.Root>
-    </EditableCellFrame>
-  );
-}
-
-// ── Shared by the dropdown and calendar editors ─────────────────────────────
-
-// Tab / Shift+Tab from a closed calendar moves between editable cells, the
-// same way it does from a typing cell.
-function tabBetweenCells(
-  event: KeyboardEvent<HTMLElement>,
-  open: boolean,
-  navigation: CellEditNavigation,
-  from: { rowKey: string; colKey: string },
-) {
-  if (event.key !== "Tab" || open) return;
-  if (navigation.move(from, event.shiftKey ? "prev" : "next")) event.preventDefault();
-}
-
-// ── Dropdown: badge, and text / link with choices ────────────────────────────
-
-/** One dropdown choice; `value: null` is "None". */
-interface Choice {
-  value: string | null;
-  label: string;
-}
-
-type ChoiceDraft = Choice & { notified?: boolean };
-
-// Case- and width-insensitive searching: full-width letters and half-width
-// katakana match their usual forms.
-const searchable = (text: string) => text.normalize("NFKC").toLocaleLowerCase().trim();
-
-const isChoiceEqual = (a: Choice, b: Choice) => a.value === b.value;
-
-const choiceLabel = (choice: Choice) => choice.label;
-
-function ChoiceEditCell<TRow extends Record<string, unknown>>({
-  row,
-  col,
-  rowKey,
-  colKey,
-  label,
-  align,
-  navigation,
-  cellProps,
-  tooltipLabel,
-}: DataTableEditableCellProps<TRow, ChoiceColumn<TRow>>) {
-  const t = useDataTableT();
-  const session = useCellEditSession<ChoiceDraft>(col.edit?.error !== false);
-  const { state } = session;
-  const { current, display, change, commit, callbackError, containsErrorTarget } = useCellValue(
-    row,
-    col,
-    state.status === "failed" ? state : undefined,
-  );
-  const register = useNavigationRef<HTMLInputElement>(navigation, rowKey, colKey);
-  const value = toTextValue(current);
-  const noneLabel = t("editNone");
-  const choices = columnChoices(col);
-  // Keyed on content: rebuilding columns must not reset the highlight mid-search.
-  const choicesKey = (choices ?? []).map((c) => `${c.value}\u0000${c.label}`).join("\u0001");
-  const items = useMemo<Choice[]>(
-    () => [
-      { value: null, label: noneLabel },
-      ...(choices ?? []).map((c) => ({ value: c.value, label: String(c.label) })),
-    ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- `choicesKey` stands for `choices`.
-    [choicesKey, noneLabel],
-  );
-
-  const selected = items.find((item) => item.value === value) ?? null;
-  const [open, setOpen] = useState(false);
-  const [focused, setFocused] = useState(false);
-  const editing = state.status !== "idle";
-  const activeChoice = state.status === "idle" ? selected : state.draft;
-  // The displayed search text is local while editing, even if consumer data changes.
-  const [query, setQuery] = useState<string | null>(null);
-  // Keep the closing list filtered until its animation completes.
-  const [listQuery, setListQuery] = useState<string | null>(null);
-  const highlightedRef = useRef<Choice | undefined>(undefined);
-  const explicitHighlightRef = useRef<Choice | undefined>(undefined);
-  const composingRef = useRef(false);
-  const selectOnMouseUpRef = useRef(false);
-  const from = { rowKey, colKey };
-
-  const filtered = useMemo(() => {
-    const search = searchable(listQuery ?? "");
-    if (!search) return items;
-    const rank = (item: Choice) => {
-      const text = searchable(item.label);
-      if (text === search) return 0;
-      return text.startsWith(search) ? 1 : 2;
-    };
-    return (
-      items
-        .filter((item) => item.value !== null && searchable(item.label).includes(search))
-        // Sorting is stable, preserving the original order within each rank.
-        .toSorted((left, right) => rank(left) - rank(right))
-    );
-  }, [items, listQuery]);
-
-  const startEditing = () => {
-    session.begin(selected ?? { value, label: value ?? noneLabel });
-    setQuery(selected?.label ?? "");
-    setListQuery(null);
-    highlightedRef.current = undefined;
-    explicitHighlightRef.current = undefined;
-  };
-
-  const closeEditor = () => {
-    setQuery(null);
-    explicitHighlightRef.current = undefined;
-    setOpen(false);
-  };
-
-  const cancelEditing = () => {
-    const active = session.getState();
-    session.cancel(
-      active.status !== "idle" && active.draft.notified && active.draft.value !== value
-        ? () => change(value)
-        : undefined,
-    );
-    closeEditor();
-  };
-
-  const leaveEditor = () => {
-    const active = session.getState();
-    if (active.status === "failed" || active.status === "confirming") closeEditor();
-    else cancelEditing();
-  };
-
-  const pick = (item: Choice) => {
-    const active = session.getState();
-    if (active.status === "confirming" && active.draft.value === item.value) return;
-    session.change(
-      { ...item, notified: item.value !== value },
-      item.value !== value ? () => change(item.value) : undefined,
-    );
-    setQuery(item.label);
-    session.confirm(() => (item.value !== value ? commit(item.value) : undefined), closeEditor);
-  };
-
-  const explicitCandidate = () => {
-    const item = explicitHighlightRef.current;
-    return item && filtered.includes(item) ? item : undefined;
-  };
-
-  const keyboardCandidate = () => {
-    const highlighted = highlightedRef.current;
-    return (
-      explicitCandidate() ??
-      (highlighted && filtered.includes(highlighted) ? highlighted : filtered[0])
-    );
-  };
-
-  const handleKeyDown: NonNullable<ComponentProps<typeof ComboboxParts.Input>["onKeyDown"]> = (
-    event,
-  ) => {
-    if (isComposing(event.nativeEvent, composingRef.current)) {
-      event.preventBaseUIHandler();
-      return;
-    }
-    switch (event.key) {
-      case "Enter": {
-        event.preventDefault();
-        event.preventBaseUIHandler();
-        const active = session.getState();
-        if (active.status === "confirming") return;
-        if (!open) {
-          if (active.status === "failed" && active.source === "commit") {
-            session.confirm(
-              () => (active.draft.value !== value ? commit(active.draft.value) : undefined),
-              closeEditor,
-            );
-            return;
-          }
-          if (active.status === "idle") startEditing();
-          setOpen(true);
-          return;
-        }
-        const item = keyboardCandidate();
-        if (item) pick(item);
-        else leaveEditor();
-        return;
-      }
-      case "Tab": {
-        event.preventBaseUIHandler();
-        const item =
-          session.getState().status !== "idle" && open
-            ? (explicitCandidate() ??
-              (searchable(listQuery ?? "") ? keyboardCandidate() : undefined))
-            : undefined;
-        if (item) pick(item);
-        else leaveEditor();
-        if (navigation.move(from, event.shiftKey ? "prev" : "next")) event.preventDefault();
-        return;
-      }
-      case "Escape":
-        if (session.getState().status === "idle" && !open) return;
-        event.preventDefault();
-        event.stopPropagation();
-        event.preventBaseUIHandler();
-        cancelEditing();
-        return;
-    }
-  };
-
-  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
-    const withinCell = focused || containsErrorTarget(event.relatedTarget);
-    setFocused(true);
-    if (withinCell) return;
-    if (session.getState().status === "idle") startEditing();
-    event.currentTarget.select();
-  };
-
-  const handleBlur = () => {
-    setFocused(false);
-    leaveEditor();
-  };
-
-  const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {
-    if (event.button === 2 && session.getState().status === "idle") {
-      event.preventDefault();
-      return;
-    }
-    if (session.getState().status === "idle") {
-      startEditing();
-      setOpen(true);
-    }
-    if (!focused) selectOnMouseUpRef.current = true;
-  };
-
-  const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {
-    if (!selectOnMouseUpRef.current) return;
-    selectOnMouseUpRef.current = false;
-    event.preventDefault();
-  };
-
-  const stopWhileEditing = (event: MouseEvent | TouchEvent) => {
-    if (session.getState().status !== "idle") event.stopPropagation();
-  };
-
-  const renderChoice = (item: Choice) => {
-    if (item.value === null)
-      return <span className="astw:text-muted-foreground">{item.label}</span>;
-    if (col.type !== "badge") return item.label;
-    return (
-      <BadgeList value={item.value} options={col.typeOptions} resolveLabel={() => item.label} />
-    );
-  };
-
-  return (
-    <EditableCellFrame
-      cellProps={cellProps}
-      display={display}
-      truncate={col.truncate}
-      hideDisplay={editing ? "focused" : "forced-colors"}
-      icon={<ChevronDown />}
-      tooltipLabel={tooltipLabel}
-      editing={editing}
-      callbackError={callbackError}
-      label={label}
-      onEditorLeave={handleBlur}
-      onEditorCancel={cancelEditing}
-      getFailure={session.getFailure}
-      confirming={state.status === "confirming"}
-    >
-      <BaseCombobox.Root<Choice>
-        items={items}
-        filteredItems={filtered}
-        value={activeChoice}
-        onValueChange={(item, details) => {
-          if (details.reason === "item-press" && item) pick(item);
-        }}
-        inputValue={query ?? activeChoice?.label ?? ""}
-        onInputValueChange={(next, details) => {
-          if (details.reason === "input-change" || details.reason === "input-clear") {
-            const active = session.getState();
-            session.change(
-              active.status === "idle"
-                ? (selected ?? { value, label: value ?? noneLabel })
-                : active.draft,
-            );
-            setQuery(next);
-            setListQuery(next);
-            explicitHighlightRef.current = undefined;
-          }
-        }}
-        open={open}
-        onOpenChange={(next, details) => {
-          if (next) {
-            if (session.getState().status === "idle") startEditing();
-            setOpen(true);
-            if (details.reason !== "input-change") setListQuery(null);
-            return;
-          }
-          if (
-            containsErrorTarget(details.event.target) ||
-            ("relatedTarget" in details.event &&
-              containsErrorTarget(details.event.relatedTarget as EventTarget | null))
-          ) {
-            details.cancel();
-            return;
-          }
-          // Clearing search text is not selection or cancellation.
-          if (details.reason === "input-clear") {
-            setOpen(false);
-            return;
-          }
-          if (details.reason === "escape-key") cancelEditing();
-          else leaveEditor();
-        }}
-        onOpenChangeComplete={(isOpen) => {
-          if (!isOpen) setListQuery(null);
-        }}
-        onItemHighlighted={(item, details) => {
-          // Hover is visual feedback, not a keyboard confirmation candidate.
-          if (details.reason === "pointer") return;
-          highlightedRef.current = item;
-          if (item && details.reason === "keyboard") explicitHighlightRef.current = item;
-        }}
-        autoHighlight
-        itemToStringLabel={choiceLabel}
-        isItemEqualToValue={isChoiceEqual}
-      >
-        <ComboboxParts.Input
-          ref={register}
-          aria-label={label}
-          aria-invalid={callbackError ? true : undefined}
-          aria-describedby={callbackError?.id}
-          aria-keyshortcuts={callbackError ? "Alt+ArrowDown" : undefined}
-          autoComplete="off"
-          enterKeyHint="done"
-          readOnly={!editing}
-          className={cn(
-            INPUT_CLASS_NAME,
-            ICON_INPUT_CLASS_NAME,
-            !editing && "astw:text-transparent astw:cursor-pointer",
-            align === "right" && "astw:text-right",
-            callbackError && CELL_ERROR_CLASS_NAME,
-          )}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onMouseDown={handleMouseDown}
-          onMouseUp={handleMouseUp}
-          onContextMenu={stopWhileEditing}
-          onTouchStart={stopWhileEditing}
-          style={editing ? { WebkitTouchCallout: "default" } : undefined}
-          onCompositionStart={() => {
-            composingRef.current = true;
-          }}
-          onCompositionEnd={() => {
-            composingRef.current = false;
-          }}
-        />
-        {/* At least as wide as the cell, and wide enough that choices don't wrap. */}
-        <ComboboxParts.Content className="astw:w-max astw:min-w-(--anchor-width) astw:max-w-80">
-          <ComboboxParts.Empty>{t("editNoMatches")}</ComboboxParts.Empty>
-          <ComboboxParts.List>
-            {(item: Choice) => (
-              <ComboboxParts.Item key={item.value ?? "\u0000none"} value={item}>
-                {renderChoice(item)}
-              </ComboboxParts.Item>
-            )}
-          </ComboboxParts.List>
-        </ComboboxParts.Content>
-      </BaseCombobox.Root>
-    </EditableCellFrame>
-  );
-}
-
-// ── Calendar: date ───────────────────────────────────────────────────────────
-
-const POPUP_CLASS_NAME = cn(
-  "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:flex astw:flex-col astw:gap-3 astw:rounded-md astw:border astw:border-border astw:p-3 astw:shadow-md",
-  "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
-);
-
-function DateEditCell<TRow extends Record<string, unknown>>({
-  row,
-  col,
-  rowKey,
-  colKey,
-  label,
-  navigation,
-  cellProps,
-  tooltipLabel,
-  dateRenderer,
-}: DataTableEditableCellProps<TRow, DateColumn<TRow>>) {
-  const t = useDataTableT();
-  const { value: timeZone } = useTimeZone();
-  const withTime = col.typeOptions?.dateFormat === "datetime";
-  const session = useCellEditSession<DateTimeDraft>(col.edit?.error !== false);
-  const { state } = session;
-  const { current, display, change, commit, callbackError, containsErrorTarget } = useCellValue(
-    row,
-    col,
-    state.status === "failed" ? state : undefined,
-    dateRenderer,
-  );
-  const register = useNavigationRef<HTMLButtonElement>(navigation, rowKey, colKey);
-  const baseline: DateTimeDraft = {
-    day: toCalendarDate(current, timeZone)?.toString() ?? null,
-    time: toTimeText(current, timeZone) || null,
-  };
-  const [open, setOpen] = useState(false);
-  const differs = (a: DateTimeDraft, b: DateTimeDraft) =>
-    a.day !== b.day || (withTime && a.time !== b.time);
-  const notifyDraft = (next: DateTimeDraft) => change(withTime ? { ...next } : next.day);
-  const setDraft = (next: DateTimeDraft) => {
-    const active = session.getState();
-    const previous = active.status === "idle" ? baseline : active.draft;
-    if (!differs(previous, next)) {
-      session.begin(next);
-      return;
-    }
-    session.change(next, () => notifyDraft(next));
-  };
-  const cancelEditing = () => {
-    const active = session.getState();
-    session.cancel(
-      active.status !== "idle" && differs(active.draft, baseline)
-        ? () => notifyDraft(baseline)
-        : undefined,
-    );
-    setOpen(false);
-  };
-  const finish = (next: string | null) => {
-    session.confirm(
-      () => (sameDate(next, current, withTime, timeZone) ? undefined : commit(next)),
-      () => setOpen(false),
-    );
-  };
-  const activeDraft = state.status === "idle" ? baseline : state.draft;
-  const pickedDay = toCalendarDate(activeDraft.day, timeZone);
-  const timestamp =
-    withTime && pickedDay && activeDraft.time
-      ? toIsoDateTime(pickedDay, activeDraft.time, timeZone)
-      : undefined;
-  const draftDisplay = withTime
-    ? `${activeDraft.day ?? "—"} ${activeDraft.time ?? "—"}`
-    : (activeDraft.day ?? "—");
-  const visibleDisplay = state.status === "idle" ? display : draftDisplay;
-  // The trigger's accessible name carries the date hidden in the visual display.
-  const accessibleName = typeof visibleDisplay === "string" ? `${label}, ${visibleDisplay}` : label;
-
-  const handleOpenChange = (next: boolean, details?: Popover.Root.ChangeEventDetails) => {
-    if (
-      !next &&
-      details &&
-      (containsErrorTarget(details.event.target) ||
-        ("relatedTarget" in details.event &&
-          containsErrorTarget(details.event.relatedTarget as EventTarget | null)))
-    ) {
-      details.cancel();
-      return;
-    }
-    if (next) {
-      session.begin(baseline);
-    } else {
-      const active = session.getState();
-      if (
-        details?.reason === "escape-key" ||
-        (active.status !== "failed" && active.status !== "confirming")
-      ) {
-        cancelEditing();
-        return;
-      }
-    }
-    setOpen(next);
-  };
-
-  const handlePick = (day: CalendarDate) => {
-    const active = session.getState();
-    setDraft({ ...(active.status === "idle" ? baseline : active.draft), day: day.toString() });
-    if (!withTime) finish(day.toString());
-  };
-
-  return (
-    <EditableCellFrame
-      cellProps={cellProps}
-      display={visibleDisplay}
-      truncate={col.truncate}
-      icon={<CalendarDays />}
-      tooltipLabel={tooltipLabel}
-      editing={open}
-      callbackError={callbackError}
-      label={label}
-      onEditorCancel={cancelEditing}
-      getFailure={session.getFailure}
-      confirming={state.status === "confirming"}
-    >
-      <Popover.Root open={open} onOpenChange={handleOpenChange}>
-        <Popover.Trigger
-          ref={register}
-          aria-label={accessibleName}
-          aria-invalid={callbackError ? true : undefined}
-          aria-describedby={callbackError?.id}
-          aria-keyshortcuts={callbackError ? "Alt+ArrowDown" : undefined}
-          className={cn(TRIGGER_CLASS_NAME, callbackError && CELL_ERROR_CLASS_NAME)}
-          onKeyDown={(event) => {
-            if (event.key === "Escape" && !open && session.getState().status !== "idle") {
-              event.preventDefault();
-              event.stopPropagation();
-              cancelEditing();
-              return;
-            }
-            if (event.key === "ArrowDown" && !open) {
-              event.preventDefault();
-              handleOpenChange(true);
-              return;
-            }
-            tabBetweenCells(event, open, navigation, { rowKey, colKey });
-          }}
-        />
-        <Popover.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
-          <Popover.Positioner sideOffset={4} side="bottom" align="start">
-            <Popover.Popup
-              data-slot="data-table-cell-calendar"
-              className={POPUP_CLASS_NAME}
-              onContextMenu={(event) => event.stopPropagation()}
-              onTouchStart={(event) => event.stopPropagation()}
-            >
-              <Calendar
-                aria-label={label}
-                value={pickedDay}
-                defaultFocusedValue={pickedDay ?? undefined}
-                onChange={handlePick}
-              />
-              {withTime && (
-                <Input
-                  type="time"
-                  aria-label={`${label} (${t("chooseTime")})`}
-                  value={activeDraft.time ?? ""}
-                  onChange={(event) =>
-                    setDraft({
-                      ...activeDraft,
-                      time: event.target.value || null,
-                    })
-                  }
-                  className="astw:h-8 astw:text-body-md"
-                />
-              )}
-              <div className="astw:flex astw:justify-between astw:gap-2">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => {
-                    setDraft({ day: null, time: null });
-                    finish(null);
-                  }}
-                >
-                  {t("editClear")}
-                </Button>
-                {withTime && (
-                  <Button
-                    size="sm"
-                    disabled={timestamp === undefined}
-                    onClick={() => {
-                      if (timestamp !== undefined) finish(timestamp);
-                    }}
-                  >
-                    {t("editDone")}
-                  </Button>
-                )}
-              </div>
-            </Popover.Popup>
-          </Popover.Positioner>
-        </Popover.Portal>
-      </Popover.Root>
-    </EditableCellFrame>
-  );
-}
diff --git a/packages/core/src/components/data-table/editing/cell/choice.test.tsx b/packages/core/src/components/data-table/editing/cell/choice.test.tsx
new file mode 100644
index 00000000..b6afaf32
--- /dev/null
+++ b/packages/core/src/components/data-table/editing/cell/choice.test.tsx
@@ -0,0 +1,715 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router";
+import type { ReactNode } from "react";
+import { createAppShellWrapper } from "../../../../../tests/test-utils";
+import { DataTable } from "../../data-table";
+import { useDataTable } from "../../use-data-table";
+import { createColumnHelper } from "../../field-helpers";
+import type { Column } from "../../types";
+import {
+  Harness,
+  LINES,
+  column,
+  noop,
+  receivedColumn,
+  renderTable,
+  skuColumn,
+  type Line,
+  type Update,
+} from "./test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+type Row = { id: string; warehouse: string | null };
+const { column: choiceColumn } = createColumnHelper<Row>();
+const OPTIONS = [
+  { value: "north", label: "North Tokyo DC" },
+  { value: "annex", label: "Tokyo DC Annex" },
+  { value: "tokyo", label: "Tokyo DC" },
+  { value: "extra", label: "Tokyo DC Extra" },
+  { value: "south", label: "South Tokyo DC" },
+  { value: "osaka", label: "Osaka" },
+  { value: "initial", label: "Initial" },
+];
+
+function ChoiceHarness({
+  value = "initial",
+  onDraft,
+  onCommit,
+  badge = false,
+}: {
+  value?: string | null;
+  onDraft: (row: Row, value: string | null) => void;
+  onCommit: (row: Row, value: string | null) => void;
+  badge?: boolean;
+}) {
+  const edit = { options: OPTIONS, onValueChange: onDraft, onValueCommitted: onCommit };
+  const table = useDataTable<Row>({
+    data: {
+      rows: [
+        { id: "1", warehouse: value },
+        { id: "2", warehouse: "initial" },
+      ],
+    },
+    columns: [
+      badge
+        ? choiceColumn({ id: "warehouse", label: "Warehouse", type: "badge", edit })
+        : choiceColumn({ id: "warehouse", label: "Warehouse", type: "text", edit }),
+    ],
+  });
+  return (
+    <DataTable.Root value={table}>
+      <DataTable.Table />
+    </DataTable.Root>
+  );
+}
+
+const AppShellWrapper = createAppShellWrapper("en");
+function Wrapper({ children }: { children: ReactNode }) {
+  return (
+    <MemoryRouter>
+      <AppShellWrapper>{children}</AppShellWrapper>
+    </MemoryRouter>
+  );
+}
+
+function setup({ badge = false }: { badge?: boolean } = {}) {
+  const onDraft = vi.fn();
+  const onCommit = vi.fn();
+  const view = render(<ChoiceHarness onDraft={onDraft} onCommit={onCommit} badge={badge} />, {
+    wrapper: Wrapper,
+  });
+  const user = userEvent.setup();
+  const [input, next] = screen.getAllByRole("combobox", {
+    name: "Warehouse",
+  }) as HTMLInputElement[];
+  const search = async (text: string) => {
+    await user.click(input);
+    await user.clear(input);
+    await user.keyboard(text);
+  };
+  return { user, input, next, onDraft, onCommit, search, ...view };
+}
+
+function hoverOption(item: HTMLElement) {
+  fireEvent.pointerMove(item, { pointerType: "mouse" });
+  // Base UI ignores stationary WebKit mousemoves; happy-dom defaults movement to zero.
+  fireEvent.mouseMove(item, { movementX: 1, movementY: 1 });
+}
+
+describe("DataTable dropdown confirmation", () => {
+  it("ranks exact, prefix, then substring matches, keeping original order within each rank", async () => {
+    const { search, onDraft, onCommit } = setup();
+    await search("Tokyo DC");
+    expect((await screen.findAllByRole("option")).map((item) => item.textContent)).toEqual([
+      "Tokyo DC",
+      "Tokyo DC Annex",
+      "Tokyo DC Extra",
+      "North Tokyo DC",
+      "South Tokyo DC",
+    ]);
+    expect(onDraft).not.toHaveBeenCalled();
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it.each(["Enter", "Tab"])("confirms a fully typed exact label on %s", async (confirmation) => {
+    const { user, input, next, onDraft, onCommit, search } = setup();
+    await search("TOKYO DC");
+    await screen.findByRole("option", { name: "Tokyo DC" });
+    await user.keyboard(`{${confirmation}}`);
+    expect(onDraft).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
+    expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
+    expect(onDraft.mock.invocationCallOrder[0]).toBeLessThan(onCommit.mock.invocationCallOrder[0]);
+    if (confirmation === "Enter") {
+      expect(document.activeElement).toBe(input);
+      expect(input.readOnly).toBe(true);
+      expect(input.closest("td")?.querySelector(":scope > span")?.className).not.toContain(
+        "astw:invisible",
+      );
+    }
+    if (confirmation === "Tab") expect(document.activeElement).toBe(next);
+  });
+
+  it.each(["Enter", "Tab"])(
+    "respects an explicit highlight instead of the exact match on %s",
+    async (confirmation) => {
+      const { user, onDraft, onCommit, search } = setup();
+      await search("Tokyo DC");
+      await screen.findByRole("option", { name: "Tokyo DC" });
+      await user.keyboard("{ArrowDown}");
+      const annex = screen.getByRole("option", { name: "Tokyo DC Annex" });
+      expect(annex.hasAttribute("data-highlighted")).toBe(true);
+      expect(onDraft).not.toHaveBeenCalled();
+      expect(onCommit).not.toHaveBeenCalled();
+      await user.keyboard(`{${confirmation}}`);
+      expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "annex");
+    },
+  );
+
+  describe.each(["outside click", "blur"])("cancelling via %s", (dismissal) => {
+    it.each(["exact label", "keyboard highlight", "hover"])(
+      "discards %s without callbacks and restores the latest data",
+      async (candidate) => {
+        const { user, input, onDraft, onCommit, search, rerender } = setup();
+        await search("Tokyo DC");
+        const annex = await screen.findByRole("option", { name: "Tokyo DC Annex" });
+        if (candidate === "keyboard highlight") await user.keyboard("{ArrowDown}");
+        if (candidate === "hover") hoverOption(annex);
+        if (candidate !== "exact label") {
+          expect(annex.hasAttribute("data-highlighted")).toBe(true);
+        }
+        rerender(<ChoiceHarness value="osaka" onDraft={onDraft} onCommit={onCommit} />);
+        if (dismissal === "outside click") await user.click(document.body);
+        else act(() => input.blur());
+        expect(input.value).toBe("Osaka");
+        expect(input.readOnly).toBe(true);
+        expect(input.getAttribute("aria-expanded")).toBe("false");
+        expect(onDraft).not.toHaveBeenCalled();
+        expect(onCommit).not.toHaveBeenCalled();
+      },
+    );
+  });
+
+  it.each([false, true])(
+    "opens on the first Enter after Tab navigation, including badge=%s",
+    async (badge) => {
+      const { user, input, next, onDraft, onCommit } = setup({ badge });
+      act(() => input.focus());
+      await user.tab();
+      expect(document.activeElement).toBe(next);
+      expect(next.getAttribute("aria-expanded")).toBe("false");
+      await user.keyboard("{Enter}");
+      expect(next.getAttribute("aria-expanded")).toBe("true");
+      expect(next.readOnly).toBe(false);
+      await user.keyboard("{Escape}");
+      await user.tab({ shift: true });
+      expect(document.activeElement).toBe(input);
+      expect(input.getAttribute("aria-expanded")).toBe("false");
+      await user.keyboard("{Enter}");
+      expect(input.getAttribute("aria-expanded")).toBe("true");
+      expect(input.readOnly).toBe(false);
+      expect(onDraft).not.toHaveBeenCalled();
+      expect(onCommit).not.toHaveBeenCalled();
+    },
+  );
+
+  it("does not treat a hovered choice as an explicit Tab selection", async () => {
+    const { user, input, next, onDraft, onCommit } = setup();
+    await user.click(input);
+    const osaka = await screen.findByRole("option", { name: "Osaka" });
+    hoverOption(osaka);
+    expect(osaka.hasAttribute("data-highlighted")).toBe(true);
+    await user.keyboard("{Tab}");
+    expect(document.activeElement).toBe(next);
+    expect(onDraft).not.toHaveBeenCalled();
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it.each(["Enter", "Tab"])(
+    "does not let hover override a ranked search match on %s",
+    async (key) => {
+      const { user, onCommit, search } = setup();
+      await search("Tokyo DC");
+      const annex = await screen.findByRole("option", { name: "Tokyo DC Annex" });
+      hoverOption(annex);
+      expect(annex.hasAttribute("data-highlighted")).toBe(true);
+      await user.keyboard(`{${key}}`);
+      expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
+    },
+  );
+
+  it("does not notify again when a confirmed cell loses focus", async () => {
+    const { user, next, onDraft, onCommit, search } = setup();
+    await search("Tokyo DC");
+    await user.keyboard("{Enter}");
+    await user.click(next);
+    expect(onDraft).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
+    expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
+  });
+
+  it.each(["o", "n", "e", "no", "on"])(
+    "excludes the clearing option while searching for %s",
+    async (text) => {
+      const { user, onCommit, search } = setup();
+      await search(text);
+      expect(screen.queryByRole("option", { name: "None" })).toBeNull();
+      await user.keyboard("{Tab}");
+      expect(onCommit.mock.calls.every(([, value]) => value !== null)).toBe(true);
+    },
+  );
+
+  it("keeps None available for an empty query and notifies before explicitly clearing", async () => {
+    const { user, input, onDraft, onCommit } = setup();
+    await user.click(input);
+    await user.clear(input);
+    await user.click(await screen.findByRole("option", { name: "None" }));
+    expect(onDraft).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, null);
+    expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, null);
+    expect(onDraft.mock.invocationCallOrder[0]).toBeLessThan(onCommit.mock.invocationCallOrder[0]);
+  });
+
+  it.each([false, true])("notifies only a changed selection, including badge=%s", async (badge) => {
+    const { user, input, onDraft, onCommit } = setup({ badge });
+    await user.click(input);
+    await user.click(await screen.findByRole("option", { name: "Initial" }));
+    expect(onDraft).not.toHaveBeenCalled();
+    expect(onCommit).not.toHaveBeenCalled();
+    await user.click(input);
+    await user.click(await screen.findByRole("option", { name: "Osaka" }));
+    expect(onDraft).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "osaka");
+    expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "osaka");
+  });
+
+  it("preserves active search across an external update, then cancels to the latest data without callbacks", async () => {
+    const { user, input, onDraft, onCommit, search, rerender } = setup();
+    await search("Tokyo");
+    rerender(<ChoiceHarness value="osaka" onDraft={onDraft} onCommit={onCommit} />);
+    expect(input.value).toBe("Tokyo");
+    expect(onDraft).not.toHaveBeenCalled();
+    expect(onCommit).not.toHaveBeenCalled();
+    await user.keyboard("{Escape}");
+    expect(input.value).toBe("Osaka");
+    expect(onDraft).not.toHaveBeenCalled();
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it("compares a confirmed selection with the latest data", async () => {
+    const { user, onDraft, onCommit, search, rerender } = setup();
+    await search("Tokyo DC");
+    rerender(<ChoiceHarness value="tokyo" onDraft={onDraft} onCommit={onCommit} />);
+    await user.keyboard("{Enter}");
+    expect(onDraft).not.toHaveBeenCalled();
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it("ends editing on Shift+Enter, and Enter or clicking the focused display starts editing again", async () => {
+    const { user, input, search } = setup();
+    await search("Tokyo DC");
+    await user.keyboard("{Shift>}{Enter}{/Shift}");
+    expect(document.activeElement).toBe(input);
+    expect(input.readOnly).toBe(true);
+    expect(input.getAttribute("aria-expanded")).toBe("false");
+    await user.keyboard("{Enter}");
+    expect(input.readOnly).toBe(false);
+    expect(input.getAttribute("aria-expanded")).toBe("true");
+    await user.keyboard("{Escape}");
+    expect(input.readOnly).toBe(true);
+    await user.click(input);
+    expect(input.readOnly).toBe(false);
+    expect(input.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("does not confirm an IME conversion Enter", async () => {
+    const { user, input, onDraft, onCommit, search } = setup();
+    await search("Tokyo DC");
+    fireEvent.compositionStart(input);
+    fireEvent.keyDown(input, { key: "Enter", isComposing: true });
+    expect(onDraft).not.toHaveBeenCalled();
+    expect(onCommit).not.toHaveBeenCalled();
+    expect(input.readOnly).toBe(false);
+    fireEvent.compositionEnd(input);
+    await user.keyboard("{Enter}");
+    expect(onCommit).toHaveBeenCalledExactlyOnceWith({ id: "1", warehouse: "initial" }, "tokyo");
+  });
+
+  it("keeps the cell context menu available while the dropdown is at rest", async () => {
+    const { input } = setup();
+    fireEvent.contextMenu(input);
+    expect(await screen.findByRole("menuitem", { name: "Copy value" })).toBeDefined();
+  });
+
+  it("preserves native context menus and touch interactions while searching", async () => {
+    const { input, onDraft, onCommit, search } = setup();
+    await search("Tokyo");
+    const contextMenu = new MouseEvent("contextmenu", { bubbles: true, cancelable: true });
+    fireEvent(input, contextMenu);
+    expect(contextMenu.defaultPrevented).toBe(false);
+    expect(screen.queryByRole("menu")).toBeNull();
+    vi.useFakeTimers();
+    fireEvent.touchStart(input, { touches: [{ clientX: 10, clientY: 10 }] });
+    act(() => vi.advanceTimersByTime(600));
+    expect(screen.queryByRole("menu")).toBeNull();
+    expect(input.value).toBe("Tokyo");
+    expect(onDraft).not.toHaveBeenCalled();
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+
+  it("silently discards the search on unmount", async () => {
+    const { search, unmount, onDraft, onCommit } = setup();
+    await search("Tokyo DC");
+    unmount();
+    expect(onDraft).not.toHaveBeenCalled();
+    expect(onCommit).not.toHaveBeenCalled();
+  });
+});
+
+const hasIconSpace = (cell: Element | undefined) =>
+  cell?.querySelector(":scope > span")?.className.includes("astw:pr-5") ?? false;
+
+describe("DataTable inline editing", () => {
+  describe("dropdowns", () => {
+    const SUPPLIERS = [
+      { value: "acme", label: "Acme Corp" },
+      { value: "globex", label: "Globex" },
+    ];
+
+    function supplierColumn(
+      onValueCommitted: (id: string, value: string | null) => void,
+      update: Update,
+    ): Column<Line> {
+      return column({
+        id: "supplier",
+        label: "Supplier",
+        type: "text",
+        edit: {
+          options: SUPPLIERS,
+          onValueCommitted: (row, value) => {
+            onValueCommitted(row.id, value);
+            update(row.id, { supplier: value ?? "" });
+          },
+        },
+      });
+    }
+
+    const rowsWith = (supplier: string) => LINES.map((line) => ({ ...line, supplier }));
+
+    it("shows choice labels and notifies the picked value", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onValueCommitted, update)]}
+        />,
+      );
+      const [trigger] = screen.getAllByRole("combobox", { name: "Supplier" });
+      expect(trigger.closest("td")?.textContent).toContain("Acme Corp");
+      await user.click(trigger);
+      await user.click(await screen.findByRole("option", { name: "Globex" }));
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect(onValueCommitted).toHaveBeenCalledWith("1", "globex");
+      expect(trigger.closest("td")?.textContent).toContain("Globex");
+    });
+
+    it("offers None and notifies null", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onValueCommitted, update)]}
+        />,
+      );
+      await user.click(screen.getAllByRole("combobox", { name: "Supplier" })[0]);
+      await user.click(await screen.findByRole("option", { name: "None" }));
+      expect(onValueCommitted).toHaveBeenCalledWith("1", null);
+    });
+
+    it("uses data as the source of truth when a consumer rejects a pick", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={() => [
+            column({
+              id: "supplier",
+              label: "Supplier",
+              type: "text",
+              edit: { options: SUPPLIERS, onValueCommitted },
+            }),
+          ]}
+        />,
+      );
+      const [trigger] = screen.getAllByRole("combobox", { name: "Supplier" });
+      await user.click(trigger);
+      await user.click(await screen.findByRole("option", { name: "Globex" }));
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect(onValueCommitted).toHaveBeenCalledWith(expect.objectContaining({ id: "1" }), "globex");
+      expect((trigger as HTMLInputElement).value).toBe("Acme Corp");
+      expect(trigger.getAttribute("aria-invalid")).toBeNull();
+    });
+
+    it("filters choices and picks with Enter without moving focus", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onValueCommitted, update)]}
+        />,
+      );
+      const [first] = screen.getAllByRole("combobox", { name: "Supplier" });
+      await user.click(first);
+      await user.clear(first);
+      await user.keyboard("glo");
+      expect((await screen.findAllByRole("option")).map((option) => option.textContent)).toEqual([
+        "Globex",
+      ]);
+      await user.keyboard("{Enter}");
+      expect(onValueCommitted).toHaveBeenCalledExactlyOnceWith("1", "globex");
+      await act(() => new Promise<void>((resolve) => requestAnimationFrame(() => resolve())));
+      expect(first.getAttribute("aria-expanded")).toBe("false");
+      expect((first as HTMLInputElement).value).toBe("Globex");
+      expect(first.getAttribute("enterkeyhint")).toBe("done");
+      expect(document.activeElement).toBe(first);
+    });
+
+    it.each(["{Enter}", "{Shift>}{Enter}{/Shift}"])(
+      "keeps focus on %s when the dropdown is closed",
+      async (key) => {
+        const onValueCommitted = vi.fn();
+        const user = renderTable(
+          <Harness
+            rows={rowsWith("acme")}
+            columns={(update) => [supplierColumn(onValueCommitted, update)]}
+          />,
+        );
+        const [first] = screen.getAllByRole("combobox", { name: "Supplier" });
+        await user.click(first);
+        await user.keyboard(`{Escape}${key}`);
+        expect(document.activeElement).toBe(first);
+        expect(onValueCommitted).not.toHaveBeenCalled();
+      },
+    );
+
+    it("takes the highlighted match on Tab after typing", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onValueCommitted, update)]}
+        />,
+      );
+      const [first, second] = screen.getAllByRole("combobox", { name: "Supplier" });
+      await user.click(first);
+      await user.clear(first);
+      await user.keyboard("glo");
+      await screen.findByRole("option", { name: "Globex" });
+      await user.keyboard("{Tab}");
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect(onValueCommitted).toHaveBeenCalledWith("1", "globex");
+      expect(document.activeElement).toBe(second);
+    });
+
+    it("discards a fully typed label when the user clicks outside the cell", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onValueCommitted, update)]}
+        />,
+      );
+      const [first] = screen.getAllByRole("combobox", { name: "Supplier" });
+      await user.click(first);
+      await user.clear(first);
+      await user.keyboard("GLOBEX");
+      await user.click(document.body);
+      expect(onValueCommitted).not.toHaveBeenCalled();
+      expect((first as HTMLInputElement).value).toBe("Acme Corp");
+    });
+
+    it("says so when nothing matches, and leaves the value alone", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onValueCommitted, update)]}
+        />,
+      );
+      const [first] = screen.getAllByRole("combobox", { name: "Supplier" });
+      await user.click(first);
+      await user.clear(first);
+      await user.keyboard("zzz");
+      expect(await screen.findByText("No matches")).toBeTruthy();
+      await user.click(document.body);
+      expect(onValueCommitted).not.toHaveBeenCalled();
+      expect(first.closest("td")?.textContent).toContain("Acme Corp");
+    });
+
+    it("does not notify when the current choice is picked again", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(onValueCommitted, update)]}
+        />,
+      );
+      await user.click(screen.getAllByRole("combobox", { name: "Supplier" })[0]);
+      await user.click(await screen.findByRole("option", { name: "Acme Corp" }));
+      expect(onValueCommitted).not.toHaveBeenCalled();
+    });
+
+    it("shows a read-only link cell's choice label as the link", () => {
+      renderTable(
+        <Harness
+          rows={rowsWith("globex")}
+          columns={() => [
+            column({
+              id: "supplier",
+              label: "Supplier",
+              type: "link",
+              typeOptions: { href: (row) => `/suppliers/${row.supplier}` },
+              edit: {
+                options: SUPPLIERS,
+                canEdit: (row) => row.id === "1",
+                onValueCommitted: noop,
+              },
+            }),
+          ]}
+        />,
+      );
+      expect(screen.getAllByRole("combobox", { name: "Supplier" })).toHaveLength(1);
+      expect(screen.getAllByRole("link").map((link) => link.textContent)).toEqual([
+        "Globex",
+        "Globex",
+      ]);
+    });
+
+    it("keeps icon space on read-only rows so the column's width never shifts", () => {
+      renderTable(
+        <Harness
+          rows={rowsWith("globex")}
+          columns={() => [
+            skuColumn,
+            column({
+              id: "supplier",
+              label: "Supplier",
+              type: "text",
+              edit: {
+                options: SUPPLIERS,
+                canEdit: (row) => row.id === "1",
+                onValueCommitted: noop,
+              },
+            }),
+          ]}
+        />,
+      );
+      const rows = screen.getAllByRole("row").slice(1);
+      expect(rows.map((row) => hasIconSpace(row.querySelectorAll("td")[1]))).toEqual([
+        true,
+        true,
+        true,
+      ]);
+      expect(hasIconSpace(rows[1].querySelectorAll("td")[0])).toBe(false);
+    });
+
+    it("offers a badge column's labelled values as badges", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={LINES.map((line) => ({ ...line, status: "pending" }))}
+          columns={(update) => [
+            column({
+              id: "status",
+              label: "Status",
+              type: "badge",
+              typeOptions: {
+                badgeLabelMap: { pending: "Pending", received: "Received" },
+                badgeVariantMap: { pending: "outline-neutral", received: "success" },
+              },
+              edit: {
+                onValueCommitted: (row, value) => {
+                  onValueCommitted(row.id, value);
+                  update(row.id, { status: value ?? undefined });
+                },
+              },
+            }),
+          ]}
+        />,
+      );
+      const [trigger] = screen.getAllByRole("combobox", { name: "Status" });
+      await user.click(trigger);
+      const received = await screen.findByRole("option", { name: "Received" });
+      expect(received.querySelector('[data-slot="badge"], .astw\\:inline-flex')).not.toBeNull();
+      await user.click(received);
+      expect(onValueCommitted).toHaveBeenCalledWith("1", "received");
+      expect(trigger.closest("td")?.textContent).toContain("Received");
+    });
+
+    it("keeps enum fallback labels on editable and locked badge cells after selection", async () => {
+      const user = renderTable(
+        <Harness
+          rows={LINES.map((line) => ({ ...line, status: "pending" }))}
+          columns={(update) => [
+            column({
+              id: "status",
+              label: "Status",
+              type: "badge",
+              filter: {
+                field: "status",
+                type: "enum",
+                options: [
+                  { value: "pending", label: "Pending review" },
+                  { value: "qa_approved", label: "Quality approved" },
+                ],
+              },
+              edit: {
+                canEdit: (row) => row.id === "1",
+                onValueCommitted: (row, value) => update(row.id, { status: value ?? undefined }),
+              },
+            }),
+          ]}
+        />,
+      );
+      expect(screen.getAllByText("Pending review")).toHaveLength(3);
+      const input = screen.getByRole("combobox", { name: "Status" });
+      await user.click(input);
+      await user.click(await screen.findByRole("option", { name: "Quality approved" }));
+      expect(input.closest("td")?.textContent).toBe("Quality approved");
+      expect(screen.getAllByText("Pending review")).toHaveLength(2);
+    });
+
+    it("keeps a badge cell with several values read-only", () => {
+      renderTable(
+        <Harness
+          rows={LINES.map((line, i) =>
+            i === 0 ? { ...line, status: ["pending", "partial"] as unknown as string } : line,
+          )}
+          columns={() => [
+            column({
+              id: "status",
+              label: "Status",
+              type: "badge",
+              typeOptions: { badgeLabelMap: { pending: "Pending", partial: "Partial" } },
+              edit: { onValueCommitted: noop },
+            }),
+          ]}
+        />,
+      );
+      expect(screen.queryAllByRole("combobox", { name: "Status" })).toHaveLength(2);
+    });
+
+    it("isn't editable when a badge column has no choices", () => {
+      renderTable(
+        <Harness
+          rows={LINES.map((line) => ({ ...line, status: "pending" }))}
+          columns={() => [
+            column({
+              id: "status",
+              label: "Status",
+              type: "badge",
+              edit: { onValueCommitted: noop },
+            }),
+          ]}
+        />,
+      );
+      expect(screen.queryAllByRole("combobox")).toHaveLength(0);
+    });
+
+    it("moves on with Tab from a closed dropdown", async () => {
+      const user = renderTable(
+        <Harness
+          rows={rowsWith("acme")}
+          columns={(update) => [supplierColumn(vi.fn(), update), receivedColumn(vi.fn(), update)]}
+        />,
+      );
+      const [supplier] = screen.getAllByRole("combobox", { name: "Supplier" });
+      act(() => supplier.focus());
+      await user.tab();
+      expect(document.activeElement).toBe(screen.getAllByRole("textbox", { name: "Received" })[0]);
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/editing/cell/choice.tsx b/packages/core/src/components/data-table/editing/cell/choice.tsx
new file mode 100644
index 00000000..99655f1f
--- /dev/null
+++ b/packages/core/src/components/data-table/editing/cell/choice.tsx
@@ -0,0 +1,385 @@
+import {
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+  type FocusEvent,
+  type MouseEvent,
+  type TouchEvent,
+} from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { isComposing } from "@/lib/is-composing";
+import { BadgeList } from "@/components/badge-list";
+import { ComboboxParts } from "@/components/combobox";
+import { toTextValue } from "../../cell-values";
+import { useDataTableT } from "../../i18n";
+import { useCellEditSession } from "../use-session";
+import {
+  CELL_ERROR_CLASS_NAME,
+  ICON_INPUT_CLASS_NAME,
+  INPUT_CLASS_NAME,
+  EditableCellFrame,
+  columnChoices,
+  useCellValue,
+  useNavigationRef,
+  type EditableColumn,
+  type DataTableEditableCellProps,
+} from "./shared";
+
+type ChoiceColumn<TRow extends Record<string, unknown>> = Extract<
+  EditableColumn<TRow>,
+  { type: "text" | "link" | "badge" }
+>;
+
+/** One dropdown choice; `value: null` is "None". */
+interface Choice {
+  value: string | null;
+  label: string;
+}
+
+type ChoiceDraft = Choice & { notified?: boolean };
+
+// Case- and width-insensitive searching: full-width letters and half-width
+// katakana match their usual forms.
+const searchable = (text: string) => text.normalize("NFKC").toLocaleLowerCase().trim();
+
+const isChoiceEqual = (a: Choice, b: Choice) => a.value === b.value;
+
+const choiceLabel = (choice: Choice) => choice.label;
+
+export function ChoiceEditCell<TRow extends Record<string, unknown>>({
+  row,
+  col,
+  rowKey,
+  colKey,
+  label,
+  align,
+  navigation,
+  cellProps,
+  tooltipLabel,
+}: DataTableEditableCellProps<TRow, ChoiceColumn<TRow>>) {
+  const t = useDataTableT();
+  const session = useCellEditSession<ChoiceDraft>(col.edit?.error !== false);
+  const { state } = session;
+  const { current, display, change, commit, callbackError, containsErrorTarget } = useCellValue(
+    row,
+    col,
+    state.status === "failed" ? state : undefined,
+  );
+  const register = useNavigationRef<HTMLInputElement>(navigation, rowKey, colKey);
+  const value = toTextValue(current);
+  const noneLabel = t("editNone");
+  const choices = columnChoices(col);
+  // Keyed on content: rebuilding columns must not reset the highlight mid-search.
+  const choicesKey = (choices ?? []).map((c) => `${c.value}\u0000${c.label}`).join("\u0001");
+  const items = useMemo<Choice[]>(
+    () => [
+      { value: null, label: noneLabel },
+      ...(choices ?? []).map((c) => ({ value: c.value, label: String(c.label) })),
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `choicesKey` stands for `choices`.
+    [choicesKey, noneLabel],
+  );
+
+  const selected = items.find((item) => item.value === value) ?? null;
+  const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const editing = state.status !== "idle";
+  const activeChoice = state.status === "idle" ? selected : state.draft;
+  // The displayed search text is local while editing, even if consumer data changes.
+  const [query, setQuery] = useState<string | null>(null);
+  // Keep the closing list filtered until its animation completes.
+  const [listQuery, setListQuery] = useState<string | null>(null);
+  const highlightedRef = useRef<Choice | undefined>(undefined);
+  const explicitHighlightRef = useRef<Choice | undefined>(undefined);
+  const composingRef = useRef(false);
+  const selectOnMouseUpRef = useRef(false);
+  const from = { rowKey, colKey };
+
+  const filtered = useMemo(() => {
+    const search = searchable(listQuery ?? "");
+    if (!search) return items;
+    const rank = (item: Choice) => {
+      const text = searchable(item.label);
+      if (text === search) return 0;
+      return text.startsWith(search) ? 1 : 2;
+    };
+    return (
+      items
+        .filter((item) => item.value !== null && searchable(item.label).includes(search))
+        // Sorting is stable, preserving the original order within each rank.
+        .toSorted((left, right) => rank(left) - rank(right))
+    );
+  }, [items, listQuery]);
+
+  const startEditing = () => {
+    session.begin(selected ?? { value, label: value ?? noneLabel });
+    setQuery(selected?.label ?? "");
+    setListQuery(null);
+    highlightedRef.current = undefined;
+    explicitHighlightRef.current = undefined;
+  };
+
+  const closeEditor = () => {
+    setQuery(null);
+    explicitHighlightRef.current = undefined;
+    setOpen(false);
+  };
+
+  const cancelEditing = () => {
+    const active = session.getState();
+    session.cancel(
+      active.status !== "idle" && active.draft.notified && active.draft.value !== value
+        ? () => change(value)
+        : undefined,
+    );
+    closeEditor();
+  };
+
+  const leaveEditor = () => {
+    const active = session.getState();
+    if (active.status === "failed" || active.status === "confirming") closeEditor();
+    else cancelEditing();
+  };
+
+  const pick = (item: Choice) => {
+    const active = session.getState();
+    if (active.status === "confirming" && active.draft.value === item.value) return;
+    session.change(
+      { ...item, notified: item.value !== value },
+      item.value !== value ? () => change(item.value) : undefined,
+    );
+    setQuery(item.label);
+    session.confirm(() => (item.value !== value ? commit(item.value) : undefined), closeEditor);
+  };
+
+  const explicitCandidate = () => {
+    const item = explicitHighlightRef.current;
+    return item && filtered.includes(item) ? item : undefined;
+  };
+
+  const keyboardCandidate = () => {
+    const highlighted = highlightedRef.current;
+    return (
+      explicitCandidate() ??
+      (highlighted && filtered.includes(highlighted) ? highlighted : filtered[0])
+    );
+  };
+
+  const handleKeyDown: NonNullable<ComponentProps<typeof ComboboxParts.Input>["onKeyDown"]> = (
+    event,
+  ) => {
+    if (isComposing(event.nativeEvent, composingRef.current)) {
+      event.preventBaseUIHandler();
+      return;
+    }
+    switch (event.key) {
+      case "Enter": {
+        event.preventDefault();
+        event.preventBaseUIHandler();
+        const active = session.getState();
+        if (active.status === "confirming") return;
+        if (!open) {
+          if (active.status === "failed" && active.source === "commit") {
+            session.confirm(
+              () => (active.draft.value !== value ? commit(active.draft.value) : undefined),
+              closeEditor,
+            );
+            return;
+          }
+          if (active.status === "idle") startEditing();
+          setOpen(true);
+          return;
+        }
+        const item = keyboardCandidate();
+        if (item) pick(item);
+        else leaveEditor();
+        return;
+      }
+      case "Tab": {
+        event.preventBaseUIHandler();
+        const item =
+          session.getState().status !== "idle" && open
+            ? (explicitCandidate() ??
+              (searchable(listQuery ?? "") ? keyboardCandidate() : undefined))
+            : undefined;
+        if (item) pick(item);
+        else leaveEditor();
+        if (navigation.move(from, event.shiftKey ? "prev" : "next")) event.preventDefault();
+        return;
+      }
+      case "Escape":
+        if (session.getState().status === "idle" && !open) return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.preventBaseUIHandler();
+        cancelEditing();
+        return;
+    }
+  };
+
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+    const withinCell = focused || containsErrorTarget(event.relatedTarget);
+    setFocused(true);
+    if (withinCell) return;
+    if (session.getState().status === "idle") startEditing();
+    event.currentTarget.select();
+  };
+
+  const handleBlur = () => {
+    setFocused(false);
+    leaveEditor();
+  };
+
+  const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {
+    if (event.button === 2 && session.getState().status === "idle") {
+      event.preventDefault();
+      return;
+    }
+    if (session.getState().status === "idle") {
+      startEditing();
+      setOpen(true);
+    }
+    if (!focused) selectOnMouseUpRef.current = true;
+  };
+
+  const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {
+    if (!selectOnMouseUpRef.current) return;
+    selectOnMouseUpRef.current = false;
+    event.preventDefault();
+  };
+
+  const stopWhileEditing = (event: MouseEvent | TouchEvent) => {
+    if (session.getState().status !== "idle") event.stopPropagation();
+  };
+
+  const renderChoice = (item: Choice) => {
+    if (item.value === null)
+      return <span className="astw:text-muted-foreground">{item.label}</span>;
+    if (col.type !== "badge") return item.label;
+    return (
+      <BadgeList value={item.value} options={col.typeOptions} resolveLabel={() => item.label} />
+    );
+  };
+
+  return (
+    <EditableCellFrame
+      cellProps={cellProps}
+      display={display}
+      truncate={col.truncate}
+      hideDisplay={editing ? "focused" : "forced-colors"}
+      icon={<ChevronDown />}
+      tooltipLabel={tooltipLabel}
+      editing={editing}
+      callbackError={callbackError}
+      label={label}
+      onEditorLeave={handleBlur}
+      onEditorCancel={cancelEditing}
+      getFailure={session.getFailure}
+      confirming={state.status === "confirming"}
+    >
+      <BaseCombobox.Root<Choice>
+        items={items}
+        filteredItems={filtered}
+        value={activeChoice}
+        onValueChange={(item, details) => {
+          if (details.reason === "item-press" && item) pick(item);
+        }}
+        inputValue={query ?? activeChoice?.label ?? ""}
+        onInputValueChange={(next, details) => {
+          if (details.reason === "input-change" || details.reason === "input-clear") {
+            const active = session.getState();
+            session.change(
+              active.status === "idle"
+                ? (selected ?? { value, label: value ?? noneLabel })
+                : active.draft,
+            );
+            setQuery(next);
+            setListQuery(next);
+            explicitHighlightRef.current = undefined;
+          }
+        }}
+        open={open}
+        onOpenChange={(next, details) => {
+          if (next) {
+            if (session.getState().status === "idle") startEditing();
+            setOpen(true);
+            if (details.reason !== "input-change") setListQuery(null);
+            return;
+          }
+          if (
+            containsErrorTarget(details.event.target) ||
+            ("relatedTarget" in details.event &&
+              containsErrorTarget(details.event.relatedTarget as EventTarget | null))
+          ) {
+            details.cancel();
+            return;
+          }
+          // Clearing search text is not selection or cancellation.
+          if (details.reason === "input-clear") {
+            setOpen(false);
+            return;
+          }
+          if (details.reason === "escape-key") cancelEditing();
+          else leaveEditor();
+        }}
+        onOpenChangeComplete={(isOpen) => {
+          if (!isOpen) setListQuery(null);
+        }}
+        onItemHighlighted={(item, details) => {
+          // Hover is visual feedback, not a keyboard confirmation candidate.
+          if (details.reason === "pointer") return;
+          highlightedRef.current = item;
+          if (item && details.reason === "keyboard") explicitHighlightRef.current = item;
+        }}
+        autoHighlight
+        itemToStringLabel={choiceLabel}
+        isItemEqualToValue={isChoiceEqual}
+      >
+        <ComboboxParts.Input
+          ref={register}
+          aria-label={label}
+          aria-invalid={callbackError ? true : undefined}
+          aria-describedby={callbackError?.id}
+          aria-keyshortcuts={callbackError ? "Alt+ArrowDown" : undefined}
+          autoComplete="off"
+          enterKeyHint="done"
+          readOnly={!editing}
+          className={cn(
+            INPUT_CLASS_NAME,
+            ICON_INPUT_CLASS_NAME,
+            !editing && "astw:text-transparent astw:cursor-pointer",
+            align === "right" && "astw:text-right",
+            callbackError && CELL_ERROR_CLASS_NAME,
+          )}
+          onKeyDown={handleKeyDown}
+          onFocus={handleFocus}
+          onMouseDown={handleMouseDown}
+          onMouseUp={handleMouseUp}
+          onContextMenu={stopWhileEditing}
+          onTouchStart={stopWhileEditing}
+          style={editing ? { WebkitTouchCallout: "default" } : undefined}
+          onCompositionStart={() => {
+            composingRef.current = true;
+          }}
+          onCompositionEnd={() => {
+            composingRef.current = false;
+          }}
+        />
+        {/* At least as wide as the cell, and wide enough that choices don't wrap. */}
+        <ComboboxParts.Content className="astw:w-max astw:min-w-(--anchor-width) astw:max-w-80">
+          <ComboboxParts.Empty>{t("editNoMatches")}</ComboboxParts.Empty>
+          <ComboboxParts.List>
+            {(item: Choice) => (
+              <ComboboxParts.Item key={item.value ?? "\u0000none"} value={item}>
+                {renderChoice(item)}
+              </ComboboxParts.Item>
+            )}
+          </ComboboxParts.List>
+        </ComboboxParts.Content>
+      </BaseCombobox.Root>
+    </EditableCellFrame>
+  );
+}
diff --git a/packages/core/src/components/data-table/data-table-datetime.test.tsx b/packages/core/src/components/data-table/editing/cell/date.test.tsx
similarity index 66%
rename from packages/core/src/components/data-table/data-table-datetime.test.tsx
rename to packages/core/src/components/data-table/editing/cell/date.test.tsx
index a6ef3732..e6b3ceed 100644
--- a/packages/core/src/components/data-table/data-table-datetime.test.tsx
+++ b/packages/core/src/components/data-table/editing/cell/date.test.tsx
@@ -4,17 +4,20 @@ import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import { MemoryRouter } from "react-router";
 import { AppShellConfigContext, buildConfigurations } from "@/contexts/appshell-context";
-import { DataTable } from "./data-table";
-import { useDataTable } from "./use-data-table";
-import { createColumnHelper } from "./field-helpers";
+import { DataTable } from "../../data-table";
+import { useDataTable } from "../../use-data-table";
+import { createColumnHelper } from "../../field-helpers";
+import type { Column } from "../../types";
+import { Harness, LINES, column, noop, renderTable, type Line, type Update } from "./test-utils";
 
 afterEach(() => {
   cleanup();
   vi.useRealTimers();
+  vi.restoreAllMocks();
 });
 
 type Row = { id: string; expected: string | null };
-const { column } = createColumnHelper<Row>();
+const { column: dateColumn } = createColumnHelper<Row>();
 const configurations = buildConfigurations({ modules: [], locale: "en", timeZone: "Asia/Tokyo" });
 
 function Wrapper({ children }: { children: ReactNode }) {
@@ -25,7 +28,7 @@ function Wrapper({ children }: { children: ReactNode }) {
   );
 }
 
-function Harness({
+function DateHarness({
   value,
   datetime,
   onValueChange,
@@ -38,7 +41,7 @@ function Harness({
 }) {
   const table = useDataTable<Row>({
     columns: [
-      column({
+      dateColumn({
         id: "expected",
         label: "Expected",
         type: "date",
@@ -60,13 +63,13 @@ function setup(value: string | null = "2026-10-02T00:00:00.000Z", datetime = tru
   const onValueChange = vi.fn();
   const onValueCommitted = vi.fn();
   const props = { value, datetime, onValueChange, onValueCommitted };
-  const result = render(<Harness {...props} />, { wrapper: Wrapper });
+  const result = render(<DateHarness {...props} />, { wrapper: Wrapper });
   return {
     user,
     onValueChange,
     onValueCommitted,
     unmount: result.unmount,
-    update: (next: string | null) => result.rerender(<Harness {...props} value={next} />),
+    update: (next: string | null) => result.rerender(<DateHarness {...props} value={next} />),
   };
 }
 
@@ -292,3 +295,151 @@ describe("DataTable date-time drafts", () => {
     );
   });
 });
+
+describe("DataTable inline editing", () => {
+  describe("dates", () => {
+    const dateRows = LINES.map((line) => ({ ...line, expected: "2026-10-02" }));
+
+    function expectedColumn(
+      onValueCommitted: (id: string, value: string | null) => void,
+      update: Update,
+      datetime = false,
+    ): Column<Line> {
+      return column({
+        id: "expected",
+        label: "Expected",
+        type: "date",
+        typeOptions: { dateFormat: datetime ? "datetime" : "short" },
+        edit: {
+          onValueCommitted: (row, value) => {
+            onValueCommitted(row.id, value);
+            update(row.id, { expected: value });
+          },
+        },
+      });
+    }
+
+    it("shows a date-only value as that day in any time zone", () => {
+      const tz = process.env.TZ;
+      process.env.TZ = "America/Los_Angeles";
+      try {
+        renderTable(
+          <Harness
+            rows={dateRows}
+            columns={() => [
+              column({
+                id: "expected",
+                label: "Expected",
+                type: "date",
+                typeOptions: { locale: "en-US" },
+              }),
+            ]}
+          />,
+        );
+        expect(screen.getAllByText("Oct 2, 2026")).toHaveLength(3);
+      } finally {
+        process.env.TZ = tz;
+      }
+    });
+
+    it("names the date trigger with its current value", () => {
+      renderTable(
+        <Harness
+          rows={dateRows}
+          columns={() => [
+            column({
+              id: "expected",
+              label: "Expected",
+              type: "date",
+              typeOptions: { locale: "en-US" },
+              edit: { onValueCommitted: noop },
+            }),
+          ]}
+        />,
+      );
+      expect(screen.getAllByRole("button", { name: "Expected, Oct 2, 2026" })).toHaveLength(3);
+    });
+
+    it("notifies a picked day as YYYY-MM-DD", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={dateRows}
+          columns={(update) => [expectedColumn(onValueCommitted, update)]}
+        />,
+      );
+      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
+      await user.click(dayButton("15"));
+      expect(onValueCommitted).toHaveBeenCalledWith("1", "2026-10-15");
+    });
+
+    it("clears a date to null", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={dateRows}
+          columns={(update) => [expectedColumn(onValueCommitted, update)]}
+        />,
+      );
+      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
+      await user.click(screen.getByRole("button", { name: "Clear" }));
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect(onValueCommitted).toHaveBeenCalledWith("1", null);
+    });
+
+    it("uses data when the consumer rejects a date change", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={dateRows}
+          columns={() => [
+            column({ id: "expected", label: "Expected", type: "date", edit: { onValueCommitted } }),
+          ]}
+        />,
+      );
+      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
+      await user.click(dayButton("15"));
+      expect(onValueCommitted).toHaveBeenCalledWith(
+        expect.objectContaining({ id: "1" }),
+        "2026-10-15",
+      );
+      expect(screen.getAllByRole("button", { name: "Expected, Oct 2, 2026" })).toHaveLength(3);
+    });
+
+    it("notifies a date-time as ISO only when Done is pressed", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={dateRows}
+          columns={(update) => [expectedColumn(onValueCommitted, update, true)]}
+        />,
+      );
+      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
+      await user.click(dayButton("20"));
+      fireEvent.change(screen.getByLabelText("Expected (Choose time)"), {
+        target: { value: "14:30" },
+      });
+      expect(onValueCommitted).not.toHaveBeenCalled();
+      await user.click(screen.getByRole("button", { name: "Done" }));
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect(onValueCommitted).toHaveBeenCalledWith(
+        "1",
+        new Date(2026, 9, 20, 14, 30).toISOString(),
+      );
+    });
+
+    it("abandons a date-time draft when the calendar closes with Escape", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={dateRows}
+          columns={(update) => [expectedColumn(onValueCommitted, update, true)]}
+        />,
+      );
+      await user.click(screen.getAllByRole("button", { name: /^Expected/ })[0]);
+      await user.click(dayButton("20"));
+      await user.keyboard("{Escape}");
+      expect(onValueCommitted).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/editing/cell/date.tsx b/packages/core/src/components/data-table/editing/cell/date.tsx
new file mode 100644
index 00000000..eacb88bc
--- /dev/null
+++ b/packages/core/src/components/data-table/editing/cell/date.tsx
@@ -0,0 +1,246 @@
+import { useState, type KeyboardEvent } from "react";
+import { Popover } from "@base-ui/react/popover";
+import type { CalendarDate } from "@internationalized/date";
+import { CalendarDays } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTimeZone } from "@/contexts/appshell-context";
+import { Button } from "@/components/button";
+import { Calendar } from "@/components/calendar";
+import { Input } from "@/components/input";
+import type { DateTimeDraft } from "../../types";
+import { sameDate, toCalendarDate, toIsoDateTime, toTimeText } from "../../cell-values";
+import { useDataTableT } from "../../i18n";
+import type { CellEditNavigation } from "../use-navigation";
+import { useCellEditSession } from "../use-session";
+import {
+  OVERLAY_CLASS_NAME,
+  CELL_FOCUS_CLASS_NAME,
+  CELL_ERROR_CLASS_NAME,
+  POPUP_CLASS_NAME,
+  EditableCellFrame,
+  useCellValue,
+  useNavigationRef,
+  type EditableColumn,
+  type DataTableEditableCellProps,
+} from "./shared";
+
+type DateColumn<TRow extends Record<string, unknown>> = Extract<
+  EditableColumn<TRow>,
+  { type: "date" }
+>;
+
+// Date cells: a transparent button over the cell's own display, with a pointer.
+const TRIGGER_CLASS_NAME = cn(
+  OVERLAY_CLASS_NAME,
+  CELL_FOCUS_CLASS_NAME,
+  "astw:cursor-pointer",
+  "astw:data-popup-open:ring-2 astw:data-popup-open:ring-inset astw:data-popup-open:ring-primary",
+);
+
+// Tab / Shift+Tab from a closed calendar moves between editable cells, the
+// same way it does from a typing cell.
+function tabBetweenCells(
+  event: KeyboardEvent<HTMLElement>,
+  open: boolean,
+  navigation: CellEditNavigation,
+  from: { rowKey: string; colKey: string },
+) {
+  if (event.key !== "Tab" || open) return;
+  if (navigation.move(from, event.shiftKey ? "prev" : "next")) event.preventDefault();
+}
+
+export function DateEditCell<TRow extends Record<string, unknown>>({
+  row,
+  col,
+  rowKey,
+  colKey,
+  label,
+  navigation,
+  cellProps,
+  tooltipLabel,
+  dateRenderer,
+}: DataTableEditableCellProps<TRow, DateColumn<TRow>>) {
+  const t = useDataTableT();
+  const { value: timeZone } = useTimeZone();
+  const withTime = col.typeOptions?.dateFormat === "datetime";
+  const session = useCellEditSession<DateTimeDraft>(col.edit?.error !== false);
+  const { state } = session;
+  const { current, display, change, commit, callbackError, containsErrorTarget } = useCellValue(
+    row,
+    col,
+    state.status === "failed" ? state : undefined,
+    dateRenderer,
+  );
+  const register = useNavigationRef<HTMLButtonElement>(navigation, rowKey, colKey);
+  const baseline: DateTimeDraft = {
+    day: toCalendarDate(current, timeZone)?.toString() ?? null,
+    time: toTimeText(current, timeZone) || null,
+  };
+  const [open, setOpen] = useState(false);
+  const differs = (a: DateTimeDraft, b: DateTimeDraft) =>
+    a.day !== b.day || (withTime && a.time !== b.time);
+  const notifyDraft = (next: DateTimeDraft) => change(withTime ? { ...next } : next.day);
+  const setDraft = (next: DateTimeDraft) => {
+    const active = session.getState();
+    const previous = active.status === "idle" ? baseline : active.draft;
+    if (!differs(previous, next)) {
+      session.begin(next);
+      return;
+    }
+    session.change(next, () => notifyDraft(next));
+  };
+  const cancelEditing = () => {
+    const active = session.getState();
+    session.cancel(
+      active.status !== "idle" && differs(active.draft, baseline)
+        ? () => notifyDraft(baseline)
+        : undefined,
+    );
+    setOpen(false);
+  };
+  const finish = (next: string | null) => {
+    session.confirm(
+      () => (sameDate(next, current, withTime, timeZone) ? undefined : commit(next)),
+      () => setOpen(false),
+    );
+  };
+  const activeDraft = state.status === "idle" ? baseline : state.draft;
+  const pickedDay = toCalendarDate(activeDraft.day, timeZone);
+  const timestamp =
+    withTime && pickedDay && activeDraft.time
+      ? toIsoDateTime(pickedDay, activeDraft.time, timeZone)
+      : undefined;
+  const draftDisplay = withTime
+    ? `${activeDraft.day ?? "—"} ${activeDraft.time ?? "—"}`
+    : (activeDraft.day ?? "—");
+  const visibleDisplay = state.status === "idle" ? display : draftDisplay;
+  // The trigger's accessible name carries the date hidden in the visual display.
+  const accessibleName = typeof visibleDisplay === "string" ? `${label}, ${visibleDisplay}` : label;
+
+  const handleOpenChange = (next: boolean, details?: Popover.Root.ChangeEventDetails) => {
+    if (
+      !next &&
+      details &&
+      (containsErrorTarget(details.event.target) ||
+        ("relatedTarget" in details.event &&
+          containsErrorTarget(details.event.relatedTarget as EventTarget | null)))
+    ) {
+      details.cancel();
+      return;
+    }
+    if (next) {
+      session.begin(baseline);
+    } else {
+      const active = session.getState();
+      if (
+        details?.reason === "escape-key" ||
+        (active.status !== "failed" && active.status !== "confirming")
+      ) {
+        cancelEditing();
+        return;
+      }
+    }
+    setOpen(next);
+  };
+
+  const handlePick = (day: CalendarDate) => {
+    const active = session.getState();
+    setDraft({ ...(active.status === "idle" ? baseline : active.draft), day: day.toString() });
+    if (!withTime) finish(day.toString());
+  };
+
+  return (
+    <EditableCellFrame
+      cellProps={cellProps}
+      display={visibleDisplay}
+      truncate={col.truncate}
+      icon={<CalendarDays />}
+      tooltipLabel={tooltipLabel}
+      editing={open}
+      callbackError={callbackError}
+      label={label}
+      onEditorCancel={cancelEditing}
+      getFailure={session.getFailure}
+      confirming={state.status === "confirming"}
+    >
+      <Popover.Root open={open} onOpenChange={handleOpenChange}>
+        <Popover.Trigger
+          ref={register}
+          aria-label={accessibleName}
+          aria-invalid={callbackError ? true : undefined}
+          aria-describedby={callbackError?.id}
+          aria-keyshortcuts={callbackError ? "Alt+ArrowDown" : undefined}
+          className={cn(TRIGGER_CLASS_NAME, callbackError && CELL_ERROR_CLASS_NAME)}
+          onKeyDown={(event) => {
+            if (event.key === "Escape" && !open && session.getState().status !== "idle") {
+              event.preventDefault();
+              event.stopPropagation();
+              cancelEditing();
+              return;
+            }
+            if (event.key === "ArrowDown" && !open) {
+              event.preventDefault();
+              handleOpenChange(true);
+              return;
+            }
+            tabBetweenCells(event, open, navigation, { rowKey, colKey });
+          }}
+        />
+        <Popover.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
+          <Popover.Positioner sideOffset={4} side="bottom" align="start">
+            <Popover.Popup
+              data-slot="data-table-cell-calendar"
+              className={POPUP_CLASS_NAME}
+              onContextMenu={(event) => event.stopPropagation()}
+              onTouchStart={(event) => event.stopPropagation()}
+            >
+              <Calendar
+                aria-label={label}
+                value={pickedDay}
+                defaultFocusedValue={pickedDay ?? undefined}
+                onChange={handlePick}
+              />
+              {withTime && (
+                <Input
+                  type="time"
+                  aria-label={`${label} (${t("chooseTime")})`}
+                  value={activeDraft.time ?? ""}
+                  onChange={(event) =>
+                    setDraft({
+                      ...activeDraft,
+                      time: event.target.value || null,
+                    })
+                  }
+                  className="astw:h-8 astw:text-body-md"
+                />
+              )}
+              <div className="astw:flex astw:justify-between astw:gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    setDraft({ day: null, time: null });
+                    finish(null);
+                  }}
+                >
+                  {t("editClear")}
+                </Button>
+                {withTime && (
+                  <Button
+                    size="sm"
+                    disabled={timestamp === undefined}
+                    onClick={() => {
+                      if (timestamp !== undefined) finish(timestamp);
+                    }}
+                  >
+                    {t("editDone")}
+                  </Button>
+                )}
+              </div>
+            </Popover.Popup>
+          </Popover.Positioner>
+        </Popover.Portal>
+      </Popover.Root>
+    </EditableCellFrame>
+  );
+}
diff --git a/packages/core/src/components/data-table/data-table-drafts.test.tsx b/packages/core/src/components/data-table/editing/cell/drafts.test.tsx
similarity index 97%
rename from packages/core/src/components/data-table/data-table-drafts.test.tsx
rename to packages/core/src/components/data-table/editing/cell/drafts.test.tsx
index 5b0a50d1..0348a39c 100644
--- a/packages/core/src/components/data-table/data-table-drafts.test.tsx
+++ b/packages/core/src/components/data-table/editing/cell/drafts.test.tsx
@@ -9,10 +9,10 @@ import type {
   NumberCellEditOptions,
   TextCellEditOptions,
 } from "@/index";
-import { createAppShellWrapper } from "../../../tests/test-utils";
-import { DataTable } from "./data-table";
-import { useDataTable } from "./use-data-table";
-import type { Column } from "./types";
+import { createAppShellWrapper } from "../../../../../tests/test-utils";
+import { DataTable } from "../../data-table";
+import { useDataTable } from "../../use-data-table";
+import type { Column } from "../../types";
 
 afterEach(cleanup);
 
diff --git a/packages/core/src/components/data-table/data-table-errors.test.tsx b/packages/core/src/components/data-table/editing/cell/errors.test.tsx
similarity index 99%
rename from packages/core/src/components/data-table/data-table-errors.test.tsx
rename to packages/core/src/components/data-table/editing/cell/errors.test.tsx
index 4f6ad8ce..81b958a1 100644
--- a/packages/core/src/components/data-table/data-table-errors.test.tsx
+++ b/packages/core/src/components/data-table/editing/cell/errors.test.tsx
@@ -4,10 +4,10 @@ import { act, cleanup, fireEvent, render, screen, within } from "@testing-librar
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router";
 import { CellEditError, type TextCellEditOptions } from "@/index";
-import { createAppShellWrapper } from "../../../tests/test-utils";
-import { DataTable } from "./data-table";
-import { useDataTable } from "./use-data-table";
-import type { Column } from "./types";
+import { createAppShellWrapper } from "../../../../../tests/test-utils";
+import { DataTable } from "../../data-table";
+import { useDataTable } from "../../use-data-table";
+import type { Column } from "../../types";
 
 afterEach(() => {
   cleanup();
diff --git a/packages/core/src/components/data-table/editing/cell/root.test.tsx b/packages/core/src/components/data-table/editing/cell/root.test.tsx
new file mode 100644
index 00000000..ab10ed55
--- /dev/null
+++ b/packages/core/src/components/data-table/editing/cell/root.test.tsx
@@ -0,0 +1,420 @@
+import { afterEach, describe, expect, expectTypeOf, it, vi } from "vitest";
+import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Link, createMemoryRouter } from "react-router";
+import { RouterProvider } from "react-router/dom";
+import { useState } from "react";
+import { createAppShellWrapper } from "../../../../../tests/test-utils";
+import type { CellEditState } from "../../types";
+import {
+  Harness,
+  LINES,
+  column,
+  noop,
+  receivedColumn,
+  renderTable,
+  retype,
+  skuColumn,
+  type Line,
+} from "./test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function renderInAppRouter(ui: React.ReactElement) {
+  const user = userEvent.setup();
+  const router = createMemoryRouter([
+    {
+      path: "/",
+      element: (
+        <>
+          {ui}
+          <Link to="/elsewhere">Elsewhere</Link>
+        </>
+      ),
+    },
+    { path: "/elsewhere", element: <p>Somewhere else</p> },
+  ]);
+  render(<RouterProvider router={router} />, { wrapper: createAppShellWrapper("en") });
+  return user;
+}
+
+function wouldWarnOnUnload() {
+  const event = new Event("beforeunload", { cancelable: true });
+  window.dispatchEvent(event);
+  return event.defaultPrevented;
+}
+
+const blocked = (cell: Element | null | undefined) =>
+  cell?.className.includes("astw:cursor-not-allowed") ?? false;
+
+describe("DataTable inline editing", () => {
+  describe("rendering", () => {
+    it("renders an editor only where canEdit allows it, named by the column label", () => {
+      renderTable(
+        <Harness
+          columns={(update) => [
+            skuColumn,
+            receivedColumn(vi.fn(), update, { canEdit: (row) => row.id !== "2" }),
+          ]}
+        />,
+      );
+      const inputs = screen.getAllByRole("textbox", { name: "Received" });
+      expect(inputs).toHaveLength(2);
+      expect(inputs.map((input) => (input as HTMLInputElement).value)).toEqual(["12", "10"]);
+      expect(screen.queryByRole("textbox", { name: "SKU" })).toBeNull();
+    });
+
+    it("keeps an editable link cell as text and a read-only one as a link", () => {
+      renderTable(
+        <Harness
+          columns={() => [
+            column({
+              id: "supplier",
+              label: "Supplier",
+              type: "link",
+              typeOptions: { href: (row) => `/suppliers/${row.supplier}` },
+              edit: { canEdit: (row) => row.id === "1", onValueCommitted: noop },
+            }),
+          ]}
+        />,
+      );
+      expect(screen.getAllByRole("textbox", { name: "Supplier" })).toHaveLength(1);
+      expect(screen.getAllByRole("link").map((link) => link.textContent)).toEqual([
+        "Globex",
+        "Acme",
+      ]);
+    });
+
+    it("keeps rows without an id read-only and warns once", () => {
+      const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+      renderTable(
+        <Harness
+          rows={LINES.map(({ id: _id, ...rest }) => rest as unknown as Line)}
+          columns={(update) => [receivedColumn(vi.fn(), update)]}
+        />,
+      );
+      expect(screen.queryAllByRole("textbox")).toHaveLength(0);
+      expect(warn).toHaveBeenCalledTimes(1);
+      expect(warn.mock.calls[0][0]).toContain("has no `id`");
+    });
+
+    it("uses typeOptions for display precision", async () => {
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            column({
+              id: "received",
+              label: "Received",
+              type: "number",
+              typeOptions: { maxDecimals: 2 },
+              edit: { onValueCommitted: (row, value) => update(row.id, { received: value }) },
+            }),
+          ]}
+        />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "2.5{Enter}");
+      expect(input.parentElement?.textContent).toContain("2.5");
+    });
+  });
+
+  describe("interplay", () => {
+    it("lets canEdit follow row selection", async () => {
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            receivedColumn(vi.fn(), update, { canEdit: (_, { selected }) => selected }),
+          ]}
+          options={{ rowSelection: {} }}
+        />,
+      );
+      expect(screen.queryAllByRole("textbox")).toHaveLength(0);
+      const [selectFirst] = screen.getAllByRole("checkbox", { name: "Select row" });
+      await user.click(selectFirst);
+      expect(screen.getAllByRole("textbox", { name: "Received" })).toHaveLength(1);
+      await user.click(selectFirst);
+      expect(screen.queryAllByRole("textbox")).toHaveLength(0);
+    });
+
+    it("updates editability when controlled selected ids change externally", async () => {
+      function ControlledSelection() {
+        const [selectedIds, setSelectedIds] = useState(["2"]);
+        return (
+          <>
+            <button onClick={() => setSelectedIds(["1"])}>Select first externally</button>
+            <Harness
+              columns={(update) => [
+                skuColumn,
+                receivedColumn(vi.fn(), update, { canEdit: (_, { selected }) => selected }),
+              ]}
+              options={{ rowSelection: { selectedIds, onChange: setSelectedIds } }}
+            />
+          </>
+        );
+      }
+      const user = renderTable(<ControlledSelection />);
+      const firstRow = screen.getByText("TS-M").closest("tr")!;
+      const secondRow = screen.getByText("TS-L").closest("tr")!;
+      expect(within(firstRow).queryByRole("textbox")).toBeNull();
+      expect(within(secondRow).getByRole("textbox", { name: "Received" })).toBeDefined();
+      await user.click(screen.getByRole("button", { name: "Select first externally" }));
+      expect((within(firstRow).getByRole("textbox") as HTMLInputElement).value).toBe("12");
+      expect(within(secondRow).queryByRole("textbox")).toBeNull();
+    });
+
+    it("shows a not-allowed cursor on read-only cells of a table people edit", () => {
+      renderTable(
+        <Harness
+          columns={(update) => [
+            skuColumn,
+            receivedColumn(vi.fn(), update, { canEdit: (row) => row.id !== "2" }),
+          ]}
+        />,
+      );
+      const skuCell = screen.getByText("TS-M").closest("td");
+      const [editable] = screen.getAllByRole("textbox", { name: "Received" });
+      const lockedRow = screen.getByText("TS-L").closest("tr");
+      expect(blocked(skuCell)).toBe(true);
+      expect(blocked(editable.closest("td"))).toBe(false);
+      expect(blocked(lockedRow?.querySelectorAll("td")[1])).toBe(true);
+    });
+
+    it("keeps the default cursor when no column is editable, or rows are clickable", () => {
+      renderTable(<Harness columns={() => [skuColumn]} />);
+      expect(screen.getByText("TS-M").closest("td")?.className).not.toContain("cursor-not-allowed");
+      cleanup();
+      renderTable(
+        <Harness
+          columns={(update) => [skuColumn, receivedColumn(vi.fn(), update)]}
+          options={{ onClickRow: noop }}
+        />,
+      );
+      expect(screen.getByText("TS-M").closest("td")?.className).not.toContain("cursor-not-allowed");
+    });
+
+    it("never fires onClickRow from an editable cell", async () => {
+      const onClickRow = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) => [skuColumn, receivedColumn(vi.fn(), update)]}
+          options={{ onClickRow }}
+        />,
+      );
+      await user.click(screen.getAllByRole("textbox", { name: "Received" })[0]);
+      expect(onClickRow).not.toHaveBeenCalled();
+      await user.click(screen.getByText("TS-M"));
+      expect(onClickRow).toHaveBeenCalledTimes(1);
+    });
+
+    it("opens the cell context menu on a resting editor", async () => {
+      renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      fireEvent.contextMenu(input);
+      expect(await screen.findByRole("menuitem", { name: "Copy value" })).toBeTruthy();
+    });
+
+    it("leaves the browser context menu alone while typing", async () => {
+      const user = renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await user.click(input);
+      const event = new MouseEvent("contextmenu", { bubbles: true, cancelable: true });
+      fireEvent(input, event);
+      expect(event.defaultPrevented).toBe(false);
+      expect(screen.queryByRole("menuitem", { name: "Copy value" })).toBeNull();
+    });
+  });
+
+  it("drops an unticked row's editor from Tab navigation", async () => {
+    const user = renderTable(
+      <Harness
+        columns={(update) => [
+          receivedColumn(vi.fn(), update, { canEdit: (_, { selected }) => selected }),
+        ]}
+        options={{ rowSelection: {} }}
+      />,
+    );
+    const boxes = screen.getAllByRole("checkbox", { name: "Select row" });
+    for (const box of boxes) await user.click(box);
+    await user.click(boxes[1]);
+    const [first, third] = screen.getAllByRole("textbox", { name: "Received" });
+    act(() => first.focus());
+    await user.tab();
+    expect(document.activeElement).toBe(third);
+  });
+
+  it("types each column's edit config without validation or persistence options", () => {
+    column({
+      id: "received",
+      type: "number",
+      edit: {
+        canEdit: (row, state) => {
+          expectTypeOf(row).toEqualTypeOf<Line>();
+          expectTypeOf(state).toEqualTypeOf<CellEditState>();
+          return true;
+        },
+        onValueCommitted: (row, value) => {
+          expectTypeOf(row).toEqualTypeOf<Line>();
+          expectTypeOf(value).toEqualTypeOf<number | null>();
+        },
+      },
+    });
+    column({
+      id: "price",
+      type: "money",
+      edit: {
+        onValueCommitted: (_row, value) => {
+          expectTypeOf(value).toEqualTypeOf<number | null>();
+        },
+      },
+    });
+    column({
+      id: "note",
+      type: "text",
+      edit: {
+        onValueCommitted: (_row, value) => {
+          expectTypeOf(value).toEqualTypeOf<string | null>();
+        },
+      },
+    });
+    column({
+      id: "supplier",
+      type: "link",
+      typeOptions: { href: () => "/" },
+      edit: { onValueCommitted: noop },
+    });
+    column({
+      id: "expected",
+      type: "date",
+      edit: {
+        onValueCommitted: (_row, value) => {
+          expectTypeOf(value).toEqualTypeOf<string | null>();
+        },
+      },
+    });
+    column({
+      id: "status",
+      type: "badge",
+      edit: {
+        options: [{ value: "open", label: "Open" }],
+        onValueCommitted: (_row, value) => {
+          expectTypeOf(value).toEqualTypeOf<string | null>();
+        },
+      },
+    });
+    // @ts-expect-error — business constraints are consumer-owned
+    column({ id: "received", type: "number", edit: { min: 0, onValueCommitted: noop } });
+    column({
+      id: "note",
+      type: "text",
+      // @ts-expect-error — validation is not an editor option
+      edit: { validate: () => undefined, onValueCommitted: noop },
+    });
+    // @ts-expect-error — required state is consumer-owned
+    column({ id: "note", type: "text", edit: { required: true, onValueCommitted: noop } });
+    // @ts-expect-error — display precision belongs to typeOptions
+    column({ id: "price", type: "money", edit: { maxDecimals: 2, onValueCommitted: noop } });
+    // @ts-expect-error — calendar business bounds are consumer-owned
+    column({ id: "expected", type: "date", edit: { max: "2027-01-01", onValueCommitted: noop } });
+    // @ts-expect-error — onCommit is replaced by a value-change notification
+    column({ id: "note", type: "text", edit: { onCommit: noop } });
+    // @ts-expect-error — dropdown choices aren't a number / money option
+    column({ id: "received", type: "number", edit: { options: [], onValueCommitted: noop } });
+    // @ts-expect-error — columns without a type have no built-in editor
+    column({ id: "sku", render: () => null, edit: { onValueCommitted: noop } });
+    column({
+      id: "received",
+      type: "number",
+      // @ts-expect-error — an emptied cell notifies null
+      edit: { onValueCommitted: (_row, _value: number) => {} },
+    });
+  });
+
+  describe("affordance", () => {
+    it("shows an icon only for dropdown and date editors", () => {
+      renderTable(
+        <Harness
+          rows={LINES.map((line) => ({ ...line, expected: "2026-10-01" }))}
+          columns={(update) => [
+            skuColumn,
+            receivedColumn(vi.fn(), update),
+            column({
+              id: "supplier",
+              label: "Supplier",
+              type: "text",
+              edit: { options: [{ value: "Acme", label: "Acme" }], onValueCommitted: noop },
+            }),
+            column({
+              id: "expected",
+              label: "Expected",
+              type: "date",
+              edit: { onValueCommitted: noop },
+            }),
+          ]}
+        />,
+      );
+      const cells = screen.getAllByRole("row")[1].querySelectorAll("td");
+      expect(cells[0].querySelector("svg")).toBeNull();
+      expect(cells[1].querySelector("svg")).toBeNull();
+      expect(cells[2].querySelector(".lucide-chevron-down")).not.toBeNull();
+      expect(cells[3].querySelector(".lucide-calendar-days")).not.toBeNull();
+    });
+
+    it("leaves editable column headers unmarked", () => {
+      renderTable(<Harness columns={(update) => [skuColumn, receivedColumn(vi.fn(), update)]} />);
+      const [, received] = screen.getAllByRole("columnheader");
+      expect(received.querySelector("svg")).toBeNull();
+      expect(received.textContent).toBe("Received");
+    });
+
+    it("marks only the rows that can be edited", () => {
+      renderTable(
+        <Harness
+          columns={(update) => [
+            receivedColumn(vi.fn(), update, { canEdit: (row) => row.id === "1" }),
+          ]}
+        />,
+      );
+      const [first, second] = screen.getAllByRole("row").slice(1);
+      expect(first.querySelector("td[data-editable]")).not.toBeNull();
+      expect(second.querySelector("td[data-editable]")).toBeNull();
+    });
+  });
+
+  describe("leaving the page", () => {
+    it("does not hold navigation for a returned promise", async () => {
+      let finish = noop;
+      const onValueCommitted = vi.fn(() => new Promise<void>((resolve) => (finish = resolve)));
+      const user = renderInAppRouter(
+        <Harness
+          columns={() => [
+            column({
+              id: "received",
+              label: "Received",
+              type: "number",
+              edit: { onValueCommitted },
+            }),
+          ]}
+        />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "20");
+      await user.click(screen.getByRole("link", { name: "Elsewhere" }));
+      expect(await screen.findByText("Somewhere else")).toBeTruthy();
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect(screen.queryByRole("dialog")).toBeNull();
+      await act(async () => finish());
+    });
+
+    it("does not register an unload guard for drafts or parse failures", async () => {
+      const user = renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "20");
+      expect(wouldWarnOnUnload()).toBe(false);
+      await retype(user, input, "abc{Enter}");
+      expect(wouldWarnOnUnload()).toBe(false);
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/editing/cell/root.tsx b/packages/core/src/components/data-table/editing/cell/root.tsx
new file mode 100644
index 00000000..0a4e1321
--- /dev/null
+++ b/packages/core/src/components/data-table/editing/cell/root.tsx
@@ -0,0 +1,58 @@
+import type { Column } from "../../types";
+import { columnChoices, type EditableColumn, type DataTableEditableCellProps } from "./shared";
+import { TypingEditCell } from "./typing";
+import { ChoiceEditCell } from "./choice";
+import { DateEditCell } from "./date";
+
+/**
+ * Whether the column carries an `edit` config it can use: any typed column
+ * except a `badge` one with no choices to offer.
+ *
+ * @internal
+ */
+export function isEditableColumn<TRow extends Record<string, unknown>>(
+  col: Column<TRow>,
+): col is EditableColumn<TRow> {
+  if (col.edit === undefined || col.type === undefined) return false;
+  return col.type !== "badge" || (columnChoices(col)?.length ?? 0) > 0;
+}
+
+/**
+ * Whether the column's editor shows an icon (a dropdown's chevron or a date's
+ * calendar). Typed-into cells show none: the cell's tint already says it's
+ * editable, and a pen in every cell reads as noise.
+ *
+ * @internal
+ */
+export function hasEditorIcon<TRow extends Record<string, unknown>>(col: Column<TRow>): boolean {
+  return (
+    col.type === "date" ||
+    col.type === "badge" ||
+    ((col.type === "text" || col.type === "link") && !!col.edit?.options)
+  );
+}
+
+/**
+ * A body cell whose value can be edited in place. The value belongs to the
+ * consumer: the cell only holds a draft while it is being edited, and notifies
+ * `edit.onValueChange` for drafts and `edit.onValueCommitted` for changed,
+ * confirmed values. Validation and persistence belong to the consumer.
+ *
+ * - `number`, `money`, and `text` / `link` without choices are typed into.
+ * - `badge`, and `text` / `link` with `edit.options`, are dropdowns you can
+ *   type into to search.
+ * - `date` opens a calendar.
+ *
+ * @internal
+ */
+export function DataTableEditableCell<TRow extends Record<string, unknown>>(
+  props: DataTableEditableCellProps<TRow>,
+) {
+  const { col } = props;
+  const mode = col.edit?.error === false ? "unhandled" : "handled";
+  if (col.type === "date") return <DateEditCell key={mode} {...props} col={col} />;
+  if (col.type === "badge" || ((col.type === "text" || col.type === "link") && col.edit?.options)) {
+    return <ChoiceEditCell key={mode} {...props} col={col} />;
+  }
+  return <TypingEditCell key={mode} {...props} col={col} />;
+}
diff --git a/packages/core/src/components/data-table/editing/cell/shared.tsx b/packages/core/src/components/data-table/editing/cell/shared.tsx
new file mode 100644
index 00000000..751e52da
--- /dev/null
+++ b/packages/core/src/components/data-table/editing/cell/shared.tsx
@@ -0,0 +1,438 @@
+import {
+  useCallback,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { Popover } from "@base-ui/react/popover";
+import { CircleAlert, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTimeZone } from "@/contexts/appshell-context";
+import { Button } from "@/components/button";
+import { Table } from "@/components/table";
+import { Tooltip } from "@/components/tooltip";
+import type { Column } from "../../types";
+import { getCellValue, renderTypedValue } from "../../cell-renderers";
+import { CellEditError } from "../../cell-edit-error";
+import { resolveBadgeOptions } from "../../cell-values";
+import type { CellEditNavigation } from "../use-navigation";
+import { useDataTableT } from "../../i18n";
+import type { CellEditFailure } from "../use-session";
+
+/**
+ * A column whose cells can be edited in place.
+ *
+ * @internal
+ */
+export type EditableColumn<TRow extends Record<string, unknown>> = Extract<
+  Column<TRow>,
+  { type: "text" | "number" | "money" | "date" | "badge" | "link" }
+>;
+
+// The dropdown choices a column offers, or `undefined` when it's typed into.
+export function columnChoices<TRow extends Record<string, unknown>>(col: Column<TRow>) {
+  if (col.type === "badge")
+    return resolveBadgeOptions(col.edit?.options, col.typeOptions, col.filter);
+  if (col.type === "text" || col.type === "link") return col.edit?.options;
+  return undefined;
+}
+
+/**
+ * Room for the icon a dropdown or date cell shows at its right edge (a chevron
+ * or a calendar; 14px plus a gap), so a value ends — or truncates — before it
+ * instead of running underneath. Read-only cells of the same column keep it
+ * too, so the column's width doesn't change as rows become editable or not.
+ *
+ * @internal
+ */
+export const ICON_SPACE_CLASS_NAME = "astw:pr-5";
+
+// Editors cover the whole cell, end to end, instead of taking part in layout,
+// so a cell becoming editable — or being edited — never changes row height or
+// column width. They inherit the cell's padding (they're its direct children),
+// so their text lines up exactly with the cell's own display underneath.
+export const OVERLAY_CLASS_NAME =
+  "astw:absolute astw:inset-0 astw:h-full astw:w-full astw:p-[inherit] astw:rounded-none astw:border-0 astw:shadow-none astw:bg-transparent astw:dark:bg-transparent";
+
+// Spreadsheet-style: the cell being edited outlines its edges (an inset ring,
+// so it never spills onto neighbouring cells).
+export const CELL_FOCUS_CLASS_NAME = cn(
+  "astw:outline-none astw:focus:ring-2 astw:focus:ring-inset astw:focus:ring-primary",
+  "astw:focus-visible:ring-2 astw:focus-visible:ring-inset astw:focus-visible:ring-primary",
+);
+
+// Parsing and callback errors share the cell's error outline.
+export const CELL_ERROR_CLASS_NAME =
+  "astw:ring-[1.5px] astw:ring-inset astw:ring-danger-solid astw:focus:ring-[1.5px] astw:focus:ring-danger-solid astw:focus-visible:ring-[1.5px] astw:focus-visible:ring-danger-solid";
+
+// An editable cell says so at rest with a subtle tint instead of an icon. It's
+// a background *image* layered over whatever colour the cell already has (the
+// row's hover / selected fade, a pinned cell's opaque card), so it never
+// replaces them and stays a step darker than its read-only neighbours. The
+// cell being edited drops it: an untinted cell with a ring reads as "active".
+// (Written out in full: Tailwind only generates classes it finds as literals.)
+const EDITABLE_CELL_CLASS_NAME = cn(
+  "astw:[background-image:linear-gradient(color-mix(in_srgb,var(--foreground)_4%,transparent),color-mix(in_srgb,var(--foreground)_4%,transparent))]",
+  "astw:hover:[background-image:linear-gradient(color-mix(in_srgb,var(--foreground)_7%,transparent),color-mix(in_srgb,var(--foreground)_7%,transparent))]",
+  "astw:focus-within:[background-image:none]",
+);
+
+// Text, number and dropdown cells are typed into: the whole cell shows a text
+// cursor.
+export const INPUT_CLASS_NAME = cn(
+  OVERLAY_CLASS_NAME,
+  CELL_FOCUS_CLASS_NAME,
+  "astw:text-body-md astw:cursor-text",
+);
+
+// A dropdown's text stops before its chevron.
+export const ICON_INPUT_CLASS_NAME = "astw:pr-7 astw:[td:last-child>&]:pr-11";
+
+// The icon that says how a cell is edited: shown while the cell is hovered or
+// being edited (the cell's tint says it's editable at rest).
+// Decoration only: a click anywhere in the cell goes to the editor underneath.
+const CELL_ICON_CLASS_NAME = cn(
+  "astw:pointer-events-none astw:absolute astw:inset-y-0 astw:right-2 astw:flex astw:items-center astw:[td:last-child>&]:right-6",
+  "astw:text-muted-foreground astw:opacity-0 astw:transition-opacity",
+  "astw:group-hover/cell:opacity-30 astw:group-focus-within/cell:opacity-30",
+  "astw:[&_svg]:size-3.5",
+);
+
+export const POPUP_CLASS_NAME = cn(
+  "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:flex astw:flex-col astw:gap-3 astw:rounded-md astw:border astw:border-border astw:p-3 astw:shadow-md",
+  "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
+);
+
+interface CellErrorUI {
+  failure: CellEditFailure;
+  id: string;
+  message: string;
+  content: ReactNode;
+  triggerRef: RefObject<HTMLButtonElement | null>;
+  popupRef: RefObject<HTMLDivElement | null>;
+  containsTarget: (target: EventTarget | null) => boolean;
+}
+
+// The standard popover body: the alert icon makes it read as an error rather
+// than a tooltip.
+function DefaultCellErrorContent({ message }: { message: string }) {
+  return (
+    <div className="astw:flex astw:gap-1.5">
+      {/* One line-height tall, so the icon centres on the first line of text. */}
+      <span className="astw:flex astw:h-lh astw:shrink-0 astw:items-center">
+        <CircleAlert
+          aria-hidden="true"
+          strokeWidth={2.5}
+          className="astw:size-3.5 astw:opacity-70"
+        />
+      </span>
+      <p>{message}</p>
+    </div>
+  );
+}
+
+export function useCellValue<TRow extends Record<string, unknown>>(
+  row: TRow,
+  col: EditableColumn<TRow>,
+  failure: CellEditFailure | undefined,
+  dateRenderer?: (row: TRow) => ReactNode,
+) {
+  const { value: timeZone } = useTimeZone();
+  const current = getCellValue(row, col);
+  const render = col.render ?? dateRenderer;
+  const display = render
+    ? render(row)
+    : renderTypedValue(row, col, current, { linkAsText: true, timeZone });
+  const t = useDataTableT();
+  const errorId = useId();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const containsErrorTarget = (target: EventTarget | null) =>
+    target instanceof Node &&
+    !!(triggerRef.current?.contains(target) || popupRef.current?.contains(target));
+  const change = (value: unknown) =>
+    (col.edit?.onValueChange as ((row: TRow, value: unknown) => unknown) | undefined)?.(row, value);
+  const commit = (value: unknown) =>
+    (col.edit?.onValueCommitted as ((row: TRow, value: unknown) => unknown) | undefined)?.(
+      row,
+      value,
+    );
+  const errorConfig = col.edit?.error;
+  const renderError = errorConfig && errorConfig.render;
+  const message =
+    failure?.error instanceof CellEditError && failure.error.message
+      ? failure.error.message
+      : t("editCallbackError");
+  const callbackError: CellErrorUI | undefined =
+    failure && failure.source !== "parse"
+      ? {
+          failure,
+          id: errorId,
+          message: renderError ? t("editCallbackError") : message,
+          content: renderError ? (
+            renderError({ row, error: failure.error })
+          ) : (
+            <DefaultCellErrorContent message={message} />
+          ),
+          triggerRef,
+          popupRef,
+          containsTarget: containsErrorTarget,
+        }
+      : undefined;
+  return { current, display, change, commit, callbackError, containsErrorTarget };
+}
+
+/**
+ * Registers the cell's focusable element with the table's Tab
+ * navigation. Unregisters on every detach instead of returning a ref cleanup:
+ * `Input` and `Combobox.Input` merge refs with a plain callback that calls ours
+ * with `null` and drops any cleanup we return.
+ */
+export function useNavigationRef<T extends HTMLElement>(
+  navigation: CellEditNavigation,
+  rowKey: string,
+  colKey: string,
+) {
+  const unregisterRef = useRef<(() => void) | null>(null);
+  return useCallback(
+    (element: T | null) => {
+      unregisterRef.current?.();
+      unregisterRef.current = element ? navigation.register(rowKey, colKey, element) : null;
+    },
+    [navigation, rowKey, colKey],
+  );
+}
+
+export function EditableCellFrame({
+  cellProps,
+  display,
+  truncate,
+  hideDisplay,
+  icon,
+  tooltipLabel,
+  editing,
+  callbackError,
+  label,
+  onEditorLeave,
+  onEditorCancel,
+  getFailure,
+  confirming,
+  children,
+}: {
+  cellProps: ComponentProps<typeof Table.Cell>;
+  display: ReactNode;
+  truncate?: boolean;
+  tooltipLabel?: string;
+  editing: boolean;
+  callbackError?: CellErrorUI;
+  label: string;
+  onEditorLeave?: () => void;
+  onEditorCancel: () => void;
+  getFailure: () => CellEditFailure | undefined;
+  confirming: boolean;
+  /** Typed-into cells hide the display while the input shows the text. */
+  hideDisplay?: "focused" | "forced-colors";
+  /** Shown on hover or focus; the cell's tint marks editability at rest. */
+  icon?: ReactNode;
+  children: ReactNode;
+}) {
+  const t = useDataTableT();
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const [dismissedFailure, setDismissedFailure] = useState<CellEditFailure | null>(null);
+  const [manuallyOpenedFailure, setManuallyOpenedFailure] = useState<CellEditFailure | null>(null);
+  const [navigationDismissedFailure, setNavigationDismissedFailure] =
+    useState<CellEditFailure | null>(null);
+  const errorActionsRef = useRef<Popover.Root.Actions | null>(null);
+  const tabNavigationRef = useRef(false);
+  const errorOpen = !!callbackError && dismissedFailure !== callbackError.failure;
+  const showTooltip = tooltipLabel !== undefined && !editing && !callbackError;
+  const dismissForNavigation = () => {
+    const failure = getFailure();
+    if (!failure || failure.source === "parse") return;
+    setNavigationDismissedFailure(failure);
+    setDismissedFailure(failure);
+  };
+  useLayoutEffect(() => {
+    // Remove closing focus guards before native Tab chooses its destination.
+    if (!errorOpen && navigationDismissedFailure === callbackError?.failure)
+      errorActionsRef.current?.unmount();
+  }, [errorOpen, callbackError?.failure, navigationDismissedFailure]);
+  const cell = (
+    <Table.Cell
+      {...cellProps}
+      data-editable=""
+      aria-busy={confirming || undefined}
+      // The editor is positioned against the cell. A pinned cell is already
+      // positioned (sticky), which its inline style keeps.
+      className={cn(
+        cellProps.className,
+        "astw:relative astw:group/cell",
+        EDITABLE_CELL_CLASS_NAME,
+        callbackError && CELL_ERROR_CLASS_NAME,
+      )}
+      // The editor and its portaled error popup are one logical focus group.
+      onBlur={(event) => {
+        if (
+          event.currentTarget.contains(event.relatedTarget) ||
+          callbackError?.containsTarget(event.relatedTarget)
+        )
+          return;
+        if (tabNavigationRef.current) dismissForNavigation();
+        onEditorLeave?.();
+      }}
+      onKeyDown={(event) => {
+        if (
+          event.key === "Tab" &&
+          !event.defaultPrevented &&
+          event.currentTarget.contains(event.target as Node)
+        )
+          dismissForNavigation();
+        tabNavigationRef.current = false;
+      }}
+      onKeyDownCapture={(event) => {
+        tabNavigationRef.current =
+          event.key === "Tab" && event.currentTarget.contains(event.target as Node);
+        if (
+          callbackError &&
+          event.key === "Escape" &&
+          !callbackError.popupRef.current?.contains(event.target as Node)
+        ) {
+          event.preventDefault();
+          event.stopPropagation();
+          if (errorOpen) setDismissedFailure(callbackError.failure);
+          else onEditorCancel();
+          return;
+        }
+        if (callbackError && event.altKey && event.key === "ArrowDown") {
+          event.preventDefault();
+          event.stopPropagation();
+          setNavigationDismissedFailure(null);
+          setManuallyOpenedFailure(callbackError.failure);
+          setDismissedFailure(null);
+          if (errorOpen) callbackError.popupRef.current?.focus({ preventScroll: true });
+        }
+      }}
+      // Editing a cell must never fire `onClickRow`.
+      onClick={(event) => event.stopPropagation()}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "astw:block",
+          (icon !== undefined || callbackError) && ICON_SPACE_CLASS_NAME,
+          truncate && "astw:truncate",
+          // Transparent input text is forced visible in forced-colors mode;
+          // hide the display instead so the two don't overlap.
+          hideDisplay && "astw:forced-colors:invisible",
+          hideDisplay === "focused" && "astw:invisible",
+        )}
+      >
+        {display}
+      </span>
+      {children}
+      {callbackError && (
+        <>
+          <output id={callbackError.id} className="astw:sr-only">
+            {callbackError.message}. {t("editErrorHint")}
+          </output>
+          <Popover.Root
+            actionsRef={errorActionsRef}
+            open={errorOpen}
+            onOpenChange={(open) => {
+              setDismissedFailure(open ? null : callbackError.failure);
+              if (open) {
+                setNavigationDismissedFailure(null);
+                setManuallyOpenedFailure(callbackError.failure);
+              }
+            }}
+          >
+            <Popover.Trigger
+              ref={callbackError.triggerRef}
+              aria-label={t("editShowError", { label })}
+              aria-keyshortcuts="Alt+ArrowDown"
+              tabIndex={-1}
+              className="astw:absolute astw:inset-y-0 astw:right-2 astw:z-10 astw:flex astw:items-center astw:text-danger-text astw:outline-none astw:[td:last-child>&]:right-6"
+              onContextMenu={(event) => event.stopPropagation()}
+            >
+              <CircleAlert aria-hidden="true" strokeWidth={2.5} className="astw:size-3.5" />
+            </Popover.Trigger>
+            <Popover.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
+              {/* Opens directly under the cell, not under the small icon trigger. */}
+              <Popover.Positioner
+                anchor={() => callbackError.triggerRef.current?.closest("td") ?? null}
+                sideOffset={2}
+                side="bottom"
+                align="start"
+              >
+                <Popover.Popup
+                  ref={callbackError.popupRef}
+                  initialFocus={manuallyOpenedFailure === callbackError.failure}
+                  finalFocus={navigationDismissedFailure !== callbackError.failure}
+                  aria-label={t("editErrorDialog", { label })}
+                  data-slot="data-table-cell-error"
+                  className={cn(
+                    POPUP_CLASS_NAME,
+                    // Same tint as Alert's error variant. --danger-surface is
+                    // translucent, so it's layered as an image over the opaque
+                    // popover colour; table lines don't show through.
+                    "astw:[background-image:linear-gradient(var(--danger-surface),var(--danger-surface))]",
+                    "astw:max-w-xs astw:border-0 astw:px-2.5 astw:py-2 astw:text-body-sm astw:text-danger-text astw:shadow-sm astw:outline-none",
+                  )}
+                  onContextMenu={(event) => event.stopPropagation()}
+                  onTouchStart={(event) => event.stopPropagation()}
+                  onKeyDown={(event) => {
+                    if (event.key === "Escape") event.stopPropagation();
+                  }}
+                >
+                  <div className="astw:flex astw:items-center astw:gap-2">
+                    <div className="astw:min-w-0 astw:flex-1">{callbackError.content}</div>
+                    <Popover.Close
+                      aria-label={t("editCloseError")}
+                      render={<Button variant="ghost" size="icon" className="astw:size-6" />}
+                    >
+                      <X aria-hidden="true" className="astw:size-4" />
+                    </Popover.Close>
+                  </div>
+                </Popover.Popup>
+              </Popover.Positioner>
+            </Popover.Portal>
+          </Popover.Root>
+        </>
+      )}
+      {icon !== undefined && !callbackError && (
+        <span aria-hidden="true" className={CELL_ICON_CLASS_NAME}>
+          {icon}
+        </span>
+      )}
+    </Table.Cell>
+  );
+  return (
+    <Tooltip.Root open={showTooltip && tooltipOpen} onOpenChange={setTooltipOpen}>
+      <Tooltip.Trigger disabled={!showTooltip} render={cell} />
+      <Tooltip.Content>{tooltipLabel}</Tooltip.Content>
+    </Tooltip.Root>
+  );
+}
+
+export interface DataTableEditableCellProps<
+  TRow extends Record<string, unknown>,
+  TColumn extends EditableColumn<TRow> = EditableColumn<TRow>,
+> {
+  row: TRow;
+  col: TColumn;
+  rowKey: string;
+  colKey: string;
+  /** Accessible name for the editor — the column's label. */
+  label: string;
+  align: "left" | "right";
+  tooltipLabel?: string;
+  navigation: CellEditNavigation;
+  /** Reuses the table's column-level date formatter cache. */
+  dateRenderer?: (row: TRow) => ReactNode;
+  /** `data-slot`, style, class and context-menu handlers shared with static cells. */
+  cellProps: ComponentProps<typeof Table.Cell>;
+}
diff --git a/packages/core/src/components/data-table/editing/cell/test-utils.tsx b/packages/core/src/components/data-table/editing/cell/test-utils.tsx
new file mode 100644
index 00000000..4af69bd2
--- /dev/null
+++ b/packages/core/src/components/data-table/editing/cell/test-utils.tsx
@@ -0,0 +1,119 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router";
+import { useState } from "react";
+import { createAppShellWrapper } from "../../../../../tests/test-utils";
+import { DataTable } from "../../data-table";
+import { useDataTable } from "../../use-data-table";
+import { createColumnHelper } from "../../field-helpers";
+import type { CellEditState, Column, UseDataTableOptions } from "../../types";
+
+export type Line = {
+  id: string;
+  sku: string;
+  status?: string;
+  expected?: string | null;
+  ordered: number;
+  received: number | null;
+  price: number;
+  currency: string;
+  note: string | null;
+  supplier: string;
+};
+
+export const LINES: Line[] = [
+  {
+    id: "1",
+    sku: "TS-M",
+    ordered: 24,
+    received: 12,
+    price: 9.5,
+    currency: "USD",
+    note: "Box 1",
+    supplier: "Acme",
+  },
+  {
+    id: "2",
+    sku: "TS-L",
+    ordered: 24,
+    received: null,
+    price: 1200,
+    currency: "JPY",
+    note: null,
+    supplier: "Globex",
+  },
+  {
+    id: "3",
+    sku: "TS-XL",
+    ordered: 12,
+    received: 10,
+    price: 4,
+    currency: "USD",
+    note: "",
+    supplier: "Acme",
+  },
+];
+
+export const noop = () => {};
+
+export type Update = (id: string, patch: Partial<Line>) => void;
+
+export function Harness({
+  columns,
+  rows: initialRows = LINES,
+  options,
+}: {
+  columns: (update: Update) => Column<Line>[];
+  rows?: Line[];
+  options?: Partial<UseDataTableOptions<Line>>;
+}) {
+  const [rows, setRows] = useState(initialRows);
+  const update: Update = (id, patch) =>
+    setRows((prev) => prev.map((row) => (row.id === id ? { ...row, ...patch } : row)));
+  const table = useDataTable<Line>({ columns: columns(update), data: { rows }, ...options });
+  return (
+    <DataTable.Root value={table}>
+      <DataTable.Table />
+    </DataTable.Root>
+  );
+}
+
+export function renderTable(ui: React.ReactElement, locale = "en") {
+  const user = userEvent.setup();
+  render(<MemoryRouter>{ui}</MemoryRouter>, { wrapper: createAppShellWrapper(locale) });
+  return user;
+}
+
+export const { column } = createColumnHelper<Line>();
+
+export const skuColumn = column({ id: "sku", label: "SKU", type: "text" });
+
+export function receivedColumn(
+  onValueCommitted: (id: string, value: number | null) => void,
+  update: Update,
+  edit: { canEdit?: (row: Line, state: CellEditState) => boolean } = {},
+): Column<Line> {
+  return column({
+    id: "received",
+    label: "Received",
+    type: "number",
+    edit: {
+      onValueCommitted: (row, value) => {
+        onValueCommitted(row.id, value);
+        update(row.id, { received: value });
+      },
+      ...edit,
+    },
+  });
+}
+
+// user-event collapses the real editor's select-all, so replace explicitly.
+export async function retype(
+  user: ReturnType<typeof userEvent.setup>,
+  input: HTMLElement,
+  text: string,
+) {
+  await user.click(input);
+  await user.clear(input);
+  if (text) await user.keyboard(text);
+}
diff --git a/packages/core/src/components/data-table/data-table-editing-tooltip.test.tsx b/packages/core/src/components/data-table/editing/cell/tooltip.test.tsx
similarity index 95%
rename from packages/core/src/components/data-table/data-table-editing-tooltip.test.tsx
rename to packages/core/src/components/data-table/editing/cell/tooltip.test.tsx
index f7c28a8f..11e941f5 100644
--- a/packages/core/src/components/data-table/data-table-editing-tooltip.test.tsx
+++ b/packages/core/src/components/data-table/editing/cell/tooltip.test.tsx
@@ -2,10 +2,10 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router";
-import { createAppShellWrapper } from "../../../tests/test-utils";
-import { DataTable } from "./data-table";
-import { useDataTable } from "./use-data-table";
-import type { Column } from "./types";
+import { createAppShellWrapper } from "../../../../../tests/test-utils";
+import { DataTable } from "../../data-table";
+import { useDataTable } from "../../use-data-table";
+import type { Column } from "../../types";
 
 afterEach(cleanup);
 
diff --git a/packages/core/src/components/data-table/editing/cell/typing.test.tsx b/packages/core/src/components/data-table/editing/cell/typing.test.tsx
new file mode 100644
index 00000000..de0433a1
--- /dev/null
+++ b/packages/core/src/components/data-table/editing/cell/typing.test.tsx
@@ -0,0 +1,439 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, fireEvent, screen } from "@testing-library/react";
+import { StrictMode } from "react";
+import {
+  Harness,
+  LINES,
+  column,
+  noop,
+  receivedColumn,
+  renderTable,
+  retype,
+  skuColumn,
+} from "./test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+const errorText = (input: HTMLElement) =>
+  document.getElementById(input.getAttribute("aria-describedby") ?? "")?.textContent;
+
+describe("DataTable inline editing", () => {
+  describe("keyboard", () => {
+    it("notifies once on Enter without moving focus or notifying again on Tab", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <StrictMode>
+          <Harness
+            columns={(update) => [
+              receivedColumn(onValueCommitted, update, { canEdit: (row) => row.id !== "2" }),
+            ]}
+          />
+        </StrictMode>,
+      );
+      const [first, third] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, first, "20{Enter}");
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect(onValueCommitted).toHaveBeenCalledWith("1", 20);
+      expect(document.activeElement).toBe(first);
+      expect((first as HTMLInputElement).value).toBe("20");
+      expect(first.getAttribute("enterkeyhint")).toBe("done");
+      await user.keyboard("{Enter}");
+      await user.tab();
+      expect(document.activeElement).toBe(third);
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+    });
+
+    it("confirms on Shift+Enter without moving focus", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
+      );
+      const inputs = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, inputs[2], "11");
+      await user.keyboard("{Shift>}{Enter}{/Shift}");
+      expect(onValueCommitted).toHaveBeenCalledExactlyOnceWith("3", 11);
+      expect(document.activeElement).toBe(inputs[2]);
+    });
+
+    it("moves to the next editable cell on Tab, skipping read-only columns", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            receivedColumn(onValueCommitted, update),
+            skuColumn,
+            column({
+              id: "note",
+              label: "Note",
+              type: "text",
+              edit: { onValueCommitted: (row, value) => update(row.id, { note: value }) },
+            }),
+          ]}
+        />,
+      );
+      const received = screen.getAllByRole("textbox", { name: "Received" });
+      const notes = screen.getAllByRole("textbox", { name: "Note" });
+      await retype(user, received[0], "18");
+      await user.tab();
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect(onValueCommitted).toHaveBeenCalledWith("1", 18);
+      expect(document.activeElement).toBe(notes[0]);
+      await user.tab();
+      expect(document.activeElement).toBe(received[1]);
+      await user.tab({ shift: true });
+      expect(document.activeElement).toBe(notes[0]);
+    });
+
+    it("reverts the draft on Escape without notifying", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "7{Escape}");
+      expect((input as HTMLInputElement).value).toBe("12");
+      await user.tab();
+      expect(onValueCommitted).not.toHaveBeenCalled();
+    });
+
+    it("selects the whole value when a cell receives focus", () => {
+      renderTable(<Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />);
+      const [input] = screen.getAllByRole("textbox", { name: "Received" }) as HTMLInputElement[];
+      act(() => input.focus());
+      expect([input.selectionStart, input.selectionEnd]).toEqual([0, input.value.length]);
+    });
+
+    it("ignores Enter while an IME is composing and parses full-width digits", () => {
+      const onValueCommitted = vi.fn();
+      renderTable(<Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />);
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      act(() => input.focus());
+      fireEvent.compositionStart(input);
+      fireEvent.change(input, { target: { value: "１５" } });
+      fireEvent.keyDown(input, { key: "Enter", isComposing: true });
+      expect(onValueCommitted).not.toHaveBeenCalled();
+      fireEvent.compositionEnd(input);
+      fireEvent.keyDown(input, { key: "Enter" });
+      expect(onValueCommitted).toHaveBeenCalledWith("1", 15);
+      expect(document.activeElement).toBe(input);
+    });
+  });
+
+  describe("parsing", () => {
+    it("accepts negative and fractional numbers independently of display precision", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            column({
+              id: "received",
+              label: "Received",
+              type: "number",
+              typeOptions: { maxDecimals: 0 },
+              edit: {
+                onValueCommitted: (row, value) => {
+                  onValueCommitted(row.id, value);
+                  update(row.id, { received: value });
+                },
+              },
+            }),
+          ]}
+        />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "-3.5678{Enter}");
+      expect(onValueCommitted).toHaveBeenCalledWith("1", -3.5678);
+      expect((input as HTMLInputElement).value).toBe("-3.5678");
+      expect(input.getAttribute("aria-invalid")).toBeNull();
+    });
+
+    it("does not restrict money input to the currency's display precision", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            column({
+              id: "price",
+              label: "Price",
+              type: "money",
+              typeOptions: { currency: (row) => row.currency },
+              edit: {
+                onValueCommitted: (row, value) => {
+                  onValueCommitted(row.id, value);
+                  update(row.id, { price: value ?? 0 });
+                },
+              },
+            }),
+          ]}
+        />,
+      );
+      const [usd, jpy] = screen.getAllByRole("textbox", { name: "Price" });
+      await retype(user, usd, "9.999{Enter}");
+      await retype(user, jpy, "12.5{Enter}");
+      expect(onValueCommitted.mock.calls).toEqual([
+        ["1", 9.999],
+        ["2", 12.5],
+      ]);
+    });
+
+    it("reads full-width digits and thousands separators on confirmation", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
+      );
+      const [first, second] = screen.getAllByRole("textbox", { name: "Received" });
+      await user.click(first);
+      await user.clear(first);
+      await user.paste("1,234.50");
+      await user.keyboard("{Enter}");
+      expect(onValueCommitted).toHaveBeenCalledWith("1", 1234.5);
+      await retype(user, second, "１５００{Enter}");
+      expect(onValueCommitted).toHaveBeenCalledWith("2", 1500);
+    });
+
+    it("flags malformed numbers only on confirmation and holds Enter and Tab", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "abc");
+      expect(input.getAttribute("aria-invalid")).toBeNull();
+      await user.keyboard("{Enter}");
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+      expect(errorText(input)).toBe("Enter a number. Press Esc to undo");
+      expect(document.activeElement).toBe(input);
+      await user.tab();
+      expect(document.activeElement).toBe(input);
+      expect(onValueCommitted).not.toHaveBeenCalled();
+      await user.keyboard("{Escape}");
+      expect((input as HTMLInputElement).value).toBe("12");
+      expect(input.getAttribute("aria-invalid")).toBeNull();
+    });
+
+    it("clears the parsing error after the malformed number is corrected", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "-{Enter}");
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+      await user.keyboard("3");
+      expect(input.getAttribute("aria-invalid")).toBeNull();
+      await user.keyboard("{Enter}");
+      expect(onValueCommitted).toHaveBeenCalledWith("1", -3);
+    });
+
+    it("discards an unparseable draft on blur without changing data", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "1,5{Enter}");
+      await user.click(document.body);
+      expect(onValueCommitted).not.toHaveBeenCalled();
+      expect((input as HTMLInputElement).value).toBe("12");
+      expect(input.getAttribute("aria-invalid")).toBeNull();
+      expect(input.className).not.toContain("astw:ring-status-attention");
+    });
+
+    it("localizes the parsing message", async () => {
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(vi.fn(), update)]} />,
+        "ja",
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "abc{Enter}");
+      expect(errorText(input)).toBe("数値を入力してください. Escキーで元に戻せます");
+    });
+  });
+
+  describe("consumer-owned values", () => {
+    it("notifies on blur, but never for intermediate keystrokes", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "18");
+      expect(onValueCommitted).not.toHaveBeenCalled();
+      await user.click(document.body);
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect(onValueCommitted).toHaveBeenCalledWith("1", 18);
+    });
+
+    it("does not notify when numeric formatting alone changes", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness columns={(update) => [receivedColumn(onValueCommitted, update)]} />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, input, "12.00{Enter}");
+      await user.click(input);
+      await user.keyboard("{Enter}");
+      expect(onValueCommitted).not.toHaveBeenCalled();
+    });
+
+    it("preserves safe integers when editing and notifies distinct values", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          rows={[{ ...LINES[0], received: 1234567890123456 }]}
+          columns={(update) => [receivedColumn(onValueCommitted, update)]}
+        />,
+      );
+      const input = screen.getByRole("textbox", { name: "Received" }) as HTMLInputElement;
+      expect(input.value).toBe("1234567890123456");
+      await retype(user, input, "1234567890123457{Enter}");
+      expect(onValueCommitted).toHaveBeenCalledExactlyOnceWith("1", 1234567890123457);
+      expect(input.value).toBe("1234567890123457");
+    });
+
+    it("notifies text as typed and empty text or number cells as null", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            receivedColumn(onValueCommitted, update),
+            column({
+              id: "note",
+              label: "Note",
+              type: "text",
+              edit: {
+                onValueCommitted: (row, value) => {
+                  onValueCommitted(row.id, value);
+                  update(row.id, { note: value });
+                },
+              },
+            }),
+          ]}
+        />,
+      );
+      const [note] = screen.getAllByRole("textbox", { name: "Note" });
+      await retype(user, note, " Box 2 {Enter}");
+      await retype(user, note, "{Enter}");
+      const [received] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, received, "{Enter}");
+      expect(onValueCommitted.mock.calls).toEqual([
+        ["1", " Box 2 "],
+        ["1", null],
+        ["1", null],
+      ]);
+    });
+
+    it("lets the consumer reject a change without retaining it or blocking movement", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            column({
+              id: "received",
+              label: "Received",
+              type: "number",
+              edit: {
+                onValueCommitted: (row, value) => {
+                  onValueCommitted(row.id, value);
+                  if (value !== null && value > row.ordered) return;
+                  update(row.id, { received: value });
+                },
+              },
+            }),
+          ]}
+        />,
+      );
+      const [first, second] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, first, "99{Tab}");
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect(onValueCommitted).toHaveBeenCalledWith("1", 99);
+      expect((first as HTMLInputElement).value).toBe("12");
+      expect(first.getAttribute("aria-invalid")).toBeNull();
+      expect(document.activeElement).toBe(second);
+      await retype(user, first, "98");
+      await user.click(document.body);
+      expect(onValueCommitted).toHaveBeenCalledWith("1", 98);
+      expect((first as HTMLInputElement).value).toBe("12");
+    });
+
+    it("shows the consumer's normalized value instead of keeping the submitted draft", async () => {
+      const onValueCommitted = vi.fn();
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            column({
+              id: "note",
+              label: "Note",
+              type: "text",
+              edit: {
+                onValueCommitted: (row, value) => {
+                  onValueCommitted(value);
+                  update(row.id, { note: value?.normalize("NFKC").trim() ?? null });
+                },
+              },
+            }),
+          ]}
+        />,
+      );
+      const [input] = screen.getAllByRole("textbox", { name: "Note" });
+      await retype(user, input, " ＡＢＣ {Enter}");
+      expect(onValueCommitted).toHaveBeenCalledWith(" ＡＢＣ ");
+      expect((input as HTMLInputElement).value).toBe("ABC");
+      expect(input.closest("td")?.textContent).toContain("ABC");
+    });
+
+    it("retains a pending draft without adopting it or blocking focus movement", async () => {
+      let finish = noop;
+      const onValueCommitted = vi.fn(() => new Promise<void>((resolve) => (finish = resolve)));
+      const user = renderTable(
+        <Harness
+          columns={() => [
+            column({
+              id: "received",
+              label: "Received",
+              type: "number",
+              edit: { onValueCommitted },
+            }),
+          ]}
+        />,
+      );
+      const [first, second] = screen.getAllByRole("textbox", { name: "Received" });
+      await retype(user, first, "20{Enter}");
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect((first as HTMLInputElement).value).toBe("20");
+      expect(document.activeElement).toBe(first);
+      await user.tab();
+      expect(document.activeElement).toBe(second);
+      expect(onValueCommitted).toHaveBeenCalledTimes(1);
+      expect((first as HTMLInputElement).value).toBe("20");
+      await act(async () => finish());
+      expect((first as HTMLInputElement).value).toBe("12");
+    });
+
+    it("preserves a previous field update when another field changes immediately", async () => {
+      const user = renderTable(
+        <Harness
+          columns={(update) => [
+            receivedColumn(vi.fn(), update),
+            column({
+              id: "note",
+              label: "Note",
+              type: "text",
+              edit: { onValueCommitted: (row, value) => update(row.id, { note: value }) },
+            }),
+          ]}
+        />,
+      );
+      const [received] = screen.getAllByRole("textbox", { name: "Received" });
+      const [note] = screen.getAllByRole("textbox", { name: "Note" });
+      await retype(user, received, "18{Tab}");
+      await user.clear(note);
+      await user.keyboard("Updated{Tab}");
+      expect((received as HTMLInputElement).value).toBe("18");
+      expect((note as HTMLInputElement).value).toBe("Updated");
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/editing/cell/typing.tsx b/packages/core/src/components/data-table/editing/cell/typing.tsx
new file mode 100644
index 00000000..90e39553
--- /dev/null
+++ b/packages/core/src/components/data-table/editing/cell/typing.tsx
@@ -0,0 +1,261 @@
+import {
+  useId,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type FocusEvent,
+  type KeyboardEvent,
+  type MouseEvent,
+  type TouchEvent,
+} from "react";
+import { cn } from "@/lib/utils";
+import { isComposing } from "@/lib/is-composing";
+import { Input } from "@/components/input";
+import { Tooltip } from "@/components/tooltip";
+import {
+  normalizeNumberText,
+  parseNumberText,
+  sameNumber,
+  toNumberEditText,
+  toNumberValue,
+  toTextValue,
+} from "../../cell-values";
+import { useDataTableT } from "../../i18n";
+import { useCellEditSession } from "../use-session";
+import {
+  CELL_ERROR_CLASS_NAME,
+  ICON_INPUT_CLASS_NAME,
+  INPUT_CLASS_NAME,
+  EditableCellFrame,
+  useCellValue,
+  useNavigationRef,
+  type DataTableEditableCellProps,
+} from "./shared";
+
+export function TypingEditCell<TRow extends Record<string, unknown>>({
+  row,
+  col,
+  rowKey,
+  colKey,
+  label,
+  align,
+  navigation,
+  cellProps,
+  tooltipLabel,
+}: DataTableEditableCellProps<TRow>) {
+  const t = useDataTableT();
+  const errorId = useId();
+  const session = useCellEditSession<string>(col.edit?.error !== false);
+  const { state } = session;
+  const failure = state.status === "failed" ? state : undefined;
+  const { current, display, change, commit, callbackError, containsErrorTarget } = useCellValue(
+    row,
+    col,
+    failure,
+  );
+  const register = useNavigationRef<HTMLInputElement>(navigation, rowKey, colKey);
+  const editing = state.status !== "idle";
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const composingRef = useRef(false);
+  const selectOnMouseUpRef = useRef(false);
+
+  const numeric = col.type === "number" || col.type === "money";
+  const baselineText = numeric
+    ? toNumberEditText(toNumberValue(current))
+    : (toTextValue(current) ?? "");
+  const text = state.status === "idle" ? baselineText : state.draft;
+  const message = failure?.source === "parse" ? t("editNotANumber") : undefined;
+
+  const revert = (notify = false) => {
+    const previous = session.getState();
+    session.cancel(
+      notify && previous.status !== "idle" && previous.draft !== baselineText
+        ? () => change(baselineText)
+        : undefined,
+    );
+  };
+
+  const commitDraft = (): boolean => {
+    const active = session.getState();
+    if (active.status === "idle" || active.status === "confirming") return true;
+    const draftText = active.draft;
+    const value = numeric
+      ? parseNumberText(normalizeNumberText(draftText))
+      : toTextValue(draftText);
+    if (value === undefined) {
+      session.fail(undefined, "parse");
+      return false;
+    }
+    const unchanged =
+      draftText === baselineText ||
+      (numeric
+        ? sameNumber(value as number | null, toNumberValue(current))
+        : value === toTextValue(current));
+    session.confirm(() => (unchanged ? undefined : commit(value)));
+    return true;
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const next = event.target.value;
+    const active = session.getState();
+    const previous = active.status === "idle" ? baselineText : active.draft;
+    if (next !== previous) session.change(next, () => change(next));
+  };
+
+  // Keep IME output raw until cell confirmation, just like other draft changes.
+  const handleCompositionEnd = () => {
+    composingRef.current = false;
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    // While an IME is composing, Enter confirms the conversion, not the cell.
+    if (isComposing(event.nativeEvent, composingRef.current)) return;
+    const from = { rowKey, colKey };
+    switch (event.key) {
+      case "Enter":
+        event.preventDefault();
+        if (session.getState().status === "idle") {
+          session.begin(baselineText);
+          event.currentTarget.select();
+        } else {
+          commitDraft();
+        }
+        return;
+      case "Tab": {
+        const active = session.getState();
+        const failedCommit = active.status === "failed" && active.source === "commit";
+        if (!failedCommit && !commitDraft()) {
+          event.preventDefault();
+          return;
+        }
+        // At the first / last editable cell, native Tab leaves the table.
+        if (navigation.move(from, event.shiftKey ? "prev" : "next")) event.preventDefault();
+        return;
+      }
+      case "Escape":
+        if (session.getState().status === "idle") return;
+        // Handled here, so an enclosing dialog doesn't also close on this Esc.
+        event.preventDefault();
+        event.stopPropagation();
+        revert(true);
+        return;
+    }
+  };
+
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+    const withinCell = focused || containsErrorTarget(event.relatedTarget);
+    setFocused(true);
+    if (withinCell) return;
+    session.begin(baselineText);
+    event.currentTarget.select();
+  };
+
+  const handleBlur = () => {
+    setFocused(false);
+    const active = session.getState();
+    if (active.status === "failed") {
+      // Preserve callback failures; malformed numeric blur still cancels the edit.
+      if (active.source === "parse") revert(true);
+      return;
+    }
+    if (!commitDraft()) revert(true);
+  };
+
+  const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {
+    if (editing) return;
+    // A right-click on a resting cell opens DataTable's cell menu instead of editing.
+    if (event.button === 2) {
+      event.preventDefault();
+      return;
+    }
+    session.begin(baselineText);
+    if (focused) event.currentTarget.select();
+    selectOnMouseUpRef.current = true;
+  };
+
+  // The click that focuses the cell keeps the select-all from `handleFocus`;
+  // otherwise mouseup would collapse it to a caret.
+  const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {
+    if (!selectOnMouseUpRef.current) return;
+    selectOnMouseUpRef.current = false;
+    event.preventDefault();
+  };
+
+  // While editing, the browser's own menu and long-press (paste, select) win
+  // over DataTable's cell menu.
+  const stopWhileEditing = (event: MouseEvent | TouchEvent) => {
+    if (editing) event.stopPropagation();
+  };
+
+  const hint = t("editRevertHint");
+
+  return (
+    <EditableCellFrame
+      cellProps={cellProps}
+      display={display}
+      truncate={col.truncate}
+      hideDisplay={editing ? "focused" : "forced-colors"}
+      tooltipLabel={tooltipLabel}
+      editing={editing}
+      callbackError={callbackError}
+      label={label}
+      onEditorLeave={handleBlur}
+      onEditorCancel={() => revert(true)}
+      getFailure={session.getFailure}
+      confirming={state.status === "confirming"}
+    >
+      {message !== undefined && (
+        <span id={errorId} className="astw:sr-only">
+          {message}. {hint}
+        </span>
+      )}
+      <Tooltip.Root open={message !== undefined && (focused || hovered)}>
+        <Tooltip.Trigger
+          render={
+            <Input
+              ref={register}
+              type="text"
+              value={text}
+              readOnly={!editing}
+              aria-label={label}
+              aria-invalid={message !== undefined || callbackError ? true : undefined}
+              aria-describedby={message !== undefined ? errorId : callbackError?.id}
+              aria-keyshortcuts={callbackError ? "Alt+ArrowDown" : undefined}
+              inputMode={numeric ? "text" : undefined}
+              enterKeyHint="done"
+              autoComplete="off"
+              spellCheck={numeric ? false : undefined}
+              className={cn(
+                INPUT_CLASS_NAME,
+                !editing && "astw:text-transparent",
+                numeric && "astw:tabular-nums",
+                align === "right" && "astw:text-right",
+                (message !== undefined || callbackError) && CELL_ERROR_CLASS_NAME,
+                callbackError && ICON_INPUT_CLASS_NAME,
+              )}
+              style={editing ? { WebkitTouchCallout: "default" } : undefined}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              onFocus={handleFocus}
+              onCompositionStart={() => {
+                composingRef.current = true;
+              }}
+              onCompositionEnd={handleCompositionEnd}
+              onMouseDown={handleMouseDown}
+              onMouseUp={handleMouseUp}
+              onPointerEnter={() => setHovered(true)}
+              onPointerLeave={() => setHovered(false)}
+              onContextMenu={stopWhileEditing}
+              onTouchStart={stopWhileEditing}
+            />
+          }
+        />
+        <Tooltip.Content>
+          {message}
+          <span className="astw:block astw:opacity-70">{hint}</span>
+        </Tooltip.Content>
+      </Tooltip.Root>
+    </EditableCellFrame>
+  );
+}
diff --git a/packages/core/src/components/data-table/use-cell-edit-navigation.test.ts b/packages/core/src/components/data-table/editing/use-navigation.test.ts
similarity index 97%
rename from packages/core/src/components/data-table/use-cell-edit-navigation.test.ts
rename to packages/core/src/components/data-table/editing/use-navigation.test.ts
index fe409370..4248efdb 100644
--- a/packages/core/src/components/data-table/use-cell-edit-navigation.test.ts
+++ b/packages/core/src/components/data-table/editing/use-navigation.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { createCellEditNavigation } from "./use-cell-edit-navigation";
+import { createCellEditNavigation } from "./use-navigation";
 
 function cell(isConnected = true) {
   return { focus: vi.fn(), isConnected } as unknown as HTMLElement & {
diff --git a/packages/core/src/components/data-table/use-cell-edit-navigation.ts b/packages/core/src/components/data-table/editing/use-navigation.ts
similarity index 100%
rename from packages/core/src/components/data-table/use-cell-edit-navigation.ts
rename to packages/core/src/components/data-table/editing/use-navigation.ts
diff --git a/packages/core/src/components/data-table/use-cell-edit-session.test.tsx b/packages/core/src/components/data-table/editing/use-session.test.tsx
similarity index 99%
rename from packages/core/src/components/data-table/use-cell-edit-session.test.tsx
rename to packages/core/src/components/data-table/editing/use-session.test.tsx
index 82977831..34f385f5 100644
--- a/packages/core/src/components/data-table/use-cell-edit-session.test.tsx
+++ b/packages/core/src/components/data-table/editing/use-session.test.tsx
@@ -1,7 +1,7 @@
 import { StrictMode, type ReactNode } from "react";
 import { act, cleanup, renderHook } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { useCellEditSession } from "./use-cell-edit-session";
+import { useCellEditSession } from "./use-session";
 
 afterEach(cleanup);
 
diff --git a/packages/core/src/components/data-table/use-cell-edit-session.ts b/packages/core/src/components/data-table/editing/use-session.ts
similarity index 100%
rename from packages/core/src/components/data-table/use-cell-edit-session.ts
rename to packages/core/src/components/data-table/editing/use-session.ts
diff --git a/packages/core/src/components/data-table/expanded-row.test.tsx b/packages/core/src/components/data-table/expanded-row.test.tsx
new file mode 100644
index 00000000..d5fa795d
--- /dev/null
+++ b/packages/core/src/components/data-table/expanded-row.test.tsx
@@ -0,0 +1,708 @@
+import { afterEach, describe, it, expect, vi } from "vitest";
+import {
+  act,
+  cleanup,
+  render,
+  renderHook,
+  screen,
+  fireEvent,
+  waitFor,
+} from "@testing-library/react";
+import type { ReactNode } from "react";
+import { resetLocalTimeZone } from "@internationalized/date";
+import { testColumns, testData, wrapper, strictWrapper, type TestRow } from "./test-utils";
+import { DataTable } from "./data-table";
+import { useDataTable } from "./use-data-table";
+import type {
+  DataTableData,
+  RowAction,
+  RowExpansionOptions,
+  UseDataTableOptions,
+  UseDataTableReturn,
+} from "./types";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+  resetLocalTimeZone();
+  vi.restoreAllMocks();
+});
+
+// Detail-panel render props shared by the "expandable rows" block. The
+// focusable variant lets tests drive focus into an open panel.
+const detail = (row: TestRow) => <div>Details for {row.name}</div>;
+
+const focusableDetail = () => (
+  <button type="button" data-testid="inner">
+    Inner
+  </button>
+);
+
+describe("DataTable", () => {
+  describe("expandable rows", () => {
+    const EXPAND_TH = '[data-slot="data-table-header"] th[data-col-key="__datatable_expand__"]';
+    const EXPANDED_ROW = '[data-slot="data-table-expanded-row"]';
+
+    function ExpandHarness(props: {
+      data?: DataTableData<TestRow>;
+      loading?: boolean;
+      error?: Error | null;
+      onClickRow?: (row: TestRow) => void;
+      onSelectionChange?: (ids: string[]) => void;
+      rowActions?: RowAction<TestRow>[];
+      renderExpandedRow?: (row: TestRow) => ReactNode;
+      canExpandRow?: (row: TestRow) => boolean;
+      expandRowLabel?: (row: TestRow) => string;
+      expandedIds?: string[];
+      onExpandedChange?: (ids: string[]) => void;
+    }) {
+      const table = useDataTable<TestRow>({
+        columns: testColumns,
+        data: "data" in props ? props.data : testData,
+        loading: props.loading,
+        error: props.error,
+        onClickRow: props.onClickRow,
+        onSelectionChange: props.onSelectionChange,
+        rowActions: props.rowActions,
+        rowExpansion: props.renderExpandedRow
+          ? // Cast because the harness keeps flat props and picks the union
+            // branch at runtime; the branches themselves are covered by the
+            // type-level test below.
+            ({
+              render: props.renderExpandedRow,
+              canExpand: props.canExpandRow,
+              getLabel: props.expandRowLabel,
+              expandedIds: props.expandedIds,
+              onChange: props.onExpandedChange,
+            } as RowExpansionOptions<TestRow>)
+          : undefined,
+      });
+      return (
+        <DataTable.Root value={table}>
+          <DataTable.Table />
+        </DataTable.Root>
+      );
+    }
+
+    it("rejects incoherent rowExpansion configs at compile time", () => {
+      const base = { columns: testColumns, data: testData };
+      type Options = UseDataTableOptions<TestRow>;
+
+      // The directive sits on the offending property, which is where TS reports
+      // the mismatch.
+      const missingOnChange: Options = {
+        ...base,
+        // @ts-expect-error — `expandedIds` without `onChange` is inert. Making it
+        // unrepresentable is what removed the hook's dev-time warning effect.
+        rowExpansion: { render: detail, expandedIds: ["1"] },
+      };
+
+      const labelWithoutRender: Options = {
+        ...base,
+        // @ts-expect-error — a label with no renderer does nothing.
+        rowExpansion: { getLabel: (r: TestRow) => r.name },
+      };
+
+      const controlled: Options = {
+        ...base,
+        rowExpansion: { render: detail, expandedIds: ["1"], onChange: () => {} },
+      };
+      const uncontrolled: Options = { ...base, rowExpansion: { render: detail } };
+      // `onChange` alone stays legal — in uncontrolled mode it is a notification.
+      const notified: Options = {
+        ...base,
+        rowExpansion: { render: detail, onChange: () => {} },
+      };
+
+      expect([
+        missingOnChange,
+        labelWithoutRender,
+        controlled,
+        uncontrolled,
+        notified,
+      ]).toHaveLength(5);
+    });
+
+    it("renders no expand column when renderExpandedRow is absent", () => {
+      const { container } = render(<ExpandHarness />, { wrapper });
+
+      expect(container.querySelector(EXPAND_TH)).toBeNull();
+      expect(screen.queryByLabelText("Expand row")).toBeNull();
+    });
+
+    it("renders an expand column when renderExpandedRow is provided", () => {
+      const { container } = render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
+
+      const th = container.querySelector(EXPAND_TH);
+      expect(th).not.toBeNull();
+      // Never an empty <th> — the header carries sr-only text.
+      expect(th?.textContent).toBe("Expand");
+      expect(screen.getAllByLabelText("Expand row")).toHaveLength(2);
+    });
+
+    it("clicking the chevron reveals the render prop's content", () => {
+      render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
+
+      expect(screen.queryByText("Details for Alice")).toBeNull();
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+
+      expect(screen.getByText("Details for Alice")).toBeDefined();
+      // Only the clicked row opens.
+      expect(screen.queryByText("Details for Bob")).toBeNull();
+    });
+
+    it("clicking the chevron again collapses the row", async () => {
+      render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
+
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+      expect(screen.getByText("Details for Alice")).toBeDefined();
+
+      fireEvent.click(screen.getByLabelText("Collapse row"));
+
+      // The row stays mounted while the collapse transition plays, so removal
+      // is asynchronous — `aria-expanded` flips immediately, the DOM catches up.
+      await waitFor(() => expect(screen.queryByText("Details for Alice")).toBeNull());
+    });
+
+    it("keeps the detail row mounted while collapsing, marked data-state='closed'", async () => {
+      const { container } = render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
+
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+      expect(container.querySelector(`${EXPANDED_ROW}[data-state="open"]`)).not.toBeNull();
+
+      fireEvent.click(screen.getByLabelText("Collapse row"));
+
+      // Still in the DOM, but flipped to the closed state — this is what gives
+      // the exit transition something to animate. Without the presence state
+      // machine React would remove the row on the same tick and it would snap.
+      expect(container.querySelector(`${EXPANDED_ROW}[data-state="closed"]`)).not.toBeNull();
+      // The trigger's state is not deferred — it reports collapsed right away
+      // (both rows now read "Expand row", so index into them).
+      expect(screen.getAllByLabelText("Expand row")[0].getAttribute("aria-expanded")).toBe("false");
+
+      await waitFor(() => expect(container.querySelector(EXPANDED_ROW)).toBeNull());
+    });
+
+    it("exposes aria-expanded on the trigger, flipping false → true", () => {
+      render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
+
+      const trigger = screen.getAllByLabelText("Expand row")[0];
+      expect(trigger.getAttribute("aria-expanded")).toBe("false");
+
+      fireEvent.click(trigger);
+      expect(screen.getByLabelText("Collapse row").getAttribute("aria-expanded")).toBe("true");
+    });
+
+    it("points aria-controls at a present element while expanded, and omits it while collapsed", () => {
+      render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
+
+      const trigger = screen.getAllByLabelText("Expand row")[0];
+      // Must never point at an id that is absent from the DOM.
+      expect(trigger.getAttribute("aria-controls")).toBeNull();
+
+      fireEvent.click(trigger);
+      const controls = screen.getByLabelText("Collapse row").getAttribute("aria-controls");
+      expect(controls).toBeTruthy();
+      expect(document.getElementById(controls as string)).not.toBeNull();
+    });
+
+    it("spans the detail cell across selection + expand + columns + actions", () => {
+      const { container } = render(
+        <ExpandHarness
+          renderExpandedRow={detail}
+          onSelectionChange={vi.fn()}
+          rowActions={[{ id: "edit", label: "Edit", onClick: vi.fn() }]}
+        />,
+        { wrapper },
+      );
+
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+
+      // 1 selection + 1 expand + 2 visible columns + 1 actions
+      expect(container.querySelector(`${EXPANDED_ROW} td`)?.getAttribute("colspan")).toBe("5");
+    });
+
+    it("keeps several rows open at once", () => {
+      const { container } = render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
+
+      const triggers = screen.getAllByLabelText("Expand row");
+      fireEvent.click(triggers[0]);
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]); // Bob's, after Alice's flipped
+
+      expect(screen.getByText("Details for Alice")).toBeDefined();
+      expect(screen.getByText("Details for Bob")).toBeDefined();
+      expect(container.querySelectorAll(EXPANDED_ROW)).toHaveLength(2);
+    });
+
+    it("does not fire onClickRow when the chevron is used", () => {
+      const onClickRow = vi.fn();
+      render(<ExpandHarness renderExpandedRow={detail} onClickRow={onClickRow} />, { wrapper });
+
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+
+      expect(onClickRow).not.toHaveBeenCalled();
+      expect(screen.getByText("Details for Alice")).toBeDefined();
+    });
+
+    it("renders no chevron for rows without an id", () => {
+      // Expansion is keyed by id, so an id-less row gets no chevron at all
+      // rather than a disabled one — a row must never be un-toggleable.
+      const mixed: DataTableData<TestRow> = {
+        rows: [
+          { id: "1", name: "Alice", status: "Active" },
+          { name: "Bob", status: "Inactive" } as TestRow,
+        ],
+      };
+      const { container } = render(<ExpandHarness data={mixed} renderExpandedRow={detail} />, {
+        wrapper,
+      });
+
+      expect(screen.getAllByLabelText("Expand row")).toHaveLength(1);
+      // The cell is still rendered (empty), so the column count stays consistent.
+      const bodyRows = container.querySelectorAll('[data-slot="data-table-row"]');
+      expect(bodyRows[1].querySelectorAll("td")).toHaveLength(3);
+    });
+
+    it("renders no chevron for a row that canExpandRow rejects", () => {
+      render(
+        <ExpandHarness renderExpandedRow={detail} canExpandRow={(row) => row.name === "Alice"} />,
+        { wrapper },
+      );
+
+      const triggers = screen.getAllByLabelText("Expand row");
+      expect(triggers).toHaveLength(1);
+      fireEvent.click(triggers[0]);
+      expect(screen.getByText("Details for Alice")).toBeDefined();
+    });
+
+    it("builds a contextual accessible name from expandRowLabel", () => {
+      render(<ExpandHarness renderExpandedRow={detail} expandRowLabel={(row) => row.name} />, {
+        wrapper,
+      });
+
+      const trigger = screen.getByLabelText("Expand row Alice");
+      expect(screen.getByLabelText("Expand row Bob")).toBeDefined();
+
+      fireEvent.click(trigger);
+      expect(screen.getByLabelText("Collapse row Alice")).toBeDefined();
+    });
+
+    it("renders the panel as a named region", () => {
+      render(<ExpandHarness renderExpandedRow={detail} expandRowLabel={(row) => row.name} />, {
+        wrapper,
+      });
+
+      fireEvent.click(screen.getByLabelText("Expand row Alice"));
+
+      const region = screen.getByRole("region", { name: "Alice details" });
+      expect(region.textContent).toBe("Details for Alice");
+    });
+
+    it("returns focus to the trigger when the panel collapses while focus is inside it", async () => {
+      render(<ExpandHarness renderExpandedRow={focusableDetail} />, { wrapper });
+
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+
+      const inner = screen.getByTestId("inner");
+      act(() => inner.focus());
+      expect(document.activeElement).toBe(inner);
+
+      const trigger = screen.getByLabelText("Collapse row");
+      fireEvent.click(trigger);
+
+      // The handoff runs on unmount, which now waits for the collapse
+      // transition. Without it, focus would fall to <body> and the user would
+      // lose their place in the table.
+      await waitFor(() => expect(document.activeElement).toBe(trigger));
+    });
+
+    it("renders the matching rows open from a controlled expandedIds", () => {
+      const { container } = render(
+        <ExpandHarness renderExpandedRow={detail} expandedIds={["2"]} onExpandedChange={vi.fn()} />,
+        { wrapper },
+      );
+
+      expect(screen.getByText("Details for Bob")).toBeDefined();
+      expect(screen.queryByText("Details for Alice")).toBeNull();
+      expect(container.querySelectorAll(EXPANDED_ROW)).toHaveLength(1);
+    });
+
+    it("reports controlled toggles through onExpandedChange without changing internal state", () => {
+      const onExpandedChange = vi.fn();
+      render(
+        <ExpandHarness
+          renderExpandedRow={detail}
+          expandedIds={[]}
+          onExpandedChange={onExpandedChange}
+        />,
+        { wrapper },
+      );
+
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+
+      expect(onExpandedChange).toHaveBeenCalledWith(["1"]);
+      // The caller owns the state — nothing opens until `expandedIds` changes.
+      expect(screen.queryByText("Details for Alice")).toBeNull();
+    });
+
+    it("pins the expand column left at the selection column's measured offset", () => {
+      const { container } = render(
+        <ExpandHarness renderExpandedRow={detail} onSelectionChange={vi.fn()} />,
+        { wrapper },
+      );
+
+      const th = container.querySelector<HTMLElement>(EXPAND_TH);
+      expect(th?.style.position).toBe("sticky");
+      expect(th?.style.left).toBe("52px");
+      // The freeze seam moves off the selection column onto the expand column.
+      const selectionTh = container.querySelector<HTMLElement>(
+        '[data-slot="data-table-header"] th[data-col-key="__datatable_selection__"]',
+      );
+      expect(th?.className).toContain("data-pin-shadow-left");
+      expect(selectionTh?.className).not.toContain("data-pin-shadow-left");
+    });
+
+    it("includes an expand cell in the skeleton rows", () => {
+      const { container } = render(
+        <ExpandHarness data={undefined} loading renderExpandedRow={detail} />,
+        { wrapper },
+      );
+
+      const loadingRow = container.querySelector('[data-datatable-state="loading"]');
+      // 1 expand + 2 visible columns — row heights match before and after load.
+      expect(loadingRow?.querySelectorAll("td")).toHaveLength(3);
+    });
+
+    it("spans the expand column in the empty and error status rows", () => {
+      const { container: emptyContainer } = render(
+        <ExpandHarness data={{ rows: [] }} renderExpandedRow={detail} />,
+        { wrapper },
+      );
+      expect(
+        emptyContainer.querySelector('[data-datatable-state="empty"] td')?.getAttribute("colspan"),
+      ).toBe("3");
+
+      const { container: errorContainer } = render(
+        <ExpandHarness data={undefined} error={new Error("boom")} renderExpandedRow={detail} />,
+        { wrapper },
+      );
+      expect(
+        errorContainer.querySelector('[data-datatable-state="error"] td')?.getAttribute("colspan"),
+      ).toBe("3");
+    });
+
+    // -----------------------------------------------------------------------
+    // Regressions found in review
+    // -----------------------------------------------------------------------
+
+    it("keeps row keys unique when an id-less row's index matches another row's id", () => {
+      // `{id: "1"}` at index 0 and an id-less row at index 1 both keyed to "1"
+      // (React stringifies keys), so React reconciled two siblings under one key.
+      // The keys are namespaced now, so the two spaces can't overlap.
+      const err = vi.spyOn(console, "error").mockImplementation(() => {});
+      const collidingData: DataTableData<TestRow> = {
+        rows: [
+          { id: "1", name: "Alice", status: "Active" },
+          { name: "Bob", status: "Inactive" } as TestRow,
+          { id: "2", name: "Carol", status: "Active" },
+        ],
+      };
+      render(<ExpandHarness data={collidingData} renderExpandedRow={detail} />, { wrapper });
+
+      expect(err.mock.calls.filter((call) => String(call[0]).includes("same key"))).toHaveLength(0);
+      err.mockRestore();
+    });
+
+    it("closes a row that becomes non-expandable while open", async () => {
+      // `canExpandRow` gates both directions. A row whose predicate flips to
+      // false goes quiet: no panel, no chevron. Its id stays in `expandedIds`
+      // but is inert — the alternative (letting the set alone open a panel)
+      // renders detail content for a row the consumer told us to skip.
+      function Harness({ canExpand }: { canExpand: boolean }) {
+        return (
+          <ExpandHarness
+            renderExpandedRow={detail}
+            canExpandRow={() => canExpand}
+            expandedIds={["1"]}
+            onExpandedChange={vi.fn()}
+          />
+        );
+      }
+      const { rerender } = render(<Harness canExpand />, { wrapper });
+      expect(screen.getByText("Details for Alice")).toBeDefined();
+
+      rerender(<Harness canExpand={false} />);
+
+      await waitFor(() => expect(screen.queryByText("Details for Alice")).toBeNull());
+      expect(screen.queryByLabelText("Collapse row")).toBeNull();
+      expect(screen.queryByLabelText("Expand row")).toBeNull();
+    });
+
+    it("does not open a panel for a row canExpandRow rejects, even when its id is in expandedIds", () => {
+      // Restoring `expandedIds` from a URL or storage must not run
+      // `renderExpandedRow` against a row the consumer excluded — that row may
+      // have no detail data at all.
+      const renderExpandedRow = vi.fn(detail);
+      render(
+        <ExpandHarness
+          renderExpandedRow={renderExpandedRow}
+          canExpandRow={() => false}
+          expandedIds={["1", "2"]}
+          onExpandedChange={vi.fn()}
+        />,
+        { wrapper },
+      );
+
+      expect(screen.queryByText("Details for Alice")).toBeNull();
+      expect(screen.queryByRole("region")).toBeNull();
+      expect(renderExpandedRow).not.toHaveBeenCalled();
+    });
+
+    it("marks the closing panel inert so it leaves the tab order and a11y tree", async () => {
+      const { container } = render(<ExpandHarness renderExpandedRow={focusableDetail} />, {
+        wrapper,
+      });
+
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+      const panel = container.querySelector(`${EXPANDED_ROW} section`);
+      expect(panel?.hasAttribute("inert")).toBe(false);
+
+      fireEvent.click(screen.getByLabelText("Collapse row"));
+
+      // Zero height and zero opacity still leave descendants focusable and
+      // announced, so the closing window needs `inert` explicitly.
+      expect(container.querySelector(`${EXPANDED_ROW} section`)?.hasAttribute("inert")).toBe(true);
+      await waitFor(() => expect(container.querySelector(EXPANDED_ROW)).toBeNull());
+    });
+
+    it("sanitises whitespace in row ids so the panel id and aria-controls stay valid", () => {
+      const spaced: DataTableData<TestRow> = {
+        rows: [{ id: "ORD 4471", name: "Alice", status: "Active" }],
+      };
+      render(<ExpandHarness data={spaced} renderExpandedRow={detail} />, { wrapper });
+
+      fireEvent.click(screen.getByLabelText("Expand row"));
+
+      const controls = screen
+        .getByLabelText("Collapse row")
+        .getAttribute("aria-controls") as string;
+      // `aria-controls` is an IDREF *list*: a space would split it into two
+      // references that resolve to nothing, silently dropping the association.
+      expect(controls).not.toMatch(/\s/);
+      expect(document.getElementById(controls)).not.toBeNull();
+    });
+
+    it("moves focus to the table container when the whole row unmounts from under it", () => {
+      // The collapse-by-click test covers the case where the trigger survives.
+      // Here the row disappears (refetch/filter/pagination) while focus is in the
+      // panel, so the trigger is gone too and focus would otherwise hit <body>.
+      const { container, rerender } = render(
+        <ExpandHarness data={testData} renderExpandedRow={focusableDetail} />,
+        { wrapper },
+      );
+
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+      const inner = screen.getByTestId("inner");
+      act(() => inner.focus());
+      expect(document.activeElement).toBe(inner);
+
+      // Alice drops out of the result set entirely.
+      rerender(
+        <ExpandHarness
+          data={{ rows: [{ id: "2", name: "Bob", status: "Inactive" }] }}
+          renderExpandedRow={focusableDetail}
+        />,
+      );
+
+      const scrollContainer = container.querySelector<HTMLElement>('[data-slot="table-container"]');
+      expect(document.activeElement).toBe(scrollContainer);
+      expect(document.activeElement).not.toBe(document.body);
+    });
+
+    it("does not measure a nested DataTable's header into the outer table's widths", () => {
+      // Shared column keys must not let a nested header overwrite the outer width.
+      vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+        function (this: HTMLElement) {
+          if (this.dataset.colKey !== "__datatable_selection__") return new DOMRect();
+          return new DOMRect(0, 0, this.closest("[data-nested]") ? 40 : 70, 40);
+        },
+      );
+
+      function NestedTable() {
+        const table = useDataTable<TestRow>({
+          columns: testColumns,
+          data: { rows: [testData.rows[0]] },
+          onSelectionChange: vi.fn(),
+        });
+        return (
+          <div data-nested>
+            <DataTable.Root value={table}>
+              <DataTable.Table />
+            </DataTable.Root>
+          </div>
+        );
+      }
+
+      let api!: UseDataTableReturn<TestRow>;
+      function Harness() {
+        const table = useDataTable<TestRow>({
+          columns: testColumns,
+          data: testData,
+          onSelectionChange: vi.fn(),
+          rowExpansion: { render: () => <NestedTable /> },
+        });
+        api = table;
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { container } = render(<Harness />, { wrapper });
+
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+      expect(container.querySelectorAll("table").length).toBeGreaterThan(1);
+
+      const selectionHeaders = container.querySelectorAll<HTMLElement>(
+        '[data-slot="data-table-header"] th[data-col-key="__datatable_selection__"]',
+      );
+      expect(selectionHeaders).toHaveLength(2);
+      expect(Array.from(selectionHeaders, (cell) => cell.getBoundingClientRect().width)).toEqual([
+        70, 40,
+      ]);
+
+      // Resubscribe while the nested table is mounted to exercise the ownership filter.
+      act(() => api.toggleColumn("Status"));
+
+      expect(container.querySelector<HTMLElement>(EXPAND_TH)?.style.left).toBe("70px");
+    });
+
+    it("keeps collapseAllRows stable and inert while nothing is expanded", () => {
+      // The documented "collapse on page change" recipe lists it in an effect's
+      // dependency array; an unstable identity plus an unconditional state write
+      // there loops until React bails with a max-update-depth error.
+      const seen: (() => void)[] = [];
+      const onExpandedChange = vi.fn();
+      function Harness() {
+        const table = useDataTable<TestRow>({
+          columns: testColumns,
+          data: testData,
+          rowExpansion: { render: detail, onChange: onExpandedChange },
+        });
+        if (table.collapseAllRows) seen.push(table.collapseAllRows);
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      const { rerender } = render(<Harness />, { wrapper });
+      rerender(<Harness />);
+
+      expect(seen.length).toBeGreaterThan(1);
+      expect(seen[seen.length - 1]).toBe(seen[0]);
+
+      // Collapsing an already-collapsed table is a no-op, not a spurious event.
+      act(() => seen[0]());
+      expect(onExpandedChange).not.toHaveBeenCalled();
+
+      // The identity must survive an actual expansion, not just a re-render.
+      // `expandedRowIds` is a fresh Set on every expansion change, so having it
+      // in the useCallback deps kept the identity churning — and the documented
+      // effect recipe then re-fired on expand and collapsed the row the user had
+      // just opened. A rerender-only assertion never sees that.
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+      expect(screen.getByText("Details for Alice")).toBeDefined();
+      expect(seen[seen.length - 1]).toBe(seen[0]);
+    });
+
+    it("calls onExpandedChange once per toggle under StrictMode", () => {
+      const onExpandedChange = vi.fn();
+      render(<ExpandHarness renderExpandedRow={detail} onExpandedChange={onExpandedChange} />, {
+        wrapper: strictWrapper,
+      });
+
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+
+      expect(onExpandedChange).toHaveBeenCalledTimes(1);
+      expect(onExpandedChange).toHaveBeenCalledWith(["1"]);
+    });
+
+    it("composes several expansion toggles dispatched in one commit", () => {
+      const onChange = vi.fn();
+      const { result } = renderHook(() =>
+        useDataTable<TestRow>({
+          columns: testColumns,
+          data: testData,
+          rowExpansion: { render: detail, onChange },
+        }),
+      );
+
+      act(() => {
+        result.current.toggleRowExpansion?.(testData.rows[0]);
+        result.current.toggleRowExpansion?.(testData.rows[1]);
+      });
+
+      expect(result.current.expandedIds).toEqual(["1", "2"]);
+      expect(onChange).toHaveBeenLastCalledWith(["1", "2"]);
+    });
+
+    it("applies collapseAllRows before a toggle in the same commit", () => {
+      const { result } = renderHook(() =>
+        useDataTable<TestRow>({
+          columns: testColumns,
+          data: testData,
+          rowExpansion: { render: detail },
+        }),
+      );
+
+      act(() => {
+        result.current.toggleRowExpansion?.(testData.rows[0]);
+        result.current.toggleRowExpansion?.(testData.rows[1]);
+      });
+
+      act(() => {
+        result.current.collapseAllRows?.();
+        result.current.toggleRowExpansion?.(testData.rows[1]);
+      });
+
+      expect(result.current.expandedIds).toEqual(["2"]);
+    });
+
+    it("keeps toggleRowExpansion stable across an expansion", () => {
+      const seen: ((row: TestRow) => void)[] = [];
+      function Harness() {
+        const table = useDataTable<TestRow>({
+          columns: testColumns,
+          data: testData,
+          rowExpansion: { render: detail },
+        });
+        if (table.toggleRowExpansion) seen.push(table.toggleRowExpansion);
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+      render(<Harness />, { wrapper });
+
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+
+      expect(seen.length).toBeGreaterThan(1);
+      expect(seen[seen.length - 1]).toBe(seen[0]);
+    });
+
+    it("leaves --data-table-viewport unset when the scrollport measures zero", () => {
+      // jsdom reports clientWidth 0, matching a table mounted inside a hidden
+      // container. Writing `0px` would collapse every panel via min(100%, 0px).
+      const { container } = render(<ExpandHarness renderExpandedRow={detail} />, { wrapper });
+
+      const scrollContainer = container.querySelector<HTMLElement>('[data-slot="table-container"]');
+      expect(scrollContainer?.style.getPropertyValue("--data-table-viewport")).toBe("");
+
+      // The panel therefore falls back to 100% rather than 0.
+      fireEvent.click(screen.getAllByLabelText("Expand row")[0]);
+      expect(screen.getByText("Details for Alice")).toBeDefined();
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/expanded-row.tsx b/packages/core/src/components/data-table/expanded-row.tsx
new file mode 100644
index 00000000..46702720
--- /dev/null
+++ b/packages/core/src/components/data-table/expanded-row.tsx
@@ -0,0 +1,250 @@
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Table } from "@/components/table";
+import { Button } from "@/components/button";
+import { useDataTableT } from "./i18n";
+
+// Drives both the CSS transition and how long the detail row stays mounted while
+// collapsing, so the two cannot drift apart.
+const EXPAND_TRANSITION_MS = 300;
+
+// `useLayoutEffect` warns during SSR; the measurement it drives is client-only,
+// so fall back to `useEffect` on the server.
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+
+interface RowExpandToggleProps {
+  id: string;
+  expanded: boolean;
+  label: string | undefined;
+  panelId: string;
+  onToggle: () => void;
+}
+
+/**
+ * The chevron trigger. A native `<button>` (via app-shell's `Button`), so
+ * Enter/Space activation and the focus ring come for free — no custom key
+ * handling. `aria-expanded` is what announces the state change on activation.
+ *
+ * @internal
+ */
+function RowExpandToggle({ id, expanded, label, panelId, onToggle }: RowExpandToggleProps) {
+  const t = useDataTableT();
+  // A contextual name ("Expand row INV-1001") — "Expand row" repeated down the
+  // column conveys nothing. The locale owns word order and the unnamed fallback.
+  const name = t(expanded ? "collapseRow" : "expandRow", { label });
+
+  return (
+    <Button
+      id={id}
+      type="button"
+      variant="ghost"
+      size="icon"
+      aria-expanded={expanded}
+      // Only while expanded — it must never point at an id absent from the DOM.
+      aria-controls={expanded ? panelId : undefined}
+      aria-label={name}
+      onClick={onToggle}
+    >
+      <ChevronRight
+        className={cn(
+          "astw:size-4 astw:transition-transform astw:motion-reduce:transition-none",
+          expanded && "astw:rotate-90",
+        )}
+      />
+    </Button>
+  );
+}
+
+// =============================================================================
+// DataTableExpandedRow (internal)
+// =============================================================================
+
+interface DataTableExpandedRowProps {
+  open: boolean;
+  totalColSpan: number;
+  panelId: string;
+  triggerId: string;
+  label: string | undefined;
+  render: () => ReactNode;
+}
+
+/**
+ * The detail row: one full-width `<tr>` with a single `colSpan` cell, rendered
+ * immediately after its parent row so forward-tabbing reaches the panel next.
+ *
+ * Mounted for every expandable row (returning `null` while closed) so the
+ * collapse has something to animate. `render` is a thunk, not `children`, so
+ * `rowExpansion.render` only runs while the panel is on screen.
+ *
+ * @internal
+ */
+function DataTableExpandedRow({
+  open,
+  totalColSpan,
+  panelId,
+  triggerId,
+  label,
+  render,
+}: DataTableExpandedRowProps) {
+  // `present` is DOM presence, `entered` the visual state. Opening must mount
+  // collapsed so the transition has a "from" value; closing must stay mounted
+  // until it has played out.
+  const [present, setPresent] = useState(open);
+  const [entered, setEntered] = useState(false);
+
+  useIsomorphicLayoutEffect(() => {
+    if (open) setPresent(true);
+  }, [open]);
+
+  // One frame after mounting, so `0fr → 1fr` is a transition, not an initial value.
+  useIsomorphicLayoutEffect(() => {
+    if (!open || !present) return;
+    if (typeof requestAnimationFrame !== "function") {
+      // No frame scheduler — reveal immediately rather than stay stuck collapsed.
+      setEntered(true);
+      return;
+    }
+    const frame = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(frame);
+  }, [open, present]);
+
+  // A timer rather than `transitionend`: under `prefers-reduced-motion` there is
+  // no transition, so the event would never fire and the row would never unmount.
+  useEffect(() => {
+    if (open || !present) return;
+    setEntered(false);
+    const timer = setTimeout(() => setPresent(false), EXPAND_TRANSITION_MS);
+    return () => clearTimeout(timer);
+  }, [open, present]);
+
+  if (!present) return null;
+
+  return (
+    <ExpandedRowContent
+      open={open}
+      entered={entered}
+      totalColSpan={totalColSpan}
+      panelId={panelId}
+      triggerId={triggerId}
+      label={label}
+      render={render}
+    />
+  );
+}
+
+interface ExpandedRowContentProps extends DataTableExpandedRowProps {
+  entered: boolean;
+}
+
+/**
+ * The rendered detail row. Split from the presence owner above so that it truly
+ * unmounts when the collapse finishes: the focus handoff runs from a layout
+ * effect's cleanup, which only fires before React detaches the nodes when the
+ * component itself is removed. Keeping it in the always-mounted parent would run
+ * the cleanup after the panel had already left the DOM, by which point
+ * `document.activeElement` has fallen back to `<body>` and the handoff is a
+ * no-op — the exact bug it exists to prevent.
+ *
+ * @internal
+ */
+function ExpandedRowContent({
+  open,
+  entered,
+  totalColSpan,
+  panelId,
+  triggerId,
+  label,
+  render,
+}: ExpandedRowContentProps) {
+  const t = useDataTableT();
+  const panelRef = useRef<HTMLElement>(null);
+
+  // Hand focus back when the collapse starts, before the panel goes `inert`
+  // below — making an element inert while it holds focus drops focus to <body>.
+  useIsomorphicLayoutEffect(() => {
+    if (open) return;
+    const panel = panelRef.current;
+    if (!panel || !panel.contains(document.activeElement)) return;
+    document.getElementById(triggerId)?.focus();
+  }, [open, triggerId]);
+
+  // Safety net for the row unmounting outright (refetch, filter, pagination).
+  // Both targets are resolved at setup, while still in the document; by cleanup
+  // the trigger may be gone too, so the scroll container is the fallback.
+  useIsomorphicLayoutEffect(() => {
+    const panel = panelRef.current;
+    const trigger = document.getElementById(triggerId);
+    const container = panel?.closest<HTMLElement>("[data-slot='table-container']") ?? null;
+    return () => {
+      if (!panel || !panel.contains(document.activeElement)) return;
+      if (trigger?.isConnected) {
+        trigger.focus();
+        return;
+      }
+      if (container?.isConnected) {
+        // Borrow `tabindex` only for the focus call: a scrollable div is tabbable
+        // by default *unless* the author sets one, and this container is shared
+        // by every `Table.Root` consumer.
+        const hadTabIndex = container.hasAttribute("tabindex");
+        if (!hadTabIndex) container.setAttribute("tabindex", "-1");
+        container.focus();
+        if (!hadTabIndex) container.removeAttribute("tabindex");
+      }
+    };
+  }, [triggerId]);
+
+  return (
+    <Table.Row
+      data-slot="data-table-expanded-row"
+      data-state={open ? "open" : "closed"}
+      className="astw:bg-muted/30 astw:hover:bg-transparent"
+    >
+      {/* `p-0!` — this cell is both first and last, and `Table.Cell`'s
+          `first:pl-6 last:pr-6` outranks a plain `p-0` on specificity, insetting
+          the sticky panel by 24px. */}
+      <Table.Cell colSpan={totalColSpan} className="astw:p-0!">
+        {/* The colSpan cell spans the whole table, so pin the panel to the left
+            edge of the scrollport or it sits off-screen once scrolled. The
+            `min(100%, …)` makes this a no-op when the table already fits. */}
+        <div
+          className="astw:sticky astw:left-0"
+          style={{ width: "min(100%, var(--data-table-viewport, 100%))" }}
+        >
+          {/* `0fr → 1fr` resolves to the panel's exact natural height, so consumer
+              content of any size is neither clipped nor left with dead time at the
+              end. The `<tr>`/`<td>` are left alone — rows size to their content,
+              and animating row heights under `border-collapse` is unreliable. */}
+          <div
+            className="astw:grid astw:transition-[grid-template-rows,opacity] astw:ease-out astw:motion-reduce:transition-none"
+            style={{
+              gridTemplateRows: entered ? "1fr" : "0fr",
+              opacity: entered ? 1 : 0,
+              transitionDuration: `${EXPAND_TRANSITION_MS}ms`,
+            }}
+          >
+            {/* `min-h-0` — grid items default to `min-height: auto` and would
+                refuse to collapse. `overflow-y-hidden` clips mid-reveal;
+                `overflow-x-auto` keeps wide content reachable. */}
+            <div className="astw:min-h-0 astw:overflow-x-auto astw:overflow-y-hidden">
+              {/* A named `<section>` maps to `role="region"`. `inert` covers the
+                  closing window — zero height and opacity still leave descendants
+                  focusable and announced. */}
+              <section
+                ref={panelRef}
+                id={panelId}
+                inert={open ? undefined : true}
+                aria-label={t("expandedDetails", { label })}
+                className="astw:px-6 astw:py-3"
+              >
+                {render()}
+              </section>
+            </div>
+          </div>
+        </div>
+      </Table.Cell>
+    </Table.Row>
+  );
+}
+
+export { RowExpandToggle, DataTableExpandedRow };
diff --git a/packages/core/src/components/data-table/filter-value-utils.ts b/packages/core/src/components/data-table/filter-value-utils.ts
deleted file mode 100644
index d4b0b1e8..00000000
--- a/packages/core/src/components/data-table/filter-value-utils.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-const DECIMAL_RE = /^([+-]?)(?:(\d+)(?:\.(\d*))?|\.(\d+))(?:[eE]([+-]?\d+))?$/;
-
-export function isDecimalFilterValueValid(value: string): boolean {
-  return DECIMAL_RE.test(value.trim());
-}
-
-function decimalParts(value: string) {
-  const match = DECIMAL_RE.exec(value.trim());
-  if (!match) return undefined;
-  const fraction = match[3] ?? match[4] ?? "";
-  const digits = `${match[2] ?? ""}${fraction}`.replace(/^0+/, "");
-  const sign = match[1] === "-" ? -1 : 1;
-  return {
-    digits,
-    sign: digits === "" ? 0 : sign,
-    magnitude: BigInt(digits.length - fraction.length) + BigInt(match[5] ?? "0"),
-  };
-}
-
-export function isDecimalRangeOrdered(min: string, max: string): boolean {
-  const lower = decimalParts(min);
-  const upper = decimalParts(max);
-  if (!lower || !upper) return false;
-  if (lower.sign !== upper.sign) return lower.sign < upper.sign;
-  if (lower.sign === 0) return true;
-
-  // Compare magnitude, then significant digits, without rounding or expanding exponents.
-  if (lower.magnitude !== upper.magnitude) {
-    return lower.sign === 1 ? lower.magnitude < upper.magnitude : lower.magnitude > upper.magnitude;
-  }
-  const width = Math.max(lower.digits.length, upper.digits.length);
-  const left = lower.digits.padEnd(width, "0");
-  const right = upper.digits.padEnd(width, "0");
-  return lower.sign === 1 ? left <= right : left >= right;
-}
diff --git a/packages/core/src/components/data-table/filters/add-panel.test.tsx b/packages/core/src/components/data-table/filters/add-panel.test.tsx
new file mode 100644
index 00000000..3aeec2eb
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/add-panel.test.tsx
@@ -0,0 +1,288 @@
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { Column } from "../types";
+import {
+  TestFilters,
+  type TestRow,
+  dateColumn,
+  datetimeColumn,
+  makeControl,
+  numberColumn,
+  stringColumn,
+  timeColumn,
+  timeZoneWrapper,
+  wrapper,
+} from "./test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+});
+
+const stringContainsOnlyColumn: Column<TestRow> = {
+  ...stringColumn,
+  filter: { type: "string", field: "name", operators: ["contains"] },
+};
+
+const stringEqOnlyColumn: Column<TestRow> = {
+  ...stringColumn,
+  filter: { type: "string", field: "name", operators: ["eq"] },
+};
+
+const stringInvalidOperatorColumn: Column<TestRow> = {
+  ...stringColumn,
+  filter: {
+    type: "string",
+    field: "name",
+    operators: ["gt"] as unknown as ["contains"],
+  },
+};
+
+describe("AddFilterPanel", () => {
+  it("opens a panel listing every filterable field", async () => {
+    // The add-filter surface is a single popover with three columns
+    // (field ▸ condition ▸ value); the first column lists each filterable field
+    // as a button.
+    const user = userEvent.setup();
+    const control = makeControl({ filters: [] });
+    render(<TestFilters control={control} columns={[stringColumn, numberColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+
+    expect(await screen.findByRole("button", { name: /^Name$/ })).toBeDefined();
+    expect(screen.getByRole("button", { name: /^Count$/ })).toBeDefined();
+  });
+
+  it("the field search filters the field list and shows an empty state", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({ filters: [] });
+    render(<TestFilters control={control} columns={[stringColumn, numberColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+    const search = await screen.findByPlaceholderText("Search fields");
+
+    fireEvent.change(search, { target: { value: "coun" } });
+    expect(screen.getByRole("button", { name: /^Count$/ })).toBeDefined();
+    expect(screen.queryByRole("button", { name: /^Name$/ })).toBeNull();
+
+    fireEvent.change(search, { target: { value: "zzz" } });
+    expect(screen.getByText(/no fields match/i)).toBeDefined();
+
+    fireEvent.change(search, { target: { value: "" } });
+    expect(screen.getByRole("button", { name: /^Name$/ })).toBeDefined();
+    expect(screen.getByRole("button", { name: /^Count$/ })).toBeDefined();
+  });
+
+  it("advances the selection when the search filters out the active field", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({ filters: [] });
+    render(<TestFilters control={control} columns={[stringColumn, numberColumn]} />, { wrapper });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+    // Select the numeric "Count" field — its editor has no "contains" operator.
+    await user.click(await screen.findByRole("button", { name: /^Count$/ }));
+    expect(screen.queryByRole("button", { name: "contains" })).toBeNull();
+
+    // Searching "na" filters the list to "Name" only, filtering out the active
+    // "Count" field. Selection must advance to "Name" so the list and the editor
+    // stay in sync — the string editor's "contains" operator now appears.
+    fireEvent.change(screen.getByPlaceholderText("Search fields"), { target: { value: "na" } });
+    expect(await screen.findByRole("button", { name: "contains" })).toBeDefined();
+  });
+
+  it("selecting a field shows the value editor with an Apply button", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({ filters: [] });
+    render(<TestFilters control={control} columns={[stringColumn, numberColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+    await user.click(await screen.findByRole("button", { name: /^Count$/ }));
+
+    // Amount/Count is numeric → condition column + a value input + Apply.
+    expect(await screen.findByRole("button", { name: /^Apply$/ })).toBeDefined();
+  });
+
+  it("uses contains as the default operator for an unconfigured string column", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({ filters: [] });
+    render(<TestFilters control={control} columns={[stringColumn]} />, { wrapper });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+
+    const panel = document.querySelector(
+      '[data-slot="data-table-filter-panel"]',
+    ) as HTMLElement | null;
+    expect(panel).not.toBeNull();
+
+    const textboxes = within(panel as HTMLElement).getAllByRole("textbox");
+    await user.type(textboxes[textboxes.length - 1] as HTMLInputElement, "Bob");
+    await user.click(screen.getByRole("button", { name: /^Apply$/ }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Bob", {
+      caseSensitive: false,
+    });
+  });
+
+  it("does not widen an invalid runtime string allowlist back to every operator", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({ filters: [] });
+    render(<TestFilters control={control} columns={[stringInvalidOperatorColumn]} />, { wrapper });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+
+    expect(screen.queryByRole("button", { name: /^contains$/ })).toBeNull();
+
+    const panel = document.querySelector(
+      '[data-slot="data-table-filter-panel"]',
+    ) as HTMLElement | null;
+    expect(panel).not.toBeNull();
+
+    const textboxes = within(panel as HTMLElement).getAllByRole("textbox");
+    await user.type(textboxes[textboxes.length - 1] as HTMLInputElement, "Bob");
+    await user.click(screen.getByRole("button", { name: /^Apply$/ }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Bob", {
+      caseSensitive: false,
+    });
+  });
+
+  it("hides the condition column when a column restricts filters to one operator", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({ filters: [] });
+    render(<TestFilters control={control} columns={[stringContainsOnlyColumn]} />, { wrapper });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+
+    expect(screen.queryByRole("button", { name: /^contains$/ })).toBeNull();
+    expect(await screen.findByRole("button", { name: /^Apply$/ })).toBeDefined();
+  });
+
+  it("seeds an already-filtered field's operator/value so the panel preserves them", async () => {
+    // Re-opening the panel on a field that already has a non-default filter
+    // (here a number "between") must keep that operator and value rather than
+    // resetting to the type default — otherwise applying would silently overwrite.
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "between", value: { min: 5, max: 10 } }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, { wrapper });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+    // The commit button reads "Update" (not "Add"/"Apply") for an active field.
+    await user.click(await screen.findByRole("button", { name: /^Update$/ }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("count", "between", { min: 5, max: 10 });
+  });
+
+  it("preserves case-sensitivity when re-applying a string filter from the panel", async () => {
+    // The panel has no case-sensitive toggle; re-applying must carry the active
+    // filter's caseSensitive flag through rather than clearing it.
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice", caseSensitive: true }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} />, { wrapper });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+    await user.click(await screen.findByRole("button", { name: /^Update$/ }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Alice", {
+      caseSensitive: true,
+    });
+  });
+
+  it("normalizes a legacy local datetime when re-applying it from the panel", async () => {
+    const user = userEvent.setup();
+    vi.stubEnv("TZ", "UTC");
+    const control = makeControl({
+      filters: [{ field: "publishedAt", operator: "eq", value: "2025-01-01T10:30:00" }],
+    });
+    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
+      wrapper: timeZoneWrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+    await user.click(await screen.findByRole("button", { name: /^Update$/ }));
+
+    expect(control.addFilter).toHaveBeenCalledWith(
+      "publishedAt",
+      "eq",
+      "2025-01-01T18:30:00.000Z",
+      undefined,
+    );
+  });
+
+  it("preserves an active operator even when the column now restricts the allowlist", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringEqOnlyColumn]} />, { wrapper });
+
+    expect(screen.getByRole("button", { name: "contains" })).toBeDefined();
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+    await user.click(await screen.findByRole("button", { name: /^Update$/ }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Alice", {
+      caseSensitive: false,
+    });
+  });
+
+  it("does not surface legacy numeric-only operators in the date condition list", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "createdAt", operator: "gt", value: "2025-01-01" }],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+
+    const panel = document.querySelector(
+      '[data-slot="data-table-filter-panel"]',
+    ) as HTMLElement | null;
+    expect(panel).not.toBeNull();
+
+    const panelQueries = within(panel as HTMLElement);
+    expect(panelQueries.queryByRole("button", { name: "greater than" })).toBeNull();
+    expect(panelQueries.getByRole("button", { name: "exact date" })).toBeDefined();
+    expect(panelQueries.getByRole("button", { name: "after" })).toBeDefined();
+    expect(panelQueries.getByRole("button", { name: "before" })).toBeDefined();
+  });
+
+  it("disables the commit button when the between range is reversed (min > max)", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({ filters: [] });
+    render(<TestFilters control={control} columns={[numberColumn]} />, { wrapper });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+    // Choose "is between", then enter a reversed range.
+    await user.click(await screen.findByRole("button", { name: /is between/i }));
+    await user.type(screen.getByRole("spinbutton", { name: "Min" }), "10");
+    await user.type(screen.getByRole("spinbutton", { name: "Max" }), "5");
+
+    const commit = screen.getByRole("button", { name: /^(Apply|Update)$/ });
+    expect((commit as HTMLButtonElement).disabled).toBe(true);
+    // ...and an inline error explains why.
+    expect(screen.getByText(/must be greater than or equal to/i)).toBeDefined();
+  });
+
+  it("renders a native time input for a single-value time filter", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({ filters: [] });
+    render(<TestFilters control={control} columns={[timeColumn]} />, { wrapper });
+
+    await user.click(screen.getByRole("button", { name: /Add filter/ }));
+    // `time` defaults to a single-value operator → native time input (not a
+    // plain text box).
+    const input = await screen.findByLabelText("Opens At");
+    expect(input.getAttribute("type")).toBe("time");
+  });
+});
diff --git a/packages/core/src/components/data-table/filters/add-panel.tsx b/packages/core/src/components/data-table/filters/add-panel.tsx
new file mode 100644
index 00000000..8c2448b2
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/add-panel.tsx
@@ -0,0 +1,743 @@
+import { cn } from "@/lib/utils";
+import type { CollectionControl, FilterOperator, Filter } from "@/types/collection";
+import { useDataTableT } from "../i18n";
+import { useState } from "react";
+import { Popover } from "@base-ui/react/popover";
+import { Button } from "@/components/button";
+import { Filter as FilterIcon, Search, Check, X } from "lucide-react";
+import { Input } from "@/components/input";
+import { parseDate } from "@internationalized/date";
+import { Calendar } from "@/components/calendar";
+import { useTimeZone, useResolvedLocale } from "@/contexts/appshell-context";
+import {
+  localDateTimeParts,
+  normalizeTemporalFilterValue,
+  isTemporalFilterType,
+} from "@/lib/temporal-filter-values";
+import { Text } from "../../text";
+import type { ReactNode } from "react";
+import { isComposing } from "@/lib/is-composing";
+import { Tooltip } from "@/components/tooltip";
+import type { FilterableColumn } from "./types";
+import { getVisibleFilterOperators, getDefaultFilterOperator, getOperatorLabel } from "./operators";
+import { formatDateTimeValue, formatDateValue } from "./formatting";
+import {
+  betweenOrderError,
+  isAddFilterDraftValueValid,
+  isRangeOrdered,
+  toAddFilterSubmittedValue,
+} from "./values";
+import type { AddFilterDraftValue } from "./values";
+import { EnumOptionList, BetweenInputGroup, getTemporalInputProps } from "./inputs";
+
+// =============================================================================
+// AddFilterPanel — the add-filter surface: one popover with three columns
+// (field ▸ condition ▸ value). The condition column appears for fields with
+// more than one operator. Values are drafted and committed with an Apply button
+// (the panel stays open so several filters can be added in a row).
+// =============================================================================
+
+const PANEL_COLUMN_ROW = cn(
+  "astw:flex astw:w-full astw:items-center astw:gap-2 astw:rounded-sm astw:px-2 astw:py-1.5",
+  "astw:text-left astw:text-body-md astw:outline-hidden astw:cursor-default astw:transition-colors",
+);
+
+// Distinct row states: hover is a subtle muted tint; selection is the solid accent
+// (+ bold). Applied exclusively — hover is only added when the row isn't selected —
+// so hovering the selected row doesn't repaint it and the two never look alike.
+const PANEL_ROW_HOVER = "astw:hover:bg-muted astw:focus-visible:bg-muted";
+
+const PANEL_ROW_SELECTED = "astw:bg-accent astw:font-semibold astw:text-accent-foreground";
+
+/**
+ * Seed the add-panel's operator for a field: reuse an active filter's operator
+ * when it's valid for the field type, so re-opening an already-filtered field
+ * shows its current condition (and lets the value editor prefill) instead of
+ * resetting to the default — which on Apply could silently overwrite the filter.
+ * Falls back to the type default when there's no active filter.
+ */
+function seedPanelOperator(
+  control: CollectionControl,
+  col: FilterableColumn | undefined,
+): FilterOperator {
+  if (!col) return "eq";
+  const active = control.filters.find((f) => f.field === col.filter.field);
+  const operators = getVisibleFilterOperators(col.filter, active?.operator);
+  if (active && operators.includes(active.operator)) return active.operator;
+  return getDefaultFilterOperator(col.filter);
+}
+
+function AddFilterPanel({
+  columns,
+  control,
+  iconOnly = false,
+}: {
+  columns: FilterableColumn[];
+  control: CollectionControl;
+  /** Render the trigger as an icon-only button (label kept as `aria-label`). */
+  iconOnly?: boolean;
+}) {
+  const t = useDataTableT();
+  const [open, setOpen] = useState(false);
+  const [fieldName, setFieldName] = useState<string>(columns[0]?.filter.field ?? "");
+  // Field search: enterprise tables can have many filterable fields, so the
+  // panel always offers a search box over the field list.
+  const [fieldQuery, setFieldQuery] = useState("");
+  const fq = fieldQuery.trim().toLowerCase();
+  const visibleFieldColumns = fq
+    ? columns.filter((c) => (c.label ?? c.filter.field).toLowerCase().includes(fq))
+    : columns;
+
+  const selectedColumn = columns.find((c) => c.filter.field === fieldName) ?? columns[0];
+  const config = selectedColumn?.filter;
+  const activeFilter = control.filters.find((f) => f.field === fieldName);
+  const operators = config ? getVisibleFilterOperators(config, activeFilter?.operator) : [];
+  // Show the condition column for any field that has more than one operator
+  // (single-operator types like enum/uuid go straight field ▸ value).
+  const showConditions = operators.length > 1;
+
+  const [operator, setOperator] = useState<FilterOperator>(() =>
+    seedPanelOperator(control, selectedColumn),
+  );
+
+  const selectField = (name: string) => {
+    setFieldName(name);
+    const col = columns.find((c) => c.filter.field === name);
+    if (col) setOperator(seedPanelOperator(control, col));
+  };
+
+  const handleFieldQueryChange = (value: string) => {
+    setFieldQuery(value);
+
+    const nextQuery = value.trim().toLowerCase();
+    if (!nextQuery) return;
+
+    const nextVisible = columns.filter((c) =>
+      (c.label ?? c.filter.field).toLowerCase().includes(nextQuery),
+    );
+    if (nextVisible.length === 0) return;
+    if (nextVisible.some((c) => c.filter.field === fieldName)) return;
+
+    const first = nextVisible[0];
+    setFieldName(first.filter.field);
+    setOperator(seedPanelOperator(control, first));
+  };
+
+  // Always reopen on the first field rather than wherever the user last was.
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (next) {
+      setFieldQuery("");
+      selectField(columns[0]?.filter.field ?? "");
+    }
+  };
+
+  const activeFields = new Set(control.filters.map((f) => f.field));
+  let effectiveOperator: FilterOperator | undefined;
+  if (config) {
+    effectiveOperator = showConditions ? operator : getDefaultFilterOperator(config);
+  }
+
+  return (
+    <Popover.Root open={open} onOpenChange={handleOpenChange}>
+      <Popover.Trigger
+        render={
+          <Button variant="outline" size="xs" aria-label={iconOnly ? t("addFilter") : undefined}>
+            {/* Icon-only reads better a touch larger (matching icon-button convention);
+                inline-with-label stays smaller so it sits neatly beside the text. */}
+            <FilterIcon className={iconOnly ? "astw:size-3.5" : "astw:size-3"} />
+            {!iconOnly && t("addFilter")}
+          </Button>
+        }
+      />
+      <Popover.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
+        {/* align="start" anchors the panel's left edge to the (left-aligned) trigger
+            so it grows/shrinks toward the right as columns appear/disappear. We keep
+            anchor tracking on (no disableAnchorTracking) so the positioner re-aligns
+            the left edge when the width changes; the trigger itself no longer moves
+            when chips are added (they live in a separate flex-1 container), so there's
+            nothing to jump away from. base-ui still shifts the panel to stay on-screen. */}
+        <Popover.Positioner sideOffset={4} side="bottom" align="start">
+          <Popover.Popup
+            data-slot="data-table-filter-panel"
+            className={cn(
+              // The panel hugs its columns (no fixed width): column 1 hugs the field
+              // names (up to a cap), column 2 (conditions) is fixed, and column 3 (the
+              // value editor) is a fixed 260px. So a wider field column grows the panel
+              // rightward (it's anchored left) instead of squeezing the value editor.
+              // Fixed height fits the tallest editor (datetime range: From/To tabs +
+              // calendar + "Choose time").
+              "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:flex astw:h-[28rem] astw:items-stretch astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md",
+              "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
+            )}
+          >
+            {/* Column 1 — fields (scrolls), with a search header and a sticky
+                "Clear all" footer. Hugs the field-name width up to a cap so long
+                names aren't needlessly truncated. */}
+            <div className="astw:flex astw:min-w-44 astw:max-w-[22.5rem] astw:flex-col astw:p-1">
+              {/* Field search — spacing/style mirrors the ColumnSettings search. */}
+              <div className="astw:relative astw:mb-1">
+                <Search className="astw:pointer-events-none astw:absolute astw:top-1/2 astw:left-2.5 astw:size-3.5 astw:-translate-y-1/2 astw:text-muted-foreground" />
+                <Input
+                  type="search"
+                  value={fieldQuery}
+                  onChange={(e) => handleFieldQueryChange(e.target.value)}
+                  placeholder={t("searchFields")}
+                  aria-label={t("searchFields")}
+                  className="astw:h-8 astw:pl-8 astw:text-body-md"
+                />
+              </div>
+              <div className="astw:flex-1 astw:overflow-y-auto">
+                {visibleFieldColumns.length === 0 ? (
+                  <div className="astw:px-2 astw:py-3 astw:text-center astw:text-body-sm astw:text-muted-foreground">
+                    {t("noFieldsMatch")}
+                  </div>
+                ) : (
+                  visibleFieldColumns.map((col) => {
+                    const isSelected = col.filter.field === fieldName;
+                    return (
+                      <button
+                        key={col.filter.field}
+                        type="button"
+                        onClick={() => selectField(col.filter.field)}
+                        title={col.label ?? col.filter.field}
+                        className={cn(
+                          PANEL_COLUMN_ROW,
+                          isSelected ? PANEL_ROW_SELECTED : PANEL_ROW_HOVER,
+                        )}
+                      >
+                        <span className="astw:min-w-0 astw:flex-1 astw:truncate">
+                          {col.label ?? col.filter.field}
+                        </span>
+                        {activeFields.has(col.filter.field) && (
+                          <span className="astw:ml-auto astw:size-1.5 astw:shrink-0 astw:rounded-full astw:bg-primary" />
+                        )}
+                      </button>
+                    );
+                  })
+                )}
+              </div>
+              {control.filters.length > 0 && (
+                <div className="astw:mt-1 astw:border-t astw:border-border astw:pt-1">
+                  <Button
+                    variant="ghost"
+                    size="xs"
+                    onClick={() => control.clearFilters()}
+                    className="astw:w-full astw:justify-start astw:text-muted-foreground"
+                  >
+                    {t("clearAllFilters")}
+                  </Button>
+                </div>
+              )}
+            </div>
+
+            {/* Column 2 — conditions (only when the field opts into choosing one) */}
+            {showConditions && config && (
+              <div className="astw:flex astw:w-48 astw:flex-col astw:overflow-y-auto astw:border-l astw:border-border astw:p-1">
+                {operators.map((op) => (
+                  <button
+                    key={op}
+                    type="button"
+                    onClick={() => setOperator(op)}
+                    className={cn(
+                      PANEL_COLUMN_ROW,
+                      op === operator ? PANEL_ROW_SELECTED : PANEL_ROW_HOVER,
+                    )}
+                  >
+                    <span className="astw:truncate">{getOperatorLabel(op, t, config.type)}</span>
+                    {op === operator && (
+                      <Check className="astw:ml-auto astw:size-3.5 astw:shrink-0" />
+                    )}
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Column 3 — value editor; fixed width so it never shrinks when column 1
+                (fields) grows wider. */}
+            <div className="astw:flex astw:w-[260px] astw:min-w-0 astw:flex-col astw:border-l astw:border-border">
+              {selectedColumn && effectiveOperator && (
+                <PanelValueEditor
+                  key={`${fieldName}:${effectiveOperator}`}
+                  column={selectedColumn}
+                  operator={effectiveOperator}
+                  filter={activeFilter}
+                  control={control}
+                />
+              )}
+            </div>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+AddFilterPanel.displayName = "DataTable.AddFilterPanel";
+
+/**
+ * Inline calendar for the panel's single-date editor — our `Calendar` rendered
+ * directly in the value column (no popover to nest inside the panel). The
+ * pointer-down guard stops the panel's outside-press dismissal from firing when
+ * a day cell re-renders on selection.
+ */
+function PanelDateInput({
+  ariaLabel,
+  value,
+  onChange,
+}: {
+  ariaLabel: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const calValue = /^\d{4}-\d{2}-\d{2}$/.test(value) ? parseDate(value) : null;
+  return (
+    // Center the fixed-width (w-fit) calendar within the wider value column.
+    <div
+      className="astw:flex astw:justify-center"
+      onPointerDownCapture={(e) => e.stopPropagation()}
+      onMouseDownCapture={(e) => e.stopPropagation()}
+    >
+      <Calendar
+        aria-label={ariaLabel}
+        value={calValue}
+        onChange={(v) => onChange(v ? v.toString() : "")}
+      />
+    </div>
+  );
+}
+
+// -----------------------------------------------------------------------------
+// TODO(app-shell): replace the temporal filter editors below with dedicated
+// pickers once app-shell ships them:
+//   - `time`     → a proper TimePicker (currently a native <input type="time">).
+//   - `datetime` → a DateTimePicker (currently a date `DatePicker` + a native
+//                  time box, combined into an ISO string — see PanelDateTimeInput
+//                  and DateTimeFilterInput).
+//   - `datetime`/`date` "between" → a DateRangePicker / DateTimeRangePicker
+//                  (currently one inline calendar with From/To tabs, see
+//                  PanelDateRangeInput; the chip editor uses two From/To fields).
+// These stopgaps intentionally emit the same ISO value shapes, so each swap is
+// UI-only — no change to the committed filter values.
+// -----------------------------------------------------------------------------
+
+/**
+ * Single-datetime editor for the panel: the inline `Calendar` up front with a
+ * labelled time picker beneath it, bridging an RFC 3339 instant. (The chip and
+ * the "between" range keep the compact date-picker + time box to stay short.)
+ */
+function PanelDateTimeInput({
+  ariaLabel,
+  value,
+  onChange,
+}: {
+  ariaLabel: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const t = useDataTableT();
+  const shellTz = useTimeZone();
+  const { date: datePart, time: timePart } = localDateTimeParts(value, shellTz.value);
+  const calValue = datePart ? parseDate(datePart) : null;
+  const emit = (nextDate: string, nextTime: string) => {
+    onChange(
+      nextDate
+        ? (normalizeTemporalFilterValue(
+            "datetime",
+            `${nextDate}T${nextTime || "00:00"}:00`,
+            shellTz.value,
+          ) ?? "")
+        : "",
+    );
+  };
+  return (
+    <div className="astw:flex astw:flex-col astw:gap-3">
+      <div
+        className="astw:flex astw:justify-center"
+        onPointerDownCapture={(e) => e.stopPropagation()}
+        onMouseDownCapture={(e) => e.stopPropagation()}
+      >
+        <Calendar
+          aria-label={ariaLabel}
+          value={calValue}
+          onChange={(v) => emit(v ? v.toString() : "", timePart)}
+        />
+      </div>
+      <div className="astw:flex astw:flex-col astw:gap-1">
+        <Text variant="body-sm" className="astw:text-muted-foreground" render={<span />}>
+          {t("chooseTime")}
+        </Text>
+        <Input
+          type="time"
+          aria-label={`${ariaLabel} (${t("chooseTime")})`}
+          value={timePart}
+          onChange={(e) => emit(datePart, e.target.value)}
+          className="astw:h-8 astw:text-body-md"
+        />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Range editor for date / datetime "between" in the panel: one inline calendar
+ * (reusing the single-value editors) with a From/To tab bar on top. Picking a
+ * bound edits whichever tab is active; each tab shows its current value. Keeps
+ * the range on a single calendar instead of two stacked fields.
+ */
+function PanelDateRangeInput({
+  label,
+  min,
+  max,
+  onChangeMin,
+  onChangeMax,
+  withTime = false,
+}: {
+  label: string;
+  min: string;
+  max: string;
+  onChangeMin: (value: string) => void;
+  onChangeMax: (value: string) => void;
+  /** datetime range — the active bound also gets a time picker. */
+  withTime?: boolean;
+}) {
+  const t = useDataTableT();
+  const { locale } = useResolvedLocale();
+  const shellTz = useTimeZone();
+  const [active, setActive] = useState<"from" | "to">("from");
+
+  const fmt = (v: string) => {
+    if (!v) return "—";
+    return withTime ? formatDateTimeValue(v, locale, shellTz.value) : formatDateValue(v, locale);
+  };
+  const bounds = [
+    { key: "from" as const, label: t("filterBetweenFrom"), value: min, onChange: onChangeMin },
+    { key: "to" as const, label: t("filterBetweenTo"), value: max, onChange: onChangeMax },
+  ];
+  const activeBound = bounds.find((b) => b.key === active) ?? bounds[0];
+  const error = betweenOrderError(
+    withTime ? "datetime" : "date",
+    min,
+    max,
+    t("filterBetweenFrom"),
+    t("filterBetweenTo"),
+    t,
+    shellTz.value,
+  );
+
+  return (
+    <div className="astw:flex astw:flex-col astw:gap-3">
+      {/* From / To tab bar (each tab shows its picked value) */}
+      <div className="astw:grid astw:grid-cols-2 astw:gap-1 astw:rounded-md astw:bg-muted astw:p-1">
+        {bounds.map((b) => (
+          <button
+            key={b.key}
+            type="button"
+            onClick={() => setActive(b.key)}
+            className={cn(
+              "astw:flex astw:flex-col astw:items-start astw:gap-0.5 astw:overflow-hidden astw:rounded-sm astw:px-2 astw:py-1 astw:text-left",
+              active === b.key && "astw:bg-background astw:shadow-sm",
+            )}
+          >
+            <span className="astw:text-body-sm astw:text-muted-foreground">{b.label}</span>
+            <span
+              className={cn(
+                "astw:w-full astw:truncate astw:text-body-md",
+                active === b.key ? "astw:text-foreground" : "astw:text-muted-foreground",
+              )}
+            >
+              {fmt(b.value)}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* Inline calendar (+ time) for the active bound */}
+      {withTime ? (
+        <PanelDateTimeInput
+          ariaLabel={`${label} — ${activeBound.label}`}
+          value={activeBound.value}
+          onChange={activeBound.onChange}
+        />
+      ) : (
+        <PanelDateInput
+          ariaLabel={`${label} — ${activeBound.label}`}
+          value={activeBound.value}
+          onChange={activeBound.onChange}
+        />
+      )}
+
+      {error && (
+        <Text variant="body-sm" className="astw:text-danger-text">
+          {error}
+        </Text>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Draft value editor for the panel's third column, keyed by field + operator.
+ * Holds local draft state and commits via an explicit Apply button (the panel
+ * stays open so several filters can be added in a row).
+ */
+function PanelValueEditor({
+  column,
+  operator,
+  filter,
+  control,
+}: {
+  column: FilterableColumn;
+  operator: FilterOperator;
+  filter: Filter | undefined;
+  control: CollectionControl;
+}) {
+  const t = useDataTableT();
+  const shellTz = useTimeZone();
+  const config = column.filter;
+  const field = config.field;
+  const label = column.label ?? field;
+  const type = config.type;
+  const isBetween = operator === "between";
+
+  // Draft state, prefilled from an existing filter on the same field/operator.
+  const [enumSel, setEnumSel] = useState<string[]>(
+    type === "enum" && Array.isArray(filter?.value) ? (filter.value as string[]) : [],
+  );
+  const [boolVal, setBoolVal] = useState(typeof filter?.value === "boolean" ? filter.value : true);
+  const [text, setText] = useState(() => {
+    if (isBetween) return "";
+    if (typeof filter?.value === "string") return filter.value;
+    if (typeof filter?.value === "number") return String(filter.value);
+    return "";
+  });
+  const range =
+    isBetween && filter?.value && typeof filter.value === "object"
+      ? (filter.value as { min?: unknown; max?: unknown })
+      : null;
+  const [min, setMin] = useState(range?.min != null ? String(range.min) : "");
+  const [max, setMax] = useState(range?.max != null ? String(range.max) : "");
+
+  const apply = () => {
+    if (type === "enum") {
+      if (enumSel.length === 0) control.removeFilter(field);
+      else control.addFilter(field, "in", enumSel);
+      return;
+    }
+    if (type === "boolean") {
+      control.addFilter(field, operator, boolVal);
+      return;
+    }
+    if (isBetween) {
+      const draft: AddFilterDraftValue = [min, max];
+      if (!isAddFilterDraftValueValid(type, "between", draft, shellTz.value)) return;
+      if (!isRangeOrdered(type, min, max)) return;
+      control.addFilter(
+        field,
+        "between",
+        toAddFilterSubmittedValue(type, "between", draft, shellTz.value),
+      );
+      return;
+    }
+    if (text.trim() === "") {
+      control.removeFilter(field);
+      return;
+    }
+    if (!isAddFilterDraftValueValid(type, operator, text, shellTz.value)) return;
+    control.addFilter(
+      field,
+      operator,
+      toAddFilterSubmittedValue(type, operator, text, shellTz.value),
+      // Preserve the existing filter's case-sensitivity (the panel has no toggle;
+      // the chip's string editor owns it) instead of silently clearing it.
+      type === "string" ? { caseSensitive: filter?.caseSensitive ?? false } : undefined,
+    );
+  };
+
+  // Remove this field's active filter and reset the draft. Shown only while a
+  // filter is active (there's nothing to clear on a fresh add).
+  const clearThis = () => {
+    control.removeFilter(field);
+    setEnumSel([]);
+    setBoolVal(true);
+    setText("");
+    setMin("");
+    setMax("");
+  };
+
+  // Gate the Apply button so it's disabled on invalid input (rather than enabled
+  // but inert). An empty draft is allowed only when it clears an existing filter.
+  const canApply = (() => {
+    if (type === "enum") return enumSel.length > 0 || !!filter;
+    if (type === "boolean") return true;
+    if (isBetween) {
+      const minEmpty = min.trim() === "";
+      const maxEmpty = max.trim() === "";
+      if (minEmpty && maxEmpty) return !!filter;
+      if (minEmpty || maxEmpty) return false;
+      if (!isAddFilterDraftValueValid(type, "between", [min, max])) return false;
+      return isRangeOrdered(type, min, max);
+    }
+    if (text.trim() === "") return !!filter;
+    return isAddFilterDraftValueValid(type, operator, text);
+  })();
+
+  let editor: ReactNode;
+  if (type === "enum") {
+    editor = (
+      <EnumOptionList
+        options={config.options}
+        selected={enumSel}
+        onToggle={(v) =>
+          setEnumSel((prev) => (prev.includes(v) ? prev.filter((x) => x !== v) : [...prev, v]))
+        }
+      />
+    );
+  } else if (type === "boolean") {
+    editor = (
+      <div className="astw:p-1">
+        {[true, false].map((v) => (
+          <button
+            key={String(v)}
+            type="button"
+            onClick={() => setBoolVal(v)}
+            className={cn(PANEL_COLUMN_ROW, boolVal === v ? PANEL_ROW_SELECTED : PANEL_ROW_HOVER)}
+          >
+            <span>{v ? t("filterBooleanTrue") : t("filterBooleanFalse")}</span>
+            {boolVal === v && <Check className="astw:ml-auto astw:size-3.5 astw:shrink-0" />}
+          </button>
+        ))}
+      </div>
+    );
+  } else if (isBetween && type === "date") {
+    // Range dates: one inline calendar with From/To tabs on top.
+    editor = (
+      <div className="astw:p-2">
+        <PanelDateRangeInput
+          label={label}
+          min={min}
+          max={max}
+          onChangeMin={setMin}
+          onChangeMax={setMax}
+        />
+      </div>
+    );
+  } else if (isBetween && type === "datetime") {
+    // Range datetimes: one inline calendar + time with From/To tabs on top.
+    editor = (
+      <div className="astw:p-2">
+        <PanelDateRangeInput
+          label={label}
+          min={min}
+          max={max}
+          onChangeMin={setMin}
+          onChangeMax={setMax}
+          withTime
+        />
+      </div>
+    );
+  } else if (isBetween) {
+    // Non-date range: two simple From/To (or Min/Max) text boxes.
+    const numeric = type === "number" || type === "decimal";
+    const numericInputProps =
+      type === "decimal" ? { type: "text", inputMode: "decimal" as const } : { type: "number" };
+    const labels: [string, string] = numeric
+      ? [t("filterBetweenMin"), t("filterBetweenMax")]
+      : [t("filterBetweenFrom"), t("filterBetweenTo")];
+    editor = (
+      <div className="astw:p-2">
+        <BetweenInputGroup
+          labels={labels}
+          values={[min, max]}
+          onChangeMin={setMin}
+          onChangeMax={setMax}
+          onSubmit={apply}
+          inputProps={
+            numeric ? numericInputProps : getTemporalInputProps(type as "datetime" | "time")
+          }
+          error={betweenOrderError(type, min, max, labels[0], labels[1], t)}
+        />
+      </div>
+    );
+  } else if (type === "date") {
+    editor = (
+      <div className="astw:p-2">
+        <PanelDateInput ariaLabel={label} value={text} onChange={setText} />
+      </div>
+    );
+  } else if (type === "datetime") {
+    // Single datetime: inline calendar up front + a labelled time picker below.
+    editor = (
+      <div className="astw:p-2">
+        <PanelDateTimeInput ariaLabel={label} value={text} onChange={setText} />
+      </div>
+    );
+  } else if (isTemporalFilterType(type)) {
+    // Single-value `time` uses the native time input. (`date`/`datetime` above.)
+    editor = (
+      <div className="astw:p-2">
+        <Input
+          {...getTemporalInputProps(type)}
+          aria-label={label}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !isComposing(e.nativeEvent)) apply();
+          }}
+          className="astw:h-8 astw:text-body-md"
+        />
+      </div>
+    );
+  } else {
+    editor = (
+      <div className="astw:p-2">
+        <Input
+          type={type === "number" ? "number" : "text"}
+          inputMode={type === "decimal" ? "decimal" : undefined}
+          value={text}
+          placeholder={t("filterValuePlaceholder", { field: label })}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !isComposing(e.nativeEvent)) apply();
+          }}
+          className="astw:h-8 astw:text-body-md"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="astw:flex astw:flex-1 astw:flex-col astw:overflow-hidden">
+      <div className="astw:flex-1 astw:overflow-y-auto">{editor}</div>
+      <div className="astw:flex astw:items-center astw:gap-1 astw:border-t astw:border-border astw:p-1">
+        {/* Icon-only Clear, shown only when there's an active filter to remove. */}
+        {filter && (
+          <Tooltip.Provider delay={300}>
+            <Tooltip.Root>
+              <Tooltip.Trigger
+                render={
+                  <Button
+                    variant="secondary"
+                    size="xs"
+                    onClick={clearThis}
+                    aria-label={t("clearFilter")}
+                  >
+                    <X className="astw:size-3" />
+                  </Button>
+                }
+              />
+              <Tooltip.Content>{t("clearFilter")}</Tooltip.Content>
+            </Tooltip.Root>
+          </Tooltip.Provider>
+        )}
+        {/* "Update" when re-editing an already-active field (the panel is seeded
+            from it), "Apply" when adding a fresh filter. */}
+        <Button size="xs" onClick={apply} disabled={!canApply} className="astw:flex-1">
+          {filter ? t("updateFilter") : t("applyFilter")}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { AddFilterPanel };
diff --git a/packages/core/src/components/data-table/filters/chip.test.tsx b/packages/core/src/components/data-table/filters/chip.test.tsx
new file mode 100644
index 00000000..7c8665cf
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/chip.test.tsx
@@ -0,0 +1,109 @@
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  TestFilters,
+  datetimeColumn,
+  makeControl,
+  stringColumn,
+  timeZoneWrapper,
+  wrapper,
+} from "./test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+});
+
+describe("FilterChip", () => {
+  it("focuses the operator search input when the operator popover opens", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: "contains" }));
+
+    const input = await screen.findByPlaceholderText("Search...");
+    expect(document.activeElement).toBe(input);
+  });
+
+  it("calls removeFilter when the remove button is clicked", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: "Remove filter" }));
+
+    expect(control.removeFilter).toHaveBeenCalledWith("name");
+  });
+
+  it("normalizes legacy datetime values when switching between single-value operators", async () => {
+    const user = userEvent.setup();
+    vi.stubEnv("TZ", "UTC");
+    const control = makeControl({
+      filters: [{ field: "publishedAt", operator: "eq", value: "2025-01-01T10:30:00" }],
+    });
+    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
+      wrapper: timeZoneWrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: "is" }));
+    await user.click(await screen.findByRole("button", { name: "greater than" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith(
+      "publishedAt",
+      "gt",
+      "2025-01-01T18:30:00.000Z",
+      undefined,
+    );
+  });
+
+  it("normalizes legacy datetime values when switching from single-value to between", async () => {
+    const user = userEvent.setup();
+    vi.stubEnv("TZ", "UTC");
+    const control = makeControl({
+      filters: [{ field: "publishedAt", operator: "eq", value: "2025-01-01T10:30:00" }],
+    });
+    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
+      wrapper: timeZoneWrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: "is" }));
+    await user.click(await screen.findByRole("button", { name: "is between" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("publishedAt", "between", {
+      min: "2025-01-01T18:30:00.000Z",
+      max: "2025-01-01T18:30:00.000Z",
+    });
+  });
+
+  it("normalizes legacy datetime values when switching from between to single-value", async () => {
+    const user = userEvent.setup();
+    vi.stubEnv("TZ", "UTC");
+    const control = makeControl({
+      filters: [
+        {
+          field: "publishedAt",
+          operator: "between",
+          value: { min: "2025-01-01T10:30:00", max: "2025-01-02T11:30:00" },
+        },
+      ],
+    });
+    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
+      wrapper: timeZoneWrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: "is between" }));
+    await user.click(await screen.findByRole("button", { name: "less than" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("publishedAt", "lt", "2025-01-01T18:30:00.000Z");
+  });
+});
diff --git a/packages/core/src/components/data-table/filters/chip.tsx b/packages/core/src/components/data-table/filters/chip.tsx
new file mode 100644
index 00000000..01f32272
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/chip.tsx
@@ -0,0 +1,297 @@
+import type { Column, DataTableFilterConfig } from "../types";
+import type { Filter, CollectionControl, FilterOperator, FilterConfig } from "@/types/collection";
+import { useDataTableT } from "../i18n";
+import { useResolvedLocale, useTimeZone } from "@/contexts/appshell-context";
+import { useState, useCallback } from "react";
+import { normalizeTemporalFilterValue } from "@/lib/temporal-filter-values";
+import { cn } from "@/lib/utils";
+import { Popover } from "@base-ui/react/popover";
+import { ChevronDown, X, Search, Check } from "lucide-react";
+import { getVisibleFilterOperators, getOperatorLabel } from "./operators";
+import { formatFilterValue } from "./formatting";
+import { FilterPopoverContent } from "./editors";
+
+// =============================================================================
+// FilterChip — per-filter popover-based editor
+// =============================================================================
+
+function FilterChip({
+  column,
+  filter,
+  control,
+}: {
+  column: Column<Record<string, unknown>> & { filter: DataTableFilterConfig };
+  filter: Filter;
+  control: CollectionControl;
+}) {
+  const t = useDataTableT();
+  const { locale } = useResolvedLocale();
+  const shellTz = useTimeZone();
+  const config = column.filter;
+  const label = column.label ?? config.field;
+
+  const [opOpen, setOpOpen] = useState(false);
+  const [valOpen, setValOpen] = useState(false);
+
+  const handleRemove = useCallback(() => {
+    control.removeFilter(config.field);
+  }, [control, config.field]);
+
+  // Switching operator re-commits the filter, seeding a valid value when the
+  // arity changes (single ↔ between) so the intermediate filter is never
+  // malformed. Fine-tuning the value happens in the value segment.
+  const handleOperatorSelect = useCallback(
+    (nextOp: FilterOperator) => {
+      // Coerce to a finite number, falling back to 0 for malformed values (e.g.
+      // a non-numeric value from persisted/URL state) so we never seed NaN.
+      const toNum = (v: unknown) => {
+        const n = Number(v);
+        return Number.isFinite(n) ? n : 0;
+      };
+      const toDateTime = (v: unknown) => normalizeTemporalFilterValue("datetime", v, shellTz.value);
+      const toDateTimeRange = (v: unknown) => {
+        const range = (v ?? {}) as { min?: unknown; max?: unknown };
+        const min = toDateTime(range.min);
+        const max = toDateTime(range.max);
+        return min && max ? { min, max } : null;
+      };
+      const arity = (op: FilterOperator) => (op === "between" ? 2 : 1);
+      if (arity(nextOp) === arity(filter.operator)) {
+        let value = filter.value;
+        if (config.type === "datetime") {
+          value =
+            filter.operator === "between"
+              ? toDateTimeRange(filter.value)
+              : toDateTime(filter.value);
+        }
+        if (config.type === "datetime" && value == null) return;
+        control.addFilter(
+          config.field,
+          nextOp,
+          value,
+          config.type === "string" && filter.caseSensitive ? { caseSensitive: true } : undefined,
+        );
+      } else if (nextOp === "between") {
+        const v = filter.value;
+        if (config.type === "number") {
+          const n = toNum(v);
+          control.addFilter(config.field, nextOp, { min: n, max: n });
+        } else if (config.type === "datetime") {
+          const s = toDateTime(v);
+          if (!s) return;
+          control.addFilter(config.field, nextOp, { min: s, max: s });
+        } else {
+          const s = v == null ? "" : String(v);
+          control.addFilter(config.field, nextOp, { min: s, max: s });
+        }
+      } else {
+        const range = (filter.value ?? {}) as { min?: unknown; max?: unknown };
+        const lower = range.min ?? range.max ?? "";
+        if (config.type === "datetime") {
+          const normalized = toDateTime(lower);
+          if (!normalized) return;
+          control.addFilter(config.field, nextOp, normalized);
+          setOpOpen(false);
+          return;
+        }
+        control.addFilter(
+          config.field,
+          nextOp,
+          config.type === "number" ? toNum(lower) : String(lower),
+        );
+      }
+      setOpOpen(false);
+    },
+    [
+      control,
+      config.field,
+      config.type,
+      filter.operator,
+      filter.value,
+      filter.caseSensitive,
+      shellTz.value,
+    ],
+  );
+
+  const operators = getVisibleFilterOperators(config, filter.operator);
+  const operatorLabel = getOperatorLabel(filter.operator, t, config.type);
+  const valueLabel = formatFilterValue(filter, config, t, locale, shellTz.value, label);
+
+  const segment =
+    "astw:flex astw:items-center astw:h-6 astw:px-2 astw:text-body-sm astw:whitespace-nowrap astw:outline-hidden";
+  const interactiveSegment = cn(
+    segment,
+    "astw:cursor-pointer astw:hover:bg-accent astw:focus-visible:bg-accent astw:data-popup-open:bg-accent",
+  );
+
+  return (
+    <div
+      data-slot="data-table-filter-chip"
+      // Same surface tokens as the outline "Add filter" Button. The bloom/cream
+      // themes force this slot transparent (see their transparent-chrome rules)
+      // so the chip stays visually identical to the outline button per theme.
+      className="astw:inline-flex astw:items-center astw:divide-x astw:divide-border astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:bg-background astw:shadow-xs astw:dark:border-input astw:dark:bg-input/30"
+    >
+      {/* Field segment (icon arrives in Stage 2) */}
+      <span className={cn(segment, "astw:text-label-sm astw:text-foreground")}>{label}</span>
+
+      {/* Operator segment — searchable dropdown when more than one operator */}
+      {operators.length > 1 ? (
+        <Popover.Root open={opOpen} onOpenChange={setOpOpen}>
+          <Popover.Trigger
+            render={
+              <button
+                type="button"
+                className={cn(interactiveSegment, "astw:text-muted-foreground")}
+              >
+                {operatorLabel}
+              </button>
+            }
+          />
+          <Popover.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
+            <Popover.Positioner sideOffset={4} side="bottom" align="start">
+              <Popover.Popup
+                data-slot="data-table-filter-operator-popup"
+                className={cn(
+                  "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:w-56 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md",
+                  "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
+                )}
+              >
+                <OperatorList
+                  operators={operators}
+                  current={filter.operator}
+                  type={config.type}
+                  onSelect={handleOperatorSelect}
+                />
+              </Popover.Popup>
+            </Popover.Positioner>
+          </Popover.Portal>
+        </Popover.Root>
+      ) : (
+        <span className={cn(segment, "astw:text-muted-foreground")}>{operatorLabel}</span>
+      )}
+
+      {/* Value segment — opens the value editor (operator hidden; it lives above) */}
+      <Popover.Root open={valOpen} onOpenChange={setValOpen}>
+        <Popover.Trigger
+          render={
+            <button
+              type="button"
+              className={cn(
+                interactiveSegment,
+                "astw:gap-1 astw:text-label-sm astw:text-foreground",
+              )}
+            >
+              {valueLabel ? (
+                // Cap long values (e.g. a uuid or a long "contains" string) so the
+                // chip stays a reasonable width instead of stretching the toolbar.
+                <span className="astw:max-w-[12rem] astw:truncate">{valueLabel}</span>
+              ) : (
+                <span className="astw:text-muted-foreground">…</span>
+              )}
+              <ChevronDown className="astw:size-3 astw:text-muted-foreground" />
+            </button>
+          }
+        />
+        {/* Stacking context on the portal so the popup clears the sticky table header. */}
+        <Popover.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
+          <Popover.Positioner sideOffset={4} side="bottom" align="start">
+            <Popover.Popup
+              data-slot="data-table-filter-popup"
+              className={cn(
+                "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:min-w-45 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md",
+                "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
+              )}
+            >
+              <FilterPopoverContent
+                column={column}
+                filter={filter}
+                control={control}
+                onClose={() => setValOpen(false)}
+                hideOperator
+              />
+            </Popover.Popup>
+          </Popover.Positioner>
+        </Popover.Portal>
+      </Popover.Root>
+
+      {/* Remove segment */}
+      <button
+        type="button"
+        className={cn(
+          interactiveSegment,
+          "astw:px-1.5 astw:text-muted-foreground astw:hover:text-foreground",
+        )}
+        onClick={handleRemove}
+        aria-label={t("removeFilter")}
+      >
+        <X className="astw:size-3" />
+      </button>
+    </div>
+  );
+}
+
+// =============================================================================
+// OperatorList — searchable operator picker shown in the chip's operator segment
+// =============================================================================
+
+function OperatorList({
+  operators,
+  current,
+  type,
+  onSelect,
+}: {
+  operators: FilterOperator[];
+  current: FilterOperator;
+  type: FilterConfig["type"];
+  onSelect: (op: FilterOperator) => void;
+}) {
+  const t = useDataTableT();
+  const [query, setQuery] = useState("");
+
+  const q = query.trim().toLowerCase();
+  const items = operators
+    .map((op) => ({ op, label: getOperatorLabel(op, t, type) }))
+    .filter(({ label }) => label.toLowerCase().includes(q));
+
+  return (
+    <div className="astw:flex astw:flex-col">
+      <div className="astw:flex astw:items-center astw:gap-2 astw:border-b astw:border-border astw:px-2.5">
+        <Search className="astw:size-3.5 astw:text-muted-foreground" />
+        {/* Base UI's Popover.Popup moves initial focus to the first tabbable
+            element by default, which is this input. On touch it focuses the
+            popup instead so the virtual keyboard doesn't jump open. */}
+        <input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={t("filterOperatorSearchPlaceholder")}
+          className="astw:h-9 astw:w-full astw:bg-transparent astw:text-body-md astw:outline-hidden astw:placeholder:text-muted-foreground"
+        />
+      </div>
+      <div className="astw:p-1">
+        {items.map(({ op, label }) => (
+          <button
+            key={op}
+            type="button"
+            onClick={() => onSelect(op)}
+            className={cn(
+              "astw:flex astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-sm astw:px-2 astw:py-1.5 astw:text-left astw:text-body-md astw:outline-hidden",
+              "astw:hover:bg-accent astw:hover:text-accent-foreground astw:focus-visible:bg-accent",
+              op === current && "astw:bg-accent/60",
+            )}
+          >
+            {label}
+            {op === current && <Check className="astw:size-3.5" />}
+          </button>
+        ))}
+        {items.length === 0 && (
+          <output className="astw:block astw:px-2 astw:py-1.5 astw:text-body-md astw:text-muted-foreground">
+            {t("filterOperatorNoResults")}
+          </output>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { FilterChip };
diff --git a/packages/core/src/components/data-table/filters/editors.tsx b/packages/core/src/components/data-table/filters/editors.tsx
new file mode 100644
index 00000000..8a1bd434
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/editors.tsx
@@ -0,0 +1,789 @@
+import { parseDate } from "@internationalized/date";
+import { DatePicker } from "@/components/date-field";
+import { useTimeZone } from "@/contexts/appshell-context";
+import {
+  localDateTimeParts,
+  normalizeTemporalFilterValue,
+  isTemporalFilterValueValid,
+} from "@/lib/temporal-filter-values";
+import { Input } from "@/components/input";
+import type { Column, DataTableFilterConfig } from "../types";
+import type { Filter, CollectionControl } from "@/types/collection";
+import { useMemo, useCallback, useState } from "react";
+import { useDataTableT } from "../i18n";
+import { Select } from "@/components/select";
+import { Button } from "@/components/button";
+import { isComposing } from "@/lib/is-composing";
+import { Checkbox } from "@/components/checkbox";
+import {
+  isDecimalFilterValueValid,
+  isAddFilterDraftValueValid,
+  isRangeOrdered,
+  toAddFilterSubmittedValue,
+  betweenOrderError,
+} from "./values";
+import type { ReactNode } from "react";
+import { Text } from "../../text";
+import { EnumOptionList, BetweenInputGroup, getTemporalInputProps } from "./inputs";
+import {
+  getVisibleFilterOperators,
+  BOOLEAN_OPERATORS,
+  getOperatorLabel,
+  STRING_OPERATORS,
+  DEFAULT_OPERATOR,
+  resolveTemporalOperator,
+  temporalOperatorsFor,
+} from "./operators";
+import type { BooleanOperator, StringOperator, NumericTemporalOperator } from "./operators";
+import type { AddFilterDraftValue } from "./values";
+
+/**
+ * Date filter input backed by the app-shell `DatePicker`. Bridges the filter's
+ * string value (`"YYYY-MM-DD"`) and the `CalendarDate` the picker works with.
+ */
+function DateFilterPicker({
+  ariaLabel,
+  value,
+  onChange,
+}: {
+  ariaLabel: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const calValue = /^\d{4}-\d{2}-\d{2}$/.test(value) ? parseDate(value) : null;
+  return (
+    <DatePicker
+      aria-label={ariaLabel}
+      value={calValue}
+      onChange={(v) => onChange(v ? v.toString() : "")}
+      className="astw:w-full"
+    />
+  );
+}
+
+/**
+ * Datetime filter input: the app-shell date `DatePicker` (calendar) paired with a
+ * native time box, bridging an RFC 3339 instant. Entering a full datetime by hand
+ * is awkward, so the date and time are picked separately and combined. This is a
+ * stopgap — it's replaced 1:1 once a dedicated DateTime picker component lands.
+ */
+function DateTimeFilterInput({
+  ariaLabel,
+  value,
+  onChange,
+}: {
+  ariaLabel: string;
+  value: string;
+  onChange: (value: string) => void;
+}) {
+  const shellTz = useTimeZone();
+  const { date: datePart, time: timePart } = localDateTimeParts(value, shellTz.value);
+  const calValue = datePart ? parseDate(datePart) : null;
+
+  // Emit an RFC 3339 instant only once a date is chosen; time defaults to midnight.
+  const emit = (nextDate: string, nextTime: string) => {
+    onChange(
+      nextDate
+        ? (normalizeTemporalFilterValue(
+            "datetime",
+            `${nextDate}T${nextTime || "00:00"}:00`,
+            shellTz.value,
+          ) ?? "")
+        : "",
+    );
+  };
+
+  return (
+    <div className="astw:flex astw:items-center astw:gap-2">
+      <DatePicker
+        aria-label={`${ariaLabel} (date)`}
+        value={calValue}
+        onChange={(v) => emit(v ? v.toString() : "", timePart)}
+        className="astw:min-w-0 astw:flex-1"
+      />
+      <Input
+        type="time"
+        aria-label={`${ariaLabel} (time)`}
+        value={timePart}
+        onChange={(e) => emit(datePart, e.target.value)}
+        className="astw:h-8 astw:w-28 astw:shrink-0 astw:text-body-md"
+      />
+    </div>
+  );
+}
+
+// =============================================================================
+// FilterPopoverContent — dispatches to the right editor per filter type
+// =============================================================================
+
+function FilterPopoverContent({
+  column,
+  filter,
+  control,
+  onClose,
+  hideOperator = false,
+}: {
+  column: Column<Record<string, unknown>> & { filter: DataTableFilterConfig };
+  filter: Filter;
+  control: CollectionControl;
+  onClose: () => void;
+  /**
+   * Hide the in-editor operator selector. Used by the segmented FilterChip,
+   * where the operator lives in its own chip segment; the editor commits with
+   * the filter's current operator.
+   */
+  hideOperator?: boolean;
+}) {
+  const config = column.filter;
+  const label = column.label ?? config.field;
+
+  switch (config.type) {
+    case "enum":
+      return <EnumFilterEditor config={config} filter={filter} control={control} />;
+    case "boolean":
+      return (
+        <BooleanFilterEditor
+          config={config}
+          filter={filter}
+          control={control}
+          onClose={onClose}
+          hideOperator={hideOperator}
+        />
+      );
+    case "string":
+      return (
+        <StringFilterEditor
+          config={config}
+          filter={filter}
+          control={control}
+          onClose={onClose}
+          hideOperator={hideOperator}
+        />
+      );
+    case "uuid":
+      return (
+        <UuidFilterEditor config={config} filter={filter} control={control} onClose={onClose} />
+      );
+    case "number":
+    case "decimal":
+      return (
+        <NumericFilterEditor
+          config={config}
+          filter={filter}
+          control={control}
+          onClose={onClose}
+          hideOperator={hideOperator}
+        />
+      );
+    case "datetime":
+    case "date":
+    case "time":
+      return (
+        <TemporalFilterEditor
+          config={config}
+          label={label}
+          filter={filter}
+          control={control}
+          onClose={onClose}
+          hideOperator={hideOperator}
+        />
+      );
+  }
+}
+
+// =============================================================================
+// Enum filter — checkbox list (matching the screenshot)
+// =============================================================================
+
+function EnumFilterEditor({
+  config,
+  filter,
+  control,
+}: {
+  config: Extract<DataTableFilterConfig, { type: "enum" }>;
+  filter: Filter;
+  control: CollectionControl;
+}) {
+  const selectedValues = useMemo(
+    () => (Array.isArray(filter.value) ? (filter.value as string[]) : []),
+    [filter.value],
+  );
+
+  const handleToggle = useCallback(
+    (optionValue: string) => {
+      const current = new Set(selectedValues);
+      if (current.has(optionValue)) {
+        current.delete(optionValue);
+      } else {
+        current.add(optionValue);
+      }
+      const next = [...current];
+      if (next.length === 0) {
+        control.removeFilter(config.field);
+      } else {
+        control.addFilter(config.field, "in", next);
+      }
+    },
+    [selectedValues, control, config.field],
+  );
+
+  return (
+    <EnumOptionList options={config.options} selected={selectedValues} onToggle={handleToggle} />
+  );
+}
+
+function BooleanFilterEditor({
+  config,
+  filter,
+  control,
+  onClose,
+  hideOperator = false,
+}: {
+  config: Extract<DataTableFilterConfig, { type: "boolean" }>;
+  filter: Filter;
+  control: CollectionControl;
+  onClose: () => void;
+  hideOperator?: boolean;
+}) {
+  const t = useDataTableT();
+  const operatorItems = getVisibleFilterOperators(config, filter.operator).filter(
+    (operator): operator is BooleanOperator =>
+      BOOLEAN_OPERATORS.includes(operator as BooleanOperator),
+  );
+  const [localOp, setLocalOp] = useState<BooleanOperator>(
+    operatorItems.includes(filter.operator as BooleanOperator)
+      ? (filter.operator as BooleanOperator)
+      : (operatorItems[0] ?? "eq"),
+  );
+  const [localValue, setLocalValue] = useState(
+    typeof filter.value === "boolean" ? String(filter.value) : "true",
+  );
+
+  const handleCommit = useCallback(() => {
+    control.addFilter(config.field, localOp, localValue === "true");
+    onClose();
+  }, [localValue, localOp, control, config.field, onClose]);
+
+  return (
+    <div
+      data-slot="data-table-filter-boolean"
+      className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
+    >
+      {!hideOperator && (
+        <Select
+          items={[...operatorItems]}
+          value={localOp}
+          onValueChange={(v) => {
+            if (v) setLocalOp(v as BooleanOperator);
+          }}
+          mapItem={(op) => ({ value: op, label: getOperatorLabel(op, t) })}
+          className="astw:h-8 astw:text-body-md"
+        />
+      )}
+      <Select
+        items={["true", "false"]}
+        value={localValue}
+        onValueChange={(v) => {
+          if (v) setLocalValue(v);
+        }}
+        mapItem={(v) => ({
+          value: v,
+          label: v === "true" ? t("filterBooleanTrue") : t("filterBooleanFalse"),
+        })}
+        className="astw:h-8 astw:text-body-md"
+      />
+      <Button size="xs" onClick={handleCommit} className="astw:self-end">
+        {t("applyFilter")}
+      </Button>
+    </div>
+  );
+}
+
+// =============================================================================
+// String filter — operator selector + text input
+// =============================================================================
+
+function StringFilterEditor({
+  config,
+  filter,
+  control,
+  onClose,
+  hideOperator = false,
+}: {
+  config: Extract<DataTableFilterConfig, { type: "string" }>;
+  filter: Filter;
+  control: CollectionControl;
+  onClose: () => void;
+  hideOperator?: boolean;
+}) {
+  const t = useDataTableT();
+  const operatorItems = getVisibleFilterOperators(config, filter.operator).filter(
+    (operator): operator is StringOperator => STRING_OPERATORS.includes(operator as StringOperator),
+  );
+  const [localOp, setLocalOp] = useState<StringOperator>(
+    operatorItems.includes(filter.operator as StringOperator)
+      ? (filter.operator as StringOperator)
+      : (DEFAULT_OPERATOR.string as StringOperator),
+  );
+  const [localValue, setLocalValue] = useState(String(filter.value ?? ""));
+  const [localCaseSensitive, setLocalCaseSensitive] = useState(filter.caseSensitive ?? false);
+
+  const handleCommit = useCallback(() => {
+    if (localValue.trim() === "") {
+      control.removeFilter(config.field);
+    } else {
+      control.addFilter(config.field, localOp, localValue, {
+        caseSensitive: localCaseSensitive,
+      });
+    }
+    onClose();
+  }, [localValue, localOp, localCaseSensitive, control, config.field, onClose]);
+
+  return (
+    <div
+      data-slot="data-table-filter-string"
+      className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
+    >
+      {!hideOperator && (
+        <Select
+          items={[...operatorItems]}
+          value={localOp}
+          onValueChange={(v) => {
+            if (v) setLocalOp(v as StringOperator);
+          }}
+          mapItem={(op) => ({ value: op, label: t(`filterOperator_${op}`) })}
+          className="astw:h-8 astw:text-body-md"
+        />
+      )}
+      <Input
+        value={localValue}
+        placeholder={t("filterValuePlaceholder", { field: config.field })}
+        onChange={(e) => setLocalValue(e.target.value)}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+          if (e.key === "Enter" && !isComposing(e.nativeEvent)) handleCommit();
+        }}
+        className="astw:h-8 astw:text-body-md"
+      />
+      <Checkbox
+        label={t("filterCaseSensitive")}
+        checked={localCaseSensitive}
+        onCheckedChange={setLocalCaseSensitive}
+        className="astw:gap-1.5"
+      />
+      <Button size="xs" onClick={handleCommit} className="astw:self-end">
+        {t("applyFilter")}
+      </Button>
+    </div>
+  );
+}
+
+// =============================================================================
+// UUID filter — text input (eq only)
+// =============================================================================
+
+function UuidFilterEditor({
+  config,
+  filter,
+  control,
+  onClose,
+}: {
+  config: Extract<DataTableFilterConfig, { type: "uuid" }>;
+  filter: Filter;
+  control: CollectionControl;
+  onClose: () => void;
+}) {
+  const t = useDataTableT();
+  const [localValue, setLocalValue] = useState(String(filter.value ?? ""));
+
+  const handleCommit = useCallback(() => {
+    if (localValue.trim() === "") {
+      control.removeFilter(config.field);
+    } else {
+      control.addFilter(config.field, "eq", localValue);
+    }
+    onClose();
+  }, [localValue, control, config.field, onClose]);
+
+  return (
+    <div data-slot="data-table-filter-uuid" className="astw:flex astw:flex-col astw:gap-2 astw:p-2">
+      <Input
+        value={localValue}
+        placeholder={t("filterValuePlaceholder", { field: config.field })}
+        onChange={(e) => setLocalValue(e.target.value)}
+        onKeyDown={(e) => {
+          e.stopPropagation();
+          if (e.key === "Enter" && !isComposing(e.nativeEvent)) handleCommit();
+        }}
+        className="astw:h-8 astw:text-body-md"
+      />
+      <Button size="xs" onClick={handleCommit} className="astw:self-end">
+        {t("applyFilter")}
+      </Button>
+    </div>
+  );
+}
+
+// =============================================================================
+// Numeric filter — operator selector + number/decimal input
+// =============================================================================
+
+function NumericFilterEditor({
+  config,
+  filter,
+  control,
+  onClose,
+  hideOperator = false,
+}: {
+  config: Extract<DataTableFilterConfig, { type: "number" | "decimal" }>;
+  filter: Filter;
+  control: CollectionControl;
+  onClose: () => void;
+  hideOperator?: boolean;
+}) {
+  const t = useDataTableT();
+  const { items: operatorItems, initial: initialOp } = resolveTemporalOperator(
+    getVisibleFilterOperators(config, filter.operator).filter(
+      (operator): operator is NumericTemporalOperator =>
+        temporalOperatorsFor(config.type).includes(operator as NumericTemporalOperator),
+    ),
+    filter.operator,
+  );
+  const [localOp, setLocalOp] = useState<NumericTemporalOperator>(initialOp);
+  const [localValue, setLocalValue] = useState(() => {
+    if (filter.operator === "between" && typeof filter.value === "object" && filter.value != null) {
+      const range = filter.value as { min?: unknown; max?: unknown };
+      return String(range.min ?? "");
+    }
+    return String(filter.value ?? "");
+  });
+  const [localValueMax, setLocalValueMax] = useState(() => {
+    if (filter.operator === "between" && typeof filter.value === "object" && filter.value != null) {
+      const range = filter.value as { min?: unknown; max?: unknown };
+      return String(range.max ?? "");
+    }
+    return "";
+  });
+
+  const canCommit = (() => {
+    if (localOp === "between") {
+      const minEmpty = localValue.trim() === "";
+      const maxEmpty = localValueMax.trim() === "";
+      if (minEmpty && maxEmpty) return true; // will removeFilter
+      if (minEmpty || maxEmpty) return false; // both required
+      return (
+        isAddFilterDraftValueValid(config.type, "between", [localValue, localValueMax]) &&
+        isRangeOrdered(config.type, localValue, localValueMax)
+      );
+    }
+    return localValue.trim() === "" || isAddFilterDraftValueValid(config.type, localOp, localValue);
+  })();
+
+  const handleCommit = useCallback(() => {
+    if (localOp === "between") {
+      const minEmpty = localValue.trim() === "";
+      const maxEmpty = localValueMax.trim() === "";
+      if (minEmpty && maxEmpty) {
+        control.removeFilter(config.field);
+      } else if (!minEmpty && !maxEmpty) {
+        const draft: AddFilterDraftValue = [localValue, localValueMax];
+        if (
+          isAddFilterDraftValueValid(config.type, localOp, draft) &&
+          isRangeOrdered(config.type, localValue, localValueMax)
+        ) {
+          control.addFilter(
+            config.field,
+            localOp,
+            toAddFilterSubmittedValue(config.type, localOp, draft),
+          );
+        } else {
+          return;
+        }
+      } else {
+        return;
+      }
+    } else if (config.type === "decimal") {
+      if (localValue.trim() === "") {
+        control.removeFilter(config.field);
+      } else if (isDecimalFilterValueValid(localValue)) {
+        control.addFilter(config.field, localOp, localValue.trim());
+      } else {
+        return;
+      }
+    } else {
+      const num = Number(localValue);
+      if (localValue.trim() === "" || Number.isNaN(num)) {
+        control.removeFilter(config.field);
+      } else {
+        control.addFilter(config.field, localOp, num);
+      }
+    }
+    onClose();
+  }, [localValue, localValueMax, localOp, control, config.field, config.type, onClose]);
+
+  return (
+    <div
+      data-slot={`data-table-filter-${config.type}`}
+      className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
+    >
+      {!hideOperator && (
+        <Select
+          items={[...operatorItems]}
+          value={localOp}
+          onValueChange={(v) => {
+            if (v) setLocalOp(v);
+          }}
+          mapItem={(op) => ({ value: op, label: getOperatorLabel(op, t, config.type) })}
+          className="astw:h-8 astw:text-body-md"
+        />
+      )}
+      {localOp === "between" ? (
+        <BetweenInputGroup
+          labels={[t("filterBetweenMin"), t("filterBetweenMax")]}
+          values={[localValue, localValueMax]}
+          onChangeMin={setLocalValue}
+          onChangeMax={setLocalValueMax}
+          onSubmit={handleCommit}
+          inputProps={
+            config.type === "decimal" ? { type: "text", inputMode: "decimal" } : { type: "number" }
+          }
+          error={betweenOrderError(
+            config.type,
+            localValue,
+            localValueMax,
+            t("filterBetweenMin"),
+            t("filterBetweenMax"),
+            t,
+          )}
+        />
+      ) : (
+        <Input
+          type={config.type === "decimal" ? "text" : "number"}
+          inputMode={config.type === "decimal" ? "decimal" : undefined}
+          value={localValue}
+          placeholder={t("filterValuePlaceholder", { field: config.field })}
+          onChange={(e) => setLocalValue(e.target.value)}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Enter" && !isComposing(e.nativeEvent)) handleCommit();
+          }}
+          className="astw:h-8 astw:text-body-md"
+        />
+      )}
+      <Button size="xs" onClick={handleCommit} disabled={!canCommit} className="astw:self-end">
+        {t("applyFilter")}
+      </Button>
+    </div>
+  );
+}
+
+// =============================================================================
+// Temporal filter — operator selector + type-specific input
+// =============================================================================
+
+function TemporalFilterEditor({
+  config,
+  label,
+  filter,
+  control,
+  onClose,
+  hideOperator = false,
+}: {
+  config: Extract<DataTableFilterConfig, { type: "datetime" | "date" | "time" }>;
+  /** The column's visible label — used for the date picker's accessible name. */
+  label: string;
+  filter: Filter;
+  control: CollectionControl;
+  onClose: () => void;
+  hideOperator?: boolean;
+}) {
+  const t = useDataTableT();
+  const shellTz = useTimeZone();
+  const { items: operatorItems, initial: initialOp } = resolveTemporalOperator(
+    getVisibleFilterOperators(config, filter.operator).filter(
+      (operator): operator is NumericTemporalOperator =>
+        temporalOperatorsFor(config.type).includes(operator as NumericTemporalOperator),
+    ),
+    filter.operator,
+  );
+  const [localOp, setLocalOp] = useState<NumericTemporalOperator>(initialOp);
+  const [localValue, setLocalValue] = useState(() => {
+    if (filter.operator === "between" && typeof filter.value === "object" && filter.value != null) {
+      const range = filter.value as { min?: unknown; max?: unknown };
+      return String(range.min ?? "");
+    }
+    return String(filter.value ?? "");
+  });
+  const [localValueMax, setLocalValueMax] = useState(() => {
+    if (filter.operator === "between" && typeof filter.value === "object" && filter.value != null) {
+      const range = filter.value as { min?: unknown; max?: unknown };
+      return String(range.max ?? "");
+    }
+    return "";
+  });
+
+  const canCommit = (() => {
+    if (localOp === "between") {
+      const minEmpty = localValue.trim() === "";
+      const maxEmpty = localValueMax.trim() === "";
+      if (minEmpty && maxEmpty) return true; // will removeFilter
+      if (minEmpty || maxEmpty) return false; // both required
+      return (
+        isTemporalFilterValueValid(config.type, localValue, shellTz.value) &&
+        isTemporalFilterValueValid(config.type, localValueMax, shellTz.value) &&
+        isRangeOrdered(config.type, localValue, localValueMax)
+      );
+    }
+    return (
+      localValue.trim() === "" || isTemporalFilterValueValid(config.type, localValue, shellTz.value)
+    );
+  })();
+
+  const handleCommit = useCallback(() => {
+    if (localOp === "between") {
+      const minEmpty = localValue.trim() === "";
+      const maxEmpty = localValueMax.trim() === "";
+      if (minEmpty && maxEmpty) {
+        control.removeFilter(config.field);
+      } else if (!minEmpty && !maxEmpty) {
+        const minValid = isTemporalFilterValueValid(config.type, localValue, shellTz.value);
+        const maxValid = isTemporalFilterValueValid(config.type, localValueMax, shellTz.value);
+        if (!minValid || !maxValid) return;
+        if (!isRangeOrdered(config.type, localValue, localValueMax)) return;
+        if (config.type === "datetime") {
+          const min = normalizeTemporalFilterValue("datetime", localValue, shellTz.value);
+          const max = normalizeTemporalFilterValue("datetime", localValueMax, shellTz.value);
+          if (!min || !max) return;
+          control.addFilter(config.field, localOp, { min, max });
+          onClose();
+          return;
+        }
+        control.addFilter(config.field, localOp, {
+          min: localValue,
+          max: localValueMax,
+        });
+      } else {
+        return;
+      }
+    } else {
+      if (localValue.trim() === "") {
+        control.removeFilter(config.field);
+      } else if (isTemporalFilterValueValid(config.type, localValue, shellTz.value)) {
+        if (config.type === "datetime") {
+          const value = normalizeTemporalFilterValue("datetime", localValue, shellTz.value);
+          if (!value) return;
+          control.addFilter(config.field, localOp, value);
+          onClose();
+          return;
+        }
+        control.addFilter(config.field, localOp, localValue);
+      } else {
+        return;
+      }
+    }
+    onClose();
+  }, [
+    localValue,
+    localValueMax,
+    localOp,
+    control,
+    config.field,
+    config.type,
+    onClose,
+    shellTz.value,
+  ]);
+
+  const isDate = config.type === "date";
+  const isDateTime = config.type === "datetime";
+  // date + datetime pickers share the same { ariaLabel, value, onChange } shape.
+  const Picker = isDateTime ? DateTimeFilterInput : DateFilterPicker;
+  const betweenError =
+    localOp === "between"
+      ? betweenOrderError(
+          config.type,
+          localValue,
+          localValueMax,
+          t("filterBetweenFrom"),
+          t("filterBetweenTo"),
+          t,
+        )
+      : undefined;
+  let valueInput: ReactNode;
+  if (localOp === "between") {
+    valueInput =
+      isDate || isDateTime ? (
+        <div className="astw:flex astw:flex-col astw:gap-1.5">
+          <Picker
+            ariaLabel={`${label} — ${t("filterBetweenFrom")}`}
+            value={localValue}
+            onChange={setLocalValue}
+          />
+          <Picker
+            ariaLabel={`${label} — ${t("filterBetweenTo")}`}
+            value={localValueMax}
+            onChange={setLocalValueMax}
+          />
+          {betweenError && (
+            <Text variant="body-sm" className="astw:text-danger-text">
+              {betweenError}
+            </Text>
+          )}
+        </div>
+      ) : (
+        <BetweenInputGroup
+          labels={[t("filterBetweenFrom"), t("filterBetweenTo")]}
+          values={[localValue, localValueMax]}
+          onChangeMin={setLocalValue}
+          onChangeMax={setLocalValueMax}
+          onSubmit={handleCommit}
+          inputProps={getTemporalInputProps(config.type)}
+          error={betweenError}
+        />
+      );
+  } else {
+    valueInput =
+      isDate || isDateTime ? (
+        <Picker ariaLabel={label} value={localValue} onChange={setLocalValue} />
+      ) : (
+        <Input
+          {...getTemporalInputProps(config.type)}
+          value={localValue}
+          onChange={(e) => {
+            setLocalValue(e.target.value);
+          }}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Enter" && !isComposing(e.nativeEvent)) {
+              handleCommit();
+            }
+          }}
+          className="astw:h-8 astw:text-body-md"
+        />
+      );
+  }
+
+  return (
+    <div
+      data-slot={`data-table-filter-${config.type}`}
+      className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
+    >
+      {!hideOperator && (
+        <Select
+          items={[...operatorItems]}
+          value={localOp}
+          onValueChange={(v) => {
+            if (v) setLocalOp(v);
+          }}
+          mapItem={(op) => ({ value: op, label: getOperatorLabel(op, t, config.type) })}
+          className="astw:h-8 astw:text-body-md"
+        />
+      )}
+      {valueInput}
+      <Button size="xs" onClick={handleCommit} disabled={!canCommit} className="astw:self-end">
+        {t("applyFilter")}
+      </Button>
+    </div>
+  );
+}
+
+export { FilterPopoverContent };
diff --git a/packages/core/src/components/data-table/filters/filters.test.tsx b/packages/core/src/components/data-table/filters/filters.test.tsx
new file mode 100644
index 00000000..32596ce9
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/filters.test.tsx
@@ -0,0 +1,211 @@
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { Column } from "../types";
+import {
+  TestFilters,
+  type TestRow,
+  makeControl,
+  numberColumn,
+  openValueEditor,
+  stringColumn,
+  timeColumn,
+  uuidColumn,
+  wrapper,
+} from "./test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+});
+
+describe.each([
+  { isComposing: true, keyCode: 13 },
+  { isComposing: false, keyCode: 229 },
+])("filter IME handling ($isComposing, $keyCode)", (compositionEvent) => {
+  describe.each(["panel", "chip"] as const)("%s", (surface) => {
+    it.each([
+      { column: stringColumn, initial: "Alice", draft: "株式会社", final: "株式会社東京" },
+      { column: uuidColumn, initial: "uuid-1", draft: "uuid-2", final: "uuid-3" },
+      { column: numberColumn, initial: 1, draft: "2", final: 3 },
+      { column: timeColumn, initial: "09:30", draft: "10:30", final: "11:30" },
+    ])(
+      "does not commit $column.id until Enter outside composition",
+      async ({ column, initial, draft, final }) => {
+        const user = userEvent.setup();
+        const field = column.id!;
+        const operator = column === stringColumn ? "contains" : "eq";
+        const control = makeControl({ filters: [{ field, operator, value: initial }] });
+        render(<TestFilters control={control} columns={[column]} />, { wrapper });
+
+        if (surface === "panel") {
+          await user.click(screen.getByRole("button", { name: "Add filter" }));
+        } else {
+          await openValueEditor(user);
+        }
+
+        const input = await screen.findByDisplayValue(String(initial));
+        await user.click(input);
+        fireEvent.change(input, { target: { value: draft } });
+        fireEvent.keyDown(input, { key: "Enter", ...compositionEvent });
+
+        expect(control.addFilter).not.toHaveBeenCalled();
+        expect(control.removeFilter).not.toHaveBeenCalled();
+        expect(document.activeElement).toBe(input);
+        expect(screen.getByDisplayValue(draft)).toBe(input);
+
+        fireEvent.change(input, { target: { value: String(final) } });
+        fireEvent.keyDown(input, { key: "Enter", ...compositionEvent });
+        expect(control.addFilter).not.toHaveBeenCalled();
+        expect(control.removeFilter).not.toHaveBeenCalled();
+
+        fireEvent.keyDown(input, { key: "Enter", isComposing: false, keyCode: 13 });
+        expect(control.addFilter).toHaveBeenCalledTimes(1);
+        expect(vi.mocked(control.addFilter).mock.calls[0].slice(0, 3)).toEqual([
+          field,
+          operator,
+          final,
+        ]);
+        if (surface === "chip") {
+          await vi.waitFor(() => expect(screen.queryByDisplayValue(String(final))).toBeNull());
+        } else {
+          expect(screen.getByDisplayValue(String(final))).toBe(input);
+        }
+      },
+    );
+
+    it.each(["Min", "Max"])("does not commit a range from %s during composition", async (bound) => {
+      const user = userEvent.setup();
+      const control = makeControl({
+        filters: [{ field: "count", operator: "between", value: { min: 1, max: 10 } }],
+      });
+      render(<TestFilters control={control} columns={[numberColumn]} />, { wrapper });
+      if (surface === "panel") {
+        await user.click(screen.getByRole("button", { name: "Add filter" }));
+      } else {
+        await openValueEditor(user);
+      }
+
+      const input = await screen.findByRole("spinbutton", { name: bound });
+      fireEvent.change(input, { target: { value: bound === "Min" ? "2" : "20" } });
+      fireEvent.keyDown(input, { key: "Enter", ...compositionEvent });
+      expect(control.addFilter).not.toHaveBeenCalled();
+      expect(control.removeFilter).not.toHaveBeenCalled();
+      expect(screen.getByRole("spinbutton", { name: bound })).toBe(input);
+
+      fireEvent.keyDown(input, { key: "Enter", isComposing: false, keyCode: 13 });
+      expect(control.addFilter).toHaveBeenCalledTimes(1);
+      expect(control.addFilter).toHaveBeenCalledWith("count", "between", {
+        min: bound === "Min" ? 2 : 1,
+        max: bound === "Max" ? 20 : 10,
+      });
+    });
+  });
+});
+
+describe("DataTable.Filters", () => {
+  it("renders no filter chips when no active filters", () => {
+    const control = makeControl({ filters: [] });
+    const { container } = render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+    expect(container.querySelector('[data-slot="data-table-filter-chip"]')).toBeNull();
+  });
+
+  it("renders a segmented filter chip (field / operator / value) for each active filter", () => {
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    const { container } = render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+    expect(container.querySelector('[data-slot="data-table-filter-chip"]')).not.toBeNull();
+    // The chip is segmented: the field, operator, and value each render in their
+    // own element rather than a single combined label.
+    expect(screen.getByText("Name")).toBeDefined();
+    expect(screen.getByText("contains")).toBeDefined();
+    expect(screen.getByText("Alice")).toBeDefined();
+  });
+
+  it("renders the add filter button when there are unfiltered filterable columns", () => {
+    const control = makeControl({ filters: [] });
+    render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+    expect(screen.getByRole("button", { name: "Add filter" })).toBeDefined();
+  });
+
+  it("still renders the add filter button when all filterable columns are active", () => {
+    // The add-filter trigger is always available now (it re-opens the editor for
+    // active fields too), so it must remain present even when every filterable
+    // column already has a chip.
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+    expect(screen.getByRole("button", { name: "Add filter" })).toBeDefined();
+  });
+
+  it("returns null when there are no filterable columns", () => {
+    const control = makeControl({ filters: [] });
+    const nonFilterableColumn: Column<TestRow> = {
+      id: "name",
+      label: "Name",
+      render: (r) => String(r.name ?? ""),
+    };
+    const { container } = render(
+      <TestFilters control={control} columns={[nonFilterableColumn]} />,
+      { wrapper },
+    );
+    expect(container.querySelector('[data-slot="data-table-filters"]')).toBeNull();
+  });
+
+  it("slot='add' renders only the Add filter trigger (no chips)", () => {
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} slot="add" />, { wrapper });
+    expect(screen.getByRole("button", { name: "Add filter" })).toBeDefined();
+    expect(document.querySelector('[data-slot="data-table-filter-chip"]')).toBeNull();
+  });
+
+  it("slot='chips' renders only active chips (no Add filter trigger)", () => {
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} slot="chips" />, { wrapper });
+    expect(document.querySelector('[data-slot="data-table-filter-chip"]')).not.toBeNull();
+    expect(screen.queryByRole("button", { name: "Add filter" })).toBeNull();
+  });
+
+  it("slot='chips' renders nothing when there are no active filters", () => {
+    const control = makeControl({ filters: [] });
+    const { container } = render(
+      <TestFilters control={control} columns={[stringColumn]} slot="chips" />,
+      { wrapper },
+    );
+    expect(container.querySelector('[data-slot="data-table-filters"]')).toBeNull();
+  });
+
+  it("renders an icon-only trigger by default (label kept as aria-label)", () => {
+    const control = makeControl({ filters: [] });
+    render(<TestFilters control={control} columns={[stringColumn]} slot="add" />, {
+      wrapper,
+    });
+    // Reachable by its accessible name, but the label text is not rendered.
+    const trigger = screen.getByRole("button", { name: "Add filter" });
+    expect(trigger.textContent).toBe("");
+  });
+
+  it("addIconOnly={false} renders the visible 'Add filter' text label", () => {
+    const control = makeControl({ filters: [] });
+    render(
+      <TestFilters control={control} columns={[stringColumn]} slot="add" addIconOnly={false} />,
+      { wrapper },
+    );
+    const trigger = screen.getByRole("button", { name: "Add filter" });
+    expect(trigger.textContent).toContain("Add filter");
+  });
+});
diff --git a/packages/core/src/components/data-table/filters/filters.tsx b/packages/core/src/components/data-table/filters/filters.tsx
new file mode 100644
index 00000000..86b2e41f
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/filters.tsx
@@ -0,0 +1,99 @@
+import { useDataTableContext } from "../context";
+import { useCollectionControlOptional } from "@/contexts/collection-control-context";
+import { useMemo } from "react";
+import { cn } from "@/lib/utils";
+import type { FilterableColumn } from "./types";
+import { FilterChip } from "./chip";
+import { AddFilterPanel } from "./add-panel";
+
+/** Use `DataTable.Filters` instead of calling this directly. */
+function DataTableFilters({
+  className,
+  slot = "all",
+  addIconOnly = true,
+}: {
+  className?: string;
+  /**
+   * Which part to render, for custom toolbar layouts:
+   * - `"all"` (default) — active filter chips plus the **Add filter** trigger.
+   * - `"chips"` — only the active filter chips (renders nothing when there are none).
+   * - `"add"` — only the **Add filter** trigger.
+   *
+   * Render `"add"` and `"chips"` separately to place the trigger and the chips on
+   * different rows (e.g. the trigger in a header row, chips on the row below).
+   */
+  slot?: "all" | "chips" | "add";
+  /**
+   * Render the **Add filter** trigger as an icon-only button (label → `aria-label`).
+   * Defaults to `true`; pass `addIconOnly={false}` to show the "Add filter" text label.
+   */
+  addIconOnly?: boolean;
+}) {
+  const ctx = useDataTableContext();
+  const control = useCollectionControlOptional();
+  if (!control) {
+    throw new Error(
+      "<DataTable.Filters> requires collection control. Pass `control` from `useCollectionVariables()` to `useDataTable()`.",
+    );
+  }
+
+  // Collect all columns that have a filter config
+  const filterableColumns = useMemo(
+    () => ctx.columns.filter((col): col is FilterableColumn => !!col.filter),
+    [ctx.columns],
+  );
+
+  if (filterableColumns.length === 0) return null;
+
+  const chips = filterableColumns
+    .map((col) => {
+      const active = control.filters.find((f) => f.field === col.filter.field);
+      return active ? (
+        <FilterChip key={col.filter.field} column={col} filter={active} control={control} />
+      ) : null;
+    })
+    .filter(Boolean);
+
+  // The Add filter trigger only. Wrapped in a shrink-to-content box so the button
+  // keeps its natural width instead of stretching to fill a column-flex toolbar
+  // (DataTable.Toolbar is `flex-col`, which stretches its children by default).
+  if (slot === "add") {
+    return (
+      <div className={cn("astw:w-fit", className)}>
+        <AddFilterPanel columns={filterableColumns} control={control} iconOnly={addIconOnly} />
+      </div>
+    );
+  }
+
+  // Active chips only — nothing when there are no active filters.
+  if (slot === "chips") {
+    if (chips.length === 0) return null;
+    return (
+      <div
+        data-slot="data-table-filters"
+        className={cn("astw:flex astw:flex-wrap astw:items-center astw:gap-2", className)}
+      >
+        {chips}
+      </div>
+    );
+  }
+
+  // Default: the left-aligned Add filter trigger + chips (grow to fill) to its right.
+  return (
+    <div
+      data-slot="data-table-filters"
+      className={cn("astw:flex astw:items-start astw:gap-2", className)}
+    >
+      {/* Trigger comes first so it stays pinned left and doesn't shift as chips are
+          added — the chips grow to its right inside their own flex-1 container. */}
+      <AddFilterPanel columns={filterableColumns} control={control} iconOnly={addIconOnly} />
+      <div className="astw:flex astw:flex-1 astw:flex-wrap astw:items-center astw:gap-2">
+        {chips}
+      </div>
+    </div>
+  );
+}
+
+DataTableFilters.displayName = "DataTable.Filters";
+
+export { DataTableFilters };
diff --git a/packages/core/src/components/data-table/filters/formatting.ts b/packages/core/src/components/data-table/filters/formatting.ts
new file mode 100644
index 00000000..9442e003
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/formatting.ts
@@ -0,0 +1,125 @@
+import { DateFormatter, parseDate } from "@internationalized/date";
+import { normalizeTemporalFilterValue, isTemporalFilterType } from "@/lib/temporal-filter-values";
+import type { Filter, FilterConfig } from "@/types/collection";
+import type { useDataTableT } from "../i18n";
+
+/** Format an ISO "YYYY-MM-DD" value as a locale-appropriate medium date. */
+function formatDateValue(iso: string, locale: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return iso;
+  try {
+    // Format in UTC against a UTC-anchored instant so the calendar date never
+    // shifts across timezones.
+    return new DateFormatter(locale, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      timeZone: "UTC",
+    }).format(parseDate(iso).toDate("UTC"));
+  } catch {
+    return iso;
+  }
+}
+
+/**
+ * Date range for chip display: "15 Jul 2026 – 17 Jul 2026". Each bound is
+ * formatted with the same locale-aware medium date used elsewhere, joined with
+ * an en dash. (A tighter same-month collapse was avoided — partial Intl date
+ * parts render inconsistently across locales.)
+ */
+function formatDateRange(minIso: string, maxIso: string, locale: string): string {
+  return [minIso && formatDateValue(minIso, locale), maxIso && formatDateValue(maxIso, locale)]
+    .filter(Boolean)
+    .join(" – ");
+}
+
+/** Format an RFC 3339 datetime as a locale medium date + short time. */
+function formatDateTimeValue(iso: string, locale: string, timeZone: string): string {
+  const normalized = normalizeTemporalFilterValue("datetime", iso, timeZone);
+  if (!normalized) return iso;
+  try {
+    return new DateFormatter(locale, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone,
+    }).format(new Date(normalized));
+  } catch {
+    return iso;
+  }
+}
+
+function formatFilterValue(
+  filter: Filter,
+  config: FilterConfig,
+  t: ReturnType<typeof useDataTableT>,
+  locale: string,
+  timeZone: string,
+  /** Column label — used to summarize multi-select enums as "N labels". */
+  label?: string,
+): string {
+  if (config.type === "enum" && Array.isArray(filter.value)) {
+    const labels = filter.value
+      .map((v) => config.options.find((option) => option.value === v)?.label ?? String(v))
+      .filter((v) => v !== "");
+    // Summarize multiple selections as "2 Status(s)" rather than listing them.
+    if (labels.length > 1 && label) {
+      return t("filterEnumCount", { count: labels.length, noun: label });
+    }
+    return labels.join(", ");
+  }
+
+  if (config.type === "boolean") {
+    return filter.value === true ? t("filterBooleanTrue") : t("filterBooleanFalse");
+  }
+
+  if ((config.type === "number" || config.type === "decimal") && filter.operator === "between") {
+    const range = filter.value as { min?: unknown; max?: unknown } | null;
+    if (!range || typeof range !== "object") return "";
+    const min = range.min != null ? String(range.min) : "";
+    const max = range.max != null ? String(range.max) : "";
+    return [min, max].filter(Boolean).join(" - ");
+  }
+
+  if (config.type === "date") {
+    if (filter.operator === "between") {
+      const range = filter.value as { min?: unknown; max?: unknown } | null;
+      if (!range || typeof range !== "object") return "";
+      const minIso = range.min != null ? String(range.min) : "";
+      const maxIso = range.max != null ? String(range.max) : "";
+      return formatDateRange(minIso, maxIso, locale);
+    }
+    if (filter.value == null || filter.value === "") return "";
+    return formatDateValue(String(filter.value), locale);
+  }
+
+  if (config.type === "datetime") {
+    if (filter.operator === "between") {
+      const range = filter.value as { min?: unknown; max?: unknown } | null;
+      if (!range || typeof range !== "object") return "";
+      const min = range.min != null ? formatDateTimeValue(String(range.min), locale, timeZone) : "";
+      const max = range.max != null ? formatDateTimeValue(String(range.max), locale, timeZone) : "";
+      return [min, max].filter(Boolean).join(" – ");
+    }
+    if (filter.value == null || filter.value === "") return "";
+    return formatDateTimeValue(String(filter.value), locale, timeZone);
+  }
+
+  if (isTemporalFilterType(config.type) && filter.operator === "between") {
+    const range = filter.value as { min?: unknown; max?: unknown } | null;
+    if (!range || typeof range !== "object") return "";
+    const min = range.min != null ? String(range.min) : "";
+    const max = range.max != null ? String(range.max) : "";
+    return [min, max].filter(Boolean).join(" - ");
+  }
+
+  if (Array.isArray(filter.value)) {
+    return filter.value.map((v) => String(v)).join(", ");
+  }
+
+  if (filter.value == null || filter.value === "") return "";
+  return String(filter.value);
+}
+
+export { formatDateTimeValue, formatDateValue, formatFilterValue };
diff --git a/packages/core/src/components/data-table/filters/inputs.tsx b/packages/core/src/components/data-table/filters/inputs.tsx
new file mode 100644
index 00000000..7e915533
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/inputs.tsx
@@ -0,0 +1,133 @@
+import { Input } from "@/components/input";
+import { cn } from "@/lib/utils";
+import { isComposing } from "@/lib/is-composing";
+import { Text } from "../../text";
+import type { SelectOption } from "@/types/collection";
+import { Checkbox } from "@/components/checkbox";
+
+// =============================================================================
+// BetweenInputGroup — shared UI for "between" filter inputs
+// =============================================================================
+
+function BetweenInputGroup({
+  labels,
+  values,
+  onChangeMin,
+  onChangeMax,
+  onSubmit,
+  inputProps,
+  error,
+}: {
+  labels: [string, string];
+  values: [string, string];
+  onChangeMin: (value: string) => void;
+  onChangeMax: (value: string) => void;
+  onSubmit: () => void;
+  inputProps?: React.ComponentProps<typeof Input>;
+  /** Validation message shown below the inputs (e.g. a reversed range). */
+  error?: string;
+}) {
+  const rowBase =
+    "astw:flex astw:items-center astw:h-8 astw:rounded-md astw:border astw:shadow-xs astw:has-focus-visible:ring-[3px]";
+  const rowOk =
+    "astw:border-input astw:has-focus-visible:border-ring astw:has-focus-visible:ring-ring/50";
+  const rowError = "astw:border-danger-solid astw:has-focus-visible:ring-danger-solid/30";
+  const labelCell =
+    "astw:text-secondary-foreground astw:text-body-sm astw:px-2.5 astw:border-r astw:border-input astw:bg-muted astw:rounded-l-md astw:h-full astw:flex astw:items-center astw:justify-center astw:shrink-0 astw:min-w-14";
+  const inputCell =
+    "astw:h-full astw:text-body-md astw:border-0 astw:shadow-none astw:focus-visible:ring-0";
+  return (
+    <div className="astw:flex astw:flex-col astw:gap-1.5">
+      <div className={cn(rowBase, rowOk)}>
+        <span className={labelCell}>{labels[0]}</span>
+        <Input
+          {...inputProps}
+          aria-label={labels[0]}
+          value={values[0]}
+          onChange={(e) => onChangeMin(e.target.value)}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Enter" && !isComposing(e.nativeEvent)) onSubmit();
+          }}
+          className={inputCell}
+        />
+      </div>
+      <div className={cn(rowBase, error ? rowError : rowOk)}>
+        <span className={labelCell}>{labels[1]}</span>
+        <Input
+          {...inputProps}
+          aria-label={labels[1]}
+          aria-invalid={error ? true : undefined}
+          value={values[1]}
+          onChange={(e) => onChangeMax(e.target.value)}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Enter" && !isComposing(e.nativeEvent)) onSubmit();
+          }}
+          className={inputCell}
+        />
+      </div>
+      {error && (
+        <Text variant="body-sm" className="astw:text-danger-text">
+          {error}
+        </Text>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Multi-select option list for enum filters. Rendered identically in the
+ * add-filter panel and the chip's value editor so the checkbox style is
+ * consistent in both places.
+ */
+function EnumOptionList({
+  options,
+  selected,
+  onToggle,
+}: {
+  options: readonly SelectOption[];
+  selected: string[];
+  onToggle: (value: string) => void;
+}) {
+  return (
+    <div data-slot="data-table-filter-enum" className="astw:p-1">
+      {options.map((option) => (
+        <label
+          key={option.value}
+          className={cn(
+            "astw:flex astw:cursor-pointer astw:select-none astw:items-center astw:gap-2 astw:rounded-sm astw:px-2 astw:py-1.5 astw:text-body-md",
+            "astw:hover:bg-accent astw:hover:text-accent-foreground",
+          )}
+        >
+          <Checkbox
+            checked={selected.includes(option.value)}
+            onCheckedChange={() => onToggle(option.value)}
+          />
+          {option.label}
+        </label>
+      ))}
+    </div>
+  );
+}
+
+function getTemporalInputProps(type: "datetime" | "date" | "time") {
+  switch (type) {
+    case "datetime":
+      return {
+        type: "text" as const,
+        placeholder: "2026-04-27T12:34:56Z",
+      };
+    case "date":
+      return {
+        type: "date" as const,
+      };
+    case "time":
+      return {
+        type: "time" as const,
+        step: 60,
+      };
+  }
+}
+
+export { EnumOptionList, BetweenInputGroup, getTemporalInputProps };
diff --git a/packages/core/src/components/data-table/filters/numeric-editors.test.tsx b/packages/core/src/components/data-table/filters/numeric-editors.test.tsx
new file mode 100644
index 00000000..78a56d16
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/numeric-editors.test.tsx
@@ -0,0 +1,293 @@
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { Column } from "../types";
+import {
+  TestFilters,
+  type TestRow,
+  makeControl,
+  numberColumn,
+  openValueEditor,
+  wrapper,
+} from "./test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+});
+
+const decimalColumn: Column<TestRow> = {
+  id: "amount",
+  label: "Amount",
+  filter: { type: "decimal", field: "amount" },
+};
+
+describe("NumericFilterEditor", () => {
+  it("shows an Apply button after opening the chip value popover", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "eq", value: 42 }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
+  });
+
+  it("Apply button calls addFilter with the updated numeric value", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "eq", value: 42 }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const input = await screen.findByRole("spinbutton");
+    await user.clear(input);
+    await user.type(input, "99");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("count", "eq", 99);
+  });
+
+  it("Enter key calls addFilter with the updated numeric value", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "eq", value: 42 }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const input = await screen.findByRole("spinbutton");
+    await user.clear(input);
+    await user.type(input, "7");
+    await user.keyboard("{Enter}");
+
+    expect(control.addFilter).toHaveBeenCalledWith("count", "eq", 7);
+  });
+});
+
+describe("Decimal filters", () => {
+  const preciseValue = "9007199254740993.123456789";
+  const preciseMax = "9007199254740993.123456790";
+
+  it.each(["panel", "chip"] as const)(
+    "%s submits scalar decimals as exact strings",
+    async (surface) => {
+      const user = userEvent.setup();
+      const control = makeControl({
+        filters: surface === "chip" ? [{ field: "amount", operator: "eq", value: "1" }] : [],
+      });
+      render(<TestFilters control={control} columns={[decimalColumn]} />, { wrapper });
+
+      if (surface === "panel") await user.click(screen.getByRole("button", { name: "Add filter" }));
+      else await openValueEditor(user);
+
+      const input = await screen.findByPlaceholderText("Enter amount");
+      expect(input.getAttribute("type")).toBe("text");
+      expect(input.getAttribute("inputmode")).toBe("decimal");
+      await user.clear(input);
+      await user.type(input, preciseValue);
+      await user.click(screen.getByRole("button", { name: "Apply" }));
+
+      if (surface === "panel") {
+        expect(control.addFilter).toHaveBeenCalledWith("amount", "eq", preciseValue, undefined);
+      } else {
+        expect(control.addFilter).toHaveBeenCalledWith("amount", "eq", preciseValue);
+      }
+    },
+  );
+
+  it.each(["panel", "chip"] as const)(
+    "%s submits precise ranges and rejects reversed bounds",
+    async (surface) => {
+      const user = userEvent.setup();
+      const control = makeControl({
+        filters:
+          surface === "chip"
+            ? [
+                {
+                  field: "amount",
+                  operator: "between",
+                  value: { min: preciseValue, max: preciseMax },
+                },
+              ]
+            : [],
+      });
+      render(<TestFilters control={control} columns={[decimalColumn]} />, { wrapper });
+
+      if (surface === "panel") {
+        await user.click(screen.getByRole("button", { name: "Add filter" }));
+        await user.click(await screen.findByRole("button", { name: "is between" }));
+      } else {
+        expect(screen.getByText(`${preciseValue} - ${preciseMax}`)).toBeDefined();
+        await openValueEditor(user);
+      }
+
+      const min = await screen.findByRole("textbox", { name: "Min" });
+      const max = screen.getByRole("textbox", { name: "Max" });
+      fireEvent.change(min, { target: { value: "9007199254740993" } });
+      fireEvent.change(max, { target: { value: "9007199254740992" } });
+      expect((screen.getByRole("button", { name: "Apply" }) as HTMLButtonElement).disabled).toBe(
+        true,
+      );
+      expect(screen.getByText(/must be greater than or equal to/i)).toBeDefined();
+      fireEvent.keyDown(max, { key: "Enter" });
+      expect(control.addFilter).not.toHaveBeenCalled();
+
+      fireEvent.change(min, { target: { value: preciseValue } });
+      fireEvent.change(max, { target: { value: preciseMax } });
+      await user.click(screen.getByRole("button", { name: "Apply" }));
+      expect(control.addFilter).toHaveBeenCalledWith("amount", "between", {
+        min: preciseValue,
+        max: preciseMax,
+      });
+    },
+  );
+
+  it("chip editing rejects invalid decimals without clearing the active filter", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "amount", operator: "eq", value: preciseValue }],
+    });
+    render(<TestFilters control={control} columns={[decimalColumn]} />, { wrapper });
+    await openValueEditor(user);
+
+    const input = await screen.findByRole("textbox");
+    fireEvent.change(input, { target: { value: "not-a-decimal" } });
+    expect((screen.getByRole("button", { name: "Apply" }) as HTMLButtonElement).disabled).toBe(
+      true,
+    );
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(control.addFilter).not.toHaveBeenCalled();
+    expect(control.removeFilter).not.toHaveBeenCalled();
+
+    fireEvent.change(input, { target: { value: "-1.23456789123456789e-100" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(control.addFilter).toHaveBeenCalledWith("amount", "eq", "-1.23456789123456789e-100");
+  });
+
+  it("operator transitions preserve decimal strings in both directions", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "amount", operator: "eq", value: preciseValue }],
+    });
+    const { rerender } = render(<TestFilters control={control} columns={[decimalColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: "is" }));
+    await user.click(await screen.findByRole("button", { name: "is between" }));
+    expect(control.addFilter).toHaveBeenCalledWith("amount", "between", {
+      min: preciseValue,
+      max: preciseValue,
+    });
+
+    const rangeControl = makeControl({
+      filters: [
+        { field: "amount", operator: "between", value: { min: preciseValue, max: preciseMax } },
+      ],
+    });
+    rerender(<TestFilters control={rangeControl} columns={[decimalColumn]} />);
+    await user.click(screen.getByRole("button", { name: "is between" }));
+    await user.click(await screen.findByRole("button", { name: "is" }));
+    expect(rangeControl.addFilter).toHaveBeenCalledWith("amount", "eq", preciseValue);
+  });
+});
+
+describe("NumericFilterEditor (between)", () => {
+  it("shows the between value summary and two number inputs when operator is between", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "between", value: { min: 10, max: 50 } }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, {
+      wrapper,
+    });
+
+    // Chip: operator segment "is between", value segment "10 - 50".
+    expect(screen.getByText("is between")).toBeDefined();
+    expect(screen.getByText("10 - 50")).toBeDefined();
+
+    await openValueEditor(user);
+
+    const inputs = await screen.findAllByRole("spinbutton");
+    expect(inputs.length).toBe(2);
+    expect((inputs[0] as HTMLInputElement).value).toBe("10");
+    expect((inputs[1] as HTMLInputElement).value).toBe("50");
+  });
+
+  it("Apply button calls addFilter with min/max range object", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "between", value: { min: 10, max: 50 } }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const inputs = await screen.findAllByRole("spinbutton");
+    await user.clear(inputs[0]);
+    await user.type(inputs[0], "5");
+    await user.clear(inputs[1]);
+    await user.type(inputs[1], "100");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("count", "between", {
+      min: 5,
+      max: 100,
+    });
+  });
+
+  it("Apply button does not call addFilter when only min is set and max is empty", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "between", value: { min: 10 } }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const inputs = await screen.findAllByRole("spinbutton");
+    // min should already be "10", max should be empty
+    expect((inputs[0] as HTMLInputElement).value).toBe("10");
+    expect((inputs[1] as HTMLInputElement).value).toBe("");
+
+    // A half-filled range is invalid, so Apply is disabled and commits nothing.
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).not.toHaveBeenCalled();
+  });
+
+  it("Apply button calls removeFilter when both inputs are empty", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "between", value: { min: 10, max: 50 } }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const inputs = await screen.findAllByRole("spinbutton");
+    await user.clear(inputs[0]);
+    await user.clear(inputs[1]);
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.removeFilter).toHaveBeenCalledWith("count");
+  });
+});
diff --git a/packages/core/src/components/data-table/filters/operators.ts b/packages/core/src/components/data-table/filters/operators.ts
new file mode 100644
index 00000000..7fe06df1
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/operators.ts
@@ -0,0 +1,197 @@
+import type { FilterConfig, FilterOperator } from "@/types/collection";
+import type { DataTableFilterConfig } from "../types";
+import type { useDataTableT } from "../i18n";
+
+// =============================================================================
+// DataTable.Filters
+// =============================================================================
+
+/** Default operator per filter type used when adding a new filter chip. */
+const DEFAULT_OPERATOR: Record<FilterConfig["type"], FilterOperator> = {
+  enum: "in",
+  boolean: "eq",
+  string: "contains",
+  number: "eq",
+  decimal: "eq",
+  datetime: "eq",
+  date: "eq",
+  time: "eq",
+  uuid: "eq",
+};
+
+/** Number/temporal operators available in the operator selector. */
+const NUMERIC_TEMPORAL_OPERATORS = ["eq", "ne", "gt", "gte", "lt", "lte", "between"] as const;
+
+type NumericTemporalOperator = (typeof NUMERIC_TEMPORAL_OPERATORS)[number];
+
+// Date filters use a slimmer, friendlier operator set: an exact date, inclusive
+// "after"/"before" (gte/lte), and a between range. No gt/lt/ne.
+const DATE_OPERATORS = ["eq", "gte", "lte", "between"] as const;
+
+/** Operators offered for a temporal editor, narrowed for `date` columns. */
+function temporalOperatorsFor(type: FilterConfig["type"]): readonly NumericTemporalOperator[] {
+  return type === "date" ? DATE_OPERATORS : NUMERIC_TEMPORAL_OPERATORS;
+}
+
+/**
+ * Operator options + initial selection for a numeric/temporal editor.
+ *
+ * A saved view or `useCollectionVariables` config can hold a filter whose
+ * operator is no longer in the standard set — most importantly a `date` filter
+ * on the now-dropped `gt`/`lt`/`ne` (the pre-narrowing operator set). In that
+ * case we keep the incoming operator as a selectable, preselected option rather
+ * than resetting to `eq`, so opening the editor and hitting Apply never silently
+ * rewrites the filter's operator (e.g. "after X" → "on X"). A truly unknown
+ * operator falls back to `eq`.
+ */
+function resolveTemporalOperator(
+  standard: readonly NumericTemporalOperator[],
+  current: FilterOperator,
+): { items: readonly NumericTemporalOperator[]; initial: NumericTemporalOperator } {
+  if (standard.includes(current as NumericTemporalOperator)) {
+    return { items: standard, initial: current as NumericTemporalOperator };
+  }
+  if ((NUMERIC_TEMPORAL_OPERATORS as readonly string[]).includes(current)) {
+    return {
+      items: [...standard, current as NumericTemporalOperator],
+      initial: current as NumericTemporalOperator,
+    };
+  }
+  return { items: standard, initial: standard[0] ?? "eq" };
+}
+
+/** String operators available in the operator selector. */
+const STRING_OPERATORS = ["eq", "ne", "contains", "notContains", "hasPrefix", "hasSuffix"] as const;
+
+type StringOperator = (typeof STRING_OPERATORS)[number];
+
+function getDefaultFilterOperators(type: FilterConfig["type"]): FilterOperator[] {
+  switch (type) {
+    case "string":
+      return [...STRING_OPERATORS];
+    case "date":
+      return [...DATE_OPERATORS];
+    case "number":
+    case "decimal":
+    case "datetime":
+    case "time":
+      return [...NUMERIC_TEMPORAL_OPERATORS];
+    case "enum":
+      return ["in"];
+    case "boolean":
+      return [...BOOLEAN_OPERATORS];
+    case "uuid":
+      return ["eq"];
+  }
+}
+
+function isUiOperatorAllowedForType(type: FilterConfig["type"], operator: FilterOperator): boolean {
+  switch (type) {
+    case "string":
+      return (STRING_OPERATORS as readonly string[]).includes(operator);
+    case "date":
+      return (DATE_OPERATORS as readonly string[]).includes(operator);
+    case "number":
+    case "decimal":
+    case "datetime":
+    case "time":
+      return (NUMERIC_TEMPORAL_OPERATORS as readonly string[]).includes(operator);
+    case "enum":
+      return operator === "in";
+    case "boolean":
+      return (BOOLEAN_OPERATORS as readonly string[]).includes(operator);
+    case "uuid":
+      return operator === "eq";
+  }
+}
+
+function getConfiguredFilterOperators(config: DataTableFilterConfig): FilterOperator[] | undefined {
+  const configured = config.operators as readonly FilterOperator[] | undefined;
+  if (!configured) return undefined;
+
+  const defaults = getDefaultFilterOperators(config.type);
+  const operators = configured.filter(
+    (operator, index) => defaults.includes(operator) && configured.indexOf(operator) === index,
+  );
+  return operators.length > 0 ? [...operators] : [DEFAULT_OPERATOR[config.type]];
+}
+
+export function getVisibleFilterOperators(
+  config: DataTableFilterConfig,
+  current?: FilterOperator,
+): FilterOperator[] {
+  const operators = getConfiguredFilterOperators(config) ?? getDefaultFilterOperators(config.type);
+  if (current && !operators.includes(current) && isUiOperatorAllowedForType(config.type, current)) {
+    return [...operators, current];
+  }
+  return operators;
+}
+
+function getDefaultFilterOperator(config: DataTableFilterConfig): FilterOperator {
+  return getConfiguredFilterOperators(config)?.[0] ?? DEFAULT_OPERATOR[config.type];
+}
+
+// =============================================================================
+// Boolean filter — operator selector + True/False select
+// =============================================================================
+
+type BooleanOperator = "eq" | "ne";
+
+const BOOLEAN_OPERATORS = ["eq", "ne"] as const;
+
+export function getOperatorLabel(
+  operator: FilterOperator,
+  t: ReturnType<typeof useDataTableT>,
+  type?: FilterConfig["type"],
+): string {
+  // Date columns relabel the comparison operators (exact date / after / before).
+  if (type === "date") {
+    if (operator === "eq") return t("filterDateOperator_eq");
+    if (operator === "gte") return t("filterDateOperator_gte");
+    if (operator === "lte") return t("filterDateOperator_lte");
+  }
+  switch (operator) {
+    case "eq":
+      return t("filterOperator_eq");
+    case "ne":
+      return t("filterOperator_ne");
+    case "gt":
+      return t("filterOperator_gt");
+    case "gte":
+      return t("filterOperator_gte");
+    case "lt":
+      return t("filterOperator_lt");
+    case "lte":
+      return t("filterOperator_lte");
+    case "contains":
+      return t("filterOperator_contains");
+    case "notContains":
+      return t("filterOperator_notContains");
+    case "hasPrefix":
+      return t("filterOperator_hasPrefix");
+    case "hasSuffix":
+      return t("filterOperator_hasSuffix");
+    case "notHasPrefix":
+      return t("filterOperator_notHasPrefix");
+    case "notHasSuffix":
+      return t("filterOperator_notHasSuffix");
+    case "between":
+      return t("filterOperator_between");
+    case "in":
+      return t("filterOperator_in");
+    case "nin":
+      return t("filterOperator_nin");
+    default:
+      return operator;
+  }
+}
+
+export {
+  getDefaultFilterOperator,
+  BOOLEAN_OPERATORS,
+  STRING_OPERATORS,
+  DEFAULT_OPERATOR,
+  resolveTemporalOperator,
+  temporalOperatorsFor,
+};
+export type { BooleanOperator, StringOperator, NumericTemporalOperator };
diff --git a/packages/core/src/components/data-table/filters/temporal-editors.test.tsx b/packages/core/src/components/data-table/filters/temporal-editors.test.tsx
new file mode 100644
index 00000000..144013f1
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/temporal-editors.test.tsx
@@ -0,0 +1,355 @@
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  TestFilters,
+  dateColumn,
+  datetimeColumn,
+  makeControl,
+  openValueEditor,
+  timeColumn,
+  timeZoneWrapper,
+  wrapper,
+} from "./test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+});
+
+// DatePicker segments are re-queried by index to survive controlled re-renders.
+const datePickerGroup = (index: number) => screen.getAllByRole("group")[index];
+
+async function typeDateInto(
+  user: ReturnType<typeof userEvent.setup>,
+  groupIndex: number,
+  iso: string,
+) {
+  const [year, month, day] = iso.split("-");
+  const seg = (name: string) =>
+    within(datePickerGroup(groupIndex)).getByRole("spinbutton", { name });
+  await user.click(seg("month"));
+  await user.keyboard(month);
+  await user.click(seg("day"));
+  await user.keyboard(day);
+  await user.click(seg("year"));
+  await user.keyboard(year);
+}
+
+async function clearDateIn(user: ReturnType<typeof userEvent.setup>, groupIndex: number) {
+  // Clear every segment. Leaving the day set would trigger the field's on-blur
+  // backfill (assume current month/year), so a genuine "cleared" state must
+  // remove the day too — the day is the trigger for that backfill.
+  for (const name of ["day", "month", "year"]) {
+    await user.click(within(datePickerGroup(groupIndex)).getByRole("spinbutton", { name }));
+    await user.keyboard("{Delete}");
+  }
+}
+
+describe("DateFilterEditor", () => {
+  it("shows an Apply button after opening the chip value popover", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
+  });
+
+  it("renders a DatePicker (spinbutton segments) for the date filter", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
+
+    await openValueEditor(user);
+
+    // The editor uses the app-shell DatePicker: a labelled group of spinbuttons.
+    expect(
+      await within(datePickerGroup(0)).findByRole("spinbutton", { name: "day" }),
+    ).toBeDefined();
+  });
+
+  it("Apply button calls addFilter with the selected date", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
+
+    await openValueEditor(user);
+    await screen.findByRole("button", { name: "Apply" });
+
+    await typeDateInto(user, 0, "2026-06-15");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("createdAt", "eq", "2026-06-15");
+  });
+
+  it("Apply button calls removeFilter when the date is cleared", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
+
+    await openValueEditor(user);
+    await screen.findByRole("button", { name: "Apply" });
+
+    await clearDateIn(user, 0);
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.removeFilter).toHaveBeenCalledWith("createdAt");
+  });
+
+  it("labels date operators as exact date / after / before and formats the value", () => {
+    // The chip's operator segment shows the friendly date labels, and the value
+    // segment shows a locale-formatted medium date (never the raw ISO string).
+    const { rerender } = render(
+      <TestFilters
+        control={makeControl({
+          filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
+        })}
+        columns={[dateColumn]}
+      />,
+      { wrapper },
+    );
+    expect(screen.getByText("exact date")).toBeDefined();
+    expect(screen.getByText("Jan 1, 2025")).toBeDefined();
+    expect(screen.queryByText(/2025-01-01/)).toBeNull();
+
+    rerender(
+      <TestFilters
+        control={makeControl({
+          filters: [{ field: "createdAt", operator: "gte", value: "2025-02-01" }],
+        })}
+        columns={[dateColumn]}
+      />,
+    );
+    expect(screen.getByText("after")).toBeDefined();
+    expect(screen.getByText("Feb 1, 2025")).toBeDefined();
+    expect(screen.queryByText("greater than")).toBeNull();
+
+    rerender(
+      <TestFilters
+        control={makeControl({
+          filters: [{ field: "createdAt", operator: "lte", value: "2025-03-01" }],
+        })}
+        columns={[dateColumn]}
+      />,
+    );
+    expect(screen.getByText("before")).toBeDefined();
+    expect(screen.getByText("Mar 1, 2025")).toBeDefined();
+  });
+
+  it("preserves a legacy operator (e.g. gt) on Apply instead of coercing to eq", async () => {
+    const user = userEvent.setup();
+    // A saved view / useCollectionVariables config can hold a date filter on the
+    // now-dropped `gt` operator. Opening + re-applying it must NOT silently flip
+    // it to `eq` (which would turn "after X" into "on X").
+    const control = makeControl({
+      filters: [{ field: "createdAt", operator: "gt", value: "2025-01-01" }],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
+
+    // The chip's operator segment still renders the legacy operator's (generic) label.
+    expect(screen.getByText("greater than")).toBeDefined();
+
+    // Open the value editor (operator hidden there) and Apply without touching
+    // anything → the operator is preserved.
+    await openValueEditor(user);
+    await screen.findByRole("button", { name: "Apply" });
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("createdAt", "gt", "2025-01-01");
+    expect(control.addFilter).not.toHaveBeenCalledWith("createdAt", "eq", expect.anything());
+  });
+});
+
+describe("TemporalFilterEditor", () => {
+  it("hydrates the date picker + time box from an RFC 3339 datetime", async () => {
+    const user = userEvent.setup();
+    vi.stubEnv("TZ", "UTC");
+    const value = "2025-01-01T10:30:00Z";
+    const control = makeControl({
+      filters: [{ field: "publishedAt", operator: "eq", value }],
+    });
+    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
+      wrapper: timeZoneWrapper,
+    });
+
+    await openValueEditor(user);
+
+    // Date part is a segmented picker (a group), time part a native time box
+    // seeded from the RFC 3339 instant in the configured AppShell timezone.
+    expect(await screen.findByRole("group")).toBeDefined();
+    expect(screen.getByDisplayValue("02:30")).toBeDefined();
+  });
+
+  it("serializes the selected local datetime as an RFC 3339 instant on Apply", async () => {
+    const user = userEvent.setup();
+    vi.stubEnv("TZ", "UTC");
+    const control = makeControl({
+      filters: [{ field: "publishedAt", operator: "eq", value: "2025-01-01T10:30:00" }],
+    });
+    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
+      wrapper: timeZoneWrapper,
+    });
+
+    await openValueEditor(user);
+
+    fireEvent.change(await screen.findByDisplayValue("10:30"), { target: { value: "08:45" } });
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("publishedAt", "eq", "2025-01-01T16:45:00.000Z");
+  });
+
+  it("serializes both datetime between bounds as RFC 3339 instants", async () => {
+    const user = userEvent.setup();
+    vi.stubEnv("TZ", "UTC");
+    const control = makeControl({
+      filters: [
+        {
+          field: "publishedAt",
+          operator: "between",
+          value: { min: "2025-01-01T10:30:00", max: "2025-01-02T11:30:00" },
+        },
+      ],
+    });
+    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
+      wrapper: timeZoneWrapper,
+    });
+
+    await openValueEditor(user);
+
+    fireEvent.change(await screen.findByDisplayValue("10:30"), { target: { value: "08:45" } });
+    fireEvent.change(screen.getByDisplayValue("11:30"), { target: { value: "09:15" } });
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("publishedAt", "between", {
+      min: "2025-01-01T16:45:00.000Z",
+      max: "2025-01-02T17:15:00.000Z",
+    });
+  });
+
+  it("formats datetime chip values in the configured AppShell timezone", () => {
+    vi.stubEnv("TZ", "UTC");
+    const expected = new Intl.DateTimeFormat("en", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone: "America/Los_Angeles",
+    }).format(new Date("2025-01-01T10:30:00Z"));
+    const control = makeControl({
+      filters: [{ field: "publishedAt", operator: "eq", value: "2025-01-01T10:30:00Z" }],
+    });
+    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
+      wrapper: timeZoneWrapper,
+    });
+
+    expect(screen.getByText(expected)).toBeDefined();
+  });
+  it("Apply button calls addFilter with an HH:MM time", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "opensAt", operator: "eq", value: "09:30" }],
+    });
+    render(<TestFilters control={control} columns={[timeColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const input = await screen.findByDisplayValue("09:30");
+    await user.clear(input);
+    await user.type(input, "18:45");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("opensAt", "eq", "18:45");
+  });
+});
+
+describe("TemporalFilterEditor (between)", () => {
+  it("shows a date range value (en dash, medium dates) and two date pickers", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [
+        {
+          field: "createdAt",
+          operator: "between",
+          value: { min: "2025-01-01", max: "2025-12-31" },
+        },
+      ],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
+
+    // The value segment renders "<min> – <max>" using medium dates (en dash).
+    expect(
+      screen.getByText(
+        (content) => content.includes("Jan 1, 2025") && content.includes("Dec 31, 2025"),
+      ),
+    ).toBeDefined();
+
+    await openValueEditor(user);
+
+    await screen.findByRole("button", { name: "Apply" });
+    expect(screen.getAllByRole("group")).toHaveLength(2);
+  });
+
+  it("Apply button calls addFilter with min/max range for date between", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [
+        {
+          field: "createdAt",
+          operator: "between",
+          value: { min: "2025-01-01", max: "2025-12-31" },
+        },
+      ],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
+
+    await openValueEditor(user);
+    await screen.findByRole("button", { name: "Apply" });
+
+    await typeDateInto(user, 0, "2026-03-01");
+    await typeDateInto(user, 1, "2026-06-30");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("createdAt", "between", {
+      min: "2026-03-01",
+      max: "2026-06-30",
+    });
+  });
+
+  it("Apply button calls removeFilter when both date pickers are cleared", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [
+        {
+          field: "createdAt",
+          operator: "between",
+          value: { min: "2025-01-01", max: "2025-12-31" },
+        },
+      ],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
+
+    await openValueEditor(user);
+    await screen.findByRole("button", { name: "Apply" });
+
+    await clearDateIn(user, 0);
+    await clearDateIn(user, 1);
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.removeFilter).toHaveBeenCalledWith("createdAt");
+  });
+});
diff --git a/packages/core/src/components/data-table/filters/test-utils.tsx b/packages/core/src/components/data-table/filters/test-utils.tsx
new file mode 100644
index 00000000..2cfd731f
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/test-utils.tsx
@@ -0,0 +1,125 @@
+import type { ReactNode } from "react";
+import { vi } from "vitest";
+import type userEvent from "@testing-library/user-event";
+import { createAppShellWrapper } from "../../../../tests/test-utils";
+import { AppShellConfigContext, buildConfigurations } from "@/contexts/appshell-context";
+import type { CollectionControl } from "@/types/collection";
+import { DataTable } from "../data-table";
+import { useDataTable } from "../use-data-table";
+import type { Column } from "../types";
+
+export type TestRow = Record<string, unknown>;
+
+export function makeControl(overrides?: Partial<CollectionControl>): CollectionControl {
+  return {
+    filters: [],
+    addFilter: vi.fn(),
+    setFilters: vi.fn(),
+    removeFilter: vi.fn(),
+    clearFilters: vi.fn(),
+    sortStates: [],
+    setSort: vi.fn(),
+    clearSort: vi.fn(),
+    pageSize: 10,
+    setPageSize: vi.fn(),
+    goToNextPage: vi.fn(),
+    goToPrevPage: vi.fn(),
+    resetPage: vi.fn(),
+    goToFirstPage: vi.fn(),
+    goToLastPage: vi.fn(),
+    resetCount: 0,
+    getHasPrevPage: () => false,
+    getHasNextPage: (pageInfo) => pageInfo.hasNextPage,
+    ...overrides,
+  };
+}
+
+export function TestFilters({
+  control,
+  columns,
+  slot,
+  addIconOnly,
+}: {
+  control: CollectionControl;
+  columns: Column<TestRow>[];
+  slot?: "all" | "chips" | "add";
+  addIconOnly?: boolean;
+}) {
+  const table = useDataTable<TestRow>({ columns, data: { rows: [] }, control });
+  return (
+    <DataTable.Root value={table}>
+      <DataTable.Toolbar>
+        <DataTable.Filters slot={slot} addIconOnly={addIconOnly} />
+      </DataTable.Toolbar>
+    </DataTable.Root>
+  );
+}
+
+export const wrapper = createAppShellWrapper("en");
+export const timeZoneWrapper = ({ children }: { children: ReactNode }) => (
+  <AppShellConfigContext.Provider
+    value={{
+      configurations: buildConfigurations({
+        modules: [],
+        locale: "en",
+        timeZone: "America/Los_Angeles",
+      }),
+    }}
+  >
+    {children}
+  </AppShellConfigContext.Provider>
+);
+
+// The value segment is the second-to-last button: [operator?, value, remove].
+function valueSegmentButton(chipIndex = 0): HTMLButtonElement {
+  const chip = document.querySelectorAll('[data-slot="data-table-filter-chip"]')[chipIndex];
+  if (!chip) throw new Error("No filter chip rendered");
+  const buttons = chip.querySelectorAll("button");
+  return buttons[buttons.length - 2] as HTMLButtonElement;
+}
+
+export async function openValueEditor(user: ReturnType<typeof userEvent.setup>, chipIndex = 0) {
+  await user.click(valueSegmentButton(chipIndex));
+}
+
+export const stringColumn: Column<TestRow> = {
+  id: "name",
+  label: "Name",
+  render: (r) => String(r.name ?? ""),
+  filter: { type: "string", field: "name" },
+};
+
+export const uuidColumn: Column<TestRow> = {
+  id: "id",
+  label: "ID",
+  render: (r) => String(r.id ?? ""),
+  filter: { type: "uuid", field: "id" },
+};
+
+export const numberColumn: Column<TestRow> = {
+  id: "count",
+  label: "Count",
+  render: (r) => String(r.count ?? ""),
+  filter: { type: "number", field: "count" },
+};
+
+export const dateColumn: Column<TestRow> = {
+  id: "createdAt",
+  label: "Created At",
+  render: (r) => String(r.createdAt ?? ""),
+  filter: { type: "date", field: "createdAt" },
+};
+
+export const datetimeColumn: Column<TestRow> = {
+  id: "publishedAt",
+  label: "Published At",
+  render: (r) => String(r.publishedAt ?? ""),
+  filter: { type: "datetime", field: "publishedAt" },
+};
+
+export const timeColumn: Column<TestRow> = {
+  id: "opensAt",
+  label: "Opens At",
+  render: (r) => String(r.opensAt ?? ""),
+  filter: { type: "time", field: "opensAt" },
+};
diff --git a/packages/core/src/components/data-table/filters/text-choice-editors.test.tsx b/packages/core/src/components/data-table/filters/text-choice-editors.test.tsx
new file mode 100644
index 00000000..bac3e2b1
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/text-choice-editors.test.tsx
@@ -0,0 +1,365 @@
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { Column } from "../types";
+import {
+  TestFilters,
+  type TestRow,
+  makeControl,
+  openValueEditor,
+  stringColumn,
+  uuidColumn,
+  wrapper,
+} from "./test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+});
+
+const enumColumn: Column<TestRow> = {
+  id: "status",
+  label: "Status",
+  render: (r) => String(r.status ?? ""),
+  filter: {
+    type: "enum",
+    field: "status",
+    options: [
+      { value: "active", label: "Active" },
+      { value: "inactive", label: "Inactive" },
+    ],
+  },
+};
+
+const booleanColumn: Column<TestRow> = {
+  id: "enabled",
+  label: "Enabled",
+  render: (r) => String(r.enabled ?? ""),
+  filter: { type: "boolean", field: "enabled" },
+};
+
+describe("StringFilterEditor", () => {
+  it("shows an Apply button after opening the chip value popover", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
+  });
+
+  it("Apply button calls addFilter with the updated value and closes the popover", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const input = await screen.findByRole("textbox");
+    await user.clear(input);
+    await user.type(input, "Bob");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    // The operator comes from the chip's own operator segment (the editor is
+    // rendered with hideOperator), so it stays "contains".
+    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Bob", {
+      caseSensitive: false,
+    });
+  });
+
+  it("Enter key calls addFilter with the updated value", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const input = await screen.findByRole("textbox");
+    await user.clear(input);
+    await user.type(input, "Charlie");
+    await user.keyboard("{Enter}");
+
+    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Charlie", {
+      caseSensitive: false,
+    });
+  });
+
+  it("Apply button calls removeFilter when the value is cleared", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const input = await screen.findByRole("textbox");
+    await user.clear(input);
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.removeFilter).toHaveBeenCalledWith("name");
+  });
+
+  it("shows a Case sensitive checkbox", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    expect(await screen.findByText("Case sensitive")).toBeDefined();
+  });
+
+  it("Apply with case-sensitive checked calls addFilter with caseSensitive option", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "name", operator: "contains", value: "Alice" }],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const checkbox = await screen.findByRole("checkbox");
+    await user.click(checkbox);
+
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Alice", {
+      caseSensitive: true,
+    });
+  });
+
+  it("restores case-sensitive state from existing filter", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [
+        {
+          field: "name",
+          operator: "contains",
+          value: "Alice",
+          caseSensitive: true,
+        },
+      ],
+    });
+    render(<TestFilters control={control} columns={[stringColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const checkbox = await screen.findByRole("checkbox");
+    expect((checkbox as HTMLElement).dataset.checked).toBeDefined();
+  });
+});
+
+describe("UuidFilterEditor", () => {
+  it("shows an Apply button after opening the chip value popover", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "id", operator: "eq", value: "uuid-123" }],
+    });
+    render(<TestFilters control={control} columns={[uuidColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
+  });
+
+  it("Apply button calls addFilter with the updated value", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "id", operator: "eq", value: "uuid-123" }],
+    });
+    render(<TestFilters control={control} columns={[uuidColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const input = await screen.findByRole("textbox");
+    await user.clear(input);
+    await user.type(input, "uuid-456");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("id", "eq", "uuid-456");
+  });
+
+  it("Enter key calls addFilter with the updated value", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "id", operator: "eq", value: "uuid-123" }],
+    });
+    render(<TestFilters control={control} columns={[uuidColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    const input = await screen.findByRole("textbox");
+    await user.clear(input);
+    await user.type(input, "uuid-789");
+    await user.keyboard("{Enter}");
+
+    expect(control.addFilter).toHaveBeenCalledWith("id", "eq", "uuid-789");
+  });
+});
+
+describe("EnumFilterEditor", () => {
+  it("shows the operator segment as 'is any of' and summarizes multiple selections", () => {
+    const control = makeControl({
+      filters: [{ field: "status", operator: "in", value: ["active", "inactive"] }],
+    });
+    render(<TestFilters control={control} columns={[enumColumn]} />, { wrapper });
+
+    // enum has a single operator, so it renders as plain text, not a button.
+    expect(screen.getByText("is any of")).toBeDefined();
+    // >1 option selected is summarized as "N <label>(s)".
+    expect(screen.getByText("2 Status(s)")).toBeDefined();
+  });
+
+  it("toggling a checkbox calls addFilter immediately without an Apply button", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "status", operator: "in", value: ["active"] }],
+    });
+    render(<TestFilters control={control} columns={[enumColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    // Click the "Inactive" option (only appears in the opened value list).
+    await user.click(await screen.findByText("Inactive"));
+
+    expect(control.addFilter).toHaveBeenCalledWith("status", "in", ["active", "inactive"]);
+    // No Apply button for enum
+    expect(screen.queryByRole("button", { name: "Apply" })).toBeNull();
+  });
+
+  it("unchecking the only selected option calls removeFilter", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "status", operator: "in", value: ["active"] }],
+    });
+    render(<TestFilters control={control} columns={[enumColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+
+    // Wait for the value list to open, then uncheck "Active" from within it.
+    // ("Active" also appears in the chip's value segment, so scope to the list.)
+    await screen.findByText("Inactive");
+    const list = document.querySelector('[data-slot="data-table-filter-enum"]') as HTMLElement;
+    await user.click(within(list).getByText("Active"));
+
+    expect(control.removeFilter).toHaveBeenCalledWith("status");
+  });
+});
+
+describe("BooleanFilterEditor", () => {
+  it("shows an Apply button after opening the chip value popover", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "enabled", operator: "eq", value: true }],
+    });
+    render(<TestFilters control={control} columns={[booleanColumn]} />, {
+      wrapper,
+    });
+
+    // Operator segment reflects the "is" (eq) operator; value segment shows "True".
+    expect(screen.getByText("is")).toBeDefined();
+    expect(screen.getByText("True")).toBeDefined();
+
+    await openValueEditor(user);
+
+    expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
+  });
+
+  it("does not call addFilter immediately on open", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "enabled", operator: "eq", value: true }],
+    });
+    render(<TestFilters control={control} columns={[booleanColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+    await screen.findByRole("button", { name: "Apply" });
+
+    expect(control.addFilter).not.toHaveBeenCalled();
+  });
+
+  it("Apply button calls addFilter with the current value", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "enabled", operator: "eq", value: true }],
+    });
+    render(<TestFilters control={control} columns={[booleanColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+    await user.click(await screen.findByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("enabled", "eq", true);
+  });
+
+  it("Apply button calls addFilter with false when value is false", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "enabled", operator: "eq", value: false }],
+    });
+    render(<TestFilters control={control} columns={[booleanColumn]} />, {
+      wrapper,
+    });
+
+    await openValueEditor(user);
+    await user.click(await screen.findByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("enabled", "eq", false);
+  });
+
+  it("Apply button calls addFilter with ne operator when filter has ne", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "enabled", operator: "ne", value: true }],
+    });
+    render(<TestFilters control={control} columns={[booleanColumn]} />, {
+      wrapper,
+    });
+
+    // Operator segment reflects "is not" (ne); the hidden editor operator is
+    // seeded from the filter's operator, so Apply preserves ne.
+    expect(screen.getByText("is not")).toBeDefined();
+
+    await openValueEditor(user);
+    await user.click(await screen.findByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("enabled", "ne", true);
+  });
+});
diff --git a/packages/core/src/components/data-table/filters/types.ts b/packages/core/src/components/data-table/filters/types.ts
new file mode 100644
index 00000000..a9f85629
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/types.ts
@@ -0,0 +1,7 @@
+import type { Column, DataTableFilterConfig } from "../types";
+
+type FilterableColumn = Column<Record<string, unknown>> & {
+  filter: DataTableFilterConfig;
+};
+
+export type { FilterableColumn };
diff --git a/packages/core/src/components/data-table/filter-value-utils.test.ts b/packages/core/src/components/data-table/filters/values.test.ts
similarity index 99%
rename from packages/core/src/components/data-table/filter-value-utils.test.ts
rename to packages/core/src/components/data-table/filters/values.test.ts
index cbb76101..9abf5ad1 100644
--- a/packages/core/src/components/data-table/filter-value-utils.test.ts
+++ b/packages/core/src/components/data-table/filters/values.test.ts
@@ -5,7 +5,7 @@ import {
   localDateTimeParts,
   normalizeTemporalFilterValue,
 } from "@/lib/temporal-filter-values";
-import { isDecimalFilterValueValid, isDecimalRangeOrdered } from "./filter-value-utils";
+import { isDecimalFilterValueValid, isDecimalRangeOrdered } from "./values";
 
 function mockDate(local: {
   year: number;
diff --git a/packages/core/src/components/data-table/filters/values.ts b/packages/core/src/components/data-table/filters/values.ts
new file mode 100644
index 00000000..fbc0d88c
--- /dev/null
+++ b/packages/core/src/components/data-table/filters/values.ts
@@ -0,0 +1,195 @@
+import type { FilterConfig, FilterOperator } from "@/types/collection";
+import type { useDataTableT } from "../i18n";
+import {
+  isTemporalFilterType,
+  isTemporalFilterValueValid,
+  normalizeTemporalFilterValue,
+} from "@/lib/temporal-filter-values";
+
+const DECIMAL_RE = /^([+-]?)(?:(\d+)(?:\.(\d*))?|\.(\d+))(?:[eE]([+-]?\d+))?$/;
+
+export function isDecimalFilterValueValid(value: string): boolean {
+  return DECIMAL_RE.test(value.trim());
+}
+
+function decimalParts(value: string) {
+  const match = DECIMAL_RE.exec(value.trim());
+  if (!match) return undefined;
+  const fraction = match[3] ?? match[4] ?? "";
+  const digits = `${match[2] ?? ""}${fraction}`.replace(/^0+/, "");
+  const sign = match[1] === "-" ? -1 : 1;
+  return {
+    digits,
+    sign: digits === "" ? 0 : sign,
+    magnitude: BigInt(digits.length - fraction.length) + BigInt(match[5] ?? "0"),
+  };
+}
+
+export function isDecimalRangeOrdered(min: string, max: string): boolean {
+  const lower = decimalParts(min);
+  const upper = decimalParts(max);
+  if (!lower || !upper) return false;
+  if (lower.sign !== upper.sign) return lower.sign < upper.sign;
+  if (lower.sign === 0) return true;
+
+  // Compare magnitude, then significant digits, without rounding or expanding exponents.
+  if (lower.magnitude !== upper.magnitude) {
+    return lower.sign === 1 ? lower.magnitude < upper.magnitude : lower.magnitude > upper.magnitude;
+  }
+  const width = Math.max(lower.digits.length, upper.digits.length);
+  const left = lower.digits.padEnd(width, "0");
+  const right = upper.digits.padEnd(width, "0");
+  return lower.sign === 1 ? left <= right : left >= right;
+}
+
+type AddFilterDraftValue = string | string[];
+
+/**
+ * Validation message for a "between" range when the bounds are reversed
+ * (max < min). Returns undefined until both bounds are present and individually
+ * valid, so it only appears once there's a genuine ordering problem.
+ */
+function betweenOrderError(
+  type: FilterConfig["type"],
+  min: string,
+  max: string,
+  minLabel: string,
+  maxLabel: string,
+  t: ReturnType<typeof useDataTableT>,
+  timeZone?: string,
+): string | undefined {
+  if (min.trim() === "" || max.trim() === "") return undefined;
+  let bothValid = true;
+  if (type === "number") {
+    bothValid = !Number.isNaN(Number(min)) && !Number.isNaN(Number(max));
+  } else if (type === "decimal") {
+    bothValid = isDecimalFilterValueValid(min) && isDecimalFilterValueValid(max);
+  } else if (isTemporalFilterType(type)) {
+    bothValid =
+      isTemporalFilterValueValid(type, min, timeZone) &&
+      isTemporalFilterValueValid(type, max, timeZone);
+  }
+  if (!bothValid) return undefined;
+  if (isRangeOrdered(type, min, max)) return undefined;
+  return t("filterBetweenOrderError", { min: minLabel, max: maxLabel });
+}
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+function isAddFilterDraftValueValid(
+  type: FilterConfig["type"],
+  operator: FilterOperator,
+  value: AddFilterDraftValue,
+  timeZone?: string,
+): boolean {
+  if (type === "enum") {
+    return Array.isArray(value) && value.length > 0;
+  }
+  if (type === "boolean") {
+    return value === "true" || value === "false";
+  }
+
+  if (operator === "between") {
+    if (!Array.isArray(value)) return false;
+    const [min, max] = value;
+    const minEmpty = !min || min.trim() === "";
+    const maxEmpty = !max || max.trim() === "";
+    if (minEmpty || maxEmpty) return false; // both required
+    if (type === "number") {
+      return !Number.isNaN(Number(min)) && !Number.isNaN(Number(max));
+    }
+    if (type === "decimal") {
+      return isDecimalFilterValueValid(min) && isDecimalFilterValueValid(max);
+    }
+    if (isTemporalFilterType(type)) {
+      return (
+        isTemporalFilterValueValid(type, min, timeZone) &&
+        isTemporalFilterValueValid(type, max, timeZone)
+      );
+    }
+    return true;
+  }
+
+  if (typeof value !== "string") return false;
+  if (type === "number") {
+    if (value.trim() === "") return false;
+    return !Number.isNaN(Number(value));
+  }
+  if (type === "decimal") return isDecimalFilterValueValid(value);
+  if (isTemporalFilterType(type)) {
+    return isTemporalFilterValueValid(type, value, timeZone);
+  }
+  return value.trim() !== "";
+}
+
+function toAddFilterSubmittedValue(
+  type: FilterConfig["type"],
+  operator: FilterOperator,
+  value: AddFilterDraftValue,
+  timeZone?: string,
+): unknown {
+  if (type === "enum") {
+    return Array.isArray(value) ? (value as string[]) : [];
+  }
+  if (type === "boolean") {
+    return value === "true";
+  }
+
+  if (operator === "between" && Array.isArray(value)) {
+    const [min, max] = value;
+    const trimmedMin = typeof min === "string" ? min.trim() : "";
+    const trimmedMax = typeof max === "string" ? max.trim() : "";
+
+    if (type === "number") {
+      if (trimmedMin === "" || trimmedMax === "") return undefined;
+
+      const parsedMin = Number(trimmedMin);
+      const parsedMax = Number(trimmedMax);
+      if (Number.isNaN(parsedMin) || Number.isNaN(parsedMax)) return undefined;
+
+      return { min: parsedMin, max: parsedMax };
+    }
+
+    if (trimmedMin === "" || trimmedMax === "") return undefined;
+
+    if (type === "datetime") {
+      const normalizedMin = normalizeTemporalFilterValue("datetime", trimmedMin, timeZone);
+      const normalizedMax = normalizeTemporalFilterValue("datetime", trimmedMax, timeZone);
+      return normalizedMin && normalizedMax
+        ? { min: normalizedMin, max: normalizedMax }
+        : undefined;
+    }
+
+    return {
+      min: trimmedMin,
+      max: trimmedMax,
+    };
+  }
+
+  if (type === "number") {
+    return Number(value);
+  }
+  const trimmed = String(value).trim();
+  return type === "datetime"
+    ? normalizeTemporalFilterValue("datetime", trimmed, timeZone)
+    : trimmed;
+}
+
+/**
+ * Whether a "between" range's bounds are correctly ordered (min ≤ max). Numbers
+ * compare numerically; dates and times lexicographically; and datetime instants
+ * chronologically. `min === max` is allowed — a valid single-point inclusive range.
+ * Assumes both bounds are already individually valid and non-empty.
+ */
+function isRangeOrdered(type: FilterConfig["type"], min: string, max: string): boolean {
+  if (type === "number") return Number(min) <= Number(max);
+  if (type === "decimal") return isDecimalRangeOrdered(min, max);
+  if (type === "datetime") return new Date(min).getTime() <= new Date(max).getTime();
+  if (isTemporalFilterType(type)) return min <= max;
+  return true;
+}
+
+export { betweenOrderError, isAddFilterDraftValueValid, isRangeOrdered, toAddFilterSubmittedValue };
+export type { AddFilterDraftValue };
diff --git a/packages/core/src/components/data-table/footer.tsx b/packages/core/src/components/data-table/footer.tsx
new file mode 100644
index 00000000..1445557f
--- /dev/null
+++ b/packages/core/src/components/data-table/footer.tsx
@@ -0,0 +1,65 @@
+import { useContext, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { DataTableContext } from "./context";
+import {
+  DataTableSelectionAnnouncer,
+  DataTableSelectionBar,
+  hasBulkActions,
+  isSelectionBarOpen,
+} from "./selection-bar";
+
+/** Use `DataTable.Footer` instead of calling this directly. */
+function DataTableFooter({ children, className }: { children?: ReactNode; className?: string }) {
+  const ctx = useContext(DataTableContext);
+  const offersBulkActions = hasBulkActions(ctx);
+  const selecting = isSelectionBarOpen(ctx);
+
+  return (
+    <div
+      data-slot="data-table-footer"
+      data-selecting={selecting ? "" : undefined}
+      className={cn(
+        "astw:flex astw:shrink-0 astw:items-center astw:border-t astw:border-border astw:px-4 astw:py-2",
+        offersBulkActions && "astw:transition-colors astw:motion-reduce:transition-none",
+        selecting && [
+          "astw:flex-wrap astw:gap-x-3 astw:gap-y-2",
+          "astw:bg-accent astw:text-accent-foreground",
+          "astw:rounded-b-[calc(var(--radius-md)-1px)]",
+          // Sticky while the bar is up: on a page-scrolling table it rides the
+          // bottom of the viewport until the table's own end scrolls into view.
+          // A no-op in <Layout fill>, where the footer is already pinned.
+          "astw:sticky astw:bottom-0 astw:z-20",
+          // The bar's surface, captured for the wrapper below: a token can't be
+          // re-pointed in terms of itself on a single element.
+          "astw:[--data-table-selection-surface:var(--accent)]",
+        ],
+        className,
+      )}
+    >
+      {offersBulkActions ? (
+        // `contents` keeps the wrapper out of layout. It re-points the hover and
+        // secondary-text tokens for everything on the tinted bar — the bar's own
+        // buttons and the consumer's Pagination alike — which would otherwise
+        // hover to the bar's colour and lose contrast on it.
+        <div
+          className={cn(
+            "astw:contents",
+            selecting && [
+              "astw:[--accent:color-mix(in_srgb,var(--accent-foreground)_8%,var(--data-table-selection-surface))]",
+              "astw:[--muted-foreground:color-mix(in_srgb,var(--accent-foreground)_70%,var(--data-table-selection-surface))]",
+            ],
+          )}
+        >
+          {selecting && <DataTableSelectionBar />}
+          {children}
+          <DataTableSelectionAnnouncer open={selecting} />
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
+}
+DataTableFooter.displayName = "DataTable.Footer";
+
+export { DataTableFooter };
diff --git a/packages/core/src/components/data-table/header.test.tsx b/packages/core/src/components/data-table/header.test.tsx
new file mode 100644
index 00000000..6b4f2aea
--- /dev/null
+++ b/packages/core/src/components/data-table/header.test.tsx
@@ -0,0 +1,229 @@
+import { afterEach, describe, it, expect, expectTypeOf, vi } from "vitest";
+import { cleanup, render, screen, fireEvent } from "@testing-library/react";
+import { resetLocalTimeZone } from "@internationalized/date";
+import type { CollectionControl } from "@/types/collection";
+import {
+  TestDataTable,
+  testData,
+  makeControl,
+  wrapper,
+  headByText,
+  openHeaderContextMenu,
+  type TestRow,
+} from "./test-utils";
+import { DataTable } from "./data-table";
+import { useDataTable } from "./use-data-table";
+import type { Column } from "./types";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+  resetLocalTimeZone();
+  vi.restoreAllMocks();
+});
+
+function SortableHeaderHarness({ control }: { control: CollectionControl }) {
+  const table = useDataTable<TestRow>({
+    columns: [
+      {
+        label: "Name",
+        sort: { field: "name", type: "string" },
+        header: (ctx) =>
+          ctx.sortable ? (
+            <button type="button" onClick={ctx.activateSort}>
+              {ctx.label} {ctx.sortDirection}
+            </button>
+          ) : null,
+        render: (row) => row.name,
+      },
+    ],
+    data: testData,
+    control,
+  });
+
+  return (
+    <DataTable.Root value={table}>
+      <DataTable.Table />
+    </DataTable.Root>
+  );
+}
+
+describe("DataTable", () => {
+  describe("custom headers", () => {
+    it("renders custom header content", () => {
+      const columns: Column<TestRow>[] = [
+        {
+          label: "Name",
+          header: () => (
+            <>
+              <span>Customer</span>
+              <span aria-hidden>*</span>
+            </>
+          ),
+          render: (row) => row.name,
+        },
+      ];
+
+      render(<TestDataTable columns={columns} />, { wrapper });
+
+      expect(screen.getByText("Customer")).toBeDefined();
+      expect(screen.getByText("*")).toBeDefined();
+      expect(screen.queryByText("Name")).toBeNull();
+    });
+
+    it("keeps built-in sort behavior, hit area, and context menu with headerProps", () => {
+      const control = makeControl();
+
+      function Harness() {
+        const table = useDataTable<TestRow>({
+          columns: [
+            {
+              label: "Name",
+              sort: { field: "name", type: "string" },
+              headerProps: () => ({
+                className: "astw:tabular-nums",
+                style: { backgroundColor: "red" },
+                title: "Employee name",
+              }),
+              render: (row) => row.name,
+            },
+          ],
+          data: testData,
+          control,
+        });
+
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+
+      const { container } = render(<Harness />, { wrapper });
+
+      expect(headByText(container, "Name")?.title).toBe("Employee name");
+      const button = screen.getByRole("button", { name: "Name" });
+      expect(button.className).toContain("astw:h-10");
+      expect(button.className).toContain("astw:-mx-2");
+      expect(button.className).toContain("astw:px-2");
+
+      fireEvent.click(button);
+
+      expect(control.clearSort).toHaveBeenCalledTimes(1);
+      expect(control.setSort).toHaveBeenCalledTimes(1);
+      expect(control.setSort).toHaveBeenCalledWith("name", "Asc");
+
+      openHeaderContextMenu(container, "Name");
+      expect(screen.getByRole("menuitem", { name: "Copy label" })).toBeDefined();
+    });
+
+    it("recomputes headerProps from sort context and restores defaults for undefined", () => {
+      const columns: Column<TestRow>[] = [
+        {
+          label: "Name",
+          sort: { field: "name", type: "string" },
+          render: (row) => row.name,
+          headerProps: (ctx) => {
+            if (!ctx.sortable) return undefined;
+            expectTypeOf(ctx.sortDirection).toEqualTypeOf<"Asc" | "Desc" | undefined>();
+            expectTypeOf(ctx.activateSort).toEqualTypeOf<() => void>();
+            return ctx.sortDirection
+              ? {
+                  className: "astw:tabular-nums",
+                  style: { backgroundColor: ctx.sortDirection === "Asc" ? "red" : "blue" },
+                  title: `${ctx.label} ${ctx.sortDirection}`,
+                }
+              : undefined;
+          },
+        },
+      ];
+      function Harness({ control }: { control?: CollectionControl }) {
+        const table = useDataTable({ columns, data: testData, control });
+        return (
+          <DataTable.Root value={table}>
+            <DataTable.Table />
+          </DataTable.Root>
+        );
+      }
+
+      const { rerender } = render(
+        <Harness control={makeControl({ sortStates: [{ field: "name", direction: "Asc" }] })} />,
+        { wrapper },
+      );
+      expect(screen.getByRole("columnheader").title).toBe("Name Asc");
+      expect(screen.getByRole("columnheader").style.backgroundColor).toBe("red");
+      rerender(
+        <Harness control={makeControl({ sortStates: [{ field: "name", direction: "Desc" }] })} />,
+      );
+      expect(screen.getByRole("columnheader").title).toBe("Name Desc");
+      expect(screen.getByRole("columnheader").style.backgroundColor).toBe("blue");
+
+      for (const control of [makeControl(), undefined]) {
+        rerender(<Harness control={control} />);
+        const header = screen.getByRole("columnheader");
+        expect(header.style.backgroundColor).toBe("");
+        expect(header.title).toBe("");
+        expect(header.className).not.toContain("astw:tabular-nums");
+      }
+    });
+
+    it("passes non-sortable context when sort config exists but sorting is inactive", () => {
+      let seenSortable: boolean | undefined;
+      const columns: Column<TestRow>[] = [
+        {
+          label: "Name",
+          sort: { field: "name", type: "string" },
+          header: (ctx) => {
+            seenSortable = ctx.sortable;
+            return ctx.sortable ? "sortable" : "static";
+          },
+          render: (row) => row.name,
+        },
+      ];
+
+      render(<TestDataTable columns={columns} />, { wrapper });
+
+      expect(screen.getByText("static")).toBeDefined();
+      expect(seenSortable).toBe(false);
+    });
+
+    it("passes sortable context and activateSort reuses the shared sort behavior", () => {
+      const control = makeControl({
+        sortStates: [{ field: "name", direction: "Asc" }],
+      });
+
+      render(<SortableHeaderHarness control={control} />, { wrapper });
+
+      fireEvent.click(screen.getByRole("button", { name: "Name Asc" }));
+
+      expect(control.clearSort).toHaveBeenCalledTimes(1);
+      expect(control.setSort).toHaveBeenCalledTimes(1);
+      expect(control.setSort).toHaveBeenCalledWith("name", "Desc");
+    });
+
+    it("narrows header render context by sortable", () => {
+      const column: Column<TestRow> = {
+        label: "Name",
+        header: (ctx) => {
+          if (ctx.sortable) {
+            expectTypeOf(ctx).toEqualTypeOf<{
+              label?: string;
+              sortable: true;
+              sortDirection: "Asc" | "Desc" | undefined;
+              activateSort: () => void;
+            }>();
+          } else {
+            expectTypeOf(ctx).toEqualTypeOf<{
+              label?: string;
+              sortable: false;
+            }>();
+          }
+          return ctx.label;
+        },
+        render: (row) => row.name,
+      };
+
+      expect(column).toBeDefined();
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/header.tsx b/packages/core/src/components/data-table/header.tsx
new file mode 100644
index 00000000..8f59eee3
--- /dev/null
+++ b/packages/core/src/components/data-table/header.tsx
@@ -0,0 +1,245 @@
+import { useContext, useMemo, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { Table } from "@/components/table";
+import { Checkbox } from "@/components/checkbox";
+import type { HeaderRenderContext } from "./types";
+import { DataTableContext, PinMeasureContext } from "./context";
+import { DataTableHeaderContextMenu } from "./context-menu";
+import { useDataTableT } from "./i18n";
+import {
+  SELECTION_WIDTH,
+  SELECTION_KEY,
+  EXPAND_WIDTH,
+  EXPAND_KEY,
+  ACTIONS_WIDTH,
+  ACTIONS_KEY,
+  buildColumnKeys,
+  computePinLayout,
+  pinCellProps,
+  resolveAlign,
+} from "./column-layout";
+
+function nextSortDirection(current: string | undefined): "Asc" | "Desc" | undefined {
+  if (current === "Asc") return "Desc";
+  if (current === "Desc") return undefined;
+  return "Asc";
+}
+
+function renderDefaultHeader(
+  content: ReactNode,
+  ctx: HeaderRenderContext,
+  align: "left" | "right",
+  edges?: { bleedLeft?: boolean; bleedRight?: boolean },
+): ReactNode {
+  if (!ctx.sortable) return content;
+
+  return (
+    <button
+      type="button"
+      onClick={ctx.activateSort}
+      className={cn(
+        "astw:flex astw:h-10 astw:w-full astw:cursor-pointer astw:select-none astw:items-center astw:gap-1 astw:border-0 astw:bg-transparent astw:-mx-2 astw:p-0 astw:px-2 astw:text-inherit astw:outline-none astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px]",
+        edges?.bleedLeft && "astw:-ml-6 astw:pl-6",
+        edges?.bleedRight && "astw:-mr-6 astw:pr-6",
+        align === "right" ? "astw:justify-end astw:text-right" : "astw:text-left",
+      )}
+    >
+      {content}
+      {ctx.sortDirection && <SortIndicator direction={ctx.sortDirection} />}
+    </button>
+  );
+}
+
+/** @internal */
+function DataTableHeaders({ className: headerClassName }: { className?: string }) {
+  const ctx = useContext(DataTableContext);
+  if (!ctx) {
+    throw new Error("<DataTable.Headers> must be used within <DataTable.Root>");
+  }
+  const {
+    columns: allColumns,
+    visibleColumns: columns,
+    pinnedColumns,
+    sortStates,
+    onSort,
+    rowActions,
+    setPin,
+    toggleRowSelection,
+    selectAllRows,
+    deselectAllRows,
+    clearSelection,
+    isAllSelected,
+    isIndeterminate,
+    rowExpansion,
+  } = ctx;
+  const t = useDataTableT();
+  const widths = useContext(PinMeasureContext);
+  const hasSelection = !!toggleRowSelection;
+  const hasExpand = !!rowExpansion;
+  const hasRowActions = !!(rowActions && rowActions.length > 0);
+  const columnKeys = useMemo(() => buildColumnKeys(allColumns), [allColumns]);
+  const { ordered, keys, placements, selection, expand, actions } = useMemo(
+    () =>
+      computePinLayout(columns, pinnedColumns, {
+        hasSelection,
+        hasExpand,
+        hasRowActions,
+        widths,
+        columnKeys,
+      }),
+    [columns, pinnedColumns, hasSelection, hasExpand, hasRowActions, widths, columnKeys],
+  );
+
+  return (
+    // Sticky within the DataTable.Table scroll container so column headers
+    // stay visible while rows scroll beneath. bg-card keeps rows from showing
+    // through; the inset shadow re-draws the bottom border, which Chrome drops
+    // from sticky rows under `border-collapse: collapse`.
+    <Table.Header
+      data-slot="data-table-header"
+      className={cn(
+        "astw:sticky astw:top-0 astw:z-10 astw:bg-card",
+        "astw:shadow-[inset_0_-1px_0_0_var(--border)] astw:[&_tr]:border-b-0",
+        headerClassName,
+      )}
+    >
+      <Table.Row className="astw:group">
+        {hasSelection &&
+          (() => {
+            const { style, className } = pinCellProps(
+              selection,
+              { style: { width: SELECTION_WIDTH }, className: "astw:pl-3!" },
+              "header",
+            );
+            return (
+              <Table.Head data-col-key={SELECTION_KEY} style={style} className={className}>
+                <Checkbox
+                  checked={isAllSelected}
+                  indeterminate={isIndeterminate}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      selectAllRows?.();
+                    } else {
+                      // Page-scoped, so rows selected on other pages survive.
+                      // Hand-built contexts that predate it fall back to clearing.
+                      (deselectAllRows ?? clearSelection)?.();
+                    }
+                  }}
+                  aria-label={t("selectAll")}
+                />
+              </Table.Head>
+            );
+          })()}
+        {hasExpand &&
+          (() => {
+            const { style, className } = pinCellProps(
+              expand,
+              { style: { width: EXPAND_WIDTH } },
+              "header",
+            );
+            return (
+              <Table.Head data-col-key={EXPAND_KEY} style={style} className={className}>
+                <span className="astw:sr-only">{t("expandColumnHeader")}</span>
+              </Table.Head>
+            );
+          })()}
+        {ordered?.map((col, index) => {
+          const key = keys.get(col) as string;
+          const label = col.label;
+          const sortField = col.sort?.field;
+          const currentSort = sortField
+            ? sortStates?.find((s) => s.field === sortField)
+            : undefined;
+          const isSortable = !!sortField && !!onSort;
+
+          const activateSort = () => {
+            if (!sortField || !onSort) return;
+            onSort(sortField, nextSortDirection(currentSort?.direction));
+          };
+
+          const headerContext: HeaderRenderContext = isSortable
+            ? {
+                label,
+                sortable: true,
+                sortDirection: currentSort?.direction,
+                activateSort,
+              }
+            : { label, sortable: false };
+
+          const customHeaderProps = col.headerProps?.(headerContext);
+          const align = resolveAlign(col);
+          const content = col.header
+            ? col.header(headerContext)
+            : renderDefaultHeader(label, headerContext, align, {
+                bleedLeft: !hasSelection && !hasExpand && index === 0,
+                bleedRight: !hasRowActions && index === ordered.length - 1,
+              });
+
+          const { style, className } = pinCellProps(
+            placements.get(col),
+            {
+              style: {
+                ...customHeaderProps?.style,
+                ...(col.width ? { width: col.width } : {}),
+              },
+              className: cn(align === "right" && "astw:text-right"),
+            },
+            "header",
+          );
+          return (
+            <Table.Head
+              key={key}
+              data-col-key={key}
+              title={customHeaderProps?.title}
+              style={style}
+              className={cn(className, customHeaderProps?.className)}
+            >
+              <DataTableHeaderContextMenu
+                align={align}
+                column={col}
+                columnKey={key}
+                pinnedColumns={pinnedColumns}
+                setPin={setPin}
+                sortDirection={currentSort?.direction}
+                onSortDirectionChange={
+                  isSortable ? (direction) => onSort(sortField, direction) : undefined
+                }
+              >
+                {content}
+              </DataTableHeaderContextMenu>
+            </Table.Head>
+          );
+        })}
+        {hasRowActions &&
+          (() => {
+            const { style, className } = pinCellProps(
+              actions,
+              { style: { width: ACTIONS_WIDTH }, className: "astw:pr-2!" },
+              "header",
+            );
+            return (
+              <Table.Head data-col-key={ACTIONS_KEY} style={style} className={className}>
+                <span className="astw:sr-only">{t("actionsHeader")}</span>
+              </Table.Head>
+            );
+          })()}
+      </Table.Row>
+    </Table.Header>
+  );
+}
+DataTableHeaders.displayName = "DataTable.Headers";
+
+/** @internal */
+function SortIndicator({ direction }: { direction: "Asc" | "Desc" }) {
+  return (
+    <span
+      data-slot="data-table-sort-indicator"
+      className="astw:text-muted-foreground astw:text-label-sm"
+      aria-hidden
+    >
+      {direction === "Asc" ? "▲" : "▼"}
+    </span>
+  );
+}
+
+export { DataTableHeaders };
diff --git a/packages/core/src/components/data-table/index.ts b/packages/core/src/components/data-table/index.ts
index 2afcc51f..cd56a7d9 100644
--- a/packages/core/src/components/data-table/index.ts
+++ b/packages/core/src/components/data-table/index.ts
@@ -3,7 +3,7 @@ export { DataTable, type DataTablePaginationProps, type DataTableRootProps } fro
 
 export { CellEditError } from "./cell-edit-error";
 export { useDataTable } from "./use-data-table";
-export { useDataTableContext, type DataTableContextValue } from "./data-table-context";
+export { useDataTableContext, type DataTableContextValue } from "./context";
 
 // Field helpers
 export { createColumnHelper } from "./field-helpers";
diff --git a/packages/core/src/components/data-table/pagination.tsx b/packages/core/src/components/data-table/pagination.tsx
index 5874148c..8b2a5dd5 100644
--- a/packages/core/src/components/data-table/pagination.tsx
+++ b/packages/core/src/components/data-table/pagination.tsx
@@ -2,7 +2,7 @@ import { ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from "lucide-r
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/button";
 import { Select } from "@/components/select";
-import { useDataTableContext } from "./data-table-context";
+import { useDataTableContext } from "./context";
 import { useDataTableT } from "./i18n";
 import { isSelectionBarOpen } from "./selection-bar";
 
diff --git a/packages/core/src/components/data-table/root.tsx b/packages/core/src/components/data-table/root.tsx
new file mode 100644
index 00000000..544cc46a
--- /dev/null
+++ b/packages/core/src/components/data-table/root.tsx
@@ -0,0 +1,108 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { CollectionControlProvider } from "@/contexts/collection-control-context";
+import { Tooltip } from "@/components/tooltip";
+import type { UseDataTableReturn } from "./types";
+import { DataTableContext, type DataTableContextValue } from "./context";
+
+export interface DataTableRootProps<TRow extends Record<string, unknown>> {
+  value: UseDataTableReturn<TRow>;
+  children: ReactNode;
+  className?: string;
+}
+
+/** Use `DataTable.Root` instead of calling this directly. */
+function DataTableRoot<TRow extends Record<string, unknown>>({
+  value,
+  children,
+  className,
+}: DataTableRootProps<TRow>) {
+  const dataTableValue: DataTableContextValue<TRow> = {
+    columns: value.columns,
+    rows: value.rows,
+    loading: value.loading,
+    error: value.error,
+    sortStates: value.sortStates ?? [],
+    onSort: value.onSort,
+    visibleColumns: value.visibleColumns,
+    isColumnVisible: value.isColumnVisible,
+    toggleColumn: value.toggleColumn,
+    showAllColumns: value.showAllColumns,
+    hideAllColumns: value.hideAllColumns,
+    columnOrder: value.columnOrder,
+    moveColumn: value.moveColumn,
+    setColumnOrder: value.setColumnOrder,
+    pinnedColumns: value.pinnedColumns,
+    setPin: value.setPin,
+    pageInfo: value.pageInfo,
+    total: value.total,
+    totalPages: value.totalPages,
+    currentPage: value.currentPage,
+    pageSize: value.pageSize,
+    setPageSize: value.setPageSize,
+    goToNextPage: value.goToNextPage,
+    goToPrevPage: value.goToPrevPage,
+    goToFirstPage: value.goToFirstPage,
+    goToLastPage: value.goToLastPage,
+    hasPrevPage: value.hasPrevPage,
+    hasNextPage: value.hasNextPage,
+    onClickRow: value.onClickRow,
+    rowActions: value.rowActions,
+    rowSelection: value.rowSelection,
+    selectedIds: value.selectedIds,
+    isRowSelected: value.isRowSelected,
+    toggleRowSelection: value.toggleRowSelection,
+    selectAllRows: value.selectAllRows,
+    deselectAllRows: value.deselectAllRows,
+    clearSelection: value.clearSelection,
+    pendingActionId: value.pendingActionId,
+    runSelectionAction: value.runSelectionAction,
+    isAllSelected: value.isAllSelected,
+    isIndeterminate: value.isIndeterminate,
+    expandedIds: value.expandedIds,
+    isRowExpanded: value.isRowExpanded,
+    toggleRowExpansion: value.toggleRowExpansion,
+    collapseAllRows: value.collapseAllRows,
+    rowExpansion: value.rowExpansion,
+  };
+
+  const controlValue = value.control ?? null;
+
+  // Tooltip.Provider shares hover-delay state for the per-cell truncate
+  // tooltips; benign no-op when no column opts into `truncate`.
+  const inner = (
+    <Tooltip.Provider delay={300}>
+      <DataTableContext.Provider value={dataTableValue}>
+        {/* flex-col + min-h-0 (no flex-1): natural height when content fits,
+            but able to shrink when the parent chain constrains height (e.g.
+            <Layout fill>). When shrunk, the Table region scrolls internally
+            while the Toolbar and Footer (shrink-0) stay visible.
+            overflow-clip, not overflow-hidden: both clip children to the
+            rounded frame, but `hidden` also makes this a scroll container,
+            which would pin the sticky selection-actions footer to the table
+            instead of letting it ride the page's scroll container. */}
+        <div
+          data-slot="data-table"
+          className={cn(
+            "astw:flex astw:flex-col astw:min-h-0 astw:overflow-clip astw:border astw:border-border astw:rounded-md astw:bg-card",
+            // A generic Toolbar becomes the table's top edge: preserve its top
+            // corners, but retain only the divider beneath it.
+            "astw:[&>[data-slot=toolbar]]:rounded-b-none astw:[&>[data-slot=toolbar]]:border-x-0 astw:[&>[data-slot=toolbar]]:border-t-0",
+            className,
+          )}
+        >
+          {children}
+        </div>
+      </DataTableContext.Provider>
+    </Tooltip.Provider>
+  );
+
+  if (controlValue) {
+    return <CollectionControlProvider value={controlValue}>{inner}</CollectionControlProvider>;
+  }
+
+  return inner;
+}
+DataTableRoot.displayName = "DataTable.Root";
+
+export { DataTableRoot };
diff --git a/packages/core/src/components/data-table/row-actions.test.tsx b/packages/core/src/components/data-table/row-actions.test.tsx
new file mode 100644
index 00000000..c4838be1
--- /dev/null
+++ b/packages/core/src/components/data-table/row-actions.test.tsx
@@ -0,0 +1,100 @@
+import { afterEach, describe, it, expect, expectTypeOf, vi } from "vitest";
+import { cleanup, render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { resetLocalTimeZone } from "@internationalized/date";
+import { testColumns, testData, wrapper, type TestRow } from "./test-utils";
+import { DataTable } from "./data-table";
+import { useDataTable } from "./use-data-table";
+import type { RowAction, UseDataTableOptions } from "./types";
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllEnvs();
+  resetLocalTimeZone();
+  vi.restoreAllMocks();
+});
+
+// Opens the kebab menu of the row at `index` and returns its "Activate" item.
+async function activateItemFor(index: number) {
+  const user = userEvent.setup();
+  await user.click(screen.getAllByRole("button", { name: "Row actions" })[index]);
+  return screen.findByRole("menuitem", { name: "Activate" });
+}
+
+describe("DataTable", () => {
+  describe("row actions", () => {
+    function TestRowActions({ rowActions }: { rowActions: RowAction<TestRow>[] }) {
+      const table = useDataTable<TestRow>({ columns: testColumns, data: testData, rowActions });
+      return (
+        <DataTable.Root value={table}>
+          <DataTable.Table />
+        </DataTable.Root>
+      );
+    }
+
+    it("disables an action for rows where canApply returns false", async () => {
+      const onClick = vi.fn();
+      render(
+        <TestRowActions
+          rowActions={[
+            { id: "activate", label: "Activate", canApply: (r) => r.status !== "Active", onClick },
+          ]}
+        />,
+        { wrapper },
+      );
+
+      // Alice is Active → disabled; Bob is Inactive → enabled.
+      expect((await activateItemFor(0)).getAttribute("aria-disabled")).toBe("true");
+      cleanup();
+      render(
+        <TestRowActions
+          rowActions={[
+            { id: "activate", label: "Activate", canApply: (r) => r.status !== "Active", onClick },
+          ]}
+        />,
+        { wrapper },
+      );
+      const bobItem = await activateItemFor(1);
+      expect(bobItem.getAttribute("aria-disabled")).not.toBe("true");
+      fireEvent.click(bobItem);
+      expect(onClick).toHaveBeenCalledWith(testData.rows[1]);
+    });
+
+    it("still honours the deprecated isDisabled", async () => {
+      render(
+        <TestRowActions
+          rowActions={[
+            {
+              id: "activate",
+              label: "Activate",
+              isDisabled: (r) => r.status === "Active",
+              onClick: vi.fn(),
+            },
+          ]}
+        />,
+        { wrapper },
+      );
+
+      expect((await activateItemFor(0)).getAttribute("aria-disabled")).toBe("true");
+    });
+
+    it("shares presentation with rowSelection.actions while keeping the row predicate separate", () => {
+      const activate = { id: "activate", label: "Activate" };
+      const options: UseDataTableOptions<TestRow> = {
+        columns: testColumns,
+        data: testData,
+        rowActions: [
+          { ...activate, canApply: (row) => row.status !== "Active", onClick: (row) => void row },
+        ],
+        rowSelection: { actions: [{ ...activate, onClick: (ids) => void ids }] },
+      };
+      expectTypeOf(options.rowActions![0].canApply).toEqualTypeOf<
+        ((row: TestRow) => boolean) | undefined
+      >();
+      expectTypeOf(options.rowSelection!.actions![0].onClick)
+        .parameter(0)
+        .toEqualTypeOf<string[]>();
+      expect(options.rowSelection!.actions).toHaveLength(1);
+    });
+  });
+});
diff --git a/packages/core/src/components/data-table/row-selection.test.tsx b/packages/core/src/components/data-table/row-selection.test.tsx
index 575487f0..8aa724e7 100644
--- a/packages/core/src/components/data-table/row-selection.test.tsx
+++ b/packages/core/src/components/data-table/row-selection.test.tsx
@@ -19,6 +19,7 @@ import { createAppShellWrapper } from "../../../tests/test-utils";
 import { DataTable } from "./data-table";
 import { useDataTable } from "./use-data-table";
 import type { Column, DataTableData, UseDataTableOptions } from "./types";
+import { TestDataTable, testColumns, testData, strictWrapper, type TestRow } from "./test-utils";
 
 type Row = { id: string; name: string };
 const columns: Column<Row>[] = [{ label: "Name", render: (row) => row.name }];
@@ -76,6 +77,150 @@ function ControlledTable({
   );
 }
 
+describe("DataTable", () => {
+  describe("row selection", () => {
+    it("renders checkboxes when onSelectionChange is provided", () => {
+      render(<TestDataTable onSelectionChange={vi.fn()} />, { wrapper });
+
+      const checkboxes = screen.getAllByRole("checkbox");
+      // 1 header checkbox + 2 row checkboxes
+      expect(checkboxes).toHaveLength(3);
+    });
+
+    it("does not render checkboxes when onSelectionChange is not provided", () => {
+      render(<TestDataTable />, { wrapper });
+
+      expect(screen.queryByLabelText("Select all rows")).toBeNull();
+      expect(screen.queryByLabelText("Select row")).toBeNull();
+    });
+
+    it("clicking a row checkbox calls onSelectionChange with the row id", () => {
+      const onSelectionChange = vi.fn();
+      render(<TestDataTable onSelectionChange={onSelectionChange} />, {
+        wrapper,
+      });
+
+      const checkboxes = screen.getAllByRole("checkbox");
+      // checkboxes[0] = header, checkboxes[1] = Alice (id "1")
+      fireEvent.click(checkboxes[1]);
+
+      expect(onSelectionChange).toHaveBeenCalledWith(["1"]);
+    });
+
+    it("calls onSelectionChange once per toggle under StrictMode", () => {
+      const onSelectionChange = vi.fn();
+      render(<TestDataTable onSelectionChange={onSelectionChange} />, {
+        wrapper: strictWrapper,
+      });
+
+      fireEvent.click(screen.getAllByRole("checkbox")[1]);
+
+      expect(onSelectionChange).toHaveBeenCalledTimes(1);
+      expect(onSelectionChange).toHaveBeenCalledWith(["1"]);
+    });
+
+    it("clicking the header checkbox selects all rows", () => {
+      const onSelectionChange = vi.fn();
+      render(<TestDataTable onSelectionChange={onSelectionChange} />, {
+        wrapper,
+      });
+
+      const checkboxes = screen.getAllByRole("checkbox");
+      fireEvent.click(checkboxes[0]);
+
+      expect(onSelectionChange).toHaveBeenCalledWith(["1", "2"]);
+    });
+
+    it("composes several toggles dispatched in one commit", () => {
+      // Consumer code like `overdue.forEach((r) => toggleRowSelection(r))`.
+      // Every built-in affordance fires exactly one toggle per commit, so this
+      // is only reachable through the public API.
+      const onSelectionChange = vi.fn();
+      const { result } = renderHook(() =>
+        useDataTable<TestRow>({
+          columns: testColumns,
+          data: testData,
+          onSelectionChange,
+        }),
+      );
+
+      act(() => {
+        result.current.toggleRowSelection?.(testData.rows[0]);
+        result.current.toggleRowSelection?.(testData.rows[1]);
+      });
+
+      expect(result.current.selectedIds).toEqual(["1", "2"]);
+      expect(onSelectionChange).toHaveBeenLastCalledWith(["1", "2"]);
+    });
+
+    it("applies clearSelection before a toggle in the same commit", () => {
+      const onSelectionChange = vi.fn();
+      const { result } = renderHook(() =>
+        useDataTable<TestRow>({
+          columns: testColumns,
+          data: testData,
+          onSelectionChange,
+        }),
+      );
+
+      act(() => result.current.selectAllRows?.());
+      expect(result.current.selectedIds).toEqual(["1", "2"]);
+
+      // "replace the selection with just this row"
+      act(() => {
+        result.current.clearSelection?.();
+        result.current.toggleRowSelection?.(testData.rows[1]);
+      });
+
+      expect(result.current.selectedIds).toEqual(["2"]);
+      expect(onSelectionChange).toHaveBeenLastCalledWith(["2"]);
+    });
+
+    it("marks the selected row with data-state='selected' so the whole row highlights", () => {
+      const { container } = render(<TestDataTable onSelectionChange={vi.fn()} />, { wrapper });
+
+      // Nothing selected initially.
+      expect(
+        container.querySelector('[data-slot="data-table-row"][data-state="selected"]'),
+      ).toBeNull();
+
+      // checkboxes[0] = header, checkboxes[1] = first data row.
+      fireEvent.click(screen.getAllByRole("checkbox")[1]);
+
+      // The row (not just the pinned cells) must carry data-state="selected",
+      // which is what `Table.Row` keys its selected background off of.
+      expect(
+        container.querySelectorAll('[data-slot="data-table-row"][data-state="selected"]'),
+      ).toHaveLength(1);
+    });
+
+    it("the header checkbox adds and removes only the current page's rows", () => {
+      const onSelectionChange = vi.fn();
+      const nextPage: DataTableData<TestRow> = {
+        rows: [
+          { id: "3", name: "Carol", status: "Active" },
+          { id: "4", name: "Dave", status: "Inactive" },
+        ],
+      };
+      const { rerender } = render(<TestDataTable onSelectionChange={onSelectionChange} />, {
+        wrapper,
+      });
+
+      // Pick Alice on the first page, then move to the second.
+      fireEvent.click(screen.getAllByRole("checkbox")[1]);
+      rerender(<TestDataTable data={nextPage} onSelectionChange={onSelectionChange} />);
+
+      // Checking the header adds this page without dropping Alice…
+      fireEvent.click(screen.getByLabelText("Select all rows"));
+      expect(onSelectionChange).toHaveBeenLastCalledWith(["1", "3", "4"]);
+
+      // …and unchecking it removes only this page's rows.
+      fireEvent.click(screen.getByLabelText("Select all rows"));
+      expect(onSelectionChange).toHaveBeenLastCalledWith(["1"]);
+    });
+  });
+});
+
 describe("rowSelection", () => {
   it("initializes uncontrolled selection once and composes changes in one commit", () => {
     const onChange = vi.fn();
diff --git a/packages/core/src/components/data-table/rows.tsx b/packages/core/src/components/data-table/rows.tsx
new file mode 100644
index 00000000..d1882954
--- /dev/null
+++ b/packages/core/src/components/data-table/rows.tsx
@@ -0,0 +1,403 @@
+import { Fragment, useId, useMemo, useRef, type CSSProperties, type ReactNode } from "react";
+import { Ellipsis } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTimeZone } from "@/contexts/appshell-context";
+import { Table } from "@/components/table";
+import { Button } from "@/components/button";
+import { Checkbox } from "@/components/checkbox";
+import { Menu } from "@/components/menu";
+import { Tooltip } from "@/components/tooltip";
+import type { RowAction, RowExpansionOptions } from "./types";
+import { getCellValue, createTypedCellRenderer } from "./cell-renderers";
+import { DataTableCellContextMenu, getCellContextValue } from "./context-menu";
+import { useCellContextMenu } from "./use-cell-context-menu";
+import { DataTableEditableCell, hasEditorIcon, isEditableColumn } from "./editing/cell/root";
+import { ICON_SPACE_CLASS_NAME } from "./editing/cell/shared";
+import { useCellEditNavigation } from "./editing/use-navigation";
+import { RowExpandToggle, DataTableExpandedRow } from "./expanded-row";
+import { useDataTableT } from "./i18n";
+import {
+  SELECTION_WIDTH,
+  EXPAND_WIDTH,
+  ACTIONS_WIDTH,
+  pinCellProps,
+  resolveAlign,
+  type PinLayout,
+} from "./column-layout";
+
+interface DataTableRowsProps<TRow extends Record<string, unknown>> {
+  rows: TRow[];
+  pinLayout: PinLayout<TRow>;
+  hasSelection: boolean;
+  hasRowActions: boolean;
+  isRowSelected: (row: TRow) => boolean;
+  toggleRowSelection?: (row: TRow) => void;
+  rowActions?: RowAction<TRow>[];
+  onClickRow?: (row: TRow) => void;
+  totalColSpan: number;
+  rowExpansion?: RowExpansionOptions<TRow>;
+  /** Optional — `DataTableContextValue` may be hand-constructed without it. */
+  isRowExpanded?: (row: TRow) => boolean;
+  toggleRowExpansion?: (row: TRow) => void;
+}
+
+/** @internal */
+function DataTableRows<TRow extends Record<string, unknown>>({
+  rows,
+  pinLayout,
+  hasSelection,
+  hasRowActions,
+  isRowSelected,
+  toggleRowSelection,
+  rowActions,
+  onClickRow,
+  totalColSpan,
+  rowExpansion,
+  isRowExpanded,
+  toggleRowExpansion,
+}: DataTableRowsProps<TRow>) {
+  const t = useDataTableT();
+  const baseId = useId();
+  const { value: timeZone } = useTimeZone();
+  const hasExpand = !!rowExpansion;
+  const { ordered, keys, placements, selection, expand, actions } = pinLayout;
+  // Intl formatter construction is costly; avoid repeating it for every cell render.
+  const cellRenderers = useMemo(
+    () =>
+      new Map(
+        ordered
+          .filter((col) => !col.render)
+          .map((col) => [col, createTypedCellRenderer(col, timeZone)]),
+      ),
+    [ordered, timeZone],
+  );
+  const {
+    contextMenu: cellContextMenu,
+    contextMenuOpen: cellContextMenuOpen,
+    handleContextMenuOpenChange: handleCellContextMenuOpenChange,
+    handleContextMenuCloseComplete: handleCellContextMenuCloseComplete,
+    getCellContextMenuHandlers,
+  } = useCellContextMenu();
+  const navigation = useCellEditNavigation();
+  // Namespaced so an id-less row's index fallback can't collide with a real
+  // id of the same digits — React reconciles duplicate keys by position,
+  // pairing a detail panel with the wrong row.
+  const rowKeys = rows.map((row, rowIndex) => {
+    const rowId = (row as Record<string, unknown>)["id"];
+    return rowId != null ? `id:${String(rowId)}` : `idx:${rowIndex}`;
+  });
+  // Tab / Shift+Tab move between editable cells in the order they render.
+  navigation.setOrder(rowKeys, ordered?.map((col) => keys.get(col) as string) ?? []);
+  // In a table people edit, every data cell says what a click does: editors
+  // show a text or pointer cursor, and the rest show "not allowed". Skipped when
+  // rows are clickable, where the row click is what the cursor should promise.
+  const blockReadOnlyCells = !onClickRow && (ordered?.some(isEditableColumn) ?? false);
+  const warnedMissingIdRef = useRef(false);
+
+  return (
+    <>
+      {rows.map((row, rowIndex) => {
+        const rowId = (row as Record<string, unknown>)["id"];
+        const selected = isRowSelected?.(row) ?? false;
+        const rowKey = rowKeys[rowIndex];
+        // Expansion is keyed by id, so a row without one gets no chevron at all
+        // rather than a disabled one — it must never be un-toggleable (D5).
+        const expandable = hasExpand && rowId != null && (rowExpansion?.canExpand?.(row) ?? true);
+        // Gated on `canExpand` in both directions, so a stale id (restored from
+        // a URL, say) can't open a panel for a row the consumer excluded. Such an
+        // id stays in `expandedIds` inert until `collapseAllRows()`.
+        const expanded = expandable && (isRowExpanded?.(row) ?? false);
+        // `aria-controls` is an IDREF *list*, so whitespace in a row id would split
+        // it into dead references (and make the `id` itself invalid).
+        const domKey = rowKey.replace(/\s+/g, "_");
+        const panelId = `${baseId}-panel-${domKey}`;
+        const triggerId = `${baseId}-trigger-${domKey}`;
+        const dataRow = (
+          <Table.Row
+            data-slot="data-table-row"
+            aria-selected={hasSelection ? selected : undefined}
+            // `Table.Row` styles the selected background off `data-[state=selected]`,
+            // so set it here too. Without it, only the pinned cells (which carry
+            // their own `group-aria-selected:bg-muted`) tint on selection, leaving
+            // the scrollable cells un-highlighted. `aria-selected` stays for a11y.
+            data-state={hasSelection && selected ? "selected" : undefined}
+            className={cn("astw:group", onClickRow && "astw:cursor-pointer")}
+            onClick={onClickRow ? () => onClickRow(row) : undefined}
+          >
+            {hasSelection &&
+              toggleRowSelection &&
+              (() => {
+                const { style, className } = pinCellProps(
+                  selection,
+                  { style: { width: SELECTION_WIDTH }, className: "astw:pl-3!" },
+                  "body",
+                );
+                return (
+                  <Table.Cell
+                    style={style}
+                    className={className}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Checkbox
+                      checked={selected}
+                      onCheckedChange={() => toggleRowSelection(row)}
+                      aria-label={t("selectRow")}
+                    />
+                  </Table.Cell>
+                );
+              })()}
+            {hasExpand &&
+              (() => {
+                const { style, className } = pinCellProps(
+                  expand,
+                  { style: { width: EXPAND_WIDTH } },
+                  "body",
+                );
+                return (
+                  // `stopPropagation` so using the chevron never fires `onClickRow`
+                  // (the selection cell does the same). Non-expandable rows still
+                  // render the cell — empty — so the column count stays consistent.
+                  <Table.Cell
+                    style={style}
+                    className={className}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {expandable && toggleRowExpansion && (
+                      <RowExpandToggle
+                        id={triggerId}
+                        expanded={expanded}
+                        label={rowExpansion?.getLabel?.(row)}
+                        panelId={panelId}
+                        onToggle={() => toggleRowExpansion(row)}
+                      />
+                    )}
+                  </Table.Cell>
+                );
+              })()}
+            {ordered?.map((col) => {
+              const key = keys.get(col) as string;
+              const editableColumn = isEditableColumn(col);
+              if (editableColumn && rowId == null && !warnedMissingIdRef.current) {
+                warnedMissingIdRef.current = true;
+                console.warn(
+                  `[DataTable] Column "${key}" has an \`edit\` config, but a row has no \`id\`. Rows without an \`id\` are shown read-only.`,
+                );
+              }
+              const editable =
+                editableColumn &&
+                rowId != null &&
+                // A badge dropdown picks one value; a cell holding several stays
+                // read-only rather than have its list replaced by a single pick.
+                !(col.type === "badge" && Array.isArray(getCellValue(row, col))) &&
+                (col.edit?.canEdit?.(row, { selected }) ?? true);
+              // An editable cell renders its own display; skip rendering it twice.
+              let content: ReactNode;
+              if (!editable) content = col.render ? col.render(row) : cellRenderers.get(col)?.(row);
+
+              const customCellProps = col.cellProps?.(row);
+              const { style: cellStyle, className: cellClassName } = pinCellProps(
+                placements.get(col),
+                {
+                  style: {
+                    ...customCellProps?.style,
+                    ...(col.width ? { width: col.width } : {}),
+                  },
+                  className: cn(
+                    resolveAlign(col) === "right" && "astw:text-right",
+                    // Keep the width constraint on the cell, but move the
+                    // `overflow: hidden` truncation to an inner span (below) — a
+                    // truncating cell would otherwise clip the freeze-shadow
+                    // `::after`, which is drawn just outside the cell edge.
+                    col.truncate && "astw:max-w-0",
+                  ),
+                },
+                "body",
+              );
+              // Truncate via an inner element so the cell's overflow stays visible.
+              // A read-only cell of a dropdown / date column keeps the icon's
+              // space like its editable neighbours, so the column's width never shifts.
+              const iconSpace = editableColumn && hasEditorIcon(col);
+              const cellBody =
+                col.truncate || iconSpace ? (
+                  <span
+                    className={cn(
+                      "astw:block",
+                      col.truncate && "astw:truncate",
+                      iconSpace && ICON_SPACE_CLASS_NAME,
+                    )}
+                  >
+                    {content}
+                  </span>
+                ) : (
+                  content
+                );
+              const menuValue = getCellContextValue(row, col, content);
+              const headerLabel = col.label ?? key;
+
+              // Surface the full value on hover when the cell is truncated
+              // and the resolved cell value is a stringifiable primitive.
+              // `getCellValue` is the same precedence rule the built-in
+              // renderers use (`accessor` first, then `row[col.id]`), so
+              // typed and inferred columns get tooltip wiring for free.
+              // Objects / arrays / no value are skipped — pass a custom
+              // `render` for those cases.
+              let tooltipLabel: string | undefined;
+              if (col.truncate) {
+                const raw = getCellValue(row, col);
+                if (typeof raw === "string" || typeof raw === "number") {
+                  tooltipLabel = String(raw);
+                }
+              }
+
+              const cellContextMenuHandlers = getCellContextMenuHandlers({
+                headerLabel,
+                value: menuValue,
+                filterConfig: col.filter,
+              });
+              const cellProps = {
+                "data-slot": "data-table-cell" as const,
+                title: customCellProps?.title,
+                style: { ...cellStyle, WebkitTouchCallout: "none" } satisfies CSSProperties,
+                className: cn(
+                  cellClassName,
+                  blockReadOnlyCells && !editable && "astw:cursor-not-allowed",
+                  customCellProps?.className,
+                ),
+                ...cellContextMenuHandlers,
+              };
+              if (editable) {
+                return (
+                  <DataTableEditableCell
+                    key={key}
+                    row={row}
+                    col={col}
+                    rowKey={rowKey}
+                    colKey={key}
+                    label={headerLabel}
+                    align={resolveAlign(col)}
+                    navigation={navigation}
+                    dateRenderer={col.type === "date" ? cellRenderers.get(col) : undefined}
+                    tooltipLabel={tooltipLabel}
+                    cellProps={cellProps}
+                  />
+                );
+              }
+
+              const cellElement = <Table.Cell {...cellProps} />;
+
+              if (tooltipLabel !== undefined) {
+                return (
+                  <Tooltip.Root key={key}>
+                    <Tooltip.Trigger render={cellElement}>{cellBody}</Tooltip.Trigger>
+                    <Tooltip.Content>{tooltipLabel}</Tooltip.Content>
+                  </Tooltip.Root>
+                );
+              }
+
+              return (
+                <Table.Cell key={key} {...cellProps}>
+                  {cellBody}
+                </Table.Cell>
+              );
+            })}
+            {hasRowActions &&
+              rowActions &&
+              (() => {
+                const { style, className } = pinCellProps(
+                  actions,
+                  { style: { width: ACTIONS_WIDTH }, className: "astw:pr-2!" },
+                  "body",
+                );
+                return (
+                  <Table.Cell
+                    style={style}
+                    className={className}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <RowActionsMenu actions={rowActions} row={row} />
+                  </Table.Cell>
+                );
+              })()}
+          </Table.Row>
+        );
+
+        // `expanded` is always false without `rowExpansion`, so a table
+        // that doesn't use the feature renders exactly the rows it did before.
+        return (
+          <Fragment key={rowKey}>
+            {dataRow}
+            {expandable && rowExpansion && (
+              // Mounted whenever the row could be open, not only while it is —
+              // the component owns the open/closed transition and renders
+              // nothing until there is something to show.
+              <DataTableExpandedRow
+                open={expanded}
+                totalColSpan={totalColSpan}
+                panelId={panelId}
+                triggerId={triggerId}
+                label={rowExpansion.getLabel?.(row)}
+                render={() => rowExpansion.render(row)}
+              />
+            )}
+          </Fragment>
+        );
+      })}
+      <DataTableCellContextMenu
+        context={cellContextMenu}
+        open={cellContextMenuOpen}
+        onOpenChange={handleCellContextMenuOpenChange}
+        onCloseComplete={handleCellContextMenuCloseComplete}
+      />
+    </>
+  );
+}
+
+function RowActionsMenu<TRow extends Record<string, unknown>>({
+  actions,
+  row,
+}: {
+  actions: RowAction<TRow>[];
+  row: TRow;
+}) {
+  const t = useDataTableT();
+
+  return (
+    <div data-slot="data-table-row-actions">
+      <Menu.Root>
+        <Menu.Trigger
+          render={
+            <Button variant="ghost" size="icon" aria-label={t("rowActions")}>
+              <Ellipsis className="astw:size-4" />
+            </Button>
+          }
+        />
+        <Menu.Content>
+          {actions.map((action) => {
+            // `canApply` is the positive form; the deprecated
+            // `isDisabled` still counts, so either one can switch it off.
+            const disabled =
+              (action.canApply ? !action.canApply(row) : false) ||
+              (action.isDisabled?.(row) ?? false);
+            return (
+              <Menu.Item
+                key={action.id}
+                disabled={disabled}
+                onClick={() => {
+                  if (!disabled) {
+                    action.onClick(row);
+                  }
+                }}
+                className={cn(action.variant === "destructive" && "astw:text-danger-text")}
+              >
+                {action.icon}
+                {action.label}
+              </Menu.Item>
+            );
+          })}
+        </Menu.Content>
+      </Menu.Root>
+    </div>
+  );
+}
+
+export { DataTableRows };
diff --git a/packages/core/src/components/data-table/selection-bar.tsx b/packages/core/src/components/data-table/selection-bar.tsx
index a9d0c5c9..82319c2c 100644
--- a/packages/core/src/components/data-table/selection-bar.tsx
+++ b/packages/core/src/components/data-table/selection-bar.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/button";
 import { Menu } from "@/components/menu";
 import { Spinner } from "@/components/spinner";
 import { Toolbar } from "@/components/toolbar";
-import { useDataTableContext, type DataTableContextValue } from "./data-table-context";
+import { useDataTableContext, type DataTableContextValue } from "./context";
 import { useDataTableT } from "./i18n";
 import type { SelectionAction, SelectionActionHelpers } from "./types";
 
diff --git a/packages/core/src/components/data-table/status-rows.tsx b/packages/core/src/components/data-table/status-rows.tsx
new file mode 100644
index 00000000..f17b0599
--- /dev/null
+++ b/packages/core/src/components/data-table/status-rows.tsx
@@ -0,0 +1,155 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { Table } from "@/components/table";
+import {
+  ACTIONS_WIDTH,
+  EXPAND_WIDTH,
+  SELECTION_WIDTH,
+  pinCellProps,
+  resolveAlign,
+  type PinLayout,
+} from "./column-layout";
+
+// Empty/error states reserve a fixed 3 rows' worth of height — enough to
+// read as an intentional region, independent of pageSize (so large page
+// sizes don't create a huge blank or, when height-constrained, scrollable
+// area, and tiny page sizes don't collapse to a thin strip).
+const STATUS_ROWS = 3;
+const ROW_HEIGHT_PX = 53;
+
+interface DataTableLoaderRowsProps<TRow extends Record<string, unknown>> {
+  rowCount: number;
+  pinLayout: PinLayout<TRow>;
+  hasSelection: boolean;
+  hasExpand: boolean;
+  hasRowActions: boolean;
+}
+
+// Skeleton cell widths (%) — varied per row+col to look natural
+const SKELETON_WIDTHS = [75, 55, 85, 65, 70];
+
+/** @internal */
+function DataTableLoaderRows<TRow extends Record<string, unknown>>({
+  rowCount,
+  pinLayout,
+  hasSelection,
+  hasExpand,
+  hasRowActions,
+}: DataTableLoaderRowsProps<TRow>) {
+  const { ordered: columns, keys, placements, selection, expand, actions } = pinLayout;
+  // No fixed row height: each cell's placeholder matches the height of the
+  // real content it stands in for (text line, badge, icon button), so the
+  // skeleton rows resolve to exactly the same row height as loaded rows and
+  // the table doesn't shift when data arrives.
+  return (
+    <>
+      {Array.from({ length: rowCount }).map((_, rowIndex) => (
+        <Table.Row key={rowIndex} data-datatable-state="loading" className="astw:group">
+          {hasSelection &&
+            (() => {
+              const { style, className } = pinCellProps(
+                selection,
+                { style: { width: SELECTION_WIDTH }, className: "astw:pl-3!" },
+                "body",
+              );
+              return (
+                <Table.Cell style={style} className={className}>
+                  <div className="astw:size-4 astw:rounded-xs astw:bg-muted astw:animate-pulse" />
+                </Table.Cell>
+              );
+            })()}
+          {hasExpand &&
+            (() => {
+              const { style, className } = pinCellProps(
+                expand,
+                { style: { width: EXPAND_WIDTH } },
+                "body",
+              );
+              return (
+                <Table.Cell style={style} className={className}>
+                  {/* size-9 box = the real chevron Button's footprint, so the
+                      skeleton row resolves to the same height as a loaded row */}
+                  <div className="astw:mx-auto astw:flex astw:size-9 astw:items-center astw:justify-center">
+                    <div className="astw:size-4 astw:rounded astw:bg-muted astw:animate-pulse" />
+                  </div>
+                </Table.Cell>
+              );
+            })()}
+          {columns?.map((col, colIndex) => {
+            const key = keys.get(col) as string;
+            const skeletonWidth = SKELETON_WIDTHS[(rowIndex + colIndex) % SKELETON_WIDTHS.length];
+            const isBadge = col.type === "badge";
+            const { style, className } = pinCellProps(
+              placements.get(col),
+              { style: col.width ? { width: col.width } : undefined },
+              "body",
+            );
+            return (
+              <Table.Cell key={key} style={style} className={className}>
+                <div
+                  className={cn(
+                    "astw:bg-muted astw:animate-pulse",
+                    // badge cells render 22px pills; text cells occupy one
+                    // 20px line box (bar inset by my-0.5 to keep the lighter
+                    // 16px placeholder look)
+                    isBadge ? "astw:h-5.5 astw:rounded-full" : "astw:h-4 astw:my-0.5 astw:rounded",
+                    resolveAlign(col) === "right" && "astw:ml-auto",
+                  )}
+                  style={{ width: `${skeletonWidth}%` }}
+                />
+              </Table.Cell>
+            );
+          })}
+          {hasRowActions &&
+            (() => {
+              const { style, className } = pinCellProps(
+                actions,
+                { style: { width: ACTIONS_WIDTH }, className: "astw:pr-2!" },
+                "body",
+              );
+              return (
+                <Table.Cell style={style} className={className}>
+                  {/* size-9 box = the real icon Button's footprint; the visible
+                      pulse stays 24px to read as an ellipsis placeholder */}
+                  <div className="astw:mx-auto astw:flex astw:size-9 astw:items-center astw:justify-center">
+                    <div className="astw:size-6 astw:rounded astw:bg-muted astw:animate-pulse" />
+                  </div>
+                </Table.Cell>
+              );
+            })()}
+        </Table.Row>
+      ))}
+    </>
+  );
+}
+
+// =============================================================================
+// DataTableStatusRow (internal)
+// =============================================================================
+
+interface DataTableStatusRowProps {
+  totalColSpan: number;
+  state: string;
+  children: ReactNode;
+}
+
+/** @internal */
+function DataTableStatusRow({ totalColSpan, state, children }: DataTableStatusRowProps) {
+  return (
+    <Table.Row data-datatable-state={state} className="astw:border-0 astw:hover:bg-transparent">
+      {/* Reserve a fixed 3-row height (acts as a minimum — the cell grows if a
+          bounded container makes the row taller), independent of pageSize so
+          large page sizes don't create a huge blank/scrollable region.
+          `align-middle` centres the message vertically within that height. */}
+      <Table.Cell
+        colSpan={totalColSpan}
+        style={{ height: `${STATUS_ROWS * ROW_HEIGHT_PX}px` }}
+        className="astw:text-center astw:align-middle"
+      >
+        {children}
+      </Table.Cell>
+    </Table.Row>
+  );
+}
+
+export { DataTableLoaderRows, DataTableStatusRow };
diff --git a/packages/core/src/components/data-table/table.tsx b/packages/core/src/components/data-table/table.tsx
new file mode 100644
index 00000000..7649bfed
--- /dev/null
+++ b/packages/core/src/components/data-table/table.tsx
@@ -0,0 +1,64 @@
+import { useContext, useEffect, useRef } from "react";
+import { Table } from "@/components/table";
+import { DataTableContext, PinMeasureContext } from "./context";
+import { DataTableHeaders } from "./header";
+import { DataTableBody } from "./body";
+import { DataTableColumnFooter } from "./column-footer";
+import { useTableMeasurements } from "./use-table-measurements";
+
+/** Use `DataTable.Table` instead of calling this directly. */
+function DataTableTable({ className }: { className?: string }) {
+  const ctx = useContext(DataTableContext);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const visibleColumns = ctx?.visibleColumns;
+  const pinnedColumns = ctx?.pinnedColumns;
+  const currentPage = ctx?.currentPage;
+  const pageSize = ctx?.pageSize;
+  const hasSelection = !!ctx?.toggleRowSelection;
+  const hasExpand = !!ctx?.rowExpansion;
+  const hasRowActions = !!ctx?.rowActions?.length;
+
+  const widths = useTableMeasurements(containerRef, {
+    visibleColumns,
+    pinnedColumns,
+    hasSelection,
+    hasExpand,
+    hasRowActions,
+  });
+
+  // Keep pagination-driven scroll reset local to the scroll owner. The scroll
+  // container lives here in `DataTable.Table`, while page changes can come from
+  // the built-in pagination or any custom consumer using the same context.
+  // Threading an imperative callback/event bus through `DataTable.Root` just to
+  // reach this ref would add API surface and create opt-in call sites; this
+  // effect stays as the single place that synchronizes page/page-size state to
+  // the DOM scroll position.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.scrollTop = 0;
+  }, [currentPage, pageSize]);
+
+  return (
+    // min-h-0 lets the scroll container shrink within DataTable.Root's flex
+    // column; combined with the container's overflow-auto this is the region
+    // that scrolls vertically when height is constrained. The sticky header
+    // (DataTableHeaders) stays pinned to the top of this scrollport.
+    <PinMeasureContext.Provider value={widths}>
+      <Table.Root
+        data-slot="data-table-table"
+        containerRef={containerRef}
+        containerClassName="astw:min-h-0 astw:overflow-auto"
+        className={className}
+      >
+        <DataTableHeaders />
+        <DataTableBody />
+        <DataTableColumnFooter />
+      </Table.Root>
+    </PinMeasureContext.Provider>
+  );
+}
+DataTableTable.displayName = "DataTable.Table";
+
+export { DataTableTable };
diff --git a/packages/core/src/components/data-table/test-utils.tsx b/packages/core/src/components/data-table/test-utils.tsx
new file mode 100644
index 00000000..eb3b430a
--- /dev/null
+++ b/packages/core/src/components/data-table/test-utils.tsx
@@ -0,0 +1,116 @@
+import { StrictMode, type ReactNode } from "react";
+import { fireEvent } from "@testing-library/react";
+import { resetLocalTimeZone } from "@internationalized/date";
+import { vi } from "vitest";
+import { createAppShellWrapper } from "../../../tests/test-utils";
+import { AppShellConfigContext, buildConfigurations } from "@/contexts/appshell-context";
+import type { CollectionControl } from "@/types/collection";
+import { DataTable } from "./data-table";
+import { useDataTable } from "./use-data-table";
+import type { Column, DataTableData } from "./types";
+
+export type TestRow = { id: string; name: string; status: string };
+
+export const testColumns: Column<TestRow>[] = [
+  { label: "Name", render: (row) => row.name },
+  { label: "Status", render: (row) => row.status },
+];
+
+export const testData: DataTableData<TestRow> = {
+  rows: [
+    { id: "1", name: "Alice", status: "Active" },
+    { id: "2", name: "Bob", status: "Inactive" },
+  ],
+};
+
+export function stubBrowserTimeZone() {
+  vi.stubEnv("TZ", "UTC");
+  resetLocalTimeZone();
+}
+
+export function makeControl(overrides?: Partial<CollectionControl>): CollectionControl {
+  return {
+    filters: [],
+    addFilter: vi.fn(),
+    setFilters: vi.fn(),
+    removeFilter: vi.fn(),
+    clearFilters: vi.fn(),
+    sortStates: [],
+    setSort: vi.fn(),
+    clearSort: vi.fn(),
+    pageSize: 10,
+    setPageSize: vi.fn(),
+    goToNextPage: vi.fn(),
+    goToPrevPage: vi.fn(),
+    resetPage: vi.fn(),
+    goToFirstPage: vi.fn(),
+    goToLastPage: vi.fn(),
+    resetCount: 0,
+    getHasPrevPage: () => false,
+    getHasNextPage: (pageInfo) => pageInfo.hasNextPage,
+    ...overrides,
+  };
+}
+
+export function TestDataTable(props: {
+  columns?: Column<TestRow>[];
+  data?: DataTableData<TestRow> | undefined;
+  loading?: boolean;
+  error?: Error | null;
+  onSelectionChange?: (ids: string[]) => void;
+}) {
+  const {
+    columns = testColumns,
+    data = "data" in props ? props.data : testData,
+    loading,
+    error,
+    onSelectionChange,
+  } = props;
+  const table = useDataTable<TestRow>({
+    columns,
+    data,
+    loading,
+    error,
+    onSelectionChange,
+  });
+  return (
+    <DataTable.Root value={table}>
+      <DataTable.Table />
+    </DataTable.Root>
+  );
+}
+
+export const wrapper = createAppShellWrapper("en");
+
+export function createTimeZoneWrapper(timeZone: string) {
+  const configurations = buildConfigurations({ modules: [], locale: "en", timeZone });
+  return function TimeZoneWrapper({ children }: { children: ReactNode }) {
+    return (
+      <AppShellConfigContext.Provider value={{ configurations }}>
+        {children}
+      </AppShellConfigContext.Provider>
+    );
+  };
+}
+
+export const headByText = (container: HTMLElement, text: string) =>
+  Array.from(container.querySelectorAll<HTMLElement>('[data-slot="data-table-header"] th')).find(
+    (th) => th.textContent?.trim().startsWith(text),
+  );
+
+export const openHeaderContextMenu = (container: HTMLElement, text: string) => {
+  const trigger = headByText(container, text)?.querySelector<HTMLElement>(
+    '[data-slot="data-table-header-context-menu-trigger"]',
+  );
+  fireEvent.contextMenu(trigger!);
+};
+
+// StrictMode exposes callbacks fired from an impure state updater.
+export const strictWrapper = ({ children }: { children: ReactNode }) => {
+  const Wrapper = wrapper;
+  return (
+    <StrictMode>
+      <Wrapper>{children}</Wrapper>
+    </StrictMode>
+  );
+};
diff --git a/packages/core/src/components/data-table/toolbar.test.tsx b/packages/core/src/components/data-table/toolbar.test.tsx
deleted file mode 100644
index c0bc812c..00000000
--- a/packages/core/src/components/data-table/toolbar.test.tsx
+++ /dev/null
@@ -1,1721 +0,0 @@
-import type { ReactNode } from "react";
-import { afterEach, describe, it, expect, vi } from "vitest";
-import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { createAppShellWrapper } from "../../../tests/test-utils";
-import { AppShellConfigContext, buildConfigurations } from "@/contexts/appshell-context";
-import { DataTable } from "./data-table";
-import { useDataTable } from "./use-data-table";
-import type { CollectionControl } from "@/types/collection";
-import type { Column } from "./types";
-
-afterEach(() => {
-  cleanup();
-  vi.unstubAllEnvs();
-});
-
-type TestRow = Record<string, unknown>;
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function makeControl(overrides?: Partial<CollectionControl>): CollectionControl {
-  return {
-    filters: [],
-    addFilter: vi.fn(),
-    setFilters: vi.fn(),
-    removeFilter: vi.fn(),
-    clearFilters: vi.fn(),
-    sortStates: [],
-    setSort: vi.fn(),
-    clearSort: vi.fn(),
-    pageSize: 10,
-    setPageSize: vi.fn(),
-    goToNextPage: vi.fn(),
-    goToPrevPage: vi.fn(),
-    resetPage: vi.fn(),
-    goToFirstPage: vi.fn(),
-    goToLastPage: vi.fn(),
-    resetCount: 0,
-    getHasPrevPage: () => false,
-    getHasNextPage: (pageInfo) => pageInfo.hasNextPage,
-    ...overrides,
-  };
-}
-
-function TestFilters({
-  control,
-  columns,
-  slot,
-  addIconOnly,
-}: {
-  control: CollectionControl;
-  columns: Column<TestRow>[];
-  slot?: "all" | "chips" | "add";
-  addIconOnly?: boolean;
-}) {
-  const table = useDataTable<TestRow>({ columns, data: { rows: [] }, control });
-  return (
-    <DataTable.Root value={table}>
-      <DataTable.Toolbar>
-        <DataTable.Filters slot={slot} addIconOnly={addIconOnly} />
-      </DataTable.Toolbar>
-    </DataTable.Root>
-  );
-}
-
-const wrapper = createAppShellWrapper("en");
-const timeZoneWrapper = ({ children }: { children: ReactNode }) => (
-  <AppShellConfigContext.Provider
-    value={{
-      configurations: buildConfigurations({
-        modules: [],
-        locale: "en",
-        timeZone: "America/Los_Angeles",
-      }),
-    }}
-  >
-    {children}
-  </AppShellConfigContext.Provider>
-);
-
-// ---------------------------------------------------------------------------
-// Filter chip segment helpers
-// ---------------------------------------------------------------------------
-// The redesigned filter chip (`data-slot="data-table-filter-chip"`) is a
-// segmented control. Its buttons are, in order, [operator?, value, remove]:
-//   - field  → a plain <span> (never a button)
-//   - operator → a <button> when the field has >1 operator, otherwise a <span>
-//   - value  → always a <button>; clicking it opens the value-editor popover
-//   - remove → a <button> with aria-label "Remove filter"
-// The value segment is therefore always the *second-to-last* button, regardless
-// of whether the operator segment is a button — a stable way to open the value
-// editor without depending on the (type-specific, now value-only) button name.
-
-function valueSegmentButton(chipIndex = 0): HTMLButtonElement {
-  const chip = document.querySelectorAll('[data-slot="data-table-filter-chip"]')[chipIndex];
-  if (!chip) throw new Error("No filter chip rendered");
-  const buttons = chip.querySelectorAll("button");
-  return buttons[buttons.length - 2] as HTMLButtonElement;
-}
-
-async function openValueEditor(user: ReturnType<typeof userEvent.setup>, chipIndex = 0) {
-  await user.click(valueSegmentButton(chipIndex));
-}
-
-// ---------------------------------------------------------------------------
-// Date filter (DatePicker) helpers
-// ---------------------------------------------------------------------------
-// `date` filters render the app-shell DatePicker — a labelled group of
-// `spinbutton` segments — instead of a native date input. These helpers drive
-// it via the segments, re-querying by index so they survive controlled
-// re-renders.
-
-const datePickerGroup = (index: number) => screen.getAllByRole("group")[index];
-
-async function typeDateInto(
-  user: ReturnType<typeof userEvent.setup>,
-  groupIndex: number,
-  iso: string,
-) {
-  const [year, month, day] = iso.split("-");
-  const seg = (name: string) =>
-    within(datePickerGroup(groupIndex)).getByRole("spinbutton", { name });
-  await user.click(seg("month"));
-  await user.keyboard(month);
-  await user.click(seg("day"));
-  await user.keyboard(day);
-  await user.click(seg("year"));
-  await user.keyboard(year);
-}
-
-async function clearDateIn(user: ReturnType<typeof userEvent.setup>, groupIndex: number) {
-  // Clear every segment. Leaving the day set would trigger the field's on-blur
-  // backfill (assume current month/year), so a genuine "cleared" state must
-  // remove the day too — the day is the trigger for that backfill.
-  for (const name of ["day", "month", "year"]) {
-    await user.click(within(datePickerGroup(groupIndex)).getByRole("spinbutton", { name }));
-    await user.keyboard("{Delete}");
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Column fixtures
-// ---------------------------------------------------------------------------
-
-const stringColumn: Column<TestRow> = {
-  id: "name",
-  label: "Name",
-  render: (r) => String(r.name ?? ""),
-  filter: { type: "string", field: "name" },
-};
-
-const uuidColumn: Column<TestRow> = {
-  id: "id",
-  label: "ID",
-  render: (r) => String(r.id ?? ""),
-  filter: { type: "uuid", field: "id" },
-};
-
-const numberColumn: Column<TestRow> = {
-  id: "count",
-  label: "Count",
-  render: (r) => String(r.count ?? ""),
-  filter: { type: "number", field: "count" },
-};
-
-const decimalColumn: Column<TestRow> = {
-  id: "amount",
-  label: "Amount",
-  filter: { type: "decimal", field: "amount" },
-};
-
-const dateColumn: Column<TestRow> = {
-  id: "createdAt",
-  label: "Created At",
-  render: (r) => String(r.createdAt ?? ""),
-  filter: { type: "date", field: "createdAt" },
-};
-
-const datetimeColumn: Column<TestRow> = {
-  id: "publishedAt",
-  label: "Published At",
-  render: (r) => String(r.publishedAt ?? ""),
-  filter: { type: "datetime", field: "publishedAt" },
-};
-
-const timeColumn: Column<TestRow> = {
-  id: "opensAt",
-  label: "Opens At",
-  render: (r) => String(r.opensAt ?? ""),
-  filter: { type: "time", field: "opensAt" },
-};
-
-const enumColumn: Column<TestRow> = {
-  id: "status",
-  label: "Status",
-  render: (r) => String(r.status ?? ""),
-  filter: {
-    type: "enum",
-    field: "status",
-    options: [
-      { value: "active", label: "Active" },
-      { value: "inactive", label: "Inactive" },
-    ],
-  },
-};
-
-const booleanColumn: Column<TestRow> = {
-  id: "enabled",
-  label: "Enabled",
-  render: (r) => String(r.enabled ?? ""),
-  filter: { type: "boolean", field: "enabled" },
-};
-
-const stringContainsOnlyColumn: Column<TestRow> = {
-  ...stringColumn,
-  filter: { type: "string", field: "name", operators: ["contains"] },
-};
-
-const stringEqOnlyColumn: Column<TestRow> = {
-  ...stringColumn,
-  filter: { type: "string", field: "name", operators: ["eq"] },
-};
-
-const stringInvalidOperatorColumn: Column<TestRow> = {
-  ...stringColumn,
-  filter: {
-    type: "string",
-    field: "name",
-    operators: ["gt"] as unknown as ["contains"],
-  },
-};
-
-describe.each([
-  { isComposing: true, keyCode: 13 },
-  { isComposing: false, keyCode: 229 },
-])("filter IME handling ($isComposing, $keyCode)", (compositionEvent) => {
-  describe.each(["panel", "chip"] as const)("%s", (surface) => {
-    it.each([
-      { column: stringColumn, initial: "Alice", draft: "株式会社", final: "株式会社東京" },
-      { column: uuidColumn, initial: "uuid-1", draft: "uuid-2", final: "uuid-3" },
-      { column: numberColumn, initial: 1, draft: "2", final: 3 },
-      { column: timeColumn, initial: "09:30", draft: "10:30", final: "11:30" },
-    ])(
-      "does not commit $column.id until Enter outside composition",
-      async ({ column, initial, draft, final }) => {
-        const user = userEvent.setup();
-        const field = column.id!;
-        const operator = column === stringColumn ? "contains" : "eq";
-        const control = makeControl({ filters: [{ field, operator, value: initial }] });
-        render(<TestFilters control={control} columns={[column]} />, { wrapper });
-
-        if (surface === "panel") {
-          await user.click(screen.getByRole("button", { name: "Add filter" }));
-        } else {
-          await openValueEditor(user);
-        }
-
-        const input = await screen.findByDisplayValue(String(initial));
-        await user.click(input);
-        fireEvent.change(input, { target: { value: draft } });
-        fireEvent.keyDown(input, { key: "Enter", ...compositionEvent });
-
-        expect(control.addFilter).not.toHaveBeenCalled();
-        expect(control.removeFilter).not.toHaveBeenCalled();
-        expect(document.activeElement).toBe(input);
-        expect(screen.getByDisplayValue(draft)).toBe(input);
-
-        fireEvent.change(input, { target: { value: String(final) } });
-        fireEvent.keyDown(input, { key: "Enter", ...compositionEvent });
-        expect(control.addFilter).not.toHaveBeenCalled();
-        expect(control.removeFilter).not.toHaveBeenCalled();
-
-        fireEvent.keyDown(input, { key: "Enter", isComposing: false, keyCode: 13 });
-        expect(control.addFilter).toHaveBeenCalledTimes(1);
-        expect(vi.mocked(control.addFilter).mock.calls[0].slice(0, 3)).toEqual([
-          field,
-          operator,
-          final,
-        ]);
-        if (surface === "chip") {
-          await vi.waitFor(() => expect(screen.queryByDisplayValue(String(final))).toBeNull());
-        } else {
-          expect(screen.getByDisplayValue(String(final))).toBe(input);
-        }
-      },
-    );
-
-    it.each(["Min", "Max"])("does not commit a range from %s during composition", async (bound) => {
-      const user = userEvent.setup();
-      const control = makeControl({
-        filters: [{ field: "count", operator: "between", value: { min: 1, max: 10 } }],
-      });
-      render(<TestFilters control={control} columns={[numberColumn]} />, { wrapper });
-      if (surface === "panel") {
-        await user.click(screen.getByRole("button", { name: "Add filter" }));
-      } else {
-        await openValueEditor(user);
-      }
-
-      const input = await screen.findByRole("spinbutton", { name: bound });
-      fireEvent.change(input, { target: { value: bound === "Min" ? "2" : "20" } });
-      fireEvent.keyDown(input, { key: "Enter", ...compositionEvent });
-      expect(control.addFilter).not.toHaveBeenCalled();
-      expect(control.removeFilter).not.toHaveBeenCalled();
-      expect(screen.getByRole("spinbutton", { name: bound })).toBe(input);
-
-      fireEvent.keyDown(input, { key: "Enter", isComposing: false, keyCode: 13 });
-      expect(control.addFilter).toHaveBeenCalledTimes(1);
-      expect(control.addFilter).toHaveBeenCalledWith("count", "between", {
-        min: bound === "Min" ? 2 : 1,
-        max: bound === "Max" ? 20 : 10,
-      });
-    });
-  });
-});
-
-// ---------------------------------------------------------------------------
-// DataTable.Filters — rendering
-// ---------------------------------------------------------------------------
-
-describe("DataTable.Filters", () => {
-  it("renders no filter chips when no active filters", () => {
-    const control = makeControl({ filters: [] });
-    const { container } = render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-    expect(container.querySelector('[data-slot="data-table-filter-chip"]')).toBeNull();
-  });
-
-  it("renders a segmented filter chip (field / operator / value) for each active filter", () => {
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    const { container } = render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-    expect(container.querySelector('[data-slot="data-table-filter-chip"]')).not.toBeNull();
-    // The chip is segmented: the field, operator, and value each render in their
-    // own element rather than a single combined label.
-    expect(screen.getByText("Name")).toBeDefined();
-    expect(screen.getByText("contains")).toBeDefined();
-    expect(screen.getByText("Alice")).toBeDefined();
-  });
-
-  it("renders the add filter button when there are unfiltered filterable columns", () => {
-    const control = makeControl({ filters: [] });
-    render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-    expect(screen.getByRole("button", { name: "Add filter" })).toBeDefined();
-  });
-
-  it("still renders the add filter button when all filterable columns are active", () => {
-    // The add-filter trigger is always available now (it re-opens the editor for
-    // active fields too), so it must remain present even when every filterable
-    // column already has a chip.
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-    expect(screen.getByRole("button", { name: "Add filter" })).toBeDefined();
-  });
-
-  it("returns null when there are no filterable columns", () => {
-    const control = makeControl({ filters: [] });
-    const nonFilterableColumn: Column<TestRow> = {
-      id: "name",
-      label: "Name",
-      render: (r) => String(r.name ?? ""),
-    };
-    const { container } = render(
-      <TestFilters control={control} columns={[nonFilterableColumn]} />,
-      { wrapper },
-    );
-    expect(container.querySelector('[data-slot="data-table-filters"]')).toBeNull();
-  });
-
-  it("slot='add' renders only the Add filter trigger (no chips)", () => {
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} slot="add" />, { wrapper });
-    expect(screen.getByRole("button", { name: "Add filter" })).toBeDefined();
-    expect(document.querySelector('[data-slot="data-table-filter-chip"]')).toBeNull();
-  });
-
-  it("slot='chips' renders only active chips (no Add filter trigger)", () => {
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} slot="chips" />, { wrapper });
-    expect(document.querySelector('[data-slot="data-table-filter-chip"]')).not.toBeNull();
-    expect(screen.queryByRole("button", { name: "Add filter" })).toBeNull();
-  });
-
-  it("slot='chips' renders nothing when there are no active filters", () => {
-    const control = makeControl({ filters: [] });
-    const { container } = render(
-      <TestFilters control={control} columns={[stringColumn]} slot="chips" />,
-      { wrapper },
-    );
-    expect(container.querySelector('[data-slot="data-table-filters"]')).toBeNull();
-  });
-
-  it("renders an icon-only trigger by default (label kept as aria-label)", () => {
-    const control = makeControl({ filters: [] });
-    render(<TestFilters control={control} columns={[stringColumn]} slot="add" />, {
-      wrapper,
-    });
-    // Reachable by its accessible name, but the label text is not rendered.
-    const trigger = screen.getByRole("button", { name: "Add filter" });
-    expect(trigger.textContent).toBe("");
-  });
-
-  it("addIconOnly={false} renders the visible 'Add filter' text label", () => {
-    const control = makeControl({ filters: [] });
-    render(
-      <TestFilters control={control} columns={[stringColumn]} slot="add" addIconOnly={false} />,
-      { wrapper },
-    );
-    const trigger = screen.getByRole("button", { name: "Add filter" });
-    expect(trigger.textContent).toContain("Add filter");
-  });
-});
-
-// ---------------------------------------------------------------------------
-// AddFilterPanel — the add-filter trigger opens a 3-column panel
-// ---------------------------------------------------------------------------
-
-describe("AddFilterPanel", () => {
-  it("opens a panel listing every filterable field", async () => {
-    // The add-filter surface is a single popover with three columns
-    // (field ▸ condition ▸ value); the first column lists each filterable field
-    // as a button.
-    const user = userEvent.setup();
-    const control = makeControl({ filters: [] });
-    render(<TestFilters control={control} columns={[stringColumn, numberColumn]} />, {
-      wrapper,
-    });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-
-    expect(await screen.findByRole("button", { name: /^Name$/ })).toBeDefined();
-    expect(screen.getByRole("button", { name: /^Count$/ })).toBeDefined();
-  });
-
-  it("the field search filters the field list and shows an empty state", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({ filters: [] });
-    render(<TestFilters control={control} columns={[stringColumn, numberColumn]} />, {
-      wrapper,
-    });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-    const search = await screen.findByPlaceholderText("Search fields");
-
-    fireEvent.change(search, { target: { value: "coun" } });
-    expect(screen.getByRole("button", { name: /^Count$/ })).toBeDefined();
-    expect(screen.queryByRole("button", { name: /^Name$/ })).toBeNull();
-
-    fireEvent.change(search, { target: { value: "zzz" } });
-    expect(screen.getByText(/no fields match/i)).toBeDefined();
-
-    fireEvent.change(search, { target: { value: "" } });
-    expect(screen.getByRole("button", { name: /^Name$/ })).toBeDefined();
-    expect(screen.getByRole("button", { name: /^Count$/ })).toBeDefined();
-  });
-
-  it("advances the selection when the search filters out the active field", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({ filters: [] });
-    render(<TestFilters control={control} columns={[stringColumn, numberColumn]} />, { wrapper });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-    // Select the numeric "Count" field — its editor has no "contains" operator.
-    await user.click(await screen.findByRole("button", { name: /^Count$/ }));
-    expect(screen.queryByRole("button", { name: "contains" })).toBeNull();
-
-    // Searching "na" filters the list to "Name" only, filtering out the active
-    // "Count" field. Selection must advance to "Name" so the list and the editor
-    // stay in sync — the string editor's "contains" operator now appears.
-    fireEvent.change(screen.getByPlaceholderText("Search fields"), { target: { value: "na" } });
-    expect(await screen.findByRole("button", { name: "contains" })).toBeDefined();
-  });
-
-  it("selecting a field shows the value editor with an Apply button", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({ filters: [] });
-    render(<TestFilters control={control} columns={[stringColumn, numberColumn]} />, {
-      wrapper,
-    });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-    await user.click(await screen.findByRole("button", { name: /^Count$/ }));
-
-    // Amount/Count is numeric → condition column + a value input + Apply.
-    expect(await screen.findByRole("button", { name: /^Apply$/ })).toBeDefined();
-  });
-
-  it("uses contains as the default operator for an unconfigured string column", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({ filters: [] });
-    render(<TestFilters control={control} columns={[stringColumn]} />, { wrapper });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-
-    const panel = document.querySelector(
-      '[data-slot="data-table-filter-panel"]',
-    ) as HTMLElement | null;
-    expect(panel).not.toBeNull();
-
-    const textboxes = within(panel as HTMLElement).getAllByRole("textbox");
-    await user.type(textboxes[textboxes.length - 1] as HTMLInputElement, "Bob");
-    await user.click(screen.getByRole("button", { name: /^Apply$/ }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Bob", {
-      caseSensitive: false,
-    });
-  });
-
-  it("does not widen an invalid runtime string allowlist back to every operator", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({ filters: [] });
-    render(<TestFilters control={control} columns={[stringInvalidOperatorColumn]} />, { wrapper });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-
-    expect(screen.queryByRole("button", { name: /^contains$/ })).toBeNull();
-
-    const panel = document.querySelector(
-      '[data-slot="data-table-filter-panel"]',
-    ) as HTMLElement | null;
-    expect(panel).not.toBeNull();
-
-    const textboxes = within(panel as HTMLElement).getAllByRole("textbox");
-    await user.type(textboxes[textboxes.length - 1] as HTMLInputElement, "Bob");
-    await user.click(screen.getByRole("button", { name: /^Apply$/ }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Bob", {
-      caseSensitive: false,
-    });
-  });
-
-  it("hides the condition column when a column restricts filters to one operator", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({ filters: [] });
-    render(<TestFilters control={control} columns={[stringContainsOnlyColumn]} />, { wrapper });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-
-    expect(screen.queryByRole("button", { name: /^contains$/ })).toBeNull();
-    expect(await screen.findByRole("button", { name: /^Apply$/ })).toBeDefined();
-  });
-
-  it("seeds an already-filtered field's operator/value so the panel preserves them", async () => {
-    // Re-opening the panel on a field that already has a non-default filter
-    // (here a number "between") must keep that operator and value rather than
-    // resetting to the type default — otherwise applying would silently overwrite.
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "count", operator: "between", value: { min: 5, max: 10 } }],
-    });
-    render(<TestFilters control={control} columns={[numberColumn]} />, { wrapper });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-    // The commit button reads "Update" (not "Add"/"Apply") for an active field.
-    await user.click(await screen.findByRole("button", { name: /^Update$/ }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("count", "between", { min: 5, max: 10 });
-  });
-
-  it("preserves case-sensitivity when re-applying a string filter from the panel", async () => {
-    // The panel has no case-sensitive toggle; re-applying must carry the active
-    // filter's caseSensitive flag through rather than clearing it.
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice", caseSensitive: true }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} />, { wrapper });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-    await user.click(await screen.findByRole("button", { name: /^Update$/ }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Alice", {
-      caseSensitive: true,
-    });
-  });
-
-  it("normalizes a legacy local datetime when re-applying it from the panel", async () => {
-    const user = userEvent.setup();
-    vi.stubEnv("TZ", "UTC");
-    const control = makeControl({
-      filters: [{ field: "publishedAt", operator: "eq", value: "2025-01-01T10:30:00" }],
-    });
-    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
-      wrapper: timeZoneWrapper,
-    });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-    await user.click(await screen.findByRole("button", { name: /^Update$/ }));
-
-    expect(control.addFilter).toHaveBeenCalledWith(
-      "publishedAt",
-      "eq",
-      "2025-01-01T18:30:00.000Z",
-      undefined,
-    );
-  });
-
-  it("preserves an active operator even when the column now restricts the allowlist", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringEqOnlyColumn]} />, { wrapper });
-
-    expect(screen.getByRole("button", { name: "contains" })).toBeDefined();
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-    await user.click(await screen.findByRole("button", { name: /^Update$/ }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Alice", {
-      caseSensitive: false,
-    });
-  });
-
-  it("does not surface legacy numeric-only operators in the date condition list", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "createdAt", operator: "gt", value: "2025-01-01" }],
-    });
-    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-
-    const panel = document.querySelector(
-      '[data-slot="data-table-filter-panel"]',
-    ) as HTMLElement | null;
-    expect(panel).not.toBeNull();
-
-    const panelQueries = within(panel as HTMLElement);
-    expect(panelQueries.queryByRole("button", { name: "greater than" })).toBeNull();
-    expect(panelQueries.getByRole("button", { name: "exact date" })).toBeDefined();
-    expect(panelQueries.getByRole("button", { name: "after" })).toBeDefined();
-    expect(panelQueries.getByRole("button", { name: "before" })).toBeDefined();
-  });
-
-  it("disables the commit button when the between range is reversed (min > max)", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({ filters: [] });
-    render(<TestFilters control={control} columns={[numberColumn]} />, { wrapper });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-    // Choose "is between", then enter a reversed range.
-    await user.click(await screen.findByRole("button", { name: /is between/i }));
-    await user.type(screen.getByRole("spinbutton", { name: "Min" }), "10");
-    await user.type(screen.getByRole("spinbutton", { name: "Max" }), "5");
-
-    const commit = screen.getByRole("button", { name: /^(Apply|Update)$/ });
-    expect((commit as HTMLButtonElement).disabled).toBe(true);
-    // ...and an inline error explains why.
-    expect(screen.getByText(/must be greater than or equal to/i)).toBeDefined();
-  });
-
-  it("renders a native time input for a single-value time filter", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({ filters: [] });
-    render(<TestFilters control={control} columns={[timeColumn]} />, { wrapper });
-
-    await user.click(screen.getByRole("button", { name: /Add filter/ }));
-    // `time` defaults to a single-value operator → native time input (not a
-    // plain text box).
-    const input = await screen.findByLabelText("Opens At");
-    expect(input.getAttribute("type")).toBe("time");
-  });
-});
-
-// ---------------------------------------------------------------------------
-// FilterChip — remove button
-// ---------------------------------------------------------------------------
-
-describe("FilterChip", () => {
-  it("focuses the operator search input when the operator popover opens", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-
-    await user.click(screen.getByRole("button", { name: "contains" }));
-
-    const input = await screen.findByPlaceholderText("Search...");
-    expect(document.activeElement).toBe(input);
-  });
-
-  it("calls removeFilter when the remove button is clicked", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-
-    await user.click(screen.getByRole("button", { name: "Remove filter" }));
-
-    expect(control.removeFilter).toHaveBeenCalledWith("name");
-  });
-
-  it("normalizes legacy datetime values when switching between single-value operators", async () => {
-    const user = userEvent.setup();
-    vi.stubEnv("TZ", "UTC");
-    const control = makeControl({
-      filters: [{ field: "publishedAt", operator: "eq", value: "2025-01-01T10:30:00" }],
-    });
-    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
-      wrapper: timeZoneWrapper,
-    });
-
-    await user.click(screen.getByRole("button", { name: "is" }));
-    await user.click(await screen.findByRole("button", { name: "greater than" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith(
-      "publishedAt",
-      "gt",
-      "2025-01-01T18:30:00.000Z",
-      undefined,
-    );
-  });
-
-  it("normalizes legacy datetime values when switching from single-value to between", async () => {
-    const user = userEvent.setup();
-    vi.stubEnv("TZ", "UTC");
-    const control = makeControl({
-      filters: [{ field: "publishedAt", operator: "eq", value: "2025-01-01T10:30:00" }],
-    });
-    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
-      wrapper: timeZoneWrapper,
-    });
-
-    await user.click(screen.getByRole("button", { name: "is" }));
-    await user.click(await screen.findByRole("button", { name: "is between" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("publishedAt", "between", {
-      min: "2025-01-01T18:30:00.000Z",
-      max: "2025-01-01T18:30:00.000Z",
-    });
-  });
-
-  it("normalizes legacy datetime values when switching from between to single-value", async () => {
-    const user = userEvent.setup();
-    vi.stubEnv("TZ", "UTC");
-    const control = makeControl({
-      filters: [
-        {
-          field: "publishedAt",
-          operator: "between",
-          value: { min: "2025-01-01T10:30:00", max: "2025-01-02T11:30:00" },
-        },
-      ],
-    });
-    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
-      wrapper: timeZoneWrapper,
-    });
-
-    await user.click(screen.getByRole("button", { name: "is between" }));
-    await user.click(await screen.findByRole("button", { name: "less than" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("publishedAt", "lt", "2025-01-01T18:30:00.000Z");
-  });
-});
-
-// ---------------------------------------------------------------------------
-// StringFilterEditor — Apply button and Enter key
-// ---------------------------------------------------------------------------
-
-describe("StringFilterEditor", () => {
-  it("shows an Apply button after opening the chip value popover", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
-  });
-
-  it("Apply button calls addFilter with the updated value and closes the popover", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const input = await screen.findByRole("textbox");
-    await user.clear(input);
-    await user.type(input, "Bob");
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    // The operator comes from the chip's own operator segment (the editor is
-    // rendered with hideOperator), so it stays "contains".
-    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Bob", {
-      caseSensitive: false,
-    });
-  });
-
-  it("Enter key calls addFilter with the updated value", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const input = await screen.findByRole("textbox");
-    await user.clear(input);
-    await user.type(input, "Charlie");
-    await user.keyboard("{Enter}");
-
-    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Charlie", {
-      caseSensitive: false,
-    });
-  });
-
-  it("Apply button calls removeFilter when the value is cleared", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const input = await screen.findByRole("textbox");
-    await user.clear(input);
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.removeFilter).toHaveBeenCalledWith("name");
-  });
-
-  it("shows a Case sensitive checkbox", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    expect(await screen.findByText("Case sensitive")).toBeDefined();
-  });
-
-  it("Apply with case-sensitive checked calls addFilter with caseSensitive option", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "name", operator: "contains", value: "Alice" }],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const checkbox = await screen.findByRole("checkbox");
-    await user.click(checkbox);
-
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("name", "contains", "Alice", {
-      caseSensitive: true,
-    });
-  });
-
-  it("restores case-sensitive state from existing filter", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [
-        {
-          field: "name",
-          operator: "contains",
-          value: "Alice",
-          caseSensitive: true,
-        },
-      ],
-    });
-    render(<TestFilters control={control} columns={[stringColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const checkbox = await screen.findByRole("checkbox");
-    expect((checkbox as HTMLElement).dataset.checked).toBeDefined();
-  });
-});
-
-// ---------------------------------------------------------------------------
-// UuidFilterEditor — Apply button and Enter key
-// ---------------------------------------------------------------------------
-
-describe("UuidFilterEditor", () => {
-  it("shows an Apply button after opening the chip value popover", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "id", operator: "eq", value: "uuid-123" }],
-    });
-    render(<TestFilters control={control} columns={[uuidColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
-  });
-
-  it("Apply button calls addFilter with the updated value", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "id", operator: "eq", value: "uuid-123" }],
-    });
-    render(<TestFilters control={control} columns={[uuidColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const input = await screen.findByRole("textbox");
-    await user.clear(input);
-    await user.type(input, "uuid-456");
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("id", "eq", "uuid-456");
-  });
-
-  it("Enter key calls addFilter with the updated value", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "id", operator: "eq", value: "uuid-123" }],
-    });
-    render(<TestFilters control={control} columns={[uuidColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const input = await screen.findByRole("textbox");
-    await user.clear(input);
-    await user.type(input, "uuid-789");
-    await user.keyboard("{Enter}");
-
-    expect(control.addFilter).toHaveBeenCalledWith("id", "eq", "uuid-789");
-  });
-});
-
-// ---------------------------------------------------------------------------
-// NumericFilterEditor — Apply button and Enter key
-// ---------------------------------------------------------------------------
-
-describe("NumericFilterEditor", () => {
-  it("shows an Apply button after opening the chip value popover", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "count", operator: "eq", value: 42 }],
-    });
-    render(<TestFilters control={control} columns={[numberColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
-  });
-
-  it("Apply button calls addFilter with the updated numeric value", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "count", operator: "eq", value: 42 }],
-    });
-    render(<TestFilters control={control} columns={[numberColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const input = await screen.findByRole("spinbutton");
-    await user.clear(input);
-    await user.type(input, "99");
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("count", "eq", 99);
-  });
-
-  it("Enter key calls addFilter with the updated numeric value", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "count", operator: "eq", value: 42 }],
-    });
-    render(<TestFilters control={control} columns={[numberColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const input = await screen.findByRole("spinbutton");
-    await user.clear(input);
-    await user.type(input, "7");
-    await user.keyboard("{Enter}");
-
-    expect(control.addFilter).toHaveBeenCalledWith("count", "eq", 7);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// Decimal filters — numeric operators with precision-preserving string values
-// ---------------------------------------------------------------------------
-
-describe("Decimal filters", () => {
-  const preciseValue = "9007199254740993.123456789";
-  const preciseMax = "9007199254740993.123456790";
-
-  it.each(["panel", "chip"] as const)(
-    "%s submits scalar decimals as exact strings",
-    async (surface) => {
-      const user = userEvent.setup();
-      const control = makeControl({
-        filters: surface === "chip" ? [{ field: "amount", operator: "eq", value: "1" }] : [],
-      });
-      render(<TestFilters control={control} columns={[decimalColumn]} />, { wrapper });
-
-      if (surface === "panel") await user.click(screen.getByRole("button", { name: "Add filter" }));
-      else await openValueEditor(user);
-
-      const input = await screen.findByPlaceholderText("Enter amount");
-      expect(input.getAttribute("type")).toBe("text");
-      expect(input.getAttribute("inputmode")).toBe("decimal");
-      await user.clear(input);
-      await user.type(input, preciseValue);
-      await user.click(screen.getByRole("button", { name: "Apply" }));
-
-      if (surface === "panel") {
-        expect(control.addFilter).toHaveBeenCalledWith("amount", "eq", preciseValue, undefined);
-      } else {
-        expect(control.addFilter).toHaveBeenCalledWith("amount", "eq", preciseValue);
-      }
-    },
-  );
-
-  it.each(["panel", "chip"] as const)(
-    "%s submits precise ranges and rejects reversed bounds",
-    async (surface) => {
-      const user = userEvent.setup();
-      const control = makeControl({
-        filters:
-          surface === "chip"
-            ? [
-                {
-                  field: "amount",
-                  operator: "between",
-                  value: { min: preciseValue, max: preciseMax },
-                },
-              ]
-            : [],
-      });
-      render(<TestFilters control={control} columns={[decimalColumn]} />, { wrapper });
-
-      if (surface === "panel") {
-        await user.click(screen.getByRole("button", { name: "Add filter" }));
-        await user.click(await screen.findByRole("button", { name: "is between" }));
-      } else {
-        expect(screen.getByText(`${preciseValue} - ${preciseMax}`)).toBeDefined();
-        await openValueEditor(user);
-      }
-
-      const min = await screen.findByRole("textbox", { name: "Min" });
-      const max = screen.getByRole("textbox", { name: "Max" });
-      fireEvent.change(min, { target: { value: "9007199254740993" } });
-      fireEvent.change(max, { target: { value: "9007199254740992" } });
-      expect((screen.getByRole("button", { name: "Apply" }) as HTMLButtonElement).disabled).toBe(
-        true,
-      );
-      expect(screen.getByText(/must be greater than or equal to/i)).toBeDefined();
-      fireEvent.keyDown(max, { key: "Enter" });
-      expect(control.addFilter).not.toHaveBeenCalled();
-
-      fireEvent.change(min, { target: { value: preciseValue } });
-      fireEvent.change(max, { target: { value: preciseMax } });
-      await user.click(screen.getByRole("button", { name: "Apply" }));
-      expect(control.addFilter).toHaveBeenCalledWith("amount", "between", {
-        min: preciseValue,
-        max: preciseMax,
-      });
-    },
-  );
-
-  it("chip editing rejects invalid decimals without clearing the active filter", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "amount", operator: "eq", value: preciseValue }],
-    });
-    render(<TestFilters control={control} columns={[decimalColumn]} />, { wrapper });
-    await openValueEditor(user);
-
-    const input = await screen.findByRole("textbox");
-    fireEvent.change(input, { target: { value: "not-a-decimal" } });
-    expect((screen.getByRole("button", { name: "Apply" }) as HTMLButtonElement).disabled).toBe(
-      true,
-    );
-    fireEvent.keyDown(input, { key: "Enter" });
-    expect(control.addFilter).not.toHaveBeenCalled();
-    expect(control.removeFilter).not.toHaveBeenCalled();
-
-    fireEvent.change(input, { target: { value: "-1.23456789123456789e-100" } });
-    fireEvent.keyDown(input, { key: "Enter" });
-    expect(control.addFilter).toHaveBeenCalledWith("amount", "eq", "-1.23456789123456789e-100");
-  });
-
-  it("operator transitions preserve decimal strings in both directions", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "amount", operator: "eq", value: preciseValue }],
-    });
-    const { rerender } = render(<TestFilters control={control} columns={[decimalColumn]} />, {
-      wrapper,
-    });
-
-    await user.click(screen.getByRole("button", { name: "is" }));
-    await user.click(await screen.findByRole("button", { name: "is between" }));
-    expect(control.addFilter).toHaveBeenCalledWith("amount", "between", {
-      min: preciseValue,
-      max: preciseValue,
-    });
-
-    const rangeControl = makeControl({
-      filters: [
-        { field: "amount", operator: "between", value: { min: preciseValue, max: preciseMax } },
-      ],
-    });
-    rerender(<TestFilters control={rangeControl} columns={[decimalColumn]} />);
-    await user.click(screen.getByRole("button", { name: "is between" }));
-    await user.click(await screen.findByRole("button", { name: "is" }));
-    expect(rangeControl.addFilter).toHaveBeenCalledWith("amount", "eq", preciseValue);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// DateFilterEditor — Apply button
-// ---------------------------------------------------------------------------
-
-describe("DateFilterEditor", () => {
-  it("shows an Apply button after opening the chip value popover", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
-    });
-    render(<TestFilters control={control} columns={[dateColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
-  });
-
-  it("renders a DatePicker (spinbutton segments) for the date filter", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
-    });
-    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
-
-    await openValueEditor(user);
-
-    // The editor uses the app-shell DatePicker: a labelled group of spinbuttons.
-    expect(
-      await within(datePickerGroup(0)).findByRole("spinbutton", { name: "day" }),
-    ).toBeDefined();
-  });
-
-  it("Apply button calls addFilter with the selected date", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
-    });
-    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
-
-    await openValueEditor(user);
-    await screen.findByRole("button", { name: "Apply" });
-
-    await typeDateInto(user, 0, "2026-06-15");
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("createdAt", "eq", "2026-06-15");
-  });
-
-  it("Apply button calls removeFilter when the date is cleared", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
-    });
-    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
-
-    await openValueEditor(user);
-    await screen.findByRole("button", { name: "Apply" });
-
-    await clearDateIn(user, 0);
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.removeFilter).toHaveBeenCalledWith("createdAt");
-  });
-
-  it("labels date operators as exact date / after / before and formats the value", () => {
-    // The chip's operator segment shows the friendly date labels, and the value
-    // segment shows a locale-formatted medium date (never the raw ISO string).
-    const { rerender } = render(
-      <TestFilters
-        control={makeControl({
-          filters: [{ field: "createdAt", operator: "eq", value: "2025-01-01" }],
-        })}
-        columns={[dateColumn]}
-      />,
-      { wrapper },
-    );
-    expect(screen.getByText("exact date")).toBeDefined();
-    expect(screen.getByText("Jan 1, 2025")).toBeDefined();
-    expect(screen.queryByText(/2025-01-01/)).toBeNull();
-
-    rerender(
-      <TestFilters
-        control={makeControl({
-          filters: [{ field: "createdAt", operator: "gte", value: "2025-02-01" }],
-        })}
-        columns={[dateColumn]}
-      />,
-    );
-    expect(screen.getByText("after")).toBeDefined();
-    expect(screen.getByText("Feb 1, 2025")).toBeDefined();
-    expect(screen.queryByText("greater than")).toBeNull();
-
-    rerender(
-      <TestFilters
-        control={makeControl({
-          filters: [{ field: "createdAt", operator: "lte", value: "2025-03-01" }],
-        })}
-        columns={[dateColumn]}
-      />,
-    );
-    expect(screen.getByText("before")).toBeDefined();
-    expect(screen.getByText("Mar 1, 2025")).toBeDefined();
-  });
-
-  it("preserves a legacy operator (e.g. gt) on Apply instead of coercing to eq", async () => {
-    const user = userEvent.setup();
-    // A saved view / useCollectionVariables config can hold a date filter on the
-    // now-dropped `gt` operator. Opening + re-applying it must NOT silently flip
-    // it to `eq` (which would turn "after X" into "on X").
-    const control = makeControl({
-      filters: [{ field: "createdAt", operator: "gt", value: "2025-01-01" }],
-    });
-    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
-
-    // The chip's operator segment still renders the legacy operator's (generic) label.
-    expect(screen.getByText("greater than")).toBeDefined();
-
-    // Open the value editor (operator hidden there) and Apply without touching
-    // anything → the operator is preserved.
-    await openValueEditor(user);
-    await screen.findByRole("button", { name: "Apply" });
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("createdAt", "gt", "2025-01-01");
-    expect(control.addFilter).not.toHaveBeenCalledWith("createdAt", "eq", expect.anything());
-  });
-});
-
-// ---------------------------------------------------------------------------
-// TemporalFilterEditor — datetime/time inputs preserve backend formats
-// ---------------------------------------------------------------------------
-
-describe("TemporalFilterEditor", () => {
-  it("hydrates the date picker + time box from an RFC 3339 datetime", async () => {
-    const user = userEvent.setup();
-    vi.stubEnv("TZ", "UTC");
-    const value = "2025-01-01T10:30:00Z";
-    const control = makeControl({
-      filters: [{ field: "publishedAt", operator: "eq", value }],
-    });
-    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
-      wrapper: timeZoneWrapper,
-    });
-
-    await openValueEditor(user);
-
-    // Date part is a segmented picker (a group), time part a native time box
-    // seeded from the RFC 3339 instant in the configured AppShell timezone.
-    expect(await screen.findByRole("group")).toBeDefined();
-    expect(screen.getByDisplayValue("02:30")).toBeDefined();
-  });
-
-  it("serializes the selected local datetime as an RFC 3339 instant on Apply", async () => {
-    const user = userEvent.setup();
-    vi.stubEnv("TZ", "UTC");
-    const control = makeControl({
-      filters: [{ field: "publishedAt", operator: "eq", value: "2025-01-01T10:30:00" }],
-    });
-    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
-      wrapper: timeZoneWrapper,
-    });
-
-    await openValueEditor(user);
-
-    fireEvent.change(await screen.findByDisplayValue("10:30"), { target: { value: "08:45" } });
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("publishedAt", "eq", "2025-01-01T16:45:00.000Z");
-  });
-
-  it("serializes both datetime between bounds as RFC 3339 instants", async () => {
-    const user = userEvent.setup();
-    vi.stubEnv("TZ", "UTC");
-    const control = makeControl({
-      filters: [
-        {
-          field: "publishedAt",
-          operator: "between",
-          value: { min: "2025-01-01T10:30:00", max: "2025-01-02T11:30:00" },
-        },
-      ],
-    });
-    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
-      wrapper: timeZoneWrapper,
-    });
-
-    await openValueEditor(user);
-
-    fireEvent.change(await screen.findByDisplayValue("10:30"), { target: { value: "08:45" } });
-    fireEvent.change(screen.getByDisplayValue("11:30"), { target: { value: "09:15" } });
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("publishedAt", "between", {
-      min: "2025-01-01T16:45:00.000Z",
-      max: "2025-01-02T17:15:00.000Z",
-    });
-  });
-
-  it("formats datetime chip values in the configured AppShell timezone", () => {
-    vi.stubEnv("TZ", "UTC");
-    const expected = new Intl.DateTimeFormat("en", {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-      timeZone: "America/Los_Angeles",
-    }).format(new Date("2025-01-01T10:30:00Z"));
-    const control = makeControl({
-      filters: [{ field: "publishedAt", operator: "eq", value: "2025-01-01T10:30:00Z" }],
-    });
-    render(<TestFilters control={control} columns={[datetimeColumn]} />, {
-      wrapper: timeZoneWrapper,
-    });
-
-    expect(screen.getByText(expected)).toBeDefined();
-  });
-  it("Apply button calls addFilter with an HH:MM time", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "opensAt", operator: "eq", value: "09:30" }],
-    });
-    render(<TestFilters control={control} columns={[timeColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const input = await screen.findByDisplayValue("09:30");
-    await user.clear(input);
-    await user.type(input, "18:45");
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("opensAt", "eq", "18:45");
-  });
-});
-
-// ---------------------------------------------------------------------------
-// EnumFilterEditor — immediate update on checkbox toggle
-// ---------------------------------------------------------------------------
-
-describe("EnumFilterEditor", () => {
-  it("shows the operator segment as 'is any of' and summarizes multiple selections", () => {
-    const control = makeControl({
-      filters: [{ field: "status", operator: "in", value: ["active", "inactive"] }],
-    });
-    render(<TestFilters control={control} columns={[enumColumn]} />, { wrapper });
-
-    // enum has a single operator, so it renders as plain text, not a button.
-    expect(screen.getByText("is any of")).toBeDefined();
-    // >1 option selected is summarized as "N <label>(s)".
-    expect(screen.getByText("2 Status(s)")).toBeDefined();
-  });
-
-  it("toggling a checkbox calls addFilter immediately without an Apply button", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "status", operator: "in", value: ["active"] }],
-    });
-    render(<TestFilters control={control} columns={[enumColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    // Click the "Inactive" option (only appears in the opened value list).
-    await user.click(await screen.findByText("Inactive"));
-
-    expect(control.addFilter).toHaveBeenCalledWith("status", "in", ["active", "inactive"]);
-    // No Apply button for enum
-    expect(screen.queryByRole("button", { name: "Apply" })).toBeNull();
-  });
-
-  it("unchecking the only selected option calls removeFilter", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "status", operator: "in", value: ["active"] }],
-    });
-    render(<TestFilters control={control} columns={[enumColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    // Wait for the value list to open, then uncheck "Active" from within it.
-    // ("Active" also appears in the chip's value segment, so scope to the list.)
-    await screen.findByText("Inactive");
-    const list = document.querySelector('[data-slot="data-table-filter-enum"]') as HTMLElement;
-    await user.click(within(list).getByText("Active"));
-
-    expect(control.removeFilter).toHaveBeenCalledWith("status");
-  });
-});
-
-// ---------------------------------------------------------------------------
-// BooleanFilterEditor — value select + Apply button (operator lives on the chip)
-// ---------------------------------------------------------------------------
-
-describe("BooleanFilterEditor", () => {
-  it("shows an Apply button after opening the chip value popover", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "enabled", operator: "eq", value: true }],
-    });
-    render(<TestFilters control={control} columns={[booleanColumn]} />, {
-      wrapper,
-    });
-
-    // Operator segment reflects the "is" (eq) operator; value segment shows "True".
-    expect(screen.getByText("is")).toBeDefined();
-    expect(screen.getByText("True")).toBeDefined();
-
-    await openValueEditor(user);
-
-    expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
-  });
-
-  it("does not call addFilter immediately on open", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "enabled", operator: "eq", value: true }],
-    });
-    render(<TestFilters control={control} columns={[booleanColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-    await screen.findByRole("button", { name: "Apply" });
-
-    expect(control.addFilter).not.toHaveBeenCalled();
-  });
-
-  it("Apply button calls addFilter with the current value", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "enabled", operator: "eq", value: true }],
-    });
-    render(<TestFilters control={control} columns={[booleanColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-    await user.click(await screen.findByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("enabled", "eq", true);
-  });
-
-  it("Apply button calls addFilter with false when value is false", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "enabled", operator: "eq", value: false }],
-    });
-    render(<TestFilters control={control} columns={[booleanColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-    await user.click(await screen.findByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("enabled", "eq", false);
-  });
-
-  it("Apply button calls addFilter with ne operator when filter has ne", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "enabled", operator: "ne", value: true }],
-    });
-    render(<TestFilters control={control} columns={[booleanColumn]} />, {
-      wrapper,
-    });
-
-    // Operator segment reflects "is not" (ne); the hidden editor operator is
-    // seeded from the filter's operator, so Apply preserves ne.
-    expect(screen.getByText("is not")).toBeDefined();
-
-    await openValueEditor(user);
-    await user.click(await screen.findByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("enabled", "ne", true);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// NumericFilterEditor — between operator (two inputs)
-// ---------------------------------------------------------------------------
-
-describe("NumericFilterEditor (between)", () => {
-  it("shows the between value summary and two number inputs when operator is between", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "count", operator: "between", value: { min: 10, max: 50 } }],
-    });
-    render(<TestFilters control={control} columns={[numberColumn]} />, {
-      wrapper,
-    });
-
-    // Chip: operator segment "is between", value segment "10 - 50".
-    expect(screen.getByText("is between")).toBeDefined();
-    expect(screen.getByText("10 - 50")).toBeDefined();
-
-    await openValueEditor(user);
-
-    const inputs = await screen.findAllByRole("spinbutton");
-    expect(inputs.length).toBe(2);
-    expect((inputs[0] as HTMLInputElement).value).toBe("10");
-    expect((inputs[1] as HTMLInputElement).value).toBe("50");
-  });
-
-  it("Apply button calls addFilter with min/max range object", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "count", operator: "between", value: { min: 10, max: 50 } }],
-    });
-    render(<TestFilters control={control} columns={[numberColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const inputs = await screen.findAllByRole("spinbutton");
-    await user.clear(inputs[0]);
-    await user.type(inputs[0], "5");
-    await user.clear(inputs[1]);
-    await user.type(inputs[1], "100");
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("count", "between", {
-      min: 5,
-      max: 100,
-    });
-  });
-
-  it("Apply button does not call addFilter when only min is set and max is empty", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "count", operator: "between", value: { min: 10 } }],
-    });
-    render(<TestFilters control={control} columns={[numberColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const inputs = await screen.findAllByRole("spinbutton");
-    // min should already be "10", max should be empty
-    expect((inputs[0] as HTMLInputElement).value).toBe("10");
-    expect((inputs[1] as HTMLInputElement).value).toBe("");
-
-    // A half-filled range is invalid, so Apply is disabled and commits nothing.
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).not.toHaveBeenCalled();
-  });
-
-  it("Apply button calls removeFilter when both inputs are empty", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [{ field: "count", operator: "between", value: { min: 10, max: 50 } }],
-    });
-    render(<TestFilters control={control} columns={[numberColumn]} />, {
-      wrapper,
-    });
-
-    await openValueEditor(user);
-
-    const inputs = await screen.findAllByRole("spinbutton");
-    await user.clear(inputs[0]);
-    await user.clear(inputs[1]);
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.removeFilter).toHaveBeenCalledWith("count");
-  });
-});
-
-// ---------------------------------------------------------------------------
-// TemporalFilterEditor — between operator (two inputs)
-// ---------------------------------------------------------------------------
-
-describe("TemporalFilterEditor (between)", () => {
-  it("shows a date range value (en dash, medium dates) and two date pickers", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [
-        {
-          field: "createdAt",
-          operator: "between",
-          value: { min: "2025-01-01", max: "2025-12-31" },
-        },
-      ],
-    });
-    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
-
-    // The value segment renders "<min> – <max>" using medium dates (en dash).
-    expect(
-      screen.getByText(
-        (content) => content.includes("Jan 1, 2025") && content.includes("Dec 31, 2025"),
-      ),
-    ).toBeDefined();
-
-    await openValueEditor(user);
-
-    await screen.findByRole("button", { name: "Apply" });
-    expect(screen.getAllByRole("group")).toHaveLength(2);
-  });
-
-  it("Apply button calls addFilter with min/max range for date between", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [
-        {
-          field: "createdAt",
-          operator: "between",
-          value: { min: "2025-01-01", max: "2025-12-31" },
-        },
-      ],
-    });
-    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
-
-    await openValueEditor(user);
-    await screen.findByRole("button", { name: "Apply" });
-
-    await typeDateInto(user, 0, "2026-03-01");
-    await typeDateInto(user, 1, "2026-06-30");
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.addFilter).toHaveBeenCalledWith("createdAt", "between", {
-      min: "2026-03-01",
-      max: "2026-06-30",
-    });
-  });
-
-  it("Apply button calls removeFilter when both date pickers are cleared", async () => {
-    const user = userEvent.setup();
-    const control = makeControl({
-      filters: [
-        {
-          field: "createdAt",
-          operator: "between",
-          value: { min: "2025-01-01", max: "2025-12-31" },
-        },
-      ],
-    });
-    render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
-
-    await openValueEditor(user);
-    await screen.findByRole("button", { name: "Apply" });
-
-    await clearDateIn(user, 0);
-    await clearDateIn(user, 1);
-    await user.click(screen.getByRole("button", { name: "Apply" }));
-
-    expect(control.removeFilter).toHaveBeenCalledWith("createdAt");
-  });
-});
diff --git a/packages/core/src/components/data-table/toolbar.tsx b/packages/core/src/components/data-table/toolbar.tsx
index 5fe14c77..1eb227a5 100644
--- a/packages/core/src/components/data-table/toolbar.tsx
+++ b/packages/core/src/components/data-table/toolbar.tsx
@@ -1,37 +1,6 @@
-import { useCallback, useMemo, useState, type ReactNode } from "react";
-import { Popover } from "@base-ui/react/popover";
-import { ChevronDown, Filter as FilterIcon, X, Check, Search } from "lucide-react";
+import type { ReactNode } from "react";
 import { cn } from "@/lib/utils";
-import { isComposing } from "@/lib/is-composing";
-import { useCollectionControlOptional } from "@/contexts/collection-control-context";
-import { Button } from "@/components/button";
-import { Input } from "@/components/input";
-import { Checkbox } from "@/components/checkbox";
-import { Select } from "@/components/select";
-import { DatePicker } from "@/components/date-field";
-import { Calendar } from "@/components/calendar";
-import { Tooltip } from "@/components/tooltip";
-import { parseDate, DateFormatter } from "@internationalized/date";
-import { useResolvedLocale, useTimeZone } from "@/contexts/appshell-context";
 import { DataTableColumnSettings } from "./column-settings";
-import { useDataTableContext } from "./data-table-context";
-import {
-  isTemporalFilterType,
-  isTemporalFilterValueValid,
-  localDateTimeParts,
-  normalizeTemporalFilterValue,
-} from "@/lib/temporal-filter-values";
-import { isDecimalFilterValueValid, isDecimalRangeOrdered } from "./filter-value-utils";
-import { useDataTableT } from "./i18n";
-import type {
-  CollectionControl,
-  Filter,
-  FilterConfig,
-  FilterOperator,
-  SelectOption,
-} from "@/types/collection";
-import type { Column, DataTableFilterConfig } from "./types";
-import { Text } from "../text";
 
 // =============================================================================
 // DataTable.Toolbar
@@ -68,2410 +37,7 @@ function DataTableToolbar({
     </div>
   );
 }
-DataTableToolbar.displayName = "DataTable.Toolbar";
-
-// =============================================================================
-// DataTable.Filters
-// =============================================================================
-
-/** Default operator per filter type used when adding a new filter chip. */
-const DEFAULT_OPERATOR: Record<FilterConfig["type"], FilterOperator> = {
-  enum: "in",
-  boolean: "eq",
-  string: "contains",
-  number: "eq",
-  decimal: "eq",
-  datetime: "eq",
-  date: "eq",
-  time: "eq",
-  uuid: "eq",
-};
-
-/** Number/temporal operators available in the operator selector. */
-const NUMERIC_TEMPORAL_OPERATORS = ["eq", "ne", "gt", "gte", "lt", "lte", "between"] as const;
-type NumericTemporalOperator = (typeof NUMERIC_TEMPORAL_OPERATORS)[number];
-
-// Date filters use a slimmer, friendlier operator set: an exact date, inclusive
-// "after"/"before" (gte/lte), and a between range. No gt/lt/ne.
-const DATE_OPERATORS = ["eq", "gte", "lte", "between"] as const;
-
-/** Operators offered for a temporal editor, narrowed for `date` columns. */
-function temporalOperatorsFor(type: FilterConfig["type"]): readonly NumericTemporalOperator[] {
-  return type === "date" ? DATE_OPERATORS : NUMERIC_TEMPORAL_OPERATORS;
-}
-
-/**
- * Operator options + initial selection for a numeric/temporal editor.
- *
- * A saved view or `useCollectionVariables` config can hold a filter whose
- * operator is no longer in the standard set — most importantly a `date` filter
- * on the now-dropped `gt`/`lt`/`ne` (the pre-narrowing operator set). In that
- * case we keep the incoming operator as a selectable, preselected option rather
- * than resetting to `eq`, so opening the editor and hitting Apply never silently
- * rewrites the filter's operator (e.g. "after X" → "on X"). A truly unknown
- * operator falls back to `eq`.
- */
-function resolveTemporalOperator(
-  standard: readonly NumericTemporalOperator[],
-  current: FilterOperator,
-): { items: readonly NumericTemporalOperator[]; initial: NumericTemporalOperator } {
-  if (standard.includes(current as NumericTemporalOperator)) {
-    return { items: standard, initial: current as NumericTemporalOperator };
-  }
-  if ((NUMERIC_TEMPORAL_OPERATORS as readonly string[]).includes(current)) {
-    return {
-      items: [...standard, current as NumericTemporalOperator],
-      initial: current as NumericTemporalOperator,
-    };
-  }
-  return { items: standard, initial: standard[0] ?? "eq" };
-}
-
-/** String operators available in the operator selector. */
-const STRING_OPERATORS = ["eq", "ne", "contains", "notContains", "hasPrefix", "hasSuffix"] as const;
-type StringOperator = (typeof STRING_OPERATORS)[number];
-type FilterableColumn = Column<Record<string, unknown>> & {
-  filter: DataTableFilterConfig;
-};
-type AddFilterDraftValue = string | string[];
-
-function getDefaultFilterOperators(type: FilterConfig["type"]): FilterOperator[] {
-  switch (type) {
-    case "string":
-      return [...STRING_OPERATORS];
-    case "date":
-      return [...DATE_OPERATORS];
-    case "number":
-    case "decimal":
-    case "datetime":
-    case "time":
-      return [...NUMERIC_TEMPORAL_OPERATORS];
-    case "enum":
-      return ["in"];
-    case "boolean":
-      return [...BOOLEAN_OPERATORS];
-    case "uuid":
-      return ["eq"];
-  }
-}
-
-function isUiOperatorAllowedForType(type: FilterConfig["type"], operator: FilterOperator): boolean {
-  switch (type) {
-    case "string":
-      return (STRING_OPERATORS as readonly string[]).includes(operator);
-    case "date":
-      return (DATE_OPERATORS as readonly string[]).includes(operator);
-    case "number":
-    case "decimal":
-    case "datetime":
-    case "time":
-      return (NUMERIC_TEMPORAL_OPERATORS as readonly string[]).includes(operator);
-    case "enum":
-      return operator === "in";
-    case "boolean":
-      return (BOOLEAN_OPERATORS as readonly string[]).includes(operator);
-    case "uuid":
-      return operator === "eq";
-  }
-}
-
-function getConfiguredFilterOperators(config: DataTableFilterConfig): FilterOperator[] | undefined {
-  const configured = config.operators as readonly FilterOperator[] | undefined;
-  if (!configured) return undefined;
-
-  const defaults = getDefaultFilterOperators(config.type);
-  const operators = configured.filter(
-    (operator, index) => defaults.includes(operator) && configured.indexOf(operator) === index,
-  );
-  return operators.length > 0 ? [...operators] : [DEFAULT_OPERATOR[config.type]];
-}
-
-export function getVisibleFilterOperators(
-  config: DataTableFilterConfig,
-  current?: FilterOperator,
-): FilterOperator[] {
-  const operators = getConfiguredFilterOperators(config) ?? getDefaultFilterOperators(config.type);
-  if (current && !operators.includes(current) && isUiOperatorAllowedForType(config.type, current)) {
-    return [...operators, current];
-  }
-  return operators;
-}
-
-function getDefaultFilterOperator(config: DataTableFilterConfig): FilterOperator {
-  return getConfiguredFilterOperators(config)?.[0] ?? DEFAULT_OPERATOR[config.type];
-}
-
-/** Use `DataTable.Filters` instead of calling this directly. */
-function DataTableFilters({
-  className,
-  slot = "all",
-  addIconOnly = true,
-}: {
-  className?: string;
-  /**
-   * Which part to render, for custom toolbar layouts:
-   * - `"all"` (default) — active filter chips plus the **Add filter** trigger.
-   * - `"chips"` — only the active filter chips (renders nothing when there are none).
-   * - `"add"` — only the **Add filter** trigger.
-   *
-   * Render `"add"` and `"chips"` separately to place the trigger and the chips on
-   * different rows (e.g. the trigger in a header row, chips on the row below).
-   */
-  slot?: "all" | "chips" | "add";
-  /**
-   * Render the **Add filter** trigger as an icon-only button (label → `aria-label`).
-   * Defaults to `true`; pass `addIconOnly={false}` to show the "Add filter" text label.
-   */
-  addIconOnly?: boolean;
-}) {
-  const ctx = useDataTableContext();
-  const control = useCollectionControlOptional();
-  if (!control) {
-    throw new Error(
-      "<DataTable.Filters> requires collection control. Pass `control` from `useCollectionVariables()` to `useDataTable()`.",
-    );
-  }
-
-  // Collect all columns that have a filter config
-  const filterableColumns = useMemo(
-    () => ctx.columns.filter((col): col is FilterableColumn => !!col.filter),
-    [ctx.columns],
-  );
-
-  if (filterableColumns.length === 0) return null;
-
-  const chips = filterableColumns
-    .map((col) => {
-      const active = control.filters.find((f) => f.field === col.filter.field);
-      return active ? (
-        <FilterChip key={col.filter.field} column={col} filter={active} control={control} />
-      ) : null;
-    })
-    .filter(Boolean);
-
-  // The Add filter trigger only. Wrapped in a shrink-to-content box so the button
-  // keeps its natural width instead of stretching to fill a column-flex toolbar
-  // (DataTable.Toolbar is `flex-col`, which stretches its children by default).
-  if (slot === "add") {
-    return (
-      <div className={cn("astw:w-fit", className)}>
-        <AddFilterPanel columns={filterableColumns} control={control} iconOnly={addIconOnly} />
-      </div>
-    );
-  }
-
-  // Active chips only — nothing when there are no active filters.
-  if (slot === "chips") {
-    if (chips.length === 0) return null;
-    return (
-      <div
-        data-slot="data-table-filters"
-        className={cn("astw:flex astw:flex-wrap astw:items-center astw:gap-2", className)}
-      >
-        {chips}
-      </div>
-    );
-  }
-
-  // Default: the left-aligned Add filter trigger + chips (grow to fill) to its right.
-  return (
-    <div
-      data-slot="data-table-filters"
-      className={cn("astw:flex astw:items-start astw:gap-2", className)}
-    >
-      {/* Trigger comes first so it stays pinned left and doesn't shift as chips are
-          added — the chips grow to its right inside their own flex-1 container. */}
-      <AddFilterPanel columns={filterableColumns} control={control} iconOnly={addIconOnly} />
-      <div className="astw:flex astw:flex-1 astw:flex-wrap astw:items-center astw:gap-2">
-        {chips}
-      </div>
-    </div>
-  );
-}
-DataTableFilters.displayName = "DataTable.Filters";
-
-// =============================================================================
-// AddFilterPanel — the add-filter surface: one popover with three columns
-// (field ▸ condition ▸ value). The condition column appears for fields with
-// more than one operator. Values are drafted and committed with an Apply button
-// (the panel stays open so several filters can be added in a row).
-// =============================================================================
-
-const PANEL_COLUMN_ROW = cn(
-  "astw:flex astw:w-full astw:items-center astw:gap-2 astw:rounded-sm astw:px-2 astw:py-1.5",
-  "astw:text-left astw:text-body-md astw:outline-hidden astw:cursor-default astw:transition-colors",
-);
-// Distinct row states: hover is a subtle muted tint; selection is the solid accent
-// (+ bold). Applied exclusively — hover is only added when the row isn't selected —
-// so hovering the selected row doesn't repaint it and the two never look alike.
-const PANEL_ROW_HOVER = "astw:hover:bg-muted astw:focus-visible:bg-muted";
-const PANEL_ROW_SELECTED = "astw:bg-accent astw:font-semibold astw:text-accent-foreground";
-
-/**
- * Seed the add-panel's operator for a field: reuse an active filter's operator
- * when it's valid for the field type, so re-opening an already-filtered field
- * shows its current condition (and lets the value editor prefill) instead of
- * resetting to the default — which on Apply could silently overwrite the filter.
- * Falls back to the type default when there's no active filter.
- */
-function seedPanelOperator(
-  control: CollectionControl,
-  col: FilterableColumn | undefined,
-): FilterOperator {
-  if (!col) return "eq";
-  const active = control.filters.find((f) => f.field === col.filter.field);
-  const operators = getVisibleFilterOperators(col.filter, active?.operator);
-  if (active && operators.includes(active.operator)) return active.operator;
-  return getDefaultFilterOperator(col.filter);
-}
-
-function AddFilterPanel({
-  columns,
-  control,
-  iconOnly = false,
-}: {
-  columns: FilterableColumn[];
-  control: CollectionControl;
-  /** Render the trigger as an icon-only button (label kept as `aria-label`). */
-  iconOnly?: boolean;
-}) {
-  const t = useDataTableT();
-  const [open, setOpen] = useState(false);
-  const [fieldName, setFieldName] = useState<string>(columns[0]?.filter.field ?? "");
-  // Field search: enterprise tables can have many filterable fields, so the
-  // panel always offers a search box over the field list.
-  const [fieldQuery, setFieldQuery] = useState("");
-  const fq = fieldQuery.trim().toLowerCase();
-  const visibleFieldColumns = fq
-    ? columns.filter((c) => (c.label ?? c.filter.field).toLowerCase().includes(fq))
-    : columns;
-
-  const selectedColumn = columns.find((c) => c.filter.field === fieldName) ?? columns[0];
-  const config = selectedColumn?.filter;
-  const activeFilter = control.filters.find((f) => f.field === fieldName);
-  const operators = config ? getVisibleFilterOperators(config, activeFilter?.operator) : [];
-  // Show the condition column for any field that has more than one operator
-  // (single-operator types like enum/uuid go straight field ▸ value).
-  const showConditions = operators.length > 1;
-
-  const [operator, setOperator] = useState<FilterOperator>(() =>
-    seedPanelOperator(control, selectedColumn),
-  );
-
-  const selectField = (name: string) => {
-    setFieldName(name);
-    const col = columns.find((c) => c.filter.field === name);
-    if (col) setOperator(seedPanelOperator(control, col));
-  };
-
-  const handleFieldQueryChange = (value: string) => {
-    setFieldQuery(value);
-
-    const nextQuery = value.trim().toLowerCase();
-    if (!nextQuery) return;
-
-    const nextVisible = columns.filter((c) =>
-      (c.label ?? c.filter.field).toLowerCase().includes(nextQuery),
-    );
-    if (nextVisible.length === 0) return;
-    if (nextVisible.some((c) => c.filter.field === fieldName)) return;
-
-    const first = nextVisible[0];
-    setFieldName(first.filter.field);
-    setOperator(seedPanelOperator(control, first));
-  };
-
-  // Always reopen on the first field rather than wherever the user last was.
-  const handleOpenChange = (next: boolean) => {
-    setOpen(next);
-    if (next) {
-      setFieldQuery("");
-      selectField(columns[0]?.filter.field ?? "");
-    }
-  };
-
-  const activeFields = new Set(control.filters.map((f) => f.field));
-  let effectiveOperator: FilterOperator | undefined;
-  if (config) {
-    effectiveOperator = showConditions ? operator : getDefaultFilterOperator(config);
-  }
-
-  return (
-    <Popover.Root open={open} onOpenChange={handleOpenChange}>
-      <Popover.Trigger
-        render={
-          <Button variant="outline" size="xs" aria-label={iconOnly ? t("addFilter") : undefined}>
-            {/* Icon-only reads better a touch larger (matching icon-button convention);
-                inline-with-label stays smaller so it sits neatly beside the text. */}
-            <FilterIcon className={iconOnly ? "astw:size-3.5" : "astw:size-3"} />
-            {!iconOnly && t("addFilter")}
-          </Button>
-        }
-      />
-      <Popover.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
-        {/* align="start" anchors the panel's left edge to the (left-aligned) trigger
-            so it grows/shrinks toward the right as columns appear/disappear. We keep
-            anchor tracking on (no disableAnchorTracking) so the positioner re-aligns
-            the left edge when the width changes; the trigger itself no longer moves
-            when chips are added (they live in a separate flex-1 container), so there's
-            nothing to jump away from. base-ui still shifts the panel to stay on-screen. */}
-        <Popover.Positioner sideOffset={4} side="bottom" align="start">
-          <Popover.Popup
-            data-slot="data-table-filter-panel"
-            className={cn(
-              // The panel hugs its columns (no fixed width): column 1 hugs the field
-              // names (up to a cap), column 2 (conditions) is fixed, and column 3 (the
-              // value editor) is a fixed 260px. So a wider field column grows the panel
-              // rightward (it's anchored left) instead of squeezing the value editor.
-              // Fixed height fits the tallest editor (datetime range: From/To tabs +
-              // calendar + "Choose time").
-              "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:flex astw:h-[28rem] astw:items-stretch astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md",
-              "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
-            )}
-          >
-            {/* Column 1 — fields (scrolls), with a search header and a sticky
-                "Clear all" footer. Hugs the field-name width up to a cap so long
-                names aren't needlessly truncated. */}
-            <div className="astw:flex astw:min-w-44 astw:max-w-[22.5rem] astw:flex-col astw:p-1">
-              {/* Field search — spacing/style mirrors the ColumnSettings search. */}
-              <div className="astw:relative astw:mb-1">
-                <Search className="astw:pointer-events-none astw:absolute astw:top-1/2 astw:left-2.5 astw:size-3.5 astw:-translate-y-1/2 astw:text-muted-foreground" />
-                <Input
-                  type="search"
-                  value={fieldQuery}
-                  onChange={(e) => handleFieldQueryChange(e.target.value)}
-                  placeholder={t("searchFields")}
-                  aria-label={t("searchFields")}
-                  className="astw:h-8 astw:pl-8 astw:text-body-md"
-                />
-              </div>
-              <div className="astw:flex-1 astw:overflow-y-auto">
-                {visibleFieldColumns.length === 0 ? (
-                  <div className="astw:px-2 astw:py-3 astw:text-center astw:text-body-sm astw:text-muted-foreground">
-                    {t("noFieldsMatch")}
-                  </div>
-                ) : (
-                  visibleFieldColumns.map((col) => {
-                    const isSelected = col.filter.field === fieldName;
-                    return (
-                      <button
-                        key={col.filter.field}
-                        type="button"
-                        onClick={() => selectField(col.filter.field)}
-                        title={col.label ?? col.filter.field}
-                        className={cn(
-                          PANEL_COLUMN_ROW,
-                          isSelected ? PANEL_ROW_SELECTED : PANEL_ROW_HOVER,
-                        )}
-                      >
-                        <span className="astw:min-w-0 astw:flex-1 astw:truncate">
-                          {col.label ?? col.filter.field}
-                        </span>
-                        {activeFields.has(col.filter.field) && (
-                          <span className="astw:ml-auto astw:size-1.5 astw:shrink-0 astw:rounded-full astw:bg-primary" />
-                        )}
-                      </button>
-                    );
-                  })
-                )}
-              </div>
-              {control.filters.length > 0 && (
-                <div className="astw:mt-1 astw:border-t astw:border-border astw:pt-1">
-                  <Button
-                    variant="ghost"
-                    size="xs"
-                    onClick={() => control.clearFilters()}
-                    className="astw:w-full astw:justify-start astw:text-muted-foreground"
-                  >
-                    {t("clearAllFilters")}
-                  </Button>
-                </div>
-              )}
-            </div>
-
-            {/* Column 2 — conditions (only when the field opts into choosing one) */}
-            {showConditions && config && (
-              <div className="astw:flex astw:w-48 astw:flex-col astw:overflow-y-auto astw:border-l astw:border-border astw:p-1">
-                {operators.map((op) => (
-                  <button
-                    key={op}
-                    type="button"
-                    onClick={() => setOperator(op)}
-                    className={cn(
-                      PANEL_COLUMN_ROW,
-                      op === operator ? PANEL_ROW_SELECTED : PANEL_ROW_HOVER,
-                    )}
-                  >
-                    <span className="astw:truncate">{getOperatorLabel(op, t, config.type)}</span>
-                    {op === operator && (
-                      <Check className="astw:ml-auto astw:size-3.5 astw:shrink-0" />
-                    )}
-                  </button>
-                ))}
-              </div>
-            )}
-
-            {/* Column 3 — value editor; fixed width so it never shrinks when column 1
-                (fields) grows wider. */}
-            <div className="astw:flex astw:w-[260px] astw:min-w-0 astw:flex-col astw:border-l astw:border-border">
-              {selectedColumn && effectiveOperator && (
-                <PanelValueEditor
-                  key={`${fieldName}:${effectiveOperator}`}
-                  column={selectedColumn}
-                  operator={effectiveOperator}
-                  filter={activeFilter}
-                  control={control}
-                />
-              )}
-            </div>
-          </Popover.Popup>
-        </Popover.Positioner>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-}
-AddFilterPanel.displayName = "DataTable.AddFilterPanel";
-
-/**
- * Inline calendar for the panel's single-date editor — our `Calendar` rendered
- * directly in the value column (no popover to nest inside the panel). The
- * pointer-down guard stops the panel's outside-press dismissal from firing when
- * a day cell re-renders on selection.
- */
-function PanelDateInput({
-  ariaLabel,
-  value,
-  onChange,
-}: {
-  ariaLabel: string;
-  value: string;
-  onChange: (value: string) => void;
-}) {
-  const calValue = /^\d{4}-\d{2}-\d{2}$/.test(value) ? parseDate(value) : null;
-  return (
-    // Center the fixed-width (w-fit) calendar within the wider value column.
-    <div
-      className="astw:flex astw:justify-center"
-      onPointerDownCapture={(e) => e.stopPropagation()}
-      onMouseDownCapture={(e) => e.stopPropagation()}
-    >
-      <Calendar
-        aria-label={ariaLabel}
-        value={calValue}
-        onChange={(v) => onChange(v ? v.toString() : "")}
-      />
-    </div>
-  );
-}
-
-// -----------------------------------------------------------------------------
-// TODO(app-shell): replace the temporal filter editors below with dedicated
-// pickers once app-shell ships them:
-//   - `time`     → a proper TimePicker (currently a native <input type="time">).
-//   - `datetime` → a DateTimePicker (currently a date `DatePicker` + a native
-//                  time box, combined into an ISO string — see PanelDateTimeInput
-//                  and DateTimeFilterInput).
-//   - `datetime`/`date` "between" → a DateRangePicker / DateTimeRangePicker
-//                  (currently one inline calendar with From/To tabs, see
-//                  PanelDateRangeInput; the chip editor uses two From/To fields).
-// These stopgaps intentionally emit the same ISO value shapes, so each swap is
-// UI-only — no change to the committed filter values.
-// -----------------------------------------------------------------------------
-
-/**
- * Single-datetime editor for the panel: the inline `Calendar` up front with a
- * labelled time picker beneath it, bridging an RFC 3339 instant. (The chip and
- * the "between" range keep the compact date-picker + time box to stay short.)
- */
-function PanelDateTimeInput({
-  ariaLabel,
-  value,
-  onChange,
-}: {
-  ariaLabel: string;
-  value: string;
-  onChange: (value: string) => void;
-}) {
-  const t = useDataTableT();
-  const shellTz = useTimeZone();
-  const { date: datePart, time: timePart } = localDateTimeParts(value, shellTz.value);
-  const calValue = datePart ? parseDate(datePart) : null;
-  const emit = (nextDate: string, nextTime: string) => {
-    onChange(
-      nextDate
-        ? (normalizeTemporalFilterValue(
-            "datetime",
-            `${nextDate}T${nextTime || "00:00"}:00`,
-            shellTz.value,
-          ) ?? "")
-        : "",
-    );
-  };
-  return (
-    <div className="astw:flex astw:flex-col astw:gap-3">
-      <div
-        className="astw:flex astw:justify-center"
-        onPointerDownCapture={(e) => e.stopPropagation()}
-        onMouseDownCapture={(e) => e.stopPropagation()}
-      >
-        <Calendar
-          aria-label={ariaLabel}
-          value={calValue}
-          onChange={(v) => emit(v ? v.toString() : "", timePart)}
-        />
-      </div>
-      <div className="astw:flex astw:flex-col astw:gap-1">
-        <Text variant="body-sm" className="astw:text-muted-foreground" render={<span />}>
-          {t("chooseTime")}
-        </Text>
-        <Input
-          type="time"
-          aria-label={`${ariaLabel} (${t("chooseTime")})`}
-          value={timePart}
-          onChange={(e) => emit(datePart, e.target.value)}
-          className="astw:h-8 astw:text-body-md"
-        />
-      </div>
-    </div>
-  );
-}
-
-/**
- * Range editor for date / datetime "between" in the panel: one inline calendar
- * (reusing the single-value editors) with a From/To tab bar on top. Picking a
- * bound edits whichever tab is active; each tab shows its current value. Keeps
- * the range on a single calendar instead of two stacked fields.
- */
-function PanelDateRangeInput({
-  label,
-  min,
-  max,
-  onChangeMin,
-  onChangeMax,
-  withTime = false,
-}: {
-  label: string;
-  min: string;
-  max: string;
-  onChangeMin: (value: string) => void;
-  onChangeMax: (value: string) => void;
-  /** datetime range — the active bound also gets a time picker. */
-  withTime?: boolean;
-}) {
-  const t = useDataTableT();
-  const { locale } = useResolvedLocale();
-  const shellTz = useTimeZone();
-  const [active, setActive] = useState<"from" | "to">("from");
-
-  const fmt = (v: string) => {
-    if (!v) return "—";
-    return withTime ? formatDateTimeValue(v, locale, shellTz.value) : formatDateValue(v, locale);
-  };
-  const bounds = [
-    { key: "from" as const, label: t("filterBetweenFrom"), value: min, onChange: onChangeMin },
-    { key: "to" as const, label: t("filterBetweenTo"), value: max, onChange: onChangeMax },
-  ];
-  const activeBound = bounds.find((b) => b.key === active) ?? bounds[0];
-  const error = betweenOrderError(
-    withTime ? "datetime" : "date",
-    min,
-    max,
-    t("filterBetweenFrom"),
-    t("filterBetweenTo"),
-    t,
-    shellTz.value,
-  );
-
-  return (
-    <div className="astw:flex astw:flex-col astw:gap-3">
-      {/* From / To tab bar (each tab shows its picked value) */}
-      <div className="astw:grid astw:grid-cols-2 astw:gap-1 astw:rounded-md astw:bg-muted astw:p-1">
-        {bounds.map((b) => (
-          <button
-            key={b.key}
-            type="button"
-            onClick={() => setActive(b.key)}
-            className={cn(
-              "astw:flex astw:flex-col astw:items-start astw:gap-0.5 astw:overflow-hidden astw:rounded-sm astw:px-2 astw:py-1 astw:text-left",
-              active === b.key && "astw:bg-background astw:shadow-sm",
-            )}
-          >
-            <span className="astw:text-body-sm astw:text-muted-foreground">{b.label}</span>
-            <span
-              className={cn(
-                "astw:w-full astw:truncate astw:text-body-md",
-                active === b.key ? "astw:text-foreground" : "astw:text-muted-foreground",
-              )}
-            >
-              {fmt(b.value)}
-            </span>
-          </button>
-        ))}
-      </div>
-
-      {/* Inline calendar (+ time) for the active bound */}
-      {withTime ? (
-        <PanelDateTimeInput
-          ariaLabel={`${label} — ${activeBound.label}`}
-          value={activeBound.value}
-          onChange={activeBound.onChange}
-        />
-      ) : (
-        <PanelDateInput
-          ariaLabel={`${label} — ${activeBound.label}`}
-          value={activeBound.value}
-          onChange={activeBound.onChange}
-        />
-      )}
-
-      {error && (
-        <Text variant="body-sm" className="astw:text-danger-text">
-          {error}
-        </Text>
-      )}
-    </div>
-  );
-}
-
-/**
- * Draft value editor for the panel's third column, keyed by field + operator.
- * Holds local draft state and commits via an explicit Apply button (the panel
- * stays open so several filters can be added in a row).
- */
-function PanelValueEditor({
-  column,
-  operator,
-  filter,
-  control,
-}: {
-  column: FilterableColumn;
-  operator: FilterOperator;
-  filter: Filter | undefined;
-  control: CollectionControl;
-}) {
-  const t = useDataTableT();
-  const shellTz = useTimeZone();
-  const config = column.filter;
-  const field = config.field;
-  const label = column.label ?? field;
-  const type = config.type;
-  const isBetween = operator === "between";
-
-  // Draft state, prefilled from an existing filter on the same field/operator.
-  const [enumSel, setEnumSel] = useState<string[]>(
-    type === "enum" && Array.isArray(filter?.value) ? (filter.value as string[]) : [],
-  );
-  const [boolVal, setBoolVal] = useState(typeof filter?.value === "boolean" ? filter.value : true);
-  const [text, setText] = useState(() => {
-    if (isBetween) return "";
-    if (typeof filter?.value === "string") return filter.value;
-    if (typeof filter?.value === "number") return String(filter.value);
-    return "";
-  });
-  const range =
-    isBetween && filter?.value && typeof filter.value === "object"
-      ? (filter.value as { min?: unknown; max?: unknown })
-      : null;
-  const [min, setMin] = useState(range?.min != null ? String(range.min) : "");
-  const [max, setMax] = useState(range?.max != null ? String(range.max) : "");
-
-  const apply = () => {
-    if (type === "enum") {
-      if (enumSel.length === 0) control.removeFilter(field);
-      else control.addFilter(field, "in", enumSel);
-      return;
-    }
-    if (type === "boolean") {
-      control.addFilter(field, operator, boolVal);
-      return;
-    }
-    if (isBetween) {
-      const draft: AddFilterDraftValue = [min, max];
-      if (!isAddFilterDraftValueValid(type, "between", draft, shellTz.value)) return;
-      if (!isRangeOrdered(type, min, max)) return;
-      control.addFilter(
-        field,
-        "between",
-        toAddFilterSubmittedValue(type, "between", draft, shellTz.value),
-      );
-      return;
-    }
-    if (text.trim() === "") {
-      control.removeFilter(field);
-      return;
-    }
-    if (!isAddFilterDraftValueValid(type, operator, text, shellTz.value)) return;
-    control.addFilter(
-      field,
-      operator,
-      toAddFilterSubmittedValue(type, operator, text, shellTz.value),
-      // Preserve the existing filter's case-sensitivity (the panel has no toggle;
-      // the chip's string editor owns it) instead of silently clearing it.
-      type === "string" ? { caseSensitive: filter?.caseSensitive ?? false } : undefined,
-    );
-  };
-
-  // Remove this field's active filter and reset the draft. Shown only while a
-  // filter is active (there's nothing to clear on a fresh add).
-  const clearThis = () => {
-    control.removeFilter(field);
-    setEnumSel([]);
-    setBoolVal(true);
-    setText("");
-    setMin("");
-    setMax("");
-  };
-
-  // Gate the Apply button so it's disabled on invalid input (rather than enabled
-  // but inert). An empty draft is allowed only when it clears an existing filter.
-  const canApply = (() => {
-    if (type === "enum") return enumSel.length > 0 || !!filter;
-    if (type === "boolean") return true;
-    if (isBetween) {
-      const minEmpty = min.trim() === "";
-      const maxEmpty = max.trim() === "";
-      if (minEmpty && maxEmpty) return !!filter;
-      if (minEmpty || maxEmpty) return false;
-      if (!isAddFilterDraftValueValid(type, "between", [min, max])) return false;
-      return isRangeOrdered(type, min, max);
-    }
-    if (text.trim() === "") return !!filter;
-    return isAddFilterDraftValueValid(type, operator, text);
-  })();
-
-  let editor: ReactNode;
-  if (type === "enum") {
-    editor = (
-      <EnumOptionList
-        options={config.options}
-        selected={enumSel}
-        onToggle={(v) =>
-          setEnumSel((prev) => (prev.includes(v) ? prev.filter((x) => x !== v) : [...prev, v]))
-        }
-      />
-    );
-  } else if (type === "boolean") {
-    editor = (
-      <div className="astw:p-1">
-        {[true, false].map((v) => (
-          <button
-            key={String(v)}
-            type="button"
-            onClick={() => setBoolVal(v)}
-            className={cn(PANEL_COLUMN_ROW, boolVal === v ? PANEL_ROW_SELECTED : PANEL_ROW_HOVER)}
-          >
-            <span>{v ? t("filterBooleanTrue") : t("filterBooleanFalse")}</span>
-            {boolVal === v && <Check className="astw:ml-auto astw:size-3.5 astw:shrink-0" />}
-          </button>
-        ))}
-      </div>
-    );
-  } else if (isBetween && type === "date") {
-    // Range dates: one inline calendar with From/To tabs on top.
-    editor = (
-      <div className="astw:p-2">
-        <PanelDateRangeInput
-          label={label}
-          min={min}
-          max={max}
-          onChangeMin={setMin}
-          onChangeMax={setMax}
-        />
-      </div>
-    );
-  } else if (isBetween && type === "datetime") {
-    // Range datetimes: one inline calendar + time with From/To tabs on top.
-    editor = (
-      <div className="astw:p-2">
-        <PanelDateRangeInput
-          label={label}
-          min={min}
-          max={max}
-          onChangeMin={setMin}
-          onChangeMax={setMax}
-          withTime
-        />
-      </div>
-    );
-  } else if (isBetween) {
-    // Non-date range: two simple From/To (or Min/Max) text boxes.
-    const numeric = type === "number" || type === "decimal";
-    const numericInputProps =
-      type === "decimal" ? { type: "text", inputMode: "decimal" as const } : { type: "number" };
-    const labels: [string, string] = numeric
-      ? [t("filterBetweenMin"), t("filterBetweenMax")]
-      : [t("filterBetweenFrom"), t("filterBetweenTo")];
-    editor = (
-      <div className="astw:p-2">
-        <BetweenInputGroup
-          labels={labels}
-          values={[min, max]}
-          onChangeMin={setMin}
-          onChangeMax={setMax}
-          onSubmit={apply}
-          inputProps={
-            numeric ? numericInputProps : getTemporalInputProps(type as "datetime" | "time")
-          }
-          error={betweenOrderError(type, min, max, labels[0], labels[1], t)}
-        />
-      </div>
-    );
-  } else if (type === "date") {
-    editor = (
-      <div className="astw:p-2">
-        <PanelDateInput ariaLabel={label} value={text} onChange={setText} />
-      </div>
-    );
-  } else if (type === "datetime") {
-    // Single datetime: inline calendar up front + a labelled time picker below.
-    editor = (
-      <div className="astw:p-2">
-        <PanelDateTimeInput ariaLabel={label} value={text} onChange={setText} />
-      </div>
-    );
-  } else if (isTemporalFilterType(type)) {
-    // Single-value `time` uses the native time input. (`date`/`datetime` above.)
-    editor = (
-      <div className="astw:p-2">
-        <Input
-          {...getTemporalInputProps(type)}
-          aria-label={label}
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !isComposing(e.nativeEvent)) apply();
-          }}
-          className="astw:h-8 astw:text-body-md"
-        />
-      </div>
-    );
-  } else {
-    editor = (
-      <div className="astw:p-2">
-        <Input
-          type={type === "number" ? "number" : "text"}
-          inputMode={type === "decimal" ? "decimal" : undefined}
-          value={text}
-          placeholder={t("filterValuePlaceholder", { field: label })}
-          onChange={(e) => setText(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" && !isComposing(e.nativeEvent)) apply();
-          }}
-          className="astw:h-8 astw:text-body-md"
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="astw:flex astw:flex-1 astw:flex-col astw:overflow-hidden">
-      <div className="astw:flex-1 astw:overflow-y-auto">{editor}</div>
-      <div className="astw:flex astw:items-center astw:gap-1 astw:border-t astw:border-border astw:p-1">
-        {/* Icon-only Clear, shown only when there's an active filter to remove. */}
-        {filter && (
-          <Tooltip.Provider delay={300}>
-            <Tooltip.Root>
-              <Tooltip.Trigger
-                render={
-                  <Button
-                    variant="secondary"
-                    size="xs"
-                    onClick={clearThis}
-                    aria-label={t("clearFilter")}
-                  >
-                    <X className="astw:size-3" />
-                  </Button>
-                }
-              />
-              <Tooltip.Content>{t("clearFilter")}</Tooltip.Content>
-            </Tooltip.Root>
-          </Tooltip.Provider>
-        )}
-        {/* "Update" when re-editing an already-active field (the panel is seeded
-            from it), "Apply" when adding a fresh filter. */}
-        <Button size="xs" onClick={apply} disabled={!canApply} className="astw:flex-1">
-          {filter ? t("updateFilter") : t("applyFilter")}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-// =============================================================================
-// BetweenInputGroup — shared UI for "between" filter inputs
-// =============================================================================
-
-function BetweenInputGroup({
-  labels,
-  values,
-  onChangeMin,
-  onChangeMax,
-  onSubmit,
-  inputProps,
-  error,
-}: {
-  labels: [string, string];
-  values: [string, string];
-  onChangeMin: (value: string) => void;
-  onChangeMax: (value: string) => void;
-  onSubmit: () => void;
-  inputProps?: React.ComponentProps<typeof Input>;
-  /** Validation message shown below the inputs (e.g. a reversed range). */
-  error?: string;
-}) {
-  const rowBase =
-    "astw:flex astw:items-center astw:h-8 astw:rounded-md astw:border astw:shadow-xs astw:has-focus-visible:ring-[3px]";
-  const rowOk =
-    "astw:border-input astw:has-focus-visible:border-ring astw:has-focus-visible:ring-ring/50";
-  const rowError = "astw:border-danger-solid astw:has-focus-visible:ring-danger-solid/30";
-  const labelCell =
-    "astw:text-secondary-foreground astw:text-body-sm astw:px-2.5 astw:border-r astw:border-input astw:bg-muted astw:rounded-l-md astw:h-full astw:flex astw:items-center astw:justify-center astw:shrink-0 astw:min-w-14";
-  const inputCell =
-    "astw:h-full astw:text-body-md astw:border-0 astw:shadow-none astw:focus-visible:ring-0";
-  return (
-    <div className="astw:flex astw:flex-col astw:gap-1.5">
-      <div className={cn(rowBase, rowOk)}>
-        <span className={labelCell}>{labels[0]}</span>
-        <Input
-          {...inputProps}
-          aria-label={labels[0]}
-          value={values[0]}
-          onChange={(e) => onChangeMin(e.target.value)}
-          onKeyDown={(e) => {
-            e.stopPropagation();
-            if (e.key === "Enter" && !isComposing(e.nativeEvent)) onSubmit();
-          }}
-          className={inputCell}
-        />
-      </div>
-      <div className={cn(rowBase, error ? rowError : rowOk)}>
-        <span className={labelCell}>{labels[1]}</span>
-        <Input
-          {...inputProps}
-          aria-label={labels[1]}
-          aria-invalid={error ? true : undefined}
-          value={values[1]}
-          onChange={(e) => onChangeMax(e.target.value)}
-          onKeyDown={(e) => {
-            e.stopPropagation();
-            if (e.key === "Enter" && !isComposing(e.nativeEvent)) onSubmit();
-          }}
-          className={inputCell}
-        />
-      </div>
-      {error && (
-        <Text variant="body-sm" className="astw:text-danger-text">
-          {error}
-        </Text>
-      )}
-    </div>
-  );
-}
-
-/**
- * Validation message for a "between" range when the bounds are reversed
- * (max < min). Returns undefined until both bounds are present and individually
- * valid, so it only appears once there's a genuine ordering problem.
- */
-function betweenOrderError(
-  type: FilterConfig["type"],
-  min: string,
-  max: string,
-  minLabel: string,
-  maxLabel: string,
-  t: ReturnType<typeof useDataTableT>,
-  timeZone?: string,
-): string | undefined {
-  if (min.trim() === "" || max.trim() === "") return undefined;
-  let bothValid = true;
-  if (type === "number") {
-    bothValid = !Number.isNaN(Number(min)) && !Number.isNaN(Number(max));
-  } else if (type === "decimal") {
-    bothValid = isDecimalFilterValueValid(min) && isDecimalFilterValueValid(max);
-  } else if (isTemporalFilterType(type)) {
-    bothValid =
-      isTemporalFilterValueValid(type, min, timeZone) &&
-      isTemporalFilterValueValid(type, max, timeZone);
-  }
-  if (!bothValid) return undefined;
-  if (isRangeOrdered(type, min, max)) return undefined;
-  return t("filterBetweenOrderError", { min: minLabel, max: maxLabel });
-}
-
-/**
- * Date filter input backed by the app-shell `DatePicker`. Bridges the filter's
- * string value (`"YYYY-MM-DD"`) and the `CalendarDate` the picker works with.
- */
-function DateFilterPicker({
-  ariaLabel,
-  value,
-  onChange,
-}: {
-  ariaLabel: string;
-  value: string;
-  onChange: (value: string) => void;
-}) {
-  const calValue = /^\d{4}-\d{2}-\d{2}$/.test(value) ? parseDate(value) : null;
-  return (
-    <DatePicker
-      aria-label={ariaLabel}
-      value={calValue}
-      onChange={(v) => onChange(v ? v.toString() : "")}
-      className="astw:w-full"
-    />
-  );
-}
-
-/**
- * Datetime filter input: the app-shell date `DatePicker` (calendar) paired with a
- * native time box, bridging an RFC 3339 instant. Entering a full datetime by hand
- * is awkward, so the date and time are picked separately and combined. This is a
- * stopgap — it's replaced 1:1 once a dedicated DateTime picker component lands.
- */
-function DateTimeFilterInput({
-  ariaLabel,
-  value,
-  onChange,
-}: {
-  ariaLabel: string;
-  value: string;
-  onChange: (value: string) => void;
-}) {
-  const shellTz = useTimeZone();
-  const { date: datePart, time: timePart } = localDateTimeParts(value, shellTz.value);
-  const calValue = datePart ? parseDate(datePart) : null;
-
-  // Emit an RFC 3339 instant only once a date is chosen; time defaults to midnight.
-  const emit = (nextDate: string, nextTime: string) => {
-    onChange(
-      nextDate
-        ? (normalizeTemporalFilterValue(
-            "datetime",
-            `${nextDate}T${nextTime || "00:00"}:00`,
-            shellTz.value,
-          ) ?? "")
-        : "",
-    );
-  };
-
-  return (
-    <div className="astw:flex astw:items-center astw:gap-2">
-      <DatePicker
-        aria-label={`${ariaLabel} (date)`}
-        value={calValue}
-        onChange={(v) => emit(v ? v.toString() : "", timePart)}
-        className="astw:min-w-0 astw:flex-1"
-      />
-      <Input
-        type="time"
-        aria-label={`${ariaLabel} (time)`}
-        value={timePart}
-        onChange={(e) => emit(datePart, e.target.value)}
-        className="astw:h-8 astw:w-28 astw:shrink-0 astw:text-body-md"
-      />
-    </div>
-  );
-}
-
-// =============================================================================
-// FilterChip — per-filter popover-based editor
-// =============================================================================
-
-function FilterChip({
-  column,
-  filter,
-  control,
-}: {
-  column: Column<Record<string, unknown>> & { filter: DataTableFilterConfig };
-  filter: Filter;
-  control: CollectionControl;
-}) {
-  const t = useDataTableT();
-  const { locale } = useResolvedLocale();
-  const shellTz = useTimeZone();
-  const config = column.filter;
-  const label = column.label ?? config.field;
-
-  const [opOpen, setOpOpen] = useState(false);
-  const [valOpen, setValOpen] = useState(false);
-
-  const handleRemove = useCallback(() => {
-    control.removeFilter(config.field);
-  }, [control, config.field]);
-
-  // Switching operator re-commits the filter, seeding a valid value when the
-  // arity changes (single ↔ between) so the intermediate filter is never
-  // malformed. Fine-tuning the value happens in the value segment.
-  const handleOperatorSelect = useCallback(
-    (nextOp: FilterOperator) => {
-      // Coerce to a finite number, falling back to 0 for malformed values (e.g.
-      // a non-numeric value from persisted/URL state) so we never seed NaN.
-      const toNum = (v: unknown) => {
-        const n = Number(v);
-        return Number.isFinite(n) ? n : 0;
-      };
-      const toDateTime = (v: unknown) => normalizeTemporalFilterValue("datetime", v, shellTz.value);
-      const toDateTimeRange = (v: unknown) => {
-        const range = (v ?? {}) as { min?: unknown; max?: unknown };
-        const min = toDateTime(range.min);
-        const max = toDateTime(range.max);
-        return min && max ? { min, max } : null;
-      };
-      const arity = (op: FilterOperator) => (op === "between" ? 2 : 1);
-      if (arity(nextOp) === arity(filter.operator)) {
-        let value = filter.value;
-        if (config.type === "datetime") {
-          value =
-            filter.operator === "between"
-              ? toDateTimeRange(filter.value)
-              : toDateTime(filter.value);
-        }
-        if (config.type === "datetime" && value == null) return;
-        control.addFilter(
-          config.field,
-          nextOp,
-          value,
-          config.type === "string" && filter.caseSensitive ? { caseSensitive: true } : undefined,
-        );
-      } else if (nextOp === "between") {
-        const v = filter.value;
-        if (config.type === "number") {
-          const n = toNum(v);
-          control.addFilter(config.field, nextOp, { min: n, max: n });
-        } else if (config.type === "datetime") {
-          const s = toDateTime(v);
-          if (!s) return;
-          control.addFilter(config.field, nextOp, { min: s, max: s });
-        } else {
-          const s = v == null ? "" : String(v);
-          control.addFilter(config.field, nextOp, { min: s, max: s });
-        }
-      } else {
-        const range = (filter.value ?? {}) as { min?: unknown; max?: unknown };
-        const lower = range.min ?? range.max ?? "";
-        if (config.type === "datetime") {
-          const normalized = toDateTime(lower);
-          if (!normalized) return;
-          control.addFilter(config.field, nextOp, normalized);
-          setOpOpen(false);
-          return;
-        }
-        control.addFilter(
-          config.field,
-          nextOp,
-          config.type === "number" ? toNum(lower) : String(lower),
-        );
-      }
-      setOpOpen(false);
-    },
-    [
-      control,
-      config.field,
-      config.type,
-      filter.operator,
-      filter.value,
-      filter.caseSensitive,
-      shellTz.value,
-    ],
-  );
-
-  const operators = getVisibleFilterOperators(config, filter.operator);
-  const operatorLabel = getOperatorLabel(filter.operator, t, config.type);
-  const valueLabel = formatFilterValue(filter, config, t, locale, shellTz.value, label);
-
-  const segment =
-    "astw:flex astw:items-center astw:h-6 astw:px-2 astw:text-body-sm astw:whitespace-nowrap astw:outline-hidden";
-  const interactiveSegment = cn(
-    segment,
-    "astw:cursor-pointer astw:hover:bg-accent astw:focus-visible:bg-accent astw:data-popup-open:bg-accent",
-  );
-
-  return (
-    <div
-      data-slot="data-table-filter-chip"
-      // Same surface tokens as the outline "Add filter" Button. The bloom/cream
-      // themes force this slot transparent (see their transparent-chrome rules)
-      // so the chip stays visually identical to the outline button per theme.
-      className="astw:inline-flex astw:items-center astw:divide-x astw:divide-border astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:bg-background astw:shadow-xs astw:dark:border-input astw:dark:bg-input/30"
-    >
-      {/* Field segment (icon arrives in Stage 2) */}
-      <span className={cn(segment, "astw:text-label-sm astw:text-foreground")}>{label}</span>
-
-      {/* Operator segment — searchable dropdown when more than one operator */}
-      {operators.length > 1 ? (
-        <Popover.Root open={opOpen} onOpenChange={setOpOpen}>
-          <Popover.Trigger
-            render={
-              <button
-                type="button"
-                className={cn(interactiveSegment, "astw:text-muted-foreground")}
-              >
-                {operatorLabel}
-              </button>
-            }
-          />
-          <Popover.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
-            <Popover.Positioner sideOffset={4} side="bottom" align="start">
-              <Popover.Popup
-                data-slot="data-table-filter-operator-popup"
-                className={cn(
-                  "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:w-56 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md",
-                  "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
-                )}
-              >
-                <OperatorList
-                  operators={operators}
-                  current={filter.operator}
-                  type={config.type}
-                  onSelect={handleOperatorSelect}
-                />
-              </Popover.Popup>
-            </Popover.Positioner>
-          </Popover.Portal>
-        </Popover.Root>
-      ) : (
-        <span className={cn(segment, "astw:text-muted-foreground")}>{operatorLabel}</span>
-      )}
-
-      {/* Value segment — opens the value editor (operator hidden; it lives above) */}
-      <Popover.Root open={valOpen} onOpenChange={setValOpen}>
-        <Popover.Trigger
-          render={
-            <button
-              type="button"
-              className={cn(
-                interactiveSegment,
-                "astw:gap-1 astw:text-label-sm astw:text-foreground",
-              )}
-            >
-              {valueLabel ? (
-                // Cap long values (e.g. a uuid or a long "contains" string) so the
-                // chip stays a reasonable width instead of stretching the toolbar.
-                <span className="astw:max-w-[12rem] astw:truncate">{valueLabel}</span>
-              ) : (
-                <span className="astw:text-muted-foreground">…</span>
-              )}
-              <ChevronDown className="astw:size-3 astw:text-muted-foreground" />
-            </button>
-          }
-        />
-        {/* Stacking context on the portal so the popup clears the sticky table header. */}
-        <Popover.Portal style={{ position: "relative", zIndex: "var(--z-popup)" }}>
-          <Popover.Positioner sideOffset={4} side="bottom" align="start">
-            <Popover.Popup
-              data-slot="data-table-filter-popup"
-              className={cn(
-                "astw:bg-popover astw:text-popover-foreground astw:z-(--z-popup) astw:min-w-45 astw:origin-(--transform-origin) astw:overflow-hidden astw:rounded-md astw:border astw:border-border astw:shadow-md",
-                "astw:animate-in astw:fade-in-0 astw:zoom-in-95 astw:data-ending-style:animate-out astw:data-ending-style:fade-out-0 astw:data-ending-style:zoom-out-95",
-              )}
-            >
-              <FilterPopoverContent
-                column={column}
-                filter={filter}
-                control={control}
-                onClose={() => setValOpen(false)}
-                hideOperator
-              />
-            </Popover.Popup>
-          </Popover.Positioner>
-        </Popover.Portal>
-      </Popover.Root>
-
-      {/* Remove segment */}
-      <button
-        type="button"
-        className={cn(
-          interactiveSegment,
-          "astw:px-1.5 astw:text-muted-foreground astw:hover:text-foreground",
-        )}
-        onClick={handleRemove}
-        aria-label={t("removeFilter")}
-      >
-        <X className="astw:size-3" />
-      </button>
-    </div>
-  );
-}
-
-// =============================================================================
-// OperatorList — searchable operator picker shown in the chip's operator segment
-// =============================================================================
-
-function OperatorList({
-  operators,
-  current,
-  type,
-  onSelect,
-}: {
-  operators: FilterOperator[];
-  current: FilterOperator;
-  type: FilterConfig["type"];
-  onSelect: (op: FilterOperator) => void;
-}) {
-  const t = useDataTableT();
-  const [query, setQuery] = useState("");
-
-  const q = query.trim().toLowerCase();
-  const items = operators
-    .map((op) => ({ op, label: getOperatorLabel(op, t, type) }))
-    .filter(({ label }) => label.toLowerCase().includes(q));
-
-  return (
-    <div className="astw:flex astw:flex-col">
-      <div className="astw:flex astw:items-center astw:gap-2 astw:border-b astw:border-border astw:px-2.5">
-        <Search className="astw:size-3.5 astw:text-muted-foreground" />
-        {/* Base UI's Popover.Popup moves initial focus to the first tabbable
-            element by default, which is this input. On touch it focuses the
-            popup instead so the virtual keyboard doesn't jump open. */}
-        <input
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          placeholder={t("filterOperatorSearchPlaceholder")}
-          className="astw:h-9 astw:w-full astw:bg-transparent astw:text-body-md astw:outline-hidden astw:placeholder:text-muted-foreground"
-        />
-      </div>
-      <div className="astw:p-1">
-        {items.map(({ op, label }) => (
-          <button
-            key={op}
-            type="button"
-            onClick={() => onSelect(op)}
-            className={cn(
-              "astw:flex astw:w-full astw:items-center astw:justify-between astw:gap-2 astw:rounded-sm astw:px-2 astw:py-1.5 astw:text-left astw:text-body-md astw:outline-hidden",
-              "astw:hover:bg-accent astw:hover:text-accent-foreground astw:focus-visible:bg-accent",
-              op === current && "astw:bg-accent/60",
-            )}
-          >
-            {label}
-            {op === current && <Check className="astw:size-3.5" />}
-          </button>
-        ))}
-        {items.length === 0 && (
-          <output className="astw:block astw:px-2 astw:py-1.5 astw:text-body-md astw:text-muted-foreground">
-            {t("filterOperatorNoResults")}
-          </output>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// =============================================================================
-// FilterPopoverContent — dispatches to the right editor per filter type
-// =============================================================================
-
-function FilterPopoverContent({
-  column,
-  filter,
-  control,
-  onClose,
-  hideOperator = false,
-}: {
-  column: Column<Record<string, unknown>> & { filter: DataTableFilterConfig };
-  filter: Filter;
-  control: CollectionControl;
-  onClose: () => void;
-  /**
-   * Hide the in-editor operator selector. Used by the segmented FilterChip,
-   * where the operator lives in its own chip segment; the editor commits with
-   * the filter's current operator.
-   */
-  hideOperator?: boolean;
-}) {
-  const config = column.filter;
-  const label = column.label ?? config.field;
-
-  switch (config.type) {
-    case "enum":
-      return <EnumFilterEditor config={config} filter={filter} control={control} />;
-    case "boolean":
-      return (
-        <BooleanFilterEditor
-          config={config}
-          filter={filter}
-          control={control}
-          onClose={onClose}
-          hideOperator={hideOperator}
-        />
-      );
-    case "string":
-      return (
-        <StringFilterEditor
-          config={config}
-          filter={filter}
-          control={control}
-          onClose={onClose}
-          hideOperator={hideOperator}
-        />
-      );
-    case "uuid":
-      return (
-        <UuidFilterEditor config={config} filter={filter} control={control} onClose={onClose} />
-      );
-    case "number":
-    case "decimal":
-      return (
-        <NumericFilterEditor
-          config={config}
-          filter={filter}
-          control={control}
-          onClose={onClose}
-          hideOperator={hideOperator}
-        />
-      );
-    case "datetime":
-    case "date":
-    case "time":
-      return (
-        <TemporalFilterEditor
-          config={config}
-          label={label}
-          filter={filter}
-          control={control}
-          onClose={onClose}
-          hideOperator={hideOperator}
-        />
-      );
-  }
-}
-
-/**
- * Multi-select option list for enum filters. Rendered identically in the
- * add-filter panel and the chip's value editor so the checkbox style is
- * consistent in both places.
- */
-function EnumOptionList({
-  options,
-  selected,
-  onToggle,
-}: {
-  options: readonly SelectOption[];
-  selected: string[];
-  onToggle: (value: string) => void;
-}) {
-  return (
-    <div data-slot="data-table-filter-enum" className="astw:p-1">
-      {options.map((option) => (
-        <label
-          key={option.value}
-          className={cn(
-            "astw:flex astw:cursor-pointer astw:select-none astw:items-center astw:gap-2 astw:rounded-sm astw:px-2 astw:py-1.5 astw:text-body-md",
-            "astw:hover:bg-accent astw:hover:text-accent-foreground",
-          )}
-        >
-          <Checkbox
-            checked={selected.includes(option.value)}
-            onCheckedChange={() => onToggle(option.value)}
-          />
-          {option.label}
-        </label>
-      ))}
-    </div>
-  );
-}
-
-// =============================================================================
-// Enum filter — checkbox list (matching the screenshot)
-// =============================================================================
-
-function EnumFilterEditor({
-  config,
-  filter,
-  control,
-}: {
-  config: Extract<DataTableFilterConfig, { type: "enum" }>;
-  filter: Filter;
-  control: CollectionControl;
-}) {
-  const selectedValues = useMemo(
-    () => (Array.isArray(filter.value) ? (filter.value as string[]) : []),
-    [filter.value],
-  );
-
-  const handleToggle = useCallback(
-    (optionValue: string) => {
-      const current = new Set(selectedValues);
-      if (current.has(optionValue)) {
-        current.delete(optionValue);
-      } else {
-        current.add(optionValue);
-      }
-      const next = [...current];
-      if (next.length === 0) {
-        control.removeFilter(config.field);
-      } else {
-        control.addFilter(config.field, "in", next);
-      }
-    },
-    [selectedValues, control, config.field],
-  );
-
-  return (
-    <EnumOptionList options={config.options} selected={selectedValues} onToggle={handleToggle} />
-  );
-}
-
-// =============================================================================
-// Boolean filter — operator selector + True/False select
-// =============================================================================
-
-type BooleanOperator = "eq" | "ne";
-const BOOLEAN_OPERATORS = ["eq", "ne"] as const;
-
-function BooleanFilterEditor({
-  config,
-  filter,
-  control,
-  onClose,
-  hideOperator = false,
-}: {
-  config: Extract<DataTableFilterConfig, { type: "boolean" }>;
-  filter: Filter;
-  control: CollectionControl;
-  onClose: () => void;
-  hideOperator?: boolean;
-}) {
-  const t = useDataTableT();
-  const operatorItems = getVisibleFilterOperators(config, filter.operator).filter(
-    (operator): operator is BooleanOperator =>
-      BOOLEAN_OPERATORS.includes(operator as BooleanOperator),
-  );
-  const [localOp, setLocalOp] = useState<BooleanOperator>(
-    operatorItems.includes(filter.operator as BooleanOperator)
-      ? (filter.operator as BooleanOperator)
-      : (operatorItems[0] ?? "eq"),
-  );
-  const [localValue, setLocalValue] = useState(
-    typeof filter.value === "boolean" ? String(filter.value) : "true",
-  );
-
-  const handleCommit = useCallback(() => {
-    control.addFilter(config.field, localOp, localValue === "true");
-    onClose();
-  }, [localValue, localOp, control, config.field, onClose]);
-
-  return (
-    <div
-      data-slot="data-table-filter-boolean"
-      className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
-    >
-      {!hideOperator && (
-        <Select
-          items={[...operatorItems]}
-          value={localOp}
-          onValueChange={(v) => {
-            if (v) setLocalOp(v as BooleanOperator);
-          }}
-          mapItem={(op) => ({ value: op, label: getOperatorLabel(op, t) })}
-          className="astw:h-8 astw:text-body-md"
-        />
-      )}
-      <Select
-        items={["true", "false"]}
-        value={localValue}
-        onValueChange={(v) => {
-          if (v) setLocalValue(v);
-        }}
-        mapItem={(v) => ({
-          value: v,
-          label: v === "true" ? t("filterBooleanTrue") : t("filterBooleanFalse"),
-        })}
-        className="astw:h-8 astw:text-body-md"
-      />
-      <Button size="xs" onClick={handleCommit} className="astw:self-end">
-        {t("applyFilter")}
-      </Button>
-    </div>
-  );
-}
-
-// =============================================================================
-// String filter — operator selector + text input
-// =============================================================================
-
-function StringFilterEditor({
-  config,
-  filter,
-  control,
-  onClose,
-  hideOperator = false,
-}: {
-  config: Extract<DataTableFilterConfig, { type: "string" }>;
-  filter: Filter;
-  control: CollectionControl;
-  onClose: () => void;
-  hideOperator?: boolean;
-}) {
-  const t = useDataTableT();
-  const operatorItems = getVisibleFilterOperators(config, filter.operator).filter(
-    (operator): operator is StringOperator => STRING_OPERATORS.includes(operator as StringOperator),
-  );
-  const [localOp, setLocalOp] = useState<StringOperator>(
-    operatorItems.includes(filter.operator as StringOperator)
-      ? (filter.operator as StringOperator)
-      : (DEFAULT_OPERATOR.string as StringOperator),
-  );
-  const [localValue, setLocalValue] = useState(String(filter.value ?? ""));
-  const [localCaseSensitive, setLocalCaseSensitive] = useState(filter.caseSensitive ?? false);
-
-  const handleCommit = useCallback(() => {
-    if (localValue.trim() === "") {
-      control.removeFilter(config.field);
-    } else {
-      control.addFilter(config.field, localOp, localValue, {
-        caseSensitive: localCaseSensitive,
-      });
-    }
-    onClose();
-  }, [localValue, localOp, localCaseSensitive, control, config.field, onClose]);
-
-  return (
-    <div
-      data-slot="data-table-filter-string"
-      className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
-    >
-      {!hideOperator && (
-        <Select
-          items={[...operatorItems]}
-          value={localOp}
-          onValueChange={(v) => {
-            if (v) setLocalOp(v as StringOperator);
-          }}
-          mapItem={(op) => ({ value: op, label: t(`filterOperator_${op}`) })}
-          className="astw:h-8 astw:text-body-md"
-        />
-      )}
-      <Input
-        value={localValue}
-        placeholder={t("filterValuePlaceholder", { field: config.field })}
-        onChange={(e) => setLocalValue(e.target.value)}
-        onKeyDown={(e) => {
-          e.stopPropagation();
-          if (e.key === "Enter" && !isComposing(e.nativeEvent)) handleCommit();
-        }}
-        className="astw:h-8 astw:text-body-md"
-      />
-      <Checkbox
-        label={t("filterCaseSensitive")}
-        checked={localCaseSensitive}
-        onCheckedChange={setLocalCaseSensitive}
-        className="astw:gap-1.5"
-      />
-      <Button size="xs" onClick={handleCommit} className="astw:self-end">
-        {t("applyFilter")}
-      </Button>
-    </div>
-  );
-}
-
-// =============================================================================
-// UUID filter — text input (eq only)
-// =============================================================================
 
-function UuidFilterEditor({
-  config,
-  filter,
-  control,
-  onClose,
-}: {
-  config: Extract<DataTableFilterConfig, { type: "uuid" }>;
-  filter: Filter;
-  control: CollectionControl;
-  onClose: () => void;
-}) {
-  const t = useDataTableT();
-  const [localValue, setLocalValue] = useState(String(filter.value ?? ""));
-
-  const handleCommit = useCallback(() => {
-    if (localValue.trim() === "") {
-      control.removeFilter(config.field);
-    } else {
-      control.addFilter(config.field, "eq", localValue);
-    }
-    onClose();
-  }, [localValue, control, config.field, onClose]);
-
-  return (
-    <div data-slot="data-table-filter-uuid" className="astw:flex astw:flex-col astw:gap-2 astw:p-2">
-      <Input
-        value={localValue}
-        placeholder={t("filterValuePlaceholder", { field: config.field })}
-        onChange={(e) => setLocalValue(e.target.value)}
-        onKeyDown={(e) => {
-          e.stopPropagation();
-          if (e.key === "Enter" && !isComposing(e.nativeEvent)) handleCommit();
-        }}
-        className="astw:h-8 astw:text-body-md"
-      />
-      <Button size="xs" onClick={handleCommit} className="astw:self-end">
-        {t("applyFilter")}
-      </Button>
-    </div>
-  );
-}
-
-// =============================================================================
-// Numeric filter — operator selector + number/decimal input
-// =============================================================================
-
-function NumericFilterEditor({
-  config,
-  filter,
-  control,
-  onClose,
-  hideOperator = false,
-}: {
-  config: Extract<DataTableFilterConfig, { type: "number" | "decimal" }>;
-  filter: Filter;
-  control: CollectionControl;
-  onClose: () => void;
-  hideOperator?: boolean;
-}) {
-  const t = useDataTableT();
-  const { items: operatorItems, initial: initialOp } = resolveTemporalOperator(
-    getVisibleFilterOperators(config, filter.operator).filter(
-      (operator): operator is NumericTemporalOperator =>
-        temporalOperatorsFor(config.type).includes(operator as NumericTemporalOperator),
-    ),
-    filter.operator,
-  );
-  const [localOp, setLocalOp] = useState<NumericTemporalOperator>(initialOp);
-  const [localValue, setLocalValue] = useState(() => {
-    if (filter.operator === "between" && typeof filter.value === "object" && filter.value != null) {
-      const range = filter.value as { min?: unknown; max?: unknown };
-      return String(range.min ?? "");
-    }
-    return String(filter.value ?? "");
-  });
-  const [localValueMax, setLocalValueMax] = useState(() => {
-    if (filter.operator === "between" && typeof filter.value === "object" && filter.value != null) {
-      const range = filter.value as { min?: unknown; max?: unknown };
-      return String(range.max ?? "");
-    }
-    return "";
-  });
-
-  const canCommit = (() => {
-    if (localOp === "between") {
-      const minEmpty = localValue.trim() === "";
-      const maxEmpty = localValueMax.trim() === "";
-      if (minEmpty && maxEmpty) return true; // will removeFilter
-      if (minEmpty || maxEmpty) return false; // both required
-      return (
-        isAddFilterDraftValueValid(config.type, "between", [localValue, localValueMax]) &&
-        isRangeOrdered(config.type, localValue, localValueMax)
-      );
-    }
-    return localValue.trim() === "" || isAddFilterDraftValueValid(config.type, localOp, localValue);
-  })();
-
-  const handleCommit = useCallback(() => {
-    if (localOp === "between") {
-      const minEmpty = localValue.trim() === "";
-      const maxEmpty = localValueMax.trim() === "";
-      if (minEmpty && maxEmpty) {
-        control.removeFilter(config.field);
-      } else if (!minEmpty && !maxEmpty) {
-        const draft: AddFilterDraftValue = [localValue, localValueMax];
-        if (
-          isAddFilterDraftValueValid(config.type, localOp, draft) &&
-          isRangeOrdered(config.type, localValue, localValueMax)
-        ) {
-          control.addFilter(
-            config.field,
-            localOp,
-            toAddFilterSubmittedValue(config.type, localOp, draft),
-          );
-        } else {
-          return;
-        }
-      } else {
-        return;
-      }
-    } else if (config.type === "decimal") {
-      if (localValue.trim() === "") {
-        control.removeFilter(config.field);
-      } else if (isDecimalFilterValueValid(localValue)) {
-        control.addFilter(config.field, localOp, localValue.trim());
-      } else {
-        return;
-      }
-    } else {
-      const num = Number(localValue);
-      if (localValue.trim() === "" || Number.isNaN(num)) {
-        control.removeFilter(config.field);
-      } else {
-        control.addFilter(config.field, localOp, num);
-      }
-    }
-    onClose();
-  }, [localValue, localValueMax, localOp, control, config.field, config.type, onClose]);
-
-  return (
-    <div
-      data-slot={`data-table-filter-${config.type}`}
-      className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
-    >
-      {!hideOperator && (
-        <Select
-          items={[...operatorItems]}
-          value={localOp}
-          onValueChange={(v) => {
-            if (v) setLocalOp(v);
-          }}
-          mapItem={(op) => ({ value: op, label: getOperatorLabel(op, t, config.type) })}
-          className="astw:h-8 astw:text-body-md"
-        />
-      )}
-      {localOp === "between" ? (
-        <BetweenInputGroup
-          labels={[t("filterBetweenMin"), t("filterBetweenMax")]}
-          values={[localValue, localValueMax]}
-          onChangeMin={setLocalValue}
-          onChangeMax={setLocalValueMax}
-          onSubmit={handleCommit}
-          inputProps={
-            config.type === "decimal" ? { type: "text", inputMode: "decimal" } : { type: "number" }
-          }
-          error={betweenOrderError(
-            config.type,
-            localValue,
-            localValueMax,
-            t("filterBetweenMin"),
-            t("filterBetweenMax"),
-            t,
-          )}
-        />
-      ) : (
-        <Input
-          type={config.type === "decimal" ? "text" : "number"}
-          inputMode={config.type === "decimal" ? "decimal" : undefined}
-          value={localValue}
-          placeholder={t("filterValuePlaceholder", { field: config.field })}
-          onChange={(e) => setLocalValue(e.target.value)}
-          onKeyDown={(e) => {
-            e.stopPropagation();
-            if (e.key === "Enter" && !isComposing(e.nativeEvent)) handleCommit();
-          }}
-          className="astw:h-8 astw:text-body-md"
-        />
-      )}
-      <Button size="xs" onClick={handleCommit} disabled={!canCommit} className="astw:self-end">
-        {t("applyFilter")}
-      </Button>
-    </div>
-  );
-}
-
-// =============================================================================
-// Temporal filter — operator selector + type-specific input
-// =============================================================================
-
-function TemporalFilterEditor({
-  config,
-  label,
-  filter,
-  control,
-  onClose,
-  hideOperator = false,
-}: {
-  config: Extract<DataTableFilterConfig, { type: "datetime" | "date" | "time" }>;
-  /** The column's visible label — used for the date picker's accessible name. */
-  label: string;
-  filter: Filter;
-  control: CollectionControl;
-  onClose: () => void;
-  hideOperator?: boolean;
-}) {
-  const t = useDataTableT();
-  const shellTz = useTimeZone();
-  const { items: operatorItems, initial: initialOp } = resolveTemporalOperator(
-    getVisibleFilterOperators(config, filter.operator).filter(
-      (operator): operator is NumericTemporalOperator =>
-        temporalOperatorsFor(config.type).includes(operator as NumericTemporalOperator),
-    ),
-    filter.operator,
-  );
-  const [localOp, setLocalOp] = useState<NumericTemporalOperator>(initialOp);
-  const [localValue, setLocalValue] = useState(() => {
-    if (filter.operator === "between" && typeof filter.value === "object" && filter.value != null) {
-      const range = filter.value as { min?: unknown; max?: unknown };
-      return String(range.min ?? "");
-    }
-    return String(filter.value ?? "");
-  });
-  const [localValueMax, setLocalValueMax] = useState(() => {
-    if (filter.operator === "between" && typeof filter.value === "object" && filter.value != null) {
-      const range = filter.value as { min?: unknown; max?: unknown };
-      return String(range.max ?? "");
-    }
-    return "";
-  });
-
-  const canCommit = (() => {
-    if (localOp === "between") {
-      const minEmpty = localValue.trim() === "";
-      const maxEmpty = localValueMax.trim() === "";
-      if (minEmpty && maxEmpty) return true; // will removeFilter
-      if (minEmpty || maxEmpty) return false; // both required
-      return (
-        isTemporalFilterValueValid(config.type, localValue, shellTz.value) &&
-        isTemporalFilterValueValid(config.type, localValueMax, shellTz.value) &&
-        isRangeOrdered(config.type, localValue, localValueMax)
-      );
-    }
-    return (
-      localValue.trim() === "" || isTemporalFilterValueValid(config.type, localValue, shellTz.value)
-    );
-  })();
-
-  const handleCommit = useCallback(() => {
-    if (localOp === "between") {
-      const minEmpty = localValue.trim() === "";
-      const maxEmpty = localValueMax.trim() === "";
-      if (minEmpty && maxEmpty) {
-        control.removeFilter(config.field);
-      } else if (!minEmpty && !maxEmpty) {
-        const minValid = isTemporalFilterValueValid(config.type, localValue, shellTz.value);
-        const maxValid = isTemporalFilterValueValid(config.type, localValueMax, shellTz.value);
-        if (!minValid || !maxValid) return;
-        if (!isRangeOrdered(config.type, localValue, localValueMax)) return;
-        if (config.type === "datetime") {
-          const min = normalizeTemporalFilterValue("datetime", localValue, shellTz.value);
-          const max = normalizeTemporalFilterValue("datetime", localValueMax, shellTz.value);
-          if (!min || !max) return;
-          control.addFilter(config.field, localOp, { min, max });
-          onClose();
-          return;
-        }
-        control.addFilter(config.field, localOp, {
-          min: localValue,
-          max: localValueMax,
-        });
-      } else {
-        return;
-      }
-    } else {
-      if (localValue.trim() === "") {
-        control.removeFilter(config.field);
-      } else if (isTemporalFilterValueValid(config.type, localValue, shellTz.value)) {
-        if (config.type === "datetime") {
-          const value = normalizeTemporalFilterValue("datetime", localValue, shellTz.value);
-          if (!value) return;
-          control.addFilter(config.field, localOp, value);
-          onClose();
-          return;
-        }
-        control.addFilter(config.field, localOp, localValue);
-      } else {
-        return;
-      }
-    }
-    onClose();
-  }, [
-    localValue,
-    localValueMax,
-    localOp,
-    control,
-    config.field,
-    config.type,
-    onClose,
-    shellTz.value,
-  ]);
-
-  const isDate = config.type === "date";
-  const isDateTime = config.type === "datetime";
-  // date + datetime pickers share the same { ariaLabel, value, onChange } shape.
-  const Picker = isDateTime ? DateTimeFilterInput : DateFilterPicker;
-  const betweenError =
-    localOp === "between"
-      ? betweenOrderError(
-          config.type,
-          localValue,
-          localValueMax,
-          t("filterBetweenFrom"),
-          t("filterBetweenTo"),
-          t,
-        )
-      : undefined;
-  let valueInput: ReactNode;
-  if (localOp === "between") {
-    valueInput =
-      isDate || isDateTime ? (
-        <div className="astw:flex astw:flex-col astw:gap-1.5">
-          <Picker
-            ariaLabel={`${label} — ${t("filterBetweenFrom")}`}
-            value={localValue}
-            onChange={setLocalValue}
-          />
-          <Picker
-            ariaLabel={`${label} — ${t("filterBetweenTo")}`}
-            value={localValueMax}
-            onChange={setLocalValueMax}
-          />
-          {betweenError && (
-            <Text variant="body-sm" className="astw:text-danger-text">
-              {betweenError}
-            </Text>
-          )}
-        </div>
-      ) : (
-        <BetweenInputGroup
-          labels={[t("filterBetweenFrom"), t("filterBetweenTo")]}
-          values={[localValue, localValueMax]}
-          onChangeMin={setLocalValue}
-          onChangeMax={setLocalValueMax}
-          onSubmit={handleCommit}
-          inputProps={getTemporalInputProps(config.type)}
-          error={betweenError}
-        />
-      );
-  } else {
-    valueInput =
-      isDate || isDateTime ? (
-        <Picker ariaLabel={label} value={localValue} onChange={setLocalValue} />
-      ) : (
-        <Input
-          {...getTemporalInputProps(config.type)}
-          value={localValue}
-          onChange={(e) => {
-            setLocalValue(e.target.value);
-          }}
-          onKeyDown={(e) => {
-            e.stopPropagation();
-            if (e.key === "Enter" && !isComposing(e.nativeEvent)) {
-              handleCommit();
-            }
-          }}
-          className="astw:h-8 astw:text-body-md"
-        />
-      );
-  }
-
-  return (
-    <div
-      data-slot={`data-table-filter-${config.type}`}
-      className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
-    >
-      {!hideOperator && (
-        <Select
-          items={[...operatorItems]}
-          value={localOp}
-          onValueChange={(v) => {
-            if (v) setLocalOp(v);
-          }}
-          mapItem={(op) => ({ value: op, label: getOperatorLabel(op, t, config.type) })}
-          className="astw:h-8 astw:text-body-md"
-        />
-      )}
-      {valueInput}
-      <Button size="xs" onClick={handleCommit} disabled={!canCommit} className="astw:self-end">
-        {t("applyFilter")}
-      </Button>
-    </div>
-  );
-}
-
-// =============================================================================
-// Helpers
-// =============================================================================
-
-function isAddFilterDraftValueValid(
-  type: FilterConfig["type"],
-  operator: FilterOperator,
-  value: AddFilterDraftValue,
-  timeZone?: string,
-): boolean {
-  if (type === "enum") {
-    return Array.isArray(value) && value.length > 0;
-  }
-  if (type === "boolean") {
-    return value === "true" || value === "false";
-  }
-
-  if (operator === "between") {
-    if (!Array.isArray(value)) return false;
-    const [min, max] = value;
-    const minEmpty = !min || min.trim() === "";
-    const maxEmpty = !max || max.trim() === "";
-    if (minEmpty || maxEmpty) return false; // both required
-    if (type === "number") {
-      return !Number.isNaN(Number(min)) && !Number.isNaN(Number(max));
-    }
-    if (type === "decimal") {
-      return isDecimalFilterValueValid(min) && isDecimalFilterValueValid(max);
-    }
-    if (isTemporalFilterType(type)) {
-      return (
-        isTemporalFilterValueValid(type, min, timeZone) &&
-        isTemporalFilterValueValid(type, max, timeZone)
-      );
-    }
-    return true;
-  }
-
-  if (typeof value !== "string") return false;
-  if (type === "number") {
-    if (value.trim() === "") return false;
-    return !Number.isNaN(Number(value));
-  }
-  if (type === "decimal") return isDecimalFilterValueValid(value);
-  if (isTemporalFilterType(type)) {
-    return isTemporalFilterValueValid(type, value, timeZone);
-  }
-  return value.trim() !== "";
-}
-
-function toAddFilterSubmittedValue(
-  type: FilterConfig["type"],
-  operator: FilterOperator,
-  value: AddFilterDraftValue,
-  timeZone?: string,
-): unknown {
-  if (type === "enum") {
-    return Array.isArray(value) ? (value as string[]) : [];
-  }
-  if (type === "boolean") {
-    return value === "true";
-  }
-
-  if (operator === "between" && Array.isArray(value)) {
-    const [min, max] = value;
-    const trimmedMin = typeof min === "string" ? min.trim() : "";
-    const trimmedMax = typeof max === "string" ? max.trim() : "";
-
-    if (type === "number") {
-      if (trimmedMin === "" || trimmedMax === "") return undefined;
-
-      const parsedMin = Number(trimmedMin);
-      const parsedMax = Number(trimmedMax);
-      if (Number.isNaN(parsedMin) || Number.isNaN(parsedMax)) return undefined;
-
-      return { min: parsedMin, max: parsedMax };
-    }
-
-    if (trimmedMin === "" || trimmedMax === "") return undefined;
-
-    if (type === "datetime") {
-      const normalizedMin = normalizeTemporalFilterValue("datetime", trimmedMin, timeZone);
-      const normalizedMax = normalizeTemporalFilterValue("datetime", trimmedMax, timeZone);
-      return normalizedMin && normalizedMax
-        ? { min: normalizedMin, max: normalizedMax }
-        : undefined;
-    }
-
-    return {
-      min: trimmedMin,
-      max: trimmedMax,
-    };
-  }
-
-  if (type === "number") {
-    return Number(value);
-  }
-  const trimmed = String(value).trim();
-  return type === "datetime"
-    ? normalizeTemporalFilterValue("datetime", trimmed, timeZone)
-    : trimmed;
-}
-
-/**
- * Whether a "between" range's bounds are correctly ordered (min ≤ max). Numbers
- * compare numerically; dates and times lexicographically; and datetime instants
- * chronologically. `min === max` is allowed — a valid single-point inclusive range.
- * Assumes both bounds are already individually valid and non-empty.
- */
-function isRangeOrdered(type: FilterConfig["type"], min: string, max: string): boolean {
-  if (type === "number") return Number(min) <= Number(max);
-  if (type === "decimal") return isDecimalRangeOrdered(min, max);
-  if (type === "datetime") return new Date(min).getTime() <= new Date(max).getTime();
-  if (isTemporalFilterType(type)) return min <= max;
-  return true;
-}
-
-function getTemporalInputProps(type: "datetime" | "date" | "time") {
-  switch (type) {
-    case "datetime":
-      return {
-        type: "text" as const,
-        placeholder: "2026-04-27T12:34:56Z",
-      };
-    case "date":
-      return {
-        type: "date" as const,
-      };
-    case "time":
-      return {
-        type: "time" as const,
-        step: 60,
-      };
-  }
-}
-
-export function getOperatorLabel(
-  operator: FilterOperator,
-  t: ReturnType<typeof useDataTableT>,
-  type?: FilterConfig["type"],
-): string {
-  // Date columns relabel the comparison operators (exact date / after / before).
-  if (type === "date") {
-    if (operator === "eq") return t("filterDateOperator_eq");
-    if (operator === "gte") return t("filterDateOperator_gte");
-    if (operator === "lte") return t("filterDateOperator_lte");
-  }
-  switch (operator) {
-    case "eq":
-      return t("filterOperator_eq");
-    case "ne":
-      return t("filterOperator_ne");
-    case "gt":
-      return t("filterOperator_gt");
-    case "gte":
-      return t("filterOperator_gte");
-    case "lt":
-      return t("filterOperator_lt");
-    case "lte":
-      return t("filterOperator_lte");
-    case "contains":
-      return t("filterOperator_contains");
-    case "notContains":
-      return t("filterOperator_notContains");
-    case "hasPrefix":
-      return t("filterOperator_hasPrefix");
-    case "hasSuffix":
-      return t("filterOperator_hasSuffix");
-    case "notHasPrefix":
-      return t("filterOperator_notHasPrefix");
-    case "notHasSuffix":
-      return t("filterOperator_notHasSuffix");
-    case "between":
-      return t("filterOperator_between");
-    case "in":
-      return t("filterOperator_in");
-    case "nin":
-      return t("filterOperator_nin");
-    default:
-      return operator;
-  }
-}
-
-/** Format an ISO "YYYY-MM-DD" value as a locale-appropriate medium date. */
-function formatDateValue(iso: string, locale: string): string {
-  if (!/^\d{4}-\d{2}-\d{2}$/.test(iso)) return iso;
-  try {
-    // Format in UTC against a UTC-anchored instant so the calendar date never
-    // shifts across timezones.
-    return new DateFormatter(locale, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      timeZone: "UTC",
-    }).format(parseDate(iso).toDate("UTC"));
-  } catch {
-    return iso;
-  }
-}
-
-/**
- * Date range for chip display: "15 Jul 2026 – 17 Jul 2026". Each bound is
- * formatted with the same locale-aware medium date used elsewhere, joined with
- * an en dash. (A tighter same-month collapse was avoided — partial Intl date
- * parts render inconsistently across locales.)
- */
-function formatDateRange(minIso: string, maxIso: string, locale: string): string {
-  return [minIso && formatDateValue(minIso, locale), maxIso && formatDateValue(maxIso, locale)]
-    .filter(Boolean)
-    .join(" – ");
-}
-
-/** Format an RFC 3339 datetime as a locale medium date + short time. */
-function formatDateTimeValue(iso: string, locale: string, timeZone: string): string {
-  const normalized = normalizeTemporalFilterValue("datetime", iso, timeZone);
-  if (!normalized) return iso;
-  try {
-    return new DateFormatter(locale, {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-      timeZone,
-    }).format(new Date(normalized));
-  } catch {
-    return iso;
-  }
-}
-
-function formatFilterValue(
-  filter: Filter,
-  config: FilterConfig,
-  t: ReturnType<typeof useDataTableT>,
-  locale: string,
-  timeZone: string,
-  /** Column label — used to summarize multi-select enums as "N labels". */
-  label?: string,
-): string {
-  if (config.type === "enum" && Array.isArray(filter.value)) {
-    const labels = filter.value
-      .map((v) => config.options.find((option) => option.value === v)?.label ?? String(v))
-      .filter((v) => v !== "");
-    // Summarize multiple selections as "2 Status(s)" rather than listing them.
-    if (labels.length > 1 && label) {
-      return t("filterEnumCount", { count: labels.length, noun: label });
-    }
-    return labels.join(", ");
-  }
-
-  if (config.type === "boolean") {
-    return filter.value === true ? t("filterBooleanTrue") : t("filterBooleanFalse");
-  }
-
-  if ((config.type === "number" || config.type === "decimal") && filter.operator === "between") {
-    const range = filter.value as { min?: unknown; max?: unknown } | null;
-    if (!range || typeof range !== "object") return "";
-    const min = range.min != null ? String(range.min) : "";
-    const max = range.max != null ? String(range.max) : "";
-    return [min, max].filter(Boolean).join(" - ");
-  }
-
-  if (config.type === "date") {
-    if (filter.operator === "between") {
-      const range = filter.value as { min?: unknown; max?: unknown } | null;
-      if (!range || typeof range !== "object") return "";
-      const minIso = range.min != null ? String(range.min) : "";
-      const maxIso = range.max != null ? String(range.max) : "";
-      return formatDateRange(minIso, maxIso, locale);
-    }
-    if (filter.value == null || filter.value === "") return "";
-    return formatDateValue(String(filter.value), locale);
-  }
-
-  if (config.type === "datetime") {
-    if (filter.operator === "between") {
-      const range = filter.value as { min?: unknown; max?: unknown } | null;
-      if (!range || typeof range !== "object") return "";
-      const min = range.min != null ? formatDateTimeValue(String(range.min), locale, timeZone) : "";
-      const max = range.max != null ? formatDateTimeValue(String(range.max), locale, timeZone) : "";
-      return [min, max].filter(Boolean).join(" – ");
-    }
-    if (filter.value == null || filter.value === "") return "";
-    return formatDateTimeValue(String(filter.value), locale, timeZone);
-  }
-
-  if (isTemporalFilterType(config.type) && filter.operator === "between") {
-    const range = filter.value as { min?: unknown; max?: unknown } | null;
-    if (!range || typeof range !== "object") return "";
-    const min = range.min != null ? String(range.min) : "";
-    const max = range.max != null ? String(range.max) : "";
-    return [min, max].filter(Boolean).join(" - ");
-  }
-
-  if (Array.isArray(filter.value)) {
-    return filter.value.map((v) => String(v)).join(", ");
-  }
-
-  if (filter.value == null || filter.value === "") return "";
-  return String(filter.value);
-}
+DataTableToolbar.displayName = "DataTable.Toolbar";
 
-export { DataTableToolbar, DataTableFilters };
+export { DataTableToolbar };
diff --git a/packages/core/src/components/data-table/use-columns.ts b/packages/core/src/components/data-table/use-columns.ts
new file mode 100644
index 00000000..1d879cc8
--- /dev/null
+++ b/packages/core/src/components/data-table/use-columns.ts
@@ -0,0 +1,149 @@
+import { useCallback, useMemo } from "react";
+import { columnKeyAt } from "./column-layout";
+import { usePersistentColumnState, type PersistedColumnState } from "./use-persistent-column-state";
+import type { Column } from "./types";
+
+/**
+ * Reconcile a persisted column order against the current column keys: keep
+ * persisted keys that still exist (in their saved order), then append any new
+ * columns in definition order. Pure so `moveColumn` can reconcile from `prev`
+ * inside its state updater (not a captured value), keeping batched moves correct.
+ */
+function reconcileColumnOrder(order: string[], columnKeys: string[]): string[] {
+  const present = new Set(columnKeys);
+  const seen = new Set<string>();
+  const result: string[] = [];
+  for (const key of order) {
+    if (present.has(key) && !seen.has(key)) {
+      result.push(key);
+      seen.add(key);
+    }
+  }
+  for (const key of columnKeys) {
+    if (!seen.has(key)) {
+      result.push(key);
+      seen.add(key);
+    }
+  }
+  return result;
+}
+
+export function useColumns<TRow extends Record<string, unknown>>(
+  allColumns: Column<TRow>[],
+  tableId: string | undefined,
+) {
+  // Stable key list + key→column map derived from the current column defs.
+  const columnKeys = useMemo(() => allColumns.map((col, i) => columnKeyAt(col, i)), [allColumns]);
+  const columnByKey = useMemo(() => {
+    const map = new Map<string, Column<TRow>>();
+    allColumns.forEach((col, i) => map.set(columnKeyAt(col, i), col));
+    return map;
+  }, [allColumns]);
+
+  const defaultColumnState = useMemo<PersistedColumnState>(
+    () => ({ order: columnKeys, hidden: [], pinned: {} }),
+    [columnKeys],
+  );
+
+  const [persisted, setPersisted] = usePersistentColumnState(tableId, defaultColumnState);
+
+  // Reconcile the persisted order against the current column defs: keep persisted
+  // keys that still exist (in their saved order), then append any new columns in
+  // definition order. Self-healing across columns added/removed between sessions.
+  const columnOrder = useMemo<string[]>(
+    () => reconcileColumnOrder(persisted.order, columnKeys),
+    [persisted.order, columnKeys],
+  );
+
+  const hiddenColumns = useMemo(() => new Set(persisted.hidden), [persisted.hidden]);
+  const pinnedColumns = persisted.pinned;
+
+  const visibleColumns = useMemo<Column<TRow>[]>(() => {
+    return columnOrder
+      .filter((key) => !hiddenColumns.has(key))
+      .map((key) => columnByKey.get(key))
+      .filter((col): col is Column<TRow> => col != null);
+  }, [columnOrder, hiddenColumns, columnByKey]);
+
+  const toggleColumn = useCallback(
+    (fieldOrId: string) => {
+      setPersisted((prev) => {
+        const hidden = new Set(prev.hidden);
+        if (hidden.has(fieldOrId)) {
+          hidden.delete(fieldOrId);
+        } else {
+          hidden.add(fieldOrId);
+        }
+        return { ...prev, hidden: [...hidden] };
+      });
+    },
+    [setPersisted],
+  );
+
+  const showAllColumns = useCallback(() => {
+    setPersisted((prev) => ({ ...prev, hidden: [] }));
+  }, [setPersisted]);
+
+  const hideAllColumns = useCallback(() => {
+    setPersisted((prev) => ({ ...prev, hidden: [...columnKeys] }));
+  }, [setPersisted, columnKeys]);
+
+  const isColumnVisible = useCallback(
+    (fieldOrId: string) => !hiddenColumns.has(fieldOrId),
+    [hiddenColumns],
+  );
+
+  const moveColumn = useCallback(
+    (key: string, toIndex: number) => {
+      // Reconcile from `prev` (not the captured `columnOrder`) so several moves
+      // batched before a re-render compose correctly instead of clobbering.
+      setPersisted((prev) => {
+        const order = reconcileColumnOrder(prev.order, columnKeys);
+        const from = order.indexOf(key);
+        if (from === -1) return prev;
+        const clamped = Math.max(0, Math.min(toIndex, order.length - 1));
+        order.splice(from, 1);
+        order.splice(clamped, 0, key);
+        return { ...prev, order };
+      });
+    },
+    [setPersisted, columnKeys],
+  );
+
+  const setColumnOrder = useCallback(
+    (keys: string[]) => {
+      setPersisted((prev) => ({ ...prev, order: keys }));
+    },
+    [setPersisted],
+  );
+
+  const setPin = useCallback(
+    (key: string, side: "left" | "right" | "none" | null) => {
+      setPersisted((prev) => {
+        const pinned = { ...prev.pinned };
+        // `null` clears the override (reverts to the column's default `pin`);
+        // `"none"` explicitly unpins a column even if its default is pinned.
+        if (side === null) {
+          delete pinned[key];
+        } else {
+          pinned[key] = side;
+        }
+        return { ...prev, pinned };
+      });
+    },
+    [setPersisted],
+  );
+
+  return {
+    visibleColumns,
+    toggleColumn,
+    showAllColumns,
+    hideAllColumns,
+    isColumnVisible,
+    columnOrder,
+    moveColumn,
+    setColumnOrder,
+    pinnedColumns,
+    setPin,
+  };
+}
diff --git a/packages/core/src/components/data-table/use-data-table.ts b/packages/core/src/components/data-table/use-data-table.ts
index 837a42bd..8f121ec0 100644
--- a/packages/core/src/components/data-table/use-data-table.ts
+++ b/packages/core/src/components/data-table/use-data-table.ts
@@ -1,33 +1,10 @@
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo } from "react";
 import type { CollectionControl, Filter, PageInfo, SortState } from "@/types/collection";
+import { useColumns } from "./use-columns";
 import { usePageCounter } from "./use-page-counter";
-import { usePersistentColumnState, type PersistedColumnState } from "./use-persistent-column-state";
-import type { Column, UseDataTableOptions, UseDataTableReturn } from "./types";
-
-/**
- * Reconcile a persisted column order against the current column keys: keep
- * persisted keys that still exist (in their saved order), then append any new
- * columns in definition order. Pure so `moveColumn` can reconcile from `prev`
- * inside its state updater (not a captured value), keeping batched moves correct.
- */
-function reconcileColumnOrder(order: string[], columnKeys: string[]): string[] {
-  const present = new Set(columnKeys);
-  const seen = new Set<string>();
-  const result: string[] = [];
-  for (const key of order) {
-    if (present.has(key) && !seen.has(key)) {
-      result.push(key);
-      seen.add(key);
-    }
-  }
-  for (const key of columnKeys) {
-    if (!seen.has(key)) {
-      result.push(key);
-      seen.add(key);
-    }
-  }
-  return result;
-}
+import { useRowExpansion } from "./use-row-expansion";
+import { useRowSelection } from "./use-row-selection";
+import type { UseDataTableOptions, UseDataTableReturn } from "./types";
 
 /**
  * Hook that integrates data management, column visibility, row operations, and
@@ -111,114 +88,18 @@ export function useDataTable<
   // ---------------------------------------------------------------------------
   // Column visibility / order / pinning (persisted per-user when tableId is set)
   // ---------------------------------------------------------------------------
-  const getColumnKey = useCallback((col: Column<TRow>, colIndex: number): string => {
-    return col.id ?? col.label ?? String(colIndex);
-  }, []);
-
-  // Stable key list + key→column map derived from the current column defs.
-  const columnKeys = useMemo(
-    () => allColumns.map((col, i) => getColumnKey(col, i)),
-    [allColumns, getColumnKey],
-  );
-  const columnByKey = useMemo(() => {
-    const map = new Map<string, Column<TRow>>();
-    allColumns.forEach((col, i) => map.set(getColumnKey(col, i), col));
-    return map;
-  }, [allColumns, getColumnKey]);
-
-  const defaultColumnState = useMemo<PersistedColumnState>(
-    () => ({ order: columnKeys, hidden: [], pinned: {} }),
-    [columnKeys],
-  );
-
-  const [persisted, setPersisted] = usePersistentColumnState(tableId, defaultColumnState);
-
-  // Reconcile the persisted order against the current column defs: keep persisted
-  // keys that still exist (in their saved order), then append any new columns in
-  // definition order. Self-healing across columns added/removed between sessions.
-  const columnOrder = useMemo<string[]>(
-    () => reconcileColumnOrder(persisted.order, columnKeys),
-    [persisted.order, columnKeys],
-  );
-
-  const hiddenColumns = useMemo(() => new Set(persisted.hidden), [persisted.hidden]);
-  const pinnedColumns = persisted.pinned;
-
-  const visibleColumns = useMemo<Column<TRow>[]>(() => {
-    return columnOrder
-      .filter((key) => !hiddenColumns.has(key))
-      .map((key) => columnByKey.get(key))
-      .filter((col): col is Column<TRow> => col != null);
-  }, [columnOrder, hiddenColumns, columnByKey]);
-
-  const toggleColumn = useCallback(
-    (fieldOrId: string) => {
-      setPersisted((prev) => {
-        const hidden = new Set(prev.hidden);
-        if (hidden.has(fieldOrId)) {
-          hidden.delete(fieldOrId);
-        } else {
-          hidden.add(fieldOrId);
-        }
-        return { ...prev, hidden: [...hidden] };
-      });
-    },
-    [setPersisted],
-  );
-
-  const showAllColumns = useCallback(() => {
-    setPersisted((prev) => ({ ...prev, hidden: [] }));
-  }, [setPersisted]);
-
-  const hideAllColumns = useCallback(() => {
-    setPersisted((prev) => ({ ...prev, hidden: [...columnKeys] }));
-  }, [setPersisted, columnKeys]);
-
-  const isColumnVisible = useCallback(
-    (fieldOrId: string) => !hiddenColumns.has(fieldOrId),
-    [hiddenColumns],
-  );
-
-  const moveColumn = useCallback(
-    (key: string, toIndex: number) => {
-      // Reconcile from `prev` (not the captured `columnOrder`) so several moves
-      // batched before a re-render compose correctly instead of clobbering.
-      setPersisted((prev) => {
-        const order = reconcileColumnOrder(prev.order, columnKeys);
-        const from = order.indexOf(key);
-        if (from === -1) return prev;
-        const clamped = Math.max(0, Math.min(toIndex, order.length - 1));
-        order.splice(from, 1);
-        order.splice(clamped, 0, key);
-        return { ...prev, order };
-      });
-    },
-    [setPersisted, columnKeys],
-  );
-
-  const setColumnOrder = useCallback(
-    (keys: string[]) => {
-      setPersisted((prev) => ({ ...prev, order: keys }));
-    },
-    [setPersisted],
-  );
-
-  const setPin = useCallback(
-    (key: string, side: "left" | "right" | "none" | null) => {
-      setPersisted((prev) => {
-        const pinned = { ...prev.pinned };
-        // `null` clears the override (reverts to the column's default `pin`);
-        // `"none"` explicitly unpins a column even if its default is pinned.
-        if (side === null) {
-          delete pinned[key];
-        } else {
-          pinned[key] = side;
-        }
-        return { ...prev, pinned };
-      });
-    },
-    [setPersisted],
-  );
+  const {
+    visibleColumns,
+    toggleColumn,
+    showAllColumns,
+    hideAllColumns,
+    isColumnVisible,
+    columnOrder,
+    moveColumn,
+    setColumnOrder,
+    pinnedColumns,
+    setPin,
+  } = useColumns(allColumns, tableId);
 
   // ---------------------------------------------------------------------------
   // Pagination actions (delegated to control + page counter sync)
@@ -279,219 +160,32 @@ export function useDataTable<
   }, [control, sortDisabled, sortMultiple]);
 
   // ---------------------------------------------------------------------------
-  // Row selection
+  // Row selection and expansion share one row-id convention.
   // ---------------------------------------------------------------------------
   const getRowId = useCallback((row: TRow): string | null => {
     const id = (row as Record<string, unknown>)["id"];
     return id != null ? String(id) : null;
   }, []);
 
-  const selectionEnabled = rowSelection !== undefined || !!onSelectionChange;
-  const controlledSelectedIds = rowSelection?.selectedIds;
-  const selectionOnChange = rowSelection?.onChange ?? onSelectionChange;
-  const [uncontrolledSelection, setSelection] = useState<Set<string>>(
-    () => new Set(rowSelection?.defaultSelectedIds),
-  );
-  // Keep uncontrolled commands composable before React commits their state.
-  const selectionRef = useRef(uncontrolledSelection);
-  selectionRef.current = uncontrolledSelection;
-  const selectionOwnerRef = useRef({
-    selectedIds: controlledSelectedIds,
-    onChange: selectionOnChange,
-  });
-  const selection = useMemo(
-    () =>
-      controlledSelectedIds !== undefined ? new Set(controlledSelectedIds) : uncontrolledSelection,
-    [controlledSelectedIds, uncontrolledSelection],
-  );
-
-  const isRowSelected = useCallback(
-    (row: TRow) => {
-      const id = getRowId(row);
-      return id !== null && selection.has(id);
-    },
-    [selection, getRowId],
-  );
-
-  const currentSelection = () => {
-    const ids = selectionOwnerRef.current.selectedIds;
-    return new Set(ids ?? selectionRef.current);
-  };
-
-  // Notify outside the updater so StrictMode cannot invoke the callback twice.
-  const commitSelection = (next: Set<string>) => {
-    if (selectionOwnerRef.current.selectedIds === undefined) {
-      selectionRef.current = next;
-      setSelection(next);
-    }
-    selectionOwnerRef.current.onChange?.([...next]);
-  };
-
-  const toggleRowSelection = selectionEnabled
-    ? (row: TRow) => {
-        const id = getRowId(row);
-        if (id === null) return;
-        const next = currentSelection();
-        if (next.has(id)) {
-          next.delete(id);
-        } else {
-          next.add(id);
-        }
-        commitSelection(next);
-      }
-    : undefined;
-
-  // Page-scoped on purpose: rows selected on other pages are left alone, so the
-  // header checkbox never silently drops part of a cross-page selection.
-  const selectAllRows = selectionEnabled
-    ? () => {
-        const next = currentSelection();
-        for (const row of rows) {
-          const id = getRowId(row);
-          if (id !== null) next.add(id);
-        }
-        commitSelection(next);
-      }
-    : undefined;
-
-  const deselectAllRows = selectionEnabled
-    ? () => {
-        const next = currentSelection();
-        for (const row of rows) {
-          const id = getRowId(row);
-          if (id !== null) next.delete(id);
-        }
-        commitSelection(next);
-      }
-    : undefined;
-
-  // Clearing an empty selection must not fire another change notification.
-  const clearSelection = selectionEnabled
-    ? () => {
-        if (currentSelection().size === 0) return;
-        commitSelection(new Set());
-      }
-    : undefined;
-
-  // Id of the selection action whose request is in flight. It lives here rather
-  // than in the footer bar so it survives the bar unmounting and remounting
-  // (the selection emptying and refilling mid-request), and so a request handed
-  // back later — from a confirm dialog, via `run` — is tracked the same way.
-  const [pendingActionId, setPendingActionId] = useState<string | null>(null);
-  const pendingActionIdRef = useRef(pendingActionId);
-  pendingActionIdRef.current = pendingActionId;
-
-  const runSelectionAction = selectionEnabled
-    ? (action: { id: string }, request: PromiseLike<unknown>) => {
-        // One request at a time: the bar disables its actions while one runs,
-        // so a second call here only comes from app code racing itself.
-        if (pendingActionIdRef.current !== null) return;
-        pendingActionIdRef.current = action.id;
-        setPendingActionId(action.id);
-        const settle = () => {
-          pendingActionIdRef.current = null;
-          setPendingActionId(null);
-        };
-        request.then(settle, (reason: unknown) => {
-          // Keep the selection so the action can be retried. Report rather
-          // than rethrow: a rethrow from this chain would surface as an
-          // unhandled rejection even when the app already handled the error.
-          settle();
-          console.error(`[DataTable] Selection action "${action.id}" failed:`, reason);
-        });
-      }
-    : undefined;
-
-  const selectedIds = useMemo(() => [...selection], [selection]);
-
-  // Retained selection helpers must consult the current committed owner.
-  useLayoutEffect(() => {
-    selectionOwnerRef.current = { selectedIds: controlledSelectedIds, onChange: selectionOnChange };
-  }, [controlledSelectedIds, selectionOnChange]);
-
-  const selectableCount = rows.filter((r) => getRowId(r) !== null).length;
-  const isAllSelected =
-    selectableCount > 0 &&
-    rows.every((r) => {
-      const id = getRowId(r);
-      // Rows without id are not selectable — skip them in the check
-      return id === null || selection.has(id);
-    });
-  const isIndeterminate = selection.size > 0 && !isAllSelected;
-
-  // ---------------------------------------------------------------------------
-  // Row expansion
-  // ---------------------------------------------------------------------------
-  // Keyed by the same `getRowId` as selection — there is one row-id convention.
-  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState<Set<string>>(new Set());
-
-  // Controlled when the caller passes `expandedIds`; internal state is then never written.
-  const controlledExpandedIds = rowExpansion?.expandedIds;
-  const isExpansionControlled = controlledExpandedIds !== undefined;
-
-  const expandedRowIds = useMemo(
-    () => (isExpansionControlled ? new Set(controlledExpandedIds) : uncontrolledExpandedIds),
-    [isExpansionControlled, controlledExpandedIds, uncontrolledExpandedIds],
-  );
-
-  const isRowExpanded = useCallback(
-    (row: TRow) => {
-      const id = getRowId(row);
-      return id !== null && expandedRowIds.has(id);
-    },
-    [expandedRowIds, getRowId],
-  );
-
-  // Refs keep `toggleRowExpansion` / `collapseAllRows` identity-stable: the
-  // callback is usually an inline arrow and `expandedRowIds` is a fresh Set on
-  // every change, so depending on either directly re-fired the documented
-  // "collapse on page change" effect and shut the row the user just opened.
-  const onExpandedChangeRef = useRef(rowExpansion?.onChange);
-  onExpandedChangeRef.current = rowExpansion?.onChange;
-  const expandedRowIdsRef = useRef(expandedRowIds);
-  expandedRowIdsRef.current = expandedRowIds;
-
-  const toggleRowExpansionImpl = useCallback(
-    (row: TRow) => {
-      const id = getRowId(row);
-      if (id === null) return;
-      // Computed outside the updater, as in `toggleRowSelection`. Uncontrolled
-      // composes correctly because the ref is written eagerly below; controlled
-      // mode still reads the caller's prop, so repeated toggles before their
-      // state commits share a base — see the `expandedIds` TSDoc.
-      const next = new Set(expandedRowIdsRef.current);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      // Controlled callers own the state; internal state is never written then,
-      // and the ref must keep mirroring their prop rather than our guess.
-      if (!isExpansionControlled) {
-        expandedRowIdsRef.current = next;
-        setUncontrolledExpandedIds(next);
-      }
-      onExpandedChangeRef.current?.([...next]);
-    },
-    [getRowId, isExpansionControlled],
-  );
-
-  const collapseAllRowsImpl = useCallback(() => {
-    // Nothing open — skip the state write and the callback entirely, so calling
-    // this from an effect can't drive an endless render loop.
-    if (expandedRowIdsRef.current.size === 0) return;
-    if (!isExpansionControlled) {
-      const empty = new Set<string>();
-      expandedRowIdsRef.current = empty;
-      setUncontrolledExpandedIds(empty);
-    }
-    onExpandedChangeRef.current?.([]);
-  }, [isExpansionControlled]);
-
-  const toggleRowExpansion = rowExpansion ? toggleRowExpansionImpl : undefined;
-  const collapseAllRows = rowExpansion ? collapseAllRowsImpl : undefined;
+  const {
+    selectedIds,
+    isRowSelected,
+    toggleRowSelection,
+    selectAllRows,
+    deselectAllRows,
+    clearSelection,
+    pendingActionId,
+    runSelectionAction,
+    isAllSelected,
+    isIndeterminate,
+  } = useRowSelection(rows, rowSelection, onSelectionChange, getRowId);
 
-  const expandedIdsList = useMemo(() => [...expandedRowIds], [expandedRowIds]);
+  const {
+    expandedIds: expandedIdsList,
+    isRowExpanded,
+    toggleRowExpansion,
+    collapseAllRows,
+  } = useRowExpansion(rowExpansion, getRowId);
 
   // ---------------------------------------------------------------------------
   // Return
diff --git a/packages/core/src/components/data-table/use-row-expansion.ts b/packages/core/src/components/data-table/use-row-expansion.ts
new file mode 100644
index 00000000..dcbe06e3
--- /dev/null
+++ b/packages/core/src/components/data-table/use-row-expansion.ts
@@ -0,0 +1,85 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import type { RowExpansionOptions } from "./types";
+
+export function useRowExpansion<TRow extends Record<string, unknown>>(
+  rowExpansion: RowExpansionOptions<TRow> | undefined,
+  getRowId: (row: TRow) => string | null,
+) {
+  // Keyed by the same `getRowId` as selection — there is one row-id convention.
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState<Set<string>>(new Set());
+
+  // Controlled when the caller passes `expandedIds`; internal state is then never written.
+  const controlledExpandedIds = rowExpansion?.expandedIds;
+  const isExpansionControlled = controlledExpandedIds !== undefined;
+
+  const expandedRowIds = useMemo(
+    () => (isExpansionControlled ? new Set(controlledExpandedIds) : uncontrolledExpandedIds),
+    [isExpansionControlled, controlledExpandedIds, uncontrolledExpandedIds],
+  );
+
+  const isRowExpanded = useCallback(
+    (row: TRow) => {
+      const id = getRowId(row);
+      return id !== null && expandedRowIds.has(id);
+    },
+    [expandedRowIds, getRowId],
+  );
+
+  // Refs keep `toggleRowExpansion` / `collapseAllRows` identity-stable: the
+  // callback is usually an inline arrow and `expandedRowIds` is a fresh Set on
+  // every change, so depending on either directly re-fired the documented
+  // "collapse on page change" effect and shut the row the user just opened.
+  const onExpandedChangeRef = useRef(rowExpansion?.onChange);
+  onExpandedChangeRef.current = rowExpansion?.onChange;
+  const expandedRowIdsRef = useRef(expandedRowIds);
+  expandedRowIdsRef.current = expandedRowIds;
+
+  const toggleRowExpansionImpl = useCallback(
+    (row: TRow) => {
+      const id = getRowId(row);
+      if (id === null) return;
+      // Computed outside the updater, as in `toggleRowSelection`. Uncontrolled
+      // composes correctly because the ref is written eagerly below; controlled
+      // mode still reads the caller's prop, so repeated toggles before their
+      // state commits share a base — see the `expandedIds` TSDoc.
+      const next = new Set(expandedRowIdsRef.current);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      // Controlled callers own the state; internal state is never written then,
+      // and the ref must keep mirroring their prop rather than our guess.
+      if (!isExpansionControlled) {
+        expandedRowIdsRef.current = next;
+        setUncontrolledExpandedIds(next);
+      }
+      onExpandedChangeRef.current?.([...next]);
+    },
+    [getRowId, isExpansionControlled],
+  );
+
+  const collapseAllRowsImpl = useCallback(() => {
+    // Nothing open — skip the state write and the callback entirely, so calling
+    // this from an effect can't drive an endless render loop.
+    if (expandedRowIdsRef.current.size === 0) return;
+    if (!isExpansionControlled) {
+      const empty = new Set<string>();
+      expandedRowIdsRef.current = empty;
+      setUncontrolledExpandedIds(empty);
+    }
+    onExpandedChangeRef.current?.([]);
+  }, [isExpansionControlled]);
+
+  const toggleRowExpansion = rowExpansion ? toggleRowExpansionImpl : undefined;
+  const collapseAllRows = rowExpansion ? collapseAllRowsImpl : undefined;
+
+  const expandedIdsList = useMemo(() => [...expandedRowIds], [expandedRowIds]);
+
+  return {
+    expandedIds: expandedIdsList,
+    isRowExpanded,
+    toggleRowExpansion,
+    collapseAllRows,
+  };
+}
diff --git a/packages/core/src/components/data-table/use-row-selection.ts b/packages/core/src/components/data-table/use-row-selection.ts
new file mode 100644
index 00000000..340c6946
--- /dev/null
+++ b/packages/core/src/components/data-table/use-row-selection.ts
@@ -0,0 +1,155 @@
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { RowSelectionOptions } from "./types";
+
+export function useRowSelection<TRow extends Record<string, unknown>>(
+  rows: TRow[],
+  rowSelection: RowSelectionOptions | undefined,
+  onSelectionChange: ((ids: string[]) => void) | undefined,
+  getRowId: (row: TRow) => string | null,
+) {
+  const selectionEnabled = rowSelection !== undefined || !!onSelectionChange;
+  const controlledSelectedIds = rowSelection?.selectedIds;
+  const selectionOnChange = rowSelection?.onChange ?? onSelectionChange;
+  const [uncontrolledSelection, setSelection] = useState<Set<string>>(
+    () => new Set(rowSelection?.defaultSelectedIds),
+  );
+  // Keep uncontrolled commands composable before React commits their state.
+  const selectionRef = useRef(uncontrolledSelection);
+  selectionRef.current = uncontrolledSelection;
+  const selectionOwnerRef = useRef({
+    selectedIds: controlledSelectedIds,
+    onChange: selectionOnChange,
+  });
+  const selection = useMemo(
+    () =>
+      controlledSelectedIds !== undefined ? new Set(controlledSelectedIds) : uncontrolledSelection,
+    [controlledSelectedIds, uncontrolledSelection],
+  );
+
+  const isRowSelected = useCallback(
+    (row: TRow) => {
+      const id = getRowId(row);
+      return id !== null && selection.has(id);
+    },
+    [selection, getRowId],
+  );
+
+  const currentSelection = () => {
+    const ids = selectionOwnerRef.current.selectedIds;
+    return new Set(ids ?? selectionRef.current);
+  };
+
+  // Notify outside the updater so StrictMode cannot invoke the callback twice.
+  const commitSelection = (next: Set<string>) => {
+    if (selectionOwnerRef.current.selectedIds === undefined) {
+      selectionRef.current = next;
+      setSelection(next);
+    }
+    selectionOwnerRef.current.onChange?.([...next]);
+  };
+
+  const toggleRowSelection = selectionEnabled
+    ? (row: TRow) => {
+        const id = getRowId(row);
+        if (id === null) return;
+        const next = currentSelection();
+        if (next.has(id)) {
+          next.delete(id);
+        } else {
+          next.add(id);
+        }
+        commitSelection(next);
+      }
+    : undefined;
+
+  // Page-scoped on purpose: rows selected on other pages are left alone, so the
+  // header checkbox never silently drops part of a cross-page selection.
+  const selectAllRows = selectionEnabled
+    ? () => {
+        const next = currentSelection();
+        for (const row of rows) {
+          const id = getRowId(row);
+          if (id !== null) next.add(id);
+        }
+        commitSelection(next);
+      }
+    : undefined;
+
+  const deselectAllRows = selectionEnabled
+    ? () => {
+        const next = currentSelection();
+        for (const row of rows) {
+          const id = getRowId(row);
+          if (id !== null) next.delete(id);
+        }
+        commitSelection(next);
+      }
+    : undefined;
+
+  // Clearing an empty selection must not fire another change notification.
+  const clearSelection = selectionEnabled
+    ? () => {
+        if (currentSelection().size === 0) return;
+        commitSelection(new Set());
+      }
+    : undefined;
+
+  // Id of the selection action whose request is in flight. It lives here rather
+  // than in the footer bar so it survives the bar unmounting and remounting
+  // (the selection emptying and refilling mid-request), and so a request handed
+  // back later — from a confirm dialog, via `run` — is tracked the same way.
+  const [pendingActionId, setPendingActionId] = useState<string | null>(null);
+  const pendingActionIdRef = useRef(pendingActionId);
+  pendingActionIdRef.current = pendingActionId;
+
+  const runSelectionAction = selectionEnabled
+    ? (action: { id: string }, request: PromiseLike<unknown>) => {
+        // One request at a time: the bar disables its actions while one runs,
+        // so a second call here only comes from app code racing itself.
+        if (pendingActionIdRef.current !== null) return;
+        pendingActionIdRef.current = action.id;
+        setPendingActionId(action.id);
+        const settle = () => {
+          pendingActionIdRef.current = null;
+          setPendingActionId(null);
+        };
+        request.then(settle, (reason: unknown) => {
+          // Keep the selection so the action can be retried. Report rather
+          // than rethrow: a rethrow from this chain would surface as an
+          // unhandled rejection even when the app already handled the error.
+          settle();
+          console.error(`[DataTable] Selection action "${action.id}" failed:`, reason);
+        });
+      }
+    : undefined;
+
+  const selectedIds = useMemo(() => [...selection], [selection]);
+
+  // Retained selection helpers must consult the current committed owner.
+  useLayoutEffect(() => {
+    selectionOwnerRef.current = { selectedIds: controlledSelectedIds, onChange: selectionOnChange };
+  }, [controlledSelectedIds, selectionOnChange]);
+
+  const selectableCount = rows.filter((r) => getRowId(r) !== null).length;
+  const isAllSelected =
+    selectableCount > 0 &&
+    rows.every((r) => {
+      const id = getRowId(r);
+      // Rows without id are not selectable — skip them in the check
+      return id === null || selection.has(id);
+    });
+  const isIndeterminate = selection.size > 0 && !isAllSelected;
+
+  return {
+    selectedIds,
+    isRowSelected,
+    toggleRowSelection,
+    selectAllRows,
+    deselectAllRows,
+    clearSelection,
+    pendingActionId,
+    runSelectionAction,
+    isAllSelected,
+    isIndeterminate,
+  };
+}
diff --git a/packages/core/src/components/data-table/use-table-measurements.ts b/packages/core/src/components/data-table/use-table-measurements.ts
new file mode 100644
index 00000000..c5e6e11c
--- /dev/null
+++ b/packages/core/src/components/data-table/use-table-measurements.ts
@@ -0,0 +1,113 @@
+import { useEffect, useLayoutEffect, useState, type RefObject } from "react";
+import type { Column } from "./types";
+import type { ColumnWidths } from "./column-layout";
+
+// `useLayoutEffect` warns during SSR; the measurement it drives is client-only,
+// so fall back to `useEffect` on the server.
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+
+/** Shallow equality of two width maps — guards the measure effect against
+ *  setting state (and re-rendering) when nothing actually changed. */
+function sameWidths(a: ColumnWidths, b: ColumnWidths): boolean {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  return aKeys.every((k) => a[k] === b[k]);
+}
+
+export function useTableMeasurements<TRow extends Record<string, unknown>>(
+  containerRef: RefObject<HTMLDivElement | null>,
+  {
+    visibleColumns,
+    pinnedColumns,
+    hasSelection,
+    hasExpand,
+    hasRowActions,
+  }: {
+    visibleColumns: Column<TRow>[] | undefined;
+    pinnedColumns: Record<string, "left" | "right" | "none"> | undefined;
+    hasSelection: boolean;
+    hasExpand: boolean;
+    hasRowActions: boolean;
+  },
+): ColumnWidths {
+  const [widths, setWidths] = useState<ColumnWidths>({});
+
+  // Measure each column's *rendered* width from the (always-present) header row
+  // and publish it via PinMeasureContext, so sticky offsets reflect real
+  // geometry rather than declared `width`. This keeps the table on its natural
+  // `table-auto` sizing — pinning no longer forces `table-fixed` (which would
+  // require every column to set an explicit width or collapse). Runs before
+  // paint and re-measures on container/column changes.
+  useIsomorphicLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    // Own table only: an expanded row can contain another DataTable.
+    const ownTable = el.querySelector("table");
+    const cells = Array.from(
+      el.querySelectorAll<HTMLElement>("[data-slot='data-table-header'] [data-col-key]"),
+    ).filter((cell) => cell.closest("table") === ownTable);
+    let lastWidth = -1;
+
+    const measure = () => {
+      const width = el.clientWidth;
+      lastWidth = width;
+      const next: ColumnWidths = {};
+      cells.forEach((cell) => {
+        const key = cell.dataset.colKey;
+        // Fractional width (not the integer-rounded offsetWidth) so accumulated
+        // sticky offsets land exactly on each column's real edge — otherwise the
+        // rounding drift opens a sub-pixel gap between adjacent pinned columns
+        // where scrolling rows bleed through.
+        if (key) next[key] = cell.getBoundingClientRect().width;
+      });
+      setWidths((prev) => (sameWidths(prev, next) ? prev : next));
+      // Publish the scrollport width for an expanded row's sticky panel to cap
+      // itself to. Skipping zero keeps a hidden-tab mount from collapsing every
+      // panel via `min(100%, 0px)`; writing only on change keeps this mutation
+      // from feeding back into the ResizeObserver.
+      if (width > 0) {
+        const value = `${width}px`;
+        if (el.style.getPropertyValue("--data-table-viewport") !== value) {
+          el.style.setProperty("--data-table-viewport", value);
+        }
+      }
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      // Footer content can redistribute columns without changing table width.
+      // Ignore container-only height changes while detail rows animate.
+      if (el.clientWidth !== lastWidth || entries.some((entry) => entry.target !== el)) measure();
+    });
+    observer.observe(el);
+    cells.forEach((cell) => observer.observe(cell));
+    return () => observer.disconnect();
+  }, [containerRef, visibleColumns, pinnedColumns, hasSelection, hasExpand, hasRowActions]);
+
+  // Reflect horizontal scroll position onto the container as data attributes so
+  // the pinned-column freeze shadows show only while there is content scrolled
+  // under that edge (left once scrolled from the start; right while more remains
+  // to the right). Re-runs when the column set changes and observes size changes.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => {
+      const maxScroll = el.scrollWidth - el.clientWidth;
+      el.toggleAttribute("data-pin-shadow-left", el.scrollLeft > 0);
+      el.toggleAttribute("data-pin-shadow-right", el.scrollLeft < maxScroll - 1);
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    if (typeof ResizeObserver === "undefined") {
+      return () => el.removeEventListener("scroll", update);
+    }
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    return () => {
+      el.removeEventListener("scroll", update);
+      observer.disconnect();
+    };
+  }, [containerRef, visibleColumns, pinnedColumns]);
+
+  return widths;
+}