@estiva-app/ui 0.31.0 → 0.33.0

package/dist/eslint/no-handmade-empty-state.d.ts

@@ -0,0 +1,25 @@
+import type { Rule } from 'eslint';
+/**
+ * UIG-23: an empty state drawn by hand, or the right part at the wrong scope.
+ *
+ * **A line drawn by hand.** A plain box whose only content is a short line
+ * saying there is nothing ("No tickets yet.") where a list's rows would be: one
+ * side of a condition whose other side maps the list, or under a condition that
+ * asks if something is empty. Both halves are needed. The words alone fire on a
+ * hint and a status note (UIG-1 measured it); the place alone fires on any
+ * line a list shows beside itself.
+ *
+ * **The wrong scope.** A `page`-scope `EmptyState` centres in the room a flex
+ * column gives it. Inside a `ScrollArea` the content box is only as tall as
+ * what is in it, so the state sits at the top of its pane. The rule looks at
+ * the `ScrollArea`'s content and at every component of the app's own placed in
+ * it, following them into their files, because that is how four of them
+ * arrived on Folders in one merge (peek `7f22e5e`): the state was drawn in one
+ * file and scrolled in another. A `contentClassName` with `min-h-full` or
+ * `h-full` gives the state its room, and passes.
+ *
+ * Not judged: the package's `EmptyState` and a part's own lines (a
+ * `FieldLine`, a palette's empty row) — a part is already a part.
+ */
+export declare const noHandmadeEmptyState: Rule.RuleModule;
+//# sourceMappingURL=no-handmade-empty-state.d.ts.map

package/dist/eslint/no-handmade-empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-handmade-empty-state.d.ts","sourceRoot":"","sources":["../../src/eslint/no-handmade-empty-state.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAuPlC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,oBAAoB,EAAE,IAAI,CAAC,UAyEvC,CAAA"}

package/dist/eslint/no-native-title.d.ts

@@ -0,0 +1,31 @@
+import type { Rule } from 'eslint';
+/**
+ * The parts whose `title` is their own: the words of a heading or a dialog,
+ * drawn on the page. Every other part hands a `title` on to its element, and
+ * the browser shows it as its tooltip. `no-native-title.test.ts` holds this
+ * list to the catalogue: a part that gains a `title` of its own joins it.
+ */
+export declare const PARTS_WITH_A_TITLE: readonly ["CollapsibleSection", "ConfirmDialog", "ContainerHeader", "DialogShell", "ListColumn", "SectionHeader"];
+/**
+ * UIG-24: the browser's tooltip where ours belongs.
+ *
+ * A `title` on an element is the browser's hover box: grey, in the system's
+ * font, after a delay nobody chose, and never on a touch screen. The package's
+ * `WithTooltip` is the tooltip here (and `IconButton`'s `tooltip`, which draws
+ * it). The rule reads the attribute, never the page: a tooltip's words are not
+ * on the page until it opens.
+ *
+ * Judged: a `title` on a plain element, and on a part of the package (or an
+ * app's wrapper that hands all its props on to one) whose `title` is not its
+ * own — `<Button title>` reaches the `<button>`. Not judged, on purpose:
+ *
+ * - the `<title>` **element**, in an `<svg>` (a label for a screen reader) or
+ *   a document's head: an element, not an attribute, so the rule never sees it;
+ * - a part whose `title` is its own heading (`PARTS_WITH_A_TITLE`);
+ * - the app's own components: what one does with a `title` is its own business,
+ *   and its elements are judged where it draws them;
+ * - a story's `title` (`meta = { title: 'Group/Name' }`): an object key, not an
+ *   attribute.
+ */
+export declare const noNativeTitle: Rule.RuleModule;
+//# sourceMappingURL=no-native-title.d.ts.map

package/dist/eslint/no-native-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-native-title.d.ts","sourceRoot":"","sources":["../../src/eslint/no-native-title.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAIlC;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,mHAAoH,CAAA;AAMnJ;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,UAkChC,CAAA"}

package/dist/eslint/no-restyled-part.d.ts

@@ -59,6 +59,8 @@ interface Node {
     parent?: Node;
     [key: string]: unknown;
 }
