cursedbelt 5.52.2 → 5.54.0

package/src/react/components/SectionNav.tsx

@@ -0,0 +1,143 @@
+import { type KeyboardEvent, type ReactNode, useEffect, useRef } from 'react';
+import { cn } from '../lib/cn.js';
+import { Button } from './Button.js';
+import { ScrollArea } from './ScrollArea.js';
+
+export interface SectionNavItem {
+  id: string;
+  label: ReactNode;
+  /** Trailing mark, e.g. a dot for unsaved changes. */
+  marker?: ReactNode;
+  /** Words for the marker — the item's hint on hover and on a touch-and-hold, and part of its
+   *  accessible name, so the mark is never colour alone. */
+  markerLabel?: string;
+  /** Refuses the item and says why (Button's `unavailableReason`): drawn disabled, still
+   *  focusable and hoverable so the reason is reachable. */
+  unavailableReason?: string;
+  /** A trailing number (items in the section), right-aligned in tabular figures. */
+  count?: number;
+}
+
+export interface SectionNavProps {
+  items: readonly SectionNavItem[];
+  /** The `id` of the section shown beside the nav. */
+  value: string;
+  onValueChange: (id: string) => void;
+  'aria-label': string;
+  className?: string;
+}
+
+/**
+ * The section selector of a settings page — the labelled list beside the form that Linear,
+ * GitHub and Vercel settings all draw. From `md` (768px) up it is a vertical column of
+ * full-width rows; below it, one line that scrolls sideways above the form, the active section
+ * kept in view.
+ *
+ * Each item is a ghost {@link Button}, so focus ring, `unavailableReason` and the coarse-pointer
+ * 44px floor come from the one primitive. Focus is roving: Tab enters on the active section and
+ * leaves the list; arrow keys (either axis) move among the items, Home/End jump to the ends.
+ * A refused item stays in that traversal on purpose — its reason is only reachable focused.
+ *
+ * `list-none m-0 p-0` and an explicit ground on every item: some hosts (desk) mount this with no
+ * Tailwind preflight, where a bare `<ul>` has bullets and a `<button>` the browser's grey box.
+ */
+export function SectionNav({ items, value, onValueChange, 'aria-label': ariaLabel, className }: SectionNavProps) {
+  const refs = useRef(new Map<string, HTMLButtonElement>());
+  const previous = useRef(value);
+
+  // Keep the active section in view on the phone strip when it changes — not on mount, where
+  // `nearest` could scroll the page itself to a nav that is simply below the fold.
+  useEffect(() => {
+    if (previous.current === value) return;
+    previous.current = value;
+    const node = refs.current.get(value);
+    if (node && typeof node.scrollIntoView === 'function') node.scrollIntoView({ inline: 'nearest', block: 'nearest' });
+  }, [value]);
+
+  const tabStop = items.some((i) => i.id === value) ? value : items[0]?.id;
+
+  const onKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {
+    const ids = items.map((i) => i.id);
+    const at = ids.findIndex((id) => refs.current.get(id) === document.activeElement);
+    if (at < 0 || ids.length === 0) return;
+    let next: number;
+    switch (e.key) {
+      case 'ArrowDown':
+      case 'ArrowRight':
+        next = (at + 1) % ids.length;
+        break;
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        next = (at - 1 + ids.length) % ids.length;
+        break;
+      case 'Home':
+        next = 0;
+        break;
+      case 'End':
+        next = ids.length - 1;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    refs.current.get(ids[next] as string)?.focus();
+  };
+
+  return (
+    <nav aria-label={ariaLabel} className={cn('min-w-0', className)}>
+      <ScrollArea
+        axis='x'
+        space='none'
+        safeArea={false}
+        className='flex-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden md:overflow-visible'
+      >
+        <ul
+          onKeyDown={onKeyDown}
+          className='m-0 flex w-max min-w-full list-none gap-1 whitespace-nowrap p-0 md:w-full md:flex-col md:gap-0.5'
+        >
+          {items.map((item) => {
+            const active = item.id === value;
+            return (
+              <li key={item.id} className='m-0 shrink-0 p-0 md:w-full'>
+                <Button
+                  ref={(node) => {
+                    if (node) refs.current.set(item.id, node);
+                    else refs.current.delete(item.id);
+                  }}
+                  variant='ghost'
+                  size='md'
+                  tooltip={item.markerLabel ?? item.label ?? item.id}
+                  tooltipSide='right'
+                  tooltipMobile={item.markerLabel ? 'press' : undefined}
+                  unavailableReason={item.unavailableReason}
+                  aria-current={active ? 'page' : undefined}
+                  tabIndex={item.id === tabStop ? 0 : -1}
+                  onClick={() => {
+                    if (!active) onValueChange(item.id);
+                  }}
+                  className={cn(
+                    'border-0 px-3 font-[inherit] md:w-full md:justify-start md:text-left',
+                    active
+                      ? 'bg-accent/10 font-medium text-foreground'
+                      : 'bg-transparent font-normal text-muted-foreground hover:bg-muted hover:text-foreground',
+                  )}
+                >
+                  <span className='min-w-0 truncate'>{item.label}</span>
+                  {item.marker != null && (
+                    <span aria-hidden className='inline-flex shrink-0 items-center'>
+                      {item.marker}
+                    </span>
+                  )}
+                  {item.markerLabel && <span className='sr-only'>{`, ${item.markerLabel}`}</span>}
+                  {item.count !== undefined && (
+                    <span className='ml-auto pl-2 text-xs tabular-nums text-muted-foreground'>{item.count}</span>
+                  )}
+                </Button>
+              </li>
+            );
+          })}
+        </ul>
+      </ScrollArea>
+    </nav>
+  );
+}

package/src/react/components/Tooltip.tsx

@@ -16,7 +16,7 @@ export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
 /** Touch-device behavior (hover doesn't exist there). No effect on hover devices.
  *  `icon` = a tappable ⓘ disclosure beside the trigger; `tap` = tap the trigger to
  *  toggle; `off` = no tooltip on touch. */
-export type TooltipMobile = 'icon' | 'tap' | 'off';
+export type TooltipMobile = 'icon' | 'tap' | 'press' | 'off';
 
 /** The gesture that arrived before the real tooltip existed, replayed onto the
  *  trigger once Radix's handlers are attached. @see ./TooltipImpl */
@@ -40,7 +40,9 @@ export interface TooltipProps {
   /** Touch behavior. Default `'off'` (owner mobile teardown 2026-07-15): tooltips
    *  are a HOVER refinement — on touch they must not exist as per-element ⓘ
    *  clutter with sub-44px targets. Opt in to `'icon'`/`'tap'` only where the
-   *  bubble carries real information a touch user cannot get another way. */
+   *  bubble carries real information a touch user cannot get another way.
+   *  `'press'` adds nothing to the page: a touch-and-hold shows the bubble and a tap
+   *  stays the trigger's own — the long-press label an icon-only control needs (CPY-4). */
   mobile?: TooltipMobile;
   /** Custom glyph for the `mobile='icon'` touch disclosure (default `i`). */
   mobileIcon?: ReactNode;

package/src/react/components/TooltipImpl.tsx

@@ -1,5 +1,5 @@
 import * as RTooltip from '@radix-ui/react-tooltip';
-import { cloneElement, isValidElement, useEffect, useRef, useState } from 'react';
+import { cloneElement, isValidElement, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { useHasHover } from '../hooks/useHasHover.js';
 import { cn } from '../lib/cn.js';
@@ -28,6 +28,13 @@ interface TooltipImplProps extends TooltipProps {
  * shifts to stay on-screen, keyboard-reachable via focus. On touch devices (no
  * hover) it switches to the `mobile` affordance.
  */
+/** How long a touch must hold before `mobile="press"` shows the label — Android's long-press. */
+const PRESS_HOLD_MS = 500;
+/** How far a holding finger may drift before it counts as a scroll instead. */
+const PRESS_SLOP_PX = 10;
+/** How long the label stays after the finger lifts, so it can be read. */
+const PRESS_LINGER_MS = 1500;
+
 export default function TooltipImpl({
   children,
   content,
@@ -55,6 +62,12 @@ export default function TooltipImpl({
   const touchTriggerRef = useRef<HTMLButtonElement | null>(null);
   /** True while one of that trigger's own events is being dispatched — see `onTouchOpenChange`. */
   const inTriggerEventRef = useRef(false);
+  /** The `press` branch's hold in progress: where it started, its timer, and whether it held. */
+  const pressRef = useRef<{ x: number; y: number; held: boolean; timer?: ReturnType<typeof setTimeout> }>({
+    x: 0,
+    y: 0,
+    held: false,
+  });
 
   // Replay the arming gesture. Radix opens on `pointermove` over the trigger and on
   // focus; both already happened before this module existed, so re-dispatch one on
@@ -362,6 +375,66 @@ export default function TooltipImpl({
     onClick: markTriggerEvent,
   };
 
+  /*
+   * `press`: touch and HOLD shows the hint; a plain tap is the trigger's own and nothing else.
+   * The phone's label for an icon-only control (CPY-4) — how iOS and Android label a toolbar
+   * icon — with no ⓘ beside it and no change to what a tap does. The tap that ends a hold is
+   * swallowed, so reading a label never also presses the button. The handlers ride on the
+   * child itself (Radix's `asChild` Slot composes them), so no wrapper changes its layout.
+   */
+  if (mobile === 'press') {
+    const cancelPress = () => {
+      if (pressRef.current.timer !== undefined) clearTimeout(pressRef.current.timer);
+      pressRef.current.timer = undefined;
+    };
+    const pressProps = {
+      ...touchTriggerProps,
+      onPointerDown: (e: ReactPointerEvent) => {
+        markTriggerEvent();
+        if (e.pointerType === 'mouse') return;
+        cancelPress();
+        pressRef.current = { x: e.clientX, y: e.clientY, held: false };
+        pressRef.current.timer = setTimeout(() => {
+          pressRef.current.held = true;
+          pressRef.current.timer = undefined;
+          setOpen(true);
+        }, PRESS_HOLD_MS);
+      },
+      // A finger that travels is a scroll or a pan, never a request for the label.
+      onPointerMove: (e: ReactPointerEvent) => {
+        const { x, y } = pressRef.current;
+        if (Math.hypot(e.clientX - x, e.clientY - y) > PRESS_SLOP_PX) cancelPress();
+      },
+      onPointerUp: () => {
+        cancelPress();
+        if (pressRef.current.held) setTimeout(() => setOpen(false), PRESS_LINGER_MS);
+      },
+      onPointerCancel: cancelPress,
+      // Android answers a hold with `contextmenu` too; the label is the answer here.
+      onContextMenu: (e: ReactMouseEvent) => {
+        if (pressRef.current.held || pressRef.current.timer !== undefined) e.preventDefault();
+      },
+      onClickCapture: (e: ReactMouseEvent) => {
+        markTriggerEvent();
+        if (!pressRef.current.held) return;
+        pressRef.current.held = false;
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      className: '[-webkit-touch-callout:none] select-none',
+    };
+    return (
+      <RTooltip.Provider delayDuration={HOVER_HINT_INSTANT_MS}>
+        <RTooltip.Root open={open} onOpenChange={onTouchOpenChange}>
+          <RTooltip.Trigger asChild {...pressProps}>
+            {children}
+          </RTooltip.Trigger>
+          {bubble}
+        </RTooltip.Root>
+      </RTooltip.Provider>
+    );
+  }
+
   // `icon`: render the trigger as-is plus a tappable ⓘ disclosure that owns the
   // tooltip (so a tap on the trigger still does its own action).
   if (mobile === 'icon') {

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

@@ -1,5 +1,6 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { useState } from 'react';
 import { type TreeNode, TreeView } from './TreeView.js';
 
 afterEach(cleanup);
@@ -161,6 +162,25 @@ describe('TreeView — selection', () => {
     expect(lastCall).toContain('b');
   });
 
+  test('🔴 a click on a NESTED row selects that row only — its parent row never hears it (forge task 2742)', () => {
+    // Child rows are DOM descendants of their parent's treeitem, so an unstopped click bubbled to the
+    // parent's handler too: in a controlled tree it toggled the parent against stale state and the
+    // ⌘-click that should have added a file emptied the selection (measured in station's Folder sizes).
+    function Controlled() {
+      const [sel, setSel] = useState<string[]>([]);
+      return <TreeView nodes={NODES} defaultExpanded={['a']} selectionMode='multi' selected={sel} onSelectionChange={setSel} />;
+    }
+    const { getByText } = render(<Controlled />);
+    const item = (label: string) => getByText(label).closest('[role="treeitem"]') as HTMLElement;
+    fireEvent.click(getByText('Alpha'));
+    fireEvent.click(getByText('Alpha 1'), { metaKey: true });
+    expect(item('Alpha').getAttribute('aria-selected')).toBe('true');
+    expect(item('Alpha 1').getAttribute('aria-selected')).toBe('true');
+    fireEvent.click(getByText('Alpha 1'));
+    expect(item('Alpha').getAttribute('aria-selected')).toBe('false');
+    expect(item('Alpha 1').getAttribute('aria-selected')).toBe('true');
+  });
+
   test('disabled node cannot be selected', () => {
     const onChange = mock((_ids: string[]) => {});
     const { getByText } = render(<TreeView nodes={NODES} onSelectionChange={onChange} />);
@@ -182,6 +202,14 @@ describe('TreeView — keyboard navigation', () => {
     expect(document.activeElement).toBe(items[1]);
   });
 
+  test('🔴 ArrowDown on a NESTED row moves to its next row, not its parent\'s (forge task 2742)', () => {
+    const { getByText } = render(<TreeView nodes={NODES} defaultExpanded={['a']} />);
+    const item = (label: string) => getByText(label).closest('[role="treeitem"]') as HTMLElement;
+    item('Alpha 1').focus();
+    fireEvent.keyDown(item('Alpha 1'), { key: 'ArrowDown' });
+    expect(document.activeElement).toBe(item('Alpha 2'));
+  });
+
   test('ArrowRight expands a collapsed node', () => {
     const { getAllByRole, getByText } = render(<TreeView nodes={NODES} />);
     const items = getAllByRole('treeitem');

package/src/react/components/TreeView.tsx

@@ -431,6 +431,9 @@ function TreeItem({
 
   const handleClick = useCallback(
     (e: React.MouseEvent) => {
+      // 🔴 A child row is a DOM descendant of its parent's treeitem: unstopped, one click ran the
+      // parent's handler too, which toggled the parent against stale state (forge task 2742).
+      e.stopPropagation();
       if (node.disabled) return;
       setFocused(node.id);
       setSelected(node.id, { ctrl: e.metaKey || e.ctrlKey, shift: e.shiftKey });
@@ -443,6 +446,11 @@ function TreeItem({
       if (node.disabled) return;
       const ids = visibleIds;
       const idx = ids.indexOf(node.id);
+      // The keys this row answers stop here, so its ancestors' rows do not answer them again (a
+      // nested ArrowDown moved focus twice). Every other key — Delete, a shortcut — still bubbles.
+      if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', 'Home', 'End', 'Enter', ' '].includes(e.key)) {
+        e.stopPropagation();
+      }
 
       switch (e.key) {
         case 'ArrowDown': {
@@ -552,7 +560,10 @@ function TreeItem({
       tabIndex={tabIndex}
       onClick={handleClick}
       onKeyDown={handleKeyDown}
-      onFocus={() => setFocused(node.id)}
+      // Only the row itself: focus bubbles too, and a nested row's focus named its parent focused.
+      onFocus={(e) => {
+        if (e.target === e.currentTarget) setFocused(node.id);
+      }}
       style={dragApi.style}
       // A disabled row reads in muted ink, not at half opacity: opacity-50 dragged its text
       // (and every descendant's) under 4.5:1 (FND-9, forge task 2594).

package/src/react/disk-usage/DiskUsage.spec.tsx

@@ -69,6 +69,7 @@ describe('DiskUsageTree', () => {
         }),
         node({ name: 'backups', path: '/data/backups', size: 900_000, childCount: 3 }),
         node({ name: 'skipped-dir', path: '/data/skipped-dir', size: 0, skipped: true }),
+        node({ name: 'Volumes', path: '/data/Volumes', size: 0, skipped: true, otherDevice: true }),
       ],
     });
     render(<DiskUsageTree root={root} loadChildren={mock(async () => null)} />);
@@ -76,10 +77,105 @@ describe('DiskUsageTree', () => {
     expect(screen.getByText('node_modules/')).toBeTruthy();
     expect(screen.getByLabelText('opaque')).toBeTruthy();
     expect(screen.getByText('not measured')).toBeTruthy();
+    expect(screen.getByText('another drive')).toBeTruthy();
     expect(screen.getByText(/12 smaller items/)).toBeTruthy();
   });
 });
 
+describe('DiskUsageTree — Finder-style selection, Delete and the row menu (forge task 2742)', () => {
+  const three = () =>
+    node({
+      childCount: 3,
+      size: 600,
+      children: [
+        node({ name: 'a', path: '/data/a', kind: 'file', size: 300, childCount: 0 }),
+        node({ name: 'b', path: '/data/b', kind: 'file', size: 200, childCount: 0 }),
+        node({ name: 'c', path: '/data/c', kind: 'file', size: 100, childCount: 0 }),
+      ],
+    });
+  const row = (name: string) => screen.getByText(name).closest('[role="treeitem"]') as HTMLElement;
+
+  test('⌘-click toggles, ⇧-click takes the range, and the nodes come with the paths', () => {
+    const onSelectionChange = mock((_paths: string[], _nodes: TreeSliceNode[]) => {});
+    render(<DiskUsageTree root={three()} loadChildren={async () => null} selectable onSelectionChange={onSelectionChange} />);
+    fireEvent.click(row('a'));
+    fireEvent.click(row('c'), { shiftKey: true });
+    expect(onSelectionChange.mock.calls.at(-1)?.[0]).toEqual(['/data/a', '/data/b', '/data/c']);
+    fireEvent.click(row('b'), { metaKey: true });
+    const [paths, nodes] = onSelectionChange.mock.calls.at(-1) ?? [];
+    expect(paths).toEqual(['/data/a', '/data/c']);
+    expect(nodes?.map((n) => n.size)).toEqual([300, 100]);
+  });
+
+  test('Delete with a selection reports the selected nodes; with none it does nothing', () => {
+    const onDeleteKey = mock((_targets: TreeSliceNode[]) => {});
+    render(<DiskUsageTree root={three()} loadChildren={async () => null} selectable onDeleteKey={onDeleteKey} />);
+    fireEvent.keyDown(row('a'), { key: 'Backspace' });
+    expect(onDeleteKey).not.toHaveBeenCalled();
+    fireEvent.click(row('a'));
+    fireEvent.click(row('b'), { metaKey: true });
+    fireEvent.keyDown(row('b'), { key: 'Delete' });
+    expect(onDeleteKey.mock.calls[0]?.[0].map((n) => n.path)).toEqual(['/data/a', '/data/b']);
+  });
+
+  test('Delete on a row\'s ⋯ button — where focus lands when its menu closes — still deletes', () => {
+    const onDeleteKey = mock((_targets: TreeSliceNode[]) => {});
+    render(<DiskUsageTree root={three()} loadChildren={async () => null} selectable actions={() => []} onDeleteKey={onDeleteKey} />);
+    fireEvent.click(row('a'));
+    fireEvent.keyDown(screen.getByRole('button', { name: 'Actions for a' }), { key: 'Backspace' });
+    expect(onDeleteKey.mock.calls[0]?.[0].map((n) => n.path)).toEqual(['/data/a']);
+  });
+
+  test('a right-click on an unselected row selects it alone and opens its menu on it', () => {
+    const actions = mock(({ targets }: { node: TreeSliceNode; targets: TreeSliceNode[] }) => [
+      { key: 'copy', label: `Copy ${targets.length}` },
+    ]);
+    const onSelectionChange = mock((_paths: string[]) => {});
+    render(
+      <DiskUsageTree root={three()} loadChildren={async () => null} selectable actions={actions} onSelectionChange={onSelectionChange} />,
+    );
+    fireEvent.click(row('a'));
+    fireEvent.click(row('b'), { metaKey: true });
+    // Inside the selection: the menu acts on both.
+    fireEvent.contextMenu(screen.getByText('b'));
+    expect(screen.getByText('Copy 2')).toBeTruthy();
+    fireEvent.keyDown(document.activeElement ?? document.body, { key: 'Escape' });
+    // Outside it: c becomes the selection, and the menu acts on c alone.
+    fireEvent.contextMenu(screen.getByText('c'));
+    expect(onSelectionChange.mock.calls.at(-1)?.[0]).toEqual(['/data/c']);
+    expect(actions.mock.calls.at(-1)?.[0].targets.map((n) => n.path)).toEqual(['/data/c']);
+  });
+
+  test('a re-read tree opens where the reader left it, and reports what they open', () => {
+    const root = node({
+      childCount: 1,
+      size: 600,
+      children: [
+        node({
+          name: 'Movies',
+          path: '/data/Movies',
+          size: 600,
+          childCount: 1,
+          children: [node({ name: 'film.mov', path: '/data/Movies/film.mov', kind: 'file', size: 600, childCount: 0 })],
+        }),
+      ],
+    });
+    const onExpandedChange = mock((_paths: string[]) => {});
+    render(<DiskUsageTree root={root} loadChildren={async () => null} defaultExpanded={['/data/Movies']} onExpandedChange={onExpandedChange} />);
+    expect(screen.getByText('film.mov')).toBeTruthy();
+    fireEvent.keyDown(row('Movies/'), { key: 'ArrowLeft' });
+    expect(onExpandedChange.mock.calls.at(-1)?.[0]).toEqual([]);
+  });
+
+  test('every row carries a ⋯ button when there are actions, and none without', () => {
+    const { unmount } = render(<DiskUsageTree root={three()} loadChildren={async () => null} actions={() => []} />);
+    expect(screen.getAllByRole('button', { name: /^Actions for / })).toHaveLength(3);
+    unmount();
+    render(<DiskUsageTree root={three()} loadChildren={async () => null} />);
+    expect(screen.queryAllByRole('button', { name: /^Actions for / })).toHaveLength(0);
+  });
+});
+
 describe('DiskUsageRulesEditor', () => {
   test('enables save only after an edit and reports the new rules', () => {
     const onSave = mock(() => {});