@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/eslint/rules/kbd-children-no-modifier-text.js

@@ -0,0 +1,128 @@
+/*
+ * A shortcut hint is `<Kbd meta>K</Kbd>`: the modifier is a flag, the child is
+ * one key from `KBD_KEYS`, and the component draws the person's platform. A
+ * hand-written ⌘ or "Ctrl" is right on one platform and wrong on the others.
+ *
+ * Standard tool checked first: `no-restricted-syntax` can match a `Kbd` child
+ * by text, but not whether this `Kbd` is the package's (an import binding, so a
+ * renamed or local `Kbd` is judged correctly), and it would need the key list
+ * spelled into a regex. The list is read from the package's own `KBD_KEYS`
+ * array at lint time, so a key added there changes this rule's answer with no
+ * edit here.
+ */
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
+
+import { packageModules, partOf, renderedImports } from "./rendered-import.js";
+
+const KBD_MODULE = "@nadicodeai/ui/components/kbd";
+const OWNER_FILE = "packages/ui/src/components/kbd.tsx";
+
+const KBD = new Map([["Kbd", packageModules("kbd").map((from) => ({ from, part: "Kbd" }))]]);
+
+/*
+ * TypeScript is loaded when this rule first runs, not when the plugin loads:
+ * the plugin ships inside `@nadicodeai/ui`, which does not depend on the
+ * compiler, and a consumer who never enables this rule never asks for it.
+ */
+let ts;
+function typescript() {
+  ts ??= createRequire(import.meta.url)("typescript");
+  return ts;
+}
+
+function arrayLiteralOf(ts, expression) {
+  let node = expression;
+  while (
+    node &&
+    (ts.isAsExpression(node) ||
+      ts.isSatisfiesExpression(node) ||
+      ts.isParenthesizedExpression(node))
+  ) {
+    node = node.expression;
+  }
+  return node && ts.isArrayLiteralExpression(node) ? node : null;
+}
+
+function readKeys() {
+  const ts = typescript();
+  const file = fileURLToPath(import.meta.resolve(KBD_MODULE));
+  const source = ts.createSourceFile(
+    file,
+    readFileSync(file, "utf8"),
+    ts.ScriptTarget.Latest,
+    false,
+    file.endsWith(".js") ? ts.ScriptKind.JS : ts.ScriptKind.TSX,
+  );
+  for (const statement of source.statements) {
+    if (!ts.isVariableStatement(statement)) continue;
+    for (const declaration of statement.declarationList.declarations) {
+      if (!ts.isIdentifier(declaration.name) || declaration.name.text !== "KBD_KEYS") continue;
+      const array = arrayLiteralOf(ts, declaration.initializer);
+      if (!array) break;
+      return new Set(array.elements.map((element) => element.text));
+    }
+  }
+  throw new Error(`${file} has no KBD_KEYS array literal to read the keys from.`);
+}
+
+let keys;
+
+/** Read once per lint process; the built module does not move under it. */
+function kbdKeys() {
+  keys ??= readKeys();
+  return keys;
+}
+
+function writtenText(child) {
+  if (child.type === "JSXText") return child.value.trim() === "" ? null : child.value.trim();
+  if (child.type !== "JSXExpressionContainer") return null;
+  const { expression } = child;
+  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- ESTree types Literal.value as string | number | boolean | RegExp | bigint | null; only typeof picks the string.
+  if (expression.type === "Literal" && typeof expression.value === "string") {
+    return expression.value;
+  }
+  if (expression.type === "TemplateLiteral" && expression.expressions.length === 0) {
+    return expression.quasis[0].value.cooked;
+  }
+  return null;
+}
+
+export const kbdChildrenNoModifierText = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A Kbd child is one key from KBD_KEYS with the modifier as a flag, and a shortcut is never a lowercase kbd element.",
+    },
+    schema: [],
+    messages: {
+      "hand-written-key":
+        "Write the modifier as a flag, <Kbd meta>K</Kbd>, and the child as one key from KBD_KEYS. A hand-written glyph shows the wrong key on Windows and Linux.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const ownsTheElement = context.filename.replaceAll("\\", "/").endsWith(`/${OWNER_FILE}`);
+
+    return {
+      JSXElement(node) {
+        const name = node.openingElement.name;
+        if (name.type === "JSXIdentifier" && name.name === "kbd") {
+          if (!ownsTheElement) {
+            context.report({ node: node.openingElement, messageId: "hand-written-key" });
+          }
+          return;
+        }
+        if (partOf(importOf(name), KBD, context.filename) !== "Kbd") return;
+        for (const child of node.children) {
+          const text = writtenText(child);
+          if (text !== null && !kbdKeys().has(text)) {
+            context.report({ node: child, messageId: "hand-written-key" });
+          }
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/literal-text.js

@@ -0,0 +1,41 @@
+import { staticAttribute } from "./rendered-import.js";
+
+/** The string a Literal or a template without expressions states, else null. */
+export function literalText(node) {
+  if (!node) return null;
+  if (node.type === "Literal") {
+    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- ESTree types Literal.value as string | number | boolean | RegExp | bigint | null; only typeof picks the string.
+    return typeof node.value === "string" ? node.value : null;
+  }
+  if (node.type === "TemplateLiteral" && node.expressions.length === 0) {
+    return node.quasis[0].value.cooked;
+  }
+  return null;
+}
+
+/** The text a JSX element's children state when all of them are literal text, else null. */
+export function childText(element) {
+  let text = "";
+  for (const child of element.children) {
+    if (child.type === "JSXText") text += child.value;
+    else if (child.type === "JSXExpressionContainer" && literalText(child.expression) !== null) {
+      text += literalText(child.expression);
+    } else return null;
+  }
+  const trimmed = text.replace(/\s+/g, " ").trim();
+  return trimmed === "" ? null : trimmed;
+}
+
+/** The key an object property names, else null. */
+export function keyName(property) {
+  if (property.type !== "Property" || property.computed) return null;
+  if (property.key.type === "Identifier") return property.key.name;
+  return literalText(property.key);
+}
+
+/** An attribute's value when the source states it as a string, else null. */
+export function stringAttribute(openingElement, name) {
+  const value = staticAttribute(openingElement, name);
+  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- staticAttribute returns true, a number or a string; only typeof picks the string.
+  return typeof value === "string" ? value : null;
+}

package/dist/eslint/rules/middle-truncate-placement.js

@@ -0,0 +1,69 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` descendant selector can
+ * match `MiddleTruncate` under an element by name, but not that the name is the
+ * design system's import, that the class sits in a `cn(...)` call or a
+ * same-file table, nor that the nearest control carries an `aria-label`
+ * without a second selector per spelling.
+ */
+import { openingElementClassUtilities } from "./jsx-class-utility.js";
+import { renderedImports } from "./rendered-import.js";
+
+const FROM_DESIGN_SYSTEM = /^(@nadicodeai\/ui(\/|$)|@\/|\.)/;
+const CONTROLS = new Set(["Button", "ButtonLink", "TextLink"]);
+const HOST_CONTROLS = new Set(["a", "button"]);
+const NAMING_ATTRIBUTES = new Set(["aria-label", "aria-labelledby"]);
+const TRUNCATING = /^(truncate|text-ellipsis|overflow-ellipsis|line-clamp-(?!none$).+)$/;
+
+const withoutVariants = (utility) => utility.split(":").pop().replace(/^!/, "");
+
+const namesItself = (openingElement) =>
+  openingElement.attributes.some(
+    (attribute) => attribute.type === "JSXAttribute" && NAMING_ATTRIBUTES.has(attribute.name.name),
+  );
+
+export const middleTruncatePlacement = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "MiddleTruncate cuts its own ellipsis and a control around it carries the name.",
+    },
+    schema: [],
+    messages: {
+      "cuts-its-own-ellipsis":
+        "MiddleTruncate cuts its own ellipsis: take it out of the element that also truncates. Inside a control, give the control an aria-label that names its target, since the cut value is not a name.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const designSystemExport = (elementName) => {
+      const imported = importOf(elementName);
+      return imported && FROM_DESIGN_SYSTEM.test(imported.source) ? imported.name : null;
+    };
+    const isControl = ({ name }) =>
+      CONTROLS.has(designSystemExport(name)) ||
+      (name.type === "JSXIdentifier" && HOST_CONTROLS.has(name.name) && !importOf(name));
+    const truncates = (openingElement) =>
+      openingElementClassUtilities(openingElement, context).some((utility) =>
+        TRUNCATING.test(withoutVariants(utility)),
+      );
+
+    return {
+      JSXElement(node) {
+        if (designSystemExport(node.openingElement.name) !== "MiddleTruncate") return;
+        let nearestControl = null;
+        for (let ancestor = node.parent; ancestor; ancestor = ancestor.parent) {
+          if (ancestor.type !== "JSXElement") continue;
+          const { openingElement } = ancestor;
+          if (truncates(openingElement)) {
+            context.report({ node: node.openingElement, messageId: "cuts-its-own-ellipsis" });
+            return;
+          }
+          if (!nearestControl && isControl(openingElement)) nearestControl = openingElement;
+        }
+        if (nearestControl && !namesItself(nearestControl)) {
+          context.report({ node: node.openingElement, messageId: "cuts-its-own-ellipsis" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-bare-button-label.js

@@ -0,0 +1,55 @@
+/*
+ * Standard tool checked first: `no-restricted-syntax` can match a `Button`
+ * whose text is "OK", but not whether that `Button` is the package's (an
+ * import binding, so a renamed or local one is judged correctly), nor read the
+ * same word off a form's `submit={{ label }}`.
+ */
+import { keyName, childText, literalText } from "./literal-text.js";
+import { renderedImports } from "./rendered-import.js";
+
+const BUTTONS = new Set(["Button", "ButtonLink"]);
+const BARE = /^(?:submit|ok|okay|confirm)[.!…]*$/i;
+const FROM_DESIGN_SYSTEM = /^(@nadicodeai\/ui(\/|$)|@\/|\.)/;
+
+export const noBareButtonLabel = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A button says its result as a verb and a noun, never a bare Submit, OK or Confirm.",
+    },
+    schema: [],
+    messages: {
+      "bare-label":
+        'A button says its result: "Create customer", "Save changes", "Remove mailbox". "{{label}}" says nothing about what happens.',
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+
+    function report(node, label) {
+      context.report({ node, messageId: "bare-label", data: { label } });
+    }
+
+    return {
+      JSXElement(node) {
+        const imported = importOf(node.openingElement.name);
+        if (!imported || !BUTTONS.has(imported.name) || !FROM_DESIGN_SYSTEM.test(imported.source)) {
+          return;
+        }
+        const label = childText(node);
+        if (label !== null && BARE.test(label)) report(node.openingElement, label);
+      },
+      JSXAttribute(node) {
+        if (node.name.name !== "submit" || node.value?.type !== "JSXExpressionContainer") return;
+        const { expression } = node.value;
+        if (expression.type !== "ObjectExpression") return;
+        for (const property of expression.properties) {
+          if (keyName(property) !== "label") continue;
+          const label = literalText(property.value);
+          if (label !== null && BARE.test(label.trim())) report(property.value, label.trim());
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-control-in-read-only-surface.js

@@ -0,0 +1,106 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * `Button` below `TooltipContent`, but not follow a renamed import to the part,
+ * count the links across a HoverCardContent's children and its summary's
+ * `action`.
+ */
+import { renderedImports, walk } from "./rendered-import.js";
+
+const OVERLAYS = new Set(["Tooltip", "HoverCard"]);
+const CONTROLS = new Set(["Button", "ButtonLink", "TextLink", "Link", "a"]);
+const NATIVE_CONTROLS = new Set(["input", "select", "textarea"]);
+const HOVER_CARD_SUMMARY = "HoverCardSummary";
+
+const hasAttribute = (openingElement, attributeName) =>
+  openingElement.attributes.some(
+    (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === attributeName,
+  );
+
+export const noControlInReadOnlySurface = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Tooltip text and a Choicebox tile are for reading; a HoverCard holds at most one link.",
+    },
+    schema: [],
+    messages: {
+      "read-only-surface":
+        "Tooltip text and a Choicebox tile are for reading: move the control outside. A HoverCard holds at most one link, through HoverCardSummary's `action`, and never a second Tooltip or HoverCard; for more, open a Popover, a menu or the record's page.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const { visitorKeys } = context.sourceCode;
+
+    const nameOf = (element) => {
+      const { name } = element.openingElement;
+      if (name.type !== "JSXIdentifier" && name.type !== "JSXMemberExpression") return null;
+      if (name.type === "JSXIdentifier" && /^[a-z]/.test(name.name)) return name.name;
+      const imported = importOf(name);
+      if (!imported) return null;
+      return imported.name === "default" ? name.name : imported.name;
+    };
+
+    const isInteractive = (element, name) =>
+      CONTROLS.has(name) ||
+      NATIVE_CONTROLS.has(name) ||
+      hasAttribute(element.openingElement, "onClick") ||
+      hasAttribute(element.openingElement, "tabIndex");
+
+    function visitChildren(container, visit) {
+      for (const child of container.children) {
+        if (visit(child) === false) continue;
+        walk(child, visitorKeys, visit);
+      }
+    }
+
+    function checkTooltipContent(container) {
+      visitChildren(container, (child) => {
+        if (child.type !== "JSXElement") return true;
+        const name = nameOf(child);
+        if (!OVERLAYS.has(name) && !isInteractive(child, name)) return true;
+        context.report({ node: child.openingElement, messageId: "read-only-surface" });
+        return false;
+      });
+    }
+
+    function checkChoiceboxItem(container) {
+      visitChildren(container, (child) => {
+        if (child.type !== "JSXElement" || !isInteractive(child, nameOf(child))) return true;
+        context.report({ node: child.openingElement, messageId: "read-only-surface" });
+        return false;
+      });
+    }
+
+    function checkHoverCardContent(container) {
+      let links = 0;
+      visitChildren(container, (child) => {
+        if (child.type !== "JSXElement") return true;
+        const name = nameOf(child);
+        const { openingElement } = child;
+        if (OVERLAYS.has(name)) {
+          context.report({ node: openingElement, messageId: "read-only-surface" });
+          return false;
+        }
+        const isLink =
+          CONTROLS.has(name) ||
+          hasAttribute(openingElement, "onClick") ||
+          (name === HOVER_CARD_SUMMARY && hasAttribute(openingElement, "action"));
+        if (!isLink) return true;
+        links += 1;
+        if (links > 1) context.report({ node: openingElement, messageId: "read-only-surface" });
+        return true;
+      });
+    }
+
+    return {
+      JSXElement(node) {
+        const name = nameOf(node);
+        if (name === "TooltipContent") checkTooltipContent(node);
+        else if (name === "ChoiceboxGroupItem") checkChoiceboxItem(node);
+        else if (name === "HoverCardContent") checkHoverCardContent(node);
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-hand-built-busy.js

@@ -0,0 +1,104 @@
+/*
+ * Standard tool checked first: `no-restricted-imports` refuses an import by
+ * module, but not the same export by module and file area (PendingLabel is
+ * allowed inside packages/ui), and `no-restricted-syntax` cannot join a
+ * PendingLabel element to the Button it sits under through a renamed import.
+ */
+import { openingElementClassUtilities } from "./jsx-class-utility.js";
+import { PACKAGE_BARREL, renderedImports } from "./rendered-import.js";
+
+const PENDING_LABEL = "PendingLabel";
+const PENDING_LABEL_MODULES = new Set([
+  PACKAGE_BARREL,
+  `${PACKAGE_BARREL}/components/pending-label`,
+]);
+const BUTTONS = new Set(["Button", "ButtonLink"]);
+const SPINNER_ICONS = new Set([
+  "Loader",
+  "LoaderIcon",
+  "Loader2",
+  "Loader2Icon",
+  "LoaderCircle",
+  "LoaderCircleIcon",
+  "LoaderPinwheel",
+]);
+const ICON_MODULE = "lucide-react";
+const SPIN = "animate-spin";
+const FUNCTIONS = new Set(["FunctionDeclaration", "FunctionExpression", "ArrowFunctionExpression"]);
+
+const PACKAGE_PATH = "/packages/ui/";
+const PORTAL_PATH = "/apps/portal/";
+
+const PENDING_LABEL_ONLY = new Set([PENDING_LABEL]);
+
+const SOURCE_SIDE = { ImportSpecifier: "imported", ExportSpecifier: "local" };
+
+const sourceName = (specifier) => {
+  const named = specifier[SOURCE_SIDE[specifier.type]];
+  return named?.name ?? named?.value;
+};
+
+const isSpinToken = (utility) => utility.split(":").pop().replace(/^!/, "") === SPIN;
+
+function insideAButton(element, importOf) {
+  for (let current = element.parent; current; current = current.parent) {
+    if (FUNCTIONS.has(current.type)) return false;
+    if (current.type === "JSXElement" && BUTTONS.has(importOf(current.openingElement.name)?.name)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export const noHandBuiltBusy = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A working button takes loading and loadingLabel; no product hand-builds a busy label or a spinner.",
+    },
+    schema: [],
+    messages: {
+      "hand-built-busy":
+        "A working button takes loading and loadingLabel: it keeps its place and focus, says its loadingLabel and shows no spinner. A wait past a second is WaitingLine.",
+    },
+  },
+  create(context) {
+    const filename = context.filename.replaceAll("\\", "/");
+    const inPackage = filename.includes(PACKAGE_PATH);
+    const inPortal = filename.includes(PORTAL_PATH);
+    const importOf = renderedImports(context);
+
+    const report = (node) => context.report({ node, messageId: "hand-built-busy" });
+
+    function bannedFrom(source) {
+      if (source === ICON_MODULE) return SPINNER_ICONS;
+      if (!inPackage && PENDING_LABEL_MODULES.has(source)) return PENDING_LABEL_ONLY;
+      return null;
+    }
+
+    function checkImport(node) {
+      if (node.importKind === "type" || node.exportKind === "type") return;
+      const source = node.source?.value;
+      const bannedNames = bannedFrom(source);
+      if (!bannedNames) return;
+      for (const specifier of node.specifiers) {
+        if (specifier.importKind === "type" || specifier.exportKind === "type") continue;
+        if (bannedNames.has(sourceName(specifier))) report(specifier);
+      }
+    }
+
+    return {
+      ImportDeclaration: checkImport,
+      ExportNamedDeclaration: checkImport,
+      JSXElement(node) {
+        if (importOf(node.openingElement.name)?.name !== PENDING_LABEL) return;
+        if (insideAButton(node, importOf)) report(node.openingElement);
+      },
+      JSXOpeningElement(node) {
+        if (inPortal) return;
+        if (openingElementClassUtilities(node, context).some(isSpinToken)) report(node);
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-hand-built-theme-picker.js

@@ -0,0 +1,144 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * `Sun` element under a `RadioGroup`, but not the same icon named through a
+ * renamed import, nor an option table declared in the same file, and it cannot
+ * join the icons of two sibling Buttons.
+ */
+import { renderedImports, walk } from "./rendered-import.js";
+
+const ICON_MODULE = "lucide-react";
+const PICKERS = new Set(["RadioGroup", "ToggleGroup", "SegmentedControl", "Switch"]);
+const BUTTONS = new Set(["Button", "ButtonLink"]);
+const THEME_ICONS = new Map([
+  ["Sun", "light"],
+  ["SunIcon", "light"],
+  ["Moon", "dark"],
+  ["MoonIcon", "dark"],
+  ["Monitor", "system"],
+  ["MonitorIcon", "system"],
+]);
+const THEME_VALUES = new Set(["light", "dark"]);
+
+const keyName = (property) => property.key.name ?? property.key.value;
+
+function isThemeValue(literal) {
+  const { parent: container } = literal;
+  const parent = container.type === "JSXExpressionContainer" ? container.parent : container;
+  const isItemValue =
+    (parent.type === "JSXAttribute" && parent.name.name === "value") ||
+    (parent.type === "Property" && parent.value === literal && keyName(parent) === "value") ||
+    parent.type === "ArrayExpression" ||
+    parent.type === "CallExpression";
+  return isItemValue && THEME_VALUES.has(literal.value);
+}
+
+const isPropertyName = (identifier) => {
+  const { parent } = identifier;
+  return (
+    (parent.type === "Property" && parent.key === identifier && !parent.computed) ||
+    (parent.type === "MemberExpression" && parent.property === identifier && !parent.computed)
+  );
+};
+
+export const noHandBuiltThemePicker = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "The appearance is chosen with ThemeModeSwitcher or ThemeModeMenu, never a hand-built picker.",
+    },
+    schema: [],
+    messages: {
+      "hand-built-theme-picker":
+        "The appearance is chosen with ThemeModeSwitcher on a settings page or ThemeModeMenu in the account menu; do not rebuild it.",
+    },
+  },
+  create(context) {
+    const { sourceCode } = context;
+    const { visitorKeys } = sourceCode;
+    const importOf = renderedImports(context);
+
+    const iconsByLocalName = new Map();
+    for (const statement of sourceCode.ast.body) {
+      if (statement.type !== "ImportDeclaration" || statement.importKind === "type") continue;
+      if (statement.source.value !== ICON_MODULE) continue;
+      for (const specifier of statement.specifiers) {
+        if (specifier.type !== "ImportSpecifier" || specifier.importKind === "type") continue;
+        const kind = THEME_ICONS.get(specifier.imported.name ?? specifier.imported.value);
+        if (kind) iconsByLocalName.set(specifier.local.name, kind);
+      }
+    }
+
+    const sameFileConstant = (identifier) => {
+      for (let scope = sourceCode.getScope(identifier); scope; scope = scope.upper) {
+        const variable = scope.set.get(identifier.name);
+        if (!variable) continue;
+        const declarator = variable.defs[0]?.node;
+        const isConstant =
+          declarator?.type === "VariableDeclarator" && declarator.parent.kind === "const";
+        return isConstant ? declarator.init : null;
+      }
+      return null;
+    };
+
+    function collect(root, held, followNames) {
+      const visit = (child) => {
+        if (child.type === "JSXOpeningElement") {
+          const imported = importOf(child.name);
+          const kind = imported?.source === ICON_MODULE ? THEME_ICONS.get(imported.name) : null;
+          if (kind) held.icons.add(kind);
+        } else if (child.type === "Identifier" && !isPropertyName(child)) {
+          const kind = iconsByLocalName.get(child.name);
+          if (kind) held.icons.add(kind);
+          else if (followNames) {
+            const init = sameFileConstant(child);
+            if (init) collect(init, held, false);
+          }
+        } else if (child.type === "Literal" && isThemeValue(child)) {
+          held.values.add(child.value);
+        }
+        return true;
+      };
+      visit(root);
+      walk(root, visitorKeys, visit);
+    }
+
+    const holdsAThemeChoice = ({ icons, values }, needsBoth) =>
+      needsBoth ? icons.size >= 2 || values.size === 2 : icons.size >= 1 || values.size === 2;
+
+    const heldBy = (nodes) => {
+      const held = { icons: new Set(), values: new Set() };
+      for (const node of nodes) collect(node, held, true);
+      return held;
+    };
+
+    const buttonsIn = (parent) =>
+      parent.children.flatMap((child) => {
+        if (child.type === "JSXFragment") return buttonsIn(child);
+        const isButton =
+          child.type === "JSXElement" && BUTTONS.has(importOf(child.openingElement.name)?.name);
+        return isButton ? [child] : [];
+      });
+
+    const report = (node) => context.report({ node, messageId: "hand-built-theme-picker" });
+
+    return {
+      JSXElement(node) {
+        if (PICKERS.has(importOf(node.openingElement.name)?.name)) {
+          const held = heldBy([node]);
+          if (holdsAThemeChoice(held, false)) report(node.openingElement);
+          return;
+        }
+        const buttons = buttonsIn(node);
+        if (buttons.length < 2) return;
+        if (holdsAThemeChoice(heldBy(buttons), true)) report(node.openingElement);
+      },
+      JSXFragment(node) {
+        if (node.parent.type === "JSXElement" || node.parent.type === "JSXFragment") return;
+        const buttons = buttonsIn(node);
+        if (buttons.length < 2) return;
+        if (holdsAThemeChoice(heldBy(buttons), true)) report(node);
+      },
+    };
+  },
+};