@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/shell/GlobalSearch/fixtures.ts

@@ -0,0 +1,64 @@
+import {
+  BarChart3,
+  CreditCard,
+  FileText,
+  FolderKanban,
+  FolderPlus,
+  Home,
+  Rocket,
+  Settings,
+  UserPlus,
+  Users,
+} from '@gntik-ai/icons';
+import type { CommandItem } from '@gntik-ai/ui';
+
+export const globalSearchPages: CommandItem[] = [
+  { id: 'page-overview', label: 'Overview', icon: Home, shortcut: ['G', 'O'] },
+  { id: 'page-projects', label: 'Projects', icon: FolderKanban, shortcut: ['G', 'P'] },
+  { id: 'page-deployments', label: 'Deployments', icon: Rocket },
+  { id: 'page-analytics', label: 'Analytics', icon: BarChart3 },
+  { id: 'page-members', label: 'Members', icon: Users, keywords: ['team', 'people'] },
+  { id: 'page-billing', label: 'Billing', icon: CreditCard, keywords: ['invoices', 'plan'] },
+  { id: 'page-settings', label: 'Settings', icon: Settings, shortcut: ['⌘', ','] },
+];
+
+export const globalSearchRecords: CommandItem[] = [
+  {
+    id: 'record-web-frontend',
+    label: 'web-frontend',
+    icon: FolderKanban,
+    mono: true,
+    description: 'Project · eu-west',
+  },
+  { id: 'record-billing-api', label: 'billing-api', icon: FolderKanban, mono: true, description: 'Project · us-east' },
+  {
+    id: 'record-inv-2041',
+    label: 'INV-2041',
+    icon: FileText,
+    mono: true,
+    description: 'Invoice · Orbit Freight · overdue',
+  },
+  {
+    id: 'record-dana',
+    label: 'Dana Whitfield',
+    icon: Users,
+    description: 'Member · Owner',
+    keywords: ['dana@example.com'],
+  },
+];
+
+export const globalSearchActions: CommandItem[] = [
+  { id: 'action-new-project', label: 'Create project', icon: FolderPlus, shortcut: ['⌘', 'N'], keywords: ['new'] },
+  {
+    id: 'action-deploy',
+    label: 'Deploy to production',
+    icon: Rocket,
+    description: 'Promote the latest build of the current project',
+  },
+  { id: 'action-invite', label: 'Invite member', icon: UserPlus, keywords: ['team', 'people'] },
+];
+
+export const globalSearchRecent: CommandItem[] = [
+  { id: 'recent-web-frontend', label: 'web-frontend', icon: FolderKanban, mono: true, description: 'Project' },
+  { id: 'recent-billing', label: 'Billing', icon: CreditCard, description: 'Page' },
+];

package/src/shell/index.ts

@@ -0,0 +1,11 @@
+export * from './AppSidebar/AppSidebar';
+export * from './AppSidebar/fixtures';
+export { meta as appSidebarMeta } from './AppSidebar/block.meta';
+export * from './AppTopbar/AppTopbar';
+export * from './AppTopbar/fixtures';
+export { meta as appTopbarMeta } from './AppTopbar/block.meta';
+export * from './EnvironmentBadge/EnvironmentBadge';
+export { meta as environmentBadgeMeta } from './EnvironmentBadge/block.meta';
+export * from './GlobalSearch/GlobalSearch';
+export * from './GlobalSearch/fixtures';
+export { meta as globalSearchMeta } from './GlobalSearch/block.meta';

package/src/styles.css

@@ -0,0 +1,2 @@
+/* @gntik-ai/blocks — lets Tailwind v4 see this package's classes. Import after "@gntik-ai/ui/styles.css". */
+@source "../dist";

package/src/tables/DataTable/DataTable.edit-views.test.tsx

