zz-meridian 0.24.0 → 0.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.24.0",
+  "version": "0.25.1",
   "description": "Bring ZZ Meridian, a dashboard design system, into a Next.js project, or start a new dashboard on it. Copies the files in; nothing depends on this package at runtime.",
   "license": "MIT",
   "type": "module",

package/payload/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 Every release of ZZ Meridian, newest first. Versions follow semver: a removed or renamed token, prop or card is major; a new card, token or variant is minor; a corrected value is a patch. Each entry says what breaks and what to do instead.
 
+## [0.25.1] · 2026-10-21
+
+### Fixed
+
+- **A right-aligned or centred cut cell keeps its alignment.** Since 0.25.0 a `truncate` cell's value sits in a grid track as wide as the value, and the cell's `text-align` does not move a track, so a numeric or right-aligned `truncate` cell drew its value at the left. `Cut` takes `align` now and `TableCell` and `DataTable` pass the cell's own; a hand-built cell that uses `Cut` in a right-aligned column passes `align="right"`.
+- **The audit's title check reaches a title column with phone words.** A cut name inside a link and a flex row in a column with `mobileCell` sits seven levels under the cell that carries its title, one more than the walk read, so the audit reported the name as cut without its whole text. The walk reads eight levels.
+
+## [0.25.0] · 2026-10-21
+
+### Breaking
+
+- **Every table column shares the spare width, and `TableHeader`'s `flexible` prop is removed.** A cut cell used to zero its own width (`max-w-0`) and the lead head claimed all the rest (`w-full`), so the record's name sat in empty room while the columns beside it were held at their minimum, cramped at both ends and wrapping. Now every column asks for its content width and a table with room to spare shares it across all of its columns in proportion to those widths. A column whose cells `truncate` asks for its whole content width too and shrinks only when the table lacks room for every column; a column given `width` keeps that width and takes no spare; the `grow` column keeps its floor, 160px, 256px once the table is 672px wide. Drop `flexible` from any `TableHeader`: a `truncate` column now asks for its own width. Before 1.0, Meridian marks a breaking change with the minor version, as semver allows for 0.x.
+
+### New
+
+- **`Cut`**, exported from `@/components/ui/table`: the wrapper a cut cell renders, one grid track of `minmax(0, max-content)` around a `truncate` span. `TableCell truncate` and `DataTable`'s `truncate` columns use it; use it in a hand-built cell that should be cut the same way. The audit's title check reaches through it.
+
 ## [0.24.0] · 2026-10-20
 
 ### New

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.24.0",
+  "version": "0.25.1",
   "private": true,
   "license": "MIT",
   "description": "ZZ Meridian: a dashboard design system and starter. Six layers, from DTCG tokens through four layers of React components to product workspaces, and a Design Atlas, in a light and a dark theme.",

package/payload/scripts/audit.ts

