@estiva-app/ui 0.24.1 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.24.1",
+  "version": "0.25.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/registry.json

@@ -4,9 +4,9 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.24.1",
-    "exports": 84,
-    "typeExports": 94,
+    "packageVersion": "0.25.0",
+    "exports": 86,
+    "typeExports": 95,
     "files": null
   },
   "storybook": {
@@ -1680,6 +1680,49 @@
       "docPage": null,
       "app": null
     },
+    {
+      "name": "ErrorBoundary",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/ErrorBoundary.tsx",
+      "purpose": "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.",
+      "purposeFrom": "page",
+      "props": [
+        {
+          "name": "children",
+          "takes": "anything",
+          "required": true,
+          "note": null
+        },
+        {
+          "name": "label",
+          "takes": "text",
+          "required": false,
+          "note": "What it holds, said in the message and the console line: \"Something went wrong in the {label}.\""
+        },
+        {
+          "name": "fallbackClassName",
+          "takes": "text",
+          "required": false,
+          "note": "The room the message fills where no flex column holds it — the whole screen, for the app's own."
+        },
+        {
+          "name": "frame",
+          "takes": "a handler",
+          "required": false,
+          "note": "Draws the message inside a frame of yours, in the same place: `ListColumn` keeps its title this way."
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "feedback-errorboundary--docs",
+      "storyId": "feedback-errorboundary--in-a-panel",
+      "docPage": "src/ErrorBoundary.mdx",
+      "app": null
+    },
     {
       "name": "Field",
       "repo": "estiva-ui",
@@ -2428,12 +2471,6 @@
           "required": false,
           "note": "A row between the header and the list that stays put while the list scrolls — a field that adds to the list."
         },
-        {
-          "name": "spacing",
-          "takes": "rows | sections",
-          "required": false,
-          "note": "The room between rows. `rows` (2px) for a list of one kind of row; `sections` (4px) for groups with labels and dividers of their own."
-        },
         {
           "name": "collapsed",
           "takes": "true/false",
@@ -2444,7 +2481,7 @@
           "name": "children",
           "takes": "anything",
           "required": true,
-          "note": "The rows."
+          "note": "The rows, 2px apart. Groups are headed by a `CollapsibleSection` or a `SectionHeader`."
         },
         {
           "name": "className",
@@ -2453,15 +2490,7 @@
           "note": "Placement only."
         }
       ],
-      "variants": [
-        {
-          "prop": "spacing",
-          "values": [
-            "rows",
-            "sections"
-          ]
-        }
-      ],
+      "variants": [],
       "ownsBehaviours": [],
       "status": "stable",
       "migrationStage": null,
@@ -2766,6 +2795,24 @@
       "docPage": null,
       "app": null
     },
+    {
+      "name": "MenuSeparator",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/Menu.tsx",
+      "purpose": "The line between two groups of a menu, with its own 4px above and below (UIG-14, Katerina 19 September).",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "overlays-menu--docs",
+      "storyId": "overlays-menu--items",
+      "docPage": null,
+      "app": null
+    },
     {
       "name": "MenuSub",
       "repo": "estiva-ui",

package/src/CollapsibleSection.mdx

@@ -31,7 +31,7 @@ composition lives:
 ## When not
 
 - A heading over rows that never fold → **SectionHeader** without
-  `chevron`, or **SectionLabel** in a 32px row.
+  `chevron`. Never a row drawn by hand.
 - Several panels where opening one closes the others → not here; that is
   an accordion, and no app has asked for one.
 - Content that appears on demand from a control elsewhere → **Popover**.

package/src/Divider.mdx

@@ -14,8 +14,6 @@ orientation for assistive tech.
 
 ## When
 
-- Between groups in a **Menu** (`className="my-1"` gives it its breathing
-  room there).
 - Between sections of a panel, a rail or a card.
 - Vertical: between clusters in a toolbar or a dense row.
 
@@ -30,6 +28,8 @@ orientation for assistive tech.
 
 ## When not
 
+- Between groups in a menu → **MenuSeparator**: this line with its own 4px
+  above and below.
 - Between every row of a list — spacing does that; a hairline per row is
   noise.
 - To title what follows → **SectionLabel** or **SectionHeader**; a heading
@@ -49,7 +49,7 @@ import { Divider } from '@estiva-app/ui'
 - **Inside a `Menu` or a `Popover` it has no inset**: the hairline runs the
   width of the rows. The panel tells it so; nothing is passed in.
 
-- The line is 1px; the room around it is yours (`my-1` in a Menu).
+- The line is 1px; the room around it is yours.
 
 ## What it owns
 

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/ListColumn.mdx

@@ -16,9 +16,9 @@ The list column of a page: 290px wide with a line on its right, its name in a
   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.
-- `spacing="rows"` (the default, 2px between rows) for a list of one kind of
-  row. `spacing="sections"` (4px) for groups with labels and dividers of their
-  own.
+- 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
@@ -71,6 +71,13 @@ import { ListColumn, Toolbar, ToolbarButton } from '@estiva-app/ui'
 
 <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.
@@ -81,6 +88,7 @@ It does these by itself. Write none of them around it.
 | 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
 

package/src/ListColumn.stories.tsx

@@ -2,11 +2,12 @@ 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 { SectionLabel } from './SectionLabel'
+import { SectionHeader } from './SectionHeader'
 import { SkeletonList } from './Skeleton'
 import { TextInput } from './TextInput'
 import { Toolbar, ToolbarButton } from './Toolbar'
@@ -58,19 +59,24 @@ export const Default: Story = {
   render: (args) => <ListColumn {...args}>{rows(6)}</ListColumn>,
 }
 
-/** Groups with labels and a divider of their own: 4px between rows. */
+/**
+ * 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', spacing: 'sections' },
+  args: { title: 'Items' },
   render: (args) => (
     <ListColumn {...args}>
-      <div className="flex h-8 shrink-0 items-center px-2">
-        <SectionLabel>Group one</SectionLabel>
-      </div>
-      {rows(3)}
+      <CollapsibleSection title="Group one" contentClassName="mt-1 gap-0.5">
+        {rows(3)}
+      </CollapsibleSection>
       <Divider className="my-2" />
-      <div className="flex h-8 shrink-0 items-center px-2">
-        <SectionLabel>Group two</SectionLabel>
-      </div>
+      <SectionHeader
+        title="Group two"
+        hover="none"
+        actions={[{ icon: <IconSortDescending size={16} stroke={1.5} />, tooltip: 'Sort by', onClick: () => {} }]}
+      />
       {rows(4)}
     </ListColumn>
   ),
@@ -115,6 +121,24 @@ export const Loading: Story = {
   ),
 }
 
+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 } },

package/src/ListColumn.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 /** What the ListColumn page claims, pinned. Sizes are measured in the browser; these pin the parts. */
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 import { ListColumn } from './ListColumn'
 
@@ -39,12 +39,25 @@ describe('ListColumn', () => {
     expect(list.contains(screen.getByText('Above'))).toBe(false)
   })
 
-  it('sections: 4px between rows', () => {
-    render(
-      <ListColumn title="Items" spacing="sections">
-        <p>Row</p>
-      </ListColumn>,
+  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('Row').parentElement as HTMLElement).className.split(' ')).toContain('gap-1')
+    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()
   })
 })

