cursedbelt 5.76.0 → 5.78.0

package/src/react/components/BuildFreshness.spec.tsx

@@ -62,6 +62,16 @@ describe('BuildFreshnessNotice', () => {
     expect(screen.getByRole('button', { name: /Reload/i })).toBeDefined();
   });
 
+  test('🔴 speaks off a CLIENT build stamp too — `/build.json`\'s top-level `{ commit }`', async () => {
+    // `forge-client stamp` writes the client's own commit at the top of `dist/build.json`. roms
+    // probes it (its `/healthz` is its Mac's), and a TV tab kept the old build for 84 minutes
+    // after a fast-lane ship because nothing read it twice (forge task 3022, 2026-10-10).
+    const stamp = (commit: string) => ({ commit, dirty: false });
+    healthzServing([stamp('a'.repeat(40)), stamp('b'.repeat(40))]);
+    render(<BuildFreshnessNotice intervalMs={5} probeUrl='/build.json' appLabel='ROMs' />);
+    await waitFor(() => expect(screen.queryByText(/ROMs was updated/i)).not.toBeNull(), { timeout: 2_000 });
+  });
+
   test('stays silent when the probe fails — offline, or a 502 mid-deploy', async () => {
     healthzServing([build('aaaaaaaaaaaa'), new TypeError('Failed to fetch')]);
     render(<BuildFreshnessNotice intervalMs={5} />);

package/src/react/components/BuildFreshness.tsx

@@ -52,7 +52,8 @@ const MIN_GAP_MS = 30_000;
 export interface UseBuildFreshnessOptions {
   /**
    * Where the serving build identifies itself. Any JSON answering
-   * `{ build: { commitFull } }` — every satellite's health route does.
+   * `{ build: { commitFull } }` — every satellite's health route does — or a client build
+   * stamp's `{ commit }` (`/build.json`, `forge-client stamp`).
    */
   probeUrl?: string;
   /** Poll interval for a visible tab, in ms. */
@@ -70,11 +71,19 @@ export interface BuildFreshness {
   servingCommit: string | null;
 }
 
-/** The one shape read out of a health payload, defensively. */
+/**
+ * The commit out of a health payload or a client build stamp, defensively.
+ *
+ * Two shapes, one identity: a satellite's `/healthz` nests it (`{ build: { commitFull } }`), and
+ * the CLIENT's own stamp — `forge-client stamp`'s `dist/build.json` (cursedops `stagedClient.ts`)
+ * — carries it at the top (`{ commit }`). The stamp is the better probe for an app whose health
+ * route answers for a server that ships on its own clock (roms' `/healthz` is its Mac's): it is a
+ * static file of the very build this tab loaded (forge 2026-10-10, task 3022).
+ */
 function commitOf(payload: unknown): string | null {
   if (typeof payload !== 'object' || payload === null) return null;
-  const build = (payload as { build?: unknown }).build;
-  if (typeof build !== 'object' || build === null) return null;
+  const nested = (payload as { build?: unknown }).build;
+  const build = typeof nested === 'object' && nested !== null ? nested : payload;
   const full = (build as { commitFull?: unknown }).commitFull;
   const short = (build as { commit?: unknown }).commit;
   const value = typeof full === 'string' && full ? full : typeof short === 'string' ? short : '';

package/src/react/components/DataTable/TableFilterBuilder.tsx

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { cn } from '../../lib/cn.js';
 import { Button } from '../Button.js';
 import { Input } from '../Input.js';
-import { NativeSelect } from '../NativeSelect.js';
 import { Popover } from '../Popover.js';
+import { SelectField } from '../SelectField.js';
 import {
   countActiveConditions,
   describeFilterQuery,
@@ -181,31 +181,27 @@ export function TableFilterBuilder({
                       <span className='w-12 shrink-0 text-right text-caption font-semibold uppercase tracking-wide text-muted-foreground'>
                         {conditionIndex === 0 ? 'Where' : 'and'}
                       </span>
-                      <NativeSelect
+                      <SelectField
                         size='sm'
                         aria-label='Column'
-                        className='min-w-0 flex-1'
-                        wrapperClassName='min-w-0 flex-1 max-sm:min-w-24'
+                        className='min-w-0 flex-1 max-sm:min-w-24'
                         value={condition.column}
                         options={columns.map((c) => ({ value: c.key, label: c.label }))}
-                        onChange={(e) =>
+                        onValueChange={(column) =>
                           patchGroup(group.id, (list) =>
-                            list.map((c) => (c.id === condition.id ? { ...c, column: e.target.value } : c)),
+                            list.map((c) => (c.id === condition.id ? { ...c, column } : c)),
                           )
                         }
                       />
-                      <NativeSelect
+                      <SelectField
                         size='sm'
                         aria-label='Condition'
-                        className='min-w-0'
-                        wrapperClassName='w-40 shrink-0 max-sm:w-auto max-sm:min-w-32 max-sm:flex-1'
+                        className='w-40 min-w-0 shrink-0 max-sm:w-auto max-sm:min-w-32 max-sm:flex-1'
                         value={condition.op}
                         options={OP_OPTIONS}
-                        onChange={(e) =>
+                        onValueChange={(op) =>
                           patchGroup(group.id, (list) =>
-                            list.map((c) =>
-                              c.id === condition.id ? { ...c, op: e.target.value as FilterOp } : c,
-                            ),
+                            list.map((c) => (c.id === condition.id ? { ...c, op: op as FilterOp } : c)),
                           )
                         }
                       />

package/src/react/components/DataTable/tableSystem.spec.tsx

@@ -238,6 +238,14 @@ describe('search AND the filter builder AND the sort stack compose', () => {
 });
 
 describe('the filter builder, driven the way a person drives it', () => {
+  /** Picks `label` in one of the builder's `SelectField`s as a keyboard does: open the trigger,
+   *  then take the option. Its Column and Condition were OS menus until forge task 3063. */
+  const choose = (trigger: HTMLElement, label: string) => {
+    expect(trigger.getAttribute('role')).toBe('combobox');
+    fireEvent.keyDown(trigger, { key: 'Enter' });
+    fireEvent.click(screen.getByRole('option', { name: label }));
+  };
+
   /**
    * 🔴 The acceptance test for item 3 is the owner's own last clause — *"easy
    * enough that I don't give up on trying it"* — so this walks the WHOLE
@@ -255,22 +263,22 @@ describe('the filter builder, driven the way a person drives it', () => {
     // A condition with no value yet must NOT empty the table.
     expect(bodyTitles()).toHaveLength(4);
 
-    const columnSelects = () => screen.getAllByLabelText('Column') as HTMLSelectElement[];
-    fireEvent.change(columnSelects()[0], { target: { value: 'artist' } });
-    fireEvent.change(screen.getAllByLabelText('Condition')[0], { target: { value: 'equals' } });
+    const columnSelects = () => screen.getAllByLabelText('Column');
+    choose(columnSelects()[0], 'Artist');
+    choose(screen.getAllByLabelText('Condition')[0], 'is');
     fireEvent.change(screen.getAllByLabelText('Value')[0], { target: { value: 'alpha' } });
     expect(bodyTitles()).toEqual(['bravo', 'delta']);
 
     // AND: a second condition inside the same group.
     fireEvent.click(screen.getByRole('button', { name: /^And$/ }));
-    fireEvent.change(columnSelects()[1], { target: { value: 'title' } });
+    choose(columnSelects()[1], 'Title');
     fireEvent.change(screen.getAllByLabelText('Value')[1], { target: { value: 'bra' } });
     expect(bodyTitles()).toEqual(['bravo']);
 
     // OR: a second GROUP.
     fireEvent.click(screen.getByRole('button', { name: /Or…/ }));
-    fireEvent.change(columnSelects()[2], { target: { value: 'artist' } });
-    fireEvent.change(screen.getAllByLabelText('Condition')[2], { target: { value: 'equals' } });
+    choose(columnSelects()[2], 'Artist');
+    choose(screen.getAllByLabelText('Condition')[2], 'is');
     fireEvent.change(screen.getAllByLabelText('Value')[2], { target: { value: 'beta' } });
     expect(bodyTitles()).toEqual(['alpha', 'bravo', 'charlie']);
 
@@ -297,7 +305,7 @@ describe('the filter builder, driven the way a person drives it', () => {
     render(<DataTable columns={COLUMNS} data={TRACKS} getRowId={(r) => r.id} hidePagination />);
     fireEvent.click(screen.getByRole('button', { name: /^Filter/ }));
     fireEvent.click(screen.getByRole('button', { name: /Add a condition/ }));
-    fireEvent.change(screen.getAllByLabelText('Condition')[0], { target: { value: 'isEmpty' } });
+    choose(screen.getAllByLabelText('Condition')[0], 'is empty');
     expect(screen.queryAllByLabelText('Value')).toHaveLength(0);
     // Every fixture row has a title, so "title is empty" keeps nothing.
     expect(bodyTitles()).toHaveLength(0);

package/src/react/components/ListToolbar.tsx

@@ -34,7 +34,7 @@ export interface ListToolbarProps {
   chipsAllLabel?: string;
   /** Any further FILTER controls — they sit left, after the chips. */
   filters?: ReactNode;
-  /** The sort control (a `NativeSelect`, a `ChoiceMenu`, …). Right-hand cluster. */
+  /** The sort control (a `SelectField`, a `ChoiceMenu`, …). Right-hand cluster. */
   sort?: ReactNode;
   /** The density/view-mode control — normally a `TableViewToggle`. Right-hand cluster. */
   view?: ReactNode;
@@ -95,7 +95,7 @@ export interface ListToolbarProps {
  *   chips={buckets}
  *   chipValue={filter}
  *   onChipChange={(v) => setFilter(typeof v === 'string' ? v : null)}
- *   sort={<NativeSelect size='sm' aria-label='Sort the queue' … />}
+ *   sort={<SelectField size='sm' aria-label='Sort the queue' … />}
  *   view={<TableViewToggle value={view.mode} onChange={view.setMode} />}
  * />
  */

package/src/react/hooks/useOutsidePress.spec.tsx

@@ -110,6 +110,26 @@ describe('useOutsidePress', () => {
     expect(isOpen()).toBe(true);
   });
 
+  /**
+   * 🔴 Forge task 3064: a Radix Select opens on the POINTERDOWN and makes the page inert, so the
+   * same press's pointerup — and the click it makes — land on `<html>`. Read as a press outside,
+   * that click shut the filter builder's popover the moment its Column picker opened (music's
+   * browser test, cursedbelt 5.77.1). A click is the end of the press that began it: one that
+   * began inside is inside, wherever the release fell.
+   */
+  test('🔴 a press that begins inside and is released outside keeps it open', async () => {
+    render(<Panel />);
+    await press(screen.getByRole('button', { name: 'folders' }));
+    fireEvent.pointerDown(screen.getByRole('button', { name: 'open nested' }));
+    fireEvent.click(document.documentElement);
+    await act(() => new Promise((r) => setTimeout(r, 5)));
+    expect(isOpen()).toBe(true);
+    // The next press, begun outside, still closes it.
+    fireEvent.pointerDown(screen.getByRole('button', { name: 'row' }));
+    await press(screen.getByRole('button', { name: 'row' }));
+    expect(isOpen()).toBe(false);
+  });
+
   test('Escape closes it', async () => {
     render(<Panel />);
     await press(screen.getByRole('button', { name: 'folders' }));

package/src/react/hooks/useOutsidePress.ts

@@ -125,8 +125,23 @@ export function useOutsidePress({
       if (outside(target)) swallowUntil = Date.now() + 1000;
       decideLater(target);
     };
+    // `click` mode: where the press BEGAN. A Radix Select opens on the pointerdown and makes the
+    // page inert, so that same press's release — and the click it makes — land on `<html>`; read
+    // as outside, it shut the filter builder the moment its Column picker opened (forge task
+    // 3064). A click whose press began inside (in the DOM, or this panel's React tree — the
+    // panel's `onPointerDownCapture` runs after this capture listener) is inside.
+    let pressBegan: Node | null = null;
+    const onPressBegins = (event: PointerEvent) => {
+      pressInsideRef.current = false;
+      pressBegan = event.target instanceof Node ? event.target : null;
+    };
     const onClick = (event: MouseEvent) => {
       const target = event.target instanceof Node ? event.target : null;
+      if (decideOn === 'click') {
+        const began = pressBegan;
+        pressBegan = null;
+        if (began && (pressInsideRef.current || isInside(began) || onAnotherLayer(began))) return;
+      }
       if (decideOn === 'pointerdown') {
         if (Date.now() < swallowUntil) {
           swallowUntil = 0;
@@ -149,11 +164,11 @@ export function useOutsidePress({
     };
 
     document.addEventListener('click', onClick, true);
-    if (decideOn === 'pointerdown') document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('pointerdown', decideOn === 'pointerdown' ? onPointerDown : onPressBegins, true);
     if (closeOnEscape) document.addEventListener('keydown', onKeyDown);
     return () => {
       document.removeEventListener('click', onClick, true);
-      document.removeEventListener('pointerdown', onPointerDown, true);
+      document.removeEventListener('pointerdown', decideOn === 'pointerdown' ? onPointerDown : onPressBegins, true);
       document.removeEventListener('keydown', onKeyDown);
       for (const timer of timers) clearTimeout(timer);
     };

package/src/react/hooks/useScrollMemory.spec.tsx

@@ -41,8 +41,8 @@ function fakeScroller(height: number, viewport = 800) {
   };
 }
 
-function Shell({ at, el, enabled }: { at: string; el: HTMLElement; enabled?: boolean }) {
-  useScrollMemory(at, { scroller: () => el, enabled });
+function Shell({ at, el, enabled, deadlineMs }: { at: string; el: HTMLElement; enabled?: boolean; deadlineMs?: number }) {
+  useScrollMemory(at, { scroller: () => el, enabled, deadlineMs });
   return null;
 }
 
@@ -103,6 +103,49 @@ describe('useScrollMemory', () => {
     expect(s.el.scrollTop).toBe(15_000);
   });
 
+  /**
+   * 🔴 forge task 3069: flix's phone grid, reloaded, came back to 29,731px instead of 30,000 — its
+   * pages were still arriving one round trip at a time when the 3s deadline, counted from the
+   * START, ran out. A page that is still growing is still being followed.
+   */
+  test('a list growing page by page is followed past the deadline, as long as each page lands within it', async () => {
+    const s = fakeScroller(20_000);
+    const { rerender } = render(<Shell at='/' el={s.el} deadlineMs={60} />);
+    s.scrollTo(15_000);
+    const list = { state: window.history.state, path: '/' };
+    push('/item/7');
+    rerender(<Shell at='/item/7' el={s.el} deadlineMs={60} />);
+
+    s.grow(3_000);
+    back(list);
+    rerender(<Shell at='/' el={s.el} deadlineMs={60} />);
+    // Five pages, 40ms apart: 200ms in all — well past 60ms from the start, never 60ms without a page.
+    for (const height of [6_000, 9_000, 12_000, 15_000, 20_000]) {
+      await act(() => Bun.sleep(40));
+      s.grow(height);
+    }
+    await frames(2);
+    expect(s.el.scrollTop).toBe(15_000);
+  });
+
+  test('a list that STOPS growing is given up on once the deadline passes with no new page', async () => {
+    const s = fakeScroller(20_000);
+    const { rerender } = render(<Shell at='/' el={s.el} deadlineMs={60} />);
+    s.scrollTo(15_000);
+    const list = { state: window.history.state, path: '/' };
+    push('/item/7');
+    rerender(<Shell at='/item/7' el={s.el} deadlineMs={60} />);
+
+    s.grow(3_000);
+    back(list);
+    rerender(<Shell at='/' el={s.el} deadlineMs={60} />);
+    await act(() => Bun.sleep(150));
+    await frames(2);
+    s.grow(20_000); // too late: the restore settled where the page ended
+    await frames(3);
+    expect(s.el.scrollTop).toBe(2_200);
+  });
+
   test('the viewer taking the page back cancels a restore that is still waiting', async () => {
     const s = fakeScroller(20_000);
     const { rerender } = render(<Shell at='/' el={s.el} />);

package/src/react/hooks/useScrollMemory.ts

@@ -151,14 +151,17 @@ export interface ScrollMemoryOptions {
    */
   enabled?: boolean;
   /**
-   * How long a restore waits for the page to grow tall enough before settling as close as it
-   * got. Default 3000ms — a reload, where only the first page of a list exists, needs a few
-   * pages' round trips.
+   * How long a restore waits for the page to GROW before settling as close as it got — counted
+   * from the last time it grew, so a list paging itself down keeps being followed (up to 20s in
+   * all). Default 3000ms — a reload, where only the first page of a list exists, needs a few
+   * pages' round trips, each of which must land within it.
    */
   deadlineMs?: number;
 }
 
 const RESTORE_DEADLINE_MS = 3_000;
+/** The longest a restore keeps following a page that is still growing — the viewer can always take it back sooner. */
+const RESTORE_CEILING_MS = 20_000;
 /**
  * How long a landed restore holds its target against a scroll the viewer did not make. Long
  * enough for a list to finish settling (the late move in forge task 2784 came inside 800ms, under
@@ -271,7 +274,14 @@ function restore(
   deadlineMs: number,
   settled: (outcome: RestoreOutcome) => void,
 ): () => void {
-  const deadline = performance.now() + deadlineMs;
+  // 🔴 The deadline is for a page that has STOPPED growing, not a stopwatch from the start (forge
+  // task 3069): flix's phone grid, reloaded and coming back to 30,000px, pages itself down one round
+  // trip at a time, and with eight browsers sharing the Mac those trips took longer than 3s in all.
+  // The restore gave up at 29,731px while the pages were still arriving — a slow phone network is
+  // the same case. Each time the page grows the wait starts again, up to RESTORE_CEILING_MS.
+  const started = performance.now();
+  let deadline = started + deadlineMs;
+  let lastRoom = -1;
   let frame = 0;
   let holdTimer: ReturnType<typeof setTimeout> | undefined;
   let phase: 'waiting' | 'holding' | 'done' = 'waiting';
@@ -306,7 +316,12 @@ function restore(
     }
     // Short of it: go as far as the page allows — that is what asks an infinite list for more.
     scroller.set(Math.max(0, room));
-    if (performance.now() >= deadline) {
+    const now = performance.now();
+    if (room > lastRoom) {
+      lastRoom = room;
+      deadline = Math.min(now + deadlineMs, started + Math.max(deadlineMs, RESTORE_CEILING_MS));
+    }
+    if (now >= deadline) {
       finish();
       settled('deadline');
     } else frame = requestAnimationFrame(attempt);