@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/eslint/rules/data-table-one-unsized-column.js

@@ -0,0 +1,96 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector matches one
+ * node, but this reads a whole `columns` array (how many of its objects lack a
+ * `size`, whether one sets `meta.wraps`, whether a spread or a call makes the
+ * list unknowable) and follows a variable to its array, which no selector can.
+ */
+import { renderedImports } from "./rendered-import.js";
+
+const COMMANDS_COLUMN_ID = "actions";
+
+const WRAPPERS = new Set(["TSAsExpression", "TSSatisfiesExpression", "TSNonNullExpression"]);
+
+function unwrap(node) {
+  let current = node;
+  while (WRAPPERS.has(current.type)) current = current.expression;
+  return current;
+}
+
+const keyName = (property) => {
+  if (property.computed) return null;
+  return property.key.type === "Identifier" ? property.key.name : property.key.value;
+};
+
+const propertyOf = (column, name) =>
+  column.properties.find((property) => property.type === "Property" && keyName(property) === name);
+
+function setsWraps(column) {
+  const meta = propertyOf(column, "meta")?.value;
+  if (meta?.type !== "ObjectExpression") return false;
+  const wraps = propertyOf(meta, "wraps")?.value;
+  return wraps !== undefined && !(wraps.type === "Literal" && wraps.value === false);
+}
+
+const isCommandsColumn = (column) => propertyOf(column, "id")?.value.value === COMMANDS_COLUMN_ID;
+
+const isKnownColumn = (element) =>
+  element?.type === "ObjectExpression" &&
+  element.properties.every((property) => property.type === "Property");
+
+function arrayOf(context, expression) {
+  const node = unwrap(expression);
+  if (node.type === "ArrayExpression") return node;
+  if (node.type !== "Identifier") return null;
+  for (let scope = context.sourceCode.getScope(node); scope; scope = scope.upper) {
+    const variable = scope.set.get(node.name);
+    if (!variable) continue;
+    const [definition] = variable.defs;
+    const initialisedOnce =
+      variable.defs.length === 1 && variable.references.filter((use) => use.isWrite()).length === 1;
+    if (!initialisedOnce || definition.node.type !== "VariableDeclarator") return null;
+    const init = definition.node.init ? unwrap(definition.node.init) : null;
+    return init?.type === "ArrayExpression" ? init : null;
+  }
+  return null;
+}
+
+function breaksTheRule(array) {
+  if (!array.elements.every(isKnownColumn)) return false;
+  if (array.elements.some(setsWraps)) return false;
+  const unsized = array.elements.filter((column) => !propertyOf(column, "size"));
+  if (unsized.length > 1) return true;
+  const content = array.elements.filter((column) => !isCommandsColumn(column));
+  return content.length > 0 && unsized.length === 0;
+}
+
+export const dataTableOneUnsizedColumn = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A DataTable's columns all have a size in pixels except the one that takes the spare width.",
+    },
+    schema: [],
+    messages: {
+      "one-unsized-column":
+        "Give every column a `size` in pixels except the one that takes the spare width. Columns without a size share what is left, so two of them make the widths depend on the data.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    return {
+      JSXOpeningElement(node) {
+        if (importOf(node.name)?.name !== "DataTable") return;
+        const attribute = node.attributes.find(
+          (candidate) => candidate.type === "JSXAttribute" && candidate.name.name === "columns",
+        );
+        const value = attribute?.value;
+        if (value?.type !== "JSXExpressionContainer") return;
+        const array = arrayOf(context, value.expression);
+        if (array && breaksTheRule(array)) {
+          context.report({ node: value.expression, messageId: "one-unsized-column" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/destructive-action-placement.js

@@ -0,0 +1,69 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` descendant selector can
+ * match a `Button` below `SheetContent`, but not that the button is the design
+ * system's, nor follow a renamed import, nor read `variant="destructive"` off
+ * the opening element or ignore a match that only sits in a `render` prop.
+ */
+import { renderedImports, staticAttribute } from "./rendered-import.js";
+
+const BUTTONS = new Set(["Button", "ButtonLink"]);
+const CONFIRMATIONS = new Set(["ConfirmDialog", "AlertDialog", "ConfirmActionDialog"]);
+const CLOSED_SURFACES = new Set([
+  "SheetContent",
+  "DrawerContent",
+  "FormDrawer",
+  "CatalogDrawer",
+  "AccordionContent",
+  "CollapsibleContent",
+  "Disclosure",
+  "HoverCardContent",
+]);
+
+const FROM_DESIGN_SYSTEM = /^(@nadicodeai\/ui(\/|$)|@\/|\.)/;
+
+export const destructiveActionPlacement = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A destructive action is confirmed in a ConfirmDialog opened from the page or a row's menu, never inside a sheet, drawer, hover card or collapsed section.",
+    },
+    schema: [],
+    messages: {
+      "destructive-placement":
+        "A destructive action is confirmed in a ConfirmDialog opened from the page or the row's menu: only a modal dims the whole page. Do not place it in a sheet, a drawer, a hover card or a section that starts closed.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const exportOf = (element) => {
+      const imported = importOf(element.openingElement.name);
+      return imported && FROM_DESIGN_SYSTEM.test(imported.source) ? imported.name : null;
+    };
+
+    const isDestructive = (element) => {
+      const name = exportOf(element);
+      if (CONFIRMATIONS.has(name)) return true;
+      return (
+        BUTTONS.has(name) && staticAttribute(element.openingElement, "variant") === "destructive"
+      );
+    };
+
+    function insideClosedSurface(element) {
+      let child = element;
+      for (let node = element.parent; node; child = node, node = node.parent) {
+        if (node.type !== "JSXElement" || !node.children.includes(child)) continue;
+        if (CLOSED_SURFACES.has(exportOf(node))) return true;
+      }
+      return false;
+    }
+
+    return {
+      JSXElement(node) {
+        if (isDestructive(node) && insideClosedSurface(node)) {
+          context.report({ node: node.openingElement, messageId: "destructive-placement" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/disabled-choice-says-why.js

@@ -0,0 +1,71 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * `disabled` attribute on a `Checkbox`, but not follow a renamed import to the
+ * component, nor read the other attributes of the same element (aria-describedby,
+ * a spread) or tell a wait (`disabled={pending}`) from a reason.
+ */
+import { PACKAGE_BARREL, partOf, renderedImports } from "./rendered-import.js";
+
+const MODULES = [
+  ["Checkbox", "checkbox"],
+  ["Switch", "switch"],
+  ["RadioGroupItem", "radio-group"],
+];
+
+const CHOICE = new Map(
+  MODULES.map(([part, module]) => [
+    part,
+    [`@nadicodeai/ui/components/${module}`, PACKAGE_BARREL].map((from) => ({ from, part })),
+  ]),
+);
+
+const WAIT = /^(?:is)?(?:pending|saving|submitting|busy)$/i;
+
+const unwrapChain = (node) => (node.type === "ChainExpression" ? node.expression : node);
+
+function isWait(attribute) {
+  if (attribute.value?.type !== "JSXExpressionContainer") return false;
+  const read = unwrapChain(attribute.value.expression);
+  if (read.type === "Identifier") return WAIT.test(read.name);
+  if (read.type !== "MemberExpression" || read.computed) return false;
+  return WAIT.test(read.property.name);
+}
+
+function isEnabledLiteral(attribute) {
+  const expression = attribute.value?.expression;
+  return expression?.type === "Literal" && expression.value === false;
+}
+
+const attributeNamed = (openingElement, name) =>
+  openingElement.attributes.find(
+    (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === name,
+  );
+
+export const disabledChoiceSaysWhy = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A disabled Checkbox, Switch or RadioGroupItem points aria-describedby at the line that names the reason.",
+    },
+    schema: [],
+    messages: {
+      "disabled-without-reason":
+        "Say why this is disabled: point aria-describedby at the line that names the reason, or use ChoiceboxGroupItem's disabledReason.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+
+    return {
+      JSXOpeningElement(node) {
+        if (!partOf(importOf(node.name), CHOICE, context.filename)) return;
+        const disabled = attributeNamed(node, "disabled");
+        if (!disabled || isEnabledLiteral(disabled) || isWait(disabled)) return;
+        if (attributeNamed(node, "aria-describedby")) return;
+        if (node.attributes.some((attribute) => attribute.type === "JSXSpreadAttribute")) return;
+        context.report({ node: disabled, messageId: "disabled-without-reason" });
+      },
+    };
+  },
+};

package/dist/eslint/rules/ellipsis-opens-a-dialog.js

@@ -0,0 +1,110 @@
+/*
+ * Standard tool checked first: `no-restricted-syntax` can match a label that
+ * ends in an ellipsis, but not what its command does: whether the handler
+ * opens something (a call that opens or passes `true`), runs, or navigates.
+ */
+import { childText, keyName, literalText } from "./literal-text.js";
+import { renderedImports } from "./rendered-import.js";
+
+const ENDS_IN_ELLIPSIS = /(?:…|\.\.\.)\s*$/;
+const COMMAND_KEYS = new Set(["onClick", "onSelect", "link", "render", "icon"]);
+const HANDLER_KEYS = new Set(["onClick", "onSelect"]);
+const MENU_ROWS = new Set([
+  "DropdownMenuItem",
+  "DropdownMenuCommand",
+  "ContextMenuItem",
+  "MenubarItem",
+]);
+const MENU_LINKS = new Set(["DropdownMenuLink", "ContextMenuLink"]);
+const FROM_DESIGN_SYSTEM = /^(@nadicodeai\/ui(\/|$)|@\/|\.)/;
+const OPENING_CALL = /^(?:open|show)(?:[A-Z]|$)/;
+const FUNCTIONS = new Set(["ArrowFunctionExpression", "FunctionExpression"]);
+
+const calleeName = (callee) => {
+  if (callee.type === "Identifier") return callee.name;
+  if (callee.type === "MemberExpression" && !callee.computed) return callee.property.name;
+  return null;
+};
+
+function opensSomething(node, visitorKeys) {
+  const calls = [];
+  const stack = [node.body];
+  while (stack.length > 0) {
+    const current = stack.pop();
+    if (current.type === "CallExpression") calls.push(current);
+    for (const key of visitorKeys[current.type] ?? []) {
+      const value = current[key];
+      for (const child of Array.isArray(value) ? value : [value]) {
+        if (child?.type) stack.push(child);
+      }
+    }
+  }
+  return calls.some(
+    (call) =>
+      OPENING_CALL.test(calleeName(call.callee) ?? "") ||
+      call.arguments.some((argument) => argument.type === "Literal" && argument.value === true),
+  );
+}
+
+export const ellipsisOpensADialog = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "A command's label ends in an ellipsis only when the command opens a dialog.",
+    },
+    schema: [],
+    messages: {
+      "ellipsis-without-dialog":
+        'An ellipsis says "this asks for more before it acts". "{{label}}" navigates or runs at once, so drop the ellipsis; keep it only on a command that opens a dialog.',
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const { visitorKeys } = context.sourceCode;
+
+    function reportsNoDialog(handler) {
+      return (
+        handler !== undefined &&
+        FUNCTIONS.has(handler.type) &&
+        !opensSomething(handler, visitorKeys)
+      );
+    }
+
+    return {
+      ObjectExpression(node) {
+        const keys = new Map(node.properties.map((property) => [keyName(property), property]));
+        const label = literalText(keys.get("label")?.value);
+        if (label === null || !ENDS_IN_ELLIPSIS.test(label)) return;
+        if (![...keys.keys()].some((key) => COMMAND_KEYS.has(key))) return;
+        if (keys.has("render")) return;
+        const handlerProperty = [...keys].find(([key]) => HANDLER_KEYS.has(key))?.[1];
+        const navigates = keys.has("link");
+        if (navigates || reportsNoDialog(handlerProperty?.value)) {
+          context.report({
+            node: keys.get("label").value,
+            messageId: "ellipsis-without-dialog",
+            data: { label },
+          });
+        }
+      },
+      JSXElement(node) {
+        const imported = importOf(node.openingElement.name);
+        if (!imported || !FROM_DESIGN_SYSTEM.test(imported.source)) return;
+        const row = MENU_ROWS.has(imported.name);
+        if (!row && !MENU_LINKS.has(imported.name)) return;
+        const label = childText(node);
+        if (label === null || !ENDS_IN_ELLIPSIS.test(label)) return;
+        const handler = node.openingElement.attributes.find(
+          (attribute) => attribute.type === "JSXAttribute" && HANDLER_KEYS.has(attribute.name.name),
+        )?.value?.expression;
+        if (!row || reportsNoDialog(handler)) {
+          context.report({
+            node: node.openingElement,
+            messageId: "ellipsis-without-dialog",
+            data: { label },
+          });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/input-group-owners.js

@@ -0,0 +1,155 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match an
+ * `InputGroupAddon` holding `<Search/>`, but not an element joined to its import
+ * (a renamed or namespaced one), nor the shape of a whole group: only addons of
+ * fixed text or one icon around one input, a group with another button, a
+ * block addon or a textarea allowed. That needs the group's children together.
+ */
+import {
+  PACKAGE_BARREL,
+  findBelow,
+  partOf,
+  renderedImports,
+  staticAttribute,
+  walk,
+} from "./rendered-import.js";
+
+const GROUP_PARTS = [
+  "InputGroup",
+  "InputGroupAddon",
+  "InputGroupButton",
+  "InputGroupInput",
+  "InputGroupText",
+  "InputGroupTextarea",
+];
+
+const GROUP_MODULES = [
+  "@nadicodeai/ui/components/input-group",
+  PACKAGE_BARREL,
+  "@/components/input-group",
+];
+
+const PARTS = new Map(
+  GROUP_PARTS.map((part) => [part, GROUP_MODULES.map((from) => ({ from, part }))]),
+);
+
+const ICON_MODULES = new Set(["lucide-react", "@nadicodeai/ui/components/house-icons"]);
+const SEARCH_ICONS = new Set(["Search", "SearchIcon"]);
+const CLEAR_ICONS = new Set(["X", "XIcon"]);
+const INLINE_ALIGNS = new Set(["inline-start", "inline-end"]);
+
+const significant = (element) =>
+  element.children.filter(
+    (child) =>
+      !(child.type === "JSXText" && child.value.trim() === "") &&
+      !(child.type === "JSXExpressionContainer" && child.expression.type === "JSXEmptyExpression"),
+  );
+
+const isFixedText = (child) =>
+  child.type === "JSXText" ||
+  (child.type === "JSXExpressionContainer" && child.expression.type === "Literal");
+
+export const inputGroupOwners = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A search box, a box that clears and fixed text or an icon in a box are drawn by the component that owns them, not by hand from InputGroup parts.",
+    },
+    schema: [],
+    messages: {
+      "hand-built-field":
+        "Use the component that owns this field: CollectionSearch for a collection's search, ClearableInput for a box that clears, Input's prefix and suffix for fixed text or an icon in the box.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const { visitorKeys } = context.sourceCode;
+
+    const partName = (element) =>
+      partOf(importOf(element.openingElement.name), PARTS, context.filename);
+
+    const iconName = (element) => {
+      const imported = importOf(element.openingElement.name);
+      return imported && ICON_MODULES.has(imported.source) ? imported.name : null;
+    };
+
+    const holdsIcon = (element, names) =>
+      findBelow(
+        element,
+        visitorKeys,
+        (node) => node.type === "JSXElement" && names.has(iconName(node)),
+      ) !== null;
+
+    function holdsTextOrOneIcon(element) {
+      const content = significant(element);
+      if (content.length === 0) return false;
+      if (content.length === 1 && content[0].type === "JSXElement") {
+        const [only] = content;
+        if (iconName(only)) return true;
+        return partName(only) === "InputGroupText" && holdsTextOrOneIcon(only);
+      }
+      return content.every(isFixedText);
+    }
+
+    function readGroup(group) {
+      const facts = {
+        inputs: 0,
+        hasTextarea: false,
+        hasBlockAddon: false,
+        hasSearchAddon: false,
+        hasClearButton: false,
+        hasOtherButton: false,
+      };
+      walk(group, visitorKeys, (node) => {
+        if (node.type !== "JSXElement") return true;
+        const part = partName(node);
+        if (part === "InputGroup") return false;
+        if (part === "InputGroupInput") facts.inputs += 1;
+        if (part === "InputGroupTextarea") facts.hasTextarea = true;
+        if (part === "InputGroupAddon") {
+          const { openingElement } = node;
+          const hasAlign = openingElement.attributes.some(
+            (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === "align",
+          );
+          if (hasAlign && !INLINE_ALIGNS.has(staticAttribute(openingElement, "align"))) {
+            facts.hasBlockAddon = true;
+          }
+          if (holdsIcon(node, SEARCH_ICONS)) facts.hasSearchAddon = true;
+        }
+        if (part === "InputGroupButton") {
+          if (holdsIcon(node, CLEAR_ICONS)) facts.hasClearButton = true;
+          else facts.hasOtherButton = true;
+        }
+        return true;
+      });
+      return facts;
+    }
+
+    function isFixedAdornments(group) {
+      const children = significant(group);
+      if (!children.every((child) => child.type === "JSXElement")) return false;
+      const parts = children.map(partName);
+      const addons = children.filter((_, index) => parts[index] === "InputGroupAddon");
+      const inputs = parts.filter((part) => part === "InputGroupInput");
+      return (
+        inputs.length === 1 &&
+        addons.length > 0 &&
+        addons.length + inputs.length === children.length &&
+        addons.every(holdsTextOrOneIcon)
+      );
+    }
+
+    return {
+      JSXElement(node) {
+        if (partName(node) !== "InputGroup") return;
+        const facts = readGroup(node);
+        if (facts.hasTextarea || facts.hasBlockAddon || facts.hasOtherButton) return;
+        const isSearch = facts.inputs > 0 && facts.hasSearchAddon;
+        if (isSearch || facts.hasClearButton || isFixedAdornments(node)) {
+          context.report({ node: node.openingElement, messageId: "hand-built-field" });
+        }
+      },
+    };
+  },
+};

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;
+}