zz-meridian 0.31.0 → 0.31.2

package/dist/migrations.js

@@ -556,7 +556,21 @@ export const RELEASE_MIGRATIONS = [
         instructions: 'The release\'s `app/layout.tsx` shows `app.description` as the document\'s description — the line a search engine and a link preview put under the name — where it used to write a sentence of the template\'s own. `src/app.config.ts` is yours and an update does not touch it, so the key is missing there until you add it. Add `description: \'<one sentence about your product>\',` to the `app` object beside `name`. A project that keeps its own `app/layout.tsx` needs the key all the same, because the layout a project brings over from the release reads it.',
         checks: ['gate'],
     },
+    {
+        id: 'live-stream-shutdown',
+        since: '0.31.1',
+        applies: liveStreamKeptOnStop,
+        summary: 'The live stream ends every open stream when the server is told to stop, so tabs reconnect to the server that replaces it.',
+        instructions: '`src/data/live-stream.ts` is yours, so an update does not touch it, and the copy you have never ends a stream. A server told to stop (`next start` on SIGTERM or SIGINT, as a deploy or a restart does) closes its port and waits for its open connections: the old process stays up holding every tab\'s stream while the new one serves the port, so no tab hears a change hint again and every change waits for its next safety poll. Bring the block that begins `Every stream still open` over from `references/live.md` (the `open` set, `endLiveStreams` and `endOnShutdown`), call `open.delete(close)` first in the stream\'s `close`, and `endOnShutdown(close)` after the stream listens for its abort. A project that serves its stream some other way ends its streams on the signal the same way.',
+        checks: ['gate'],
+    },
 ];
