cursedbelt 5.25.0 → 5.26.0

package/src/react/components/DataTable/RowActions.tsx

@@ -1,6 +1,15 @@
 import { EllipsisVertical, Pencil, Trash2 } from 'lucide-react';
-import { DropdownMenu, type DropdownMenuItem } from '../DropdownMenu.js';
+import type { DropdownMenuItem } from '../DropdownMenu.js';
 import { IconButton } from '../IconButton.js';
+import { lazyPart } from './lazyPart.js';
+
+// The kebab's menu is Radix's Menu, and most tables never draw a kebab — so it loads
+// with the first row that has one, not with the table (forge task 2309). Edit and
+// Delete are plain buttons and stay synchronous.
+const MenuPart = lazyPart(() => import('../DropdownMenu.js').then((m) => m.DropdownMenu));
+
+/** Load the kebab's menu now — see `preloadDataTableParts`. */
+export const preloadRowMenu = MenuPart.preload;
 
 export interface RowActionsProps<TRow> {
   row: TRow;
@@ -19,6 +28,11 @@ export interface RowActionsProps<TRow> {
  * surfaces the intent.
  */
 export function RowActions<TRow>({ row, onEdit, onDelete, menu }: RowActionsProps<TRow>) {
+  const kebab = (
+    <IconButton label='Row actions' className='size-8 pointer-coarse:min-w-11 [&_svg]:size-4'>
+      <EllipsisVertical />
+    </IconButton>
+  );
   return (
     // biome-ignore lint/a11y/noStaticElementInteractions: bubble fence only — these handlers never act, they stop row-click; the real interactions are the IconButtons/menu inside
     // biome-ignore lint/a11y/useKeyWithClickEvents: bubble fence only — keyboard interaction lives on the IconButtons/menu inside
@@ -54,15 +68,9 @@ export function RowActions<TRow>({ row, onEdit, onDelete, menu }: RowActionsProp
         </IconButton>
       ) : null}
       {menu && menu.length > 0 ? (
-        <DropdownMenu
-          align='end'
-          trigger={
-            <IconButton label='Row actions' className='size-8 pointer-coarse:min-w-11 [&_svg]:size-4'>
-              <EllipsisVertical />
-            </IconButton>
-          }
-          items={menu}
-        />
+        // Until the menu arrives the kebab is already there, the same button in the same
+        // place — so nothing shifts and nothing flashes; a click in those milliseconds opens nothing.
+        <MenuPart align='end' trigger={kebab} items={menu} fallback={kebab} />
       ) : null}
     </div>
   );

package/src/react/components/DataTable/SortHeader.tsx

@@ -44,6 +44,9 @@ export interface SortHeaderProps<TRow> {
    * disagreed with the sort chips.
    */
   onSort?: () => void;
+  /** Sorting is unavailable right now — the header stays, inert, and says this on hover
+   *  (`DataTable`'s `sortDisabledReason`). */
+  disabledReason?: string;
 }
 
 /**
@@ -58,6 +61,7 @@ export function SortHeader<TRow>({
   sortable,
   sortIndex = -1,
   onSort,
+  disabledReason,
 }: SortHeaderProps<TRow>) {
   // The label truncates inside its own track, sortable or not. A header is the
   // one piece of a table with no wrapping story of its own — it is a single
@@ -67,6 +71,21 @@ export function SortHeader<TRow>({
   // fleet table, 2026-08-11). `title` keeps the full label one hover away.
   if (!sortable) return withLabelTip(label, <span className='block truncate'>{label}</span>);
   const sorted = column.getIsSorted();
+  if (disabledReason)
+    // Visible and explained, never hidden — and `aria-disabled` rather than `disabled`, because
+    // a disabled button fires no pointer events and the reason could never be hovered.
+    return withLabelTip(
+      disabledReason,
+      <button
+        // guardrails-ignore no-raw-action-button: column-header sort toggle, inert — see above.
+        type='button'
+        aria-disabled
+        aria-label={`${label} — ${disabledReason}`}
+        className={`-mx-1 -my-2.5 inline-flex max-w-full cursor-not-allowed items-center gap-1 rounded px-1 py-2.5 uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${TAP_TARGET_HEIGHT}`}
+      >
+        <span className='min-w-0 truncate'>{label}</span>
+      </button>,
+    );
   return withLabelTip(
     label,
     <button

package/src/react/components/DataTable/cells/CellRenderer.tsx

@@ -344,6 +344,8 @@ export function getCellRenderer(type: string): FC<CellRendererProps> {
  * by the table cell, {@link CardView}, the detail `Drawer`, and the layout view.
  */
 export function CellRenderer<TRow extends Record<string, unknown>>(props: CellRendererProps<TRow>) {
+  // A column that draws itself wins over its type — see `ColDef.render`.
+  if (props.col.render) return <>{props.col.render(props.row)}</>;
   const Comp = getCellRenderer(props.col.type);
   return <Comp {...(props as CellRendererProps)} />;
 }

package/src/react/components/DataTable/index.ts

@@ -17,6 +17,7 @@ export {
   type DataTableControls,
   type DataTableProps,
   nextSortStack,
+  preloadDataTableParts,
 } from './DataTable.js';
 // 🔴 `TableFilterBuilder`, not `FilterBuilder` — see its header. The bare name belonged to
 // two different components in two repos, and a shared basename that is not a shared
@@ -67,7 +68,15 @@ export { TableToolbar, type TableToolbarProps } from './Toolbar.js';
 // grows its own (owner, 2026-08-23).
 export { TableViewToggle, type TableViewToggleProps } from './TableViewToggle.js';
 export { resolveColumnAlign } from './types.js';
-export type { ColDef, FieldOption, TableViewMode } from './types.js';
+export type {
+  ColDef,
+  DataTableHandle,
+  DataTableRowProps,
+  DataTableSelectAll,
+  DataTableServerWindow,
+  FieldOption,
+  TableViewMode,
+} from './types.js';
 // Remembers rows-vs-cards per account through the EXISTING deep-link resume —
 // not a second store (unit 45 item 4).
 export {

package/src/react/components/DataTable/lazyPart.spec.tsx

@@ -0,0 +1,99 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { type ComponentType, useState } from 'react';
+import { Button } from '../Button.js';
+import { lazyPart } from './lazyPart.js';
+
+afterEach(cleanup);
+
+/** A loader the test resolves by hand, counting how often it was asked. */
+function deferredLoader<P>(component: ComponentType<P>) {
+  let resolve: (c: ComponentType<P>) => void = () => undefined;
+  const loader = {
+    calls: 0,
+    load: () => {
+      loader.calls += 1;
+      return new Promise<ComponentType<P>>((r) => {
+        resolve = r;
+      });
+    },
+    arrive: async () => {
+      await act(async () => {
+        resolve(component);
+      });
+    },
+  };
+  return loader;
+}
+
+/** A part with state of its own, so a remount is visible as that state resetting. */
+function Counter({ label }: { label: string }) {
+  const [n, setN] = useState(0);
+  return (
+    <Button tooltip='Count' onClick={() => setN(n + 1)}>
+      {label} {n}
+    </Button>
+  );
+}
+
+describe('lazyPart — a table part that loads when it is drawn', () => {
+  test('is not fetched until something renders it', () => {
+    const loader = deferredLoader(Counter);
+    lazyPart(loader.load);
+    expect(loader.calls).toBe(0);
+  });
+
+  test('draws its fallback, then the part — fetched once however many mount it', async () => {
+    const loader = deferredLoader(Counter);
+    const Part = lazyPart(loader.load);
+    render(
+      <>
+        <Part label='a' fallback={<span>waiting</span>} />
+        <Part label='b' fallback={<span>waiting</span>} />
+      </>,
+    );
+    expect(screen.getAllByText('waiting')).toHaveLength(2);
+    await loader.arrive();
+    expect(screen.getByText('a 0')).toBeTruthy();
+    expect(screen.getByText('b 0')).toBeTruthy();
+    expect(loader.calls).toBe(1);
+  });
+
+  test('🔴 a mounted part keeps its state across later renders — the chunk landing never remounts it', async () => {
+    const loader = deferredLoader(Counter);
+    const Part = lazyPart(loader.load);
+    const { rerender } = render(<Part label='n' />);
+    await loader.arrive();
+    fireEvent.click(screen.getByText('n 0'));
+    fireEvent.click(screen.getByText('n 1'));
+    // Now `loaded` is set; a re-render that re-decided direct-vs-lazy would swap the
+    // element type here and reset the count to 0.
+    rerender(<Part label='n' />);
+    expect(screen.getByText('n 2')).toBeTruthy();
+  });
+
+  test('after preload(), a new mount draws on its FIRST render — no fallback, no tick', async () => {
+    const loader = deferredLoader(Counter);
+    const Part = lazyPart(loader.load);
+    const preloaded = Part.preload();
+    await loader.arrive();
+    await preloaded;
+    render(<Part label='now' fallback={<span>waiting</span>} />);
+    expect(screen.queryByText('waiting')).toBeNull();
+    expect(screen.getByText('now 0')).toBeTruthy();
+    expect(loader.calls).toBe(1);
+  });
+
+  test('a failed fetch is asked again, not remembered as a failure', async () => {
+    let calls = 0;
+    const Part = lazyPart<{ label: string }>(() => {
+      calls += 1;
+      return calls === 1 ? Promise.reject(new Error('offline')) : Promise.resolve(Counter);
+    });
+    await expect(Part.preload()).rejects.toThrow('offline');
+    await Part.preload();
+    render(<Part label='again' />);
+    expect(screen.getByText('again 0')).toBeTruthy();
+    expect(calls).toBe(2);
+  });
+});

package/src/react/components/DataTable/lazyPart.tsx

@@ -0,0 +1,58 @@
+/**
+ * A part of the table that loads only when the table draws it — and that a caller
+ * can load AHEAD of time, after which it draws on the very first render (forge task 2309).
+ *
+ * The toolbar, the pager and the row kebab's menu reach Radix's Select, Menu and
+ * Popover: ~20 kB gzip that a read-only list never opens. `lazyWithReload` keeps
+ * them off every bundle that does not draw them. But `React.lazy` suspends on its
+ * first render even when the chunk is already in memory, so a part would arrive a
+ * tick late — in a spec that queries the search box right after `render(…)`, and
+ * for an app that knows it is about to draw a toolbar. `preload()` closes both:
+ * once it has resolved, a NEW mount renders the module directly, with no Suspense.
+ *
+ * 🔴 The choice between the direct module and the lazy one is made ONCE per mount
+ * (`useState`'s initializer). Re-deciding per render would swap the element type
+ * the moment the chunk lands, and React would REMOUNT the part — a half-typed search,
+ * an open menu, gone.
+ */
+import { type Attributes, type ComponentType, type ReactNode, Suspense, useState } from 'react';
+import { lazyWithReload } from '../../lazy/staleChunk.js';
+
+export interface LazyPart<P> {
+  (props: P & { fallback?: ReactNode }): ReactNode;
+  /** Fetch the part now. Resolves when a new mount would draw it synchronously. */
+  preload: () => Promise<void>;
+}
+
+export function lazyPart<P extends object>(load: () => Promise<ComponentType<P>>): LazyPart<P> {
+  let loaded: ComponentType<P> | null = null;
+  let pending: Promise<ComponentType<P>> | null = null;
+  const loadOnce = (): Promise<ComponentType<P>> => {
+    pending ??= load().then(
+      (component) => {
+        loaded = component;
+        return component;
+      },
+      (error: unknown) => {
+        pending = null; // a failed fetch may be asked again, not remembered forever
+        throw error;
+      },
+    );
+    return pending;
+  };
+  const Lazy = lazyWithReload(() => loadOnce().then((component) => ({ default: component })));
+
+  function Part({ fallback = null, ...props }: P & { fallback?: ReactNode }) {
+    const [Direct] = useState(() => loaded);
+    if (Direct) return <Direct {...(props as P)} />;
+    return (
+      <Suspense fallback={fallback}>
+        <Lazy {...(props as P & Attributes)} />
+      </Suspense>
+    );
+  }
+  Part.preload = async () => {
+    await loadOnce();
+  };
+  return Part;
+}

package/src/react/components/DataTable/rowHooks.spec.tsx

@@ -0,0 +1,289 @@
+/**
+ * The row-level hooks a list needs to render through `DataTable` rather than beside it —
+ * forge task 2302, measured against apps/music's hand-rolled track list: per-row attributes and
+ * handlers (`getRowProps`), a cell drawn by a function (`ColDef.render`), container-query column
+ * hiding (`ColDef.hideBelow` — its LAYOUT is gated in `e2e/table-window.spec.ts`, this pins the
+ * wiring), and header semantics a server-ordered list needs (controlled `sorting`,
+ * `sortDescFirst`, `enableSortingRemoval`, `sortDisabledReason`, a caller-owned `selectAll`).
+ */
+import { afterEach, beforeAll, describe, expect, mock, test } from 'bun:test';
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import type { SortingState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { DataTable, mergeRowProps, nextSortStack, preloadDataTableParts } from './DataTable.js';
+import type { ColDef } from './types.js';
+
+// The toolbar, pager and row menu are lazy (forge task 2309); loaded here, they draw on the
+// first render, as these specs query them. `lazyPart.spec.tsx` covers the lazy path itself.
+beforeAll(preloadDataTableParts);
+
+afterEach(cleanup);
+
+interface Song extends Record<string, unknown> {
+  id: string;
+  title: string;
+  plays: number;
+}
+
+const SONGS: Song[] = [
+  { id: 's1', title: 'Alpha', plays: 3 },
+  { id: 's2', title: 'Beta', plays: 9 },
+];
+
+const COLUMNS: ColDef<Song>[] = [
+  { key: 'title', label: 'Title', type: 'text', sortable: true },
+  { key: 'plays', label: 'Plays', type: 'number', sortable: true, sortDescFirst: true },
+];
+
+const rows = (root: HTMLElement) => [...root.querySelectorAll<HTMLTableRowElement>('tbody tr')];
+
+describe('getRowProps — a row is more than its cells', () => {
+  test('data-* identity, aria and handlers land on the row, with its absolute row number', () => {
+    const onDoubleClick = mock();
+    const { container } = render(
+      <DataTable<Song>
+        columns={COLUMNS}
+        data={SONGS}
+        getRowId={(row) => row.id}
+        mobileCards={false}
+        searchable={false}
+        getRowProps={(row, rowIndex) => ({
+          'data-track-id': row.id,
+          'data-n': rowIndex,
+          'aria-current': row.id === 's2' ? 'true' : undefined,
+          className: 'track-row',
+          onDoubleClick: () => onDoubleClick(row.id),
+        })}
+      />,
+    );
+    const [first, second] = rows(container);
+    expect(first?.dataset.trackId).toBe('s1');
+    expect(second?.dataset.n).toBe('1');
+    expect(second?.getAttribute('aria-current')).toBe('true');
+    expect(first?.getAttribute('aria-current')).toBeNull();
+    // Joined, not replaced: the table's own border class is still there beside the caller's.
+    expect(first?.className).toContain('track-row');
+    expect(first?.className).toContain('border-b');
+    fireEvent.doubleClick(second!);
+    expect(onDoubleClick).toHaveBeenCalledWith('s2');
+  });
+
+  test('a handler the table also sets runs the table\'s first, then the caller\'s — neither is lost', () => {
+    const order: string[] = [];
+    const { container } = render(
+      <DataTable<Song>
+        columns={COLUMNS}
+        data={SONGS}
+        mobileCards={false}
+        searchable={false}
+        onRowClick={(row) => order.push(`table:${row.id}`)}
+        getRowProps={(row) => ({ onClick: () => order.push(`caller:${row.id}`) })}
+      />,
+    );
+    fireEvent.click(rows(container)[0]!);
+    expect(order).toEqual(['table:s1', 'caller:s1']);
+  });
+
+  test('mergeRowProps: classes join, styles spread, the caller wins every other attribute', () => {
+    const merged = mergeRowProps(
+      { className: 'a', style: { height: 56 }, tabIndex: 0, draggable: false },
+      { className: 'b', style: { color: 'red' }, draggable: true },
+    );
+    expect(merged.className).toBe('a b');
+    expect(merged.style).toEqual({ height: 56, color: 'red' });
+    expect(merged.tabIndex).toBe(0);
+    expect(merged.draggable).toBe(true);
+  });
+});
+
+describe('ColDef.render — a cell drawn by the caller', () => {
+  test('wins over the type in the grid, reading the whole row', () => {
+    const columns: ColDef<Song>[] = [
+      { key: 'title', label: 'Title', type: 'text', render: (row) => <b data-testid={`t-${row.id}`}>{row.title}!</b> },
+    ];
+    const { getByTestId } = render(<DataTable<Song> columns={columns} data={SONGS} mobileCards={false} searchable={false} />);
+    expect(getByTestId('t-s2').textContent).toBe('Beta!');
+  });
+
+  test('and in the phone cards, which pass through the same seam', () => {
+    const columns: ColDef<Song>[] = [
+      { key: 'title', label: 'Title', type: 'text', render: (row) => <i data-testid={`c-${row.id}`}>{row.title}</i> },
+    ];
+    const { container } = render(<DataTable<Song> columns={columns} data={SONGS} searchable={false} />);
+    expect(container.querySelector('[data-cb-table-cards] [data-testid="c-s1"]')).not.toBeNull();
+  });
+});
+
+describe('ColDef.hideBelow — the grid sheds a column in a narrow container', () => {
+  test('the header cell and every body cell carry the same container-query hide', () => {
+    const columns: ColDef<Song>[] = [
+      { key: 'title', label: 'Title', type: 'text' },
+      { key: 'plays', label: 'Plays', type: 'number', hideBelow: 'md' },
+    ];
+    const { container } = render(<DataTable<Song> columns={columns} data={SONGS} mobileCards={false} searchable={false} />);
+    const heads = [...container.querySelectorAll('thead th')];
+    expect(heads[0]?.className).not.toContain('@max-');
+    expect(heads[1]?.className).toContain('@max-4xl:w-0!');
+    for (const row of rows(container)) {
+      const cells = row.querySelectorAll('td');
+      expect(cells[1]?.className).toContain('@max-4xl:w-0!');
+      expect(cells[0]?.className).not.toContain('@max-');
+    }
+  });
+});
+
+describe('header semantics for a list the SERVER orders', () => {
+  test('nextSortStack: descFirst starts descending; removable:false flips instead of dropping the key', () => {
+    expect(nextSortStack([], 'plays', false, { descFirst: true })).toEqual([{ id: 'plays', desc: true }]);
+    expect(nextSortStack([{ id: 'plays', desc: true }], 'plays', false, { descFirst: true })).toEqual([
+      { id: 'plays', desc: false },
+    ]);
+    // The third click: out, by default…
+    expect(nextSortStack([{ id: 'plays', desc: false }], 'plays', false, { descFirst: true })).toEqual([]);
+    // …and back to the first direction when the list always has an order.
+    expect(
+      nextSortStack([{ id: 'plays', desc: false }], 'plays', false, { descFirst: true, removable: false }),
+    ).toEqual([{ id: 'plays', desc: true }]);
+    // The old three-argument call is unchanged.
+    expect(nextSortStack([], 'title', true)).toEqual([{ id: 'title', desc: false }]);
+  });
+
+  test('controlled sorting: a click REPORTS the next sort, and the header shows what came back', () => {
+    const seen: SortingState[] = [];
+    function Host() {
+      const [sorting, setSorting] = useState<SortingState>([{ id: 'title', desc: false }]);
+      return (
+        <DataTable<Song>
+          columns={COLUMNS}
+          data={SONGS}
+          mobileCards={false}
+          searchable={false}
+          multiSort={false}
+          enableSortingRemoval={false}
+          sorting={sorting}
+          onSortingChange={(next) => {
+            seen.push(next);
+            setSorting(next);
+          }}
+        />
+      );
+    }
+    const { container, getByRole } = render(<Host />);
+    const sortOf = (label: string) =>
+      [...container.querySelectorAll('thead th')].find((th) => th.textContent?.includes(label))?.getAttribute('aria-sort');
+    expect(sortOf('Title')).toBe('ascending');
+    fireEvent.click(getByRole('button', { name: 'Plays' }));
+    expect(seen.at(-1)).toEqual([{ id: 'plays', desc: true }]);
+    expect(sortOf('Plays')).toBe('descending');
+    expect(sortOf('Title')).toBeNull();
+    fireEvent.click(getByRole('button', { name: 'Plays' }));
+    fireEvent.click(getByRole('button', { name: 'Plays' }));
+    // Never "unsorted": desc → asc → desc.
+    expect(seen.map((s) => s[0]?.desc)).toEqual([true, false, true]);
+  });
+
+  test('a controlled sort the caller does NOT take back leaves the header where the caller keeps it', () => {
+    const onSortingChange = mock();
+    const { container, getByRole } = render(
+      <DataTable<Song>
+        columns={COLUMNS}
+        data={SONGS}
+        mobileCards={false}
+        searchable={false}
+        sorting={[{ id: 'title', desc: false }]}
+        onSortingChange={onSortingChange}
+      />,
+    );
+    fireEvent.click(getByRole('button', { name: 'Plays' }));
+    expect(onSortingChange).toHaveBeenCalledTimes(1);
+    const title = [...container.querySelectorAll('thead th')].find((th) => th.textContent?.includes('Title'));
+    expect(title?.getAttribute('aria-sort')).toBe('ascending');
+  });
+
+  test('sortDisabledReason: the headers stay, inert, and say why', () => {
+    const onSortingChange = mock();
+    const { getByRole } = render(
+      <DataTable<Song>
+        columns={COLUMNS}
+        data={SONGS}
+        mobileCards={false}
+        searchable={false}
+        onSortingChange={onSortingChange}
+        sortDisabledReason='The list is in play order'
+      />,
+    );
+    const header = getByRole('button', { name: 'Plays — The list is in play order' });
+    expect(header.getAttribute('aria-disabled')).toBe('true');
+    fireEvent.click(header);
+    expect(onSortingChange).not.toHaveBeenCalled();
+  });
+
+  test('selectAll: the header box is the caller\'s — its state, its name, what a press does', () => {
+    const onChange = mock();
+    const { getByRole } = render(
+      <DataTable<Song>
+        columns={COLUMNS}
+        data={SONGS}
+        getRowId={(row) => row.id}
+        mobileCards={false}
+        searchable={false}
+        selectedIds={new Set(['s1'])}
+        onSelectionChange={() => {}}
+        selectAll={{ checked: 'indeterminate', label: '1 selected — press to select all 5,409', onChange }}
+      />,
+    );
+    const box = getByRole('checkbox', { name: '1 selected — press to select all 5,409' });
+    expect(box.getAttribute('aria-checked')).toBe('mixed');
+    fireEvent.click(box);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+});
+
+describe('scrollClassName — a name for the box that scrolls', () => {
+  test('lands on the scroll container, not the outer box', () => {
+    const { container } = render(
+      <DataTable<Song>
+        columns={COLUMNS}
+        data={SONGS}
+        mobileCards={false}
+        searchable={false}
+        serverWindow={{ start: 0, total: 2, rowHeight: 40 }}
+        className='outer'
+        scrollClassName='track-list'
+      />,
+    );
+    const scroller = container.querySelector('.track-list');
+    expect(scroller?.querySelector('table')).not.toBeNull();
+    expect(container.querySelector('.outer')?.classList.contains('track-list')).toBe(false);
+    // …and says it is the design system's scroller, as ScrollArea does.
+    expect(scroller?.hasAttribute('data-cb-table-scroll')).toBe(true);
+  });
+});
+
+describe('ColDef.leading — a drag handle leads the row, before the checkbox', () => {
+  test('header and body put the leading column first, the checkbox second, the rest after', () => {
+    const columns: ColDef<Song>[] = [
+      { key: 'title', label: 'Title', type: 'text' },
+      { key: 'grip', label: 'Grip', type: 'text', leading: true, render: (row) => <i data-grip={row.id} /> },
+    ];
+    const { container } = render(
+      <DataTable<Song>
+        columns={columns}
+        data={SONGS}
+        getRowId={(row) => row.id}
+        mobileCards={false}
+        searchable={false}
+        selectedIds={new Set()}
+        onSelectionChange={() => {}}
+      />,
+    );
+    const head = [...container.querySelectorAll('thead th')];
+    expect(head[0]?.textContent).toBe('Grip');
+    expect(head[1]?.querySelector('[role="checkbox"]')).not.toBeNull();
+    expect(head[2]?.textContent).toBe('Title');
+    const cells = [...rows(container)[0]!.children];
+    expect(cells[0]?.querySelector('[data-grip="s1"]')).not.toBeNull();
+    expect(cells[1]?.querySelector('[role="checkbox"]')).not.toBeNull();
+    expect(cells[2]?.textContent).toBe('Alpha');
+  });
+});

package/src/react/components/DataTable/selection.spec.tsx

@@ -1,10 +1,14 @@
-import { afterEach, describe, expect, test } from 'bun:test';
+import { afterEach, beforeAll, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import { useState } from 'react';
 import { hoverHint } from '../../../testing/tooltip.js';
-import { DataTable, type DataTableProps } from './DataTable.js';
+import { DataTable, type DataTableProps, preloadDataTableParts } from './DataTable.js';
 import type { ColDef } from './types.js';
 
+// The toolbar, pager and row menu are lazy (forge task 2309); loaded here, they draw on the
+// first render, as these specs query them. `lazyPart.spec.tsx` covers the lazy path itself.
+beforeAll(preloadDataTableParts);
+
 afterEach(cleanup);
 
 interface Game extends Record<string, unknown> {

package/src/react/components/DataTable/tableSystem.spec.tsx

@@ -6,14 +6,18 @@
  * table's contract and is already 500 lines; a red here says "the new table
  * system broke", which is a different sentence from "the table broke".
  */
-import { describe, expect, mock, test } from 'bun:test';
+import { beforeAll, describe, expect, mock, test } from 'bun:test';
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import { RESUME_KEY_PATTERN } from 'cursedbelt-server/resume';
-import { DataTable, nextSortStack } from './DataTable.js';
+import { DataTable, nextSortStack, preloadDataTableParts } from './DataTable.js';
 import { CB_ROW_MIME, isRowDrag, readRowDrag, rowDropTargetProps, writeRowDrag } from './rowDrag.js';
 import type { ColDef } from './types.js';
 import { tableViewResumeKey } from './useTableViewMode.js';
 
+// The toolbar, pager and row menu are lazy (forge task 2309); loaded here, they draw on the
+// first render, as these specs query them. `lazyPart.spec.tsx` covers the lazy path itself.
+beforeAll(preloadDataTableParts);
+
 interface Track extends Record<string, unknown> {
   id: string;
   title: string;