@estiva-app/ui 0.24.0 → 0.25.0

package/src/ErrorBoundary.mdx

@@ -0,0 +1,66 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as ErrorBoundaryStories from './ErrorBoundary.stories'
+
+<Meta of={ErrorBoundaryStories} />
+
+# ErrorBoundary
+
+Keeps a crash inside what it holds: that part shows "Something went wrong …
+Your data is safe — try again." with a Try again button, and the rest of the
+page keeps working.
+
+<Canvas of={ErrorBoundaryStories.InAPanel} />
+
+## When
+
+- Around each part of the page that can break on its own: a column, a panel,
+  a conversation — and once around the whole app.
+- `label` says what it holds, in the message and the console line: "Something
+  went wrong in the {label}."
+- `fallbackClassName` is the room the message fills where no flex column
+  holds it: the whole screen, for the app's own.
+- `frame` draws the message inside a frame of yours, in the same place.
+  **ListColumn** holds one of its own this way, so a column that breaks keeps
+  its title.
+
+<Canvas of={ErrorBoundaryStories.TryAgain} />
+
+## When not
+
+- A read that failed, which the app knows about → say it where the content
+  would be, with **EmptyState**; this part is for what nobody expected.
+- Something the person did that failed → **Toast**, or **FieldLine** under
+  the field.
+- Around a single small control: a crash is caught by the part of the page it
+  belongs to.
+
+## How
+
+```tsx
+import { ErrorBoundary } from '@estiva-app/ui'
+
+<ErrorBoundary label="conversation">
+  <Conversation id={id} />
+</ErrorBoundary>
+```
+
+- The message is **EmptyState** with its one action, so it takes the room it
+  is given and centres itself in it.
+- Try again draws the part again. If what broke is still broken, the message
+  comes back.
+- A crash is written to the console: "{label} crashed:", the error, and where
+  it happened.
+
+## What it owns
+
+It does these by itself. Write none of them around it.
+
+| It does | So you never write | Refused when written by hand |
+|---|---|---|
+| Catches a crash in what it holds, so the rest of the page keeps working | an error boundary of your own |  |
+| Shows the message and a Try again that draws the part again | a fallback and a reset of your own |  |
+| Writes the crash to the console, with what it holds | `console.error` in a boundary of your own |  |
+
+## Props
+
+<Controls of={ErrorBoundaryStories.InAPanel} />

package/src/ErrorBoundary.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { Button } from './Button'
+import { ErrorBoundary } from './ErrorBoundary'
+
+/**
+ * A part of the page that crashes shows this in its place, and the rest of the
+ * page keeps working. Try again draws the part again.
+ */
+const meta = {
+  title: 'Feedback/ErrorBoundary',
+  component: ErrorBoundary,
+  parameters: { layout: 'fullscreen' },
+  args: { label: 'panel', children: null },
+  argTypes: { children: { control: false }, frame: { control: false } },
+} satisfies Meta<typeof ErrorBoundary>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function Broken(): never {
+  throw new Error('This part could not draw itself')
+}
+
+/** A panel that crashed, beside one that did not. */
+export const InAPanel: Story = {
+  args: { label: 'panel' },
+  render: (args) => (
+    <div className="flex h-screen bg-bg-surface">
+      <div className="flex w-72 flex-col border-r border-border-subtle">
+        <ErrorBoundary {...args}>
+          <Broken />
+        </ErrorBoundary>
+      </div>
+      <div className="flex flex-1 items-center justify-center text-body-2 text-text-secondary">The rest of the page keeps working.</div>
+    </div>
+  ),
+}
+
+/** Try again draws the part again: here the part is mended first, so it comes back. */
+export const TryAgain: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Mend() {
+    const [mended, setMended] = useState(false)
+    function Part() {
+      if (!mended) throw new Error('This part could not draw itself')
+      return <p className="p-4 text-body-2 text-text-primary">The part is back.</p>
+    }
+    return (
+      <div className="flex h-screen flex-col bg-bg-surface">
+        <div className="p-4">
+          <Button variant="outlined" onClick={() => setMended(true)}>
+            Mend the part
+          </Button>
+        </div>
+        <div className="flex flex-1 flex-col border-t border-border-subtle">
+          <ErrorBoundary label="panel">
+            <Part />
+          </ErrorBoundary>
+        </div>
+      </div>
+    )
+  },
+}