+/** 0.31.1: a live stream starter that does not end its streams when the server is told to stop. */
+function liveStreamKeptOnStop(root) {
+    const rel = 'src/data/live-stream.ts';
+    const body = text(root, rel);
+    return body !== null && /export function liveStream\b/.test(body) && !/endLiveStreamsOnSignal/.test(body) ? [rel] : null;
+}
 /** The `app` object of a project's configuration, as `src/app.config.ts` writes it. */
 const APP_OBJECT = /^export const app = \{[\s\S]*?^\} as const;$/m;
 /** 0.30.0: the release's layout reads `app.description`, and a project's own configuration has no such key. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.31.0",
+  "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,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.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
+
+- **A server that is stopped lets go of its live streams.** `next start` told to stop (SIGTERM or SIGINT, as a deploy or a restart does) closes its port and then waits for its open connections, and a live stream never ended of itself. So the old process stayed up holding every tab's stream while the new one served the port: no tab heard a change hint again, and every change waited for the tab's next safety poll (the weekly live check: `a server restart: B did not show a write made after the restart within 5000 ms`). `liveStream` now ends every open stream when the process is told to stop; each tab reconnects to the new server within about a second and hears hints again (a write after a restart reached the other tab in 540 ms, where it took 2.9 s). Where nothing else listens for the signal, the process still stops as it did.
+  - **What a team does.** `src/data/live-stream.ts` is yours, so an update does not replace it: run `update`, which reports `migration:live-stream-shutdown` for a copy that never ends its streams, and bring the block that begins `Every stream still open` over from `references/live.md`.
+  - **Doing nothing.** Nothing fails; a deploy or restart keeps the old server up while a tab is open, and changes reach other tabs only at their next poll until they reload.
+- **A live tab tries its stream again as soon as the server answers after it did not.** A tab that had given its stream up for polling tried it again only on every fifth poll. A poll that answers after one that failed (the server is back) now opens the stream at once, so hints resume; a stream a proxy blocks, whose polls never fail, is still tried on every fifth poll.
+
 ## [0.31.0] · 2026-10-26
 
 ### New

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.31.0",
+  "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/skills/zz-meridian/references/live.md

@@ -115,6 +115,33 @@ const MAX_QUEUED = 100;
 
 let noted = false;
 
+/**
+ * Every stream still open. A server told to stop (`next start` on SIGTERM or SIGINT) closes its port and then waits for
+ * its open connections, and a stream never ends of itself: the old process kept every tab's stream while the new one
+ * served the port, so no tab heard a hint again until its next poll. Ending them lets the old process go and each tab
+ * connect to the new one.
+ */
+const open = new Set<() => void>();
+let watching = false;
+
+/** Ends every open stream; each tab reconnects (the stream's `retry`), to whichever server then holds the port. */
+function endLiveStreams() {
+  for (const close of [...open]) close();
+}
+
+function endOnShutdown(close: () => void) {
+  open.add(close);
+  if (watching || typeof process === 'undefined' || typeof process.once !== 'function') return;
+  watching = true;
+  for (const sig of ['SIGTERM', 'SIGINT'] as const) {
+    process.once(sig, function endLiveStreamsOnSignal() {
+      endLiveStreams();
+      // A listener takes the place of the signal's default: where nothing else listens, the process stops as it would have.
+      if (process.listenerCount(sig) === 0) process.kill(process.pid, sig);
+    });
+  }
+}
+
 type LiveStreamOptions = {
   /** The requested names, already authorized once; the first frame greets with what moved. */
   names: string[];
@@ -141,6 +168,7 @@ export function liveStream({ names, collections, signal, heartbeatMs = 15000, au
   function close() {
     if (closed) return;
     closed = true;
+    open.delete(close);
     clearInterval(timer);
     for (const off of unsubscribe) off();
     unsubscribe.length = 0;
@@ -195,6 +223,7 @@ export function liveStream({ names, collections, signal, heartbeatMs = 15000, au
       controller = c;
       if (signal.aborted) return close();
       signal.addEventListener('abort', close);
+      endOnShutdown(close);
       // Subscribe first, then compare: a write after the page's read either moves a revision the greeting names or
       // arrives as a hint.
       collections.forEach((collection, i) => {

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

@@ -191,6 +191,7 @@ Moving a project to 0.9.0 can report two more `migration:<id>` items, to 0.10.0
 | `no-data-mark` (0.19.0) | a test of the team's importing the Column chart and expecting a `.bg-fill-track` in a period with no data, such as `optional:tests/column-chart-no-data.test.tsx` as the template wrote it | a `null` period draws a dashed hairline on the baseline since 0.19.0, not a track the height of the scale, which was the tallest mark on the chart: bring `optional:tests/column-chart-no-data.test.tsx` over from the release as it has it, and find `[data-no-data-mark]` where a test of your own found `.bg-fill-track` or `[data-track]`; checked by the gate |
 | `table-grid` (0.26.0) | a file of the team's importing the Table or the DataTable that expects a `grow` column's `@min-[672px]:min-w-64`, such as `optional:tests/table-cut-cell.test.tsx` as the template wrote it, or passes a `colSpan` to a `TableCell` | a table is a grid since 0.26.0, its spare shared equally between the gaps, and a `grow` column's floor is `min-w-40` at every width: bring `optional:tests/table-cut-cell.test.tsx` over from the release as it has it, expect `min-w-40` alone where a test of your own expected the wider floor, and draw a row that spans the table, such as an empty state, outside it or as a `DataTable` `empty`, since a cell takes one track; checked by the gate |
 | `four-layers` (0.28.0) | a file of the team's importing a module that has left `optional:src/views/` or `optional:src/data/` for `src/logic/` — the migration names the file and, in its instruction, every path the module left — or importing `afterStart` from `src/components/patterns/incident-card` or `summarise` from `src/components/patterns/status-list`, which no longer export them | thirty-eight modules are in `src/logic/` since 0.28.0, thirty-six of them from `optional:src/views/`, and each import is rewritten to the path the module has: `afterStart` is `src/logic/after-start.ts` and `summarise` is `src/logic/summarise.ts`, and those two must move because the cards are Meridian's and the update replaces them, while every path under `optional:src/views/` and `optional:src/data/` is the team's and stays as it is; a created project brings the release's `src/logic/` over with the pages that import it; the standard the layers come from is `data-layers.md`; checked by the gate and a build |
+| `live-stream-shutdown` (0.31.1) | `optional:src/data/live-stream.ts` that never ends its streams when the server is told to stop | a stopped `next start` closes its port and waits for its open connections, so the old process kept every tab's stream while the new one served the port and no tab heard a hint again until its next poll: bring the block that begins `Every stream still open` over from `live.md`, delete the stream from the open set first in its `close`, and register it after it listens for its abort; checked by the gate |
 
 A created project that never changed the template's pages brings the release's version of each affected file over, with
 the files that arrived with them: the view contexts `optional:src/logic/home-context.ts` and its siblings, the view

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

package/payload/src/data/live-stream.ts

@@ -10,6 +10,33 @@ const MAX_QUEUED = 100;
 
 let noted = false;
 
+/**
+ * Every stream still open. A server told to stop (`next start` on SIGTERM or SIGINT) closes its port and then waits for
+ * its open connections, and a stream never ends of itself: the old process kept every tab's stream while the new one
+ * served the port, so no tab heard a hint again until its next poll. Ending them lets the old process go and each tab
+ * connect to the new one.
+ */
+const open = new Set<() => void>();
+let watching = false;
+
+/** Ends every open stream; each tab reconnects (the stream's `retry`), to whichever server then holds the port. */
+function endLiveStreams() {
+  for (const close of [...open]) close();
+}
+
+function endOnShutdown(close: () => void) {
+  open.add(close);
+  if (watching || typeof process === 'undefined' || typeof process.once !== 'function') return;
+  watching = true;
+  for (const sig of ['SIGTERM', 'SIGINT'] as const) {
+    process.once(sig, function endLiveStreamsOnSignal() {
+      endLiveStreams();
+      // A listener takes the place of the signal's default: where nothing else listens, the process stops as it would have.
+      if (process.listenerCount(sig) === 0) process.kill(process.pid, sig);
+    });
+  }
+}
+
 type LiveStreamOptions = {
   /** The requested names, already authorized once; the first frame greets with what moved. */
   names: string[];
@@ -36,6 +63,7 @@ export function liveStream({ names, collections, signal, heartbeatMs = 15000, au
   function close() {
     if (closed) return;
     closed = true;
+    open.delete(close);
     clearInterval(timer);
     for (const off of unsubscribe) off();
     unsubscribe.length = 0;
@@ -90,6 +118,7 @@ export function liveStream({ names, collections, signal, heartbeatMs = 15000, au
       controller = c;
       if (signal.aborted) return close();
       signal.addEventListener('abort', close);
+      endOnShutdown(close);
       // Subscribe first, then compare: a write after the page's read either moves a revision the greeting names or
       // arrives as a hint.
       collections.forEach((collection, i) => {

package/payload/src/lib/live.ts

@@ -56,6 +56,8 @@ export function createLiveClient({ refresh, endpoint = '/api/live', pollMs = 300
   let disposed = false;
   let paused = false;
   let polling = false;
+  /** The last refresh failed for a reason other than access: the server did not answer. */
+  let unreachable = false;
   let state: LiveState | null = null;
   /** Bumped whenever results in flight must stop counting: the page hid, or the client ended. */
   let epoch = 0;
@@ -122,9 +124,18 @@ export function createLiveClient({ refresh, endpoint = '/api/live', pollMs = 300
         if (full) synced = true;
         if (synced && opened) emit('live');
         else if (polling) emit('polling');
+        // A server that answers again after it did not (a restart, a deploy) is tried for its stream at once, not on the
+        // fifth poll: until then its hints are lost and every change waits for a poll. A refresh that never failed does
+        // not count, so a stream a proxy blocks is still tried only on every fifth poll.
+        if (unreachable && polling) {
+          attempts = MAX_ATTEMPTS - 1;
+          connect();
+        }
+        unreachable = false;
       }
     } catch (e) {
       if (mine === epoch && !disposed) {
+        if (!isAuthError(e)) unreachable = true;
         if (isAuthError(e)) {
           paused = true;
           closeSource();

package/payload/tests/live-client.test.tsx

@@ -158,6 +158,25 @@ describe('the live client', () => {
     expect(FakeSource.all.length).toBe(opened + 1);
     c.dispose();
   });
+  it('tries the stream at once when a poll answers after one that did not, as a restarted server does', async () => {
+    let down = false;
+    const refresh = vi.fn(async () => { if (down) throw new Error('network'); });
+    const { c, states } = client(refresh, 1000);
+    c.setNames(['members']);
+    for (let i = 0; i < 3; i++) { live().at(-1)!.fail(); await flush(1100); }
+    expect(states.at(-1)).toBe('polling');
+    down = true;
+    await flush(1000);
+    const opened = FakeSource.all.length;
+    down = false;
+    await flush(1000);
+    // The poll that answered opened a stream; without the rule the next try would wait for the fifth poll.
+    expect(FakeSource.all.length).toBe(opened + 1);
+    live().at(-1)!.open();
+    await flush(600);
+    expect(states.at(-1)).toBe('live');
+    c.dispose();
+  });
   it('pauses on an authorization failure and goes stale on any other', async () => {
     const denied = client(async () => { throw Object.assign(new Error('no'), { status: 403 }); });
     denied.c.setNames(['members']);