pasika 0.3.1 → 0.3.2

package/dist/eslint/pasika/rules/enforce-cn-merge.d.ts

@@ -6,4 +6,16 @@
  * @see docs/styling-guide/rules/class-composition-rule.md
  */
 import type { Rule } from "eslint";
-export declare const enforceCnMergeRule: Rule.RuleModule;
+import type { JsxAttributeNode } from "../ast-types.js";
+export declare const enforceCnMergeRule: {
+    meta: {
+        schema: never[];
+        type: "problem";
+        docs: {
+            description: string;
+        };
+    };
+    create(context: Rule.RuleContext): {
+        JSXAttribute(node: JsxAttributeNode): void;
+    };
+};

package/dist/eslint/pasika/rules/enforce-cn-merge.js

@@ -8,72 +8,75 @@
 function classCount(str) {
     return str.split(/\s+/).filter(Boolean).length;
 }
+function isComponentName(name) {
+    return name?.type === "JSXIdentifier" && /^[A-Z]/.test(name.name);
+}
+function isOuterLayoutClass(className) {
+    const utility = className.split(":").pop() ?? className;
+    return /^(?:-?m[trblsexy]?-.+|(?:min-|max-)?[wh]-.+|size-.+|(?:flex-(?:1|auto|initial|none|grow|shrink|basis-.+)|grow(?:-.+)?|shrink(?:-.+)?|basis-.+|order-.+|(?:col|row)-(?:auto|span-.+|start-.+|end-.+)|(?:self|place-self|justify-self)-.+|z-.+|gap-.+|space-[xy]-.+))$/.test(utility);
+}
+function stringArguments(node) {
+    if (node?.type === "Literal" && typeof node.value === "string")
+        return [node.value];
+    if (node?.type === "TemplateLiteral")
+        return node.quasis.map((quasi) => quasi.value.raw);
+    if (node?.type === "ConditionalExpression")
+        return [...stringArguments(node.consequent), ...stringArguments(node.alternate)];
+    if (node?.type === "LogicalExpression")
+        return [...stringArguments(node.left), ...stringArguments(node.right)];
+    if (node?.type === "CallExpression" && node.callee.type === "Identifier" && node.callee.name === "cn") {
+        return node.arguments.flatMap((argument) => stringArguments(argument));
+    }
+    return [];
+}
 export const enforceCnMergeRule = {
-    meta: {
-        schema: [],
-        type: "problem",
-        docs: {
-            description: "Enforce cn() for conditional class merging.",
-        },
-    },
+    meta: { schema: [], type: "problem", docs: { description: "Enforce cn() for conditional class merging." } },
     create(context) {
         return {
             JSXAttribute(node) {
-                if (node.name.name !== "className" && node.name.name !== "class")
+                const attributeName = node.name?.name ?? "";
+                const element = node.parent.parent;
+                const isComponentProp = isComponentName(element.openingElement?.name);
+                if (isComponentProp && attributeName !== "className" && attributeName.endsWith("ClassName")) {
+                    context.report({ node, message: "Expose appearance through typed variant props instead of separate internal class-name props. See docs/styling-guide/rules/class-composition-rule.md" });
+                    return;
+                }
+                if (attributeName !== "className" && attributeName !== "class")
                     return;
                 const valueNode = node.value;
                 if (!valueNode)
                     return;
+                if (isComponentProp && attributeName === "className") {
+                    const expression = valueNode.type === "JSXExpressionContainer" ? valueNode.expression : valueNode;
+                    const invalidClass = stringArguments(expression).flatMap((value) => value.split(/\s+/).filter(Boolean)).find((className) => !isOuterLayoutClass(className));
+                    if (invalidClass)
+                        context.report({ node, message: `Passed className contains non-layout utility "${invalidClass}". Expose appearance through typed variant props. See docs/styling-guide/rules/class-composition-rule.md` });
+                    return;
+                }
                 if (valueNode.type === "Literal" && typeof valueNode.value === "string") {
-                    if (classCount(valueNode.value) > 5) {
-                        context.report({
-                            node,
-                            message: "Static className with more than 5 classes must use cn() with grouped string literals. " +
-                                "See docs/styling-guide/rules/class-composition-rule.md",
-                        });
-                    }
+                    if (classCount(valueNode.value) > 5)
+                        context.report({ node, message: "Static className with more than 5 classes must use cn() with grouped string literals. See docs/styling-guide/rules/class-composition-rule.md" });
                     return;
                 }
-                if (valueNode.type !== "JSXExpressionContainer" || !valueNode.expression)
+                if (valueNode.type !== "JSXExpressionContainer")
                     return;
                 const expr = valueNode.expression;
                 if (expr.type === "BinaryExpression" && expr.operator === "+") {
-                    context.report({
-                        node,
-                        message: "Use cn() instead of + operator for className. " +
-                            "See docs/styling-guide/rules/class-composition-rule.md",
-                    });
+                    context.report({ node, message: "Use cn() instead of + operator for className. See docs/styling-guide/rules/class-composition-rule.md" });
                     return;
                 }
                 if (expr.type === "TemplateLiteral" && expr.expressions.length > 0) {
-                    context.report({
-                        node,
-                        message: "Use cn() instead of template literals with conditionals for className. " +
-                            "See docs/styling-guide/rules/class-composition-rule.md",
-                    });
+                    context.report({ node, message: "Use cn() instead of template literals with conditionals for className. See docs/styling-guide/rules/class-composition-rule.md" });
                     return;
                 }
-                if (expr.type === "Literal" && typeof expr.value === "string") {
-                    if (classCount(expr.value) > 5) {
-                        context.report({
-                            node,
-                            message: "Static className with more than 5 classes must use cn() with grouped string literals. " +
-                                "See docs/styling-guide/rules/class-composition-rule.md",
-                        });
-                    }
+                if (expr.type === "Literal" && typeof expr.value === "string" && classCount(expr.value) > 5) {
+                    context.report({ node, message: "Static className with more than 5 classes must use cn() with grouped string literals. See docs/styling-guide/rules/class-composition-rule.md" });
                     return;
                 }
                 if (expr.type === "CallExpression" && expr.callee.type === "Identifier" && expr.callee.name === "cn") {
                     for (const arg of expr.arguments) {
-                        if (arg.type === "Literal" && typeof arg.value === "string") {
-                            if (classCount(arg.value) > 5) {
-                                context.report({
-                                    node: arg,
-                                    message: "Each cn() string argument must contain at most 5 class names. " +
-                                        "Group by styling concern. " +
-                                        "See docs/styling-guide/rules/class-composition-rule.md",
-                                });
-                            }
+                        if (arg.type === "Literal" && typeof arg.value === "string" && classCount(arg.value) > 5) {
+                            context.report({ node: arg, message: "Each cn() string argument must contain at most 5 class names. Group by styling concern. See docs/styling-guide/rules/class-composition-rule.md" });
                         }
                     }
                 }
@@ -81,4 +84,3 @@ export const enforceCnMergeRule = {
         };
     },
 };
-/* eslint-enable  -- re-enable rules disabled for AST access @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument */

package/dist/eslint/pasika/rules/enforce-cva-variant-props.js

@@ -17,59 +17,65 @@ export const enforceCvaVariantPropsRule = {
         const cvaDefinitions = new Map();
         return {
             VariableDeclarator(node) {
-                if (node.init?.type === "CallExpression" &&
-                    node.init.callee.type === "Identifier" &&
-                    node.init.callee.name === "cva" &&
-                    node.id.type === "Identifier") {
-                    const args = node.init.arguments;
-                    if (args.length < 2)
-                        return;
-                    const options = args[1];
-                    if (options?.type === "ObjectExpression") {
-                        for (const prop of options.properties) {
-                            if (prop.type === "Property" &&
-                                prop.key.type === "Identifier" &&
-                                prop.key.name === "variants" &&
-                                prop.value.type === "ObjectExpression") {
-                                const variantNames = prop.value.properties
-                                    .filter((p) => p.type === "Property" && p.key.type === "Identifier")
-                                    .map((p) => p.key.name);
-                                if (variantNames.length > 0) {
-                                    cvaDefinitions.set(node.id.name, variantNames);
-                                }
-                            }
-                        }
+                const init = node.init;
+                if (init?.type !== "CallExpression" ||
+                    init.callee.type !== "Identifier" ||
+                    init.callee.name !== "cva" ||
+                    node.id.type !== "Identifier") {
+                    return;
+                }
+                const args = init.arguments;
+                if (args.length < 2)
+                    return;
+                const options = args[1];
+                if (options?.type !== "ObjectExpression")
+                    return;
+                for (const prop of options.properties) {
+                    if (prop.type !== "Property" ||
+                        prop.key.type !== "Identifier" ||
+                        prop.key.name !== "variants" ||
+                        prop.value.type !== "ObjectExpression") {
+                        continue;
+                    }
+                    const variantNames = prop.value.properties
+                        .filter((p) => p.type === "Property" && p.key.type === "Identifier")
+                        .map((p) => p.key.name);
+                    if (variantNames.length > 0) {
+                        cvaDefinitions.set(node.id.name, variantNames);
                     }
                 }
             },
             TSTypeAliasDeclaration(node) {
-                if (!node.id.name.endsWith("Props"))
+                const aliasName = node.id?.name;
+                if (!aliasName?.endsWith("Props"))
                     return;
-                if (node.typeAnnotation.type !== "TSTypeLiteral")
+                if (node.typeAnnotation?.type !== "TSTypeLiteral")
                     return;
-                for (const member of node.typeAnnotation.members) {
-                    if (member.type === "TSPropertySignature" &&
-                        member.key.type === "Identifier" &&
-                        member.typeAnnotation?.typeAnnotation?.type === "TSUnionType") {
-                        const keyName = String(member.key.name);
-                        const typeAnn = member.typeAnnotation.typeAnnotation;
-                        // typescript-eslint emits ESTree `Literal` nodes; other TypeScript
-                        // parsers emit `StringLiteral`. Accept both so the rule works
-                        // whichever parser the consuming config installs.
-                        const allStringLiterals = typeAnn.types.every((t) => t.type === "TSLiteralType" &&
-                            (t.literal?.type === "StringLiteral" ||
-                                (t.literal?.type === "Literal" && typeof t.literal.value === "string")));
-                        if (allStringLiterals && typeAnn.types.length >= 2) {
-                            for (const [, variantNames] of cvaDefinitions) {
-                                if (variantNames.includes(keyName)) {
-                                    context.report({
-                                        node: member,
-                                        message: `Variant prop "${keyName}" duplicates CVA variant values. ` +
-                                            "Use VariantProps<typeof variants> instead of manually writing union types. " +
-                                            "See docs/styling-guide/rules/component-variant-rule.md",
-                                    });
-                                    return;
-                                }
+                for (const member of node.typeAnnotation.members ?? []) {
+                    if (member.type !== "TSPropertySignature")
+                        continue;
+                    const keyName = member.key?.type === "Identifier" ? member.key.name : undefined;
+                    if (!keyName)
+                        continue;
+                    const typeAnn = member.typeAnnotation?.typeAnnotation;
+                    if (typeAnn?.type !== "TSUnionType")
+                        continue;
+                    // typescript-eslint emits ESTree `Literal` nodes; other TypeScript
+                    // parsers emit `StringLiteral`. Accept both so the rule works
+                    // whichever parser the consuming config installs.
+                    const allStringLiterals = (typeAnn.types ?? []).every((t) => t.type === "TSLiteralType" &&
+                        (t.literal?.type === "StringLiteral" ||
+                            (t.literal?.type === "Literal" && typeof t.literal.value === "string")));
+                    if (allStringLiterals && (typeAnn.types?.length ?? 0) >= 2) {
+                        for (const variantNames of cvaDefinitions.values()) {
+                            if (variantNames.includes(keyName)) {
+                                context.report({
+                                    node,
+                                    message: `Variant prop "${keyName}" duplicates CVA variant values. ` +
+                                        "Use VariantProps<typeof variants> instead of manually writing union types. " +
+                                        "See docs/styling-guide/rules/component-variant-rule.md",
+                                });
+                                return;
                             }
                         }
                     }
@@ -78,4 +84,3 @@ export const enforceCvaVariantPropsRule = {
         };
     },
 };
-/* eslint-enable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any -- re-enable after AST node access block */

package/dist/eslint/pasika/rules/filename-case.js

@@ -9,6 +9,7 @@
  * @see docs/code-organization-guide/rules/smart-vs-dumb-component-rule.md
  */
 import path from "node:path";
+import { parseComponentInfo } from "./component-conventions.js";
 /**
  * Next.js App Router routing files that are exempt from filename-case checks.
  * https://nextjs.org/docs/app/getting-started/project-structure#routing-files
@@ -70,12 +71,34 @@ export const filenameCaseRule = {
         if (NEXT_ROUTING_FILES.has(base)) {
             return {};
         }
-        // .tsx components may be PascalCase (smart) or kebab-case (dumb)
+        // .tsx components use PascalCase when smart and kebab-case when dumb.
         if (ext === ".tsx") {
-            if (!(isPascalCase(base) || isKebabCase(base))) {
-                return report(context, filename, ext);
-            }
-            return {};
+            return {
+                Program(node) {
+                    const components = parseComponentInfo(context.sourceCode.text, filename);
+                    const component = components[0];
+                    if (component?.smart && !isPascalCase(base)) {
+                        context.report({
+                            node,
+                            message: `Smart component files must use PascalCase.tsx. Filename "${path.basename(filename)}" is not PascalCase.`,
+                        });
+                        return;
+                    }
+                    if (component && !component.smart && !isKebabCase(base)) {
+                        context.report({
+                            node,
+                            message: `Dumb component files must use kebab-case.tsx. Filename "${path.basename(filename)}" is not kebab-case.`,
+                        });
+                        return;
+                    }
+                    if (!component && !(isPascalCase(base) || isKebabCase(base))) {
+                        context.report({
+                            node,
+                            message: `Filename "${path.basename(filename)}" does not match pasika conventions. Component files must be PascalCase.tsx (smart) or kebab-case.tsx (dumb).`,
+                        });
+                    }
+                },
+            };
         }
         // Everything else must be kebab-case
         if (!isKebabCase(base)) {

package/dist/eslint/pasika/rules/hook-complexity.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ESLint rule: pasika/hook-complexity
+ *
+ * - A custom hook with exactly one consumer MUST be extracted when it contains
+ *   two or more imperative categories.
+ * - A custom hook with one consumer that contains fewer than two imperative
+ *   categories MUST stay inline in its consumer file.
+ *
+ * @see docs/code-organization-guide/rules/hook-extraction-rule.md
+ */
+import type { Rule } from "eslint";
+export declare const hookComplexityRule: Rule.RuleModule;

package/dist/eslint/pasika/rules/hook-complexity.js

@@ -0,0 +1,114 @@
+/**
+ * ESLint rule: pasika/hook-complexity
+ *
+ * - A custom hook with exactly one consumer MUST be extracted when it contains
+ *   two or more imperative categories.
+ * - A custom hook with one consumer that contains fewer than two imperative
+ *   categories MUST stay inline in its consumer file.
+ *
+ * @see docs/code-organization-guide/rules/hook-extraction-rule.md
+ */
+import path from "node:path";
+import ts from "typescript";
+const REACT_HOOKS = new Set([
+    "useState",
+    "useEffect",
+    "useContext",
+    "useReducer",
+    "useCallback",
+    "useMemo",
+    "useRef",
+    "useLayoutEffect",
+    "useImperativeHandle",
+    "useDebugValue",
+    "useDeferredValue",
+    "useTransition",
+    "useId",
+    "useSyncExternalStore",
+    "useInsertionEffect",
+]);
+function isHookName(name) {
+    return /^use[A-Z]/.test(name);
+}
+/**
+ * Counts the distinct React hook categories called anywhere inside a hook body.
+ * Re-parses just the body's source slice with the TypeScript compiler so the
+ * walk stays fully typed instead of unrolling ESTree unions by hand.
+ */
+function countImperativeCategories(body, sourceText) {
+    const start = body.range?.[0] ?? 0;
+    const end = body.range?.[1] ?? sourceText.length;
+    const sourceFile = ts.createSourceFile("hook.ts", sourceText.slice(start, end), ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const categories = new Set();
+    const visit = (node) => {
+        if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && REACT_HOOKS.has(node.expression.text)) {
+            categories.add(node.expression.text);
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return categories.size;
+}
+export const hookComplexityRule = {
+    meta: {
+        schema: [],
+        type: "problem",
+        docs: {
+            description: "Require extraction of complex single-consumer hooks and inline of simple ones.",
+        },
+    },
+    create(context) {
+        const filename = context.filename;
+        const sourceRoot = path.resolve("src");
+        const relative = path.relative(sourceRoot, filename);
+        if (relative.startsWith(".."))
+            return {};
+        const segments = relative.split(path.sep);
+        const sourceText = context.sourceCode.text;
+        function checkHook(node, name, body, exported) {
+            if (!exported)
+                return;
+            if (!name || !isHookName(name))
+                return;
+            if (!body)
+                return;
+            const imperativeCount = countImperativeCategories(body, sourceText);
+            const parentFolder = segments.length >= 2 ? segments[segments.length - 2] : undefined;
+            const inSupportFolder = parentFolder === "hooks";
+            if (imperativeCount >= 2 && !inSupportFolder) {
+                context.report({
+                    node,
+                    message: `Hook "${name}" has ${String(imperativeCount)} imperative categories and must be extracted to a hooks/ folder. ` +
+                        "See docs/code-organization-guide/rules/hook-extraction-rule.md",
+                });
+            }
+            else if (imperativeCount < 2 && inSupportFolder) {
+                context.report({
+                    node,
+                    message: `Hook "${name}" has fewer than two imperative categories and must stay inline in its consumer file. ` +
+                        "See docs/code-organization-guide/rules/hook-extraction-rule.md",
+                });
+            }
+        }
+        return {
+            FunctionDeclaration(node) {
+                const exported = node.parent?.type === "ExportNamedDeclaration";
+                checkHook(node, node.id?.name, node.body, exported);
+            },
+            VariableDeclarator(node) {
+                if (node.id.type !== "Identifier")
+                    return;
+                const exported = node.parent.parent?.type === "ExportNamedDeclaration";
+                if (!exported)
+                    return;
+                const init = node.init;
+                if (!init || (init.type !== "ArrowFunctionExpression" && init.type !== "FunctionExpression")) {
+                    return;
+                }
+                if (init.body.type !== "BlockStatement")
+                    return;
+                checkHook(node, node.id.name, init.body, true);
+            },
+        };
+    },
+};

package/dist/eslint/pasika/rules/hook-extraction.d.ts

@@ -0,0 +1,11 @@
+/**
+ * ESLint rule: pasika/hook-extraction
+ *
+ * A custom hook MUST be extracted to its own file when two or more consumers
+ * use it. The file must be read across the tree, because how many files import
+ * a hook is not visible from one file.
+ *
+ * @see docs/code-organization-guide/rules/hook-extraction-rule.md
+ */
+import type { Rule } from "eslint";
+export declare const hookExtractionRule: Rule.RuleModule;

package/dist/eslint/pasika/rules/hook-extraction.js

@@ -0,0 +1,55 @@
+/**
+ * ESLint rule: pasika/hook-extraction
+ *
+ * A custom hook MUST be extracted to its own file when two or more consumers
+ * use it. The file must be read across the tree, because how many files import
+ * a hook is not visible from one file.
+ *
+ * @see docs/code-organization-guide/rules/hook-extraction-rule.md
+ */
+import path from "node:path";
+import { getProjectIndex, symbolKey } from "../project/index.js";
+import { folderSegmentsOf, segmentsOf } from "../project/ccf.js";
+export const hookExtractionRule = {
+    meta: {
+        schema: [],
+        type: "problem",
+        docs: {
+            description: "Require a custom hook with two or more consumers to live in its own hooks/ file.",
+        },
+    },
+    create(context) {
+        const sourceRoot = path.resolve("src");
+        const file = path.resolve(context.filename);
+        const segments = segmentsOf(file, sourceRoot);
+        if (segments.length === 0)
+            return {};
+        const index = getProjectIndex(sourceRoot);
+        if (!index)
+            return {};
+        const module = index.modules.get(file);
+        if (!module)
+            return {};
+        const folder = folderSegmentsOf(file, sourceRoot);
+        const alreadyInHooksFolder = folder.length > 0 && folder[folder.length - 1] === "hooks";
+        const reusedHooks = module.exports
+            .filter((exp) => exp.kind === "hook" && !alreadyInHooksFolder)
+            .map((exp) => ({ exp, consumers: index.symbolConsumers.get(symbolKey(file, exp.name)) }))
+            .filter(({ consumers }) => (consumers?.size ?? 0) >= 2);
+        if (reusedHooks.length === 0)
+            return {};
+        return {
+            Program(node) {
+                for (const { exp, consumers } of reusedHooks) {
+                    context.report({
+                        node,
+                        loc: { line: exp.line, column: 0 },
+                        message: `Hook "${exp.name}" has ${String(consumers?.size ?? 0)} consumers; ` +
+                            "extract it to its own file in a hooks/ folder. " +
+                            "See docs/code-organization-guide/rules/hook-extraction-rule.md",
+                    });
+                }
+            },
+        };
+    },
+};

package/dist/eslint/pasika/rules/import-through-index.d.ts

@@ -0,0 +1,2 @@
+import type { Rule } from "eslint";
+export declare const importThroughIndexRule: Rule.RuleModule;

package/dist/eslint/pasika/rules/import-through-index.js

@@ -0,0 +1,52 @@
+import path from "node:path";
+import { resolveSpecifier } from "../project/index.js";
+import { segmentsOf } from "../project/ccf.js";
+export const importThroughIndexRule = {
+    meta: {
+        schema: [],
+        type: "problem",
+        docs: {
+            description: "Require imports of support files to use their support-folder index.",
+        },
+    },
+    create(context) {
+        const filename = path.resolve(context.filename);
+        const sourceRoot = sourceRootOf(filename);
+        return {
+            Program(node) {
+                for (const specifier of importSpecifiers(context.sourceCode.text)) {
+                    const target = resolveSpecifier(filename, specifier, sourceRoot);
+                    if (!target)
+                        continue;
+                    const targetSegments = segmentsOf(target, sourceRoot);
+                    const supportFolderIndex = targetSegments.findIndex((segment) => ["constants", "types", "schemas"].includes(segment));
+                    const supportFolder = supportFolderIndex >= 0 ? targetSegments[supportFolderIndex] : undefined;
+                    if (!supportFolder || path.basename(target).startsWith("index."))
+                        continue;
+                    const folderIndex = targetSegments.slice(0, supportFolderIndex + 1);
+                    const expected = `@/${folderIndex.join("/")}`;
+                    context.report({
+                        node,
+                        message: `Import support files through ${expected} instead of "${specifier}". ` +
+                            "See the code-organization-guide exports and imports rules.",
+                    });
+                }
+            },
+        };
+    },
+};
+function importSpecifiers(source) {
+    const specifiers = [];
+    const pattern = /\bimport\s+(?:(?:type\s+)?[\s\S]*?\sfrom\s+)?["'](?<specifier>[^"']+)["']/g;
+    for (const match of source.matchAll(pattern)) {
+        const specifier = match.groups?.specifier;
+        if (specifier)
+            specifiers.push(specifier);
+    }
+    return specifiers;
+}
+function sourceRootOf(filename) {
+    const marker = `${path.sep}src${path.sep}`;
+    const srcIndex = filename.lastIndexOf(marker);
+    return srcIndex >= 0 ? filename.slice(0, srcIndex + marker.length - 1) : path.resolve("src");
+}

package/dist/eslint/pasika/rules/interactive-component.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ESLint rule: pasika/interactive-component
+ *
+ * Interactive elements are component boundaries when they are mixed with other
+ * content in the same component. Standalone interactive components are valid.
+ *
+ * @see docs/code-organization-guide/rules/interactive-component-rule.md
+ */
+import type { Rule } from "eslint";
+export declare const interactiveComponentRule: Rule.RuleModule;

package/dist/eslint/pasika/rules/interactive-component.js

@@ -0,0 +1,76 @@
+/**
+ * ESLint rule: pasika/interactive-component
+ *
+ * Interactive elements are component boundaries when they are mixed with other
+ * content in the same component. Standalone interactive components are valid.
+ *
+ * @see docs/code-organization-guide/rules/interactive-component-rule.md
+ */
+const INTERACTIVE_TAGS = new Set([
+    "a",
+    "button",
+    "details",
+    "embed",
+    "iframe",
+    "input",
+    "label",
+    "select",
+    "textarea",
+    "video",
+]);
+function tagName(node) {
+    const name = node.openingElement?.name;
+    if (name?.type !== "JSXIdentifier")
+        return undefined;
+    return name.name;
+}
+function isInteractive(node) {
+    const name = tagName(node);
+    return name !== undefined && INTERACTIVE_TAGS.has(name);
+}
+function isComponentElement(node) {
+    const name = tagName(node);
+    return name !== undefined && /^[A-Z]/.test(name);
+}
+function isComponentReturn(node) {
+    const parent = node.parent;
+    if (parent.type === "ReturnStatement")
+        return true;
+    return parent.type === "ArrowFunctionExpression" && parent.body === node;
+}
+export const interactiveComponentRule = {
+    meta: {
+        schema: [],
+        type: "problem",
+        docs: {
+            description: "Require interactive HTML elements mixed with other content to be extracted into components.",
+        },
+    },
+    create(context) {
+        if (!context.filename.endsWith(".tsx") && !context.filename.endsWith(".jsx"))
+            return {};
+        return {
+            JSXElement(node) {
+                if (!isInteractive(node))
+                    return;
+                if (isComponentElement(node.parent)) {
+                    return;
+                }
+                if (isInteractive(node.parent)) {
+                    return;
+                }
+                if (isComponentReturn(node)) {
+                    return;
+                }
+                const name = tagName(node);
+                if (name === undefined)
+                    return;
+                context.report({
+                    node,
+                    message: `Extract the interactive <${name}> into a descriptive component. ` +
+                        "See docs/code-organization-guide/rules/interactive-component-rule.md",
+                });
+            },
+        };
+    },
+};