@gntik-ai/blocks 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gntik-ai/blocks",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "gntik-ui blocks: page chrome, data display, tables, forms, feedback, billing, team and builder sections composed from @gntik-ai/ui.",
   "license": "MIT",
   "type": "module",
@@ -40,7 +40,7 @@
     "@gntik-ai/flow": "0.5.0",
     "@gntik-ai/icons": "0.5.0",
     "@gntik-ai/tokens": "0.2.1",
-    "@gntik-ai/ui": "0.7.0",
+    "@gntik-ai/ui": "0.9.0",
     "lucide-react": "^1.48.0"
   },
   "devDependencies": {

package/src/builders/LogViewer/LogViewer.test.tsx

@@ -95,3 +95,14 @@ describe('LogViewer', () => {
     expect(screen.getByRole('button', { name: 'Copied' })).toBeInTheDocument();
   });
 });
+
+it.each([
+  ['Función', 'funcion', 'Función'],
+  ['İstanbul', 'stan', 'stan'],
+])('keeps and marks the original substring of %s', async (message, query, marked) => {
+  const user = userEvent.setup();
+  render(<LogViewer lines={[{ ...makeLogLines(1)[0]!, message, source: undefined }]} />);
+  await user.type(screen.getByRole('searchbox', { name: 'Search logs' }), query);
+  expect(renderedLines()).toHaveLength(1);
+  expect([...screen.getByRole('log').querySelectorAll('mark')].map((mark) => mark.textContent)).toEqual([marked]);
+});

package/src/builders/LogViewer/LogViewer.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useId, useMemo, useRef, useState, type ReactNode, type UIEvent } from 'react';
 import { Check, Copy, Eye, Search } from '@gntik-ai/icons';
-import { IconButton, Input, Switch, Toggle, ToggleGroup, cn } from '@gntik-ai/ui';
+import { IconButton, Input, Switch, Toggle, ToggleGroup, cn, foldText, matchRanges, useI18n } from '@gntik-ai/ui';
 import { logLines as defaultLines, type LogLevel, type LogLine } from './fixtures';
 
 export type { LogLevel, LogLine } from './fixtures';
@@ -43,24 +43,19 @@ export interface LogViewerProps {
 }
 
 /** Wraps case-insensitive matches of `query` in <mark>. */
-function highlight(text: string, query: string): ReactNode {
-  if (!query) return text;
-  const lower = text.toLowerCase();
-  const q = query.toLowerCase();
+function highlight(text: string, query: string, locale?: string): ReactNode {
   const parts: ReactNode[] = [];
   let from = 0;
-  let at = lower.indexOf(q, from);
-  while (at !== -1) {
-    if (at > from) parts.push(text.slice(from, at));
+  for (const [start, end] of matchRanges(text, query, { locale })) {
+    parts.push(text.slice(from, start));
     parts.push(
-      <mark key={at} className="rounded-sm bg-warning/30 text-foreground">
-        {text.slice(at, at + q.length)}
+      <mark key={start} className="rounded-sm bg-warning/30 text-foreground">
+        {text.slice(start, end)}
       </mark>,
     );
-    from = at + q.length;
-    at = lower.indexOf(q, from);
+    from = end;
   }
-  if (from < text.length) parts.push(text.slice(from));
+  parts.push(text.slice(from));
   return parts;
 }
 
@@ -88,6 +83,7 @@ export function LogViewer({
   titleAs: TitleTag = 'h3',
   className,
 }: LogViewerProps) {
+  const { locale } = useI18n();
   const titleId = useId();
   const viewport = useRef<HTMLDivElement>(null);
   const copyTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
@@ -103,14 +99,24 @@ export function LogViewer({
     return c;
   }, [lines]);
 
+  const foldedLines = useMemo(
+    () =>
+      lines.map((line) => ({
+        line,
+        message: foldText(line.message, locale),
+        source: foldText(line.source ?? '', locale),
+      })),
+    [lines, locale],
+  );
   const visible = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    return lines.filter(
-      (l) =>
-        levels.includes(l.level) &&
-        (!q || l.message.toLowerCase().includes(q) || (l.source ?? '').toLowerCase().includes(q)),
-    );
-  }, [lines, levels, query]);
+    const q = foldText(query.trim(), locale);
+    return foldedLines
+      .filter(
+        ({ line, message, source }) =>
+          levels.includes(line.level) && (!q || message.indexOf(q) !== -1 || source.indexOf(q) !== -1),
+      )
+      .map(({ line }) => line);
+  }, [foldedLines, levels, query, locale]);
 
   const total = visible.length * rowHeight;
   const maxScroll = Math.max(0, total - height);