package/src/ErrorBoundary.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+/** What the ErrorBoundary page claims, pinned. Moved in from Peek with the part (UIG-14, D3). */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { ErrorBoundary } from './ErrorBoundary'
+
+afterEach(cleanup)
+
+function Bomb({ defused }: { defused: boolean }) {
+  if (!defused) throw new Error('boom')
+  return <div>recovered content</div>
+}
+
+/** Flips the crash off outside the boundary, so Try again shows a real recovery
+ *  (a child still broken would only crash again). */
+function Harness() {
+  const [defused, setDefused] = useState(false)
+  return (
+    <>
+      <button onClick={() => setDefused(true)}>defuse</button>
+      <ErrorBoundary label="test panel">
+        <Bomb defused={defused} />
+      </ErrorBoundary>
+    </>
+  )
+}
+
+describe('ErrorBoundary', () => {
+  beforeEach(() => {
+    // React logs the caught error; keep the output quiet.
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+  })
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('shows the message in place of what crashed', () => {
+    render(<Harness />)
+    expect(screen.getByText(/Something went wrong in the test panel/)).toBeTruthy()
+    expect(screen.queryByText('recovered content')).toBeNull()
+  })
+
+  it('keeps the rest of the page working', () => {
+    render(<Harness />)
+    expect(screen.getByText('defuse')).toBeTruthy()
+  })
+
+  it('Try again draws it again', () => {
+    render(<Harness />)
+    fireEvent.click(screen.getByText('defuse'))
+    fireEvent.click(screen.getByText('Try again'))
+    expect(screen.getByText('recovered content')).toBeTruthy()
+    expect(screen.queryByText(/Something went wrong/)).toBeNull()
+  })
+
+  it('draws its children untouched when nothing throws', () => {
+    render(
+      <ErrorBoundary>
+        <div>healthy</div>
+      </ErrorBoundary>,
+    )
+    expect(screen.getByText('healthy')).toBeTruthy()
+  })
+
+  it('draws the message inside a frame, when given one', () => {
+    render(
+      <ErrorBoundary label="list" frame={(message) => <section aria-label="frame">{message}</section>}>
+        <Bomb defused={false} />
+      </ErrorBoundary>,
+    )
+    expect(screen.getByLabelText('frame').textContent).toMatch(/Something went wrong in the list/)
+  })
+
+  it('says what crashed in the console line', () => {
+    render(<Harness />)
+    expect(vi.mocked(console.error).mock.calls.some((call) => String(call[0]).startsWith('test panel crashed:'))).toBe(true)
+  })
+})

package/src/ErrorBoundary.tsx

@@ -0,0 +1,54 @@
+import { Component, type ReactNode } from 'react'
+import { IconAlertTriangle } from '@tabler/icons-react'
+import { EmptyState } from './EmptyState'
+
+/**
+ * Catches a part of the page that crashes, and shows "Something went wrong …
+ * Your data is safe — try again." with a Try again button in its place, so the
+ * rest of the app keeps working. Try again draws that part again.
+ *
+ * Moved in from Peek as it was (UIG-14, D3, Katerina 19 September), where one
+ * wrapped each panel and the whole app. `ListColumn` holds one of its own.
+ */
+export interface ErrorBoundaryProps {
+  children: ReactNode
+  /** What it holds, said in the message and the console line: "Something went wrong in the {label}." */
+  label?: string
+  /** The room the message fills where no flex column holds it — the whole screen, for the app's own. */
+  fallbackClassName?: string
+  /** Draws the message inside a frame of yours, in the same place: `ListColumn` keeps its title this way. */
+  frame?: (message: ReactNode) => ReactNode
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+}
+
+/** Keeps a crash inside what it holds: the rest of the page keeps working, and Try again draws it again. */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false }
+
+  static getDerivedStateFromError(): ErrorBoundaryState {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: unknown, info: { componentStack?: string | null }) {
+    console.error(`${this.props.label ?? 'part of the page'} crashed:`, error, info.componentStack ?? '')
+  }
+
+  render() {
+    if (!this.state.hasError) return this.props.children
+    // EmptyState with its one action: in a flex column it takes the room and centres itself, with no box.
+    const message = (
+      <EmptyState
+        icon={<IconAlertTriangle size={16} stroke={1.5} />}
+        message={`Something went wrong${this.props.label ? ` in the ${this.props.label}` : ''}. Your data is safe — try again.`}
+        action={{ label: 'Try again', onClick: () => this.setState({ hasError: false }) }}
+      />
+    )
+    // Around a column: the column is drawn again, with the message in it.
+    if (this.props.frame) return this.props.frame(message)
+    // The whole app's: no column around it, so it names its own room.
+    return this.props.fallbackClassName ? <div className={this.props.fallbackClassName}>{message}</div> : message
+  }
+}

