@estiva-app/ui 0.24.0 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.24.0",
+  "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.0",
-    "exports": 82,
-    "typeExports": 92,
+    "packageVersion": "0.25.0",
+    "exports": 86,
+    "typeExports": 95,
     "files": null
   },
   "storybook": {
@@ -397,7 +397,7 @@
       "kind": "component",
       "importPath": "@estiva-app/ui",
       "sourceFile": "src/Button.tsx",
-      "purpose": "The push-button for an action: a verb, clicked once — \"Create\", \"Save\", \"Delete project\".",
+      "purpose": "The push-button for an action: a verb, clicked once — \"Create\", \"Save\", \"Delete\".",
       "purposeFrom": "page",
       "props": [
         {
@@ -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",
@@ -2395,6 +2438,67 @@
       "docPage": "src/Link.mdx",
       "app": null
     },
+    {
+      "name": "ListColumn",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/ListColumn.tsx",
+      "purpose": "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.",
+      "purposeFrom": "page",
+      "props": [
+        {
+          "name": "title",
+          "takes": "anything",
+          "required": true,
+          "note": "The column's name, in its header. A node for a title that is more than words."
+        },
+        {
+          "name": "chevron",
+          "takes": "true/false",
+          "required": false,
+          "note": "A chevron after the title, as `ContainerHeader` draws it."
+        },
+        {
+          "name": "actions",
+          "takes": "anything",
+          "required": false,
+          "note": "The column's own actions, at the header's right — a `Toolbar` of `ToolbarButton`s, or one `IconButton`."
+        },
+        {
+          "name": "above",
+          "takes": "anything",
+          "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": "collapsed",
+          "takes": "true/false",
+          "required": false,
+          "note": "Closes the column with the rail: it narrows to nothing and fades."
+        },
+        {
+          "name": "children",
+          "takes": "anything",
+          "required": true,
+          "note": "The rows, 2px apart. Groups are headed by a `CollapsibleSection` or a `SectionHeader`."
+        },
+        {
+          "name": "className",
+          "takes": "text",
+          "required": false,
+          "note": "Placement only."
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "layout-listcolumn--docs",
+      "storyId": "layout-listcolumn--default",
+      "docPage": "src/ListColumn.mdx",
+      "app": null
+    },
     {
       "name": "Menu",
       "repo": "estiva-ui",
@@ -2691,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",
@@ -4383,6 +4505,91 @@
       "docPage": null,
       "app": null
     },
+    {
+      "name": "ToolbarLink",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/Toolbar.tsx",
+      "purpose": "An `IconButton` that is a link, and an item of a `Toolbar`: the arrow keys reach it like the buttons beside it.",
+      "purposeFrom": "comment",
+      "props": [
+        {
+          "name": "href",
+          "takes": "text",
+          "required": true,
+          "note": null
+        },
+        {
+          "name": "ref",
+          "takes": "Ref<HTMLAnchorElement>",
+          "required": false,
+          "note": null
+        },
+        {
+          "name": "variant",
+          "takes": "muted | outlined | primary | current | resolve",
+          "required": false,
+          "note": "`current` takes the colour of what it sits in — the ✕ on a `Banner` wears the banner's tone."
+        },
+        {
+          "name": "glow",
+          "takes": "true/false",
+          "required": false,
+          "note": "A glow in Signal — the send arrow while there is something to send."
+        },
+        {
+          "name": "tooltip",
+          "takes": "text",
+          "required": false,
+          "note": null
+        },
+        {
+          "name": "tooltipShortcut",
+          "takes": "text",
+          "required": false,
+          "note": "A key hint drawn as the `Kbd` chip inside the tooltip — for a button whose only other affordance is a keyboard shortcut."
+        },
+        {
+          "name": "tooltipPlacement",
+          "takes": "top | bottom",
+          "required": false,
+          "note": null
+        },
+        {
+          "name": "children",
+          "takes": "anything",
+          "required": true,
+          "note": "The icon: 16px, stroke 1.5."
+        }
+      ],
+      "variants": [
+        {
+          "prop": "variant",
+          "values": [
+            "muted",
+            "outlined",
+            "primary",
+            "current",
+            "resolve"
+          ]
+        },
+        {
+          "prop": "tooltipPlacement",
+          "values": [
+            "top",
+            "bottom"
+          ]
+        }
+      ],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-toolbar--docs",
+      "storyId": "primitives-toolbar--default",
+      "docPage": null,
+      "app": null
+    },
     {
       "name": "ToolbarSeparator",
       "repo": "estiva-ui",

package/src/AppShell.mdx

@@ -52,7 +52,6 @@ flex column. A page is a flex child of `main`, and says one of two things:
 Never `h-full`: the frame's content box is *at least* the viewport's
 height and grows with a tall page — which is what lets the bar know the
 page changed — so a percentage height has nothing to resolve against.
-Measured on all four of Ship's pages (2026-09-09).
 
 ```tsx
 import { AppShell, Banner, IdentityMenu, Rail, RailItem } from '@estiva-app/ui'
@@ -78,6 +77,14 @@ import { AppShell, Banner, IdentityMenu, Rail, RailItem } from '@estiva-app/ui'
 - In the Signal theme the floating frame draws the control-room dot grid on
   its ground, behind the card. Nothing to add: the preset makes it.
 
+- In the floating manner the bar takes the top 52px; the card sits 16px from
+  the right and the bottom, with 16px corners, beside the 64px rail.
+- In the floating manner the card owns `overflow-hidden`, so anything in it
+  that can grow sits in a **ScrollArea** — a list column most of all, which
+  **ListColumn** draws with its own. Without one it is cut off at the fold.
+- **Planned:** `SplitLayout`, resizable panels, in `@estiva-app/ui/layout`
+  (migration stage 8). It may take the list and side columns' widths.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.

package/src/AttachmentCard.mdx

@@ -53,10 +53,12 @@ import { AttachmentCard } from '@estiva-app/ui'
 - The name truncates. When it is cut off, the full name is on hover; a name
   that fits, and a size, show nothing extra. `noteHint` is always on hover, since
   it says more than the line.
-- The remove control is Peek's 20px round badge on the card's corner, a button
+- The remove control is a 20px round badge on the card's corner, a button
   on Base UI's `Button` like InputChip's ✕ — not an `IconButton`, the 24px
   square that fills on hover.
 
+- **Planned:** a Lightbox that opens a picture full screen, in migration stage 7.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.

package/src/Avatar.mdx

@@ -39,7 +39,7 @@ import { Avatar } from '@estiva-app/ui'
   two words, skipping words that open with a symbol. An unnamed person is
   the silhouette, not a `?` — a question mark reads as an error badge.
 - The initials are centred on the capitals themselves — cap height to
-  baseline — not on the line of text around them (D27). A single face can
+  baseline — not on the line of text around them. A single face can
   still sit up to half a pixel off: the screen rounds text to its pixel grid
   wherever the tile lands.
 - The colour behind initials is per person, chosen from the name, the same
@@ -54,7 +54,7 @@ import { Avatar } from '@estiva-app/ui'
 **A face is silent by default**, and that is the important half: almost every
 face in the suite sits beside the name it belongs to — in a `Person`, in a
 `MenuItem`'s `leading`, in a row — and a picture that spoke there would say the
-name twice. It used to. Measured 2026-09-08, before this was true: a `Person`
+name twice. It used to: a `Person`
 inside a button announced **"AD Ana Duarte"** (the initials read as text), and
 with a picture **"Ana Duarte Ana Duarte"**.
 
@@ -68,6 +68,11 @@ a stack of members — and the tile becomes one image with one name.
 
 <Canvas of={AvatarStories.Palette} />
 
+- **Planned:** a Byline part — face · name · time — in migration stage 7.
+
+- `initialsFor(name)` and `hueFor(name)` give the same initials and colour where
+  the part itself cannot be drawn.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.

package/src/Banner.mdx

@@ -27,7 +27,7 @@ line, one of four tones, gone when there is nothing to say.
 - Something that floats over the page and must **not** fade → still
   **Toast**, with `durationMs: 0` and an action. A banner is the strip
   under the header at the app's full width; a floating pill is not one, even
-  a permanent one (Katerina, D21).
+  a permanent one.
 - A standing property of one thing → **Chip** on that thing.
 - More than one action, or a second line of text — that is a different
   component (not in the package yet).
@@ -45,9 +45,8 @@ import { Banner } from '@estiva-app/ui'
 - One line of text, `body-2`. If it needs a **second line**, it has outgrown
   this component.
 - `icon` puts a 16px icon before the line and `action` one small muted Button
-  at the end of it, both in the tone (Katerina, 2026-09-18: Peek's strip above
-  the composer became a Banner, `info`). With either, the banner is one line
-  and the text truncates. One action at most.
+  at the end of it, both in the tone. With either, the banner is one line and
+  the text truncates. One action at most.
 
 <Canvas of={BannerStories.WithIconAndAction} />
 
@@ -57,7 +56,7 @@ import { Banner } from '@estiva-app/ui'
 </Banner>
 ```
 
-- `onDismiss` adds an ✕ at the right-hand end (Katerina, D21). Use it where
+- `onDismiss` adds an ✕ at the right-hand end. Use it where
   the reader decides the notice is done with, rather than the app. The row
   is 40px rather than 36px with it, because the button is taller than the
   line of text; without it, nothing about the strip changes.

package/src/Breadcrumb.mdx

@@ -56,6 +56,8 @@ import { Breadcrumb } from '@estiva-app/ui'
   `min-w-0` container so it can truncate at all.
 - The separators are `aria-hidden` — the trail reads as its places.
 
+- 6px between each place and its separator.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.

package/src/Button.mdx

@@ -6,7 +6,7 @@ import * as ButtonStories from './Button.stories'
 # Button
 
 The push-button for an action: a verb, clicked once — "Create", "Save",
-"Delete project". Four variants on one geometry: 32px default / 24px small,
+"Delete". Four variants on one geometry: 32px default / 24px small,
 6px radius, medium weight.
 
 <Canvas of={ButtonStories.AllVariants} />
@@ -67,7 +67,7 @@ import { IconPlus } from '@tabler/icons-react'
   has the same look.
 - **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`).
 
 ## What it owns
 
@@ -78,6 +78,7 @@ It does these by itself. Write none of them around it.
 | Says what it is to assistive technology: a button | `role="button"` | ✓ |
 | Is reachable with Tab, also when it is disabled with a reason | a `tabIndex` | ✓ |
 | Presses on Enter and Space, and does nothing while disabled | a key handler |  |
+| Keeps its 32px (24px small) in a scrolling column | `shrink-0` |  |
 
 ## Keys
 

package/src/Button.tsx

@@ -86,8 +86,8 @@ export function Button({
           // this package's own story frames, each of which asks for the top.
           // A control does not get to decide where its caller puts it.
           'inline-flex items-center justify-center gap-1 rounded-md transition-colors font-sans font-medium',
-          size === 'default' && 'h-8 text-btn-default',
-          size === 'small' && 'h-6 text-btn-small',
+          size === 'default' && 'h-8 min-h-8 text-btn-default',
+          size === 'small' && 'h-6 min-h-6 text-btn-small',
           // Extra right padding beside a leading icon, for optical balance.
           size === 'default' && (hasLeadingIcon ? 'pl-2 pr-3' : 'px-2'),
           size === 'small' && (hasLeadingIcon ? 'pl-1.5 pr-2' : 'px-1.5'),

package/src/Card.mdx

@@ -12,6 +12,8 @@ hairline. What goes inside, and the space around it, is yours.
 
 ## When
 
+- **It draws no padding and no layout**: both are yours.
+
 A box is a card when it stands for **one thing you could name**, and there are
 many of it or you treat the whole box as that thing — open it, point at it,
 move it.
@@ -73,9 +75,11 @@ import { Card } from '@estiva-app/ui'
   picture that runs edge to edge. Without it their square corners show.
 - **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). What is inside the card is yours: its padding and its words go on
+  shadow is refused by the lint (`estiva/no-restyled-part`). What is inside the card is yours: its padding and its words go on
   your own element inside.
 
+- **Planned:** the inside layout of a linked object's card, in migration stage 7.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.

package/src/Checkbox.mdx

@@ -88,6 +88,7 @@ It does these by itself. Write none of them around it.
 | Says what it is to assistive technology: a checkbox, ticked or not | `role="checkbox"` or `aria-checked` | ✓ |
 | Toggles on Space and on a click; Enter is left to the form | a click or key handler |  |
 | Is one Tab stop, in a `row` too | a `tabIndex` on the row |  |
+| Keeps a `row`'s 40px in a scrolling column | `shrink-0` |  |
 
 ## Keys
 

package/src/ChipInput.mdx

@@ -66,7 +66,7 @@ import { ChipInput } from '@estiva-app/ui'
 ```
 
 - **`InputChip` on its own** names its ✕ `Remove <label>`. Where the ✕ does
-  something else, say what with `removeLabel` (a scope chip: "Leave Ship").
+  something else, say what with `removeLabel` (a chip for a group you belong to: "Leave Design").
 - To cap a long label, give the chip a `max-w-*` and `truncate`: the label is
   cut and the ✕ keeps its size. `truncate` is off unless asked, because
   cutting clips a letter's soft edge by up to 4px at 1x even when the label

package/src/CollapsibleSection.mdx

@@ -14,11 +14,11 @@ toggle, and the rows under it, sliding shut and open.
 ## When
 
 - A group of rows in a sidebar or a panel that the reader may want out of
-  the way — projects, folders, starred items.
+  the way — starred items, recent places.
 - `defaultOpen={false}` for a group that starts folded.
 - `storageKey` when the section should stay how the reader left it across
   reloads: this browser remembers, under that key. The app prefixes the
-  key (`ship.sidebar.projects`).
+  key (`app.sidebar.starred`).
 - `open` + `onOpenChange` when the app owns the state.
 - `actions` for add, sort, filter beside the title — SectionHeader's,
   revealed on hover or focus.
@@ -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**.
@@ -41,7 +41,7 @@ composition lives:
 ```tsx
 import { CollapsibleSection, NavItem } from '@estiva-app/ui'
 
-<CollapsibleSection title="Projects" storageKey="app.sidebar.projects" className="mt-2 shrink-0" contentClassName="gap-px">
+<CollapsibleSection title="Starred" storageKey="app.sidebar.starred" className="mt-2 shrink-0" contentClassName="gap-px">
   <NavItem href="/p/1" label="Item one" />
   <NavItem href="/p/2" label="Item two" />
 </CollapsibleSection>

package/src/ConfirmDialog.mdx

@@ -45,7 +45,7 @@ import { ConfirmDialog } from '@estiva-app/ui'
   dialog open — your surface has said why; a resolved `void`/`true`
   closes it.
 - **Escape cancels; a press on the backdrop does not.** This is Base UI's
-  `AlertDialog`, through the shell's `alert` (Katerina, D20, 2026-09-07): a
+  `AlertDialog`, through the shell's `alert`: a
   destructive question is answered rather than clicked away. The backdrop
   used to cancel, and that is the one behaviour stage 3 deliberately changed.
 - It announces itself as an alert (`role="alertdialog"`), so a screen reader
@@ -71,7 +71,7 @@ Different from `DialogShell`'s in one row, and it is the row that matters.
 | Input | What happens |
 |---|---|
 | Escape | cancels |
-| backdrop click | **nothing** — the question has to be answered (D20) |
+| backdrop click | **nothing** — the question has to be answered |
 | close button | cancels |
 | Tab / Shift+Tab | cycles the controls inside the card, and cannot leave it |
 | on close | focus returns to whatever opened it |

package/src/ContainerHeader.mdx

@@ -7,8 +7,7 @@ import * as ContainerHeaderStories from './ContainerHeader.stories'
 
 The bar across the top of a column — a list, a thread, a side panel: its
 title, and the buttons that act on the whole column at the right edge. 48px,
-with a hairline under it. Peek's ContainerHeader, moved into the package as it
-looks (Katerina, 2026-09-18).
+with a hairline under it.
 
 <Canvas of={ContainerHeaderStories.WithActions} />
 
@@ -26,6 +25,11 @@ looks (Katerina, 2026-09-18).
 - The top of the whole app → **TopBar**.
 - A dialog's title → **DialogShell** draws its own.
 
+- A row you draw yourself at the top of a column — your own padding and a line
+  under it → this part. Its numbers are every column's.
+- A whole list column, header and scrolling list → **ListColumn**, which draws
+  this bar at its top.
+
 ## How
 
 ```tsx
@@ -53,7 +57,12 @@ import { ContainerHeader, IconButton } from '@estiva-app/ui'
 
 ## What it owns
 
-Nothing. It only draws. Clicks and keys are yours.
+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's bar: 48px tall, the title 20px in at 14px medium, the actions 16px from the right, a hairline under it | a row of your own with padding and a border |  |
+| Keeps its 48px in a scrolling column | `shrink-0` |  |
 
 ## Props
 

package/src/DialogShell.mdx

@@ -71,7 +71,7 @@ import { DialogShell, Button } from '@estiva-app/ui'
   worth setting where typing is the point — the trap decides where focus
   *cannot* go, not where it starts.
 - `alert` for a question that has to be answered: a press on the backdrop
-  stops closing it (Katerina, D20). Escape and the ✕ still do.
+  stops closing it. Escape and the ✕ still do.
   `ConfirmDialog` sets it; a form or a roster should not.
 
 ## What it owns

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,6 +49,8 @@ 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.
+
 ## What it owns
 
 It does these by itself. Write none of them around it.
@@ -56,6 +58,7 @@ It does these by itself. Write none of them around it.
 | It does | So you never write | Refused when written by hand |
 |---|---|---|
 | Says what it is to assistive technology: a separator | `role="separator"` | ✓ |
+| Keeps its 1px line in a scrolling column | `shrink-0` |  |
 
 ## Props
 

package/src/EditableText.mdx

@@ -13,6 +13,9 @@ edit is never silently lost.
 
 ## When
 
+- **It has no size of its own.** Give it the size of the text it stands in for —
+  a pane title's `text-body-2-strong` — on your element around it; the text and
+  the field both take it.
 - A title or description edited where it is shown — no dialog, no separate
   form.
 - A reader who cannot write gets `readOnly` — the value without the edit
@@ -55,7 +58,9 @@ import { EditableText } from '@estiva-app/ui'
 - **Its text size is where it sits**, like `Person`'s: put `text-h2` on your own
   element around it, and the text and the field both take it (a field inherits
   the page's font). `className` places it — `-mx-2` to line its text up with
-  a header's inset — and a size passed there is refused by the lint (UIG-9).
+  a header's inset — and a size passed there is refused by the lint.
+
+- **Planned:** rich text edited where it is shown (UIG-30).
 
 ## What it owns
 

package/src/EmptyState.mdx

@@ -57,14 +57,14 @@ import { EmptyState } from '@estiva-app/ui'
 
 **When there is one thing to do about it, give it as `action`.** It is drawn
 16px under the line as the package's Button, outlined — the same look wherever
-it appears (Katerina, 2026-09-18). Never put a Button beside an EmptyState in a
+it appears. Never put a Button beside an EmptyState in a
 box of your own: the box places it, and no two boxes place it alike. A `page`
 only; a section's line takes no action.
 
 <Canvas of={EmptyStateStories.WithAction} />
 
 ```tsx
-<EmptyState icon={<IconMessagePlus size={16} stroke={1.5} />} message="No topics yet." action={{ label: 'New topic', onClick: openNewTopic }} />
+<EmptyState icon={<IconMessagePlus size={16} stroke={1.5} />} message="Nothing here yet." action={{ label: 'Create', onClick: create }} />
 ```
 
 **Put a section's empty state inside the box its rows live in, and give it no