@estiva-app/ui 0.24.1 → 0.26.0

package/src/AttachmentCard.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState, type ComponentPropsWithRef, type FC } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState, type ComponentPropsWithRef, type FC } from 'react'
 import { Button as BaseButton } from '@base-ui/react/button'
 import {
   IconAlertCircle,
@@ -19,6 +19,7 @@ import {
 } from '@tabler/icons-react'
 import { Card } from './Card'
 import { IconButton } from './IconButton'
+import { Lightbox } from './Lightbox'
 import { Link } from './Link'
 import { WithTooltip, type WithTooltipProps } from './Tooltip'
 import { cn } from './cn'
@@ -29,10 +30,17 @@ import { cn } from './cn'
  * Peek's two attachment components, class for class (UIG-27, Katerina's ruling
  * of 14 September that both apps draw one): `FileAttachmentCard`, the card on
  * something already posted, and `PendingAttachmentChip`, the card in a composer
- * waiting to go. What stays in each app is what only the app can do: fetch the
- * bytes with the reader's own permission, open an image full screen, save a
- * file. The card is told the result — a `src`, an `href`, a `state` — and hands
- * a click back through `onOpen`, `onDownload` and `onRemove`.
+ * waiting to go. The card is told the result — a `src`, an `href`, a `state` —
+ * and hands a click back through `onOpen`, `onDownload` and `onRemove`.
+ *
+ * **It now does the rest of the job too** (UIG-35, Katerina 20 September):
+ * given a `remoteSrc` and the app's `fetchImage`, it fetches a file the reader
+ * needs permission for and draws the wait and the refusal; it opens a picture
+ * full screen in the package's `Lightbox`; and with `download` it saves the
+ * file. Peek and Ship had each written those three around it, 174 and 181 lines
+ * that did the same things differently — Ship's pictures never opened at all.
+ * What stays an app's is the one thing only it knows: how to fetch with its own
+ * authorization.
  *
  * Two shapes, decided by the file: an **image** with a picture is a 180px
  * thumbnail you can open; anything else is a 240px **row** — a type tile, the
@@ -144,10 +152,45 @@ export interface AttachmentCardProps extends Omit<ComponentPropsWithRef<'div'>,
   href?: string
   /** The picture an image card draws. Without it an image is drawn as a row. */
   src?: string
-  /** What a click on an image's picture does — the app's full-screen view. */
+  /**
+   * What the picture shows, where the sender said — Ship carries one on every
+   * `imeta`. It is what a screen reader reads and what the viewer is named
+   * with; `name` is still the file's name, under the thumbnail. Without it the
+   * name does both jobs.
+   */
+  alt?: string
+  /**
+   * A file the app has to *fetch* before it can be used — one on a relay, where
+   * reading it needs the reader's own authorization (UIG-35). Give `fetchImage`
+   * with it. For a picture the card waits, draws it, and says so if it cannot
+   * be read, so no app writes that state machine again; for a document the
+   * result is where the row opens, and until it lands the row is dimmed rather
+   * than pretending to open. Ignored when `src` is set.
+   */
+  remoteSrc?: string
+  /**
+   * The full-size picture, fetched only when someone opens it. A thread of
+   * screenshots would otherwise pull every original at full size to draw them
+   * at 112px. Until it arrives the viewer shows the thumbnail.
+   */
+  remoteFullSrc?: string
+  /** How this app fetches a picture it is allowed to read: a URL in, a URL the
+   *  browser can draw out (an object URL, usually). */
+  fetchImage?: (url: string) => Promise<string>
+  /**
+   * What a click on an image's picture does. Without it the card **opens the
+   * picture itself**, full screen, in the package's `Lightbox` — which is what
+   * both apps wanted and one of them had written by hand.
+   */
   onOpen?: () => void
   /** Shows a download control on hover or focus, and calls this. */
   onDownload?: () => void
+  /**
+   * Shows the download control and **saves the file itself**, under `name`:
+   * the original where there is one (`remoteFullSrc`), otherwise what the card
+   * is drawing. Use `onDownload` instead when the app must do it another way.
+   */
+  download?: boolean
   /** Waiting to be sent: the composer's 200px row, with a remove control on its corner. */
   pending?: boolean
   /** Removes a pending card. */
@@ -163,14 +206,89 @@ export interface AttachmentCardProps extends Omit<ComponentPropsWithRef<'div'>,
   noteHint?: string
 }
 
