@estiva-app/ui 0.18.0 → 0.19.0

package/README.md

@@ -67,20 +67,28 @@ export default {
 
 The UI Guardrails' rules ship with the package, as an ESLint plugin, so an app
 gets a new rule with a version bump. Each rule names the component to use
-instead. Today there is one: `estiva/no-raw-element`, which refuses a raw
-interactive element (`<a>`, `<input>`, `<form>`, `<dialog>`…) and names the part to
-use, or says the package has none yet.
+instead. There are two:
+
+- `estiva/no-raw-element` refuses a raw interactive element (`<a>`, `<input>`,
+  `<form>`, `<dialog>`…) and names the part to use, or says the package has none yet.
+- `estiva/no-rebuilt-behaviour` refuses behaviour a part already owns, written by
+  hand: a Base UI import, `createPortal`, a click or key listener on the whole
+  page, arrow keys compared by hand, a hand-written `role` (`option`, `menu`,
+  `dialog`, `alert`…), `tabIndex` 0 or more on a box, and a scrolling box
+  (`overflow-auto`, behind any variant). `OWNED_BEHAVIOURS` lists each behaviour,
+  the Base UI parts that do it, and the components that own it. It cannot find a
+  box that should scroll and does not: that has no class to read.
 
 ```js
 // eslint.config.js — alongside your own rules
 import estiva from '@estiva-app/ui/eslint'
 export default [
   // …your config, with a parser that reads TSX
-  { files: ['src/**/*.tsx'], ignores: ['**/*.test.tsx'], ...estiva.configs.recommended },
+  { files: ['src/**/*.{ts,tsx}'], ignores: ['**/*.test.{ts,tsx}'], ...estiva.configs.recommended },
 ]
 ```
 
-A place that keeps a raw element on purpose says why, on the line above:
+A place that keeps one on purpose says why, on the line above:
 
 ```tsx
 // @estiva-escape: the reason, at least ten characters

package/dist/Checkbox.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 /**
  * A 16px square that fills with the accent when checked — Peek's Checkbox
  * (2026-09-01), verbatim; on Base UI Checkbox since stage 1 of the migration
@@ -27,6 +28,12 @@
  * Read state panel's, where it was written by hand (UIG-7, 16 September). The
  * words keep their colour when the box is disabled (Katerina: "no need").
  *
+ * With `row`, the whole row is the target: an optional `leading` picture, the
+ * words, the box at the end, and the row fills on hover and while checked — a
+ * list you tick several from. The class list is Peek's "Add to Open work" rows,
+ * which drew it by hand as a `role="option"` in a list that was not one (UIG-8,
+ * Katerina's pick B, 16 September: the same pixels, on the package part).
+ *
  * Inside a busy `Form` it is disabled, and looks it (`formBusy.ts`).
  */
 export interface CheckboxProps {
@@ -38,10 +45,18 @@ export interface CheckboxProps {
      * they name it, so no `aria-label` is needed. `className` stays on the box.
      */
     label?: string;
+    /**
+     * The whole row is the target: `leading`, then the words, then the box at
+     * the end; the row fills on hover and while checked. For a list you tick
+     * several from. Needs `label` and `onChange`; without `onChange` it is ignored.
+     */
+    row?: boolean;
+    /** In a `row`, a picture before the words: an icon, a status. */
+    leading?: ReactNode;
     'aria-label'?: string;
     /** Set by a `Field` with `required`; a caller inside one owes nothing. */
     'aria-required'?: boolean | 'true' | 'false';
     className?: string;
 }
-export declare function Checkbox({ checked, onChange, disabled: ownDisabled, label, className, ...aria }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ checked, onChange, disabled: ownDisabled, label, row, leading, className, ...aria }: CheckboxProps): import("react").JSX.Element;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0EAA0E;IAC1E,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiBD,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAmB,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,+BA6CtH"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0EAA0E;IAC1E,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmBD,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAmB,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,+BAyDpI"}

package/dist/ScrollArea.d.ts

@@ -27,6 +27,12 @@ import type { ReactNode, Ref, UIEventHandler } from 'react';
  * the thin scrollbar both apps had styled by hand in their `index.css`, drawn
  * once here instead.
  *
+ * The bar sits above the content (`z-10`). A sticky row inside — a date line
+ * in a conversation, `sticky top-0 z-10` — is at the same level, and the bar
+ * comes after the content in the page, so it paints on top. Without it the
+ * row hid the bar wherever it crossed it: a gap in the thumb, in Peek's topic
+ * and direct-message lists (UIG-8, 16 September).
+ *
  * `orientation` says which way the region scrolls; a table that is wider
  * than its box scrolls `horizontal`, a list `vertical` (the default), a board
  * `both`. A vertical region keeps its content no wider than itself, so a

package/dist/ScrollArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../src/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAChD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACjC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IACzC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAKD,wBAAgB,UAAU,CAAC,EAAE,WAAwB,EAAE,SAAS,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,eAAe,+BA4CxJ"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../src/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAChD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACjC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IACzC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAKD,wBAAgB,UAAU,CAAC,EAAE,WAAwB,EAAE,SAAS,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,eAAe,+BA4CxJ"}

package/dist/eslint/index.d.ts

@@ -1,5 +1,6 @@
 import type { ESLint, Linter } from 'eslint';
 export { ESCAPE_MARKER, MIN_REASON, SETTINGS_KEY, isEscaped, type EstivaSettings } from './escape';
+export { OWNED_BEHAVIOURS, type OwnedBehaviour } from './no-rebuilt-behaviour';
 /** The name the configs register the plugin under, so every rule id is `estiva/<rule>`. */
 export declare const PLUGIN_KEY = "estiva";
 declare const plugin: {
@@ -13,6 +14,7 @@ declare const plugin: {
         'component-has-a-page': import("eslint").Rule.RuleModule;
         'component-has-a-story': import("eslint").Rule.RuleModule;
         'no-raw-element': import("eslint").Rule.RuleModule;
+        'no-rebuilt-behaviour': import("eslint").Rule.RuleModule;
     };
     configs: {
         recommended: Linter.Config;

package/dist/eslint/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eslint/index.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAM5C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAIlG,2FAA2F;AAC3F,eAAO,MAAM,UAAU,WAAW,CAAA;AA+BlC,QAAA,MAAM,MAAM;;;;;;;;;;;;aAGK;QAAE,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAA;KAAE;CACrE,CAAA;AAEzB,qFAAqF;AACrF,eAAO,MAAM,YAAY,UAA+D,CAAA;AACxF,wFAAwF;AACxF,eAAO,MAAM,gBAAgB,UAAmE,CAAA;AA0BhG,eAAe,MAAM,CAAA;AAErB,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IACpC;;;OAGG;IACH,QAAQ,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC/D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,IAAI,GAAE,SAAS,MAAM,EAAiB,GAAG,SAAS,CAmB1G"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eslint/index.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAO5C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAA;AAClG,OAAO,EAAE,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAI9E,2FAA2F;AAC3F,eAAO,MAAM,UAAU,WAAW,CAAA;AAiClC,QAAA,MAAM,MAAM;;;;;;;;;;;;;aAGK;QAAE,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAA;KAAE;CACrE,CAAA;AAEzB,qFAAqF;AACrF,eAAO,MAAM,YAAY,UAA+D,CAAA;AACxF,wFAAwF;AACxF,eAAO,MAAM,gBAAgB,UAAmE,CAAA;AA6BhG,eAAe,MAAM,CAAA;AAErB,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IACpC;;;OAGG;IACH,QAAQ,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAC/D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,EAAE,IAAI,GAAE,SAAS,MAAM,EAAiB,GAAG,SAAS,CAmB1G"}

package/dist/eslint/index.js

@@ -262,6 +262,458 @@ var noRawElement = {
   }
 };
 
+// src/eslint/no-rebuilt-behaviour.ts
+var BASE_UI_PARTS = {
+  "alert-dialog": { use: "DialogShell", more: " To ask yes or no, `ConfirmDialog`." },
+  autocomplete: { use: "CommandPalette" },
+  avatar: { use: "Avatar" },
+  button: { use: "Button", more: " Icon only, `IconButton`." },
+  checkbox: { use: "Checkbox" },
+  collapsible: { use: "CollapsibleSection" },
+  combobox: { use: "ChipInput" },
+  dialog: { use: "DialogShell", more: " To search and act, `CommandPalette`." },
+  field: { use: "Field" },
+  fieldset: { use: "Form" },
+  form: { use: "Form" },
+  input: { use: "TextInput", more: " For a search, `SearchInput`." },
+  menu: { use: "Menu" },
+  popover: { use: "Popover" },
+  "preview-card": { use: "PreviewCard" },
+  progress: { use: "ProgressBar" },
+  "scroll-area": { use: "ScrollArea" },
+  select: { use: "Select" },
+  separator: { use: "Divider" },
+  tabs: { use: "Tabs" },
+  toast: { use: "Toast" },
+  toggle: { use: "Reaction" },
+  toolbar: { use: "Toolbar" },
+  tooltip: { use: "Tooltip", more: " Around a control, `WithTooltip`." },
+  accordion: null,
+  "checkbox-group": null,
+  "context-menu": null,
+  drawer: null,
+  menubar: null,
+  meter: null,
+  "navigation-menu": null,
+  "number-field": null,
+  "otp-field": null,
+  radio: null,
+  "radio-group": null,
+  slider: null,
+  switch: null,
+  "toggle-group": null
+};
+var LIST_PART = {
+  use: "Select",
+  more: " To pick several, `ChipInput`; to search and act, `CommandPalette`; to tick several in a list, `Checkbox` with `row`."
+};
+var MESSAGE_PART = { use: "FieldLine", more: " For a notice, `Banner`; for a message that comes and goes, `Toast`." };
+var ROLE_PARTS = {
+  dialog: { thing: "dialog", part: { use: "DialogShell", more: " To ask yes or no, `ConfirmDialog`." } },
+  alertdialog: { thing: "dialog", part: { use: "ConfirmDialog" } },
+  menu: { thing: "menu", part: { use: "Menu" } },
+  menuitem: { thing: "menu", part: { use: "Menu" } },
+  menuitemcheckbox: { thing: "menu", part: { use: "Menu" } },
+  menuitemradio: { thing: "menu", part: { use: "Menu" } },
+  listbox: { thing: "list", part: LIST_PART },
+  option: { thing: "list", part: LIST_PART },
+  combobox: { thing: "list", part: LIST_PART },
+  tablist: { thing: "set of tabs", part: { use: "Tabs" } },
+  tab: { thing: "set of tabs", part: { use: "Tabs" } },
+  tabpanel: { thing: "set of tabs", part: { use: "Tabs" } },
+  toolbar: { thing: "toolbar", part: { use: "Toolbar" } },
+  progressbar: { thing: "progress bar", part: { use: "ProgressBar" } },
+  checkbox: { thing: "tick box", part: { use: "Checkbox" } },
+  separator: { thing: "divider", part: { use: "Divider" } },
+  button: { thing: "button", part: { use: "Button", more: " Icon only, `IconButton`." } },
+  link: { thing: "link", part: { use: "Link" } },
+  tooltip: { thing: "tooltip", part: { use: "Tooltip", more: " Around a control, `WithTooltip`." } },
+  alert: { thing: "message", part: MESSAGE_PART },
+  status: { thing: "message", part: MESSAGE_PART },
+  menubar: { thing: "menu bar", part: null },
+  switch: { thing: "switch", part: null },
+  radio: { thing: "radio button", part: null },
+  radiogroup: { thing: "radio group", part: null },
+  slider: { thing: "slider", part: null },
+  spinbutton: { thing: "number field", part: null },
+  meter: { thing: "meter", part: null }
+};
+var WALKING_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"];
+var PAGE_EVENTS = {
+  mousedown: "press",
+  pointerdown: "press",
+  click: "press",
+  touchstart: "press",
+  keydown: "key",
+  keyup: "key",
+  keypress: "key",
+  focusin: "focus",
+  focusout: "focus",
+  scroll: "follow",
+  resize: "follow"
+};
+var INTERACTIVE_ELEMENTS = /* @__PURE__ */ new Set(["a", "button", "input", "select", "textarea", "summary", "iframe", "embed", "object", "audio", "video"]);
+var SCROLL_CLASS = /^overflow(?:-[xy])?-(?:auto|scroll)$/;
+var uses = (parts) => [
+  ...new Set(parts.flatMap((p) => p ? [p.use, ...[...(p.more ?? "").matchAll(/`([A-Z]\w+)`/g)].map((m) => m[1])] : []))
+];
+var OWNED_BEHAVIOURS = [
+  {
+    id: "base-ui",
+    behaviour: "Is built on Base UI",
+    baseUi: Object.keys(BASE_UI_PARTS),
+    owners: uses(Object.values(BASE_UI_PARTS)),
+    reads: "an import from @base-ui/react (and the old @base-ui-components spelling)"
+  },
+  {
+    id: "portal",
+    behaviour: "Floats on top of the page",
+    baseUi: ["Dialog", "AlertDialog", "Popover", "Menu", "Select", "Combobox", "Autocomplete", "Tooltip", "PreviewCard", "Toast"],
+    owners: ["DialogShell", "ConfirmDialog", "CommandPalette", "Popover", "Menu", "Select", "ChipInput", "Tooltip", "PreviewCard", "Toast"],
+    reads: "createPortal, called, or imported and never called"
+  },
+  {
+    id: "press-outside",
+    behaviour: "Closes on a press outside",
+    baseUi: ["Dialog", "AlertDialog", "Popover", "Menu", "Select", "Combobox", "Tooltip", "PreviewCard"],
+    owners: ["DialogShell", "Popover", "Menu", "Select", "PreviewCard"],
+    reads: "a mousedown, pointerdown, click or touchstart listener on window or document"
+  },
+  {
+    id: "page-keys",
+    behaviour: "Closes on Escape, and takes its keys, by itself",
+    baseUi: ["Dialog", "AlertDialog", "Popover", "Menu", "Select", "Combobox", "Tooltip", "PreviewCard", "Toast"],
+    owners: ["DialogShell", "Popover", "Menu", "Select", "Tabs", "Toolbar"],
+    reads: "a keydown, keyup or keypress listener on window or document"
+  },
+  {
+    id: "focus",
+    behaviour: "Holds focus inside while open, and gives it back",
+    baseUi: ["Dialog", "AlertDialog", "Popover", "Menu", "Select", "Combobox"],
+    owners: ["DialogShell", "CommandPalette"],
+    reads: "a focusin or focusout listener on window or document; the Tab key compared by hand"
+  },
+  {
+    id: "scroll-lock",
+    behaviour: "Stops the page behind it scrolling",
+    baseUi: ["Dialog", "AlertDialog"],
+    owners: ["DialogShell"],
+    reads: "overflow written into the style of document.body or document.documentElement"
+  },
+  {
+    id: "follow",
+    behaviour: "Stays attached to its anchor on scroll and resize",
+    baseUi: ["Popover", "Menu", "Select", "Combobox", "Tooltip", "PreviewCard", "Toast"],
+    owners: ["Popover", "Menu", "Select", "Tooltip", "PreviewCard"],
+    reads: "a scroll or resize listener on window or document"
+  },
+  {
+    id: "walking",
+    behaviour: "Moves through its items with the arrow keys",
+    baseUi: ["Menu", "Select", "Combobox", "Autocomplete", "Tabs", "Toolbar"],
+    owners: ["Menu", "Select", "ChipInput", "CommandPalette", "Tabs", "Toolbar"],
+    reads: `a key compared by hand with ${WALKING_KEYS.join(", ")}`
+  },
+  {
+    id: "role",
+    behaviour: "Says what it is to assistive technology",
+    baseUi: ["Dialog", "AlertDialog", "Menu", "Select", "Combobox", "Tabs", "Toolbar", "Progress", "Checkbox", "Separator", "Button"],
+    owners: uses(Object.values(ROLE_PARTS).map((r) => r.part)),
+    reads: `role written by hand: ${Object.keys(ROLE_PARTS).join(", ")}`
+  },
+  {
+    id: "tab-stop",
+    behaviour: "Is reachable with Tab",
+    baseUi: ["Button", "Toggle", "Checkbox", "Tabs", "Toolbar", "ScrollArea"],
+    owners: ["Button", "IconButton", "Link"],
+    reads: "tabIndex that can be 0 or more, on an element that is not a control"
+  },
+  {
+    id: "scroll",
+    behaviour: "Scrolls with our scrollbar",
+    baseUi: ["ScrollArea"],
+    owners: ["ScrollArea"],
+    reads: "overflow-auto or overflow-scroll (x or y, behind any variant) in a string, or overflow auto or scroll in a style"
+  }
+];
+var PAGE_TARGETS = /* @__PURE__ */ new Set(["window", "document", "globalThis", "self", "document.body", "document.documentElement", "window.document"]);
+function anchorOf(node) {
+  if (node.type === "FunctionDeclaration") {
+    return node.parent && /^Export/.test(node.parent.type) ? node.parent : node;
+  }
+  let child = node;
+  for (let p = node.parent; p; child = p, p = p.parent) {
+    if (p.type === "JSXOpeningElement" || p.type === "Property" || p.type === "MethodDefinition" || p.type === "PropertyDefinition") return p;
+    if (p.type === "ArrayExpression") return child;
+    if (p.type !== "BlockStatement" && /(Statement|Declaration)$/.test(p.type)) return p;
+  }
+  return node;
+}
+function enclosingFunction(node) {
+  for (let p = node.parent; p; p = p.parent) {
+    if (p.type === "FunctionDeclaration" || p.type === "FunctionExpression" || p.type === "ArrowFunctionExpression") return p;
+  }
+  return void 0;
+}
+function stringOf(node) {
+  if (!node) return void 0;
+  if (node.type === "Literal" && typeof node.value === "string") return node.value;
+  const quasis = node.quasis;
+  const expressions = node.expressions;
+  if (node.type === "TemplateLiteral" && expressions?.length === 0) return quasis?.[0]?.value.cooked ?? void 0;
+  return void 0;
+}
+function stringsOf(node) {
+  if (!node) return [];
+  if (node.type === "JSXExpressionContainer") return stringsOf(node.expression);
+  const s = stringOf(node);
+  if (s !== void 0) return [s];
+  if (node.type === "ConditionalExpression") return [...stringsOf(node.consequent), ...stringsOf(node.alternate)];
+  if (node.type === "LogicalExpression") return [...stringsOf(node.left), ...stringsOf(node.right)];
+  return [];
+}
+function canBeTabStop(node) {
+  if (!node) return false;
+  if (node.type === "JSXExpressionContainer") return canBeTabStop(node.expression);
+  if (node.type === "Literal") {
+    if (typeof node.value === "number") return node.value >= 0;
+    if (typeof node.value === "string") return /^\s*\d+\s*$/.test(node.value);
+    return false;
+  }
+  if (node.type === "ConditionalExpression") return canBeTabStop(node.consequent) || canBeTabStop(node.alternate);
+  if (node.type === "LogicalExpression") return canBeTabStop(node.left) || canBeTabStop(node.right);
+  if (node.type === "TSAsExpression" || node.type === "TSNonNullExpression") return canBeTabStop(node.expression);
+  return false;
+}
+function utilityOf(token) {
+  let depth = 0;
+  let last = -1;
+  for (let i = 0; i < token.length; i++) {
+    const c = token[i];
+    if (c === "[") depth++;
+    else if (c === "]") depth--;
+    else if (c === ":" && depth === 0) last = i;
+  }
+  return token.slice(last + 1).replace(/^!/, "").replace(/!$/, "");
+}
+function baseUiModule(source) {
+  const m = /^@base-ui(?:-components)?\/([^/]+)(?:\/(.+))?$/.exec(source);
+  if (!m) return void 0;
+  const [, pkg, sub] = m;
+  return pkg === "react" ? sub ?? "" : `${pkg}${sub ? `/${sub}` : ""}`;
+}
+function isKeySubject(node) {
+  if (!node) return false;
+  if (node.type === "Identifier") return node.name === "key" || node.name === "code";
+  if (node.type !== "MemberExpression" || node.computed) return false;
+  const property = node.property;
+  return property.type === "Identifier" && (property.name === "key" || property.name === "code");
+}
+function pageTarget(node, text) {
+  return (node.type === "Identifier" || node.type === "MemberExpression") && PAGE_TARGETS.has(text);
+}
+var noRebuiltBehaviour = {
+  meta: {
+    type: "problem",
+    docs: { description: "Behaviour @estiva-app/ui already owns, rebuilt by hand in an app" },
+    schema: [],
+    messages: {
+      baseUi: "Only @estiva-app/ui imports Base UI (`{{module}}`). Use `{{use}}` from @estiva-app/ui.{{more}}",
+      baseUiNoPart: "Only @estiva-app/ui imports Base UI (`{{module}}`), and it has no part built on it yet. Do not build one here: ask Katerina, and it gets made in @estiva-app/ui.",
+      portal: "A layer put on top of the page by hand (`createPortal`). Every floating part of @estiva-app/ui carries its own: `DialogShell` for a dialog, `Popover` for a panel, `Menu`, `Select`, `Tooltip`, `PreviewCard`, `Toast`.",
+      press: "A `{{event}}` listener on `{{target}}`: closing on a press outside, by hand. `Popover`, `Menu`, `Select`, `DialogShell` and `PreviewCard` from @estiva-app/ui close themselves.",
+      key: "A `{{event}}` listener on `{{target}}`: keys taken for the whole page, by hand. `DialogShell`, `Popover`, `Menu` and `Select` from @estiva-app/ui close on Escape themselves; `Menu`, `Select`, `Tabs` and `Toolbar` move with the arrow keys.",
+      focus: "A `{{event}}` listener on `{{target}}`: focus held by hand. `DialogShell` and `CommandPalette` from @estiva-app/ui keep focus inside and give it back.",
+      follow: "A `{{event}}` listener on `{{target}}`: following an anchor by hand. `Popover`, `Menu`, `Select`, `Tooltip` and `PreviewCard` from @estiva-app/ui stay attached to theirs.",
+      scrollLock: "The page's scroll locked by hand. `DialogShell` from @estiva-app/ui stops the page scrolling while it is open, and gives it back.",
+      walking: "Arrow keys handled by hand (`{{key}}`). `Menu`, `Select`, `ChipInput`, `CommandPalette`, `Tabs` and `Toolbar` from @estiva-app/ui move through their items themselves.",
+      tabKey: "The Tab key handled by hand. `DialogShell` and `CommandPalette` from @estiva-app/ui keep focus inside themselves.",
+      role: 'A hand-written `role="{{role}}"` is a hand-made {{thing}}. Use `{{use}}` from @estiva-app/ui.{{more}}',
+      roleNoPart: 'A hand-written `role="{{role}}"` is a hand-made {{thing}}, and @estiva-app/ui has no part for one yet. Do not build one here: ask Katerina, and it gets made in @estiva-app/ui.',
+      tabStop: "`tabIndex={{value}}` makes a `<{{element}}>` a Tab stop by hand. Use `Button`, `IconButton` or `Link` from @estiva-app/ui, which are reachable already.",
+      scrollClass: "`{{token}}` scrolls with the browser's scrollbar. Use `ScrollArea` from @estiva-app/ui, which draws ours.",
+      scrollStyle: "`{{style}}` scrolls with the browser's scrollbar. Use `ScrollArea` from @estiva-app/ui, which draws ours.",
+      ...ESCAPE_MESSAGES
+    }
+  },
+  create(context) {
+    const { sourceCode } = context;
+    const text = (node) => sourceCode.getText(node);
+    const escapes = /* @__PURE__ */ new Map();
+    const escaped = (anchor) => {
+      if (!escapes.has(anchor)) escapes.set(anchor, isEscaped(context, anchor));
+      return escapes.get(anchor) === true;
+    };
+    const seen = /* @__PURE__ */ new Set();
+    const report = (anchor, at, messageId, data = {}, once = `${at.range[0]}`) => {
+      const key = `${anchor.range[0]}|${messageId}|${once}`;
+      if (seen.has(key)) return;
+      seen.add(key);
+      if (escaped(anchor)) return;
+      context.report({ loc: at.loc, messageId, data });
+    };
+    const importSource = (node, source) => {
+      const value = stringOf(source);
+      if (value === void 0) return;
+      const module = baseUiModule(value);
+      if (module === void 0) return;
+      const part = Object.hasOwn(BASE_UI_PARTS, module) ? BASE_UI_PARTS[module] : null;
+      const anchor = anchorOf(node);
+      if (part) report(anchor, node, "baseUi", { module: value, use: part.use, more: part.more ?? "" });
+      else report(anchor, node, "baseUiNoPart", { module: value });
+    };
+    const keyCompared = (node, key) => {
+      if (key === void 0) return;
+      const fn = enclosingFunction(node);
+      const anchor = anchorOf(fn ?? node);
+      if (WALKING_KEYS.includes(key)) report(anchor, node, "walking", { key }, `walking@${fn?.range[0] ?? node.range[0]}`);
+      else if (key === "Tab") report(anchor, node, "tabKey", {}, `tab@${fn?.range[0] ?? node.range[0]}`);
+    };
+    const classTokens = (node, value) => {
+      for (const token of value.split(/\s+/)) {
+        if (token && SCROLL_CLASS.test(utilityOf(token))) report(anchorOf(node), node, "scrollClass", { token }, `class@${token}`);
+      }
+    };
+    const portalImports = /* @__PURE__ */ new Map();
+    let portalCalled = false;
+    return {
+      ImportDeclaration(ruleNode) {
+        const node = ruleNode;
+        importSource(node, node.source);
+        if (stringOf(node.source) !== "react-dom") return;
+        for (const specifier of node.specifiers) {
+          const imported = specifier.imported;
+          if (specifier.type === "ImportSpecifier" && imported?.name === "createPortal") portalImports.set(specifier.local.name, node);
+        }
+      },
+      ExportNamedDeclaration(ruleNode) {
+        const node = ruleNode;
+        if (node.source) importSource(node, node.source);
+      },
+      ExportAllDeclaration(ruleNode) {
+        const node = ruleNode;
+        importSource(node, node.source);
+      },
+      ImportExpression(ruleNode) {
+        const node = ruleNode;
+        importSource(node, node.source);
+      },
+      CallExpression(ruleNode) {
+        const node = ruleNode;
+        const callee = node.callee;
+        const args = node.arguments;
+        if (callee.type === "Identifier" && callee.name === "require") importSource(node, args[0]);
+        if (callee.type === "Identifier" && portalImports.has(callee.name)) {
+          portalCalled = true;
+          report(anchorOf(node), node, "portal");
+        }
+        if (callee.type !== "MemberExpression") return;
+        const object = callee.object;
+        const property = callee.property;
+        if (property.type !== "Identifier") return;
+        if (property.name === "createPortal") {
+          report(anchorOf(node), node, "portal");
+          return;
+        }
+        if (property.name === "addEventListener") {
+          const target = text(object);
+          if (!pageTarget(object, target)) return;
+          const event = stringOf(args[0]);
+          const group = event === void 0 ? void 0 : PAGE_EVENTS[event];
+          if (!event || !group) return;
+          report(anchorOf(node), node, group, { event, target });
+          return;
+        }
+        if (property.name === "includes" && object.type === "ArrayExpression" && isKeySubject(args[0])) {
+          for (const element of object.elements) keyCompared(node, stringOf(element));
+        }
+      },
+      AssignmentExpression(ruleNode) {
+        const node = ruleNode;
+        const left = node.left;
+        if (left.type !== "MemberExpression") return;
+        const property = left.property;
+        const object = left.object;
+        const handler = property.type === "Identifier" ? /^on([a-z]+)$/.exec(property.name) : null;
+        if (handler && pageTarget(object, text(object)) && PAGE_EVENTS[handler[1]]) {
+          report(anchorOf(node), node, PAGE_EVENTS[handler[1]], { event: handler[1], target: text(object) });
+          return;
+        }
+        if (/^document\.(?:body|documentElement)\.style\.overflow[XY]?$/.test(text(left))) report(anchorOf(node), node, "scrollLock");
+      },
+      BinaryExpression(ruleNode) {
+        const node = ruleNode;
+        if (!["===", "==", "!==", "!="].includes(node.operator)) return;
+        const left = node.left;
+        const right = node.right;
+        if (isKeySubject(left)) keyCompared(node, stringOf(right));
+        else if (isKeySubject(right)) keyCompared(node, stringOf(left));
+      },
+      SwitchCase(ruleNode) {
+        const node = ruleNode;
+        const statement2 = node.parent;
+        if (node.test && isKeySubject(statement2.discriminant)) keyCompared(node, stringOf(node.test));
+      },
+      JSXAttribute(ruleNode) {
+        const node = ruleNode;
+        const nameNode = node.name;
+        if (nameNode.type !== "JSXIdentifier") return;
+        const name = nameNode.name;
+        const element = node.parent;
+        const value = node.value;
+        if (name === "role") {
+          for (const role of stringsOf(value).flatMap((v) => v.trim().split(/\s+/))) {
+            if (!Object.hasOwn(ROLE_PARTS, role)) continue;
+            const { thing, part } = ROLE_PARTS[role];
+            if (part) report(element, node, "role", { role, thing, use: part.use, more: part.more ?? "" });
+            else report(element, node, "roleNoPart", { role, thing });
+            return;
+          }
+          return;
+        }
+        if (name === "tabIndex" || name === "tabindex") {
+          const tag = element.name;
+          if (tag.type !== "JSXIdentifier" || !/^[a-z]/.test(tag.name) || INTERACTIVE_ELEMENTS.has(tag.name)) return;
+          const attributes = element.attributes;
+          const editable = attributes.some((a) => a.type === "JSXAttribute" && /^contenteditable$/i.test(a.name.name ?? ""));
+          if (editable || !canBeTabStop(value)) return;
+          report(element, node, "tabStop", { value: value ? text(value).replace(/^\{|\}$/g, "") : "", element: tag.name });
+          return;
+        }
+        if (name === "style" && value?.type === "JSXExpressionContainer") {
+          const object = value.expression;
+          if (object.type !== "ObjectExpression") return;
+          for (const property of object.properties) {
+            if (property.type !== "Property") continue;
+            const key = property.key;
+            const keyName = key.type === "Identifier" ? key.name : stringOf(key);
+            if (!keyName || !/^overflow[XY]?$/.test(keyName)) continue;
+            const setting = stringOf(property.value);
+            if (setting === "auto" || setting === "scroll") report(element, property, "scrollStyle", { style: `${keyName}: '${setting}'` }, `style@${keyName}`);
+          }
+        }
+      },
+      Literal(ruleNode) {
+        const node = ruleNode;
+        if (typeof node.value !== "string") return;
+        const parent = node.parent;
+        if (parent && /^(Import|Export)/.test(parent.type)) return;
+        if (parent?.type === "TSLiteralType" || parent?.type === "TSExternalModuleReference") return;
+        classTokens(node, node.value);
+      },
+      TemplateElement(ruleNode) {
+        const node = ruleNode;
+        const cooked = node.value.cooked;
+        if (cooked && node.parent) classTokens(node.parent, cooked);
+      },
+      "Program:exit"() {
+        if (portalCalled) return;
+        for (const declaration of new Set(portalImports.values())) report(anchorOf(declaration), declaration, "portal");
+      }
+    };
+  }
+};
+
 // src/eslint/raw-element-outside-a-wrapper.ts
 var RAW_ELEMENTS = /* @__PURE__ */ new Set(["a", "button", "input", "textarea", "select", "dialog", "form", "label"]);
 var rawElementOutsideAWrapper = {
@@ -302,7 +754,8 @@ var rawElementOutsideAWrapper = {
 var { version } = createRequire(import.meta.url)("../../package.json");
 var PLUGIN_KEY = "estiva";
 var appRules = {
-  "no-raw-element": noRawElement
+  "no-raw-element": noRawElement,
+  "no-rebuilt-behaviour": noRebuiltBehaviour
 };
 var packageRules = {
   "raw-element-outside-a-wrapper": rawElementOutsideAWrapper,
@@ -321,7 +774,10 @@ var PACKAGE_RULE_IDS = Object.keys(packageRules).map((name) => `${PLUGIN_KEY}/${
 plugin.configs.recommended = {
   name: "@estiva-app/ui/recommended",
   plugins: { [PLUGIN_KEY]: plugin },
-  rules: { [`${PLUGIN_KEY}/no-raw-element`]: "error" }
+  rules: {
+    [`${PLUGIN_KEY}/no-raw-element`]: "error",
+    [`${PLUGIN_KEY}/no-rebuilt-behaviour`]: "error"
+  }
 };
 plugin.configs.strict = {
   name: "@estiva-app/ui/strict",
@@ -356,6 +812,7 @@ export {
   APP_RULE_IDS,
   ESCAPE_MARKER,
   MIN_REASON,
+  OWNED_BEHAVIOURS,
   PACKAGE_RULE_IDS,
   PLUGIN_KEY,
   SETTINGS_KEY,