@open-mercato/ui 0.6.8-develop.7100.1.fbf66fca35 → 0.7.0

package/src/primitives/__tests__/rich-editor.test.tsx

@@ -347,49 +347,6 @@ describe('RichEditor — custom variant + compound API', () => {
   })
 })
 
-// jsdom has no layout engine, so the page-overflow bug this guards against
-// (the hidden measurement row is wider than its column and grows the document)
-// cannot be reproduced by measuring here. What these tests pin instead is the
-// containment structure the fix relies on: the measurement row sits inside its
-// own clipping layer, and the visible toolbar sits outside it so the clip never
-// swallows the toolbar's own drop shadow.
-describe('RichEditor — auto toolbar measurement row containment', () => {
-  const renderAutoToolbar = () => {
-    const { container } = render(<RichEditor value="" onChange={jest.fn()} variant="full" />)
-    const clip = container.querySelector('[data-slot="rich-editor-toolbar-measure-clip"]')!
-    const toolbar = container.querySelector('[data-slot="rich-editor-toolbar"]')!
-    return { clip, toolbar }
-  }
-
-  it('clips the hidden measurement row in its own layer so it cannot widen the page', () => {
-    const { clip } = renderAutoToolbar()
-    expect(clip).not.toBeNull()
-    expect(clip.getAttribute('aria-hidden')).toBe('true')
-    expect(clip.className).toContain('absolute')
-    expect(clip.className).toContain('inset-0')
-    expect(clip.className).toContain('overflow-hidden')
-
-    const measureRow = clip.firstElementChild!
-    expect(measureRow.className).toContain('invisible')
-    expect(measureRow.className).toContain('absolute')
-    expect(measureRow.className).toContain('flex-nowrap')
-    expect(measureRow.childElementCount).toBeGreaterThan(0)
-  })
-
-  it('keeps the visible toolbar outside the clipping layer so shadow-xs still paints', () => {
-    const { clip, toolbar } = renderAutoToolbar()
-    expect(clip.contains(toolbar)).toBe(false)
-    expect(toolbar.className).toContain('shadow-xs')
-  })
-
-  it('leaves the toolbar wrapper unclipped', () => {
-    const { toolbar } = renderAutoToolbar()
-    const wrapper = toolbar.parentElement!
-    expect(wrapper.className).toContain('relative')
-    expect(wrapper.className).not.toContain('overflow-hidden')
-  })
-})
-
 describe('RichEditorDropdownButton + RichEditorTextDropdown', () => {
   it("RichEditorDropdownButton renders inside <RichEditor variant='custom'>", () => {
     render(

package/src/primitives/alert.tsx

@@ -252,12 +252,9 @@ const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTM
 AlertTitle.displayName = 'AlertTitle'
 
 // Figma "Paragraph/Small": Inter Regular 14 / 20.
-// Renders a <div>, not a <p>: callers routinely nest paragraphs, lists and other
-// block elements inside the description, which is invalid inside <p> and makes
-// React fail hydration with "In HTML, <p> cannot be a descendant of <p>".
-const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-sm leading-5', className)} {...props} />
+    <p ref={ref} className={cn('text-sm leading-5', className)} {...props} />
   ),
 )
 AlertDescription.displayName = 'AlertDescription'

package/src/primitives/icon-button.tsx

@@ -4,26 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@open-mercato/shared/lib/utils'
 
 const iconButtonVariants = cva(
-  // The pressed surface is repeated under `dark:` on purpose: the outline and
-  // ghost variants ship `dark:bg-input/30` / `dark:hover:bg-accent/50`, which
-  // otherwise outrank the un-prefixed `aria-pressed:` background while the
-  // `aria-pressed:text-primary-foreground` still applies — leaving a dark icon
-  // on a dark surface (invisible pressed star/bell buttons on the dark theme).
-  //
-  // Every pressed rule is additionally gated on `not-disabled:` because a toggle
-  // can be pressed AND disabled at the same time (an active editor tool while the
-  // document is read-only). Without the gate the pressed rules outrank the
-  // `disabled:` surface — `dark:aria-pressed:bg-primary` is more specific than
-  // `disabled:bg-bg-disabled` — and a control the user cannot operate renders
-  // as a primary, actionable button.
-  //
-  // The gate MUST stay `not-disabled:` (`&:not(:disabled)`) and not `enabled:`
-  // (`&:enabled`): the CSS `:enabled` pseudo-class only matches form elements,
-  // so on an `asChild` host — this primitive is routinely rendered onto a link —
-  // no pressed rule could ever match and the pressed state would not paint at
-  // all. `:not(:disabled)` gates the same way on a real `<button>` while leaving
-  // a non-form host styled.
-  "inline-flex items-center justify-center cursor-pointer transition-all outline-none disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:shadow-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:shadow-focus not-disabled:aria-pressed:bg-primary not-disabled:aria-pressed:text-primary-foreground not-disabled:aria-pressed:hover:bg-primary-hover dark:not-disabled:aria-pressed:bg-primary dark:not-disabled:aria-pressed:hover:bg-primary-hover",
+  "inline-flex items-center justify-center cursor-pointer transition-all outline-none disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-disabled disabled:shadow-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:shadow-focus aria-pressed:bg-primary aria-pressed:text-primary-foreground aria-pressed:hover:bg-primary-hover",
   {
     variants: {
       variant: {

package/src/primitives/pagination.tsx

@@ -151,20 +151,6 @@ export type PaginationProps = React.HTMLAttributes<HTMLDivElement> & {
   pageSize: number
   /** Total item count. Used to derive `Math.ceil(total / pageSize)` pages. */
   total: number
-  /**
-   * `total` is a floor, not an exact count (a capped list count,
-   * `OM_LIST_COUNT_CAP`). The derived page count then only bounds the page
-   * *list*: the current page is never clamped down to it, the last-page jump
-   * is suppressed (it would present the floor as the end of the data), and
-   * Next stays available past the floor when `hasNextPage` says so.
-   */
-  totalIsCapped?: boolean
-  /**
-   * Caller-provided "a next page exists" signal for the capped case, typically
-   * short-page detection (the current page came back full). Ignored when
-   * `totalIsCapped` is false; when omitted, Next ends at the known floor.
-   */
-  hasNextPage?: boolean
   /** Called when the user changes page. */
   onPageChange: (next: number) => void
   /** Called when the user changes page size. Optional — when omitted,
@@ -202,8 +188,6 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
       page,
       pageSize,
       total,
-      totalIsCapped = false,
-      hasNextPage,
       onPageChange,
       onPageSizeChange,
       pageSizeOptions = [10, 25, 50, 100],
@@ -224,37 +208,26 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
     const resolvedFormatPageInfo =
       formatPageInfo ??
       ((p: number, total: number) =>
-        totalIsCapped
-          ? t('ui.pagination.info.pageOfCapped', 'Page {page} of {total}+', { page: p, total })
-          : t('ui.pagination.info.pageOf', 'Page {page} of {total}', { page: p, total }))
+        t('ui.pagination.info.pageOf', 'Page {page} of {total}', { page: p, total }))
     const resolvedFormatPageSizeLabel =
       formatPageSizeLabel ??
       ((size: number) =>
         t('ui.pagination.itemsPerPage.label', '{size} / page', { size }))
     const totalPages = Math.max(1, Math.ceil(total / Math.max(1, pageSize)))
-    // A capped total is a floor: never clamp the current page down to the
-    // derived count — a page past the floor holds reachable rows.
-    const safePage = totalIsCapped
-      ? Math.max(1, page)
-      : Math.min(Math.max(1, page), totalPages)
-    const listPages = Math.max(totalPages, safePage)
-    const canGoNext = totalIsCapped
-      ? (hasNextPage ?? safePage < listPages)
-      : safePage < totalPages
+    const safePage = Math.min(Math.max(1, page), totalPages)
     const items = React.useMemo(
-      () => buildPaginationItems(safePage, listPages, siblingCount, boundaryCount),
-      [safePage, listPages, siblingCount, boundaryCount],
+      () => buildPaginationItems(safePage, totalPages, siblingCount, boundaryCount),
+      [safePage, totalPages, siblingCount, boundaryCount],
     )
     const showPageSize = showPageSizeProp ?? Boolean(onPageSizeChange)
 
     const goTo = React.useCallback(
       (next: number) => {
         if (disabled) return
-        const upperBound = totalIsCapped ? Math.max(listPages, safePage + 1) : totalPages
-        const bounded = Math.min(Math.max(1, next), upperBound)
+        const bounded = Math.min(Math.max(1, next), totalPages)
         if (bounded !== safePage) onPageChange(bounded)
       },
-      [disabled, onPageChange, safePage, totalPages, totalIsCapped, listPages],
+      [disabled, onPageChange, safePage, totalPages],
     )
 
     return (
@@ -270,9 +243,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
             data-slot="pagination-info"
             className="shrink-0 text-sm text-muted-foreground tabular-nums"
           >
-            {/* When capped, report the best-known floor: a deep page proves at
-                least that many pages exist. */}
-            {resolvedFormatPageInfo(safePage, totalIsCapped ? listPages : totalPages)}
+            {resolvedFormatPageInfo(safePage, totalPages)}
           </div>
         ) : (
           <div />
@@ -353,16 +324,14 @@ export const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
               type="button"
               data-slot="pagination-next"
               aria-label={t('ui.pagination.next.ariaLabel', 'Next page')}
-              disabled={disabled || !canGoNext}
+              disabled={disabled || safePage >= totalPages}
               onClick={() => goTo(safePage + 1)}
               className={cn(navButtonVariants())}
             >
               <ChevronRight aria-hidden="true" className="size-5" />
             </button>
           ) : null}
-          {/* The last-page jump is suppressed for capped totals: it would land
-              on the floor page while presenting itself as the end of the data. */}
-          {showFirstLast && !totalIsCapped ? (
+          {showFirstLast ? (
             <button
               type="button"
               data-slot="pagination-last"

package/src/primitives/rich-editor.tsx

@@ -1543,17 +1543,12 @@ function RichEditorAutoToolbar({
   return (
     <div className="relative w-full">
       <div
+        ref={measureRef}
         aria-hidden="true"
-        data-slot="rich-editor-toolbar-measure-clip"
-        className="pointer-events-none absolute inset-0 overflow-hidden"
+        className="pointer-events-none invisible absolute left-0 top-0 flex flex-row flex-nowrap items-center gap-0.5"
       >
-        <div
-          ref={measureRef}
-          className="invisible absolute left-0 top-0 flex flex-row flex-nowrap items-center gap-0.5"
-        >
-          {items.map(renderToolbarItem)}
-          <RichEditorDropdownButton icon={<MoreVertical />} ariaLabel={labels.more} showChevron={false} menu={<div />} />
-        </div>
+        {items.map(renderToolbarItem)}
+        <RichEditorDropdownButton icon={<MoreVertical />} ariaLabel={labels.more} showChevron={false} menu={<div />} />
       </div>
       <RichEditorToolbar ref={containerRef} className="w-full flex-nowrap overflow-hidden">
         {visibleItems.map(renderToolbarItem)}

package/src/utils/__tests__/format.test.ts

@@ -1,17 +1,5 @@
 import { formatCurrency, formatDate } from '../format'
 
-// Every assertion below pins the locale explicitly (#5105). Without it these tests read the
-// runtime's default locale, so they pass in en-US and fail on any contributor machine whose
-// default is something else.
-const EN = 'en-US'
-const PL = 'pl-PL'
-
-// A date-time literal without an offset is parsed as *local* time, so it lands on the same
-// calendar day in every timezone and both the month and the day can be asserted exactly. The
-// instant form cannot: midday UTC keeps the month stable but still shifts the day at the
-// extremes (UTC+14 / UTC-12), which is why the assertions below no longer use one.
-const LOCAL_MIDDAY = '2026-06-09T12:00:00'
-
 describe('formatCurrency', () => {
   it('returns null for empty input', () => {
     expect(formatCurrency(null)).toBeNull()
@@ -28,25 +16,21 @@ describe('formatCurrency', () => {
   })
 
   it('formats a numeric value with an ISO currency code', () => {
-    expect(formatCurrency(1234.5, 'usd', EN)).toBe('$1,234.50')
+    const result = formatCurrency(1234.5, 'usd')
+    expect(result).toMatch(/1,234\.5/)
+    expect(result).toMatch(/\$|USD/)
   })
 
   it('formats a numeric string the same as a number', () => {
-    expect(formatCurrency('1234.5', 'USD', EN)).toBe(formatCurrency(1234.5, 'USD', EN))
+    expect(formatCurrency('1234.5', 'USD')).toBe(formatCurrency(1234.5, 'USD'))
   })
 
   it('falls back to a plain number without a currency code', () => {
-    expect(formatCurrency(1000, null, EN)).toBe('1,000')
+    expect(formatCurrency(1000)).toBe(new Intl.NumberFormat().format(1000))
   })
 
   it('ignores currency codes that are not three characters', () => {
-    expect(formatCurrency(1000, 'US', EN)).toBe('1,000')
-  })
-
-  it('formats in the requested locale rather than the runtime default', () => {
-    expect(formatCurrency(1234.5, 'USD', PL)).toMatch(/^1234,50/)
-    expect(formatCurrency(1234.5, 'USD', PL)).toMatch(/USD/)
-    expect(formatCurrency(1000, null, PL)).toBe('1000')
+    expect(formatCurrency(1000, 'US')).toBe(new Intl.NumberFormat().format(1000))
   })
 })
 
@@ -62,10 +46,13 @@ describe('formatDate', () => {
   })
 
   it('formats a valid ISO date as a localized short date', () => {
-    expect(formatDate(LOCAL_MIDDAY, EN)).toBe('Jun 9, 2026')
-  })
-
-  it('formats in the requested locale rather than the runtime default', () => {
-    expect(formatDate(LOCAL_MIDDAY, PL)).toBe('9 cze 2026')
+    const result = formatDate('2026-06-09T00:00:00.000Z')
+    expect(result).toEqual(
+      new Date('2026-06-09T00:00:00.000Z').toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      }),
+    )
   })
 })

package/src/utils/format.ts

@@ -4,15 +4,10 @@
  * Returns `null` for empty input, the original string for non-numeric input,
  * and falls back to a plain number format (optionally suffixed with the code)
  * when the currency code is missing or rejected by `Intl.NumberFormat`.
- *
- * Pass `locale` to format in the application locale (`useLocale()` in client
- * components). Omitting it keeps the runtime default, which varies per machine
- * and is therefore not assertable in tests.
  */
 export function formatCurrency(
   value: string | number | null | undefined,
   currency?: string | null,
-  locale?: string,
 ): string | null {
   if (value === null || value === undefined || value === '') return null
   const numeric = typeof value === 'number' ? value : Number(value)
@@ -22,12 +17,12 @@ export function formatCurrency(
   const code = currency && currency.length === 3 ? currency.toUpperCase() : undefined
   try {
     if (code) {
-      return new Intl.NumberFormat(locale, { style: 'currency', currency: code }).format(numeric)
+      return new Intl.NumberFormat(undefined, { style: 'currency', currency: code }).format(numeric)
     }
   } catch {
     // fall through to plain number formatting
   }
-  const formatted = new Intl.NumberFormat(locale).format(numeric)
+  const formatted = new Intl.NumberFormat().format(numeric)
   return code ? `${formatted} ${code}` : formatted
 }
 
@@ -35,11 +30,11 @@ export function formatCurrency(
  * Format an ISO date string as a localized short date (e.g. `Jun 9, 2026`).
  *
  * Returns `null` for empty input and echoes the original value back when it is
- * not a parseable date. Pass `locale` to format in the application locale.
+ * not a parseable date.
  */
-export function formatDate(value: string | null | undefined, locale?: string): string | null {
+export function formatDate(value: string | null | undefined): string | null {
   if (!value) return null
   const date = new Date(value)
   if (Number.isNaN(date.getTime())) return value
-  return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' })
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
 }

package/src/backend/__tests__/DataTable.cappedPagination.test.tsx

@@ -1,122 +0,0 @@
-/** @jest-environment jsdom */
-import * as React from 'react'
-import { fireEvent, render, screen, within } from '@testing-library/react'
-import { DataTable } from '../DataTable'
-import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
-
-jest.mock('next/navigation', () => ({
-  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
-}))
-
-jest.mock('../injection/useInjectionDataWidgets', () => ({
-  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false }),
-}))
-
-/**
- * The capped-count feature's risky half lives in the pager: `Pagination` decides
- * from `totalIsCapped` plus a `hasNextPage` that `DataTable` derives from the
- * rendered row count whether a row past the cap is reachable at all. The unit
- * tests on the primitive pin its own logic; these pin the wiring between a
- * capped list payload and that primitive, which is where a regression would
- * silently strand data while every other test stayed green.
- *
- * Derived from the manual UI QA on #5228: 31 rows behind a reported total of 3.
- */
-type Row = { id: string; name: string }
-
-const columns: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name' }]
-
-const PAGE_SIZE = 20
-
-function rows(count: number, offset = 0): Row[] {
-  return Array.from({ length: count }, (_, i) => ({
-    id: `row-${offset + i + 1}`,
-    name: `Row ${offset + i + 1}`,
-  }))
-}
-
-function renderTable(pagination: Record<string, unknown>, data: Row[]) {
-  const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0, retry: false } } })
-  return render(
-    <QueryClientProvider client={queryClient}>
-      <I18nProvider locale="en" dict={{}}>
-        <DataTable columns={columns as any} data={data} pagination={pagination as any} />
-      </I18nProvider>
-    </QueryClientProvider>,
-  )
-}
-
-const info = () => document.querySelector('[data-slot="pagination-info"]')?.textContent ?? ''
-const next = () => document.querySelector('[data-slot="pagination-next"]') as HTMLButtonElement | null
-const last = () => document.querySelector('[data-slot="pagination-last"]')
-
-describe('DataTable pagination with a capped total', () => {
-  // The floor must read as a floor. A capped list showing "of 3 results" would
-  // state a number the server explicitly refused to vouch for.
-  it('renders the total as a floor and hides the jump-to-last control', () => {
-    renderTable(
-      { page: 1, pageSize: PAGE_SIZE, total: 3, totalPages: 1, totalIsCapped: true, onPageChange: jest.fn() },
-      rows(PAGE_SIZE),
-    )
-    expect(info()).toBe('Showing 1 to 20 of 3+ results')
-    // The jump would land on the floor's last page while presenting itself as
-    // the end of the data, which is precisely the lie this feature must avoid.
-    expect(last()).toBeNull()
-  })
-
-  // This is the assertion that would have caught an unfixed clamp: with a
-  // floor-derived page count of 1, a naive pager disables Next on page 1 and
-  // every row past the cap becomes unreachable.
-  it('keeps Next live past the floor while the page comes back full', () => {
-    const onPageChange = jest.fn()
-    renderTable(
-      { page: 1, pageSize: PAGE_SIZE, total: 3, totalPages: 1, totalIsCapped: true, onPageChange },
-      rows(PAGE_SIZE),
-    )
-    const button = next()
-    expect(button?.disabled).toBe(false)
-    fireEvent.click(button!)
-    expect(onPageChange).toHaveBeenCalledWith(2)
-  })
-
-  // Deep-linking past the floor must not bounce the user back, and the range
-  // label has to describe the rows actually on screen rather than the floor.
-  it('serves a page past the floor without snapping back, and retires Next on a short page', () => {
-    const onPageChange = jest.fn()
-    renderTable(
-      { page: 2, pageSize: PAGE_SIZE, total: 3, totalPages: 1, totalIsCapped: true, onPageChange },
-      rows(11, PAGE_SIZE),
-    )
-    expect(info()).toBe('Showing 21 to 31 of 3+ results')
-    expect(within(document.body).getByText('Row 31')).toBeInTheDocument()
-    // Short page ⇒ nothing beyond it, so Next retires here rather than at the floor.
-    expect(next()?.disabled).toBe(true)
-    expect(onPageChange).not.toHaveBeenCalled()
-  })
-
-  // Capping is conditional: below the cap the server sends no flag, and the
-  // table must be byte-identical to its pre-feature behaviour.
-  it('leaves an uncapped list unchanged — exact total, jump-to-last offered', () => {
-    renderTable(
-      { page: 1, pageSize: PAGE_SIZE, total: 31, totalPages: 2, onPageChange: jest.fn() },
-      rows(PAGE_SIZE),
-    )
-    expect(info()).toBe('Showing 1 to 20 of 31 results')
-    expect(last()).not.toBeNull()
-    expect(next()?.disabled).toBe(false)
-  })
-
-  // The exact-multiple false positive: short-page detection cannot distinguish
-  // "a full last page" from "more to come", so Next survives one page too far.
-  // The label must not then claim a row it is not showing.
-  it('claims no range when a capped page comes back empty', () => {
-    renderTable(
-      { page: 3, pageSize: PAGE_SIZE, total: 3, totalPages: 1, totalIsCapped: true, onPageChange: jest.fn() },
-      [],
-    )
-    expect(info()).toBe('No further results past 3')
-    expect(next()?.disabled).toBe(true)
-  })
-})

package/src/backend/__tests__/DataTable.headerWrap.test.tsx

@@ -1,111 +0,0 @@
-/** @jest-environment jsdom */
-import * as React from 'react'
-import { DataTable } from '../DataTable'
-import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
-import { render } from '@testing-library/react'
-
-jest.mock('next/navigation', () => ({
-  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
-}))
-
-jest.mock('../injection/useInjectionDataWidgets', () => ({
-  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false }),
-}))
-
-type Row = { id: string; title: string }
-
-const tokensOf = (el: Element | null): string[] =>
-  (el?.getAttribute('class') ?? '').split(/\s+/).filter(Boolean)
-
-// The header used to be a single non-wrapping `sm:flex-row` line. A title
-// sitting next to a long action group (Create + Export + Refresh + injected
-// toolbar buttons) had nothing but `min-w-0` holding it, so it collapsed to a
-// sliver while the action buttons — which wrap on their own — spilled onto a
-// second line and rendered over it. The row now wraps as a unit, the title
-// keeps a 12rem floor, and the actions stay right-aligned in either layout.
-describe('DataTable header row wrapping', () => {
-  function renderHeaderTable() {
-    const columns: ColumnDef<Row>[] = [{ accessorKey: 'title', header: 'Title' }]
-    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
-    const result = render(
-      <QueryClientProvider client={queryClient}>
-        <I18nProvider locale="en" dict={{}}>
-          <DataTable
-            title="Documents"
-            actions={<button type="button">Create document</button>}
-            columns={columns}
-            data={[{ id: '1', title: 'Solar rollout' }]}
-          />
-        </I18nProvider>
-      </QueryClientProvider>,
-    )
-    return { ...result, queryClient }
-  }
-
-  function headerParts(container: HTMLElement) {
-    const headerContent = Array.from(container.querySelectorAll('div')).find((el) =>
-      tokensOf(el).includes('sm:flex-row'),
-    ) ?? null
-    return {
-      headerContent,
-      titleSlot: headerContent?.firstElementChild ?? null,
-      actionsSlot: headerContent?.lastElementChild ?? null,
-    }
-  }
-
-  it('lets the header row wrap instead of crushing the title', () => {
-    const { container, queryClient } = renderHeaderTable()
-    try {
-      const { headerContent } = headerParts(container)
-      expect(headerContent).not.toBeNull()
-      expect(tokensOf(headerContent)).toEqual(
-        expect.arrayContaining([
-          'flex',
-          'flex-col',
-          'gap-2',
-          'sm:flex-row',
-          'sm:flex-wrap',
-          'sm:items-center',
-          'sm:justify-between',
-        ]),
-      )
-    } finally {
-      queryClient.clear()
-    }
-  })
-
-  it('gives the title a wrap threshold instead of an unbounded shrink', () => {
-    const { container, queryClient } = renderHeaderTable()
-    try {
-      const { titleSlot } = headerParts(container)
-      expect(titleSlot?.textContent).toContain('Documents')
-      expect(tokensOf(titleSlot)).toEqual(
-        expect.arrayContaining(['flex-1', 'min-w-0', 'sm:basis-48']),
-      )
-    } finally {
-      queryClient.clear()
-    }
-  })
-
-  it('keeps the actions right-aligned once the row has wrapped', () => {
-    const { container, queryClient } = renderHeaderTable()
-    try {
-      const { actionsSlot } = headerParts(container)
-      expect(actionsSlot?.textContent).toContain('Create document')
-      expect(tokensOf(actionsSlot)).toEqual(
-        expect.arrayContaining([
-          'flex',
-          'flex-wrap',
-          'items-center',
-          'gap-2',
-          'sm:ml-auto',
-          'sm:justify-end',
-        ]),
-      )
-    } finally {
-      queryClient.clear()
-    }
-  })
-})