+/** Walk every node under `root`, skipping the parser's bookkeeping keys. */
+declare function walk(root: Node, visit: (node: Node) => void): void;
 /**
  * What a name is to this rule: the part it draws, and which of the caller's
  * class props reach which of the part's (`all` for a part, a re-export or a
@@ -70,6 +72,24 @@ export interface PartBinding {
     props: 'all' | Record<string, string>;
     via?: string;
 }
+interface Parser {
+    parseForESLint?: (code: string, options: unknown) => {
+        ast: Node;
+    };
+    parse?: (code: string, options: unknown) => Node;
+}
+declare function parseFile(parser: Parser, filePath: string): Node | null;
+declare function resolveModule(fromFile: string, specifier: string): string | null;
+/** A function component declared in a module: its name, and the function. */
+declare function functionComponents(program: Node): Map<string, Node>;
+/**
+ * What a file's names stand for, found the way this rule finds them: for a rule
+ * that asks whether a tag is one particular part, through an app's wrapper too
+ * (UIG-23 asks for `EmptyState` and `ScrollArea`).
+ */
+export declare function partsOfFile(file: string, program: Node, parser: Parser): Map<string, PartBinding | 'namespace'>;
+export { bindingOfTag, functionComponents, parseFile, resolveModule, walk, type Node, type Parser };
+declare function bindingOfTag(tag: Node | null | undefined, locals: Map<string, PartBinding | 'namespace'>): PartBinding | undefined;
 /**
  * Every class the code spells out for a value, as far as it can be read in this
  * file. `asMap` reads an object as a class map (its values) rather than as a
@@ -77,5 +97,4 @@ export interface PartBinding {
  */
 export declare function classesOf(value: Node | null | undefined, scopeOf: (node: Node) => Scope.Scope | null, asMap?: boolean, seen?: Set<Node>): string[];
 export declare const noRestyledPart: Rule.RuleModule;
-export {};
 //# sourceMappingURL=no-restyled-part.d.ts.map

