zz-meridian 0.31.1 → 0.31.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "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,14 @@
 
 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.31.2] · 2026-10-27
+
+### Fixed
+
+- **Home and Revenue no longer drop a frame when the period changes to 7D on a slow phone** (the known issue of 0.31.0). At 7D the year is 52 windows, drawn in two column charts and a trend, and the tap committed about a thousand elements in one frame: on the weekly runner's phone its longest gap was 83 ms against the 50 ms floor. Measured at the emulated phone's rate times 1.6, which reproduces the runner, the gap is now 50 ms in six of six runs (style and layout 31 to 36 ms, from 63 to 72).
+  - **A dense column chart draws a finished column as one element.** Past 30 columns, a plain chart's finished column is the `[data-column]` element alone, its bar the element's `::before` with the same share of the scale, rounded top and 2px floor, and the row of columns grows as one instead of a column at a time. A running column, a column with no data, a stacked or a signed chart is drawn as before. A finished plain column of any chart is its own fill, one element fewer.
+  - **A chart's data table and axis labels follow its marks a frame later when the period changes.** ColumnChart's and TrendChart's `sr-only` table, and ColumnChart's `aria-hidden` axis labels, render one frame after the set of columns or dates changes; the first render has them at once, and the label row keeps its height for that frame.
+
 ## [0.31.1] · 2026-10-27
 
 ### Fixed

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "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/check.ts

