@estiva-app/ui 0.10.1 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/src/AppShell.tsx

@@ -76,6 +76,11 @@ export function AppShell({ variant = 'solid', menu, logo, search, identity, bann
         {nav}
         <div className="flex min-h-0 min-w-0 flex-1 flex-col">
           {banner}
+          {/* Not a ScrollArea: the apps' pages scroll inside themselves (Ship's
+              detail columns are `h-full` grids with their own regions), and a
+              region here kept a bar on Ship's page for overflow that was not
+              there (2026-09-09). A page that does scroll here gets its region
+              where it scrolls. */}
           <main className="min-w-0 flex-1 overflow-y-auto">{children}</main>
         </div>
       </div>

package/src/Divider.mdx

@@ -20,6 +20,13 @@ carries the `separator` role for assistive tech.
 
 <Canvas of={DividerStories.Vertical} />
 
+- With a `label`, words sit in the middle of the line — a date between two
+  days of messages, or where "new since you last read this" begins.
+  `tone="warning"` for the second: the label in the warning colour, the
+  lines in its wash. The line is named by its label for assistive tech.
+
+<Canvas of={DividerStories.Warning} />
+
 ## When not
 
 - Between every row of a list — spacing does that; a hairline per row is
@@ -34,6 +41,8 @@ import { Divider } from '@estiva-app/ui'
 
 <Divider />
 <Divider orientation="vertical" />
+<Divider label="Today" />
+<Divider label="New since you last read this" tone="warning" />
 ```
 
 ## Props

package/src/Divider.stories.tsx

@@ -42,3 +42,28 @@ export const Vertical: Story = {
     </div>
   ),
 }
+
+/** Words in the middle of the line — a date between two days of messages. */
+export const WithALabel: Story = {
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled:
+  // the label is muted caption text, 3.78:1 on --bg-surface in signal (AA 4.5:1).
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
+  render: () => (
+    <div className="w-96 rounded-lg border border-border-default bg-bg-surface py-3 text-body-2 text-text-primary">
+      <p className="px-3 pb-2">Yesterday's last message</p>
+      <Divider label="Today" />
+      <p className="px-3 pt-2">Today's first</p>
+    </div>
+  ),
+}
+
+/** Asking for attention: where "new since you last read this" begins. The warning colour, because the accent could not be read on Ship's background. */
+export const Warning: Story = {
+  render: () => (
+    <div className="w-96 rounded-lg border border-border-default bg-bg-surface py-3 text-body-2 text-text-primary">
+      <p className="px-3 pb-2">Yes — it re-reads the folder union and the archived one lands last.</p>
+      <Divider label="New since you last read this" tone="warning" />
+      <p className="px-3 pt-2">Same here, from Peek.</p>
+    </div>
+  ),
+}

package/src/Divider.test.tsx

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+/** What the Divider page claims, pinned: the role, and a label that names the line. */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { Divider } from './Divider'
+
+afterEach(cleanup)
+
+describe('Divider', () => {
+  it('is a separator, horizontal by default', () => {
+    render(<Divider />)
+    expect(screen.getByRole('separator').getAttribute('aria-orientation')).toBe('horizontal')
+  })
+
+  it('with a label, the separator is named by it and the words are drawn once', () => {
+    render(<Divider label="New since you last read this" tone="warning" />)
+    const rule = screen.getByRole('separator', { name: 'New since you last read this' })
+    expect(rule.textContent).toBe('New since you last read this')
+    expect(rule.querySelectorAll('[aria-hidden="true"]')).toHaveLength(2)
+  })
+
+  it('vertical ignores a label — there is no middle to put it in', () => {
+    render(<Divider orientation="vertical" label="Nope" />)
+    expect(screen.getByRole('separator').textContent).toBe('')
+  })
+})

package/src/Divider.tsx

@@ -8,10 +8,39 @@ import { cn } from './cn'
  */
 export interface DividerProps {
   orientation?: 'horizontal' | 'vertical'
+  /**
+   * Words in the middle of the line — "New since you last read this", a
+   * date. Horizontal only; the line splits around the label.
+   */
+  label?: string
+  /**
+   * `warning` for a line that asks for attention: the label in the warning
+   * colour, the lines in its wash. Peek and Ship both drew their "new since
+   * you last read" rule in the accent, which measures 3.3:1 on Ship's
+   * background and could not be read (Katerina, 2026-09-08); the warning
+   * colour measures 9.6:1 there. Default: the muted text, `border-subtle`
+   * lines, for a date.
+   */
+  tone?: 'default' | 'warning'
   className?: string
 }
 
-export function Divider({ orientation = 'horizontal', className }: DividerProps) {
+export function Divider({ orientation = 'horizontal', label, tone = 'default', className }: DividerProps) {
+  if (label && orientation === 'horizontal') {
+    const line = tone === 'warning' ? 'bg-warning-muted' : 'bg-border-subtle'
+    return (
+      <div
+        role="separator"
+        aria-orientation="horizontal"
+        aria-label={label}
+        className={cn('flex shrink-0 items-center gap-2 mx-3', className)}
+      >
+        <span aria-hidden="true" className={cn('h-px flex-1', line)} />
+        <span className={cn('shrink-0 text-caption', tone === 'warning' ? 'text-warning-default' : 'text-text-muted')}>{label}</span>
+        <span aria-hidden="true" className={cn('h-px flex-1', line)} />
+      </div>
+    )
+  }
   return (
     <div
       role="separator"

package/src/Menu.tsx

@@ -3,6 +3,7 @@ import { IconChevronRight } from '@tabler/icons-react'
 import { Menu as BaseMenu } from '@base-ui/react/menu'
 import { cn } from './cn'
 import { triggerDisabled } from './triggerDisabled'
+import { ScrollArea } from './ScrollArea'
 import { Kbd } from './Kbd'
 import { SectionLabel } from './SectionLabel'
 
@@ -207,10 +208,18 @@ export function Menu({ trigger, align = 'left', openOnHover = false, open, onOpe
                room. Select's 288 was never this component's — the identity
                panel got it by accident once and grew a scrollbar at full
                height. */
-            className={cn('min-w-[180px] max-h-[var(--available-height)] overflow-y-auto outline-none', className)}
+            className={cn('min-w-[180px] outline-none', className)}
             render={<MenuPanel />}
           >
-            <MenuContext.Provider value={{ openOnHover }}>{children}</MenuContext.Provider>
+            {/* The height cap sits on the box that scrolls — on the panel it
+                let the box grow to its content and nothing scrolled (measured,
+                2026-09-08) — less the panel's own padding, so the panel still
+                stops where Floating UI said. The padding stays on the panel,
+                where a caller's `className` can change it; the divider rule
+                moves with the rows. A menu that fits draws exactly as before. */}
+            <ScrollArea viewportClassName="max-h-[calc(var(--available-height)_-_1rem)]" contentClassName="flex flex-col [&>[role=separator]]:mx-0">
+              <MenuContext.Provider value={{ openOnHover }}>{children}</MenuContext.Provider>
+            </ScrollArea>
           </BaseMenu.Popup>
         </BaseMenu.Positioner>
       </BaseMenu.Portal>

package/src/Popover.tsx

@@ -2,6 +2,7 @@ import { useMemo, type ReactElement, type ReactNode, type RefObject } from 'reac
 import { Popover as BasePopover } from '@base-ui/react/popover'
 import { cn } from './cn'
 import { triggerDisabled } from './triggerDisabled'
+import { ScrollArea } from './ScrollArea'
 import { MenuPanel } from './Menu'
 
 /**
@@ -144,10 +145,13 @@ export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open
              */
             initialFocus={trigger ? undefined : false}
             finalFocus={finalFocus}
-            className={cn('min-w-[180px] max-h-[var(--available-height)] overflow-y-auto outline-none', className)}
+            className={cn('min-w-[180px] outline-none', className)}
             render={<MenuPanel />}
           >
-            {children}
+            {/* As in Menu: the cap on the scrolling box, less the panel's padding; the padding stays on the panel. */}
+            <ScrollArea viewportClassName="max-h-[calc(var(--available-height)_-_1rem)]" contentClassName="flex flex-col [&>[role=separator]]:mx-0">
+              {children}
+            </ScrollArea>
           </BasePopover.Popup>
         </BasePopover.Positioner>
       </BasePopover.Portal>

package/src/PreviewCard.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card'
 import { cn } from './cn'
+import { ScrollArea } from './ScrollArea'
 import { MenuPanel } from './Menu'
 
 /**
@@ -79,10 +80,12 @@ export function PreviewCard({ content, children, side = 'right', delay = OPEN_DE
           className="z-50 data-[anchor-hidden]:hidden"
         >
           <BasePreviewCard.Popup
-            className={cn('w-[360px] max-h-[min(300px,var(--available-height))] gap-3 overflow-y-auto p-3 outline-none [&>*]:shrink-0', className)}
+            className={cn('w-[360px] p-3 outline-none', className)}
             render={<MenuPanel />}
           >
-            {content}
+            <ScrollArea viewportClassName="max-h-[calc(min(300px,var(--available-height))_-_1.5rem)]" contentClassName="flex flex-col gap-3 [&>*]:shrink-0">
+              {content}
+            </ScrollArea>
           </BasePreviewCard.Popup>
         </BasePreviewCard.Positioner>
       </BasePreviewCard.Portal>

package/src/Reaction.tsx

@@ -65,7 +65,12 @@ export function Reaction({ emoji, count, pressed = false, className, type, ...pr
         'border transition-colors',
         'disabled:cursor-not-allowed disabled:opacity-50',
         pressed
-          ? 'border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover'
+          ? /* In the ship theme the accent on its own wash measures 2.70:1
+               (Finding 4), and the count was the thing that vanished
+               (Katerina, 2026-09-08). The number reads in the text colour
+               there; the accent keeps the edge and the fill. Signal keeps
+               Peek's blue-on-wash, which reads. */
+            'border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover ship:text-text-primary'
           : 'border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover',
         className,
       )}

package/src/ScrollArea.mdx

@@ -0,0 +1,59 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as ScrollAreaStories from './ScrollArea.stories'
+
+<Meta of={ScrollAreaStories} />
+
+# ScrollArea
+
+A region that scrolls without taking width for its scrollbar. The bar is
+drawn over the content and shows while the pointer is over the region or
+the content is moving; nothing moves when it appears.
+
+<Canvas of={ScrollAreaStories.Default} />
+
+## When
+
+- Any box that can hold more than fits: a menu or a dropdown list, a panel,
+  a sidebar, the page's content column, a rail.
+- `orientation="horizontal"` for a row wider than its box — a table, a
+  board; `"both"` when a thing can run over either way.
+
+<Canvas of={ScrollAreaStories.Horizontal} />
+
+## When not
+
+- A box that never overflows. A ScrollArea around it changes nothing, and
+  is one more element.
+- The page itself. The browser owns that bar.
+
+## How
+
+```tsx
+import { ScrollArea } from '@estiva-app/ui'
+
+<ScrollArea className="h-[240px]" viewportClassName="p-2">
+  {rows}
+</ScrollArea>
+```
+
+- `className` sizes and places the region; `viewportClassName` styles the
+  scrolling box inside it — padding, gap, the layout of the content.
+- The region needs a height (or a `max-h-*`) to have anything to scroll.
+- The native scrollbar is hidden by Base UI; a native `overflow-y-auto` on
+  the same element would draw a second one.
+
+## Keys
+
+| Key | Does |
+|---|---|
+| ↑ ↓ | scroll the viewport when it has focus, as any scrolling box |
+| Page Up / Down, Home, End | as any scrolling box |
+
+## Gaps, stated
+
+- The bar has no arrows and no click-on-track paging; the wheel, the keys
+  and dragging the thumb are the ways to move.
+
+## Props
+
+<Controls of={ScrollAreaStories.Default} />

package/src/ScrollArea.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { ScrollArea } from './ScrollArea'
+
+/** A region that scrolls without taking width for its scrollbar. */
+const meta = {
+  title: 'Layout/ScrollArea',
+  component: ScrollArea,
+  parameters: { controls: { disable: true } },
+  args: { children: null },
+} satisfies Meta<typeof ScrollArea>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const rows = Array.from({ length: 40 }, (_, i) => `Row ${i + 1}`)
+
+/** A list taller than its box. The bar shows while the pointer is over it or the list is moving. */
+export const Default: Story = {
+  render: () => (
+    <ScrollArea className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface" viewportClassName="p-2">
+      <ul className="flex flex-col gap-px">
+        {rows.map((row) => (
+          <li key={row} className="rounded-md px-2 py-1.5 text-body-2 text-text-primary">
+            {row}
+          </li>
+        ))}
+      </ul>
+    </ScrollArea>
+  ),
+}
+
+/** Nothing to scroll: the region draws exactly as a plain box would, and no bar. */
+export const Fits: Story = {
+  render: () => (
+    <ScrollArea className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface" viewportClassName="p-2">
+      <ul className="flex flex-col gap-px">
+        {rows.slice(0, 4).map((row) => (
+          <li key={row} className="rounded-md px-2 py-1.5 text-body-2 text-text-primary">
+            {row}
+          </li>
+        ))}
+      </ul>
+    </ScrollArea>
+  ),
+}
+
+/** A row wider than its box — a table, a board. */
+export const Horizontal: Story = {
+  render: () => (
+    <ScrollArea orientation="horizontal" className="w-[280px] rounded-lg border border-border-default bg-bg-surface" viewportClassName="p-2">
+      <div className="flex w-max gap-2">
+        {rows.slice(0, 12).map((row) => (
+          <div key={row} className="w-[120px] shrink-0 rounded-md bg-bg-inset px-2 py-1.5 text-body-2 text-text-primary">
+            {row}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+}
+
+/** Both ways, with the corner where the two bars would meet. */
+export const Both: Story = {
+  render: () => (
+    <ScrollArea orientation="both" className="h-[240px] w-[280px] rounded-lg border border-border-default bg-bg-surface" viewportClassName="p-2">
+      <div className="flex w-max flex-col gap-px">
+        {rows.map((row) => (
+          <div key={row} className="w-[480px] rounded-md px-2 py-1.5 text-body-2 text-text-primary">
+            {row} — a line long enough to run past the box
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+}

package/src/ScrollArea.test.tsx

@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+/**
+ * What jsdom can see of the ScrollArea page: the content renders inside the
+ * region, and the region is Base UI's. Whether the bar takes width, and when
+ * it shows, is measured in Chrome (2026-09-08: the viewport keeps its full
+ * width with 40 rows overflowing; the native bar is hidden).
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { ScrollArea } from './ScrollArea'
+
+afterEach(cleanup)
+
+describe('ScrollArea', () => {
+  it('draws the content inside a viewport of its own', () => {
+    const { container } = render(
+      <ScrollArea className="h-40">
+        <p>Inside</p>
+      </ScrollArea>,
+    )
+    const inside = screen.getByText('Inside')
+    expect(container.firstElementChild).not.toBe(inside)
+    expect(container.firstElementChild!.contains(inside)).toBe(true)
+    expect(container.firstElementChild!.className).toContain('h-40')
+  })
+
+  it('puts each class prop on its own box: the region, the viewport, the content', () => {
+    const { container } = render(
+      <ScrollArea className="h-40" viewportClassName="max-h-20" contentClassName="p-2">
+        <p>Inside</p>
+      </ScrollArea>,
+    )
+    const region = container.firstElementChild!
+    const content = screen.getByText('Inside').parentElement!
+    const viewport = content.parentElement!
+    expect(region.className).toContain('h-40')
+    expect(viewport.className).toContain('max-h-20')
+    expect(content.className).toContain('p-2')
+    expect(viewport.parentElement).toBe(region)
+  })
+
+  it('keeps a vertical region no wider than itself, and lets a sideways one grow', () => {
+    const v = render(<ScrollArea><p>Inside</p></ScrollArea>)
+    expect((screen.getByText('Inside').parentElement as HTMLElement).style.minWidth).toBe('0px')
+    cleanup()
+    render(<ScrollArea orientation="horizontal"><p>Inside</p></ScrollArea>)
+    expect((screen.getByText('Inside').parentElement as HTMLElement).style.minWidth).toBe('fit-content')
+    void v
+  })
+})

package/src/ScrollArea.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from 'react'
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area'
+import { cn } from './cn'
+
+/**
+ * A region that scrolls without taking width for its scrollbar.
+ *
+ * A native scrollbar is part of the layout: the moment content overflows, the
+ * bar takes its width from the content, the text column narrows, and the
+ * right-hand padding looks wider than the left. Katerina saw it in every
+ * scrolling surface of both apps (2026-09-08). Base UI's `ScrollArea` hides
+ * the native bar and draws its own over the content, so nothing moves when
+ * it appears; the bar shows while the pointer is over the region or the
+ * content is moving, and fades otherwise.
+ *
+ * Three boxes, and each class prop lands on one:
+ *
+ * - the **region** (`className`): its size and placement — `h-[240px]`, a
+ *   grid cell, `flex-1 min-h-0`;
+ * - the **viewport** (`viewportClassName`): the box that scrolls — a
+ *   `max-h-*` cap goes here, and nowhere else, because a cap on the region
+ *   lets the viewport grow to its content and nothing scrolls (measured,
+ *   2026-09-08);
+ * - the **content** (`contentClassName`): the box the children sit in — the
+ *   padding, the gap, `flex flex-col`. Base UI watches this box for size
+ *   changes; without it the bar kept showing on Ship's page for overflow that
+ *   was no longer there (measured, 2026-09-09).
+ *
+ * The bar is `border-strong` on nothing, 6px wide, inset 2px from the edge —
+ * the thin scrollbar both apps had styled by hand in their `index.css`, drawn
+ * once here instead.
+ *
+ * `orientation` says which way the region scrolls; a table that is wider
+ * than its box scrolls `horizontal`, a list `vertical` (the default), a board
+ * `both`. A vertical region keeps its content no wider than itself, so a
+ * long label still truncates.
+ */
+export interface ScrollAreaProps {
+  orientation?: 'vertical' | 'horizontal' | 'both'
+  /** On the region: its size and placement. */
+  className?: string
+  /** On the viewport, the box that scrolls: a `max-h-*` cap. */
+  viewportClassName?: string
+  /** On the content, the box the children sit in: padding, gap, layout. */
+  contentClassName?: string
+  children: ReactNode
+}
+
+const BAR = 'flex touch-none select-none rounded-full opacity-0 transition-opacity delay-300 data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0'
+const THUMB = 'rounded-full bg-border-strong'
+
+export function ScrollArea({ orientation = 'vertical', className, viewportClassName, contentClassName, children }: ScrollAreaProps) {
+  const vertical = orientation !== 'horizontal'
+  const horizontal = orientation !== 'vertical'
+  return (
+    <BaseScrollArea.Root className={cn('relative min-h-0 min-w-0', className)}>
+      {/* `overscroll-contain`: a list that reaches its end does not hand the
+          wheel to the page behind it, which is the rule every popup here has
+          kept since Peek. */}
+      <BaseScrollArea.Viewport className={cn('h-full w-full overscroll-contain outline-none', viewportClassName)}>
+        {/* Base UI gives the content box `min-width: fit-content`, which is
+            right when the region scrolls sideways and wrong when it does not:
+            a row's `truncate` needs a box no wider than the viewport. */}
+        <BaseScrollArea.Content className={contentClassName} style={horizontal ? undefined : { minWidth: 0 }}>
+          {children}
+        </BaseScrollArea.Content>
+      </BaseScrollArea.Viewport>
+      {vertical && (
+        <BaseScrollArea.Scrollbar orientation="vertical" className={cn(BAR, 'w-1.5 justify-center py-0.5 pr-0.5')}>
+          <BaseScrollArea.Thumb className={cn(THUMB, 'w-full')} />
+        </BaseScrollArea.Scrollbar>
+      )}
+      {horizontal && (
+        <BaseScrollArea.Scrollbar orientation="horizontal" className={cn(BAR, 'h-1.5 flex-col justify-center px-0.5 pb-0.5')}>
+          <BaseScrollArea.Thumb className={cn(THUMB, 'h-full')} />
+        </BaseScrollArea.Scrollbar>
+      )}
+      {vertical && horizontal && <BaseScrollArea.Corner />}
+    </BaseScrollArea.Root>
+  )
+}

package/src/Select.tsx

@@ -2,6 +2,7 @@ import { IconCheck, IconChevronDown } from '@tabler/icons-react'
 import { Select as BaseSelect } from '@base-ui/react/select'
 import type { ReactNode } from 'react'
 import { cn } from './cn'
+import { ScrollArea } from './ScrollArea'
 
 /**
  * Peek's Select (2026-08-28), verbatim, plus what Ship added: an option may
@@ -125,8 +126,13 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
                clamped it — the two numbers `fitMenu` used to compute here. The
                288px is the old `max-h-72`, now a ceiling on that room rather
                than a height applied blind. */
-            className="max-h-[min(288px,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg"
+            className="min-w-[var(--anchor-width)] rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg"
           >
+            {/* The list scrolls in a ScrollArea: the bar takes no width, so a
+                long list is exactly as wide as a short one (Katerina,
+                2026-09-08). The cap sits on the box that scrolls, less the
+                panel's padding, so 288px stays 288px. */}
+            <ScrollArea viewportClassName="max-h-[calc(min(288px,var(--available-height))_-_0.5rem)]" contentClassName="flex flex-col">
             {options.map((option) => (
               <BaseSelect.Item
                 key={option.value}
@@ -146,6 +152,7 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
                 />
               </BaseSelect.Item>
             ))}
+            </ScrollArea>
           </BaseSelect.Popup>
         </BaseSelect.Positioner>
       </BaseSelect.Portal>

package/src/Sidebar.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { cn } from './cn'
+import { ScrollArea } from './ScrollArea'
 
 /**
  * The navigation column: 240px, a hairline on its right, the surface
@@ -21,12 +22,14 @@ export function Sidebar({ 'aria-label': ariaLabel = 'Workspace', children, class
   return (
     <nav
       aria-label={ariaLabel}
-      className={cn(
-        'flex w-60 shrink-0 flex-col gap-px overflow-y-auto border-r border-border-default bg-bg-surface px-2.5 py-3',
-        className,
-      )}
+      className={cn('flex w-60 shrink-0 flex-col border-r border-border-default bg-bg-surface', className)}
     >
-      {children}
+      {/* The rows scroll in a ScrollArea: the bar takes no width, so the
+          column's padding reads the same with a long list as with a short
+          one (Katerina, 2026-09-08). The padding and the gap are the box's. */}
+      <ScrollArea className="min-h-0 flex-1" contentClassName="flex flex-col gap-px px-2.5 py-3">
+        {children}
+      </ScrollArea>
     </nav>
   )
 }

package/src/index.ts

@@ -35,6 +35,7 @@ export { Breadcrumb, type BreadcrumbProps, type Crumb } from './Breadcrumb'
 export { EnterHint, Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSub, type MenuItemProps, type MenuPanelProps, type MenuProps, type MenuSubProps } from './Menu'
 export { NavItem, type NavItemProps } from './NavItem'
 export { Popover, type PopoverProps } from './Popover'
+export { ScrollArea, type ScrollAreaProps } from './ScrollArea'
 export { ReactionPicker, type ReactionOption, type ReactionPickerProps } from './ReactionPicker'
 export { Toolbar, ToolbarButton, ToolbarInput, ToolbarSeparator, type ToolbarProps, type ToolbarButtonProps, type ToolbarInputProps } from './Toolbar'
 export { PreviewCard, type PreviewCardProps } from './PreviewCard'