@@ -213,11 +219,11 @@ export function LogViewer({
                   </span>
                   {line.source && (
                     <span className="hidden shrink-0 text-muted-foreground sm:inline">
-                      [{highlight(line.source, query.trim())}]
+                      [{highlight(line.source, query, locale)}]
                     </span>
                   )}
                   <span className="min-w-0 flex-1 truncate text-foreground">
-                    {highlight(line.message, query.trim())}
+                    {highlight(line.message, query, locale)}
                   </span>
                   {onSelectLine && (
                     <IconButton

package/src/page-chrome/PageHeader/PageHeader.test.tsx

@@ -1,3 +1,5 @@
+import Spanish from './examples/Spanish';
+import { I18nProvider } from '@gntik-ai/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
@@ -34,6 +36,15 @@ describe('PageHeader', () => {
     expect(screen.getByRole('heading', { level: 1 })).not.toHaveAttribute('tabindex');
   });
 
+  it('names the tablist from the active Spanish catalog', () => {
+    render(
+      <I18nProvider locale="es">
+        <PageHeader />
+      </I18nProvider>,
+    );
+    expect(screen.getByRole('tablist', { name: 'Secciones de la página' })).toBeInTheDocument();
+  });
+
   it('renders the default header', async () => {
     const { container } = render(<PageHeader />);
     expect(screen.getByRole('heading', { level: 1, name: 'Deployments' })).toBeInTheDocument();
@@ -66,3 +77,10 @@ describe('PageHeader', () => {
     expect(onTabChange).toHaveBeenCalledWith('domains');
   });
 });
+
+it.each(['dark', 'light', 'high_contrast'])('Spanish PageHeader example is axe clean (%s)', async (theme) => {
+  document.documentElement.className = theme === 'light' ? '' : theme;
+  const { container } = render(<Spanish />);
+  expect(screen.getByRole('tablist', { name: 'Secciones de la página' })).toBeInTheDocument();
+  await expectNoAxeViolations(container);
+});

package/src/page-chrome/PageHeader/PageHeader.tsx

@@ -7,6 +7,7 @@ import {
   TabsList,
   TabsTab,
   cn,
+  useI18n,
   type BreadcrumbItem,
   type StatusDefinition,
 } from '@gntik-ai/ui';
@@ -74,6 +75,7 @@ export function PageHeader({
   onTabChange,
   className,
 }: PageHeaderProps) {
+  const { t } = useI18n();
   const explicitPrimary = actions.findIndex((a) => a.variant === 'primary');
   const primaryIndex = explicitPrimary >= 0 ? explicitPrimary : actions.length - 1;
   const primary = actions[primaryIndex];
@@ -138,7 +140,7 @@ export function PageHeader({
           onValueChange={(value) => onTabChange?.(String(value))}
           className="mt-5"
         >
-          <TabsList aria-label="Page sections" className="overflow-x-auto">
+          <TabsList aria-label={t('pageHeader.sections')} className="overflow-x-auto">
             {tabs.map((t) => (
               <TabsTab key={t.value} value={t.value} count={t.count}>
                 {t.label}

package/src/page-chrome/PageHeader/block.meta.ts

@@ -5,6 +5,6 @@ export const meta: BlockMeta = {
   family: 'page-chrome',
   status: 'beta',
   description:
-    'Screen header with breadcrumb, title and status, description, meta row, actions that fold into a MoreMenu on small screens, and optional navigation tabs. titleRef targets the h1 for titleRef.current.focus(), adding tabIndex=-1 only when supplied so the title stays outside the Tab order. In a StatusLayout heading slot use as="div" and disable breadcrumb, meta, tabs, actions, status and description fixtures; the slot supplies the page’s only h1.',
+    'Screen header with breadcrumb, title and status, description, meta row, actions that fold into a MoreMenu on small screens, and optional navigation tabs. titleRef targets the h1 for titleRef.current.focus(), adding tabIndex=-1 only when supplied so the title stays outside the Tab order. In a StatusLayout heading slot use as="div" and disable breadcrumb, meta, tabs, actions, status and description fixtures; the slot supplies the page’s only h1. The tablist name follows I18nProvider (en/es); the Spanish preview keeps caller content unchanged.',
   uses: ['Breadcrumbs', 'Button', 'MoreMenu', 'StatusTag', 'Tabs'],
 };

package/src/page-chrome/PageHeader/examples/Spanish.tsx

@@ -0,0 +1,11 @@
+import { I18nProvider } from '@gntik-ai/ui';
+import { PageHeader } from '../PageHeader';
+
+/** Caller-supplied content is unchanged; the tablist name follows the active catalog. */
+export default function Spanish() {
+  return (
+    <I18nProvider locale="es">
+      <PageHeader />
+    </I18nProvider>
+  );
+}

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

@@ -233,6 +233,8 @@ it('replaces every pin option and the single-selection heading without translati
   const user = userEvent.setup({ pointerEventsCheck: 0 });
   const full: DataTableLabels = {
     ...labels,
+    booleanTrue: 'Sí',
+    booleanFalse: 'No',
     selectGroup: (group) => `Grupo ${group}`,
     groupRows: (count) => `${count} filas`,
     noGroup: 'Sin grupo',

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

@@ -0,0 +1,153 @@
+import { I18nProvider } from '@gntik-ai/ui';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { DataTable } from './DataTable';
+import type { CellValue, DataTableColumn } from './data-table-utils';
+
+type Row = { id: string; value: CellValue };
+const columns: DataTableColumn<Row>[] = [
+  { id: 'value', header: 'Value', accessor: (row) => row.value, sortable: true },
+];
+const rowsOf = (...values: CellValue[]): Row[] => values.map((value, i) => ({ id: String(i), value }));
+const cellTexts = () => screen.getAllByRole('cell').map((cell) => cell.textContent);
+
+describe('DataTable default cell locale', () => {
+  it('reads boolean labels from the Spanish catalog', () => {
+    render(
+      <I18nProvider locale="es">
+        <DataTable rows={rowsOf(true, false)} columns={columns} selectable={false} paginated={false} />
+      </I18nProvider>,
+    );
+    expect(cellTexts()).toEqual(['Sí', 'No']);
+  });
+
+  it.each(['es', 'en'])('prefers per-instance boolean labels under %s', (locale) => {
+    render(
+      <I18nProvider locale={locale}>
+        <DataTable
+          rows={rowsOf(true, false)}
+          columns={columns}
+          selectable={false}
+          paginated={false}
+          labels={{ booleanTrue: 'On', booleanFalse: 'Off' }}
+        />
+      </I18nProvider>,
+    );
+    expect(cellTexts()).toEqual(['On', 'Off']);
+  });
+
+  it.each([
+    ['es', '17/10/2026'],
+    ['en-US', '10/17/2026'],
+  ])('formats valid dates and handles invalid dates under %s', (locale, expected) => {
+    render(
+      <I18nProvider locale={locale}>
+        <DataTable
+          rows={rowsOf(new Date(2026, 9, 17), new Date('x'))}
+          columns={columns}
+          selectable={false}
+          paginated={false}
+        />
+      </I18nProvider>,
+    );
+    expect(cellTexts()).toEqual([expected, '—']);
+  });
+
+  it.each([
+    ['es', ['1234,5', '1234567', '0,30000000000000004', 'NaN', 'Infinity', '-Infinity']],
+    ['en', ['1234.5', '1234567', '0.30000000000000004', 'NaN', 'Infinity', '-Infinity']],
+  ] as const)('keeps number digits and only localizes the decimal separator under %s', (locale, expected) => {
+    render(
+      <I18nProvider locale={locale}>
+        <DataTable
+          rows={rowsOf(1234.5, 1234567, 0.30000000000000004, NaN, Infinity, -Infinity)}
+          columns={columns}
+          selectable={false}
+          paginated={false}
+        />
+      </I18nProvider>,
+    );
+    expect(cellTexts()).toEqual(expected);
+  });
+
+  it('keeps English boolean labels under an English provider', () => {
+    render(
+      <I18nProvider locale="en">
+        <DataTable rows={rowsOf(true, false)} columns={columns} selectable={false} paginated={false} />
+      </I18nProvider>,
+    );
+    expect(cellTexts()).toEqual(['Yes', 'No']);
+  });
+
+  it('uses provider catalog overrides with individual label fallbacks', () => {
+    render(
+      <I18nProvider locale="es" messages={{ 'common.yes': 'Affirmative', 'common.no': 'Negative' }}>
+        <DataTable
+          rows={rowsOf(true, false)}
+          columns={columns}
+          selectable={false}
+          paginated={false}
+          labels={{ booleanTrue: 'On' }}
+        />
+      </I18nProvider>,
+    );
+    expect(cellTexts()).toEqual(['On', 'Negative']);
+  });
+
+  it('keeps runtime defaults outside a provider', () => {
+    const date = new Date(2026, 9, 17);
+    render(
+      <DataTable
+        rows={rowsOf(true, false, date, 1234.5, 1234567, 0.30000000000000004)}
+        columns={columns}
+        selectable={false}
+        paginated={false}
+      />,
+    );
+    expect(cellTexts()).toEqual(['Yes', 'No', date.toLocaleDateString(), '1234.5', '1234567', '0.30000000000000004']);
+  });
+
+  it('sorts raw numeric accessor values while showing Spanish decimals', async () => {
+    const user = userEvent.setup();
+    render(
+      <I18nProvider locale="es">
+        <DataTable rows={rowsOf(10.1, 2.2, 2.11)} columns={columns} selectable={false} paginated={false} />
+      </I18nProvider>,
+    );
+    await user.click(screen.getByRole('button', { name: 'Value' }));
+    expect(cellTexts()).toEqual(['2,11', '2,2', '10,1']);
+    await user.click(screen.getByRole('button', { name: 'Value' }));
+    expect(cellTexts()).toEqual(['10,1', '2,2', '2,11']);
+  });
+
+  it('leaves custom cell renderers in control', () => {
+    render(
+      <I18nProvider locale="es">
+        <DataTable
+          rows={rowsOf(true, new Date('x'), 1234.5)}
+          columns={[{ ...columns[0]!, cell: () => 'Custom value' }]}
+          selectable={false}
+          paginated={false}
+        />
+      </I18nProvider>,
+    );
+    expect(cellTexts()).toEqual(['Custom value', 'Custom value', 'Custom value']);
+  });
+
+  it.each(['dark', 'light', 'high_contrast'])('has no structural axe violations in %s', async (theme) => {
+    document.documentElement.className = theme;
+    const { container } = render(
+      <I18nProvider locale="es">
+        <DataTable
+          rows={rowsOf(true, false, new Date(2026, 9, 17), new Date('x'), 1234.5)}
+          columns={columns}
+          caption="Values"
+          selectable={false}
+          paginated={false}
+        />
+      </I18nProvider>,
+    );
+    await expectNoAxeViolations(container);
+  });
+});

package/src/tables/DataTable/DataTable.server-pagination.test.tsx

@@ -97,7 +97,7 @@ describe('DataTable controlled server pagination', () => {
     const onPageSizeChange = vi.fn();
     render(<DataTable {...server} onPageChange={onPageChange} onPageSizeChange={onPageSizeChange} />);
     await user.click(screen.getByRole('combobox', { name: 'Rows per page' }));
-    await user.click(screen.getByRole('option', { name: '50' }));
+    await user.click(await screen.findByRole('option', { name: '50' }));
     expect(onPageSizeChange.mock.calls).toEqual([[50]]);
     expect(onPageChange.mock.calls).toEqual([[1]]);
     expect(renderedIds()).toHaveLength(20);

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

@@ -5,6 +5,7 @@ import { expectNoAxeViolations } from '../../test/a11y';
 import { DataTable } from './DataTable';
 import {
   compareValues,
+  formatCell,
   groupRows,
   paginate,
   selectionState,
@@ -142,6 +143,21 @@ describe('DataTable', () => {
 });
 
 describe('data-table-utils', () => {
+  it('preserves one-argument default cell values', () => {
+    expect(formatCell(null)).toBe('—');
+    expect(formatCell(undefined)).toBe('—');
+    expect(formatCell(true)).toBe('Yes');
+    expect(formatCell(false)).toBe('No');
+    const date = new Date(2026, 9, 17);
+    expect(formatCell(date)).toBe(date.toLocaleDateString());
+    expect(formatCell(new Date('x'))).toBe('Invalid Date');
+    expect(formatCell(1234.5)).toBe(1234.5);
+    expect(formatCell(0.30000000000000004)).toBe(0.30000000000000004);
+    expect(formatCell(NaN)).toBeNaN();
+    expect(formatCell(Infinity)).toBe(Infinity);
+    expect(formatCell('Text')).toBe('Text');
+  });
+
   type Row = { id: string; n: number | null };
   const cols: DataTableColumn<Row>[] = [{ id: 'n', header: 'N', accessor: (r) => r.n }];
   const rows: Row[] = [

package/src/tables/DataTable/block.meta.ts

@@ -12,6 +12,8 @@ export const meta: BlockMeta = {
     'Opt-in paginationMode="server" accepts a controlled 1-based page, pageSize and required rowCount (known total), with onPageChange/onPageSizeChange requests. Supplied rows render in order without client sorting or slicing, and headers have no sort affordance. Single selection cannot use server mode. The footer stays visible for empty results, clamps stale pages for display without callbacks, and hides during loading. Page-size changes may also request a page to keep the first visible row on screen. The consumer owns fetching and reconciles stale pages. See examples/server-pagination.tsx for an items/total/page/pageSize envelope consumer that handles both callbacks.',
 
   labels: [
+    { key: 'booleanTrue', type: 'string', state: 'Default cell text for a true boolean value' },
+    { key: 'booleanFalse', type: 'string', state: 'Default cell text for a false boolean value' },
     {
       key: 'scrollRegion',
       type: 'string',

package/src/tables/DataTable/data-table-row.tsx

@@ -1,5 +1,15 @@
 import { ChevronRight } from '@gntik-ai/icons';
-import { Checkbox, cn, MoreMenu, TableCell, TableHead, TableRow, type MoreMenuAction, useI18n } from '@gntik-ai/ui';
+import {
+  Checkbox,
+  cn,
+  MoreMenu,
+  TableCell,
+  TableHead,
+  TableRow,
+  type MoreMenuAction,
+  useI18n,
+  useOptionalI18n,
+} from '@gntik-ai/ui';
 import type { CSSProperties, ReactNode } from 'react';
 import { stickyTint, type TableLayout } from './column-sizing';
 import {
@@ -68,6 +78,7 @@ export function DataTableRow<T>({
   style,
 }: DataTableRowProps<T>) {
   const { t } = useI18n();
+  const locale = useOptionalI18n()?.locale;
   const id = getRowId(row);
   const selectionColumn = selectable || singleSelection != null;
   const isSelected = singleSelection ? singleSelection.selectedId === id : selected.has(id);
@@ -95,7 +106,12 @@ export function DataTableRow<T>({
       )}
       {columns.map((c) => {
         const cl = layout?.columns.get(c.id);
-        const content = c.cell ? c.cell(row) : formatCell(c.accessor?.(row));
+        const content = c.cell
+          ? c.cell(row)
+          : formatCell(c.accessor?.(row), {
+              locale,
+              booleanLabels: [labels?.booleanTrue ?? t('common.yes'), labels?.booleanFalse ?? t('common.no')],
+            });
         const editable = onCellEdit && editHintId && isCellEditable(c, row);
         return (
           <TableCell

package/src/tables/DataTable/data-table-utils.ts

@@ -147,11 +147,25 @@ export function toggleOne(id: string, selected: ReadonlySet<string>): Set<string
   return next;
 }
 
-/** Default cell text for a raw value. */
-export function formatCell(value: CellValue): ReactNode {
+/** Optional locale and boolean text for default cells. */
+export interface DataTableCellFormatOptions {
+  locale?: string;
+  booleanLabels?: [trueLabel: string, falseLabel: string];
+}
+
+/** Default cell text for a raw value. Omitting options preserves the legacy output. */
+export function formatCell(value: CellValue, options?: DataTableCellFormatOptions): ReactNode {
   if (value == null) return '—';
-  if (value instanceof Date) return value.toLocaleDateString();
-  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+  if (value instanceof Date) {
+    if (!options) return value.toLocaleDateString();
+    if (Number.isNaN(value.getTime())) return '—';
+    return new Intl.DateTimeFormat(options.locale, { year: 'numeric', month: 'numeric', day: 'numeric' }).format(value);
+  }
+  if (typeof value === 'boolean') return (options?.booleanLabels ?? ['Yes', 'No'])[value ? 0 : 1];
+  if (typeof value === 'number' && Number.isFinite(value) && options?.locale !== undefined) {
+    const decimal = new Intl.NumberFormat(options.locale).formatToParts(1.1).find((part) => part.type === 'decimal');
+    return String(value).replace('.', decimal?.value ?? '.');
+  }
   return value;
 }
 

package/src/tables/DataTable/labels.ts

@@ -2,6 +2,8 @@ import type { PaginationFooterLabels } from '../PaginationFooter/PaginationFoote
 
 /** Per-instance table chrome, including the composed PaginationFooter. Caller data stays caller-owned. */
 export interface DataTableLabels extends PaginationFooterLabels {
+  booleanTrue: string;
+  booleanFalse: string;
   /** Non-virtual table overflow region; virtualized regions keep the caller caption. */
   scrollRegion: string;
   selectionCount: (count: number) => string;