@estiva-app/ui 0.15.0 → 0.16.0

package/src/Toast.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useMemo, type ReactNode } from 'react'
 import { Toast as BaseToast } from '@base-ui/react/toast'
 import { IconAlertCircle, IconCircleCheck, IconCircleX } from '@tabler/icons-react'
+import { Button } from './Button'
 import { cn } from './cn'
 
 /**
@@ -78,14 +79,6 @@ const ICON_STYLES: Record<ToastType, string> = {
   error: 'signal:text-error-default',
 }
 
-const ACTION_BORDER_STYLES: Record<ToastType, string> = {
-  success: 'signal:border signal:border-border-default signal:hover:border-border-strong',
-  brand: 'signal:border signal:border-border-default signal:hover:border-border-strong',
-  neutral: 'border border-border-default',
-  warning: 'signal:border signal:border-border-default signal:hover:border-border-strong',
-  error: 'signal:border signal:border-border-default signal:hover:border-border-strong',
-}
-
 const LABEL_CLASSES = 'text-body-2 text-text-primary whitespace-nowrap'
 
 const pillClassName = (type: ToastType, hasAction: boolean, className?: string) =>
@@ -98,20 +91,11 @@ const pillClassName = (type: ToastType, hasAction: boolean, className?: string)
     className,
   )
 
-const actionClassName = (type: ToastType) =>
-  cn(
-    'h-6 flex items-center justify-center gap-1 px-1 py-1 rounded-md shrink-0 transition-colors',
-    ACTION_BORDER_STYLES[type],
-    type === 'neutral' ? 'hover:border-border-strong' : 'hover:opacity-80',
-  )
-
 function LeadingIcon({ type }: { type: ToastType }) {
   const Icon = ICONS[type]
   return <Icon size={16} stroke={1.5} className={cn('text-text-primary shrink-0', ICON_STYLES[type])} />
 }
 
-const ACTION_LABEL_CLASSES = 'text-btn-small text-text-primary whitespace-nowrap'
-
 /**
  * One toast, drawn in place. What the provider shows is this pill; draw it
  * yourself only where a page needs a toast's look without its timing — a
@@ -126,9 +110,9 @@ export function Toast({ label, type = 'neutral', leadingIcon = true, actionLabel
         <span className={LABEL_CLASSES}>{label}</span>
       </div>
       {hasAction && (
-        <button type="button" onClick={onAction} className={actionClassName(type)}>
-          <span className={ACTION_LABEL_CLASSES}>{actionLabel}</span>
-        </button>
+        <Button variant="outlined" size="small" onClick={onAction}>
+          {actionLabel}
+        </Button>
       )}
     </div>
   )
@@ -229,10 +213,14 @@ function ToastList() {
               onAction?.()
               close(toast.id)
             }}
-            className={actionClassName(type)}
-          >
-            <span className={ACTION_LABEL_CLASSES}>{actionLabel}</span>
-          </BaseToast.Action>
+            // The same Button the toast drawn in place uses, told to *be* the
+            // Base UI action rather than sit inside one (Katerina, 16 September).
+            render={
+              <Button variant="outlined" size="small">
+                {actionLabel}
+              </Button>
+            }
+          />
         )}
       </BaseToast.Root>
     )

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

@@ -0,0 +1,57 @@
+import { existsSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { RuleTester } from 'eslint'
+import { parser } from 'typescript-eslint'
+import { describe, expect, it } from 'vitest'
+import { componentHasAPage, componentHasAStory } from './has-a-page-and-a-story'
+
+RuleTester.describe = describe
+RuleTester.it = it
+RuleTester.itOnly = it.only
+
+const tester = new RuleTester({
+  languageOptions: { parser, parserOptions: { ecmaFeatures: { jsx: true } } },
+  linterOptions: { reportUnusedDisableDirectives: 'off' },
+})
+
+/** 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'
+
+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', () => {
+    expect(existsSync(src('Button.mdx'))).toBe(true)
+    expect(existsSync(src('Button.stories.tsx'))).toBe(true)
+    for (const name of ['FieldLine', 'MenuItem']) {
+      expect(existsSync(src(`${name}.mdx`))).toBe(true)
+      expect(existsSync(src(`${name}.stories.tsx`))).toBe(true)
+      // The false positive to avoid: no component file of their own.
+      expect(existsSync(src(`${name}.tsx`))).toBe(false)
+    }
+  })
+})
+
+tester.run('component-has-a-page', componentHasAPage, {
+  valid: [
+    { name: 'a component with its page beside it', code, filename: src('Button.tsx') },
+    { name: 'a story file, which needs no page of its own', code, filename: src('Button.stories.tsx') },
+    { name: 'a test file', code, filename: src('Button.test.tsx') },
+    { name: 'a file that is not a component file at all', code, filename: src('index.ts') },
+    { name: 'a component with its reason at the top', code: escaped, filename: src('NoPageProbe.tsx') },
+  ],
+  invalid: [
+    { name: 'a component with no page', code, filename: src('NoPageProbe.tsx'), errors: [{ messageId: 'missing' }] },
+  ],
+})
+
+tester.run('component-has-a-story', componentHasAStory, {
+  valid: [
+    { name: 'a component with its story beside it', code, filename: src('Button.tsx') },
+    { name: 'a story file, which is not itself a component', code, filename: src('Button.stories.tsx') },
+    { name: 'a component with its reason at the top', code: escaped, filename: src('NoStoryProbe.tsx') },
+  ],
+  invalid: [
+    { name: 'a component with no story', code, filename: src('NoStoryProbe.tsx'), errors: [{ messageId: 'missing' }] },
+  ],
+})

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

@@ -0,0 +1,97 @@
+import { existsSync } from 'node:fs'
+import type { Rule } from 'eslint'
+import { ESCAPE_MESSAGES, isEscaped } from './escape'
+
+/**
+ * A component of the package with no page, and one with no story (UIG-5, P2 and
+ * P3).
+ *
+ * A component nobody can read about is a component nobody uses correctly, and
+ * one nobody can look at is one nobody reviews. Both were at zero when these
+ * were switched on; they are here so the next component cannot arrive without
+ * them.
+ *
+ * The pair is by file name, beside the component, which is how this package is
+ * laid out: `Button.tsx`, `Button.mdx`, `Button.stories.tsx`, `Button.test.tsx`
+ * side by side in `src/`.
+ *
+ * **The false positive to avoid** (UIG-1 confirmed it is real): `FieldLine` and
+ * `MenuItem` have a page and a story but no `.tsx` of their own — they are
+ * exported from a sibling. These rules read a component file and ask for its
+ * page and its story, never the other way round, so a page without a component
+ * is not this rule's business.
+ *
+ * A file that stays without one says why at its top: `// @estiva-escape: <why>`.
+ */
+interface ProgramNode {
+  body: { loc?: Rule.Node['loc']; range?: [number, number] }[]
+  loc: NonNullable<Rule.Node['loc']>
+  range: [number, number]
+}
+
+/** A component file: a `.tsx` in the package's source that is not a story or a test. */
+function componentFile(filename: string): boolean {
+  return filename.endsWith('.tsx') && !/\.(stories|test)\.tsx$/.test(filename)
+}
+
+function sibling(filename: string, extension: string): string {
+  return filename.replace(/\.tsx$/, extension)
+}
+
+/**
+ * Report on the file's first statement, so the escape is a comment at the top of
+ * the file — the only place a reason for a missing page could go.
+ */
+function reportOnFile(context: Rule.RuleContext, program: ProgramNode, messageId: string, data: Record<string, string>): void {
+  const anchor = program.body[0] ?? program
+  if (anchor.loc && anchor.range && isEscaped(context, { loc: anchor.loc, range: anchor.range })) return
+  context.report({ loc: anchor.loc ?? program.loc, messageId, data })
+}
+
+export const componentHasAPage: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: { description: 'Every component of the package has a usage page beside it' },
+    schema: [],
+    messages: {
+      missing: '{{name}} has no page. Write {{page}} beside it — what it is, when, when not, how, and what it owns — or say why not at the top of the file.',
+      ...ESCAPE_MESSAGES,
+    },
+  },
+  create(context) {
+    return {
+      Program(node) {
+        const filename = context.filename
+        if (!componentFile(filename)) return
+        const page = sibling(filename, '.mdx')
+        if (existsSync(page)) return
+        const name = filename.split(/[\\/]/).pop() ?? filename
+        reportOnFile(context, node as unknown as ProgramNode, 'missing', { name, page: page.split(/[\\/]/).pop() ?? page })
+      },
+    }
+  },
+}
+
+export const componentHasAStory: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: { description: 'Every component of the package has a story beside it' },
+    schema: [],
+    messages: {
+      missing: '{{name}} has no story. Write {{story}} beside it, so it can be seen and reviewed, or say why not at the top of the file.',
+      ...ESCAPE_MESSAGES,
+    },
+  },
+  create(context) {
+    return {
+      Program(node) {
+        const filename = context.filename
+        if (!componentFile(filename)) return
+        const story = sibling(filename, '.stories.tsx')
+        if (existsSync(story)) return
+        const name = filename.split(/[\\/]/).pop() ?? filename
+        reportOnFile(context, node as unknown as ProgramNode, 'missing', { name, story: story.split(/[\\/]/).pop() ?? story })
+      },
+    }
+  },
+}