package/src/ListColumn.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import { cn } from './cn'
 import { ContainerHeader } from './ContainerHeader'
+import { ErrorBoundary } from './ErrorBoundary'
 import { ScrollArea } from './ScrollArea'
 
 /**
@@ -11,12 +12,18 @@ import { ScrollArea } from './ScrollArea'
  * Moved in from Peek as it looks (UIG-14, N9), where five pages drew it by
  * hand and each carried the same numbers: the frame's 290px and its line, and
  * the list's steps — 16px under the header, 12px above the bottom, rows 12px
- * in from each side. The numbers live here now, once.
+ * in from each side and 2px apart. The numbers live here now, once. One
+ * spacing for every list (Katerina, D5): a list of groups heads each with a
+ * `CollapsibleSection` or a `SectionHeader`.
  *
  * It scrolls its rows itself. A list column that did not was the first of the
  * eight mistakes on the page that led to UIG-15: the frame's card clips, so a
  * list that grew past the fold was simply cut off, with nothing to scroll.
  *
+ * It keeps a crash inside itself (D1, D3): if its rows, its actions or the row
+ * above break, the column keeps its title and shows `ErrorBoundary`'s message
+ * in the middle of the room the list had, and the rest of the page keeps working.
+ *
  * `collapsed` closes it with the rail, as Peek's did: it narrows to nothing
  * and fades, in 300ms. What opens and closes the rail stays the app's.
  */
@@ -29,20 +36,15 @@ export interface ListColumnProps {
   actions?: ReactNode
   /** A row between the header and the list that stays put while the list scrolls — a field that adds to the list. */
   above?: ReactNode
-  /**
-   * The room between rows. `rows` (2px) for a list of one kind of row;
-   * `sections` (4px) for groups with labels and dividers of their own.
-   */
-  spacing?: 'rows' | 'sections'
   /** Closes the column with the rail: it narrows to nothing and fades. */
   collapsed?: boolean
-  /** The rows. */
+  /** The rows, 2px apart. Groups are headed by a `CollapsibleSection` or a `SectionHeader`. */
   children: ReactNode
   /** Placement only. */
   className?: string
 }
 
-export function ListColumn({ title, chevron = false, actions, above, spacing = 'rows', collapsed = false, children, className }: ListColumnProps) {
+function Column({ title, chevron = false, actions, above, collapsed = false, children, className, broken = false }: ListColumnProps & { broken?: boolean }) {
   return (
     <div
       className={cn(
@@ -55,9 +57,30 @@ export function ListColumn({ title, chevron = false, actions, above, spacing = '
     >
       <ContainerHeader title={title} chevron={chevron} actions={actions} />
       {above}
-      <ScrollArea className="flex-1" contentClassName={cn('flex flex-col px-3 pt-4 pb-3', spacing === 'rows' ? 'gap-0.5' : 'gap-1')}>
-        {children}
-      </ScrollArea>
+      {broken ? (
+        // The message takes the room the list had and centres itself in it (Katerina, 19 September).
+        <div className="flex min-h-0 flex-1 flex-col px-3">{children}</div>
+      ) : (
+        <ScrollArea className="flex-1" contentClassName="flex flex-col gap-0.5 px-3 pt-4 pb-3">
+          {children}
+        </ScrollArea>
+      )}
     </div>
   )
 }
+
+export function ListColumn(props: ListColumnProps) {
+  return (
+    <ErrorBoundary
+      label="list panel"
+      frame={(message) => (
+        // Only the name comes back with the message: the actions and the row above may be what threw.
+        <Column title={props.title} chevron={props.chevron} collapsed={props.collapsed} className={props.className} broken>
+          {message}
+        </Column>
+      )}
+    >
+      <Column {...props} />
+    </ErrorBoundary>
+  )
+}