zz-meridian 0.25.0 → 0.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.25.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,11 +2,18 @@
 
 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. Meridian is pre-1.0, so a removed prop ships in a minor, as it did in 0.19.0.
+- **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
 

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.25.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,9 +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); };
-  // 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'))); };
+  // 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/src/components/patterns/data-table/index.tsx

@@ -357,7 +357,7 @@ export function DataTable<R>({
                                 <span className="hidden @max-[640px]:contents">{c.mobileCell(r)}</span>
                               </>
                             ) : content;
-                            return c.truncate ? <Cut>{body}</Cut> : body;
+                            return c.truncate ? <Cut align={c.align ?? (c.numeric ? 'right' : 'left')}>{body}</Cut> : body;
                           })()}
                         </td>
                       );

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 (
@@ -131,11 +132,12 @@ 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 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({ children }: { children?: ReactNode }) {
+export function Cut({ align = 'left', children }: { align?: keyof typeof ALIGN; children?: ReactNode }) {
   return (
-    <span className="grid min-w-0 grid-cols-[minmax(0,max-content)]">
+    <span className={cn('grid min-w-0 grid-cols-[minmax(0,max-content)]', JUSTIFY[align])}>
       <span className="truncate">{children}</span>
     </span>
   );
@@ -169,7 +171,7 @@ export function TableCell({
       )}
       {...rest}
     >
-      {truncate ? <Cut>{children}</Cut> : children}
+      {truncate ? <Cut align={align ?? (numeric ? 'right' : 'left')}>{children}</Cut> : children}
     </td>
   );
 }

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');
+  });
+});