package/src/Field.mdx

@@ -43,14 +43,13 @@ import { Field, TextInput } from '@estiva-app/ui'
   reversed at stage 3: the Field used to win and override it.
 - `helper` is the line under the control — the format, or what happens if
   it is left empty. `error` **replaces** it and marks the control invalid,
-  so you no longer pass `aria-invalid` yourself. Both are announced;
-  Ship and Peek wrote this line by hand six times between them, and none of
-  those was.
+  so you no longer pass `aria-invalid` yourself. Both are announced; a line
+  written by hand beside the control is not.
 - With neither, the control stays a direct child of the field, so nothing
   that predates the two props moved a pixel.
 - **`required` marks the control as well as the label.** The asterisk is a
   picture of the requirement; `aria-required` on the control is the word for
-  it, and the control had neither until 2026-09-08 — measured. Base UI's
+  it. Base UI's
   `Field` has no `required` of its own, so the Field puts it there. A control
   that says so already is left alone, and a `children` of several elements
   keeps the asterisk and owes its own.

package/src/Form.mdx

@@ -70,7 +70,7 @@ It does these by itself. Write none of them around it.
 
 ## Keys
 
-The same in every form (Katerina, 16 September).
+The same in every form.
 
 | Key | Does |
 |---|---|

package/src/IconButton.mdx

@@ -48,7 +48,7 @@ import { IconPencil } from '@tabler/icons-react'
 - `glow` lights it in Signal — the send arrow while there is something to send.
 - **Placed from outside, never restyled.** `className` takes space, size,
   flex and grid, and position; a colour, a text size, a border, a corner or a
-  shadow is refused by the lint (`estiva/no-restyled-part`, UIG-9).
+  shadow is refused by the lint (`estiva/no-restyled-part`).
 - `type` defaults to `"button"`; it is a native `<button>` on Base UI's
   Button, and every native prop passes through.
 - `disabledReason="Read only"` disables it, keeps it reachable by Tab,

package/src/IdentityMenu.mdx

@@ -74,7 +74,7 @@ It does these by itself. Write none of them around it.
 ## Keys
 
 Since stage 4 the panel is a Base UI `Menu`, and **the arrow keys walk the
-actions only** (Katerina, D22): they step over the identity block, the
+actions only**: they step over the identity block, the
 workspace line and the notes, because those are not things you can do.
 
 | Input | What happens |

package/src/InlineChip.mdx

@@ -51,6 +51,9 @@ import { InlineChip } from '@estiva-app/ui'
 - A rich-text editor that renders chips from strings cannot use a component.
   `inlineChipClassName(tone)` gives it the same classes.
 
+- `INLINE_CHIP_CLASSES` and `INLINE_CHIP_TONE_CLASSES` give the same look where
+  only classes can go — inside an editor.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.

package/src/Kbd.mdx

@@ -41,8 +41,8 @@ Geist Mono owns `←` and `→` but draws them 10px wide, so a chip holding one
 comes out wider than the chips beside it. Measure before adding a symbol to
 this list; the font's coverage is not uniform.
 
-And a trigger is the character you would actually type. Peek's resolution
-block fires on `->`, so its row says `->` — there is no `→` key to press.
+And a trigger is the character you would actually type. A shortcut that fires
+on `->` shows `->` — there is no `→` key to press.
 
 ## When not
 

package/src/Link.mdx

@@ -12,6 +12,8 @@ the app decides how it navigates.
 
 ## When
 