@@ -148,7 +148,9 @@ const MEASURE = `(() => {
   // cell titled "Orders" over a cut account id passed as keeping it.
   const whole = (s) => (s || '').replace(/\\s+/g, ' ').trim();
   const keeps = (el, title) => { const t = whole(title), own = whole(el.textContent); return t.length > 0 && own.length > 0 && t.includes(own); };
-  const titled = (el) => { for (let n = el, i = 0; n && i < 4; n = deepParent(n), i++) if (keeps(el, n.getAttribute('title'))) return true; return [...el.querySelectorAll('[title]')].some((n) => keeps(el, n.getAttribute('title'))); };
+  // The walk reaches through a table cell's wrapper: a name span in a flex row in a link in a phone column's own span in
+  // the cut span in the wrapper in the cell is seven levels, so the cell's title is still found, with one to spare.
+  const titled = (el) => { for (let n = el, i = 0; n && i < 8; n = deepParent(n), i++) if (keeps(el, n.getAttribute('title'))) return true; return [...el.querySelectorAll('[title]')].some((n) => keeps(el, n.getAttribute('title'))); };
   const inked = [];
   const ringSig = (c) => [c.outlineStyle, c.outlineWidth, c.outlineColor, c.boxShadow, c.borderTopStyle, c.borderTopWidth, c.borderTopColor, c.borderBottomColor, c.borderLeftColor, c.borderRightColor].join('|');
   const texts = [];

package/payload/skills/zz-meridian/references/validation.md

@@ -138,7 +138,7 @@ and supply-chain check before a script runs; that is pnpm, not an install, and n
 | `unmeasured: x-card (no open shadow root)` | A custom element shows a box but exposes no open root and no content in the page, so nothing inside it was measured | Attach its root open (`attachShadow({ mode: 'open' })`), or render its content as light DOM in a slot; the audit fails until it can look |
 | `unmeasured: x-card (not defined)` | A custom element was still not registered after the settle wait | Register it (`customElements.define`) before the page settles, or remove the tag from the page |
 | `"Export" does nothing when pressed` | A control with no action, or one that only works on hover | Wire it, or remove it; an info button uses `Tooltip toggle` so a tap opens it |
-| `table … > its frame` | A table wider than its card, its last columns clipped | `hideBelow` one more column, or `truncate` the lead column. When the lead (`grow`) column holds a long name and another column is wide too, hiding columns may not help: move `grow` to the shorter text column |
+| `table … > its frame` | A table wider than its card, its last columns clipped | `hideBelow` one more column, or `truncate` a long column. Every column asks for its content width, the spare is shared in proportion, and a cut column shrinks only when the table lacks room; a fixed `width` keeps its width, and the `grow` floor is 160px, 256px from a 672px table |
 | `exception:` / `console.error:` | A runtime error or a hydration mismatch | Hydration: no `Date.now()`, `Math.random()` or locale-dependent formatting in render; use the demo clock and `src/lib/format*` |
 
 ## Keyboard walk failures

package/payload/src/components/patterns/data-table/README.md

@@ -27,7 +27,7 @@ Status: beta
 
 ## Sizes
 
-Row height and card padding come from the density: comfortable 52px and 24px, compact 38px and 16px. The table never sets its own width; the columns whose cells can be cut take what remains — `grow` for the record's name, and every column whose cells `truncate` — sharing it where there is more than one, and every column that must show its whole value keeps its content width. A column whose content is short and fixed (an ID, a key, a date) can take `width` (`w-28`), so a two-column table does not hand the short column most of the row.
+Row height and card padding come from the density: comfortable 52px and 24px, compact 38px and 16px. The table never sets its own width. Every column asks for its content width, and the spare is shared across all columns in proportion to those widths, with the `grow` column's floor (the record's name: 160px, 256px once the table is 672px wide) counted as its preferred width. A column whose cells `truncate` asks for its whole content width too and shrinks only when the table lacks room for every column; every column that must show its whole value keeps its content width. A column whose content is short and fixed (an ID, a key, a date) can take `width` (`w-28`), which it keeps, taking no spare, so a two-column table does not hand the short column most of the row.
 
 ## States
 
@@ -85,7 +85,7 @@ Rows arrive whole for client-side sorting and paging (a few hundred at most), or
 
 ## Do and do not
 
-- Do give the record's name `grow`. A second column may be cut only if it must be, since two of them then share what the table has left.
+- Do give the record's name `grow`: it sets the floor and the phone card's title, and claims no spare. A column may be cut (`truncate`) if its values are long, since it shows them whole while the table has room and shrinks only when it has not.
 - Do drop columns with `hideBelow` rather than letting the table scroll sideways.
 - Do not put more than one action per row; a row with several actions opens a record that has them.
 - Do not show pagination for a list that fits on one page.

package/payload/src/components/patterns/data-table/index.tsx

@@ -12,7 +12,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { EmptyState } from '@/components/ui/empty-state';
 import { Pagination } from '@/components/ui/pagination';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Table, TableBody, TableHead, TableHeader, type Breakpoint, type SortDirection } from '@/components/ui/table';
+import { Cut, Table, TableBody, TableHead, TableHeader, type Breakpoint, type SortDirection } from '@/components/ui/table';
 import { useQueryState } from './use-query-state';
 
 export { useQueryState } from './use-query-state';
@@ -36,9 +36,9 @@ export type Column<R> = {
   title?: (row: R) => string;
   /** Drop the column below this width (the least important columns go first). */
   hideBelow?: Breakpoint;
-  /** The one column that takes the remaining width: the record's name. */
+  /** The record's name: the one column with a floor, so the last to be cut. It claims no spare width. */
   grow?: boolean;
-  /** A width class for a column whose content is short and fixed (an ID, a key, a date), so the spare width goes to the others: `w-28`. */
+  /** A width class for a column whose content is short and fixed (an ID, a key, a date), so the spare is shared by the others: `w-28`. */
   width?: string;
   /**
    * Its place in the card a row becomes on phones: the `title` (one column, the record's name), a `status` at the end
@@ -96,7 +96,7 @@ const PHONE_ROWS = [
 ].join(' ');
 
 /** The resets a cell needs once the row is a card: not a row height, not a padding box, free to shrink and to clip. */
-const PHONE_CELLS = '@max-[640px]:[&_td:not([data-mobile=hidden])]:!h-auto @max-[640px]:[&_td:not([data-mobile=hidden])]:!max-w-none @max-[640px]:[&_td:not([data-mobile=hidden])]:!p-0 @max-[640px]:[&_td:not([data-mobile=hidden])]:min-w-0 @max-[640px]:[&_td:not([data-mobile=hidden]):not([data-mobile=fact])]:!block @max-[640px]:[&_[data-sep]]:inline';
+const PHONE_CELLS = '@max-[640px]:[&_td:not([data-mobile=hidden])]:!h-auto @max-[640px]:[&_td:not([data-mobile=hidden])]:!p-0 @max-[640px]:[&_td:not([data-mobile=hidden])]:min-w-0 @max-[640px]:[&_td:not([data-mobile=hidden]):not([data-mobile=fact])]:!block @max-[640px]:[&_[data-sep]]:inline';
 
 /** Where a role sits in the card, and how it reads there.
  *
@@ -124,7 +124,7 @@ const HIDE: Record<Breakpoint, string> = { sm: '@max-[512px]:hidden', md: '@max-
 
 /** A cell's few own classes: what its column adds to the table's rules. */
 const cellClass = (c: { align?: 'left' | 'right' | 'center'; numeric?: boolean; muted?: boolean; truncate?: boolean; hideBelow?: Breakpoint }) =>
-  cn(c.numeric && 't-num', c.align === 'center' && '!text-center', c.muted && 'text-ink-2', c.truncate && 'max-w-0 truncate', c.hideBelow && HIDE[c.hideBelow]);
+  cn(c.numeric && 't-num', c.align === 'center' && '!text-center', c.muted && 'text-ink-2', c.hideBelow && HIDE[c.hideBelow]);
 
 /** The table's sort and page, kept in the URL: `?sort=latency&dir=desc&page=2`. Wrap the page in <Suspense>. */
 export function useTableQuery(defaults: Partial<TableState> = {}) {
@@ -302,7 +302,7 @@ export function DataTable<R>({
               </TableHeader>
             ) : null}
             {columns.map((c) => (
-              <TableHeader key={c.key} align={c.align ?? (c.numeric ? 'right' : 'left')} hideBelow={c.hideBelow} grow={c.grow} flexible={c.truncate} className={c.width} sort={c.sortValue ? dirOf(c) : undefined} onSort={c.sortValue ? () => toggleSort(c) : undefined}>
+              <TableHeader key={c.key} align={c.align ?? (c.numeric ? 'right' : 'left')} hideBelow={c.hideBelow} grow={c.grow} className={c.width} sort={c.sortValue ? dirOf(c) : undefined} onSort={c.sortValue ? () => toggleSort(c) : undefined}>
                 {c.header}
               </TableHeader>
             ))}
@@ -350,12 +350,15 @@ export function DataTable<R>({
                           {role === 'fact' && facts.indexOf(c) > 0 ? <span aria-hidden data-sep>·</span> : null}
                           {/* A phone may want other words for the same cell — "Used 1 min ago", not "1 min ago" — so
                               both are rendered and one is hidden: a few words each, never a second copy of the row. */}
-                          {c.mobileCell ? (
-                            <>
-                              <span className="@max-[640px]:hidden">{content}</span>
-                              <span className="hidden @max-[640px]:contents">{c.mobileCell(r)}</span>
-                            </>
-                          ) : content}
+                          {(() => {
+                            const body = c.mobileCell ? (
+                              <>
+                                <span className="@max-[640px]:hidden">{content}</span>
+                                <span className="hidden @max-[640px]:contents">{c.mobileCell(r)}</span>
+                              </>
+                            ) : content;
+                            return c.truncate ? <Cut align={c.align ?? (c.numeric ? 'right' : 'left')}>{body}</Cut> : body;
+                          })()}
                         </td>
                       );
                     })}

package/payload/src/components/ui/table/README.md

@@ -24,7 +24,7 @@ The names follow the HTML elements: `TableHead` is the `thead`, `TableHeader` is
 
 ## Sizes
 
-Column widths follow content. A column whose cells can be cut asks for all the width there is — `grow` on the head for the record's name, and `flexible` on any other head whose cells `truncate` — and takes what no other column needs; two or more of them share it, which is what a table with three long columns (a verification, its release, the reason it failed) needs. Every column that must show its whole value keeps its content width. A cut cell carries the full text in its `title`, or opens the record. Other text columns stay on one line. A flexible column is at least 160px, 256px once the table is 672px wide. `hideBelow` drops a column when the table itself is narrower than `sm` 512, `md` 672, `lg` 896 or `xl` 1152px, on its head and its cells alike, and marks each `data-hide-below`, so the column drawn last at that width, not the dropped one after it, takes the card's padding on its right.
+Column widths follow content. Every column asks for its content width, and a table with spare width shares it across all of its columns in proportion to those widths, so no column holds the spare alone; `grow` on the head marks the record's name, whose floor counts as its preferred width when the floor is wider than the text. A column whose cells can be cut (`truncate`) asks for its whole content width too, and shrinks only when the table lacks room for every column; then the cut columns give way, which is what a table with three long columns (a verification, its release, the reason it failed) needs. Every column that must show its whole value keeps its content width. A column given `width` keeps that width and takes no spare. A cut cell carries the full text in its `title`, or opens the record. Other text columns stay on one line. The `grow` column is at least 160px, 256px once the table is 672px wide. `hideBelow` drops a column when the table itself is narrower than `sm` 512, `md` 672, `lg` 896 or `xl` 1152px, on its head and its cells alike, and marks each `data-hide-below`, so the column drawn last at that width, not the dropped one after it, takes the card's padding on its right.
 
 ## States
 

package/payload/src/components/ui/table/index.tsx

@@ -16,6 +16,7 @@ export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
 /* Literal strings: Tailwind finds classes by reading the source. */
 const HIDE: Record<Breakpoint, string> = { sm: '@max-[512px]:hidden', md: '@max-[672px]:hidden', lg: '@max-[896px]:hidden', xl: '@max-[1152px]:hidden' };
 const ALIGN = { left: 'text-left', right: 'text-right', center: 'text-center' } as const;
+const JUSTIFY = { left: undefined, right: 'justify-end', center: 'justify-center' } as const;
 
 export function Table({ className, caption, children, ...rest }: HTMLAttributes<HTMLTableElement> & { caption?: string }) {
   return (
@@ -74,7 +75,6 @@ export function TableHeader({
   sort,
   onSort,
   grow,
-  flexible,
   children,
   ...rest
 }: ThHTMLAttributes<HTMLTableCellElement> & {
@@ -82,10 +82,8 @@ export function TableHeader({
   hideBelow?: Breakpoint;
   sort?: SortDirection;
   onSort?: () => void;
-  /** The one column that takes the remaining width: the record's name. Its truncating cells shrink last. */
+  /** The record's name: the one column with a floor, so it is the last to be cut. It claims no spare width. */
   grow?: boolean;
-  /** The column's text can be cut rather than wrapped, so it can use width the other columns cannot. */
-  flexible?: boolean;
 }) {
   const sortable = onSort !== undefined;
   const Icon = sort === 'asc' ? ArrowUp : sort === 'desc' ? ArrowDown : ChevronsUpDown;
@@ -99,17 +97,11 @@ export function TableHeader({
         'h-9 border-y border-line bg-surface-sunk px-4 text-xs font-medium whitespace-nowrap text-ink-3 first:border-l-0',
         ALIGN[align],
         hideBelow && HIDE[hideBelow],
-        /* A column that can be cut asks for all the width there is, and the ones that must show their whole value —
-           a count, a date, a badge — size to that value. It asked for a third before (`w-[30%]`), on the reading that
-           auto layout spreads the remainder by content: it spreads it across every column, so the lead column was
-           pinned at a third of the table, cutting titles while "Assigned to" sat in twice the room its longest name
-           needed, and a second cut column beside it was left "1 of 2 pass…" on every row. Asking for all of it leaves
-           the browser nothing to spread; two or more such columns share it between them, which is what the tables with
-           three long columns (Tests: the verification, the release, the reason) need. */
-        (grow || flexible) && 'w-full',
-        // The floor belongs to the lead column alone. A second column that can be cut asks for the slack but must be
-        // able to give it up: with the same floor on two columns the Releases table held 837px inside a 713px frame
-        // at 1024 and 768, and no column could shrink because both had a minimum.
+        /* No head claims the spare. A cut column asks for its content's width through its cells (`Cut`), so auto layout
+           shares the spare across every column in proportion to that ask; a head with `w-full` took all of it for the
+           lead and left the rest at their minimum, the uneven spacing this replaced. */
+        // The floor belongs to the lead column alone (c8eccdc): a second column with a minimum cannot shrink, and the
+        // Releases table held 837px inside a 713px frame at 1024 and 768 when two columns had one.
         grow && 'min-w-40 @min-[672px]:min-w-64',
         className,
       )}
@@ -137,6 +129,20 @@ export function TableHeader({
   );
 }
 
+/**
+ * A cut value: it asks for its whole content's width and shrinks only when the table has no room. One grid track of
+ * `minmax(0, max-content)` gives the cell that ask, where `max-w-0` on the cell zeroed it and sent every spare pixel to
+ * the lead column. The track is as wide as the value and the cell's `text-align` does not move it, so it takes the
+ * cell's alignment itself.
+ */
+export function Cut({ align = 'left', children }: { align?: keyof typeof ALIGN; children?: ReactNode }) {
+  return (
+    <span className={cn('grid min-w-0 grid-cols-[minmax(0,max-content)]', JUSTIFY[align])}>
+      <span className="truncate">{children}</span>
+    </span>
+  );
+}
+
 export function TableCell({
   className,
   align,
@@ -160,13 +166,12 @@ export function TableCell({
         ALIGN[align ?? (numeric ? 'right' : 'left')],
         numeric && 't-num whitespace-nowrap',
         muted ? 'text-ink-2' : 'text-ink',
-        truncate && 'max-w-0 truncate',
         hideBelow && HIDE[hideBelow],
         className,
       )}
       {...rest}
     >
-      {children}
+      {truncate ? <Cut align={align ?? (numeric ? 'right' : 'left')}>{children}</Cut> : children}
     </td>
   );
 }

package/payload/src/views/members.tsx

@@ -196,11 +196,10 @@ export function MembersView({ rows, now, revisions, actions, access, roles, work
         </span>
       ),
     },
-    // The name is the row's identifier and takes what the table has left; the email is not a second one, and it is a
-    // fixed-width thing (a domain and a local part), so it is drawn whole on one line at the width its longest one
-    // needs. Both asked to grow before, and the browser split the slack between them: the name sat in empty room while
-    // "felix.andersson@zz-meridian.example" was cut to "felix.andersson@zz-meridian.examp…". Free to wrap, it broke
-    // every address over two lines; held on one line, the column is as wide as the longest and nothing is cut.
+    // The name is the row's identifier and the table's floor; the email is not a second one, and it is a fixed-width
+    // thing (a domain and a local part), so it is drawn whole on one line at the width its longest one needs. Every
+    // column asks for its content width and the table shares the spare in proportion to those widths, so neither
+    // column claims the room. Held on one line, the email column is as wide as the longest address and nothing is cut.
     { key: 'email', header: 'Email', muted: true, hideBelow: 'lg', sortValue: (m) => m.email, cell: (m) => <span className="whitespace-nowrap">{m.email}</span> },
     // The role as a person reads it, add-ons and all, as a column and as a fact on the phone card (AC-3.2).
     { key: 'role', header: 'Role', hideBelow: 'sm', mobile: 'fact', sortValue: (m) => m.role, cell: (m) => roleLabel(m), mobileCell: (m) => roleLabel(m) },

package/payload/tests/table-cut-align.test.tsx

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
+
+const wrapOf = (td: Element) => td.firstElementChild!.getAttribute('class')?.split(/\s+/) ?? [];
+
+/** The cut track is as wide as the value, so the cell's text-align cannot move it: the wrapper carries the alignment. */
+describe('a cut cell keeps its alignment', () => {
+  it('justifies a right-aligned, numeric or centred value and leaves a left one alone', () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell truncate>left</TableCell>
+            <TableCell truncate align="right">right</TableCell>
+            <TableCell truncate numeric>1,204</TableCell>
+            <TableCell truncate align="center">centre</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+    const [left, right, numeric, centre] = [...container.querySelectorAll('td')].map(wrapOf);
+    expect(left).not.toContain('justify-end');
+    expect(left).not.toContain('justify-center');
+    expect(right).toContain('justify-end');
+    expect(numeric).toContain('justify-end');
+    expect(centre).toContain('justify-center');
+  });
+});

package/payload/tests/table-cut-cell.test.tsx

@@ -0,0 +1,83 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('next/navigation', () => ({ useRouter: () => ({ push() {}, refresh() {}, replace() {} }), usePathname: () => '/' }));
+import { DataTable, type Column } from '@/components/patterns/data-table';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+
+const WRAP = ['grid', 'min-w-0', 'grid-cols-[minmax(0,max-content)]'];
+const classes = (el: Element) => el.getAttribute('class')?.split(/\s+/) ?? [];
+const wrapOf = (td: Element) => [...td.children].find((c) => WRAP.every((k) => classes(c).includes(k)));
+
+/** A cut cell asks for its whole content and shrinks only when the table has no room; it never zeroes its width. */
+function expectWrapped(td: Element, text: string) {
+  expect(classes(td)).not.toContain('max-w-0');
+  expect(classes(td)).not.toContain('truncate');
+  const wrap = wrapOf(td);
+  expect(wrap, 'the one-track wrapper').toBeTruthy();
+  expect(wrap!.children).toHaveLength(1);
+  expect(classes(wrap!.children[0])).toContain('truncate');
+  expect(wrap!.textContent).toContain(text);
+  return wrap!;
+}
+
+describe('a cut cell keeps its content width (spec AC-1.4)', () => {
+  it('TableCell wraps a truncating value and keeps its title', () => {
+    const { container } = render(
+      <Table>
+        <TableHead><TableRow><TableHeader grow>Request</TableHeader><TableHeader>Status</TableHeader></TableRow></TableHead>
+        <TableBody><TableRow><TableCell truncate>/v1/messages/with/a/long/tail</TableCell><TableCell>200</TableCell></TableRow></TableBody>
+      </Table>,
+    );
+    const td = container.querySelector('td')!;
+    expectWrapped(td, '/v1/messages/with/a/long/tail');
+    expect(td.getAttribute('title')).toBe('/v1/messages/with/a/long/tail');
+    const heads = [...container.querySelectorAll('th')];
+    expect(heads.some((th) => classes(th).includes('w-full'))).toBe(false);
+    expect(classes(heads[0])).toEqual(expect.arrayContaining(['min-w-40', '@min-[672px]:min-w-64']));
+  });
+});
+
+type Row = { id: string; name: string; plan: string; region: string };
+const rows: Row[] = [{ id: 'cus_8f2a', name: 'Northwind Labs International Holdings', plan: 'Enterprise', region: 'eu-west-1' }];
+
+describe('DataTable shares the spare (spec AC-1.4, AC-1.6)', () => {
+  it('wraps every cut column, claims no spare on any head, and keeps fixed widths and the floor', () => {
+    const columns: Column<Row>[] = [
+      { key: 'name', header: 'Customer', grow: true, truncate: true, mobile: 'title', title: (r) => r.name, cell: (r) => <span className="flex min-w-0 items-center gap-3"><span className="truncate font-medium">{r.name}</span></span> },
+      { key: 'id', header: 'ID', width: 'w-28', cell: (r) => r.id },
+      { key: 'plan', header: 'Plan', truncate: true, mobile: 'fact', cell: (r) => r.plan },
+    ];
+    const { container } = render(<DataTable caption="Customers" noun="customers" rows={rows} columns={columns} rowKey={(r) => r.id} selectable selected={new Set()} onSelectedChange={() => {}} />);
+    const cells = [...container.querySelectorAll('tbody tr:first-child td')];
+    const byText = (t: string) => cells.find((td) => td.textContent?.includes(t))!;
+    expectWrapped(byText('Northwind'), 'Northwind Labs International Holdings');
+    expect(byText('Northwind').getAttribute('title')).toBe('Northwind Labs International Holdings');
+    expectWrapped(byText('Enterprise'), 'Enterprise');
+    expect(classes(byText('cus_8f2a'))).not.toContain('max-w-0');
+    const heads = [...container.querySelectorAll('thead th')];
+    expect(heads.some((th) => classes(th).includes('w-full'))).toBe(false);
+    expect(classes(heads[0])).toContain('w-10');
+    const customer = heads.find((th) => th.textContent?.includes('Customer'))!;
+    expect(classes(customer)).toEqual(expect.arrayContaining(['min-w-40', '@min-[672px]:min-w-64']));
+    expect(classes(heads.find((th) => th.textContent?.includes('ID'))!)).toContain('w-28');
+  });
+
+  it("keeps a fact cell's separator outside the wrapper, and the row link and the phone span inside it", () => {
+    const columns: Column<Row>[] = [
+      { key: 'name', header: 'Customer', grow: true, truncate: true, mobile: 'title', title: (r) => r.name, cell: (r) => r.name },
+      { key: 'plan', header: 'Plan', truncate: true, mobile: 'fact', cell: (r) => r.plan, mobileCell: (r) => `${r.plan} plan` },
+      { key: 'region', header: 'Region', truncate: true, mobile: 'fact', cell: (r) => r.region },
+    ];
+    const { container } = render(<DataTable caption="Customers" noun="customers" rows={rows} columns={columns} rowKey={(r) => r.id} rowHref={(r) => `/customers/${r.id}`} />);
+    const [title, plan, region] = [...container.querySelectorAll('tbody tr:first-child td')];
+    const titleWrap = expectWrapped(title, 'Northwind Labs International Holdings');
+    expect(titleWrap.querySelector('a[href="/customers/cus_8f2a"]')).toBeTruthy();
+    expectWrapped(plan, 'Enterprise plan');
+    const sep = region.querySelector('[data-sep]')!;
+    expect(sep).toBeTruthy();
+    expect(sep.parentElement).toBe(region);
+    expect(sep.nextElementSibling).toBe(wrapOf(region));
+    expectWrapped(region, 'eu-west-1');
+  });
+});