package/dist/eslint/no-restyled-part.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"no-restyled-part.d.ts","sourceRoot":"","sources":["../../src/eslint/no-restyled-part.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAGzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAIH,6FAA6F;AAC7F,eAAO,MAAM,SAAS,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EAUxD,CAAA;AASD,oGAAoG;AACpG,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG;IAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAajF;AAED,4CAA4C;AAC5C,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAIlD;AAOD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAiCpD,CAAA;AAOD,UAAU,IAAI;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACvB,GAAG,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IACnC,MAAM,CAAC,EAAE,IAAI,CAAA;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAwBD;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrC,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AA8UD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,KAAK,GAAG,IAAI,EAAE,KAAK,UAAQ,EAAE,IAAI,YAAkB,GAAG,MAAM,EAAE,CAqDtJ;AAOD,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,UAwEjC,CAAA"}
+{"version":3,"file":"no-restyled-part.d.ts","sourceRoot":"","sources":["../../src/eslint/no-restyled-part.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.31.0",
+  "version": "0.33.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.31.0",
+    "packageVersion": "0.33.0",
     "exports": 87,
     "typeExports": 96,
     "files": null

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

@@ -104,6 +104,7 @@ It does these by itself. Write none of them around it.
 | Floats on top of the page | a portal, or a `z-index` to win | ✓ |
 | Stays attached to its anchor on scroll and resize | a scroll or resize listener, or placement arithmetic | ✓ |
 | Says what it is to assistive technology: a tooltip | `role="tooltip"` | ✓ |
+| Is the tooltip: our look, our 300ms, one shared delay | a `title` attribute, the browser's grey box | ✓ (`estiva/no-native-title`) |
 | Opens after the pointer rests, and at once on keyboard focus | a timer, or hover and focus handlers |  |
 | Closes on Escape, on a click of its control, and when the pointer leaves | close handlers |  |
 

package/src/eslint/index.test.ts

@@ -38,6 +38,8 @@ describe('the plugin object', () => {
       'no-rebuilt-behaviour',
       'no-restyled-part',
       'no-handmade-header',
+      'no-handmade-empty-state',
+      'no-native-title',
       'raw-element-outside-a-wrapper',
       'no-hand-rolled-behaviour',
       'component-has-a-page',
@@ -57,16 +59,17 @@ 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', 'estiva/no-handmade-header': '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', 'estiva/no-native-title': 'error' })
     }
-    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-element', 'estiva/no-rebuilt-behaviour', 'estiva/no-restyled-part', 'estiva/no-handmade-header'])
+    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', 'estiva/no-native-title'])
   })
 
   /**
-   * `no-restyled-part` (UIG-9) and `no-handmade-header` (UIG-22) are in both
-   * sets: the package restyles none of its own parts either (Katerina, 17
-   * September), and draws no header bar by hand ("my review isn't enough",
-   * 23 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) and `no-native-title` (UIG-24) 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 rules reach an app config', () => {
     expect(estiva.configs.package.plugins?.[PLUGIN_KEY]).toBe(estiva)
@@ -77,9 +80,11 @@ describe('the plugin object', () => {
       'estiva/component-has-a-story': 'error',
       'estiva/no-restyled-part': 'error',
       'estiva/no-handmade-header': 'error',
+      'estiva/no-handmade-empty-state': 'error',
+      'estiva/no-native-title': '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' && id !== 'estiva/no-handmade-header')) {
+    for (const id of PACKAGE_RULE_IDS.filter((id) => !['estiva/no-restyled-part', 'estiva/no-handmade-header', 'estiva/no-handmade-empty-state', 'estiva/no-native-title'].includes(id))) {
       expect(estiva.configs.recommended.rules?.[id]).toBeUndefined()
       expect(estiva.configs.strict.rules?.[id]).toBeUndefined()
     }
@@ -146,8 +151,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, 'estiva/no-handmade-header': 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 })
+    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, 'estiva/no-native-title': 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, 'estiva/no-native-title': none })
   })
 
   it('lists a report an eslint-disable silenced, and counts it as neither an error nor an escape', async () => {
@@ -169,6 +174,8 @@ describe('countGates', () => {
       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 },
+        'estiva/no-native-title': { errors: 0, warnings: 0, escapes: 0 },
       },
       disabled: [],
     })

package/src/eslint/index.ts

@@ -20,7 +20,9 @@ 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 { noNativeTitle } from './no-native-title'
 import { noRawElement } from './no-raw-element'
 import { noRebuiltBehaviour } from './no-rebuilt-behaviour'
 import { noRestyledPart } from './no-restyled-part'
@@ -29,6 +31,7 @@ import { rawElementOutsideAWrapper } from './raw-element-outside-a-wrapper'
 export { ESCAPE_MARKER, MIN_REASON, SETTINGS_KEY, isEscaped, type EstivaSettings } from './escape'
 export { OWNED_BEHAVIOURS, type OwnedBehaviour } from './no-rebuilt-behaviour'
 export { PART_LOOK_PROPS, PLACEMENT } from './no-restyled-part'
+export { PARTS_WITH_A_TITLE } from './no-native-title'
 
 const { version } = createRequire(import.meta.url)('../../package.json') as { version: string }
 
@@ -46,6 +49,8 @@ const appRules = {
   'no-rebuilt-behaviour': noRebuiltBehaviour,
   'no-restyled-part': noRestyledPart,
   'no-handmade-header': noHandmadeHeader,
+  'no-handmade-empty-state': noHandmadeEmptyState,
+  'no-native-title': noNativeTitle,
 }
 
 /**
@@ -60,8 +65,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).
+ * Four rules are in both sets: `no-restyled-part` (UIG-9), and the
+ * fingerprints `no-handmade-header` (UIG-22), `no-handmade-empty-state`
+ * (UIG-23) and `no-native-title` (UIG-24). 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,
@@ -70,6 +77,8 @@ const packageRules = {
   'component-has-a-story': componentHasAStory,
   'no-restyled-part': noRestyledPart,
   'no-handmade-header': noHandmadeHeader,
+  'no-handmade-empty-state': noHandmadeEmptyState,
+  'no-native-title': noNativeTitle,
 }
 
 const rules = { ...appRules, ...packageRules }
@@ -101,6 +110,8 @@ plugin.configs.recommended = {
     [`${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_KEY}/no-native-title`]: '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' } }],
+    },
+  ],
+})