+- **It takes the size and colour of the text around it**: put it inside that
+  text.
 - **`text`** — a link written inside text: the info colour, always
   underlined, dimming on hover.
 - **`quiet`** — a title or a time that is also a link. It takes the colour and
@@ -59,7 +61,7 @@ import { Link } from '@estiva-app/ui'
   Its size and colour still come from the text around it.
 - `quiet`, `underlined` and `plain` take their size and colour from where they
   sit, so put those on your own element around the link, not on the link —
-  the lint refuses a look passed in `className` (UIG-9).
+  the lint refuses a look passed in `className`.
 
 ## What it owns
 

package/src/ListColumn.mdx

@@ -0,0 +1,95 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as ListColumnStories from './ListColumn.stories'
+
+<Meta of={ListColumnStories} />
+
+# ListColumn
+
+The list column of a page: 290px wide with a line on its right, its name in a
+`ContainerHeader`, and the list under it, which scrolls.
+
+<Canvas of={ListColumnStories.Default} />
+
+## When
+
+- **Its size is its own**: 290px wide and the full height of where it sits.
+  Nothing around it sets its width, and nothing squeezes it.
+- A page that lists things beside the one that is open: the list on the left,
+  the chosen thing to its right.
+- Its rows sit 2px apart, one kind of row or groups alike. A group that folds
+  is a **CollapsibleSection**; a group that does not is a **SectionHeader**
+  over its rows. Never a heading row drawn by hand.
+- `above` for a row that stays put while the list scrolls: a field that adds
+  to the list.
+- `collapsed` closes it with the rail: it narrows to nothing and fades, in
+  300ms. What opens and closes the rail is yours.
+
+<Canvas of={ListColumnStories.Sections} />
+
+<Canvas of={ListColumnStories.WithARowAbove} />
+
+## When not
+
+- The app's own places, as the frame's column → **Sidebar**, in AppShell's
+  solid frame.
+- A short list inside a panel or a card → your rows in a **ScrollArea**.
+- A bar over something that is not a list → **ContainerHeader** on its own.
+
+## How
+
+```tsx
+import { ListColumn, Toolbar, ToolbarButton } from '@estiva-app/ui'
+
+<ListColumn
+  title="Items"
+  actions={
+    <Toolbar aria-label="Item list actions" surface={false}>
+      <ToolbarButton tooltip="New item" aria-label="New item" onClick={create}>
+        <IconEdit size={16} stroke={1.5} />
+      </ToolbarButton>
+    </Toolbar>
+  }
+  collapsed={railClosed}
+>
+  {items.map((item) => (
+    <ItemRow key={item.id} item={item} />
+  ))}
+</ListColumn>
+```
+
+- It sits beside the page's main area, inside AppShell's card: put both in a
+  flex row, the main area `flex-1`.
+- The numbers: 290px wide, a 1px line on the right. The header is
+  ContainerHeader's: 48px, the title 20px in. The list starts 16px under the
+  header and ends 12px above the bottom, and its rows sit 12px in from each
+  side.
+- The rows are yours. It scrolls them, so a list that grows with its data is
+  never cut off at the fold, even when today's data fits.
+- **Planned:** dragging its edge to resize it, with `SplitLayout` in
+  `@estiva-app/ui/layout` (migration stage 8). The 380px column beside a
+  conversation gets the same treatment then.
+
+<Canvas of={ListColumnStories.ManyRows} />
+
+- **A crash stays inside it.** If its rows, its actions or the row above
+  break, it keeps its title and shows "Something went wrong in the list
+  panel… try again" in the middle of the room the list had. The rest of the page keeps working.
+  It is **ErrorBoundary**'s, held by the column itself.
+
+<Canvas of={ListColumnStories.WhenARowBreaks} />
+
+## What it owns
+
+It does these by itself. Write none of them around it.
+
+| It does | So you never write | Refused when written by hand |
+|---|---|---|
+| Draws the column: 290px, a line on its right, and a ContainerHeader on top | a width, a border and a header row of your own |  |
+| Scrolls its rows in a ScrollArea, 16px under the header, 12px in from each side | `overflow-auto`, or padding of your own around the rows |  |
+| Closes with the rail when `collapsed`: narrows to nothing and fades | a width transition of your own |  |
+| Keeps its 290px beside a main area that grows | `shrink-0` |  |
+| Keeps a crash inside itself: its title stays, the message and Try again sit in the middle of the room the list had | an error boundary of your own around it |  |
+
+## Props
+
+<Controls of={ListColumnStories.Default} />