package/src/eslint/index.test.ts

@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs'
 import { ESLint, type Linter } from 'eslint'
 import { parser } from 'typescript-eslint'
 import { describe, expect, it } from 'vitest'
-import estiva, { countGates, PLUGIN_KEY } from './index'
+import estiva, { APP_RULE_IDS, countGates, PACKAGE_RULE_IDS, PLUGIN_KEY } from './index'
 
 /**
  * The plugin as an app uses it: a flat config with `configs.recommended`,
@@ -32,12 +32,44 @@ describe('the plugin object', () => {
     expect(estiva.meta).toEqual({ name: '@estiva-app/ui/eslint', version: pkg.version })
   })
 
-  it('has no-raw-button, and both configs switch it on as an error under estiva/', () => {
-    expect(Object.keys(estiva.rules)).toEqual(['no-raw-button'])
+  it('carries every rule, the app ones and the inward ones', () => {
+    expect(Object.keys(estiva.rules)).toEqual([
+      'no-raw-button',
+      'raw-element-outside-a-wrapper',
+      'no-hand-rolled-behaviour',
+      'component-has-a-page',
+      'component-has-a-story',
+    ])
+  })
+
+  /**
+   * The apps spread `recommended`. A rule added for the package (UIG-5) must not
+   * arrive in Peek or Ship with the next version bump: an app is full of raw
+   * elements it may keep until UIG-7, and has no `.mdx` pages at all. This is
+   * the test that holds that line — if you add an app-facing rule on purpose,
+   * change it deliberately, here.
+   */
+  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-button': 'error' })
     }