+/**
+ * A picture that has to be fetched before it can be drawn.
+ *
+ * The result remembers which URL it is *about*, so an answer about a file this
+ * card is no longer showing is ignored during render rather than erased in an
+ * effect afterwards — setting state synchronously in an effect is a second
+ * render every time the card is handed a different file. Peek and Ship had
+ * written this hook once each; it lives here now (UIG-35).
+ */
+function useRemoteImage(url: string | undefined, fetchImage?: (url: string) => Promise<string>) {
+  const [result, setResult] = useState<{ for?: string; src?: string; failed?: boolean }>({})
+  // The fetcher is an app's function and is usually written inline, so it is
+  // read through a ref: a new identity on every render must not re-fetch.
+  const fetcher = useRef(fetchImage)
+  fetcher.current = fetchImage
+  useEffect(() => {
+    if (!url || !fetcher.current) return
+    let live = true
+    fetcher.current(url).then(
+      (src) => {
+        if (live) setResult({ for: url, src })
+      },
+      () => {
+        if (live) setResult({ for: url, failed: true })
+      },
+    )
+    return () => {
+      live = false
+    }
+  }, [url])
+  const current = result.for === url
+  return { src: current ? result.src : undefined, failed: current ? !!result.failed : false }
+}
+
+/** Save a file under its own name: its bytes' object URL, handed to a
+ *  temporary `<a download>`. Falls back to opening it when the fetch is
+ *  refused — a cross-origin file the browser will not hand over. */
+async function saveFile(source: string, name: string): Promise<void> {
+  /*
+    Bytes already in hand — an object URL from the app's own fetch, or a data
+    URL — go straight to the anchor. Fetching them again would ask the browser
+    to re-read a blob it is already holding, and `fetch` on a `blob:` URL is
+    exactly what a jsdom test cannot do either.
+  */
+  if (source.startsWith('blob:') || source.startsWith('data:')) {
+    handToAnchor(source, name)
+    return
+  }
+  try {
+    const res = await fetch(source)
+    if (!res.ok) throw new Error(String(res.status))
+    const objectUrl = URL.createObjectURL(await res.blob())
+    handToAnchor(objectUrl, name)
+    URL.revokeObjectURL(objectUrl)
+  } catch {
+    // A file the browser will not hand over is opened instead, which is the
+    // only other thing a person can do with it.
+    window.open(source, '_blank', 'noopener')
+  }
+}
+
+function handToAnchor(url: string, name: string) {
+  const a = document.createElement('a')
+  a.href = url
+  a.download = name
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+
 export function AttachmentCard({
   name,
   size,
   contentType,
   href,
   src,
+  alt,
+  remoteSrc,
+  remoteFullSrc,
+  fetchImage,
   onOpen,
   onDownload,
+  download = false,
   pending = false,
   onRemove,
   state = 'ready',
@@ -182,6 +300,60 @@ export function AttachmentCard({
   const image = isImage(name, contentType)
   const sizeText = size === undefined ? '' : formatBytes(size)
 
+  /*
+    The picture, and the state that goes with fetching one. A `src` the app
+    already has needs none of this; `remoteSrc` is the case where reading the
+    file is a request, with a wait and a way to fail.
+  */
+  const remote = useRemoteImage(src ? undefined : remoteSrc, fetchImage)
+  const picture = image ? (src ?? remote.src) : undefined
+  const fetching = !src && !!remoteSrc && !!fetchImage
+  /*
+    The wait and the refusal are drawn for a **picture**. A document that has to
+    be fetched keeps the row it always had and simply has nowhere to open yet:
+    its name, its type and its size are already on screen and are what the
+    reader is looking at, where an image without its bytes is a blank card.
+  */
+  const drawnState: AttachmentCardState =
+    state !== 'ready' ? state : image && fetching ? (remote.failed ? 'unreadable' : picture ? 'ready' : 'loading') : state
+  // Where a document opens: what the app passed, or the bytes it fetched.
+  const address = href ?? (!image && fetching ? remote.src : undefined)
+
+  // Full screen. The original is fetched only once somebody opens it, and the
+  // thumbnail stands in until it arrives: a moment of a smaller picture beats a
+  // moment of an empty screen.
+  const [opened, setOpened] = useState(false)
+  const full = useRemoteImage(opened ? remoteFullSrc : undefined, fetchImage)
+  const openable = image && !!picture && !pending
+  const openPicture = onOpen ?? (openable ? () => setOpened(true) : undefined)
+  const viewer =
+    opened && picture ? <Lightbox src={full.src ?? picture} alt={alt ?? name} onClose={() => setOpened(false)} /> : null
+
+  /*
+    Saving. `download` is the card doing it, which is what both apps were doing
+    around it; `onDownload` stays for an app that must do it another way. The
+    original is saved where there is one — never the thumbnail on screen — and
+    it is fetched here rather than reusing the viewer's copy, so a file can be
+    saved without ever being opened.
+  */
+  const saveHere = download
+    ? () => {
+        const source = remoteFullSrc ?? remoteSrc
+        if (source && fetchImage) {
+          void fetchImage(source).then(
+            (resolved) => saveFile(resolved, name),
+            // Without this a refused read is an unhandled rejection in the page
+            // rather than a download that did not happen.
+            () => {},
+          )
+          return
+        }
+        const local = address ?? picture
+        if (local) void saveFile(local, name)
+      }
+    : undefined
+  const saving = onDownload ?? saveHere
+
   if (pending) {
     const failed = state === 'failed'
     const warning = state === 'warning'
@@ -236,7 +408,7 @@ export function AttachmentCard({
   }
 
   // Fades in with the card's hover or keyboard focus, and keeps its slot when hidden, so revealing it never shifts the row.
-  const download = onDownload ? (
+  const downloadControl = saving ? (
     // @estiva-escape: Download shows when its card is pointed at or focused, AttachmentCard's own action; IconButton has no reveal on its card's hover (UIG-9, Katerina 17 September)
     <IconButton
       variant="muted"
@@ -245,14 +417,14 @@ export function AttachmentCard({
       className="opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 transition-opacity"
       onClick={(event) => {
         event.stopPropagation()
-        onDownload()
+        saving()
       }}
     >
       <IconDownload size={16} stroke={1.5} />
     </IconButton>
   ) : null
 
-  if (state === 'loading') {
+  if (drawnState === 'loading') {
     return (
       // `role="status"`: a plain box may not carry a name (axe, aria-prohibited-attr), and a
       // status says what it is doing — loading — to a reader that cannot see the pulse.
@@ -263,7 +435,7 @@ export function AttachmentCard({
     )
   }
 
-  if (state === 'unreadable') {
+  if (drawnState === 'unreadable') {
     return (
       // @estiva-escape: a file that could not be read is faded as well as dashed, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
       <Card fill="inset" unreadable className={cn('flex items-center gap-2 w-[240px] p-1.5 opacity-70', className)} {...props}>
@@ -278,30 +450,33 @@ export function AttachmentCard({
     )
   }
 
-  if (image && src) {
-    const picture = <img src={src} alt={name} className="w-full h-28 object-cover" />
+  if (image && picture) {
+    const thumbnail = <img src={picture} alt={alt ?? name} className="w-full h-28 object-cover" />
     return (
-      <Card fill="inset" hover="hairline" clip className={cn('group relative flex flex-col w-[180px]', className)} {...props}>
-        {onOpen ? (
-          <BaseButton
-            type="button"
-            className="block w-full"
-            aria-label={`Preview ${name}`}
-            onClick={(event) => {
-              event.stopPropagation()
-              onOpen()
-            }}
-          >
-            {picture}
-          </BaseButton>
-        ) : (
-          <div className="block w-full">{picture}</div>
-        )}
-        <div className="flex items-center gap-1 pl-2 pr-1 py-1 min-w-0">
-          <Truncating text={name} className="flex-1 text-caption text-text-primary truncate" wrapperClassName="flex-1" />
-          {download}
-        </div>
-      </Card>
+      <>
+        <Card fill="inset" hover="hairline" clip className={cn('group relative flex flex-col w-[180px]', className)} {...props}>
+          {openPicture ? (
+            <BaseButton
+              type="button"
+              className="block w-full"
+              aria-label={`Preview ${name}`}
+              onClick={(event) => {
+                event.stopPropagation()
+                openPicture()
+              }}
+            >
+              {thumbnail}
+            </BaseButton>
+          ) : (
+            <div className="block w-full">{thumbnail}</div>
+          )}
+          <div className="flex items-center gap-1 pl-2 pr-1 py-1 min-w-0">
+            <Truncating text={name} className="flex-1 text-caption text-text-primary truncate" wrapperClassName="flex-1" />
+            {downloadControl}
+          </div>
+        </Card>
+        {viewer}
+      </>
     )
   }
 
@@ -318,15 +493,15 @@ export function AttachmentCard({
   )
   return (
     // @estiva-escape: a file that cannot be opened is faded, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
-    <Card fill="inset" hover={href ? 'hairline' : 'none'} className={cn('group flex items-center gap-2 w-[240px] p-1.5 pr-1', !href && 'opacity-70', className)} {...props}>
-      {href ? (
-        <Link href={href} external variant="plain" className="flex items-center gap-2 min-w-0 flex-1" onClick={(event) => event.stopPropagation()}>
+    <Card fill="inset" hover={address ? 'hairline' : 'none'} className={cn('group flex items-center gap-2 w-[240px] p-1.5 pr-1', !address && 'opacity-70', className)} {...props}>
+      {address ? (
+        <Link href={address} external variant="plain" className="flex items-center gap-2 min-w-0 flex-1" onClick={(event) => event.stopPropagation()}>
           {body}
         </Link>
       ) : (
         <div className="flex items-center gap-2 min-w-0 flex-1">{body}</div>
       )}
-      {download}
+      {downloadControl}
     </Card>
   )
 }

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
+  }
+}