@@ -81,7 +81,7 @@ function walk(dir: string, ext: RegExp, out: string[] = []) {
 const css = read('src/styles/tokens.css') + read('src/styles/base.css') + read('src/styles/motion.css');
 const defined = new Set([...css.matchAll(/--([a-z0-9-]+)\s*:/g)].map((m) => m[1]));
 /** Local custom properties a component sets for itself, and the host's bridged variables. */
-const LOCAL = /^(i|w|m-len|cols(-(xl|lg|md|sm))?|readout-(cursor|width)|safe-(top|right|bottom|left)|font-face-(sans|mono)|color-[a-z-]+|border-radius-[a-z]+|tw-.*|radix-.*)$/;
+const LOCAL = /^(i|w|m-len|bar-(h|at)|cols(-(xl|lg|md|sm))?|readout-(cursor|width)|safe-(top|right|bottom|left)|font-face-(sans|mono)|color-[a-z-]+|border-radius-[a-z]+|tw-.*|radix-.*)$/;
 
 // ── Cards ────────────────────────────────────────────────────────────────────────────────────────────
 const CARD_SECTIONS = ['## Surfaces', '## Agents', '## Accessibility'];

package/payload/src/components/charts/column-chart/index.tsx

@@ -5,6 +5,7 @@ import { cn } from '@/lib/cn';
 import { useMeridian } from '@/components/charts/meridian';
 import { Readout } from '@/components/charts/readout';
 import { niceTicks, SERIES_VAR, stackPart, ticksBetween } from '@/components/charts/scale';
+import { useSettled } from '@/components/charts/use-settled';
 import { useSize } from '@/components/charts/use-size';
 import { columnFold } from '@/logic/derivations';
 
@@ -58,6 +59,12 @@ export type ColumnChartProps = Shared & (
  * narrowest column that keeps its value at rest.
  */
 const GAP = 2, THIN = 1, REST = 36;
+/**
+ * Past this many columns a plain chart draws each finished column as one element, its bar the element's own `::before`,
+ * and grows them as one row: a year of 52 windows at 7D, three such charts on Home, committed about a thousand
+ * elements in the frame of the period tap and dropped it on a mid-range phone.
+ */
+const DENSE = 30;
 /** About the width of one character of a value at rest (`text-2xs`), in px: enough to tell whether a label fits its column. */
 const CH = 6.5;
 /**
@@ -153,6 +160,8 @@ export function ColumnChart({
   const set = (i: number | null) => { (timed ? meridian.setIndex : setOwn)(i); setLocal(i !== null); };
   const fill = height === 'fill';
   const soFar = running ? n - 1 : -1;
+  // The axis labels and the table follow the columns a frame later when the set of them changes (`useSettled`).
+  const settled = useSettled(bars.map((b) => b.key).join('\n'));
 
   // A period with no data has no height, so the scale is the periods that have one. Plain, a value under zero is a
   // fall: the scale goes under zero for it and the column hangs from the zero line (#78). Stacked, parts make a whole.
@@ -175,6 +184,7 @@ export function ColumnChart({
   // A column wide enough for a figure keeps its value above it at rest; a narrower one shows it when pointed at.
   const column = n ? (width - left - gap * (n - 1)) / n : 0;
   const rest = column >= REST;
+  const dense = n > DENSE && !signed;
   // Whatever is centred on a column and may be wider than it starts with the first column and ends with the last, so
   // nothing runs past the plot; inside those, a narrower one is still centred.
   /** A value as it reads; a period with no data reads the product's word, and "so far" with it while it is running. */
@@ -231,7 +241,7 @@ export function ColumnChart({
               <span className={cn('h-px flex-1', t === 0 ? 'bg-chart-axis' : 'bg-chart-grid')} />
             </div>
           ))}
-          <div className="absolute inset-y-0 right-0 flex" style={{ left, columnGap: gapOf(n) }}>
+          <div className={cn('absolute inset-y-0 right-0 flex', dense && 'grow-y')} style={{ left, columnGap: gapOf(n) }}>
             {bars.map((b, i) => {
               const pointed = active === i;
               const hot = pointed || (active === null && b.key === highlight);
@@ -245,6 +255,49 @@ export function ColumnChart({
               // never "No data…" cut mid-word; the tooltip, the readout, the announcement and the table say it whole (#71).
               const full = totalOf(b, i);
               const text = !tip && b.none && unfinished && full.length * CH > column ? 'So far' : full;
+              const plainFill = !b.none && !drawn && !unfinished;
+              const valueLabel = rest || pointed ? (
+                      // One element at rest and pointed at, so its entrance never replays. At rest the value is held to its
+                      // column; the tooltip, and a total shown only on pointing, may be wider than theirs.
+                      <span aria-hidden className={cn('pointer-events-none absolute', fall ? 'top-full mt-1' : 'bottom-full mb-1', rest && 'fade-in', tip || !rest ? cn('z-10', placed(i)) : 'inset-x-0')}>
+                        <span
+                          className={cn(
+                            't-num block text-2xs leading-4',
+                            tip
+                              ? 'rounded-sm bg-surface-inverse px-1.5 py-1 font-medium whitespace-nowrap text-ink-inverse shadow-overlay'
+                              : rest
+                                ? cn('truncate text-center', pointed ? 'font-medium text-ink' : 'text-ink-3')
+                                : 'font-medium whitespace-nowrap text-ink',
+                          )}
+                        >
+                          <span data-value>{text}</span>
+                          {tip && unfinished && !b.none ? ' · so far' : null}
+                        </span>
+                      </span>
+              ) : null;
+              const share = `${(Math.abs(b.total) / (top - low)) * 100}%`;
+              if (dense && plainFill) {
+                // One element: the bar is its ::before, its share of the scale and never under 2px; the value, when it shows,
+                // stands on a box of the bar's height.
+                return (
+                  <div
+                    key={b.key}
+                    data-column={b.key}
+                    data-active={pointed ? '' : undefined}
+                    title={[rest && text.length * 7 > column ? text : null, b.key === highlight ? highlightLabel : null].filter(Boolean).join(' · ') || undefined}
+                    className={cn(
+                      'group/col relative h-full min-w-0 flex-1 before:absolute before:inset-x-0 before:bottom-(--bar-at) before:h-(--bar-h) before:rounded-t-[4px] before:transition-colors before:duration-(--dur-hover)',
+                      b.total !== 0 && 'before:min-h-[2px]',
+                      hot ? 'before:bg-accent' : 'before:bg-chart-neutral hover:before:bg-chart-neutral-strong',
+                    )}
+                    style={{ ['--bar-h' as string]: share, ['--bar-at' as string]: `${at100(0)}%` }}
+                    onPointerEnter={() => set(i)}
+                    onPointerDown={() => set(i)}
+                  >
+                    {valueLabel ? <div className={cn('absolute inset-x-0', b.total !== 0 && 'min-h-[2px]')} style={{ bottom: `${at100(0)}%`, height: share }}>{valueLabel}</div> : null}
+                  </div>
+                );
+              }
               return (
                 <div
                   key={b.key}
@@ -269,14 +322,17 @@ export function ColumnChart({
                     className="absolute inset-x-0"
                     style={{
                       ...(fall ? { top: `${100 - at100(0)}%` } : { bottom: `${at100(0)}%` }),
-                      height: b.none ? '0%' : `${(Math.abs(b.total) / (top - low)) * 100}%`,
+                      height: b.none ? '0%' : share,
                       minHeight: (drawn ? Math.max(0, shown.length * 4 - 1) : b.total !== 0 ? 2 : 0) + (unfinished ? 2 : 0),
                     }}
                   >
                     <div
                       className={cn(
-                        'grow-y relative h-full',
+                        // A dense chart grows its row as one; a column of its own grows only in a chart that is not.
+                        !dense && 'grow-y', 'relative h-full',
                         fall ? 'rounded-b-[4px]' : 'rounded-t-[4px]',
+                        // A finished plain column is its own fill: one element fewer a column, in a chart of 52 of them.
+                        plainFill && cn('w-full transition-colors duration-(--dur-hover)', hot ? 'bg-accent' : 'bg-chart-neutral group-hover/col:bg-chart-neutral-strong'),
                         drawn && 'transition-[box-shadow] duration-(--dur-hover)',
                         drawn && hot && 'z-1 ring-2 ring-ink',
                         // A period still running: a dashed outline, open at the baseline, around a fill at half strength. The
@@ -304,29 +360,11 @@ export function ColumnChart({
                             />
                           ))}
                         </div>
-                      ) : (
-                        <div className={cn('h-full w-full transition-colors duration-(--dur-hover)', fall ? 'rounded-b-[4px]' : 'rounded-t-[4px]', hot ? 'bg-accent' : 'bg-chart-neutral group-hover/col:bg-chart-neutral-strong', unfinished && 'opacity-50')} />
+                      ) : plainFill ? null : (
+                        <div className={cn('h-full w-full transition-colors duration-(--dur-hover)', fall ? 'rounded-b-[4px]' : 'rounded-t-[4px]', hot ? 'bg-accent' : 'bg-chart-neutral group-hover/col:bg-chart-neutral-strong', 'opacity-50')} />
                       )}
                     </div>
-                    {rest || pointed ? (
-                      // One element at rest and pointed at, so its entrance never replays. At rest the value is held to its
-                      // column; the tooltip, and a total shown only on pointing, may be wider than theirs.
-                      <span aria-hidden className={cn('pointer-events-none absolute', fall ? 'top-full mt-1' : 'bottom-full mb-1', rest && 'fade-in', tip || !rest ? cn('z-10', placed(i)) : 'inset-x-0')}>
-                        <span
-                          className={cn(
-                            't-num block text-2xs leading-4',
-                            tip
-                              ? 'rounded-sm bg-surface-inverse px-1.5 py-1 font-medium whitespace-nowrap text-ink-inverse shadow-overlay'
-                              : rest
-                                ? cn('truncate text-center', pointed ? 'font-medium text-ink' : 'text-ink-3')
-                                : 'font-medium whitespace-nowrap text-ink',
-                          )}
-                        >
-                          <span data-value>{text}</span>
-                          {tip && unfinished && !b.none ? ' · so far' : null}
-                        </span>
-                      </span>
-                    ) : null}
+                    {valueLabel}
                   </div>
                 </div>
               );
@@ -351,8 +389,9 @@ export function ColumnChart({
           </Readout>
         ) : null}
       </div>
-      <div aria-hidden className="mt-2 flex text-2xs text-ink-3" style={{ paddingLeft: left, columnGap: gapOf(n) }}>
-        {bars.map((b, i) => (
+      {/* The row keeps its height for the frame its labels wait, so nothing under it moves. */}
+      <div aria-hidden className="mt-2 flex min-h-4 text-2xs text-ink-3" style={{ paddingLeft: left, columnGap: gapOf(n) }}>
+        {settled && bars.map((b, i) => (
           <span key={b.key} className="relative h-4 min-w-0 flex-1">
             {active === i ? (
               <span className={cn('absolute z-10', placed(i))}><span className="rounded-xs bg-surface px-1 whitespace-nowrap text-ink">{b.label}</span></span>
@@ -365,7 +404,7 @@ export function ColumnChart({
         ))}
       </div>
       <p className="sr-only" aria-live="polite">{reading}</p>
-      <table className="sr-only">
+      {settled ? <table className="sr-only">
         <caption>{label}{highlight && highlightLabel ? `. Accented: ${highlightLabel}` : ''}</caption>
         {drawn ? <thead><tr><th scope="col">Period</th>{drawn.map((p) => <th key={p.key} scope="col">{p.label}</th>)}<th scope="col">Total</th></tr></thead> : null}
         <tbody>
@@ -377,7 +416,7 @@ export function ColumnChart({
             </tr>
           ))}
         </tbody>
-      </table>
+      </table> : null}
     </figure>
   );
 }

package/payload/src/components/charts/trend-chart/index.tsx

@@ -7,6 +7,7 @@ import { formatDate } from '@/lib/format-date';
 import { useMeridian } from '@/components/charts/meridian';
 import { Readout } from '@/components/charts/readout';
 import { monotonePath, ticksBetween, SERIES_VAR, stackPart } from '@/components/charts/scale';
+import { useSettled } from '@/components/charts/use-settled';
 import { useSize } from '@/components/charts/use-size';
 import { trendTotals } from '@/logic/derivations';
 
@@ -205,6 +206,8 @@ export function TrendChart({
   const n = dates.length;
   // The point still running, if there is one: everything solid stops at the point before it.
   const soFar = running ? n - 1 : -1;
+  // The table follows the line a frame later when the dates change (`useSettled`).
+  const settled = useSettled(dates.join('\n'));
   const x = (i: number) => pad.l + (n <= 1 ? W / 2 : (i / (n - 1)) * W);
   const y = (v: number) => pad.t + H - ((v - low) / (top - low)) * H;
 
@@ -474,11 +477,11 @@ export function TrendChart({
           ) : null}
         </Readout>
       ) : null}
-      <table className="sr-only">
+      {settled ? <table className="sr-only">
         <caption>{label}{band ? `. ${band.label}` : ''}{marks ? `. Marked: ${marks.label}` : ''}{baseline ? `. ${baseline.label}` : ''}{running ? `. ${SO_FAR}` : ''}</caption>
         <thead><tr><th>Date</th>{series.map((s) => <th key={s.key}>{s.label}</th>)}{totals ? <th>Total</th> : null}</tr></thead>
         <tbody>{dates.map((d, i) => <tr key={d}><td>{d}{i === soFar ? ', so far' : null}</td>{series.map((s) => <td key={s.key}>{fmt(s.values[i])}</td>)}{totals ? <td>{fmt(totals[i])}</td> : null}</tr>)}</tbody>
-      </table>
+      </table> : null}
     </div>
   );
 }

package/payload/src/components/charts/use-settled.ts

@@ -0,0 +1,19 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Whether `key` was already the chart's at the last frame: false for the one frame after it changes, true on the first
+ * render and ever after. A chart draws its marks at once and its data table, which nobody sees, a frame later, so a
+ * change of period commits the marks without the table's rows: Home's year at 7D, three charts of 52 windows, dropped a
+ * frame on a mid-range phone when every row came in the same frame as the columns.
+ */
+export function useSettled(key: string): boolean {
+  const [settled, setSettled] = useState(key);
+  useEffect(() => {
+    if (settled === key) return;
+    const id = requestAnimationFrame(() => setSettled(key));
+    return () => cancelAnimationFrame(id);
+  }, [key, settled]);
+  return settled === key;
+}