@estiva-app/ui 0.35.2 → 0.37.0

package/src/eslint/has-a-page-and-a-story.test.ts

@@ -17,7 +17,7 @@ const tester = new RuleTester({
 /** Real files of this package, so the rules are tested against what they read. */
 const src = (name: string) => fileURLToPath(new URL(`../${name}`, import.meta.url))
 const code = 'export function Probe() {\n  return null\n}\n'
-const escaped = '// @estiva-escape: a probe file that documents itself in its own page\nexport function Probe() {\n  return null\n}\n'
+const escaped = '// @estiva-escape(component-has-a-page, component-has-a-story): a probe file that documents itself in its own page\nexport function Probe() {\n  return null\n}\n'
 
 describe('the files these rules read', () => {
   it('Button has a page and a story beside it, and FieldLine and MenuItem have both without a component file', () => {

package/src/eslint/index.test.ts

@@ -145,14 +145,14 @@ describe('an app lint with configs.recommended', () => {
   })
 
   it('passes the same element under an escape', async () => {
-    const [result] = await lint(component('    // @estiva-escape: a preview drawn from its own palette\n    <button type="button">x</button>'))
+    const [result] = await lint(component('    // @estiva-escape(no-raw-element): a preview drawn from its own palette\n    <button type="button">x</button>'))
     expect(result.messages).toEqual([])
   })
 })
 
 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 code = component('    <div>\n      <button>x</button>\n      {/* @estiva-escape(no-raw-element): 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, 'estiva/no-handmade-empty-state': none, 'estiva/no-native-title': none, 'estiva/no-copied-look': 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, 'estiva/no-copied-look': none })

package/src/eslint/no-copied-look.test.ts

@@ -65,7 +65,7 @@ tester.run('no-copied-look', noCopiedLook, {
     {
       name: 'an escape with its reason',
       filename: app,
-      code: probe(`<>\n      {/* @estiva-escape: recorded in GATES.md, a label strip Katerina left as it is */}\n      <span className="${SECTION_LABEL}">x</span>\n    </>`),
+      code: probe(`<>\n      {/* @estiva-escape(no-copied-look): recorded in GATES.md, a label strip Katerina left as it is */}\n      <span className="${SECTION_LABEL}">x</span>\n    </>`),
     },
   ],
   invalid: [

package/src/eslint/no-hand-rolled-behaviour.test.ts

@@ -29,15 +29,15 @@ tester.run('no-hand-rolled-behaviour', noHandRolledBehaviour, {
     },
     {
       name: 'the import of a portal, kept with its reason',
-      code: "// @estiva-escape: the toast keeps its own portal until migration stage 6\nimport { createPortal } from 'react-dom'\nexport const Probe = () => null\n",
+      code: "// @estiva-escape(no-hand-rolled-behaviour): the toast keeps its own portal until migration stage 6\nimport { createPortal } from 'react-dom'\nexport const Probe = () => null\n",
     },
     {
       name: 'the call, kept with its reason',
-      code: 'export function probe(to: HTMLElement) {\n  // @estiva-escape: the toast keeps its own portal until migration stage 6\n  return createPortal(null, to)\n}\n',
+      code: 'export function probe(to: HTMLElement) {\n  // @estiva-escape(no-hand-rolled-behaviour): the toast keeps its own portal until migration stage 6\n  return createPortal(null, to)\n}\n',
     },
     {
       name: 'a global listener kept with its reason',
-      code: 'export function probe() {\n  // @estiva-escape: the frame measures the window, which no floating part owns\n  window.addEventListener("resize", () => {})\n}\n',
+      code: 'export function probe() {\n  // @estiva-escape(no-hand-rolled-behaviour): the frame measures the window, which no floating part owns\n  window.addEventListener("resize", () => {})\n}\n',
     },
   ],
   invalid: [

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

@@ -91,7 +91,7 @@ tester.run('no-handmade-empty-state', noHandmadeEmptyState, {
     { 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>'),
+      code: jsx('<div>{rows.length === 0 ? (\n// @estiva-escape(no-handmade-empty-state): 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
@@ -118,7 +118,7 @@ tester.run('no-handmade-empty-state', noHandmadeEmptyState, {
     },
     {
       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>'),
+      code: jsx('<div>{rows.length === 0 ? (\n// @estiva-escape(no-handmade-empty-state)\n<p>Nothing to print.</p>\n) : rows.map((r) => <p key={r}>{r}</p>)}</div>'),
       errors: [{ messageId: 'escapeWithoutReason' }, ...handmade],
     },
 

package/src/eslint/no-handmade-header.test.ts

@@ -17,6 +17,10 @@ const handmade = [{ messageId: 'handmade' }]
 
 tester.run('no-handmade-header', noHandmadeHeader, {
   valid: [
+    // 26 September: the package's own parts import the header from their sibling file.
+    { name: 'the header inside the package, from its own file', code: `import { ContainerHeader } from './ContainerHeader'\n${component('<ContainerHeader title="Files" />')}` },
+    { name: 'Panel in an app', code: `import { Panel } from '@estiva-app/ui'\n${component('<Panel title="Files">x</Panel>')}` },
+    { name: 'the bare header in an app, escaped with its reason', code: `import { ContainerHeader } from '@estiva-app/ui'\n${component('// @estiva-escape(no-handmade-header): a header over a loading skeleton that cannot scroll\n<ContainerHeader title="Files" />')}` },
     { name: 'the part itself', code: component('<div className="flex h-full flex-col">\n<ContainerHeader title="Files" />\n<div />\n</div>') },
     {
       name: "a group heading inside a list: SectionHeader's row, not a column's bar (Ship's issue groups)",
@@ -33,10 +37,15 @@ tester.run('no-handmade-header', noHandmadeHeader, {
     { name: 'a column of rows', code: component('<div className="flex h-full flex-col">\n<div className="flex flex-col px-3"><span>{title}</span></div>\n<div />\n</div>') },
     {
       name: 'an escape with its reason',
-      code: component('<div className="flex h-full flex-col">\n{/* @estiva-escape: a print header that must not follow the theme */}\n<div className="flex items-center px-3 py-2"><span>{title}</span></div>\n<div />\n</div>'),
+      code: component('<div className="flex h-full flex-col">\n{/* @estiva-escape(no-handmade-header): a print header that must not follow the theme */}\n<div className="flex items-center px-3 py-2"><span>{title}</span></div>\n<div />\n</div>'),
     },
   ],
   invalid: [
+    {
+      name: "the package's header on its own in an app: a panel made by hand, naming Panel (26 September)",
+      code: `import { ContainerHeader as Header } from '@estiva-app/ui'\n${component('<div className="flex flex-col">\n<Header title="Estiva Ship" />\n<div className="px-4">{title}</div>\n</div>')}`,
+      errors: [{ messageId: 'bare' }],
+    },
     {
       // The Folders page's right pane, at the commit before 3dc663b.
       name: 'a pane that heads itself around an editable name',
@@ -82,7 +91,7 @@ tester.run('no-handmade-header', noHandmadeHeader, {
     },
     {
       name: 'an escape with no reason escapes nothing',
-      code: component('<div className="flex h-full flex-col">\n{/* @estiva-escape: */}\n<div className="flex items-center px-3 py-2"><span>{title}</span></div>\n<div />\n</div>'),
+      code: component('<div className="flex h-full flex-col">\n{/* @estiva-escape(no-handmade-header): */}\n<div className="flex items-center px-3 py-2"><span>{title}</span></div>\n<div />\n</div>'),
       errors: [{ messageId: 'escapeWithoutReason' }, { messageId: 'handmade' }],
     },
   ],

package/src/eslint/no-handmade-header.ts

@@ -121,20 +121,42 @@ const INTERACTIVE = ['onClick', 'href', 'role', 'onKeyDown', 'onPointerDown']
  * What it leaves alone, on purpose: a group heading inside a list (the row one
  * section starts with), a label strip on a card, and a row a person presses.
  * Only a lowercase element is judged: a part is already a part.
+ *
+ * And the package's `ContainerHeader` on its own in an app (26 September): a
+ * header over a box of the app's own is a panel made by hand, and the box is
+ * what forgot to scroll — Peek's widget panel cut off a long description. The
+ * message names `Panel`, whose body always scrolls.
  */
 export const noHandmadeHeader: Rule.RuleModule = {
   meta: {
     type: 'problem',
-    docs: { description: "A column's header bar drawn by hand where ContainerHeader is the part" },
+    docs: { description: "A column's header bar drawn by hand, or the package's header on its own in an app, where Panel is the part" },
     schema: [],
     messages: {
       handmade:
-        "A column's header bar drawn by hand. Use `ContainerHeader` from @estiva-app/ui: 48px, the title, the column's buttons at the right edge (`actions`), a hairline under it.",
+        "A column's header bar drawn by hand. Use `Panel` from @estiva-app/ui: its header (48px, the title, the column's buttons at the right edge in `actions`, a hairline under it) and a body under it that scrolls. For a list beside the page, `ListColumn`.",
+      bare:
+        "A panel put together by hand: `ContainerHeader` over a box of your own, which cuts off whatever does not fit. Use `Panel` from @estiva-app/ui: the same header (`title`, `actions`), a body that scrolls whenever it is taller, and a `footer` that stays put. For a list beside the page, `ListColumn`.",
       ...ESCAPE_MESSAGES,
     },
   },
   create(context) {
+    // The package's header, imported by name in an app (Katerina, 26 September): in an
+    // app it comes with Panel or ListColumn, whose body scrolls. The package's own parts
+    // import it from their sibling file, so this never reads them.
+    const bare = new Set<string>()
     return {
+      ImportDeclaration(node: Rule.Node) {
+        const declaration = node as unknown as { source: { value: unknown }; specifiers: { type: string; imported?: { name?: string }; local: { name: string } }[] }
+        if (declaration.source.value !== '@estiva-app/ui') return
+        for (const specifier of declaration.specifiers) if (specifier.type === 'ImportSpecifier' && specifier.imported?.name === 'ContainerHeader') bare.add(specifier.local.name)
+      },
+      JSXOpeningElement(node: Rule.Node) {
+        const element = node as unknown as JSXElement['openingElement']
+        if (element.name.type !== 'JSXIdentifier' || !bare.has(element.name.name ?? '')) return
+        if (isEscaped(context, element)) return
+        context.report({ loc: element.loc, messageId: 'bare' })
+      },
       JSXElement(node: Rule.Node) {
         const column = node as unknown as JSXElement
         const kids = meaningful(column)

package/src/eslint/no-native-title.test.ts

@@ -40,7 +40,7 @@ tester.run('no-native-title', noNativeTitle, {
     { name: "the app's own component with a title of its own (Peek's NewTopicBanner)", filename: app, code: component('<NewTopicBanner title={name} />', "import { NewTopicBanner } from '@/components/Banner'\n") },
     { name: "a story's title is the Storybook's, an object key", code: "const meta = { title: 'Primitives/Tooltip', component: Tooltip }\nexport default meta\n" },
     { name: 'a prop of another name', code: component('<span aria-label={name} data-title={name}>{name}</span>') },
-    { name: 'an escape with its reason', code: component('<>\n{/* @estiva-escape: the print view has no pointer, and the address must survive a copy */}\n<span title={at}>{at}</span>\n</>') },
+    { name: 'an escape with its reason', code: component('<>\n{/* @estiva-escape(no-native-title): the print view has no pointer, and the address must survive a copy */}\n<span title={at}>{at}</span>\n</>') },
   ],
   invalid: [
     {
@@ -54,7 +54,7 @@ tester.run('no-native-title', noNativeTitle, {
     { name: "a part that hands it on to its element: the apps' status probe", code: component('<Button title="Delete">x</Button>', "import { Button } from '@estiva-app/ui'\n"), errors: native },
     { name: "through the app's re-export", filename: app, code: component('<IconButton title="Close" aria-label="Close">x</IconButton>', "import { IconButton } from '@/components/ui/IconButton'\n"), errors: native },
     { name: "through the app's wrapper that hands its props on", filename: app, code: component('<Button title="Delete">x</Button>', "import { Button } from '@/components/ui/Button'\n"), errors: native },
-    { name: 'an escape with no reason is not an escape', code: component('<>\n{/* @estiva-escape */}\n<span title={at}>{at}</span>\n</>'), errors: [{ messageId: 'escapeWithoutReason' }, ...native] },
+    { name: 'an escape with no reason is not an escape', code: component('<>\n{/* @estiva-escape(no-native-title) */}\n<span title={at}>{at}</span>\n</>'), errors: [{ messageId: 'escapeWithoutReason' }, ...native] },
   ],
 })
 

package/src/eslint/no-native-title.ts

@@ -8,7 +8,7 @@ import { bindingOfTag, partsOfFile, type Node, type Parser, type PartBinding } f
  * 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 const PARTS_WITH_A_TITLE = ['CollapsibleSection', 'ConfirmDialog', 'ContainerHeader', 'DialogShell', 'ListColumn', 'SectionHeader'] as const
+export const PARTS_WITH_A_TITLE = ['CollapsibleSection', 'ConfirmDialog', 'ContainerHeader', 'DialogShell', 'ListColumn', 'Panel', 'SectionHeader'] as const
 
 const child = (node: Node, key: string) => node[key] as Node | null | undefined
 const nameOf = (node: Node | null | undefined): string | undefined =>

package/src/eslint/no-raw-element.test.ts

@@ -25,6 +25,10 @@ tester.run('no-raw-element', noRawElement, {
     { name: "the package's Button", code: component('<Button>Save</Button>') },
     { name: 'a member expression named button', code: component('<Foo.button>Save</Foo.button>') },
     { name: 'a name that starts with button', code: component('<buttonish />') },
+    // R5: a handler that only stops the click passes; a part may take one
+    { name: 'a wrapper that only stops the click', code: component('<div onClick={(e) => e.stopPropagation()} onPointerDown={(event) => { event.stopPropagation(); event.preventDefault() }}><Button>Save</Button></div>') },
+    { name: 'a press handler on a part', code: component('<Card onClick={open}>x</Card>') },
+    { name: 'a clickable element, escaped with its reason', code: component('    // @estiva-escape(no-raw-element): a surface that holds headings and lists, which a button cannot hold\n    <div onClick={edit}>x</div>') },
     {
       name: 'the elements that are not controls',
       code: component('    <section>\n      <h1>Title</h1>\n      <p>Text <strong>and</strong> <em>more</em></p>\n      <ul><li>One</li></ul>\n      <img src="x.png" alt="" />\n      <hr />\n      <kbd>Enter</kbd>\n      <svg><path d="M0 0" /></svg>\n      <time dateTime="2026-09-16">today</time>\n    </section>'),
@@ -37,31 +41,45 @@ tester.run('no-raw-element', noRawElement, {
     { name: 'controls written as false', code: component('<audio src="a.mp3" controls={false} />') },
     {
       name: 'a line comment escape directly above',
-      code: component('    // @estiva-escape: a preview drawn from its own palette\n    <button type="button">x</button>'),
+      code: component('    // @estiva-escape(no-raw-element): a preview drawn from its own palette\n    <button type="button">x</button>'),
+    },
+    {
+      name: 'a marker naming two rules keeps off each of them, written with or without the plugin name',
+      code: component('    // @estiva-escape(no-rebuilt-behaviour, estiva/no-raw-element): a preview drawn from its own palette\n    <button type="button">x</button>'),
     },
     {
       name: 'a JSX comment escape on the line above a child',
-      code: component('    <div>\n      {/* @estiva-escape: a preview drawn from its own palette */}\n      <button type="button">x</button>\n    </div>'),
+      code: component('    <div>\n      {/* @estiva-escape(no-raw-element): a preview drawn from its own palette */}\n      <button type="button">x</button>\n    </div>'),
     },
     {
       name: 'a JSX comment escape over several lines',
-      code: component('    <div>\n      {/*\n        @estiva-escape: a preview drawn from its own palette\n      */}\n      <button type="button">x</button>\n    </div>'),
+      code: component('    <div>\n      {/*\n        @estiva-escape(no-raw-element): a preview drawn from its own palette\n      */}\n      <button type="button">x</button>\n    </div>'),
     },
     {
       name: 'an escape above an opening tag that spans lines',
-      code: component('    // @estiva-escape: a preview drawn from its own palette\n    <button\n      type="button"\n      onClick={() => {}}\n    >\n      x\n    </button>'),
+      code: component('    // @estiva-escape(no-raw-element): a preview drawn from its own palette\n    <button\n      type="button"\n      onClick={() => {}}\n    >\n      x\n    </button>'),
     },
     {
       name: 'exactly ten characters of reason, spaces not counted',
-      code: component('    // @estiva-escape: ab cd ef gh ij\n    <button>x</button>'),
+      code: component('    // @estiva-escape(no-raw-element): ab cd ef gh ij\n    <button>x</button>'),
     },
     {
       name: 'an element with no part, escaped',
-      code: component('    // @estiva-escape: a map from another service, until the package has a frame\n    <iframe src="https://example.com" title="Map" />'),
+      code: component('    // @estiva-escape(no-raw-element): a map from another service, until the package has a frame\n    <iframe src="https://example.com" title="Map" />'),
     },
   ],
   invalid: [
     { name: 'a raw button', code: component('    <button type="button">x</button>'), errors: [{ messageId: 'raw', line: 3 }] },
+    {
+      name: 'a clickable div names Button and Card with href (R5)',
+      code: component('    <div onClick={open}>x</div>'),
+      errors: [{ message: 'A clickable <div onClick> is a button made by hand: it takes no focus and answers no key. Use `Button` from @estiva-app/ui; for a whole card that opens something, `Card` with `href`. A handler that only stops the click (`e.stopPropagation()`) is fine.' }],
+    },
+    {
+      name: 'a press that does more than stop the click, on any plain element',
+      code: component('    <li onMouseDown={(e) => { e.preventDefault(); onSearch() }}>\n      <span onPointerDown={handle} />\n    </li>'),
+      errors: [{ messageId: 'clickable', data: { element: '<li onMouseDown>' } }, { messageId: 'clickable', data: { element: '<span onPointerDown>' } }],
+    },
     {
       name: 'an opening tag that spans lines (what grep misses)',
       code: component('    <input\n      type="text"\n      value={x}\n    />'),
@@ -106,7 +124,7 @@ tester.run('no-raw-element', noRawElement, {
 
     {
       name: 'an escape with no reason is an error, and hides nothing',
-      code: component('    // @estiva-escape:\n    <button>x</button>'),
+      code: component('    // @estiva-escape(no-raw-element):\n    <button>x</button>'),
       errors: [
         { messageId: 'escapeWithoutReason', line: 3 },
         { messageId: 'raw', line: 4 },
@@ -114,22 +132,36 @@ tester.run('no-raw-element', noRawElement, {
     },
     {
       name: 'nine characters of reason is too short',
-      code: component('    <div>\n      {/* @estiva-escape: ab cd ef gh i */}\n      <button>x</button>\n    </div>'),
+      code: component('    <div>\n      {/* @estiva-escape(no-raw-element): ab cd ef gh i */}\n      <button>x</button>\n    </div>'),
       errors: [{ messageId: 'escapeWithoutReason' }, { messageId: 'raw' }],
     },
     {
       name: 'a marker with no colon and no reason',
-      code: component('    // @estiva-escape\n    <button>x</button>'),
+      code: component('    // @estiva-escape(no-raw-element)\n    <button>x</button>'),
       errors: [{ messageId: 'escapeWithoutReason' }, { messageId: 'raw' }],
     },
+    // B3 (Katerina, 25 September): a marker keeps off only the rules it names.
+    {
+      name: 'a marker that names no rule escapes nothing, and says which name to write',
+      code: component('    // @estiva-escape: a preview drawn from its own palette\n    <button>x</button>'),
+      errors: [
+        { line: 3, message: 'Name the rule this escape keeps off: `@estiva-escape(no-raw-element): <reason>`. An escape now keeps off only the rules it names.' },
+        { messageId: 'raw', line: 4 },
+      ],
+    },
+    {
+      name: 'a marker that names another rule does not keep this one off',
+      code: component('    // @estiva-escape(no-rebuilt-behaviour): a preview drawn from its own palette\n    <button>x</button>'),
+      errors: [{ messageId: 'raw', line: 4 }],
+    },
     {
       name: 'an escape two lines above does not reach the element',
-      code: component('    // @estiva-escape: a preview drawn from its own palette\n\n    <button>x</button>'),
+      code: component('    // @estiva-escape(no-raw-element): a preview drawn from its own palette\n\n    <button>x</button>'),
       errors: [{ messageId: 'raw', line: 5 }],
     },
     {
       name: 'an escape above a sibling does not reach the next element',
-      code: component('    <div>\n      {/* @estiva-escape: a preview drawn from its own palette */}\n      <span />\n      <button>x</button>\n    </div>'),
+      code: component('    <div>\n      {/* @estiva-escape(no-raw-element): a preview drawn from its own palette */}\n      <span />\n      <button>x</button>\n    </div>'),
       errors: [{ messageId: 'raw', line: 6 }],
     },
     {
@@ -139,23 +171,23 @@ tester.run('no-raw-element', noRawElement, {
     },
     {
       name: 'a marker inside a directive that switches every rule off is refused',
-      code: component('    // eslint-disable-next-line -- @estiva-escape: a preview drawn from its own palette\n    <button>x</button>'),
+      code: component('    // eslint-disable-next-line -- @estiva-escape(no-raw-element): a preview drawn from its own palette\n    <button>x</button>'),
       // The directive silences the element's own report; the refusal sits on the directive's line.
       errors: [{ messageId: 'escapeInDirective', line: 3 }],
     },
     {
       name: 'a marker inside a directive that names this rule is refused',
-      code: component('    // eslint-disable-next-line rule-to-test/no-raw-element -- @estiva-escape: a preview drawn from its own palette\n    <button>x</button>'),
+      code: component('    // eslint-disable-next-line rule-to-test/no-raw-element -- @estiva-escape(no-raw-element): a preview drawn from its own palette\n    <button>x</button>'),
       errors: [{ messageId: 'escapeInDirective', line: 3 }],
     },
     {
       name: "the token lint's note for another rule is not an escape of this one",
-      code: component('    // eslint-disable-next-line no-console -- @estiva-escape: its hand-written type waits for that\n    <button>x</button>'),
+      code: component('    // eslint-disable-next-line no-console -- @estiva-escape(no-raw-element): its hand-written type waits for that\n    <button>x</button>'),
       errors: [{ messageId: 'raw', line: 4 }],
     },
     {
       name: 'with reportEscapes on, a sanctioned escape is reported for the count',
-      code: component('    // @estiva-escape: a preview drawn from its own palette\n    <button>x</button>'),
+      code: component('    // @estiva-escape(no-raw-element): a preview drawn from its own palette\n    <button>x</button>'),
       settings: { estiva: { reportEscapes: true } },
       errors: [{ messageId: 'escaped', data: { reason: 'a preview drawn from its own palette' }, line: 3 }],
     },

package/src/eslint/no-raw-element.ts

@@ -111,7 +111,43 @@ function isOn(element: JSXOpeningElement, name: string): boolean {
   return attr !== undefined && literal(attr) !== false
 }
 
-type Found = { report: 'raw'; element: string; part: RawElementPart } | { report: 'noPart'; element: string } | null
+type Found = { report: 'raw'; element: string; part: RawElementPart } | { report: 'noPart'; element: string } | { report: 'clickable'; element: string } | null
+
+/** The pointer's press, as a handler on a plain element makes it a control (R5). */
+const CLICK_HANDLERS = ['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', 'onDoubleClick']
+
+interface Expression {
+  type: string
+  [key: string]: unknown
+}
+
+/** `e.stopPropagation()` or `e.preventDefault()`: a handler that only keeps the click from what is behind. */
+function onlyStops(handler: Expression | undefined): boolean {
+  if (!handler || (handler.type !== 'ArrowFunctionExpression' && handler.type !== 'FunctionExpression')) return false
+  const body = handler.body as Expression
+  const calls = body.type === 'BlockStatement' ? (body.body as Expression[]).map((s) => (s.type === 'ExpressionStatement' ? (s.expression as Expression) : s)) : [body]
+  return (
+    calls.length > 0 &&
+    calls.every((call) => {
+      if (call.type !== 'CallExpression') return false
+      const callee = call.callee as Expression
+      const property = callee.type === 'MemberExpression' ? (callee.property as Expression) : undefined
+      return property?.type === 'Identifier' && (property.name === 'stopPropagation' || property.name === 'preventDefault')
+    })
+  )
+}
+
+/** A plain element made clickable by hand: the first press handler that does more than stop the click. */
+function clickHandler(element: JSXOpeningElement): string | undefined {
+  for (const name of CLICK_HANDLERS) {
+    const attr = attribute(element, name)
+    if (!attr) continue
+    const value = attr.value
+    const handler = value?.type === 'JSXExpressionContainer' ? (value.expression as Expression | undefined) : undefined
+    if (!onlyStops(handler)) return name
+  }
+  return undefined
+}
 
 /** What this element is to the rule: a raw element with a part, one with none yet, or none of its business. */
 export function classify(element: JSXOpeningElement): Found {
@@ -131,7 +167,14 @@ export function classify(element: JSXOpeningElement): Found {
     return part ? { report: 'raw', element: shown, part } : { report: 'noPart', element: shown }
   }
 
-  if (!Object.hasOwn(RAW_ELEMENT_PARTS, name)) return null
+  if (!Object.hasOwn(RAW_ELEMENT_PARTS, name)) {
+    // A plain element with a press handler is a button drawn by hand (Katerina's ruling R5,
+    // 25 September): no focus, no keys, no look anybody keeps in step. `<option>` and
+    // `<summary>` live inside a control the rule already reads.
+    if (!/^[a-z][a-z0-9]*$/.test(name) || name === 'option' || name === 'summary') return null
+    const handler = clickHandler(element)
+    return handler ? { report: 'clickable', element: `<${name} ${handler}>` } : null
+  }
   if ((name === 'audio' || name === 'video') && !isOn(element, 'controls')) return null
   if (name === 'img' && !attribute(element, 'usemap') && !attribute(element, 'useMap')) return null
 
@@ -150,6 +193,10 @@ export function classify(element: JSXOpeningElement): Found {
  * that says so: the part is made in the package, not by hand in an app
  * (Katerina, 16 September).
  *
+ * A plain element with a press handler (`<div onClick>`) is a control too, and
+ * is refused naming `Button` (R5, 25 September); a handler that only stops the
+ * click reaching what is behind passes.
+ *
  * Only a JSX element written with a lowercase name. `<Button>`,
  * `<Foo.button>` and `createElement('button')` are not this rule's business.
  */
@@ -160,6 +207,8 @@ export const noRawElement: Rule.RuleModule = {
     schema: [],
     messages: {
       raw: 'Use `{{use}}` from @estiva-app/ui instead of a raw {{element}}.{{more}}',
+      clickable:
+        'A clickable {{element}} is a button made by hand: it takes no focus and answers no key. Use `Button` from @estiva-app/ui; for a whole card that opens something, `Card` with `href`. A handler that only stops the click (`e.stopPropagation()`) is fine.',
       noPart: '@estiva-app/ui has no part for a raw {{element}} yet. Do not build one here: ask Katerina, and it gets made in @estiva-app/ui.',
       ...ESCAPE_MESSAGES,
     },
@@ -172,7 +221,8 @@ export const noRawElement: Rule.RuleModule = {
         const found = classify(element)
         if (!found) return
         if (isEscaped(context, element)) return
-        if (found.report === 'noPart') context.report({ loc: element.loc, messageId: 'noPart', data: { element: found.element } })
+        if (found.report === 'clickable') context.report({ loc: element.loc, messageId: 'clickable', data: { element: found.element } })
+        else if (found.report === 'noPart') context.report({ loc: element.loc, messageId: 'noPart', data: { element: found.element } })
         else context.report({ loc: element.loc, messageId: 'raw', data: { element: found.element, use: found.part.use, more: found.part.more ?? '' } })
       },
     }

package/src/eslint/no-rebuilt-behaviour.test.ts

@@ -65,27 +65,27 @@ tester.run('no-rebuilt-behaviour', noRebuiltBehaviour, {
     // escapes
     {
       name: 'an escape above the statement keeps a page listener',
-      code: effect("  // @estiva-escape: an inline panel, not a floating one, closes on a press outside\n  document.addEventListener('mousedown', close)"),
+      code: effect("  // @estiva-escape(no-rebuilt-behaviour): an inline panel, not a floating one, closes on a press outside\n  document.addEventListener('mousedown', close)"),
     },
     {
       name: 'an escape above the element keeps a hand-written role',
-      code: component('    // @estiva-escape: a list the editor drives from its caret\n    <MenuItem role="option" aria-selected label="Item" />'),
+      code: component('    // @estiva-escape(no-rebuilt-behaviour): a list the editor drives from its caret\n    <MenuItem role="option" aria-selected label="Item" />'),
     },
     {
       name: 'an escape above the object property keeps its arrow keys',
-      code: "useImperativeHandle(ref, () => ({\n  // @estiva-escape: a list the editor drives from its caret\n  onKeyDown: ({ event }) => {\n    if (event.key === 'ArrowDown') next()\n    if (event.key === 'ArrowUp') previous()\n    return false\n  },\n}))",
+      code: "useImperativeHandle(ref, () => ({\n  // @estiva-escape(no-rebuilt-behaviour): a list the editor drives from its caret\n  onKeyDown: ({ event }) => {\n    if (event.key === 'ArrowDown') next()\n    if (event.key === 'ArrowUp') previous()\n    return false\n  },\n}))",
     },
     {
       name: 'an escape above the call keeps a portal',
-      code: "import { createPortal } from 'react-dom'\nfunction Viewer() {\n  // @estiva-escape: becomes the package Lightbox at stage 7\n  return createPortal(<div />, document.body)\n}",
+      code: "import { createPortal } from 'react-dom'\nfunction Viewer() {\n  // @estiva-escape(no-rebuilt-behaviour): becomes the package Lightbox at stage 7\n  return createPortal(<div />, document.body)\n}",
     },
     {
       name: 'an escape above an array item keeps its class',
-      code: "const CLASSES = [\n  'flex',\n  // @estiva-escape: a code block the editor draws, which nothing can wrap\n  '[&_pre]:overflow-x-auto',\n]",
+      code: "const CLASSES = [\n  'flex',\n  // @estiva-escape(no-rebuilt-behaviour): a code block the editor draws, which nothing can wrap\n  '[&_pre]:overflow-x-auto',\n]",
     },
     {
       name: 'one escape above an element covers everything found on it',
-      code: component('    // @estiva-escape: a surface that holds headings, which a button cannot\n    <div role="button" tabIndex={0} className="overflow-auto" />'),
+      code: component('    // @estiva-escape(no-rebuilt-behaviour): a surface that holds headings, which a button cannot\n    <div role="button" tabIndex={0} className="overflow-auto" />'),
     },
   ],
   invalid: [
@@ -175,17 +175,17 @@ tester.run('no-rebuilt-behaviour', noRebuiltBehaviour, {
     // escapes
     {
       name: 'an escape with no reason hides nothing',
-      code: effect("  // @estiva-escape:\n  document.addEventListener('mousedown', close)"),
+      code: effect("  // @estiva-escape(no-rebuilt-behaviour):\n  document.addEventListener('mousedown', close)"),
       errors: [{ messageId: 'escapeWithoutReason', line: 2 }, { messageId: 'press', line: 3 }],
     },
     {
       name: 'an escape above one statement does not reach the next',
-      code: effect("  // @estiva-escape: an inline panel, not a floating one, closes on a press outside\n  document.addEventListener('mousedown', close)\n  document.addEventListener('keydown', onKey)"),
+      code: effect("  // @estiva-escape(no-rebuilt-behaviour): an inline panel, not a floating one, closes on a press outside\n  document.addEventListener('mousedown', close)\n  document.addEventListener('keydown', onKey)"),
       errors: [{ messageId: 'key', line: 4 }],
     },
     {
       name: 'with reportEscapes on, one escape over two findings is counted once',
-      code: component('    // @estiva-escape: a surface that holds headings, which a button cannot\n    <div role="button" tabIndex={0} />'),
+      code: component('    // @estiva-escape(no-rebuilt-behaviour): a surface that holds headings, which a button cannot\n    <div role="button" tabIndex={0} />'),
       settings: { estiva: { reportEscapes: true } },
       errors: [{ messageId: 'escaped', line: 3 }],
     },

package/src/eslint/no-restyled-part.test.ts

@@ -51,6 +51,8 @@ const local = (imports: string, from: string, body: string) => `import { ${impor
 const USE_VARIANT_OR_SIZE = ' Use its `variant` or `size`.'
 const restyled = (classes: string, where: string, use: string) =>
   `${classes} on ${where} changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled: only space, size, flex and grid, and position pass in.${use} A look for what is around it goes on your own element around it.`
+const restyledStyle = (keys: string, where: string, use: string) =>
+  `${keys} in the \`style\` of ${where} changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled, by class or by style: only space, size, flex and grid, and position pass in.${use} A look for what is around it goes on your own element around it.`
 const noProp = (part: string) => ` \`${part}\` has no prop for this yet: ask Katerina, and it gets made in @estiva-app/ui.`
 
 tester.run('no-restyled-part', noRestyledPart, {
@@ -66,14 +68,31 @@ tester.run('no-restyled-part', noRestyledPart, {
     { name: 'a raw element is not a part', filename: app, code: ui('Button', '    <div className="bg-bg-surface text-h2 rounded-lg" />') },
     { name: 'an app component of the same name is not a part', filename: app, code: local('Button', './components/Button', '    <Button className="text-h2" />') },
     { name: 'a style prop is not a class prop', filename: app, code: ui('Button', '    <Button style={{ width: 20 }} data-class="text-h2">x</Button>') },
+    // style on a part: placement keys pass (B6)
+    { name: 'style: space, size, position and a move', filename: app, code: ui('Card', "    <Card style={{ marginTop: 4, 'paddingInline': 8, width: '50%', maxHeight: 240, flexGrow: 1, gridColumn: '1 / 3', position: 'absolute', top: 0, zIndex: 2, transform: `translateY(${y}px)` }} />") },
+    { name: 'style: a const of placement, and a custom property', filename: app, code: "import { Card } from '@estiva-app/ui'\nconst at = { top: 0, left: 0 }\nexport function Probe() {\n  return <Card style={at}><Card style={{ '--row': 2 }} /></Card>\n}\n" },
+    { name: 'style the code works out while it runs passes', filename: app, code: ui('Card', '    <Card style={props.style} />') },
+    { name: 'style on a component that hands on only its className is not read', filename: app, code: local('ConversationCard', './components/ConversationCard', '    <ConversationCard title="x" style={{ opacity: 0.5 }} />') },
     { name: 'EmptyState placed', filename: app, code: ui('EmptyState', '    <EmptyState className="mt-2 flex-1" message="Nothing yet" />') },
     // escapes
-    { name: 'escaped, with its reason', filename: app, code: ui('Link', '    // @estiva-escape: the whole row is the link, and no part does that yet\n    <Link href="/x" className="after:absolute after:inset-0">x</Link>') },
+    { name: 'escaped, with its reason', filename: app, code: ui('Link', '    // @estiva-escape(no-restyled-part): the whole row is the link, and no part does that yet\n    <Link href="/x" className="after:absolute after:inset-0">x</Link>') },
     // the package itself
     { name: 'inside the package: a name index.ts does not export', filename: pkg, code: local('Base', './Base', '    <Base className="text-h2" />') },
     { name: 'inside the package: a raw element in a part', filename: pkg, code: 'export function Card() {\n  return <div className="rounded-lg border" />\n}\n' },
   ],
   invalid: [
+    {
+      name: 'style: a corner, an opacity, a weight and a line height (B6)',
+      filename: app,
+      code: ui('Button', '    <Button style={{ borderRadius: 999, opacity: 0.4, fontWeight: 700, lineHeight: 2, marginTop: 4 }}>x</Button>'),
+      errors: [{ message: restyledStyle('`borderRadius` `opacity` `fontWeight` `lineHeight`', '`Button`', USE_VARIANT_OR_SIZE) }],
+    },
+    {
+      name: 'style: quoted keys, a const, and a re-export',
+      filename: app,
+      code: "import { Button } from './components/ui'\nconst look = { 'background': 'red' } as const\nexport function Probe() {\n  return <Button style={look}>x</Button>\n}\n",
+      errors: [{ message: restyledStyle('`background`', '`Button`', USE_VARIANT_OR_SIZE) }],
+    },
     {
       name: 'a colour and a text size, naming the props that carry a look',
       filename: app,
@@ -176,7 +195,7 @@ tester.run('no-restyled-part', noRestyledPart, {
     {
       name: 'an escape with no reason is reported, and so is the class',
       filename: app,
-      code: ui('Link', '    // @estiva-escape:\n    <Link href="/x" className="text-h2">x</Link>'),
+      code: ui('Link', '    // @estiva-escape(no-restyled-part):\n    <Link href="/x" className="text-h2">x</Link>'),
       errors: [{ messageId: 'escapeWithoutReason' }, { message: restyled('`text-h2`', '`Link`', ' Use its `variant` or `truncate`.') }],
     },
     {

package/src/eslint/no-restyled-part.ts

@@ -53,6 +53,16 @@ export const PLACEMENT: { what: string; pattern: RegExp }[] = [
   { what: 'a name for hover', pattern: /^(?:group|peer)(?:\/[\w-]+)?$/ },
 ]
 
+/**
+ * The same, as `style` keys (Katerina's ruling B6, 25 September): `style` on a
+ * part is read like its `className`, so a radius, a weight or an opacity cannot
+ * go in by the other door. CSS's own names for space, size, flex and grid, and
+ * position; `transform` and `translate` move a part without changing its look.
+ * A custom property (`--name`) passes: the part decides what it means.
+ */
+export const PLACEMENT_STYLE =
+  /^(?:margin|padding|inset|scrollMargin)(?:Top|Right|Bottom|Left|Block|Inline|BlockStart|BlockEnd|InlineStart|InlineEnd)?$|^(?:width|height|minWidth|minHeight|maxWidth|maxHeight|inlineSize|blockSize|minInlineSize|minBlockSize|maxInlineSize|maxBlockSize)$|^(?:display|flex|flexGrow|flexShrink|flexBasis|order|gap|rowGap|columnGap|alignSelf|justifySelf|placeSelf|gridArea|gridColumn|gridColumnStart|gridColumnEnd|gridRow|gridRowStart|gridRowEnd)$|^(?:position|top|right|bottom|left|zIndex|transform|translate)$/
+
 /**
  * A variant that draws another box or reaches inside the part: `before:`,
  * `after:`, `[&>*]:`, `*:`… A placement class behind one of these is not the
@@ -592,6 +602,8 @@ export const noRestyledPart: Rule.RuleModule = {
     messages: {
       restyled:
         '{{classes}} on {{where}} changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled: only space, size, flex and grid, and position pass in.{{use}} A look for what is around it goes on your own element around it.',
+      restyledStyle:
+        '{{keys}} in the `style` of {{where}} changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled, by class or by style: only space, size, flex and grid, and position pass in.{{use}} A look for what is around it goes on your own element around it.',
       emptyStatePadding:
         '{{classes}} pads {{where}}. EmptyState takes no padding (Katerina, 14 September): its room comes from the box its rows live in, so put the padding on that box.',
       ...ESCAPE_MESSAGES,
@@ -628,6 +640,23 @@ export const noRestyledPart: Rule.RuleModule = {
       if (padding.length) context.report({ loc: at.loc as NonNullable<Rule.Node['loc']>, messageId: 'emptyStatePadding', data: { classes: code(padding), where } })
     }
 
+    /** `style` on a part: every key it can read must be placement (B6). */
+    const checkStyle = (element: Node, binding: PartBinding, value: Node | null | undefined, at: Node) => {
+      if (binding.props !== 'all' || value?.type !== 'JSXExpressionContainer') return
+      let object = child(value, 'expression')
+      if (object?.type === 'Identifier') object = constantOf(object, scopeOf(object))
+      while (object?.type === 'TSAsExpression' || object?.type === 'TSSatisfiesExpression') object = child(object, 'expression')
+      if (object?.type !== 'ObjectExpression') return
+      const keys = children(object, 'properties')
+        .map((property) => (property?.type === 'Property' && !property.computed ? nameOf(child(property, 'key')) : undefined))
+        .filter((key): key is string => !!key && !key.startsWith('--') && !PLACEMENT_STYLE.test(key))
+      if (!keys.length || escaped(element)) return
+      const props = PART_LOOK_PROPS[binding.part]
+      const use = props ? ` Use its ${or(props)}.` : ` \`${binding.part}\` has no prop for this yet: ask Katerina, and it gets made in @estiva-app/ui.`
+      const where = binding.via && binding.via !== binding.part ? `\`${binding.via}\` (it hands its props to \`${binding.part}\`)` : `\`${binding.part}\``
+      context.report({ loc: at.loc as NonNullable<Rule.Node['loc']>, messageId: 'restyledStyle', data: { keys: code([...new Set(keys)]), where, use } })
+    }
+
     return {
       Program(program) {
         locals = moduleParts(file, program as unknown as Node, parser, new Set([file])).locals
@@ -641,6 +670,7 @@ export const noRestyledPart: Rule.RuleModule = {
           if (attribute.type === 'JSXAttribute') {
             const prop = nameOf(child(attribute, 'name'))
             if (prop && CLASS_PROP.test(prop)) check(element, binding, prop, child(attribute, 'value'), attribute)
+            else if (prop === 'style') checkStyle(element, binding, child(attribute, 'value'), attribute)
             continue
           }
           // `{...{ className }}`, or a `const` object spread onto the part.