zz-meridian 0.23.0 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "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,22 @@
 
 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.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. Meridian is pre-1.0, so a removed prop ships in a minor, as it did in 0.19.0.
+
+### 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
+
+- **First-load JS can be held to each route's baseline alone** ([#76](https://github.com/zhixuan312/zz-meridian/issues/76)), as every page's HTML is since 0.19.0. Set `budgets.firstLoadKb: null` in `scripts/verify.config.ts`: a route `scripts/verify.baseline.json` holds is then held to `firstLoadGrowthPct` over its own figure and nothing else, and the 820 KiB cap binds only a route the baseline does not hold yet. A product whose largest page sits near the cap no longer fails `pnpm verify` for a change its own baseline allows, and no longer derives a cap from the baseline to say the same rule twice. Leaving the key out keeps the cap on every route, as before; the size line says which applies (`cap 820 KiB for a route the baseline does not hold`).
+
 ## [0.23.0] · 2026-10-20
 
 ### New

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "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 the wrapper's cut span in the
+  // wrapper is six levels, so the cell's title is still found.
+  const titled = (el) => { for (let n = el, i = 0; n && i < 6; 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/scripts/lib/budgets.ts

@@ -24,7 +24,8 @@ export type NavigationCheck = {
 };
 export type Budgets = {
   navigation: { warm: ReadinessBudget; cold: ReadinessBudget; afterLive: ReadinessBudget };
-  firstLoadKb: number;
+  /** `null`: each route the baseline holds is held to it alone, and the default cap binds only a route it does not. */
+  firstLoadKb: number | null;
   firstLoadGrowthPct: number;
   htmlGrowthPct: number;
   htmlKb: Record<string, number>;
@@ -33,7 +34,7 @@ export type Budgets = {
 export type BudgetsConfig = {
   budgets?: {
     navigation?: { warm?: ReadinessBudget; cold?: ReadinessBudget; afterLive?: ReadinessBudget };
-    firstLoadKb?: number;
+    firstLoadKb?: number | null;
     firstLoadGrowthPct?: number;
     htmlGrowthPct?: number;
     htmlKb?: Record<string, number>;
@@ -47,6 +48,9 @@ const COLD: ReadinessBudget = {
   interactiveMs: { desktop: 2000, phone: 4000 },
 };
 
+/** The first-load cap, in KiB, for a route the baseline does not hold, and for every route unless `firstLoadKb` is null. */
+export const FIRST_LOAD_CAP_KB = 820;
+
 /** Each page's HTML is held to its own baseline; an absolute HTML cap is a project's route, so the defaults set none. */
 export const DEFAULT_BUDGETS: Budgets = {
   navigation: {
@@ -58,7 +62,7 @@ export const DEFAULT_BUDGETS: Budgets = {
     cold: COLD,
     afterLive: COLD,
   },
-  firstLoadKb: 820,
+  firstLoadKb: FIRST_LOAD_CAP_KB,
   firstLoadGrowthPct: 5,
   htmlGrowthPct: 5,
   htmlKb: {},
@@ -92,7 +96,7 @@ export function budgetsOf(config: BudgetsConfig): Budgets {
   const cold = b.navigation?.cold ?? DEFAULT_BUDGETS.navigation.cold;
   return {
     navigation: { warm, cold, afterLive: b.navigation?.afterLive ?? cold },
-    firstLoadKb: b.firstLoadKb ?? DEFAULT_BUDGETS.firstLoadKb,
+    firstLoadKb: b.firstLoadKb === null ? null : b.firstLoadKb ?? DEFAULT_BUDGETS.firstLoadKb,
     firstLoadGrowthPct: b.firstLoadGrowthPct ?? DEFAULT_BUDGETS.firstLoadGrowthPct,
     htmlGrowthPct: b.htmlGrowthPct ?? DEFAULT_BUDGETS.htmlGrowthPct,
     htmlKb: b.htmlKb ?? DEFAULT_BUDGETS.htmlKb,

package/payload/scripts/lib/sizes.ts

@@ -19,16 +19,20 @@ export function firstLoad(
   });
 }
 
-/** Routes over the cap or past their growth allowance over a baseline; without a baseline growth is not configured. */
+/**
+ * Routes over the cap or past their growth allowance over a baseline; without a baseline growth is not configured.
+ * `capUnheldOnly` holds a route the baseline holds to its baseline alone, so the cap binds only a route it does not.
+ */
 export function firstLoadProblems(
   routes: { route: string; bytes: number }[],
-  { capKiB, growthPct, baseline }: { capKiB: number; growthPct: number; baseline: Record<string, number> | null },
+  { capKiB, growthPct, baseline, capUnheldOnly = false }: { capKiB: number; growthPct: number; baseline: Record<string, number> | null; capUnheldOnly?: boolean },
 ): { problems: string[]; growth: 'checked' | 'not-configured' } {
   const problems: string[] = [];
   for (const { route, bytes } of routes) {
-    if (bytes > capKiB * KIB) problems.push(`${route}: first-load JS ${kib(bytes)} KiB over the ${capKiB} KiB cap`);
     const base = baseline?.[route];
-    if (base === undefined || base <= 0) continue;
+    const held = base !== undefined && base > 0;
+    if (!(capUnheldOnly && held) && bytes > capKiB * KIB) problems.push(`${route}: first-load JS ${kib(bytes)} KiB over the ${capKiB} KiB cap`);
+    if (!held) continue;
     const grew = ((bytes - base) / base) * 100;
     if (grew > growthPct) problems.push(`${route}: first-load JS grew ${grew.toFixed(1)}% over its baseline (cap ${growthPct}%)`);
   }

package/payload/scripts/sizes.ts

@@ -6,7 +6,8 @@
  *
  * First-load comes from the build's own `diagnostics/route-bundle-stats.json`, read once, with each chunk's size from
  * disk: every chunk a route loads counted once, uncompressed. It is checked against `budgets.firstLoadKb` and, when
- * `scripts/verify.baseline.json` exists, against `budgets.firstLoadGrowthPct` over it. A page's HTML is what a person
+ * `scripts/verify.baseline.json` exists, against `budgets.firstLoadGrowthPct` over it; with `firstLoadKb: null` a route
+ * the baseline holds is held to it alone, and the default cap binds only a route it does not. A page's HTML is what a person
  * downloads: the complete streamed response from the app running at `--base`, gzipped. Every page in the baseline's
  * `html` is held to `budgets.htmlGrowthPct` over its own figure, and a route in `budgets.htmlKb` also to that absolute
  * cap. Without a baseline a growth check is `not-configured`, a warning and never a pass; without `--base` the HTML is
@@ -28,7 +29,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { gzipSync } from 'node:zlib';
 
-import { budgetsOf, type BudgetsConfig } from './lib/budgets.ts';
+import { FIRST_LOAD_CAP_KB, budgetsOf, type BudgetsConfig } from './lib/budgets.ts';
 import { distDirOf } from './lib/next-config.ts';
 import { firstLoad, firstLoadProblems, htmlGrowthProblems, htmlProblems, htmlRoutes } from './lib/sizes.ts';
 import verifyConfig from './verify.config.ts';
@@ -112,11 +113,12 @@ async function main(): Promise<number> {
 
   const budgets = budgetsOf(verifyConfig as BudgetsConfig);
   const baseline = baselineOf();
-  const size = firstLoadProblems(routes, { capKiB: budgets.firstLoadKb, growthPct: budgets.firstLoadGrowthPct, baseline: baseline?.firstLoad ?? null });
+  const capKiB = budgets.firstLoadKb ?? FIRST_LOAD_CAP_KB;
+  const size = firstLoadProblems(routes, { capKiB, growthPct: budgets.firstLoadGrowthPct, baseline: baseline?.firstLoad ?? null, capUnheldOnly: budgets.firstLoadKb === null });
   const largest = routes.reduce((a, b) => (b.bytes > a.bytes ? b : a), routes[0]);
   const lines: string[] = [];
   const firstStatus: Status = size.problems.length ? 'FAIL' : size.growth === 'not-configured' ? 'warn' : 'ok';
-  lines.push(`${firstStatus === 'FAIL' ? 'FAIL   ' : firstStatus === 'warn' ? 'warn   ' : 'ok     '} first-load ${routes.length} routes, largest ${largest.route} ${kib(largest.bytes)} KiB · cap ${budgets.firstLoadKb} KiB`
+  lines.push(`${firstStatus === 'FAIL' ? 'FAIL   ' : firstStatus === 'warn' ? 'warn   ' : 'ok     '} first-load ${routes.length} routes, largest ${largest.route} ${kib(largest.bytes)} KiB · cap ${capKiB} KiB${budgets.firstLoadKb === null ? ' for a route the baseline does not hold' : ''}`
     + ` · growth ${size.growth === 'checked' ? `within ${budgets.firstLoadGrowthPct}% of the baseline` : 'not-configured (no scripts/verify.baseline.json)'}`);
   for (const p of size.problems) lines.push(`FAIL    ${p}`);
 

package/payload/scripts/verify.config.ts

@@ -101,11 +101,12 @@ type VerifyConfig = {
    * `scripts/verify.baseline.json`, the warm, cold and after-live navigation times, and no prefetch on a closed phone drawer.
    * Every page's HTML, gzipped through the end of the streamed response, is held to `htmlGrowthPct` (5%) over its own
    * figure in the baseline's `html`; `htmlKb` adds an absolute cap in KiB, the same gzipped figure, for a page a project
-   * wants pinned, and has no default.
+   * wants pinned, and has no default. `firstLoadKb: null` holds first-load JS the same way: each route the baseline holds
+   * to its own figure alone, with the default cap binding only a route the baseline does not hold yet.
    */
   budgets?: {
     navigation?: { warm?: ReadinessBudget; cold?: ReadinessBudget; afterLive?: ReadinessBudget };
-    firstLoadKb?: number;
+    firstLoadKb?: number | null;
     firstLoadGrowthPct?: number;
     htmlGrowthPct?: number;
     htmlKb?: Record<string, number>;

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>{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

@@ -74,7 +74,6 @@ export function TableHeader({
   sort,
   onSort,
   grow,
-  flexible,
   children,
   ...rest
 }: ThHTMLAttributes<HTMLTableCellElement> & {
@@ -82,10 +81,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 +96,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 +128,19 @@ 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.
+ */
+export function Cut({ children }: { children?: ReactNode }) {
+  return (
+    <span className="grid min-w-0 grid-cols-[minmax(0,max-content)]">
+      <span className="truncate">{children}</span>
+    </span>
+  );
+}
+
 export function TableCell({
   className,
   align,
@@ -160,13 +164,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>{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-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');
+  });
+});

package/payload/tests/verify-sizes.test.ts

@@ -22,6 +22,13 @@ describe('first-load JS', () => {
     expect(firstLoadProblems([{ route: '/y', bytes: 535 * KiB }], { capKiB: 820, growthPct: 5, baseline: null })).toEqual({ problems: [], growth: 'not-configured' });
     expect(firstLoadProblems([{ route: '/y', bytes: 535 * KiB }], { capKiB: 1, growthPct: 5, baseline: null }).problems).toHaveLength(1);
   });
+  it('with the cap for unheld routes only, holds a route the baseline holds to its baseline alone (#76)', () => {
+    const routes = [{ route: '/x', bytes: 852 * KiB }, { route: '/y', bytes: 900 * KiB }, { route: '/z', bytes: 700 * KiB }];
+    const got = firstLoadProblems(routes, { capKiB: 820, growthPct: 5, baseline: { '/x': 850 * KiB, '/z': 600 * KiB }, capUnheldOnly: true });
+    expect(got.problems).toEqual(['/y: first-load JS 900 KiB over the 820 KiB cap', '/z: first-load JS grew 16.7% over its baseline (cap 5%)']);
+    expect(budgetsOf({ budgets: { firstLoadKb: null } }).firstLoadKb).toBeNull();
+    expect(budgetsOf({}).firstLoadKb).toBe(820);
+  });
 });
 
 describe('HTML and prefetch', () => {