@estiva-app/ui 0.17.0 → 0.19.0

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,