@nadicodeai/ui 12.1.96 → 12.1.97

package/dist/components/usage-meter.d.ts

@@ -1,4 +1,19 @@
 import * as React from "react";
+/**
+ * Consumption against an allowance in a dense spot.
+ *
+ * @family Data
+ * @when `UsageMeter`: consumption against an allowance in a dense spot, such as a run's tokens and
+ * cost.
+ * @instead A known amount against a real maximum with its label is `Progress`. An unknown wait is
+ * the waiting line, never a bar with an invented percentage. A single figure is a `KpiCard`.
+ * @behaviour The fill moves only when the reading changes, on `transition`; still under reduced
+ * motion. The tone is the product's threshold, never derived from the value. Past the maximum the
+ * bar fills and turns red.
+ * @words Print the work and its unit: *620 of 1,000*. The meter's fields are short and set in
+ * uppercase mono by the stylesheet, so they are written in sentence case.
+ * @access The meter's printed figures are the reading; its track is decorative.
+ */
 declare function UsageMeter({ className, fields, trailing, usage, children, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
     fields?: string[];
     trailing?: string;

package/dist/components/usage-meter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usage-meter.d.ts","sourceRoot":"","sources":["../../src/components/usage-meter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,MAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,qBAqCA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"usage-meter.d.ts","sourceRoot":"","sources":["../../src/components/usage-meter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;GAcG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,MAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,qBAqCA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/usage-meter.js

@@ -1,6 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/utils.js";
+/**
+ * Consumption against an allowance in a dense spot.
+ *
+ * @family Data
+ * @when `UsageMeter`: consumption against an allowance in a dense spot, such as a run's tokens and
+ * cost.
+ * @instead A known amount against a real maximum with its label is `Progress`. An unknown wait is
+ * the waiting line, never a bar with an invented percentage. A single figure is a `KpiCard`.
+ * @behaviour The fill moves only when the reading changes, on `transition`; still under reduced
+ * motion. The tone is the product's threshold, never derived from the value. Past the maximum the
+ * bar fills and turns red.
+ * @words Print the work and its unit: *620 of 1,000*. The meter's fields are short and set in
+ * uppercase mono by the stylesheet, so they are written in sentence case.
+ * @access The meter's printed figures are the reading; its track is decorative.
+ */
 function UsageMeter({ className, fields = [], trailing, usage, children, ...props }) {
     const hasMeta = fields.length > 0 || trailing != null || children != null;
     return (_jsxs("div", { "data-slot": "usage-meter", className: cn("nc-usage-meter", className), ...props, children: [hasMeta && (_jsxs("div", { className: "nc-usage-meter-meta", children: [fields.map((field, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx("span", { className: "nc-usage-meter-sep", children: "/" }), _jsx("span", { children: field })] }, index))), trailing != null && (_jsxs(_Fragment, { children: [_jsx("span", { className: "nc-usage-meter-spacer" }), _jsx("span", { children: trailing })] })), children != null && _jsx("span", { "data-slot": "usage-meter-slot", children: children })] })), usage != null && (_jsx("div", { className: "nc-usage-meter-track", children: _jsx("div", { className: "nc-usage-meter-fill", 

package/dist/components/waiting-line.d.ts

@@ -13,17 +13,20 @@ type WaitingLineProps = Omit<React.ComponentProps<"div">, "children"> & ({
     label: string;
 });
 /**
- * The one moving thing a system wait may show: a 2 px ink track with a 32%
- * segment crossing it linearly, after a second of waiting. Under reduced
- * motion the whole line breathes in opacity instead of travelling.
+ * The one moving thing a system wait may show: a 2 px ink line, after a second.
  *
- * The track takes its 2 px from the moment the wait starts and stays empty and
- * unannounced until that second is up, so the line arriving moves nothing
- * around it. The interface answers briefly: one thing moves, and only the one
- * the person is waiting for.
- *
- * An Agent's work is not a system wait: it shows that Agent's orb in its state
- * and a sentence saying what it is doing.
+ * @family Feedback
+ * @when A system wait the person asked for that runs past a second: a save, a connection, a
+ * download without a count.
+ * @instead Under a second the `PendingLabel` alone. A known amount is a progress line with a count.
+ * A page load is `Skeleton`. An Agent working is her orb and a sentence.
+ * @behaviour Takes its 2 px from the start and stays empty until 1 s, so its arrival moves nothing.
+ * No track colour; the segment is ink, never info blue, crossing at 32% width. Under reduced motion
+ * it breathes.
+ * @words None of its own. The control beside it carries the pending word; a standalone line takes a
+ * `label` naming the work: *Connecting Telegram*.
+ * @access With a label: `role="status"`, announced once after the second. `decorative` when the
+ * control beside it already says it. The segment is hidden.
  */
 declare function WaitingLine({ className, decorative, label, ...props }: WaitingLineProps): React.JSX.Element;
 export { WaitingLine, WAITING_LINE_DELAY_MS };

package/dist/components/waiting-line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"waiting-line.d.ts","sourceRoot":"","sources":["../../src/components/waiting-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;GAIG;AACH,QAAA,MAAM,qBAAqB,OAAO,CAAC;AAEnC,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GACnE,CAAC;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEhF;;;;;;;;;;;;GAYG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBA0BxF;AAED,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"waiting-line.d.ts","sourceRoot":"","sources":["../../src/components/waiting-line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;GAIG;AACH,QAAA,MAAM,qBAAqB,OAAO,CAAC;AAEnC,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GACnE,CAAC;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEhF;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBA0BxF;AAED,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/components/waiting-line.js

@@ -9,17 +9,20 @@ import { cn } from "../lib/utils.js";
  */
 const WAITING_LINE_DELAY_MS = 1000;
 /**
- * The one moving thing a system wait may show: a 2 px ink track with a 32%
- * segment crossing it linearly, after a second of waiting. Under reduced
- * motion the whole line breathes in opacity instead of travelling.
+ * The one moving thing a system wait may show: a 2 px ink line, after a second.
  *
- * The track takes its 2 px from the moment the wait starts and stays empty and
- * unannounced until that second is up, so the line arriving moves nothing
- * around it. The interface answers briefly: one thing moves, and only the one
- * the person is waiting for.
- *
- * An Agent's work is not a system wait: it shows that Agent's orb in its state
- * and a sentence saying what it is doing.
+ * @family Feedback
+ * @when A system wait the person asked for that runs past a second: a save, a connection, a
+ * download without a count.
+ * @instead Under a second the `PendingLabel` alone. A known amount is a progress line with a count.
+ * A page load is `Skeleton`. An Agent working is her orb and a sentence.
+ * @behaviour Takes its 2 px from the start and stays empty until 1 s, so its arrival moves nothing.
+ * No track colour; the segment is ink, never info blue, crossing at 32% width. Under reduced motion
+ * it breathes.
+ * @words None of its own. The control beside it carries the pending word; a standalone line takes a
+ * `label` naming the work: *Connecting Telegram*.
+ * @access With a label: `role="status"`, announced once after the second. `decorative` when the
+ * control beside it already says it. The segment is hidden.
  */
 function WaitingLine({ className, decorative = false, label, ...props }) {
     const [elapsed, setElapsed] = React.useState(false);

package/dist/eslint/index.js

@@ -3,15 +3,19 @@ import { readdirSync, readFileSync } from "node:fs";
 
 import { builtinRules } from "eslint/use-at-your-own-risk";
 
+import { emptyStateOwner } from "./rules/empty-state-owner.js";
+import { menuOwner } from "./rules/menu-owner.js";
 import { noAppFeatureComponent } from "./rules/no-app-feature-component.js";
 import { noChoiceControlWrapper } from "./rules/no-choice-control-wrapper.js";
 import { noComment } from "./rules/no-comment.js";
+import { noDecorativeIcon } from "./rules/no-decorative-icon.js";
 import { noDeprecatedZodApi } from "./rules/no-deprecated-zod-api.js";
 import { noGlobalPatch } from "./rules/no-global-patch.js";
 import { noPackageComponentRedefinition } from "./rules/no-package-component-redefinition.js";
 import { noShadcnAppearanceOverride } from "./rules/no-shadcn-appearance-override.js";
 import { noSubjectDerivedExpectation } from "./rules/no-subject-derived-expectation.js";
 import { noWriteInSubscription } from "./rules/no-write-in-subscription.js";
+import { pageComposition } from "./rules/page-composition.js";
 import { serverActionDiscipline } from "./rules/server-action-discipline.js";
 import { strictDesignSystemSelectors } from "./strict-design-system.js";
 
@@ -102,15 +106,19 @@ const plugin = {
   configs: {},
   rules: {
     ...strictSelectorRules,
+    "empty-state-owner": emptyStateOwner,
+    "menu-owner": menuOwner,
     "no-app-feature-component": noAppFeatureComponent,
     "no-choice-control-wrapper": noChoiceControlWrapper,
     "no-comment": noComment,
+    "no-decorative-icon": noDecorativeIcon,
     "no-deprecated-zod-api": noDeprecatedZodApi,
     "no-global-patch": noGlobalPatch,
     "no-package-component-redefinition": noPackageComponentRedefinition,
     "no-shadcn-appearance-override": noShadcnAppearanceOverride,
     "no-subject-derived-expectation": noSubjectDerivedExpectation,
     "no-write-in-subscription": noWriteInSubscription,
+    "page-composition": pageComposition,
     "server-action-discipline": serverActionDiscipline,
   },
 };

package/dist/eslint/rules/empty-state-owner.js

@@ -0,0 +1,145 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match
+ * `items.length === 0 ? <X/> : …`, but not which branch is the empty one once
+ * the test is turned around (`items.length > 0 ? <List/> : <p/>`, an early
+ * `if` whose empty branch is the next `return`), so it would either miss those
+ * or report the list branch.
+ */
+import { renderedImports } from "./rendered-import.js";
+
+const OWNERS = [
+  "EmptyState",
+  "CollectionPage",
+  "RecordList",
+  "ActivityFeed",
+  "LibraryShelf",
+  "CatalogDrawer",
+  "DataTable",
+  "CommandEmpty",
+  "ComboboxEmpty",
+];
+
+const SIZE_PROPERTIES = new Set(["length", "size"]);
+const COUNT = /^count$|[a-z0-9]Count$/;
+
+const unwrapChain = (node) => (node.type === "ChainExpression" ? node.expression : node);
+
+const isSize = (node) => {
+  const read = unwrapChain(node);
+  if (read.type === "Identifier") return COUNT.test(read.name);
+  if (read.type !== "MemberExpression" || read.computed) return false;
+  return SIZE_PROPERTIES.has(read.property.name) || COUNT.test(read.property.name);
+};
+
+const MIRRORED = { "<": ">", ">": "<", "<=": ">=", ">=": "<=" };
+
+const EMPTY_WHEN = {
+  "===": { 0: "empty" },
+  "==": { 0: "empty" },
+  "!==": { 0: "present" },
+  "!=": { 0: "present" },
+  "<": { 1: "empty" },
+  "<=": { 0: "empty" },
+  ">": { 0: "present" },
+  ">=": { 1: "present" },
+};
+
+function emptiness(test) {
+  const node = unwrapChain(test);
+  if (isSize(node)) return "present";
+  if (node.type === "UnaryExpression" && node.operator === "!") {
+    const inner = emptiness(node.argument);
+    if (inner === "empty") return "present";
+    if (inner === "present") return "empty";
+    return null;
+  }
+  if (node.type === "LogicalExpression") {
+    const sides = [emptiness(node.left), emptiness(node.right)];
+    if (node.operator === "&&" && sides.includes("empty")) return "empty";
+    if (node.operator === "||" && sides.includes("present")) return "present";
+    return null;
+  }
+  if (node.type !== "BinaryExpression") return null;
+  let { operator, left, right } = node;
+  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- ESTree types Literal.value as string | number | boolean | RegExp | bigint | null; only typeof picks the number.
+  if (isSize(right) && typeof left.value === "number") {
+    [left, right] = [right, left];
+    operator = MIRRORED[operator] ?? operator;
+  }
+  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- ESTree types Literal.value as string | number | boolean | RegExp | bigint | null; only typeof picks the number.
+  if (!isSize(left) || typeof right.value !== "number") return null;
+  return EMPTY_WHEN[operator]?.[right.value] ?? null;
+}
+
+function returned(statement) {
+  if (!statement) return null;
+  if (statement.type === "ReturnStatement") return statement.argument;
+  if (statement.type === "BlockStatement") {
+    const found = statement.body.find((inner) => inner.type === "ReturnStatement");
+    return found?.argument ?? null;
+  }
+  return null;
+}
+
+function nextStatement(statement) {
+  const body = statement.parent.body;
+  if (!Array.isArray(body)) return null;
+  return body[body.indexOf(statement) + 1] ?? null;
+}
+
+export const emptyStateOwner = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "An absence renders EmptyState, or a composition that draws its own.",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          owners: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    defaultOptions: [{ owners: [] }],
+    messages: {
+      "absence-branch":
+        "An absence is EmptyState: firstUse with the section's picture, nothingYet, noResults with its clear, or failed with its retry.",
+    },
+  },
+  create(context) {
+    const owners = new Set([...OWNERS, ...context.options[0].owners]);
+    const importOf = renderedImports(context);
+    const drawnByAnOwner = (element) =>
+      owners.has(importOf(element.openingElement.name)?.name ?? "");
+
+    function checkEmptyBranch(branch) {
+      const drawsItsOwn =
+        branch?.type === "JSXFragment" ||
+        (branch?.type === "JSXElement" && !drawnByAnOwner(branch));
+      if (drawsItsOwn) context.report({ node: branch, messageId: "absence-branch" });
+    }
+
+    return {
+      ConditionalExpression(node) {
+        const verdict = emptiness(node.test);
+        if (verdict === "empty") checkEmptyBranch(node.consequent);
+        else if (verdict === "present") checkEmptyBranch(node.alternate);
+      },
+      LogicalExpression(node) {
+        if (node.operator === "&&" && emptiness(node.left) === "empty") {
+          checkEmptyBranch(node.right);
+        }
+      },
+      IfStatement(node) {
+        const verdict = emptiness(node.test);
+        if (verdict === "empty") {
+          checkEmptyBranch(returned(node.consequent));
+        } else if (verdict === "present" && returned(node.consequent)) {
+          checkEmptyBranch(returned(node.alternate ?? nextStatement(node)));
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/menu-owner.js

@@ -0,0 +1,75 @@
+/*
+ * Standard tool checked first: `no-restricted-imports` holds the menu modules
+ * and the ellipsis icons (`repo/menu-owner-imports` in the root config's
+ * product-composition blocks), but not a destructive `Button` rendered once per
+ * row: that is an import binding joined to where its element renders, which no
+ * import rule sees and a selector cannot follow through a renamed import.
+ */
+import { PACKAGE_BARREL, partOf, renderedImports, staticAttribute } from "./rendered-import.js";
+
+const BUTTON = new Map([
+  [
+    "Button",
+    ["@nadicodeai/ui/components/button", PACKAGE_BARREL].map((from) => ({ from, part: "Button" })),
+  ],
+]);
+
+const FUNCTIONS = new Set(["FunctionDeclaration", "FunctionExpression", "ArrowFunctionExpression"]);
+const ROW_CALLBACKS = new Set(["map", "flatMap"]);
+const ROW_RENDERERS = new Set(["cell", "command"]);
+const ROW_COMPONENT = /Row$/;
+
+const nameOf = (key) => (key?.type === "Identifier" ? key.name : key?.value);
+
+function drawsOneRecord(fn) {
+  const { parent } = fn;
+  if (
+    parent.type === "CallExpression" &&
+    parent.arguments[0] === fn &&
+    parent.callee.type === "MemberExpression" &&
+    !parent.callee.computed &&
+    ROW_CALLBACKS.has(parent.callee.property.name)
+  ) {
+    return true;
+  }
+  if (parent.type === "Property" && parent.value === fn) {
+    return ROW_RENDERERS.has(nameOf(parent.key));
+  }
+  if (parent.type === "JSXExpressionContainer" && parent.parent.type === "JSXAttribute") {
+    return ROW_RENDERERS.has(parent.parent.name.name);
+  }
+  if (fn.type === "FunctionDeclaration") return ROW_COMPONENT.test(fn.id?.name ?? "");
+  return parent.type === "VariableDeclarator" && ROW_COMPONENT.test(nameOf(parent.id) ?? "");
+}
+
+function insideARow(node) {
+  for (let current = node.parent; current; current = current.parent) {
+    if (FUNCTIONS.has(current.type) && drawsOneRecord(current)) return true;
+  }
+  return false;
+}
+
+export const menuOwner = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A record's destructive command is the last item of its ActionMenu, never a destructive button in its row.",
+    },
+    schema: [],
+    messages: {
+      "row-destructive-button":
+        "A destructive command is the last item of the row's ActionMenu, after a divider.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    return {
+      JSXOpeningElement(node) {
+        if (partOf(importOf(node.name), BUTTON, context.filename) !== "Button") return;
+        if (staticAttribute(node, "variant") !== "destructive") return;
+        if (insideARow(node)) context.report({ node, messageId: "row-destructive-button" });
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-decorative-icon.js

@@ -0,0 +1,164 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector such as
+ * `CardTitle JSXOpeningElement` matches any element under a title, not the
+ * ones bound to an icon module, and cannot stop at a control between the two
+ * (`<CardHeader><Button><Plus/></Button></CardHeader>` is allowed). This rule
+ * joins the element to its import and reads the nearest container above it.
+ */
+import { renderedImports, sourceMatches, writtenName } from "./rendered-import.js";
+
+export const noDecorativeIcon = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A title or a label carries no icon; an icon belongs to a control or a menu row.",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          iconModules: { type: "array", items: { type: "string" }, uniqueItems: true },
+          headings: { type: "array", items: { type: "string" }, uniqueItems: true },
+          controls: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    defaultOptions: [
+      {
+        iconModules: ["lucide-react", "@nadicodeai/ui/components/house-icons"],
+        headings: [
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6",
+          "legend",
+          "dt",
+          "th",
+          "caption",
+          "CardTitle",
+          "CardDescription",
+          "CardHeader",
+          "DialogTitle",
+          "SheetTitle",
+          "AlertDialogTitle",
+          "DrawerTitle",
+          "FieldLabel",
+          "FieldLegend",
+          "Label",
+          "ItemTitle",
+          "TableHead",
+        ],
+        controls: [
+          "button",
+          "a",
+          "Button",
+          "Link",
+          "CardAction",
+          "TabsTrigger",
+          "TabsLink",
+          "ToggleGroupItem",
+          "Toggle",
+          "SidebarMenuButton",
+          "InputGroupAddon",
+          "InputGroupButton",
+        ],
+      },
+    ],
+    messages: {
+      "beside-heading":
+        "A title or a label carries no icon: an identity mark starts a row or a card (IdentityMark), and an icon belongs to a control or a menu row.",
+    },
+  },
+  create(context) {
+    const [{ iconModules, headings, controls }] = context.options;
+    const headingNames = new Set(headings);
+    const controlNames = new Set(controls);
+    const importOf = renderedImports(context);
+    const isIconImport = (name) => {
+      const imported = importOf({ type: "JSXIdentifier", name });
+      return (
+        imported !== null &&
+        iconModules.some((module) => sourceMatches(imported.source, module, context.filename))
+      );
+    };
+
+    function constantOf(name, scope) {
+      for (let current = scope; current; current = current.upper) {
+        const variable = current.set.get(name);
+        if (!variable) continue;
+        const [definition] = variable.defs;
+        const declared =
+          definition?.type === "Variable" && definition.parent.kind === "const"
+            ? definition.node.init
+            : null;
+        return declared ?? null;
+      }
+      return null;
+    }
+
+    function holdsAnIcon(value, scope, seen = new Set()) {
+      if (!value || seen.has(value)) return false;
+      seen.add(value);
+      switch (value.type) {
+        case "Identifier":
+          return (
+            isIconImport(value.name) || holdsAnIcon(constantOf(value.name, scope), scope, seen)
+          );
+        case "MemberExpression":
+          return holdsAnIcon(value.object, scope, seen);
+        case "ConditionalExpression":
+          return [value.consequent, value.alternate].some((branch) =>
+            holdsAnIcon(branch, scope, seen),
+          );
+        case "LogicalExpression":
+          return [value.left, value.right].some((side) => holdsAnIcon(side, scope, seen));
+        case "ObjectExpression":
+          return value.properties.some(
+            (property) => property.type === "Property" && holdsAnIcon(property.value, scope, seen),
+          );
+        case "ArrayExpression":
+          return value.elements.some((element) => holdsAnIcon(element, scope, seen));
+        default:
+          return false;
+      }
+    }
+
+    function isIcon(openingElement) {
+      const imported = importOf(openingElement.name);
+      if (imported) {
+        return iconModules.some((module) =>
+          sourceMatches(imported.source, module, context.filename),
+        );
+      }
+      const { name } = openingElement;
+      if (name.type !== "JSXIdentifier" || !/^[A-Z]/.test(name.name)) return false;
+      const scope = context.sourceCode.getScope(openingElement);
+      return holdsAnIcon(constantOf(name.name, scope), scope);
+    }
+
+    return {
+      JSXOpeningElement(node) {
+        if (!isIcon(node)) return;
+        for (let current = node.parent.parent; current; current = current.parent) {
+          if (current.type === "JSXAttribute") {
+            if (headingNames.has(writtenName(current.parent.name))) {
+              context.report({ node, messageId: "beside-heading" });
+            }
+            return;
+          }
+          if (current.type !== "JSXElement") continue;
+          const name = writtenName(current.openingElement.name);
+          if (controlNames.has(name)) return;
+          if (headingNames.has(name)) {
+            context.report({ node, messageId: "beside-heading" });
+            return;
+          }
+        }
+      },
+    };
+  },
+};