package/src/ListColumn.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { IconSortDescending, IconSquareRounded } from '@tabler/icons-react'
+import { useState } from 'react'
+import { Button } from './Button'
+import { CollapsibleSection } from './CollapsibleSection'
+import { Divider } from './Divider'
+import { Form } from './Form'
+import { ListColumn } from './ListColumn'
+import { NavItem } from './NavItem'
+import { SectionHeader } from './SectionHeader'
+import { SkeletonList } from './Skeleton'
+import { TextInput } from './TextInput'
+import { Toolbar, ToolbarButton } from './Toolbar'
+
+/**
+ * The list column of a page: 290px, a line on its right, a header, and a list
+ * that scrolls. The rows are the app's own; these stories draw `NavItem`s as
+ * stand-ins.
+ */
+const meta = {
+  title: 'Layout/ListColumn',
+  component: ListColumn,
+  parameters: { layout: 'fullscreen' },
+  args: { title: 'Items', children: null },
+  argTypes: { children: { control: false }, actions: { control: false }, above: { control: false } },
+  // The column beside a main area, inside a surface — where it sits in the frame's card.
+  decorators: [
+    (Story) => (
+      <div className="flex h-screen bg-bg-surface">
+        {Story()}
+        <div className="min-w-0 flex-1" />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ListColumn>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const icon = <IconSquareRounded size={16} stroke={1.5} />
+const names = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']
+const rows = (n: number) =>
+  Array.from({ length: n }, (_, i) => <NavItem key={i} href="#" label={`Item ${names[i] ?? i + 1}`} icon={icon} active={i === 1} />)
+
+const actions = (
+  <Toolbar aria-label="Item list actions" surface={false}>
+    <ToolbarButton tooltip="Sort by" aria-label="Sort by">
+      <IconSortDescending size={16} stroke={1.5} />
+    </ToolbarButton>
+    <ToolbarButton tooltip="New item" aria-label="New item">
+      {icon}
+    </ToolbarButton>
+  </Toolbar>
+)
+
+/** A list of one kind of row, 2px apart, with the column's actions in its header. */
+export const Default: Story = {
+  args: { title: 'Items', actions },
+  render: (args) => <ListColumn {...args}>{rows(6)}</ListColumn>,
+}
+
+/**
+ * Groups. Each is headed by a package part, never by a row drawn by hand: a
+ * group that folds is a `CollapsibleSection`; a group that does not fold is a
+ * `SectionHeader` over its rows.
+ */
+export const Sections: Story = {
+  args: { title: 'Items' },
+  render: (args) => (
+    <ListColumn {...args}>
+      <CollapsibleSection title="Group one" contentClassName="mt-1 gap-0.5">
+        {rows(3)}
+      </CollapsibleSection>
+      <Divider className="my-2" />
+      <SectionHeader
+        title="Group two"
+        hover="none"
+        actions={[{ icon: <IconSortDescending size={16} stroke={1.5} />, tooltip: 'Sort by', onClick: () => {} }]}
+      />
+      {rows(4)}
+    </ListColumn>
+  ),
+}
+
+/** A row under the header that stays put while the list scrolls: a field that adds to the list. */
+export const WithARowAbove: Story = {
+  parameters: { controls: { disable: true } },
+  render: function RowAbove() {
+    const [name, setName] = useState('')
+    return (
+      <ListColumn
+        title="Items"
+        above={
+          <Form onSubmit={() => setName('')} className="flex items-center gap-2 px-3 pt-3 pb-1">
+            <TextInput className="min-w-0 flex-1" value={name} onChange={(e) => setName(e.target.value)} placeholder="New item name" aria-label="New item name" />
+            <Button className="shrink-0" type="submit" disabled={!name.trim()}>
+              Create
+            </Button>
+          </Form>
+        }
+      >
+        {rows(5)}
+      </ListColumn>
+    )
+  },
+}
+
+/** More rows than fit: the list scrolls under a header that stays. */
+export const ManyRows: Story = {
+  args: { title: 'Items', actions },
+  render: (args) => <ListColumn {...args}>{rows(80)}</ListColumn>,
+}
+
+/** While the list is on its way: a skeleton shaped like the rows. */
+export const Loading: Story = {
+  args: { title: 'Items' },
+  render: (args) => (
+    <ListColumn {...args}>
+      <SkeletonList rows={8} />
+    </ListColumn>
+  ),
+}
+
+function Broken(): never {
+  throw new Error('A row could not draw itself')
+}
+
+/**
+ * When a row breaks: the column keeps its title and says so in the middle of
+ * the room the list had, with Try again. The rest of the page keeps working.
+ */
+export const WhenARowBreaks: Story = {
+  args: { title: 'Items', actions },
+  render: (args) => (
+    <ListColumn {...args}>
+      {rows(2)}
+      <Broken />
+    </ListColumn>
+  ),
+}
+
+/** Closed with the rail: it narrows to nothing and fades. Press the button to watch it. */
+export const Collapsing: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Collapsing() {
+    const [collapsed, setCollapsed] = useState(false)
+    return (
+      <>
+        <ListColumn title="Items" collapsed={collapsed}>
+          {rows(6)}
+        </ListColumn>
+        <div className="p-4">
+          <Button variant="outlined" onClick={() => setCollapsed((c) => !c)}>
+            {collapsed ? 'Open the column' : 'Close the column'}
+          </Button>
+        </div>
+      </>
+    )
+  },
+}

package/src/ListColumn.test.tsx

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+/** What the ListColumn page claims, pinned. Sizes are measured in the browser; these pin the parts. */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { ListColumn } from './ListColumn'
+
+afterEach(cleanup)
+
+describe('ListColumn', () => {
+  it('is headed by its title', () => {
+    render(<ListColumn title="Items">{null}</ListColumn>)
+    expect(screen.getByText('Items')).toBeTruthy()
+  })
+
+  it('is 290px wide with a line on its right, and keeps its width', () => {
+    const { container } = render(<ListColumn title="Items">{null}</ListColumn>)
+    const classes = (container.firstElementChild as HTMLElement).className.split(' ')
+    expect(classes).toContain('w-[290px]')
+    expect(classes).toContain('border-r')
+    expect(classes).toContain('shrink-0')
+  })
+
+  it('collapsed: narrows to nothing, loses its line, and fades', () => {
+    const { container } = render(<ListColumn title="Items" collapsed>{null}</ListColumn>)
+    const classes = (container.firstElementChild as HTMLElement).className.split(' ')
+    expect(classes).toContain('w-0')
+    expect(classes).toContain('border-r-0')
+    expect(classes).toContain('opacity-0')
+  })
+
+  it('draws its rows in the list, and a row above the list outside it', () => {
+    render(
+      <ListColumn title="Items" above={<p>Above</p>}>
+        <p>Row</p>
+      </ListColumn>,
+    )
+    const list = screen.getByText('Row').parentElement as HTMLElement
+    expect(list.className.split(' ')).toEqual(expect.arrayContaining(['px-3', 'pt-4', 'pb-3', 'gap-0.5']))
+    expect(list.contains(screen.getByText('Above'))).toBe(false)
+  })
+
+  it('a row that breaks: the column keeps its title, the message is where the list was, the rest stays', () => {
+    const quiet = vi.spyOn(console, 'error').mockImplementation(() => {})
+    function Broken(): never {
+      throw new Error('boom')
+    }
+    const { container } = render(
+      <>
+        <ListColumn title="Items" actions={<button>Sort</button>}>
+          <Broken />
+        </ListColumn>
+        <p>The rest of the page</p>
+      </>,
+    )
+    expect(screen.getByText('Items')).toBeTruthy()
+    expect(screen.getByText(/Something went wrong in the list panel/)).toBeTruthy()
+    // Only the name comes back: the actions may be what threw.
+    expect(screen.queryByText('Sort')).toBeNull()
+    expect(screen.getByText('The rest of the page')).toBeTruthy()
+    expect((container.firstElementChild as HTMLElement).className.split(' ')).toContain('w-[290px]')
+    quiet.mockRestore()
+  })
+})