+    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-button'])
+  })
+
+  it('gives this package its own set, as errors, and it reaches no app config', () => {
+    expect(estiva.configs.package.plugins?.[PLUGIN_KEY]).toBe(estiva)
+    expect(estiva.configs.package.rules).toEqual({
+      'estiva/raw-element-outside-a-wrapper': 'error',
+      'estiva/no-hand-rolled-behaviour': 'error',
+      'estiva/component-has-a-page': 'error',
+      'estiva/component-has-a-story': 'error',
+    })
+    expect(PACKAGE_RULE_IDS).toEqual(Object.keys(estiva.configs.package.rules ?? {}))
+    for (const id of PACKAGE_RULE_IDS) {
+      expect(estiva.configs.recommended.rules?.[id]).toBeUndefined()
+      expect(estiva.configs.strict.rules?.[id]).toBeUndefined()
+    }
   })
 })
 

package/src/eslint/index.ts

@@ -18,7 +18,10 @@
  */
 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 { noRawButton } from './no-raw-button'
+import { rawElementOutsideAWrapper } from './raw-element-outside-a-wrapper'
 
 export { ESCAPE_MARKER, MIN_REASON, SETTINGS_KEY, isEscaped, type EstivaSettings } from './escape'
 
@@ -27,23 +30,52 @@ const { version } = createRequire(import.meta.url)('../../package.json') as { ve
 /** The name the configs register the plugin under, so every rule id is `estiva/<rule>`. */
 export const PLUGIN_KEY = 'estiva'
 
-const rules = {
+/**
+ * The rules an **app** runs: they say an app must not build what the package
+ * already has. `recommended` and `strict` carry these and only these.
+ */
+const appRules = {
   'no-raw-button': noRawButton,
 }
 
+/**
+ * The rules the **package itself** runs, pointed inward (UIG-5): don't bury a
+ * raw element inside a component, don't rebuild what Base UI owns, don't ship a
+ * component without a page or a story.
+ *
+ * They are in `configs.package`, never in `recommended`, on purpose. Peek and
+ * Ship spread `recommended`, so a rule added here must not arrive in an app
+ * with the next version bump: an app is full of raw elements it is allowed to
+ * have until UIG-7, and has no `.mdx` pages at all. `index.test.ts` holds the
+ * apps' list to exactly the app rules.
+ */
+const packageRules = {
+  'raw-element-outside-a-wrapper': rawElementOutsideAWrapper,
+  'no-hand-rolled-behaviour': noHandRolledBehaviour,
+  'component-has-a-page': componentHasAPage,
+  'component-has-a-story': componentHasAStory,
+}
+
+const rules = { ...appRules, ...packageRules }
+
 const plugin = {
   meta: { name: '@estiva-app/ui/eslint', version },
   rules,
-  configs: {} as { recommended: Linter.Config; strict: Linter.Config },
+  configs: {} as { recommended: Linter.Config; strict: Linter.Config; package: Linter.Config },
 } satisfies ESLint.Plugin
 
-const ruleIds = Object.keys(rules).map((name) => `${PLUGIN_KEY}/${name}`)
+/** The ids `recommended` and `strict` carry — what an app's gate runs and counts. */
+export const APP_RULE_IDS = Object.keys(appRules).map((name) => `${PLUGIN_KEY}/${name}`)
+/** The ids `package` carries — what this package's own gate runs and counts (UIG-5). */
+export const PACKAGE_RULE_IDS = Object.keys(packageRules).map((name) => `${PLUGIN_KEY}/${name}`)
 
 /**
- * `recommended` switches every rule on at the level it was ruled at: an error
- * blocks, a warning is reported and never blocks. `strict` makes every rule an
- * error. With one rule, an error, the two are the same today; they part when
- * the first warning-level rule arrives (UIG-25).
+ * `recommended` switches every **app** rule on at the level it was ruled at: an
+ * error blocks, a warning is reported and never blocks. `strict` makes every app
+ * rule an error. With one rule, an error, the two are the same today; they part
+ * when the first warning-level rule arrives (UIG-25).
+ *
+ * `package` is the inward set (UIG-5), which only this package runs.
  */
 plugin.configs.recommended = {
   name: '@estiva-app/ui/recommended',
@@ -53,7 +85,12 @@ plugin.configs.recommended = {
 plugin.configs.strict = {
   name: '@estiva-app/ui/strict',
   plugins: { [PLUGIN_KEY]: plugin },
-  rules: Object.fromEntries(ruleIds.map((id) => [id, 'error'])),
+  rules: Object.fromEntries(APP_RULE_IDS.map((id) => [id, 'error'])),
+}
+plugin.configs.package = {
+  name: '@estiva-app/ui/package',
+  plugins: { [PLUGIN_KEY]: plugin },
+  rules: Object.fromEntries(PACKAGE_RULE_IDS.map((id) => [id, 'error'])),
 }
 
 export default plugin
@@ -80,20 +117,28 @@ export interface GateCount {
  * Run the lint with `settings: { estiva: { reportEscapes: true } }` for the
  * escapes to be counted; without it they are silent and count 0. A marker
  * with no reason, or inside a directive, counts as an error of its rule.
+ *
+ * `seed` is which rules the count lists when they found nothing, and it is the
+ * app rules unless a caller says otherwise: an app's count file must not gain
+ * rows for the inward rules (UIG-5) that its gate does not run. This package's
+ * own count script passes `PACKAGE_RULE_IDS`.
  */
-export function countGates(results: ESLint.LintResult[]): GateCount {
-  const counts: Record<string, GateRuleCount> = Object.fromEntries(ruleIds.map((id) => [id, { errors: 0, warnings: 0, escapes: 0 }]))
+export function countGates(results: ESLint.LintResult[], seed: readonly string[] = APP_RULE_IDS): GateCount {
+  const counts: Record<string, GateRuleCount> = Object.fromEntries(seed.map((id) => [id, { errors: 0, warnings: 0, escapes: 0 }]))
   const disabled: GateCount['disabled'] = []
+  const ours = (ruleId: string | null | undefined): ruleId is string => typeof ruleId === 'string' && ruleId.startsWith(`${PLUGIN_KEY}/`)
   for (const result of results) {
     for (const message of result.messages) {
-      const count = message.ruleId ? counts[message.ruleId] : undefined
-      if (!count) continue
+      // Seeded or not: every rule of this plugin that reported is counted, so a
+      // lint of a set the caller did not name is still counted in full.
+      if (!ours(message.ruleId)) continue
+      const count = (counts[message.ruleId] ??= { errors: 0, warnings: 0, escapes: 0 })
       if (message.messageId === 'escaped') count.escapes += 1
       else if (message.severity === 2) count.errors += 1
       else count.warnings += 1
     }
     for (const message of result.suppressedMessages ?? []) {
-      if (message.ruleId && counts[message.ruleId]) disabled.push({ filePath: result.filePath, line: message.line, ruleId: message.ruleId })
+      if (ours(message.ruleId)) disabled.push({ filePath: result.filePath, line: message.line, ruleId: message.ruleId })
     }
   }
   return { rules: counts, disabled }

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

@@ -0,0 +1,70 @@
+import { RuleTester } from 'eslint'
+import { parser } from 'typescript-eslint'
+import { describe, it } from 'vitest'
+import { noHandRolledBehaviour } from './no-hand-rolled-behaviour'
+
+RuleTester.describe = describe
+RuleTester.it = it
+RuleTester.itOnly = it.only
+
+const tester = new RuleTester({
+  languageOptions: { parser, parserOptions: { ecmaFeatures: { jsx: true } } },
+  linterOptions: { reportUnusedDisableDirectives: 'off' },
+})
+
+tester.run('no-hand-rolled-behaviour', noHandRolledBehaviour, {
+  valid: [
+    { name: 'a Base UI part doing its own portalling', code: "import { Popover } from '@base-ui/react/popover'\nexport const Probe = () => <Popover.Portal />\n" },
+    {
+      name: "a virtual anchor handed to Base UI, as Popover's",
+      code: 'export function probe(rect: DOMRect) {\n  return { getBoundingClientRect: () => rect }\n}\n',
+    },
+    {
+      name: "an element's own handler, which is not a global listener",
+      code: 'export function probe(el: HTMLElement) {\n  el.addEventListener("keydown", () => {})\n}\n',
+    },
+    {
+      name: 'a listener for something no floating part owns',
+      code: 'export function probe() {\n  window.addEventListener("online", () => {})\n}\n',
+    },
+    {
+      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",
+    },
+    {
+      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',
+    },
+    {
+      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',
+    },
+  ],
+  invalid: [
+    {
+      name: 'importing createPortal',
+      code: "import { createPortal } from 'react-dom'\nexport const Probe = () => null\n",
+      errors: [{ messageId: 'portal' }],
+    },
+    {
+      name: 'calling createPortal',
+      code: 'export function probe(to: HTMLElement) {\n  return createPortal(null, to)\n}\n',
+      errors: [{ messageId: 'portal' }],
+    },
+    {
+      name: 'following the anchor by hand',
+      code: 'export function probe() {\n  window.addEventListener("scroll", () => {})\n}\n',
+      errors: [{ messageId: 'listener', data: { event: 'scroll', target: 'window' } }],
+    },
+    {
+      name: 'closing on an outside press by hand',
+      code: 'export function probe() {\n  document.addEventListener("mousedown", () => {})\n}\n',
+      errors: [{ messageId: 'listener', data: { event: 'mousedown', target: 'document' } }],
+    },
+    {
+      name: 'closing on Escape by hand',
+      code: 'export function probe() {\n  document.addEventListener("keydown", () => {})\n}\n',
+      errors: [{ messageId: 'listener', data: { event: 'keydown', target: 'document' } }],
+    },
+  ],
+})

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

@@ -0,0 +1,116 @@
+import type { Rule } from 'eslint'
+import { ESCAPE_MESSAGES, isEscaped } from './escape'
+
+/**
+ * Behaviour Base UI already owns, written by hand inside the package (UIG-5,
+ * P1 — the migration's standing rule D6 as a machine).
+ *
+ * This is the rule with the most to lose. A hand-made portal or a global
+ * listener inside `DialogShell` is inherited by every caller in every app, and
+ * nobody sees it from there.
+ *
+ * Two facts, both mechanical, both the signature of a floating part rebuilt by
+ * hand:
+ *
+ * - **`createPortal`**, or importing it from `react-dom`. Base UI's parts carry
+ *   their own portal.
+ * - **a listener on `window` or `document`** for the events a floating part
+ *   lives on — resize, scroll, an outside press, a key. Base UI's Positioner
+ *   follows the anchor and its Root closes on an outside press and on Escape.
+ *
+ * What it deliberately does not try to read: measuring arithmetic. `Popover`
+ * hands Base UI a virtual anchor with a `getBoundingClientRect`, which is the
+ * documented way to anchor to a rectangle rather than an element, and a rule
+ * that guessed at arithmetic would report it. Anything that shape is caught by
+ * a reader, not by this.
+ *
+ * A place that keeps one says why on the line above: `// @estiva-escape: <why>`.
+ */
+const FLOATING_EVENTS = new Set(['resize', 'scroll', 'mousedown', 'pointerdown', 'keydown', 'keyup', 'focusin', 'focusout', 'click'])
+
+interface Node {
+  type: string
+  loc: NonNullable<Rule.Node['loc']>
+  range: [number, number]
+}
+
+interface Identifier extends Node {
+  name: string
+}
+
+interface ImportDeclaration extends Node {
+  source: { value: unknown }
+  specifiers: { type: string; imported?: { name?: string }; local?: { name?: string }; loc?: Rule.Node['loc']; range?: [number, number] }[]
+}
+
+interface CallExpression extends Node {
+  callee: { type: string; name?: string; object?: { type: string; name?: string }; property?: { type: string; name?: string } }
+  arguments: { type: string; value?: unknown }[]
+  parent?: { type: string; loc?: Rule.Node['loc']; range?: [number, number]; parent?: CallExpression['parent'] }
+}
+
+/**
+ * The statement a call sits in, which is what an escape is written above:
+ * `return createPortal(…)` puts the call in the middle of its line, and a
+ * comment above the line is above the statement.
+ */
+function statement(node: { loc: NonNullable<Rule.Node['loc']>; range: [number, number]; parent?: CallExpression['parent'] }): {
+  loc: NonNullable<Rule.Node['loc']>
+  range: [number, number]
+} {
+  for (let p = node.parent; p; p = p.parent) {
+    if (!/(Statement|Declaration)$/.test(p.type)) continue
+    if (p.loc && p.range) return { loc: p.loc, range: p.range }
+    break
+  }
+  return { loc: node.loc, range: node.range }
+}
+
+export const noHandRolledBehaviour: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: { description: 'Overlay behaviour written by hand where Base UI has a part (D6)' },
+    schema: [],
+    messages: {
+      portal:
+        'A portal written by hand. Base UI\'s parts carry their own (Popover, Menu, Select, Tooltip, Dialog, Toast): use the part, or say why this one stays.',
+      listener:
+        'A `{{event}}` listener on `{{target}}`. A floating part follows its anchor and closes on an outside press and on Escape by itself (Base UI Positioner and Root): use the part, or say why this one stays.',
+      ...ESCAPE_MESSAGES,
+    },
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node: Rule.Node) {
+        const declaration = node as unknown as ImportDeclaration
+        if (declaration.source.value !== 'react-dom') return
+        for (const specifier of declaration.specifiers) {
+          if (specifier.type !== 'ImportSpecifier' || specifier.imported?.name !== 'createPortal') continue
+          // The escape goes above the import line, not above the name inside it.
+          if (isEscaped(context, declaration)) return
+          context.report({ loc: declaration.loc, messageId: 'portal' })
+          return
+        }
+      },
+      CallExpression(node: Rule.Node) {
+        const call = node as unknown as CallExpression
+        const { callee } = call
+
+        if (callee.type === 'Identifier' && callee.name === 'createPortal') {
+          if (isEscaped(context, statement(call))) return
+          context.report({ loc: call.loc, messageId: 'portal' })
+          return
+        }
+
+        if (callee.type !== 'MemberExpression' || callee.property?.name !== 'addEventListener') return
+        const target = callee.object?.type === 'Identifier' ? callee.object.name : undefined
+        if (target !== 'window' && target !== 'document') return
+        const [first] = call.arguments
+        const event = first?.type === 'Literal' && typeof first.value === 'string' ? first.value : undefined
+        if (!event || !FLOATING_EVENTS.has(event)) return
+        if (isEscaped(context, statement(call))) return
+        context.report({ loc: call.loc, messageId: 'listener', data: { event, target } })
+      },
+    }
+  },
+}