@@ -0,0 +1,249 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { DataTable } from './DataTable';
+import type { DataTableColumn } from './data-table-utils';
+import EditableDataTable from './examples/editable';
+import SavedViewsDataTable from './examples/saved-views';
+import { DEPLOYMENT_ROWS, type DeploymentRow } from './fixtures';
+import { newViewId, sameViewState, type DataTableView } from './views';
+
+const first = DEPLOYMENT_ROWS[0]!;
+const second = DEPLOYMENT_ROWS[1]!;
+const editColumns: Array<DataTableColumn<DeploymentRow>> = [
+  { id: 'name', header: 'Deployment', accessor: (r) => r.name, editable: true },
+  { id: 'region', header: 'Region', accessor: (r) => r.region },
+  {
+    id: 'cost',
+    header: 'Cost',
+    accessor: (r) => r.cost,
+    editable: (r) => r.status !== 'failed',
+    editor: { type: 'number', min: 0, max: 1000 },
+  },
+];
+const rows = DEPLOYMENT_ROWS.slice(0, 3);
+const cell = (text: string) => screen.getByRole('button', { name: text });
+
+describe('DataTable inline editing', () => {
+  it('edits with Enter, commits with Enter and returns focus', async () => {
+    const user = userEvent.setup();
+    const onCellEdit = vi.fn();
+    render(<DataTable rows={rows} columns={editColumns} paginated={false} onCellEdit={onCellEdit} />);
+    const trigger = cell(first.name);
+    expect(trigger).toHaveAccessibleDescription('Press Enter or F2 to edit.');
+    trigger.focus();
+    await user.keyboard('{Enter}');
+    const input = screen.getByRole('textbox', { name: `Deployment for ${first.name}` });
+    expect(input).toHaveFocus();
+    await user.clear(input);
+    await user.type(input, 'renamed{Enter}');
+    expect(onCellEdit).toHaveBeenCalledWith({
+      row: first,
+      rowId: first.id,
+      columnId: 'name',
+      value: 'renamed',
+      previous: first.name,
+    });
+    await waitFor(() => expect(cell(first.name)).toHaveFocus());
+  });
+
+  it('starts with F2 and cancels with Escape', async () => {
+    const user = userEvent.setup();
+    const onCellEdit = vi.fn();
+    render(<DataTable rows={rows} columns={editColumns} paginated={false} onCellEdit={onCellEdit} />);
+    cell(first.name).focus();
+    await user.keyboard('{F2}');
+    await user.keyboard('xyz{Escape}');
+    expect(onCellEdit).not.toHaveBeenCalled();
+    expect(screen.queryByRole('textbox')).toBeNull();
+    expect(cell(first.name)).toHaveFocus();
+  });
+
+  it('commits with Tab and moves to the next editable cell', async () => {
+    const user = userEvent.setup();
+    const onCellEdit = vi.fn();
+    render(<DataTable rows={rows} columns={editColumns} paginated={false} onCellEdit={onCellEdit} />);
+    cell(first.name).focus();
+    await user.keyboard('{Enter}{End}-v2{Tab}');
+    expect(onCellEdit).toHaveBeenLastCalledWith(
+      expect.objectContaining({ columnId: 'name', value: `${first.name}-v2` }),
+    );
+    await waitFor(() => expect(cell(String(first.cost))).toHaveFocus());
+  });
+
+  it('shows a rejection inline and keeps editing', async () => {
+    const user = userEvent.setup();
+    const onCellEdit = vi.fn(async () => 'That name is taken.');
+    const { container } = render(
+      <DataTable rows={rows} columns={editColumns} paginated={false} onCellEdit={onCellEdit} />,
+    );
+    cell(first.name).focus();
+    await user.keyboard(`{Enter}{Control>}a{/Control}${second.name}{Enter}`);
+    const alert = await screen.findByRole('alert');
+    expect(alert).toHaveTextContent('That name is taken.');
+    const input = screen.getByRole('textbox', { name: `Deployment for ${first.name}` });
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+    expect(input).toHaveAccessibleDescription('That name is taken.');
+    expect(input).toHaveFocus();
+    await expectNoAxeViolations(container);
+  });
+
+  it('reports thrown errors and validates numbers before calling onCellEdit', async () => {
+    const user = userEvent.setup();
+    const onCellEdit = vi.fn(() => {
+      throw new Error('Server unavailable');
+    });
+    render(<DataTable rows={rows} columns={editColumns} paginated={false} onCellEdit={onCellEdit} />);
+    cell(String(first.cost)).focus();
+    await user.keyboard('{Enter}');
+    const input = screen.getByRole('spinbutton', { name: `Cost for ${first.name}` });
+    await user.clear(input);
+    await user.type(input, '5000{Enter}');
+    expect(screen.getByRole('alert')).toHaveTextContent('Enter 1000 or less.');
+    expect(onCellEdit).not.toHaveBeenCalled();
+    await user.clear(input);
+    await user.type(input, '12{Enter}');
+    expect(onCellEdit).toHaveBeenLastCalledWith(expect.objectContaining({ value: 12 }));
+    expect(await screen.findByRole('alert')).toHaveTextContent('Server unavailable');
+  });
+
+  it('edits with the select editor of the example and shows server rejections', async () => {
+    const user = userEvent.setup();
+    render(<EditableDataTable />);
+    const statusTrigger = within(screen.getAllByRole('row')[1]!).getAllByRole('button')[1]!;
+    statusTrigger.focus();
+    await user.keyboard('{Enter}');
+    const select = screen.getByRole('combobox', { name: `Status for ${first.name}` });
+    await user.selectOptions(select, 'paused');
+    await user.keyboard('{Enter}');
+    await waitFor(() => expect(within(screen.getAllByRole('row')[1]!).getByText('Paused')).toBeInTheDocument());
+    // Example: budgets above $1,000 are rejected by the simulated server.
+    const budget = within(screen.getAllByRole('row')[1]!).getAllByRole('button')[2]!;
+    budget.focus();
+    await user.keyboard('{Enter}{Control>}a{/Control}1500{Enter}');
+    expect(await screen.findByRole('alert')).toHaveTextContent('Budgets above $1,000 need approval.');
+  });
+
+  it('per-row editable functions leave other cells read-only', () => {
+    const failing = { ...first, id: 'x', status: 'failed' as const, cost: 77 };
+    render(<DataTable rows={[failing]} columns={editColumns} paginated={false} onCellEdit={() => undefined} />);
+    expect(screen.queryByRole('button', { name: '77' })).toBeNull();
+    expect(screen.getByText('77').closest('td')).toBeInTheDocument();
+  });
+});
+
+describe('DataTable saved views', () => {
+  const views: DataTableView[] = [
+    {
+      id: 'expensive',
+      name: 'Most expensive',
+      state: { sort: { columnId: 'cost', direction: 'descending' }, hiddenColumns: ['region', 'updated'] },
+    },
+    {
+      id: 'grouped',
+      name: 'By region',
+      state: { groupBy: 'region', pinnedColumns: { left: ['name'] }, filters: { q: 'api' } },
+    },
+  ];
+
+  it('switches views from the menu', async () => {
+    const user = userEvent.setup();
+    const onActiveViewChange = vi.fn();
+    const onFiltersChange = vi.fn();
+    const onGroupByChange = vi.fn();
+    const { container } = render(
+      <DataTable
+        defaultViews={views}
+        onActiveViewChange={onActiveViewChange}
+        onFiltersChange={onFiltersChange}
+        onGroupByChange={onGroupByChange}
+        paginated={false}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: 'Default view' }));
+    await user.click(await screen.findByRole('menuitemradio', { name: 'Most expensive' }));
+    expect(onActiveViewChange).toHaveBeenLastCalledWith('expensive');
+    expect(screen.getByRole('columnheader', { name: /Cost/ })).toHaveAttribute('aria-sort', 'descending');
+    expect(screen.queryByRole('columnheader', { name: /Region/ })).toBeNull();
+    await user.click(screen.getByRole('button', { name: 'Most expensive' }));
+    await user.click(await screen.findByRole('menuitemradio', { name: 'By region' }));
+    expect(onFiltersChange).toHaveBeenLastCalledWith({ q: 'api' });
+    expect(onGroupByChange).toHaveBeenLastCalledWith('region');
+    expect(screen.getAllByRole('rowheader')[0]).toHaveAttribute('scope', 'rowgroup');
+    expect(screen.getByRole('columnheader', { name: /Region/ })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /Deployment/ })).toHaveClass('sticky');
+    await expectNoAxeViolations(container);
+  });
+
+  it('marks changes, resets and saves them to the active view', async () => {
+    const user = userEvent.setup();
+    const onViewsChange = vi.fn();
+    render(<DataTable defaultViews={views} defaultActiveViewId="expensive" onViewsChange={onViewsChange} />);
+    // Seeded from the active view.
+    expect(screen.getByRole('columnheader', { name: /Cost/ })).toHaveAttribute('aria-sort', 'descending');
+    await user.click(screen.getByRole('button', { name: /Status/ }));
+    const trigger = screen.getByRole('button', { name: 'Most expensive (modified)' });
+    await user.click(trigger);
+    await user.click(await screen.findByRole('menuitem', { name: 'Reset changes' }));
+    expect(screen.getByRole('columnheader', { name: /Cost/ })).toHaveAttribute('aria-sort', 'descending');
+    expect(screen.getByRole('button', { name: 'Most expensive' })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /Status/ }));
+    await user.click(screen.getByRole('button', { name: 'Most expensive (modified)' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Save changes' }));
+    expect(onViewsChange.mock.lastCall?.[0][0].state.sort).toEqual({ columnId: 'status', direction: 'ascending' });
+    expect(screen.getByRole('button', { name: 'Most expensive' })).toBeInTheDocument();
+  });
+
+  it('saves as a new view, renames and deletes it', async () => {
+    const user = userEvent.setup();
+    const onViewsChange = vi.fn();
+    render(<DataTable defaultViews={views} onViewsChange={onViewsChange} resizable />);
+    screen.getByRole('separator', { name: 'Resize Region column' }).focus();
+    await user.keyboard('{ArrowRight}');
+    await user.click(screen.getByRole('button', { name: 'Default view (modified)' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Save as new view…' }));
+    const dialog = await screen.findByRole('dialog', { name: 'Save view' });
+    await user.type(within(dialog).getByRole('textbox', { name: 'View name' }), 'Wide region{Enter}');
+    const saved = onViewsChange.mock.lastCall?.[0] as DataTableView[];
+    expect(saved).toHaveLength(3);
+    expect(saved[2]).toMatchObject({
+      id: 'wide-region',
+      name: 'Wide region',
+      state: { columnWidths: { region: 170 } },
+    });
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    await user.click(screen.getByRole('button', { name: 'Wide region' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Rename view…' }));
+    const rename = await screen.findByRole('dialog', { name: 'Rename view' });
+    const field = within(rename).getByRole('textbox', { name: 'View name' });
+    expect(field).toHaveValue('Wide region');
+    await user.clear(field);
+    await user.type(field, 'Regions{Enter}');
+    expect((onViewsChange.mock.lastCall?.[0] as DataTableView[])[2]?.name).toBe('Regions');
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    await user.click(screen.getByRole('button', { name: 'Regions' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Delete view' }));
+    expect(onViewsChange.mock.lastCall?.[0]).toHaveLength(2);
+    expect(screen.getByRole('button', { name: /^Default view/ })).toBeInTheDocument();
+  });
+
+  it('the example restores filters with a view', async () => {
+    const user = userEvent.setup();
+    render(<SavedViewsDataTable />);
+    await user.click(screen.getByRole('button', { name: 'Default view' }));
+    await user.click(await screen.findByRole('menuitemradio', { name: 'Needs attention' }));
+    const failedCount = DEPLOYMENT_ROWS.filter((r) => r.status === 'failed').length;
+    await waitFor(() =>
+      expect(within(screen.getAllByRole('rowgroup')[1]!).getAllByRole('row')).toHaveLength(failedCount),
+    );
+    await user.click(screen.getByRole('button', { name: 'Needs attention' }));
+    await user.click(await screen.findByRole('menuitemradio', { name: 'Default view' }));
+    await waitFor(() => expect(within(screen.getAllByRole('rowgroup')[1]!).getAllByRole('row')).toHaveLength(10));
+  });
+
+  it('view helpers', () => {
+    expect(sameViewState({ hiddenColumns: ['b', 'a'] }, { hiddenColumns: ['a', 'b'], sort: null })).toBe(true);
+    expect(sameViewState({ columnWidths: { a: 1 } }, {})).toBe(false);
+    expect(newViewId('My view!', [{ id: 'my-view', name: 'x', state: {} }])).toBe('my-view-2');
+  });
+});

package/src/tables/DataTable/DataTable.labels.test.tsx

@@ -0,0 +1,291 @@
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nProvider } from '@gntik-ai/ui';
+import { DataTable } from './DataTable';
+import type { DataTableLabels } from './labels';
+
+const rows = [
+  { id: 'a', name: 'Alpha', region: 'West' },
+  { id: 'b', name: 'Beta', region: 'West' },
+];
+const columns = [
+  { id: 'name', header: 'Name', accessor: (r: (typeof rows)[number]) => r.name, width: 200 },
+  { id: 'region', header: 'Region', accessor: (r: (typeof rows)[number]) => r.region, width: 160 },
+];
+const labels = {
+  scrollRegion: 'Tabla con desplazamiento',
+  columns: 'Columnas',
+  visibleColumns: 'Columnas visibles',
+  pinColumns: 'Fijar columnas',
+  pinnedLeft: 'Izquierda',
+  pinnedRight: 'Derecha',
+  pinLeft: 'Fijar izquierda',
+  pinRight: 'Fijar derecha',
+  unpinned: 'Sin fijar',
+  density: 'Densidad',
+  comfortable: 'Cómoda',
+  compact: 'Compacta',
+  defaultView: 'Vista predeterminada',
+  defaultViewOption: 'Sin vista',
+  modified: '(modificada)',
+  views: 'Vistas',
+  saveChanges: 'Guardar cambios',
+  saveAs: 'Guardar como…',
+  renameView: 'Renombrar vista…',
+  deleteView: 'Eliminar vista',
+  resetChanges: 'Restablecer cambios',
+  saveViewTitle: 'Nueva vista',
+  renameViewTitle: 'Cambiar nombre',
+  viewName: 'Nombre de vista',
+  cancel: 'Cancelar',
+  saveView: 'Guardar vista',
+  rename: 'Renombrar',
+  closeDialog: 'Cerrar diálogo',
+  selectionCount: vi.fn((n: number) => `${n} seleccionadas`),
+  selectAll: 'Seleccionar página',
+  selection: 'Selección',
+  actions: 'Acciones',
+  selectRow: vi.fn((name: string) => `Seleccionar ${name}`),
+  rowActions: vi.fn((name: string) => `Acciones de ${name}`),
+  resizeColumn: vi.fn((name: string) => `Cambiar ancho de ${name}`),
+  columnWidth: vi.fn((width: number) => `${width} píxeles`),
+} satisfies Partial<DataTableLabels>;
+
+it('replaces table menus, selection announcements, resize names and saved-view dialogs', async () => {
+  const user = userEvent.setup();
+  const { container } = render(
+    <DataTable
+      rows={rows}
+      columns={columns}
+      caption="Items"
+      paginated={false}
+      resizable
+      showPinMenu
+      defaultViews={[]}
+      labels={labels}
+      rowActions={() => [{ label: 'Inspect', onClick: () => {} }]}
+    />,
+  );
+  expect(screen.getByRole('group', { name: 'Densidad' })).toBeVisible();
+  await user.click(screen.getByRole('button', { name: 'Compacta' }));
+  await user.click(screen.getByRole('button', { name: 'Cómoda' }));
+  expect(screen.getByRole('checkbox', { name: 'Seleccionar página' })).toBeVisible();
+  await user.click(screen.getByRole('checkbox', { name: 'Seleccionar Alpha' }));
+  expect(container.querySelector('[aria-live]')?.textContent).toBe('1 seleccionadas');
+  expect(labels.selectionCount).toHaveBeenLastCalledWith(1);
+  expect(labels.selectRow).toHaveBeenCalledWith('Alpha');
+  expect(screen.getByRole('button', { name: 'Acciones de Alpha' })).toBeVisible();
+  const handle = screen.getByRole('separator', { name: 'Cambiar ancho de Name' });
+  expect(handle).toHaveAttribute('aria-valuetext', '200 píxeles');
+  expect(labels.resizeColumn).toHaveBeenCalledWith('Name');
+  expect(labels.columnWidth).toHaveBeenCalledWith(200);
+  await user.click(screen.getByRole('button', { name: 'Columnas' }));
+  expect(await screen.findByText('Columnas visibles')).toBeVisible();
+  expect(screen.getByText('Fijar columnas')).toBeVisible();
+  await user.click(screen.getByRole('menuitemcheckbox', { name: 'Region' }));
+  await user.keyboard('{Escape}');
+  await user.click(screen.getByRole('button', { name: 'Vista predeterminada (modificada)' }));
+  expect(await screen.findByText('Vistas', { exact: true })).toBeVisible();
+  expect(screen.getByRole('menuitemradio', { name: 'Sin vista' })).toBeVisible();
+  for (const name of ['Guardar cambios', 'Renombrar vista…', 'Eliminar vista', 'Restablecer cambios'])
+    expect(screen.getByRole('menuitem', { name })).toBeVisible();
+  await user.click(screen.getByRole('menuitem', { name: 'Guardar como…' }));
+  expect(await screen.findByRole('dialog', { name: 'Nueva vista' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Cerrar diálogo' })).toBeVisible();
+  await user.type(screen.getByRole('textbox', { name: 'Nombre de vista' }), 'My view');
+  await user.click(screen.getByRole('button', { name: 'Guardar vista' }));
+  await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+  await user.click(screen.getByRole('button', { name: 'My view' }));
+  await user.click(await screen.findByRole('menuitem', { name: 'Renombrar vista…' }));
+  expect(await screen.findByRole('dialog', { name: 'Cambiar nombre' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Renombrar' })).toBeVisible();
+  await user.click(screen.getByRole('button', { name: 'Cancelar' }));
+  await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+});
+
+it('replaces group counts, ungrouped names, empty and loading states, and the nested footer', async () => {
+  const selectGroup = vi.fn((name: string) => `Todo en ${name}`);
+  const groupRows = vi.fn((count: number) => `filas: ${count}`);
+  const loading = vi.fn((caption: string) => `Cargando ${caption}`);
+  const extra: Partial<DataTableLabels> = {
+    selectGroup,
+    groupRows,
+    noGroup: 'Sin grupo',
+    emptyTitle: 'Sin resultados',
+    emptyDescription: 'Cambie los filtros',
+    loading,
+    rowsPerPage: 'Filas',
+    rowsPerPageLabel: 'Por página',
+    rangeSummary: (a, b, n) => `${a}/${b}/${n}`,
+    paginationNav: (noun) => `Páginas de ${noun}`,
+    previous: 'Atrás',
+    next: 'Adelante',
+    page: (n) => `Ir a ${n}`,
+  };
+  const { rerender } = render(
+    <DataTable rows={rows} columns={columns} groupBy={() => ''} labels={extra} caption="Items" />,
+  );
+  expect(screen.getByRole('checkbox', { name: 'Todo en Sin grupo' })).toBeVisible();
+  expect(screen.getByRole('button', { name: 'Sin grupo 2 filas: 2' })).toBeVisible();
+  expect(selectGroup).toHaveBeenCalledWith('Sin grupo');
+  expect(groupRows).toHaveBeenCalledWith(2);
+  expect(screen.getByRole('navigation', { name: 'Páginas de Items' })).toBeVisible();
+  expect(screen.getByRole('combobox', { name: 'Por página' })).toBeVisible();
+  expect(screen.getByText('1/2/2')).toBeVisible();
+  rerender(<DataTable rows={[]} columns={columns} labels={extra} caption="Items" />);
+  expect(screen.getByText('Sin resultados')).toBeVisible();
+  expect(screen.getByText('Cambie los filtros')).toBeVisible();
+  rerender(<DataTable rows={rows} columns={columns} labels={extra} caption="Items" loading />);
+  expect(screen.getByRole('status').textContent).toBe('Cargando Items');
+  expect(loading).toHaveBeenCalledWith('Items');
+});
+
+it('replaces built-in inline editor names, hints and validation errors', async () => {
+  const user = userEvent.setup();
+  const editLabel = vi.fn((column: string, row: string) => `${column} de ${row}`);
+  const minimumValue = vi.fn((n: number) => `Mínimo ${n}`);
+  const maximumValue = vi.fn((n: number) => `Máximo ${n}`);
+  const editable = [
+    {
+      id: 'name',
+      header: 'Name',
+      accessor: (r: (typeof rows)[number]) => r.name,
+      editable: true,
+      editor: { type: 'number' as const, min: 1, max: 10 },
+    },
+  ];
+  render(
+    <DataTable
+      rows={rows}
+      columns={editable}
+      paginated={false}
+      onCellEdit={() => false}
+      labels={{
+        editHint: 'Pulse Intro para editar',
+        editLabel,
+        editError: 'No se guardó',
+        enterNumber: 'Escriba un número',
+        minimumValue,
+        maximumValue,
+      }}
+    />,
+  );
+  expect(screen.getByRole('button', { name: 'Alpha' })).toHaveAccessibleDescription('Pulse Intro para editar');
+  await user.click(screen.getByRole('button', { name: 'Alpha' }));
+  const input = screen.getByRole('spinbutton', { name: 'Name de Alpha' });
+  expect(editLabel).toHaveBeenCalledWith('Name', 'Alpha');
+  await user.clear(input);
+  await user.type(input, '0{Enter}');
+  expect(await screen.findByRole('alert')).toHaveTextContent('Mínimo 1');
+  expect(minimumValue).toHaveBeenCalledWith(1);
+  await user.clear(input);
+  await user.type(input, '11{Enter}');
+  expect(screen.getByRole('alert')).toHaveTextContent('Máximo 10');
+  expect(maximumValue).toHaveBeenCalledWith(10);
+  await user.clear(input);
+  await user.type(input, '5{Enter}');
+  expect(await screen.findByText('No se guardó')).toBeVisible();
+});
+
+it('keeps provider translations and legacy literals under a partial override', () => {
+  const { container, rerender } = render(
+    <I18nProvider locale="es">
+      <DataTable rows={rows} columns={columns} paginated={false} defaultViews={[]} defaultSelectedIds={['a']} />
+    </I18nProvider>,
+  );
+  const table = container.querySelector('table')?.outerHTML;
+  const groupName = screen.getByRole('group').getAttribute('aria-label');
+  rerender(
+    <I18nProvider locale="es">
+      <DataTable
+        rows={rows}
+        columns={columns}
+        paginated={false}
+        defaultViews={[]}
+        defaultSelectedIds={['a']}
+        labels={{ defaultView: 'Custom view' }}
+      />
+    </I18nProvider>,
+  );
+  expect(container.querySelector('table')?.outerHTML).toBe(table);
+  expect(screen.getByRole('group')).toHaveAttribute('aria-label', groupName);
+  expect(screen.getByRole('button', { name: 'Custom view' })).toBeVisible();
+  expect(screen.getByText('1 selected')).toBeVisible();
+});
+
+it('retains the published text-node boundaries for default selection and loading summaries', () => {
+  const { container, rerender } = render(
+    <DataTable rows={rows} columns={columns} defaultSelectedIds={['a']} paginated={false} caption="Items" />,
+  );
+  expect([...container.querySelector('[aria-live]')!.childNodes].map((node) => node.textContent)).toEqual([
+    '1',
+    ' selected',
+  ]);
+  rerender(<DataTable rows={rows} columns={columns} loading caption="Items" />);
+  expect([...screen.getByRole('status').childNodes].map((node) => node.textContent)).toEqual([
+    'Loading ',
+    'items',
+    '…',
+  ]);
+});
+
+it('replaces every pin option and the single-selection heading without translating caller radio names', async () => {
+  const user = userEvent.setup({ pointerEventsCheck: 0 });
+  const full: DataTableLabels = {
+    ...labels,
+    selectGroup: (group) => `Grupo ${group}`,
+    groupRows: (count) => `${count} filas`,
+    noGroup: 'Sin grupo',
+    emptyTitle: 'Vacío',
+    emptyDescription: 'Sin coincidencias',
+    loading: (caption) => `Cargando ${caption}`,
+    editHint: 'Editar',
+    editLabel: (column, row) => `${column} de ${row}`,
+    editError: 'Error al guardar',
+    enterNumber: 'Número requerido',
+    minimumValue: (min) => `Mínimo ${min}`,
+    maximumValue: (max) => `Máximo ${max}`,
+    rowsPerPage: 'Filas por página',
+    rowsPerPageLabel: 'Elegir tamaño',
+    rangeSummary: (from, to, total) => `${from}|${to}|${total}`,
+    paginationNav: (noun) => `Páginas de ${noun}`,
+    previous: 'Anterior',
+    next: 'Siguiente',
+    page: (n) => `Página ${n}`,
+  };
+  const { rerender } = render(
+    <I18nProvider locale="es">
+      <DataTable rows={rows} columns={columns} paginated={false} showPinMenu labels={full} />
+    </I18nProvider>,
+  );
+  await user.click(screen.getByRole('button', { name: 'Columnas' }));
+  const submenu = await screen.findByRole('menuitem', { name: 'Name' });
+  act(() => submenu.focus());
+  await user.keyboard('{ArrowRight}');
+  for (const name of ['Fijar izquierda', 'Fijar derecha', 'Sin fijar'])
+    expect(await screen.findByRole('menuitemradio', { name })).toBeVisible();
+  await user.click(screen.getByRole('menuitemradio', { name: 'Fijar izquierda' }));
+  await waitFor(() => expect(screen.queryByRole('menu')).toBeNull());
+  await waitFor(() => expect(document.querySelector('[data-base-ui-focus-guard]')).toBeNull());
+  await user.click(screen.getByRole('button', { name: 'Columnas' }));
+  await screen.findByRole('menu');
+  expect(await screen.findByRole('menuitem', { name: /Name.*Izquierda/ })).toHaveAccessibleName('NameIzquierda');
+  act(() => screen.getByRole('menuitem', { name: /Name.*Izquierda/ }).focus());
+  await user.keyboard('{ArrowRight}');
+  await user.click(await screen.findByRole('menuitemradio', { name: 'Fijar derecha' }));
+  await waitFor(() => expect(screen.queryByRole('menu')).toBeNull());
+  await waitFor(() => expect(document.querySelector('[data-base-ui-focus-guard]')).toBeNull());
+  await user.click(screen.getByRole('button', { name: 'Columnas' }));
+  expect(await screen.findByRole('menuitem', { name: /Name.*Derecha/ })).toBeVisible();
+  await user.keyboard('{Escape}');
+  await waitFor(() => expect(screen.queryByRole('menu')).toBeNull());
+  await waitFor(() => expect(document.querySelector('[data-base-ui-focus-guard]')).toBeNull());
+  rerender(
+    <I18nProvider locale="es">
+      <DataTable rows={rows} columns={columns} labels={full} selectionMode="single" legend="Items" />
+    </I18nProvider>,
+  );
+  expect(screen.getByRole('columnheader', { name: 'Selección' })).toBeInTheDocument();
+  expect(screen.getByRole('radio', { name: 'Alpha' })).toBeVisible();
+  expect(screen.queryByRole('radio', { name: 'Seleccionar Alpha' })).toBeNull();
+});