xertica-ui 2.2.1 → 2.4.0

package/package.json

@@ -1,213 +1,219 @@
-{
-  "name": "xertica-ui",
-  "version": "2.2.1",
-  "description": "Xertica UI — Enterprise-grade React design system with Tailwind CSS v4, Radix UI, and AI-first documentation.",
-  "type": "module",
-  "main": "./dist/index.cjs.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/components/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
-    },
-    "./ui": {
-      "types": "./dist/components/ui/index.d.ts",
-      "import": "./dist/ui.es.js",
-      "require": "./dist/ui.cjs.js"
-    },
-    "./blocks": {
-      "types": "./dist/components/blocks/index.d.ts",
-      "import": "./dist/blocks.es.js",
-      "require": "./dist/blocks.cjs.js"
-    },
-    "./assistant": {
-      "types": "./dist/components/assistant/index.d.ts",
-      "import": "./dist/assistant.es.js",
-      "require": "./dist/assistant.cjs.js"
-    },
-    "./layout": {
-      "types": "./dist/components/layout/index.d.ts",
-      "import": "./dist/layout.es.js",
-      "require": "./dist/layout.cjs.js"
-    },
-    "./brand": {
-      "types": "./dist/components/brand/index.d.ts",
-      "import": "./dist/brand.es.js",
-      "require": "./dist/brand.cjs.js"
-    },
-    "./media": {
-      "types": "./dist/components/media/index.d.ts",
-      "import": "./dist/media.es.js",
-      "require": "./dist/media.cjs.js"
-    },
-    "./hooks": {
-      "types": "./dist/components/hooks/index.d.ts",
-      "import": "./dist/hooks.es.js",
-      "require": "./dist/hooks.cjs.js"
-    },
-    "./pages": {
-      "types": "./dist/components/pages/index.d.ts",
-      "import": "./dist/pages.es.js",
-      "require": "./dist/pages.cjs.js"
-    },
-    "./style.css": "./dist/xertica-ui.css"
-  },
-  "bin": "./dist/cli.js",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build --sourcemap=false --minify=false",
-    "build:production": "npm run build",
-    "build:types": "tsc -p tsconfig.build.json",
-    "build:cli": "tsup bin/cli.ts --format esm",
-    "prepublishOnly": "npm run check && npm run build:production && npm run build:types && npm run build:cli",
-    "preview": "vite preview",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "type-check": "tsc --noEmit",
-    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "check": "npm run type-check && npm run lint",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_017a22f53dc2543",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest run --coverage"
-  },
-  "files": [
-    "dist",
-    "bin",
-    "templates",
-    "components",
-    "contexts",
-    "styles",
-    "hooks",
-    "assets",
-    "imports",
-    "utils",
-    "guidelines",
-    "llms.txt",
-    "llms-full.txt",
-    "components.json",
-    "docs",
-    "mcp",
-    "scripts",
-    "CHANGELOG.md",
-    "llms-compact.txt"
-  ],
-  "dependencies": {
-    "@google/generative-ai": "^0.24.1",
-    "@hookform/resolvers": "^3.9.1",
-    "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.4",
-    "@radix-ui/react-aspect-ratio": "^1.1.1",
-    "@radix-ui/react-avatar": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-context-menu": "^2.2.4",
-    "@radix-ui/react-dialog": "^1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.4",
-    "@radix-ui/react-hover-card": "^1.1.4",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-menubar": "^1.1.4",
-    "@radix-ui/react-navigation-menu": "^1.2.3",
-    "@radix-ui/react-popover": "^1.1.4",
-    "@radix-ui/react-progress": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slider": "^1.2.1",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toggle": "^1.1.1",
-    "@radix-ui/react-toggle-group": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.6",
-    "@tanstack/react-query": "^5.100.11",
-    "chalk": "^5.6.2",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.0.4",
-    "commander": "^14.0.2",
-    "date-fns": "^3.6.0",
-    "embla-carousel-react": "^8.5.2",
-    "execa": "^9.6.1",
-    "framer-motion": "^11.15.0",
-    "fs-extra": "^11.3.3",
-    "i18next": "^26.2.0",
-    "input-otp": "^1.4.1",
-    "lucide-react": "^0.469.0",
-    "ora": "^9.1.0",
-    "prompts": "^2.4.2",
-    "re-resizable": "^6.9.17",
-    "react-day-picker": "^9.13.0",
-    "react-hook-form": "^7.55.0",
-    "react-i18next": "^17.0.8",
-    "react-resizable-panels": "^2.1.7",
-    "react-syntax-highlighter": "^16.1.1",
-    "recharts": "^2.15.0",
-    "sonner": "^1.7.3",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7",
-    "vaul": "^1.1.2",
-    "zod": "^3.24.1",
-    "zustand": "^5.0.13"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.3"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^5.2.1",
-    "@emotion/is-prop-valid": "^1.4.0",
-    "@storybook/addon-a11y": "10.4.0",
-    "@storybook/addon-docs": "10.4.0",
-    "@storybook/addon-onboarding": "10.4.0",
-    "@storybook/addon-vitest": "^10.4.0",
-    "@storybook/react-vite": "10.4.0",
-    "@tailwindcss/postcss": "^4.0.0",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/fs-extra": "^11.0.4",
-    "@types/google.maps": "^3.58.1",
-    "@types/node": "^22.19.7",
-    "@types/prompts": "^2.4.9",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "@typescript-eslint/eslint-plugin": "^8.19.1",
-    "@typescript-eslint/parser": "^8.19.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser-playwright": "^4.1.5",
-    "@vitest/coverage-v8": "^4.1.5",
-    "autoprefixer": "^10.4.20",
-    "chromatic": "^16.6.0",
-    "cookie": "^1.1.1",
-    "eslint": "^9.18.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^10.4.0",
-    "globals": "^15.14.0",
-    "jsdom": "^29.0.2",
-    "playwright": "^1.59.1",
-    "postcss": "^8.4.49",
-    "prettier": "^3.8.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.3",
-    "set-cookie-parser": "^3.1.0",
-    "storybook": "^10.4.0",
-    "tailwindcss": "^4.0.0",
-    "ts-morph": "^28.0.0",
-    "ts-node": "^10.9.2",
-    "tsup": "^8.5.1",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.5",
-    "vitest": "^4.1.5"
-  }
-}
+{
+  "name": "xertica-ui",
+  "version": "2.4.0",
+  "description": "Xertica UI — Enterprise-grade React design system with Tailwind CSS v4, Radix UI, and AI-first documentation.",
+  "type": "module",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/components/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./ui": {
+      "types": "./dist/components/ui/index.d.ts",
+      "import": "./dist/ui.es.js",
+      "require": "./dist/ui.cjs.js"
+    },
+    "./blocks": {
+      "types": "./dist/components/blocks/index.d.ts",
+      "import": "./dist/blocks.es.js",
+      "require": "./dist/blocks.cjs.js"
+    },
+    "./assistant": {
+      "types": "./dist/components/assistant/index.d.ts",
+      "import": "./dist/assistant.es.js",
+      "require": "./dist/assistant.cjs.js"
+    },
+    "./layout": {
+      "types": "./dist/components/layout/index.d.ts",
+      "import": "./dist/layout.es.js",
+      "require": "./dist/layout.cjs.js"
+    },
+    "./brand": {
+      "types": "./dist/components/brand/index.d.ts",
+      "import": "./dist/brand.es.js",
+      "require": "./dist/brand.cjs.js"
+    },
+    "./media": {
+      "types": "./dist/components/media/index.d.ts",
+      "import": "./dist/media.es.js",
+      "require": "./dist/media.cjs.js"
+    },
+    "./hooks": {
+      "types": "./dist/components/hooks/index.d.ts",
+      "import": "./dist/hooks.es.js",
+      "require": "./dist/hooks.cjs.js"
+    },
+    "./pages": {
+      "types": "./dist/components/pages/index.d.ts",
+      "import": "./dist/pages.es.js",
+      "require": "./dist/pages.cjs.js"
+    },
+    "./style.css": "./dist/xertica-ui.css"
+  },
+  "bin": "./dist/cli.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --sourcemap=false --minify=false",
+    "build:production": "npm run build",
+    "build:types": "tsc -p tsconfig.build.json",
+    "build:cli": "tsup bin/cli.ts --format esm",
+    "cli:dev": "tsup bin/cli.ts --format esm --watch",
+    "cli:run": "node dist/cli.js",
+    "prepublishOnly": "npm run check && npm run build:production && npm run build:types && npm run build:cli",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "type-check": "tsc --noEmit",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "check": "npm run type-check && npm run lint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_017a22f53dc2543",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "templates",
+    "components",
+    "contexts",
+    "styles",
+    "hooks",
+    "assets",
+    "imports",
+    "utils",
+    "guidelines",
+    "llms.txt",
+    "llms-full.txt",
+    "components.json",
+    "docs",
+    "mcp",
+    "scripts",
+    "CHANGELOG.md",
+    "llms-compact.txt"
+  ],
+  "dependencies": {
+    "@google/generative-ai": "^0.24.1",
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-aspect-ratio": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.4",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-hover-card": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@tanstack/react-query": "^5.100.11",
+    "chalk": "^5.6.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
+    "commander": "^14.0.2",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.5.2",
+    "execa": "^9.6.1",
+    "framer-motion": "^11.15.0",
+    "fs-extra": "^11.3.3",
+    "i18next": "^26.2.0",
+    "input-otp": "^1.4.1",
+    "lucide-react": "^0.469.0",
+    "ora": "^9.1.0",
+    "prompts": "^2.4.2",
+    "re-resizable": "^6.9.17",
+    "react-day-picker": "^9.13.0",
+    "react-hook-form": "^7.55.0",
+    "react-i18next": "^17.0.8",
+    "react-resizable-panels": "^2.1.7",
+    "react-syntax-highlighter": "^16.1.1",
+    "recharts": "^2.15.0",
+    "sonner": "^1.7.3",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.1",
+    "zustand": "^5.0.13"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.3"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.2.1",
+    "@emotion/is-prop-valid": "^1.4.0",
+    "@storybook/addon-a11y": "10.4.0",
+    "@storybook/addon-docs": "10.4.0",
+    "@storybook/addon-onboarding": "10.4.0",
+    "@storybook/addon-vitest": "^10.4.0",
+    "@storybook/react-vite": "10.4.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/fs-extra": "^11.0.4",
+    "@types/google.maps": "^3.58.1",
+    "@types/node": "^22.19.7",
+    "@types/prompts": "^2.4.9",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser-playwright": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.9",
+    "autoprefixer": "^10.4.20",
+    "chromatic": "^16.6.0",
+    "cookie": "^1.1.1",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^10.4.0",
+    "globals": "^15.14.0",
+    "jsdom": "^29.0.2",
+    "playwright": "^1.59.1",
+    "postcss": "^8.4.49",
+    "prettier": "^3.8.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.3",
+    "set-cookie-parser": "^3.1.0",
+    "storybook": "^10.4.0",
+    "tailwindcss": "^4.0.0",
+    "ts-morph": "^28.0.0",
+    "ts-node": "^10.9.2",
+    "tsup": "^8.5.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5",
+    "vitest": "^4.1.9"
+  },
+  "overrides": {
+    "esbuild": "0.28.1"
+  }
+}

