@estiva-app/ui 0.30.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.30.0",
+  "version": "0.32.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,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.30.0",
+    "packageVersion": "0.32.0",
     "exports": 87,
     "typeExports": 96,
     "files": null

package/src/CommandPalette.tsx

@@ -553,6 +553,7 @@ export function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWa
 
   return (
     <div ref={frameRef} tabIndex={-1} onKeyDown={onKeyDown} onFocus={measure} onBlur={measure} onInput={measure} className="flex min-h-0 flex-col outline-none">
+      {/* @estiva-escape: the palette's own input bar, the twin of its search row; the level chip stands where the field was */}
       <div className="flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5">
         {icon != null && <span className="flex shrink-0 items-center text-text-secondary">{icon}</span>}
         <LevelChip chip={chip} onBack={back} />

package/src/ContainerHeader.mdx

@@ -23,10 +23,11 @@ with a hairline under it.
 - One section inside a column → **SectionHeader**, the 32px row with a
   SectionLabel.
 - The top of the whole app → **TopBar**.
-- A dialog's title → **DialogShell** draws its own.
+- A dialog's title → **DialogShell**, which draws this bar with the dialog's own 18px title.
 
 - 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.
+  under it → this part. Its numbers are every column's. The lint refuses the
+  hand-made row (`estiva/no-handmade-header`).
 - A whole list column, header and scrolling list → **ListColumn**, which draws
   this bar at its top.
 

package/src/DialogShell.tsx

@@ -3,6 +3,7 @@ import { Dialog } from '@base-ui/react/dialog'
 import { AlertDialog } from '@base-ui/react/alert-dialog'
 import { IconX } from '@tabler/icons-react'
 import { cn } from './cn'
+import { ContainerHeader } from './ContainerHeader'
 import { IconButton } from './IconButton'
 import { ScrollArea } from './ScrollArea'
 
@@ -113,14 +114,17 @@ export function DialogShell({ title, onClose, headerContent, footer, children, b
             className="bg-bg-elevated border border-border-subtle rounded-lg shadow-lg pointer-events-auto flex flex-col overflow-hidden outline-none"
             style={{ width }}
           >
-            {/* Header */}
-            <div className="h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0">
-              {headerContent ?? (
-                <Parts.Title className="text-h4 text-text-primary" render={<span />}>
-                  {title}
-                </Parts.Title>
-              )}
-              {/*
+            {/* Header: the package's one header bar, with the dialog's own title in it (UIG-22). */}
+            <ContainerHeader
+              title={
+                headerContent ?? (
+                  <Parts.Title className="text-h4 text-text-primary" render={<span />}>
+                    {title}
+                  </Parts.Title>
+                )
+              }
+              actions={
+                /*
                 The ✕ IS the `Close` part now, rather than a button that calls
                 `onClose` beside one (stage 4, 2026-09-07). Stage 3 could not do
                 this: an `IconButton` carrying a `tooltip` returned the tooltip
@@ -131,15 +135,16 @@ export function DialogShell({ title, onClose, headerContent, footer, children, b
                 What it buys: the dialog closes through its own state machine,
                 so the ✕, Escape and the outside press are one path with one
                 reason attached, instead of one of the three going around.
-              */}
-              <Parts.Close
-                render={
-                  <IconButton tooltip="Close" aria-label="Close">
-                    <IconX size={16} stroke={1.5} />
-                  </IconButton>
-                }
-              />
-            </div>
+              */
+                <Parts.Close
+                  render={
+                    <IconButton tooltip="Close" aria-label="Close">
+                      <IconX size={16} stroke={1.5} />
+                    </IconButton>
+                  }
+                />
+              }
+            />
 
             {/* Body. With a cap it scrolls in the package's bar: the cap goes
                 on the viewport (ScrollArea's rule — on the region the viewport

package/src/EmptyState.mdx

@@ -83,7 +83,9 @@ padding by hand, and is left behind the day the box changes.
 
 The message is the caller's — a shared component has no words of its own
 for what is missing. A hand-written "Nothing here" paragraph or span in a
-section is the `section` manner, and becomes it.
+section is the `section` manner, and becomes it. The lint refuses one
+(`estiva/no-handmade-empty-state`): a line of words that shows in place of an
+empty list, whatever it says.
 
 ## What it owns
 
@@ -91,7 +93,8 @@ It does these by itself. Write none of them around it.
 
 | It does | So you never write | Refused when written by hand |
 |---|---|---|
-| As a `page`, fills the room it is given and centres itself in it | centring, or padding around it |  |
+| As a `page`, fills the room it is given and centres itself in it | centring, or padding around it | a `page` inside a `ScrollArea`, where it cannot centre (`estiva/no-handmade-empty-state`) |
+| Says a list is empty, in place of its rows | a paragraph or span of your own saying so | `estiva/no-handmade-empty-state` |
 | Draws its one action, an outlined Button, under the line when you pass `action` | a button of your own under the line |  |
 
 ## Props

package/src/FilePicker.stories.tsx

@@ -4,6 +4,7 @@ import { useRef, useState } from 'react'
 import { Button } from './Button'
 import { FilePicker } from './FilePicker'
 import { IconButton } from './IconButton'
+import { EmptyState } from './EmptyState'
 
 const meta = {
   title: 'Inputs/FilePicker',
@@ -20,9 +21,12 @@ type Story = StoryObj<typeof meta>
 
 /** What was chosen, one line per pick, so choosing the same file twice shows twice. */
 function Picks({ picks }: { picks: string[] }) {
+  if (picks.length === 0) return <EmptyState scope="section" message="Nothing chosen yet." />
   return (
     <ul className="flex flex-col gap-1 text-body-2 text-text-secondary">
-      {picks.length === 0 ? <li>Nothing chosen yet.</li> : picks.map((pick, i) => <li key={i}>{pick}</li>)}
+      {picks.map((pick, i) => (
+        <li key={i}>{pick}</li>
+      ))}
     </ul>
   )
 }

package/src/ReactionPicker.stories.tsx

@@ -5,6 +5,7 @@ import { Popover } from './Popover'
 import { Reaction } from './Reaction'
 import { ReactionPicker, type ReactionOption } from './ReactionPicker'
 import { Toolbar, ToolbarButton } from './Toolbar'
+import { EmptyState } from './EmptyState'
 
 /**
  * The reactions on offer, to choose one from. **A `Reaction` is the answer;
@@ -98,7 +99,7 @@ export const AndWhatItProduces: Story = {
         />
         <div className="flex flex-wrap items-center gap-1.5">
           {mine.length === 0 ? (
-            <span className="text-caption text-text-muted">Nothing here yet.</span>
+            <EmptyState scope="section" message="Nothing here yet." />
           ) : (
             mine.map((emoji) => {
               const option = OPTIONS.find((o) => o.emoji === emoji)!

package/src/eslint/index.test.ts

@@ -37,6 +37,8 @@ describe('the plugin object', () => {
       'no-raw-element',
       'no-rebuilt-behaviour',
       'no-restyled-part',
+      'no-handmade-header',
+      'no-handmade-empty-state',
       'raw-element-outside-a-wrapper',
       'no-hand-rolled-behaviour',
       'component-has-a-page',
@@ -56,17 +58,19 @@ describe('the plugin object', () => {
   it('gives an app only the app rules, as errors, under estiva/', () => {
     for (const config of [estiva.configs.recommended, estiva.configs.strict]) {
       expect(config.plugins?.[PLUGIN_KEY]).toBe(estiva)
-      expect(config.rules).toEqual({ 'estiva/no-raw-element': 'error', 'estiva/no-rebuilt-behaviour': 'error', 'estiva/no-restyled-part': 'error' })
+      expect(config.rules).toEqual({ 'estiva/no-raw-element': 'error', 'estiva/no-rebuilt-behaviour': 'error', 'estiva/no-restyled-part': 'error', 'estiva/no-handmade-header': 'error', 'estiva/no-handmade-empty-state': 'error' })
     }
-    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-element', 'estiva/no-rebuilt-behaviour', 'estiva/no-restyled-part'])
+    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-element', 'estiva/no-rebuilt-behaviour', 'estiva/no-restyled-part', 'estiva/no-handmade-header', 'estiva/no-handmade-empty-state'])
   })
 
   /**
-   * `no-restyled-part` is the one rule in both sets (UIG-9): the package restyles
-   * none of its own parts either (Katerina, 17 September). Every other inward
-   * rule still reaches no app.
+   * `no-restyled-part` (UIG-9), `no-handmade-header` (UIG-22) and
+   * `no-handmade-empty-state` (UIG-23) are in both sets: the package restyles
+   * none of its own parts either (Katerina, 17 September), and draws no header
+   * bar or empty state by hand ("my review isn't enough", 23 September). Every
+   * other inward rule still reaches no app.
    */
-  it('gives this package its own set, as errors, and only the shared rule reaches an app config', () => {
+  it('gives this package its own set, as errors, and only the shared rules reach an app config', () => {
     expect(estiva.configs.package.plugins?.[PLUGIN_KEY]).toBe(estiva)
     expect(estiva.configs.package.rules).toEqual({
       'estiva/raw-element-outside-a-wrapper': 'error',
@@ -74,9 +78,11 @@ describe('the plugin object', () => {
       'estiva/component-has-a-page': 'error',
       'estiva/component-has-a-story': 'error',
       'estiva/no-restyled-part': 'error',
+      'estiva/no-handmade-header': 'error',
+      'estiva/no-handmade-empty-state': 'error',
     })
     expect(PACKAGE_RULE_IDS).toEqual(Object.keys(estiva.configs.package.rules ?? {}))
-    for (const id of PACKAGE_RULE_IDS.filter((id) => id !== 'estiva/no-restyled-part')) {
+    for (const id of PACKAGE_RULE_IDS.filter((id) => !['estiva/no-restyled-part', 'estiva/no-handmade-header', 'estiva/no-handmade-empty-state'].includes(id))) {
       expect(estiva.configs.recommended.rules?.[id]).toBeUndefined()
       expect(estiva.configs.strict.rules?.[id]).toBeUndefined()
     }
@@ -143,8 +149,8 @@ describe('countGates', () => {
   it('counts an error, and an escape only when the lint reports escapes', async () => {
     const code = component('    <div>\n      <button>x</button>\n      {/* @estiva-escape: a preview drawn from its own palette */}\n      <button>y</button>\n    </div>')
     const none = { errors: 0, warnings: 0, escapes: 0 }
-    expect(countGates(await lint(code)).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 0 }, 'estiva/no-rebuilt-behaviour': none, 'estiva/no-restyled-part': none })
-    expect(countGates(await lint(code, [countMode])).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 1 }, 'estiva/no-rebuilt-behaviour': none, 'estiva/no-restyled-part': none })
+    expect(countGates(await lint(code)).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 0 }, 'estiva/no-rebuilt-behaviour': none, 'estiva/no-restyled-part': none, 'estiva/no-handmade-header': none, 'estiva/no-handmade-empty-state': none })
+    expect(countGates(await lint(code, [countMode])).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 1 }, 'estiva/no-rebuilt-behaviour': none, 'estiva/no-restyled-part': none, 'estiva/no-handmade-header': none, 'estiva/no-handmade-empty-state': none })
   })
 
   it('lists a report an eslint-disable silenced, and counts it as neither an error nor an escape', async () => {
@@ -165,6 +171,8 @@ describe('countGates', () => {
     expect(countGates([])).toEqual({
       rules: { 'estiva/no-raw-element': { errors: 0, warnings: 0, escapes: 0 }, 'estiva/no-rebuilt-behaviour': { errors: 0, warnings: 0, escapes: 0 },
         'estiva/no-restyled-part': { errors: 0, warnings: 0, escapes: 0 },
+        'estiva/no-handmade-header': { errors: 0, warnings: 0, escapes: 0 },
+        'estiva/no-handmade-empty-state': { errors: 0, warnings: 0, escapes: 0 },
       },
       disabled: [],
     })

package/src/eslint/index.ts

@@ -20,6 +20,8 @@ import { createRequire } from 'node:module'
 import type { ESLint, Linter } from 'eslint'
 import { componentHasAPage, componentHasAStory } from './has-a-page-and-a-story'
 import { noHandRolledBehaviour } from './no-hand-rolled-behaviour'
+import { noHandmadeEmptyState } from './no-handmade-empty-state'
+import { noHandmadeHeader } from './no-handmade-header'
 import { noRawElement } from './no-raw-element'
 import { noRebuiltBehaviour } from './no-rebuilt-behaviour'
 import { noRestyledPart } from './no-restyled-part'
@@ -44,6 +46,8 @@ const appRules = {
   'no-raw-element': noRawElement,
   'no-rebuilt-behaviour': noRebuiltBehaviour,
   'no-restyled-part': noRestyledPart,
+  'no-handmade-header': noHandmadeHeader,
+  'no-handmade-empty-state': noHandmadeEmptyState,
 }
 
 /**
@@ -58,8 +62,10 @@ const appRules = {
  * app's version, UIG-7), and an app has no `.mdx` pages at all. `index.test.ts` holds the
  * apps' list to exactly the app rules.
  *
- * One rule is in both sets: `no-restyled-part` (UIG-9). The package restyles
- * none of its own parts either (Katerina, 17 September).
+ * Three rules are in both sets: `no-restyled-part` (UIG-9), and the
+ * fingerprints `no-handmade-header` (UIG-22) and `no-handmade-empty-state`
+ * (UIG-23). The package restyles none of its own parts either (Katerina, 17
+ * September), and "my review isn't enough" (23 September).
  */
 const packageRules = {
   'raw-element-outside-a-wrapper': rawElementOutsideAWrapper,
@@ -67,6 +73,8 @@ const packageRules = {
   'component-has-a-page': componentHasAPage,
   'component-has-a-story': componentHasAStory,
   'no-restyled-part': noRestyledPart,
+  'no-handmade-header': noHandmadeHeader,
+  'no-handmade-empty-state': noHandmadeEmptyState,
 }
 
 const rules = { ...appRules, ...packageRules }
@@ -97,6 +105,8 @@ plugin.configs.recommended = {
     [`${PLUGIN_KEY}/no-raw-element`]: 'error',
     [`${PLUGIN_KEY}/no-rebuilt-behaviour`]: 'error',
     [`${PLUGIN_KEY}/no-restyled-part`]: 'error',
+    [`${PLUGIN_KEY}/no-handmade-header`]: 'error',
+    [`${PLUGIN_KEY}/no-handmade-empty-state`]: 'error',
   },
 }
 plugin.configs.strict = {

package/src/eslint/no-handmade-empty-state.test.ts

@@ -0,0 +1,151 @@
+import { mkdirSync, mkdtempSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { dirname, join } from 'node:path'
+import { RuleTester } from 'eslint'
+import { parser } from 'typescript-eslint'
+import { describe, it } from 'vitest'
+import { noHandmadeEmptyState } from './no-handmade-empty-state'
+
+RuleTester.describe = describe
+RuleTester.it = it
+RuleTester.itOnly = it.only
+
+const tester = new RuleTester({
+  languageOptions: { parser, parserOptions: { ecmaFeatures: { jsx: true } } },
+  linterOptions: { reportUnusedDisableDirectives: 'off' },
+})
+
+/**
+ * The wrong-scope half follows the app's components into their files, so its
+ * cases live in a small app on disk, laid out the way Peek's Folders page was at
+ * `7f22e5e~1`: the page scrolls a view drawn in another file.
+ */
+const root = mkdtempSync(join(tmpdir(), 'no-handmade-empty-state-'))
+const write = (path: string, text: string) => {
+  mkdirSync(dirname(join(root, path)), { recursive: true })
+  writeFileSync(join(root, path), text)
+}
+write('app/package.json', '{ "name": "app" }')
+write(
+  'app/src/components/ui/EmptyState.tsx',
+  "import { EmptyState as UiEmptyState, type EmptyStateProps } from '@estiva-app/ui'\nexport function EmptyState({ message = 'Nothing', ...rest }: EmptyStateProps) {\n  return <UiEmptyState message={message} {...rest} />\n}\n",
+)
+// The file conversation, as it arrived in the merge: two page states in a view another file scrolls.
+write(
+  'app/src/components/views/ForeignConversationView.tsx',
+  "import { EmptyState } from '@/components/ui/EmptyState'\nexport function ForeignConversationView({ state }: { state: string[] | 'failed' }) {\n  if (state === 'failed') return <EmptyState message=\"This conversation could not be read.\" />\n  if (state.length === 0) return <EmptyState message=\"Nothing said about this yet.\" />\n  return <div>{state.map((c) => <p key={c}>{c}</p>)}</div>\n}\n",
+)
+// The folder view: its own states are sections; the rows it draws hold a page state two components down.
+write(
+  'app/src/components/views/FolderContentsView.tsx',
+  "import { EmptyState } from '@/components/ui/EmptyState'\nexport function FolderContentsView({ files }: { files: string[] }) {\n  if (files.length === 0) return <EmptyState scope=\"section\" message=\"Nothing in this folder yet.\" />\n  return <div>{files.map((f) => <FileRow key={f} file={f} />)}</div>\n}\nfunction FileRow({ file }: { file: string }) {\n  return <div><p>{file}</p><ChildRows file={file} /></div>\n}\nfunction ChildRows({ file }: { file: string }) {\n  const children: string[] = file ? [] : [file]\n  if (children.length === 0) return <EmptyState message=\"Nothing in this yet.\" />\n  return <>{children.map((c) => <FileRow key={c} file={c} />)}</>\n}\n",
+)
+// Ship's Activity: it hands its className on to a section EmptyState. It is the app's own, and is followed.
+write(
+  'app/src/components/Activity.tsx',
+  "import { EmptyState } from '@estiva-app/ui'\nexport function Activity({ items, className }: { items: string[]; className?: string }) {\n  if (items.length === 0) return <EmptyState scope=\"section\" className={className} message=\"No related conversations yet.\" />\n  return <ul>{items.map((i) => <li key={i}>{i}</li>)}</ul>\n}\n",
+)
+
+const app = join(root, 'app/src/pages/Probe.tsx')
+const component = (body: string) => `export function Probe({ rows, report, answer, choosing }: { rows: string[]; report?: string; answer: false | { text: string; sources: string[] }; choosing: boolean }) {\n${body}\n}\n`
+const jsx = (body: string) => component(`  return (\n${body}\n  )`)
+const scrolled = (imports: string, body: string) =>
+  `import { ScrollArea, EmptyState } from '@estiva-app/ui'\n${imports}\nexport function Probe({ rows }: { rows: string[] }) {\n  return (\n${body}\n  )\n}\n`
+const handmade = [{ messageId: 'handmade' }]
+
+tester.run('no-handmade-empty-state', noHandmadeEmptyState, {
+  valid: [
+    // the part itself
+    { name: 'the part, in place of the list', code: jsx('<div>{rows.length === 0 ? <EmptyState scope="section" message="Nothing here" /> : rows.map((r) => <p key={r}>{r}</p>)}</div>') },
+
+    // UIG-1's two false alarms, which the ticket makes regression tests
+    {
+      name: '"Nothing is created until you submit it." — a hint beside a button (CommandLauncher.tsx:1498)',
+      code: jsx('<>\n<Button>Open the form</Button>\n<span className="text-[12px] text-text-secondary">Nothing is created until you submit it.</span>\n</>'),
+    },
+    {
+      name: '"…this folder has no folder state yet." — a status note, under a condition that asks nothing about a list (FolderContentsView.tsx:101)',
+      code: component('  const folder = { source: "channel" }\n  return (\n<div>\n{folder.source === "channel" && (\n<p className="text-caption text-text-muted">From channel contents; this folder has no folder state yet.</p>\n)}\n{rows.map((r) => <p key={r}>{r}</p>)}\n</div>\n  )'),
+    },
+
+    // the ticket's three ❓, ruled not empty states (GATES.md)
+    {
+      name: '"No comparison yet — it needs one relay fetch." — a debug line for a report not fetched yet (ReadStatePanel.tsx:65)',
+      code: component('  if (!report) return <p className="text-caption text-text-muted">No comparison yet — it needs one relay fetch.</p>\n  return <p>{report}</p>'),
+    },
+    {
+      name: '"No answer came back." — a failure after a request; the other side is an answer, with its sources listed inside it (CommandLauncher.tsx:1514)',
+      code: jsx('<div>{answer === false ? (\n<p className="text-text-secondary">No answer came back. Edit the question and press Enter to try again.</p>\n) : (\n<>\n<p>{answer.text}</p>\n<ol>{answer.sources.map((s) => <li key={s}>{s}</li>)}</ol>\n</>\n)}</div>'),
+    },
+
+    // look-alikes
+    { name: 'the full side of the test: a count', code: jsx('<div>{rows.length > 0 && <span className="font-mono text-caption">{rows.length}</span>}</div>') },
+    { name: 'the full side of the test, with words', code: jsx('<div>{rows.length > 0 && <p className="text-caption">Recent</p>}{rows.map((r) => <p key={r}>{r}</p>)}</div>') },
+    { name: 'the full side of a ternary', code: jsx('<div>{rows.length ? <p>Pick one below.</p> : <Button>Add</Button>}</div>') },
+    {
+      name: 'a status line whose words are a choice (ReactionPicker.stories.tsx:76)',
+      code: component('  const chosen = rows[0]\n  return <span className="text-caption text-text-secondary">{chosen ? `Chose ${chosen}` : "Nothing chosen yet."}</span>'),
+    },
+    { name: 'a paragraph, not a line', code: jsx(`<div>{rows.length === 0 ? <p>${'Nothing here, and a long explanation of why that is and what to do next about it. '.repeat(2)}</p> : rows.map((r) => <p key={r}>{r}</p>)}</div>`) },
+    { name: 'a line that is a value, not words: a message body', code: jsx('<div>{rows.length === 0 ? <p className="pl-8">{report}</p> : rows.map((r) => <p key={r}>{r}</p>)}</div>') },
+    { name: 'a box holding more than the line', code: jsx('<div>{rows.length === 0 ? <div className="px-3"><p>Nothing yet.</p><Button>Add one</Button></div> : rows.map((r) => <p key={r}>{r}</p>)}</div>') },
+    {
+      name: 'an escape with its reason',
+      code: jsx('<div>{rows.length === 0 ? (\n// @estiva-escape: a printed report keeps its own empty line, set in the print style\n<p>Nothing to print.</p>\n) : rows.map((r) => <p key={r}>{r}</p>)}</div>'),
+    },
+
+    // the right scope
+    { name: 'a page state for a whole column, outside any ScrollArea', filename: app, code: scrolled('', '<div className="flex h-full flex-col">{rows.length === 0 ? <EmptyState message="No topics yet." /> : <ScrollArea className="flex-1">{rows.map((r) => <p key={r}>{r}</p>)}</ScrollArea>}</div>') },
+    { name: 'a section state inside a ScrollArea', filename: app, code: scrolled('', '<ScrollArea className="flex-1">{rows.length === 0 ? <EmptyState scope="section" message="No issues yet." /> : null}</ScrollArea>') },
+    { name: 'a page state inside a ScrollArea whose content fills it', filename: app, code: scrolled('', '<ScrollArea className="flex-1" contentClassName="flex min-h-full flex-col">{rows.length === 0 && <EmptyState message="Nothing here yet." />}</ScrollArea>') },
+    { name: 'a scope that is decided at run time is not judged', filename: app, code: scrolled('', '<ScrollArea className="flex-1"><EmptyState scope={rows.length ? "section" : "page"} message="Nothing here yet." /></ScrollArea>') },
+    { name: "a component that hands its className to a section state (Ship's Activity), followed and fine", filename: app, code: scrolled("import { Activity } from '@/components/Activity'", '<ScrollArea className="flex-1" contentClassName="px-6"><section><Activity items={rows} /></section></ScrollArea>') },
+  ],
+  invalid: [
+    // the hand-made line, each way it stands in for a list
+    { name: 'the other side of a map (Ship Board.tsx:61 at 6693025)', code: jsx('<div className="flex flex-col gap-1.5">{rows.length === 0 ? <p className="px-1 py-2 text-caption text-text-muted">Nothing here</p> : rows.map((r) => <p key={r}>{r}</p>)}</div>'), errors: handmade },
+    { name: 'same shape, other class names and another tag (FilePicker.stories.tsx:25)', code: jsx('<ul className="flex flex-col gap-1 text-body-2">{rows.length === 0 ? <li>Nothing chosen yet.</li> : rows.map((r) => <li key={r}>{r}</li>)}</ul>'), errors: handmade },
+    { name: 'a map on the other side is enough, whatever the test', code: jsx('<div>{rows[0] === undefined ? <span className="text-caption">Nothing here yet.</span> : rows.map((r) => <p key={r}>{r}</p>)}</div>'), errors: handmade },
+    { name: 'under a test that the list is empty, in a box around it (CommandLauncher.tsx:1716 at d094006)', code: jsx('<div>{rows.length === 0 && (\n<div className="flex items-center h-12 px-3">\n<span className="text-[14px] text-text-secondary">Nothing for that here.</span>\n</div>\n)}</div>'), errors: handmade },
+    { name: 'returned when the list is empty', code: component('  if (rows.length === 0) return <p className="text-body-2">No tickets in this project yet.</p>\n  return <ul>{rows.map((r) => <li key={r}>{r}</li>)}</ul>'), errors: handmade },
+    { name: "the empty side is the second: `rows.length ? … : …`", code: jsx('<div>{rows.length ? <Rows rows={rows} /> : <p>None yet.</p>}</div>'), errors: handmade },
+    { name: '`!rows.length`', code: jsx('<div>{!rows.length && <p>Nothing to show.</p>}</div>'), errors: handmade },
+    { name: 'optional chaining', code: jsx('<div>{rows?.length === 0 && <p>Nothing in it yet.</p>}</div>'), errors: handmade },
+    {
+      name: "words that do not say \"no\": Peek's dialogs (StartTopicDialog.tsx:106), and a name in the sentence",
+      code: jsx('<Dialog>{choosing && rows.length === 0 ? (\n<p className="text-body-2 text-text-secondary">There is nowhere in {report} to start one yet — make a folder first.</p>\n) : (\n<Form />\n)}</Dialog>'),
+      errors: handmade,
+    },
+    {
+      name: 'an escape with no reason is not an escape',
+      code: jsx('<div>{rows.length === 0 ? (\n// @estiva-escape\n<p>Nothing to print.</p>\n) : rows.map((r) => <p key={r}>{r}</p>)}</div>'),
+      errors: [{ messageId: 'escapeWithoutReason' }, ...handmade],
+    },
+
+    // the wrong scope
+    { name: 'a page state straight inside a ScrollArea', filename: app, code: scrolled('', '<ScrollArea className="min-h-0 flex-1">{rows.length === 0 && <EmptyState message="Nothing here yet." />}</ScrollArea>'), errors: [{ messageId: 'wrongScope' }] },
+    { name: 'scope="page" said out loud', filename: app, code: scrolled('', '<ScrollArea className="flex-1" contentClassName="flex flex-col gap-3 p-4"><EmptyState scope="page" message="Nothing here yet." /></ScrollArea>'), errors: [{ messageId: 'wrongScope' }] },
+    { name: "through the app's wrapper, one box down", filename: app, code: "import { ScrollArea } from '@estiva-app/ui'\nimport { EmptyState } from '@/components/ui/EmptyState'\nexport function Probe() {\n  return <ScrollArea className=\"flex-1\"><div className=\"p-4\"><EmptyState message=\"Nothing said about this yet.\" /></div></ScrollArea>\n}\n", errors: [{ messageId: 'wrongScope' }] },
+    {
+      name: 'the file conversation at 7f22e5e~1: a view drawn in another file, scrolled here — both its states',
+      filename: app,
+      code: scrolled("import { ForeignConversationView } from '@/components/views/ForeignConversationView'", '<ScrollArea className="min-h-0 flex-1">\n<ForeignConversationView state={rows} />\n</ScrollArea>'),
+      errors: [
+        { messageId: 'wrongScopeVia', data: { component: 'ForeignConversationView', where: 'ForeignConversationView.tsx:3' } },
+        { messageId: 'wrongScopeVia', data: { component: 'ForeignConversationView', where: 'ForeignConversationView.tsx:4' } },
+      ],
+    },
+    {
+      name: 'the nested children at 7f22e5e~1: a page state under one row of a list, two components down in another file',
+      filename: app,
+      code: scrolled("import { FolderContentsView } from '@/components/views/FolderContentsView'", '<ScrollArea className="min-h-0 flex-1">\n<FolderContentsView files={rows} />\n</ScrollArea>'),
+      errors: [{ messageId: 'wrongScopeVia', data: { component: 'FolderContentsView', where: 'FolderContentsView.tsx:11' } }],
+    },
+    {
+      name: 'a component in the same file',
+      filename: app,
+      code: "import { ScrollArea, EmptyState } from '@estiva-app/ui'\nfunction Replies({ rows }: { rows: string[] }) {\n  if (rows.length === 0) return <EmptyState message=\"No replies yet.\" />\n  return <>{rows.map((r) => <p key={r}>{r}</p>)}</>\n}\nexport function Probe({ rows }: { rows: string[] }) {\n  return <ScrollArea className=\"flex-1\"><Replies rows={rows} /></ScrollArea>\n}\n",
+      errors: [{ messageId: 'wrongScopeVia', data: { component: 'Replies', where: 'line 3' } }],
+    },
+  ],
+})