cursedbelt 5.94.0 → 5.95.0

package/src/react/components/AppShell.tsx

@@ -18,8 +18,10 @@ import { SideNav } from '../nav/SideNav.js';
 import { TopBarPlaces } from '../nav/TopBar.js';
 import { CommandSourceProvider, useCommandSources } from '../palette/commandSources.js';
 import { useCommandPalette } from '../palette/useCommandPalette.js';
+import { IconSidebar } from '../icons.js';
 import { AmbientBackdrop, type AmbientBackdropProps } from './AmbientBackdrop.js';
 import { BannerLane, type ShellBanner } from './BannerLane.js';
+import { IconButton } from './IconButton.js';
 import { lazyPart } from './DataTable/lazyPart.js';
 import { ScrollArea, type ScrollAreaSpace } from './ScrollArea.js';
 
@@ -79,6 +81,18 @@ export interface AppShellProps {
    *  the section's NEXT state. */
   onNavSectionToggle?: (section: string, collapsed: boolean) => void;
 
+  /**
+   * The 240px sidebar folded to the 64px icon rail at every width — the reader's choice, to see
+   * the page wider (a photo archive's grid, a canvas): Linear's `⌘\` and Notion's `«` fold theirs
+   * the same way. Controlled: the app remembers it (a setting, `localStorage`) and passes it back.
+   * With `onNavCollapsedChange` the rail head carries the fold button (`IconSidebar`, a tooltip
+   * either way); without it the sidebar is fixed open, as before. The rail keeps its places, the
+   * account and the ⌘K trigger folded (NAV-2, NAV-15); a phone is never folded — it has no sidebar.
+   */
+  navCollapsed?: boolean;
+  /** The fold button was pressed; `collapsed` is the sidebar's NEXT state. */
+  onNavCollapsedChange?: (collapsed: boolean) => void;
+
   /** Dynamic per-place badge (unread counts), keyed by domain id. A badge may carry its own tone (`{ value, tone }`) — see {@link NavBadge}. */
   navBadges?: Record<string, NavBadge>;
   /** How those counts READ — `alert` (default, red) for "this needs you", `neutral` or
@@ -233,7 +247,7 @@ const UNSECTIONED_MAX_PLACES = 7;
  *     <header h-[--header-h]>                       ← left: brand · center: places or ⌘K field · right: account
  *     <BannerLane />                                ← NAV-10, only when there is a banner
  *     <div flex min-h-0 grow>                       ← sidebar + content row
- *       <aside md:flex lg:hidden w-16 />            ← 6+ places: the icon rail
+ *       <aside md:flex lg:hidden w-16 />            ← 6+ places: the icon rail (and at lg, folded by `navCollapsed`)
  *       <aside lg:flex w-60 />                      ← 6+ places: the sectioned SideNav
  *       <main><ScrollArea>{children}</ScrollArea></main>  ← THE ONLY page scroll container
  *     </div>
@@ -266,6 +280,8 @@ function Shell({
   onNavPrefsChange,
   navCollapsedSections,
   onNavSectionToggle,
+  navCollapsed = false,
+  onNavCollapsedChange,
   navBadges,
   navBadgeTone,
   navHeader,
@@ -354,8 +370,31 @@ function Shell({
    * rail (md–lg) gets the account and the square ⌘K trigger; `onCapture` stays on the full sidebar
    * and the phone's PlaceBar, as a worded primary button cannot fit a 64px rail.
    */
-  const railCommand = (collapsed: boolean) =>
-    openCommand || (!collapsed && (onCapture || commandBarExtra)) ? (
+  // The fold button (`navCollapsed`): only where the app takes the choice back — a shell that cannot
+  // remember it does not offer it. On the icon rail it stacks under the account. On the full sidebar it
+  // sits at the leading edge of the ⌘K row, NOT on the brand line: the account launcher there is a
+  // worded control (cursedauth's "Curt Phillips ▾", 175px in a 240px rail), and a third control on
+  // that line left the brand no width at all (photos, WebKit, 2026-10-25). A shell with no ⌘K row
+  // keeps it on the brand line, where there is room.
+  const foldButton = (collapsed: boolean) =>
+    onNavCollapsedChange ? (
+      <IconButton
+        data-cb-rail-fold=''
+        aria-pressed={collapsed}
+        label={collapsed ? 'Show the sidebar' : 'Hide the sidebar'}
+        tooltip={collapsed ? 'Show the sidebar with its names' : 'Fold the sidebar to icons, for a wider page'}
+        size='sm'
+        variant='ghost'
+        className='mt-0.5'
+        onClick={() => onNavCollapsedChange(!collapsed)}
+      >
+        <IconSidebar />
+      </IconButton>
+    ) : null;
+  const hasCommandRow = (collapsed: boolean) => Boolean(openCommand || (!collapsed && (onCapture || commandBarExtra)));
+  const railCommand = (collapsed: boolean) => {
+    if (!hasCommandRow(collapsed)) return null;
+    const bar = (
       <CommandBar
         className={collapsed ? 'flex-col' : 'w-full min-w-0 flex-wrap'}
         compact={collapsed}
@@ -366,22 +405,36 @@ function Shell({
         commandHint={commandHint}
         extra={collapsed ? undefined : commandBarExtra}
       />
-    ) : null;
-  const railHead = (collapsed: boolean) => (
-    <div data-cb-rail-head='' className={cn('flex flex-col gap-3', collapsed && 'items-center')}>
-      {(navHeader && !collapsed) || account ? (
-        <div className={cn('flex min-w-0 items-center gap-2', collapsed && 'flex-col')}>
-          {navHeader && !collapsed ? <div className='flex min-w-0 flex-1 items-center overflow-hidden'>{navHeader}</div> : null}
-          {account ? (
-            <div data-cb-account='' className='shrink-0'>
-              {account}
-            </div>
-          ) : null}
-        </div>
-      ) : null}
-      {railCommand(collapsed)}
-    </div>
-  );
+    );
+    const fold = collapsed ? null : foldButton(false);
+    return fold ? (
+      <div data-cb-rail-command-row='' className='flex w-full min-w-0 items-start gap-1'>
+        {fold}
+        <div className='min-w-0 flex-1'>{bar}</div>
+      </div>
+    ) : (
+      bar
+    );
+  };
+  const railHead = (collapsed: boolean) => {
+    const foldOnBrandLine = collapsed || !hasCommandRow(collapsed);
+    return (
+      <div data-cb-rail-head='' className={cn('flex flex-col gap-3', collapsed && 'items-center')}>
+        {(navHeader && !collapsed) || account || (foldOnBrandLine && onNavCollapsedChange) ? (
+          <div className={cn('flex min-w-0 items-center gap-2', collapsed && 'flex-col')}>
+            {navHeader && !collapsed ? <div className='flex min-w-0 flex-1 items-center overflow-hidden'>{navHeader}</div> : null}
+            {account ? (
+              <div data-cb-account='' className='shrink-0'>
+                {account}
+              </div>
+            ) : null}
+            {foldOnBrandLine ? foldButton(collapsed) : null}
+          </div>
+        ) : null}
+        {railCommand(collapsed)}
+      </div>
+    );
+  };
 
   const sideNavProps = {
     model: nav as NavigationModel,
@@ -483,15 +536,17 @@ function Shell({
       <div className='relative flex min-h-0 grow overflow-hidden'>
         {/* 6+ places: the labeled, sectioned sidebar at lg (240px), the icon rail at md–lg
             (64px — a 240px rail on an ~820px screen squeezes the workspace, owner tablet
-            teardown 2026-07-15 §4). Two CSS-switched renders: SideNav's `collapsed` is a
-            prop, not a media query, and the rail is cheap to render twice. */}
+            teardown 2026-07-15 §4) — and at lg too while the reader has folded it (`navCollapsed`).
+            Two CSS-switched renders: SideNav's `collapsed` is a prop, not a media query, and the
+            rail is cheap to render twice. */}
         {pattern === 'side' && (
           <>
             <aside
               data-cb-nav-rail=''
               data-cb-nav-collapsed=''
               className={cn(
-                'hidden w-[var(--rail-w-collapsed)] border-r border-border md:flex md:shrink-0 md:flex-col lg:hidden',
+                'hidden w-[var(--rail-w-collapsed)] border-r border-border md:flex md:shrink-0 md:flex-col',
+                !navCollapsed && 'lg:hidden',
                 chrome,
               )}
             >
@@ -500,7 +555,8 @@ function Shell({
             <aside
               data-cb-nav-rail=''
               className={cn(
-                'hidden w-[var(--rail-w)] border-r border-border lg:flex lg:shrink-0 lg:flex-col',
+                'hidden w-[var(--rail-w)] border-r border-border',
+                !navCollapsed && 'lg:flex lg:shrink-0 lg:flex-col',
                 chrome,
               )}
             >

package/src/react/components/ComboboxField.tsx

@@ -11,7 +11,7 @@ import {
   choiceFieldWidth,
   declareFieldWidth,
 } from '../lib/field.js';
-import { FLOATING_COLLISION_PADDING,
+import { BASE_UI_POSITIONER, FLOATING_COLLISION_PADDING,
   FLOATING_CONTENT_BASE, FLOATING_ITEM_BASE } from '../lib/floatingStyles.js';
 import { TAP_TARGET, TAP_TARGET_HEIGHT } from '../lib/tapTarget.js';
 
@@ -336,7 +336,7 @@ export function ComboboxField(props: ComboboxFieldProps) {
         <Combobox.Positioner
           sideOffset={4}
           collisionPadding={FLOATING_COLLISION_PADDING}
-          className='z-[var(--z-popover)]'
+          className={BASE_UI_POSITIONER}
         >
           <Combobox.Popup
             className={cn(

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

@@ -72,9 +72,9 @@ describe('control-height-tokens: cross-component parity', () => {
     expect(getByRole('button').className).toContain(TOKEN.lg);
   });
 
-  test('DatePicker trigger honors `size`', () => {
+  test('DatePicker field honors `size`', () => {
     const { getByRole } = render(<DatePicker size='sm' placeholder='Pick' onChange={() => {}} />);
-    expect(getByRole('button').className).toContain(TOKEN.sm);
+    expect(getByRole('textbox').className).toContain(TOKEN.sm);
   });
 
   test('ColorField container honors `size`', () => {

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

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
-import { cleanup, fireEvent, render } from '@testing-library/react';
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { DatePicker } from './DatePicker.js';
 import { DateRangePicker } from './DateRangePicker.js';
 import { DateTimeField } from './DateTimeField.js';
@@ -54,13 +54,194 @@ describe('DatePicker', () => {
     expect(btn).toHaveProperty('disabled', true);
   });
 
-  test('aria-invalid and aria-describedby are forwarded to the trigger', () => {
+  test('aria-invalid and aria-describedby are forwarded to the text field', () => {
     const { getByRole } = render(
       <DatePicker aria-invalid={true} aria-describedby='err' onChange={() => {}} />,
     );
-    const btn = getByRole('button');
-    expect(btn.getAttribute('aria-invalid')).toBe('true');
-    expect(btn.getAttribute('aria-describedby')).toBe('err');
+    const field = getByRole('textbox');
+    expect(field.getAttribute('aria-invalid')).toBe('true');
+    expect(field.getAttribute('aria-describedby')).toBe('err');
+  });
+});
+
+/** Type `text` into the field and leave it (blur commits). */
+function typeAndBlur(field: HTMLElement, text: string) {
+  fireEvent.change(field, { target: { value: text } });
+  fireEvent.blur(field);
+}
+
+describe('DatePicker typing', () => {
+  const forms: Array<[string, string]> = [
+    ['2015-12-05', '2015-12-05'],
+    ['2015-12-5', '2015-12-05'],
+    ['12/5/2015', '2015-12-05'],
+    ['12/05/2015', '2015-12-05'],
+    ['12-5-2015', '2015-12-05'],
+    ['12.5.2015', '2015-12-05'],
+    ['12/05/15', '2015-12-05'],
+    ['12/05/99', '1999-12-05'],
+    ['Dec 5 2015', '2015-12-05'],
+    ['Dec 5, 2015', '2015-12-05'],
+    ['December 5, 2015', '2015-12-05'],
+    ['5 Dec 2015', '2015-12-05'],
+    ['Dec 5th, 2015', '2015-12-05'],
+    ['2015 Dec 5', '2015-12-05'],
+    ['  dec 5 2015  ', '2015-12-05'],
+    ['2/29/2024', '2024-02-29'],
+  ];
+  for (const [typed, iso] of forms) {
+    test(`"${typed}" normalizes to ${iso}`, () => {
+      const onChange = mock((_v: string | undefined) => {});
+      const { getByRole } = render(<DatePicker onChange={onChange} />);
+      typeAndBlur(getByRole('textbox'), typed);
+      expect(onChange.mock.calls).toEqual([[iso]]);
+      expect(getByRole('textbox').getAttribute('aria-invalid')).toBeNull();
+    });
+  }
+
+  test('Enter commits like blur', () => {
+    const onChange = mock((_v: string | undefined) => {});
+    const { getByRole } = render(<DatePicker onChange={onChange} />);
+    const field = getByRole('textbox');
+    fireEvent.change(field, { target: { value: '12/5/2015' } });
+    fireEvent.keyDown(field, { key: 'Enter' });
+    expect(onChange.mock.calls).toEqual([['2015-12-05']]);
+  });
+
+  test('a committed value shows in the display format', () => {
+    const { getByRole, rerender } = render(<DatePicker value='2015-12-05' onChange={() => {}} />);
+    expect((getByRole('textbox') as HTMLInputElement).value).toContain('2015');
+    rerender(<DatePicker value='2024-03-15' onChange={() => {}} />);
+    expect((getByRole('textbox') as HTMLInputElement).value).toContain('2024');
+  });
+
+  const garbage = ['hello', '13/45/2015', '2/30/2015', '12/5', 'Dec 2015', '12/5/215', 'Foo 5 2015', '0000-00-00'];
+  for (const text of garbage) {
+    test(`garbage "${text}" never reaches onChange and shows a reason`, () => {
+      const onChange = mock((_v: string | undefined) => {});
+      const { getByRole } = render(<DatePicker value='2020-01-01' onChange={onChange} />);
+      const field = getByRole('textbox');
+      typeAndBlur(field, text);
+      expect(onChange.mock.calls).toEqual([]);
+      expect(field.getAttribute('aria-invalid')).toBe('true');
+      expect(getByRole('alert').textContent?.length).toBeGreaterThan(0);
+      expect(field.getAttribute('aria-describedby')).toBe(getByRole('alert').id);
+    });
+  }
+
+  test('Escape on invalid text restores the last good value', () => {
+    const onChange = mock((_v: string | undefined) => {});
+    const { getByRole, queryByRole } = render(<DatePicker value='2020-01-01' onChange={onChange} />);
+    const field = getByRole('textbox') as HTMLInputElement;
+    const before = field.value;
+    typeAndBlur(field, 'nonsense');
+    fireEvent.keyDown(field, { key: 'Escape' });
+    expect(field.value).toBe(before);
+    expect(field.getAttribute('aria-invalid')).toBeNull();
+    expect(queryByRole('alert')).toBeNull();
+    expect(onChange.mock.calls).toEqual([]);
+  });
+
+  test('a date before min or after max is refused, and says which bound', () => {
+    const onChange = mock((_v: string | undefined) => {});
+    const { getByRole } = render(
+      <DatePicker min='2010-01-01' max='2020-12-31' onChange={onChange} />,
+    );
+    const field = getByRole('textbox');
+    typeAndBlur(field, '12/31/2009');
+    expect(getByRole('alert').textContent).toContain('on or after');
+    typeAndBlur(field, '1/1/2021');
+    expect(getByRole('alert').textContent).toContain('on or before');
+    expect(onChange.mock.calls).toEqual([]);
+    typeAndBlur(field, '1/1/2020');
+    expect(onChange.mock.calls).toEqual([['2020-01-01']]);
+  });
+
+  test('clearing the text clears the value', () => {
+    const onChange = mock((_v: string | undefined) => {});
+    const { getByRole } = render(<DatePicker value='2020-01-01' onChange={onChange} />);
+    typeAndBlur(getByRole('textbox'), '');
+    expect(onChange.mock.calls).toEqual([[undefined]]);
+  });
+
+  test('the calendar opens on a typed date', () => {
+    const { getByRole, container } = render(<DatePicker value='2024-03-01' onChange={() => {}} />);
+    typeAndBlur(getByRole('textbox'), 'Jul 4 1985');
+    fireEvent.click(container.querySelector('button[aria-haspopup="dialog"]') as HTMLElement);
+    expect(screen.getByRole('button', { name: /July 1985, choose month and year/ })).not.toBeNull();
+  });
+});
+
+describe('DatePicker calendar navigation', () => {
+  function open(value = '2024-03-15', props: Partial<React.ComponentProps<typeof DatePicker>> = {}) {
+    const utils = render(<DatePicker value={value} onChange={() => {}} {...props} />);
+    fireEvent.click(utils.container.querySelector('button[aria-haspopup="dialog"]') as HTMLElement);
+    return utils;
+  }
+  const caption = (re: RegExp) => screen.getByRole('button', { name: re });
+
+  test('Next/Previous year buttons move a year', () => {
+    open();
+    fireEvent.click(screen.getByRole('button', { name: 'Previous year' }));
+    expect(caption(/March 2023/)).not.toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Next year' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Next year' }));
+    expect(caption(/March 2025/)).not.toBeNull();
+  });
+
+  test('month buttons still move a month', () => {
+    open();
+    fireEvent.click(screen.getByRole('button', { name: 'Next month' }));
+    expect(caption(/April 2024/)).not.toBeNull();
+  });
+
+  test('a year step clamps to the min month, and is disabled once there', () => {
+    open('2024-03-15', { min: '2024-01-10', max: '2024-06-20' });
+    fireEvent.click(screen.getByRole('button', { name: 'Previous year' }));
+    expect(caption(/January 2024/)).not.toBeNull();
+    expect((screen.getByRole('button', { name: 'Previous year' }) as HTMLButtonElement).disabled).toBe(true);
+    fireEvent.click(screen.getByRole('button', { name: 'Next year' }));
+    expect(caption(/June 2024/)).not.toBeNull();
+    expect((screen.getByRole('button', { name: 'Next year' }) as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  test('year buttons are disabled when min and max pin the month', () => {
+    open('2024-03-15', { min: '2024-03-01', max: '2024-03-31' });
+    expect((screen.getByRole('button', { name: 'Previous year' }) as HTMLButtonElement).disabled).toBe(true);
+    expect((screen.getByRole('button', { name: 'Next year' }) as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  test('Shift+PageUp moves a year, PageUp a month (and the Shift forms go forward)', () => {
+    open();
+    const press = (name: RegExp, key: string, shiftKey = false) => {
+      const day = screen.getByRole('button', { name });
+      act(() => day.focus());
+      fireEvent.keyDown(day, { key, shiftKey });
+    };
+    press(/March 15th, 2024/, 'PageUp', true);
+    expect(caption(/March 2023/)).not.toBeNull();
+    press(/March 15th, 2023/, 'PageUp');
+    expect(caption(/February 2023/)).not.toBeNull();
+    press(/February 15th, 2023/, 'PageDown', true);
+    expect(caption(/February 2024/)).not.toBeNull();
+  });
+
+  test('the caption opens a year grid, then months: 2024 to 1985 in two picks', () => {
+    open();
+    fireEvent.click(caption(/March 2024, choose month and year/));
+    fireEvent.click(screen.getByRole('button', { name: '1985' }));
+    fireEvent.click(screen.getByRole('button', { name: /July 1985/ }));
+    expect(caption(/July 1985/)).not.toBeNull();
+  });
+
+  test('the month chooser disables months outside min/max', () => {
+    open('2024-03-15', { min: '2023-05-01', max: '2024-08-31' });
+    fireEvent.click(caption(/March 2024, choose month and year/));
+    expect(screen.queryByRole('button', { name: '2022' })).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: '2023' }));
+    const month = (re: RegExp) => screen.getByRole('button', { name: re }) as HTMLButtonElement;
+    expect(month(/April 2023/).disabled).toBe(true);
+    expect(month(/May 2023/).disabled).toBe(false);
   });
 });