package/scripts/ai-validator.ts

@@ -1,91 +1,91 @@
-import { Project, SyntaxKind, JsxOpeningElement, JsxSelfClosingElement } from 'ts-morph';
-import * as path from 'path';
-
-// Mapeamento de regras de substituição do HTML Nativo -> Xertica UI
-const RULES: Record<string, { replacement: string; reason: string; props?: string }> = {
-  button: {
-    replacement: 'Button',
-    reason: 'Design System exige `<Button>`. Garante acessibilidade e variantes de tema.',
-    props: "variant='default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'",
-  },
-  input: {
-    replacement: 'Input',
-    reason:
-      'O `<Input>` da Xertica abstrai focus rings, tamanhos (`size`) e cores de fundo do Tema.',
-    props: "type='text' | 'email' | 'password', size='sm' | 'md' | 'lg'",
-  },
-  select: {
-    replacement: 'Select (Cascata)',
-    reason:
-      'O select HTML nativo não aceita estilização profunda. Use a montagem `<Select> > <SelectTrigger> > <SelectContent>`.',
-    props: 'onValueChange={...}',
-  },
-  table: {
-    replacement: 'Table (Cascata)',
-    reason:
-      'Tag nativa quebra layout em resoluções menores. Use `<Table>` envolto nos componentes da Xertica.',
-    props: "className='w-full'",
-  },
-};
-
-function validateFile(filePath: string) {
-  console.log(`\n🔍 Analisando: ${filePath}`);
-
-  const project = new Project();
-  project.addSourceFileAtPath(filePath);
-  const sourceFile = project.getSourceFileOrThrow(filePath);
-
-  let errors = 0;
-
-  // Analisa Tags React: <tag />
-  sourceFile.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement).forEach(element => {
-    errors += checkElement(element, sourceFile.getFilePath());
-  });
-
-  // Analisa Tags React: <tag>...</tag>
-  sourceFile.getDescendantsOfKind(SyntaxKind.JsxOpeningElement).forEach(element => {
-    errors += checkElement(element, sourceFile.getFilePath());
-  });
-
-  if (errors === 0) {
-    console.log('✅ Validação aprovada. Nenhum elemento HTML irregular encontrado.\n');
-  } else {
-    console.log(
-      `\n❌ ${errors} infrações detectadas.\nPor favor, modifique seu código para utilizar Xertica UI.\n`
-    );
-    process.exit(1);
-  }
-}
-
-function checkElement(
-  element: JsxOpeningElement | JsxSelfClosingElement,
-  filePath: string
-): number {
-  const tagName = element.getTagNameNode().getText();
-  const rule = RULES[tagName.toLowerCase()];
-
-  if (rule && tagName === tagName.toLowerCase()) {
-    // É uma tag HTML bloqueada pela rule
-    const startLine = element.getStartLineNumber();
-    console.log(`\n[ERRO] Uso ilegal do elemento nativo: <${tagName}>`);
-    console.log(`       📍 Arquivo: ${filePath}:${startLine}`);
-    console.log(`       💡 Substituição sugerida: <${rule.replacement}>`);
-    console.log(`       📎 Props sugeridas válidas: ${rule.props ?? 'N/A'}`);
-    console.log(`       📝 Motivo: ${rule.reason}\n`);
-    return 1;
-  }
-  return 0;
-}
-
-// Execução Simples: npx ts-node scripts/ai-validator.ts path/to/file.tsx
-const args = process.argv.slice(2);
-if (args.length === 0) {
-  console.log('Uso: ts-node ai-validator.ts <caminho_do_arquivo>');
-  process.exit(1);
-}
-
-// Wildcard loop se necessário, mas focado na chamada 1:1 por MCP.
-args.forEach(file => {
-  const absolutePath = path.resolve(process.cwd(), file);
-  validateFile(absolutePath);
-});
+import { Project, SyntaxKind, JsxOpeningElement, JsxSelfClosingElement } from 'ts-morph';
+import * as path from 'path';
+
+// Mapeamento de regras de substituição do HTML Nativo -> Xertica UI
+const RULES: Record<string, { replacement: string; reason: string; props?: string }> = {
+  button: {
+    replacement: 'Button',
+    reason: 'Design System exige `<Button>`. Garante acessibilidade e variantes de tema.',
+    props: "variant='default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'",
+  },
+  input: {
+    replacement: 'Input',
+    reason:
+      'O `<Input>` da Xertica abstrai focus rings, tamanhos (`size`) e cores de fundo do Tema.',
+    props: "type='text' | 'email' | 'password', size='sm' | 'md' | 'lg'",
+  },
+  select: {
+    replacement: 'Select (Cascata)',
+    reason:
+      'O select HTML nativo não aceita estilização profunda. Use a montagem `<Select> > <SelectTrigger> > <SelectContent>`.',
+    props: 'onValueChange={...}',
+  },
+  table: {
+    replacement: 'Table (Cascata)',
+    reason:
+      'Tag nativa quebra layout em resoluções menores. Use `<Table>` envolto nos componentes da Xertica.',
+    props: "className='w-full'",
+  },
+};
+
+function validateFile(filePath: string) {
+  console.log(`\n🔍 Analisando: ${filePath}`);
+
+  const project = new Project();
+  project.addSourceFileAtPath(filePath);
+  const sourceFile = project.getSourceFileOrThrow(filePath);
+
+  let errors = 0;
+
+  // Analisa Tags React: <tag />
+  sourceFile.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement).forEach(element => {
+    errors += checkElement(element, sourceFile.getFilePath());
+  });
+
+  // Analisa Tags React: <tag>...</tag>
+  sourceFile.getDescendantsOfKind(SyntaxKind.JsxOpeningElement).forEach(element => {
+    errors += checkElement(element, sourceFile.getFilePath());
+  });
+
+  if (errors === 0) {
+    console.log('✅ Validação aprovada. Nenhum elemento HTML irregular encontrado.\n');
+  } else {
+    console.log(
+      `\n❌ ${errors} infrações detectadas.\nPor favor, modifique seu código para utilizar Xertica UI.\n`
+    );
+    process.exit(1);
+  }
+}
+
+function checkElement(
+  element: JsxOpeningElement | JsxSelfClosingElement,
+  filePath: string
+): number {
+  const tagName = element.getTagNameNode().getText();
+  const rule = RULES[tagName.toLowerCase()];
+
+  if (rule && tagName === tagName.toLowerCase()) {
+    // É uma tag HTML bloqueada pela rule
+    const startLine = element.getStartLineNumber();
+    console.log(`\n[ERRO] Uso ilegal do elemento nativo: <${tagName}>`);
+    console.log(`       📍 Arquivo: ${filePath}:${startLine}`);
+    console.log(`       💡 Substituição sugerida: <${rule.replacement}>`);
+    console.log(`       📎 Props sugeridas válidas: ${rule.props ?? 'N/A'}`);
+    console.log(`       📝 Motivo: ${rule.reason}\n`);
+    return 1;
+  }
+  return 0;
+}
+
+// Execução Simples: npx ts-node scripts/ai-validator.ts path/to/file.tsx
+const args = process.argv.slice(2);
+if (args.length === 0) {
+  console.log('Uso: ts-node ai-validator.ts <caminho_do_arquivo>');
+  process.exit(1);
+}
+
+// Wildcard loop se necessário, mas focado na chamada 1:1 por MCP.
+args.forEach(file => {
+  const absolutePath = path.resolve(process.cwd(), file);
+  validateFile(absolutePath);
+});