@sun-asterisk/sungen 1.0.0

package/dist/generators/ui-model-builder/react-scanner.js

@@ -0,0 +1,797 @@
+"use strict";
+/**
+ * React/Next.js UI Model Builder
+ * Scans React/Next.js source code to extract UI elements using heuristic analysis
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactScanner = void 0;
+exports.buildUIModel = buildUIModel;
+exports.discoverScreens = discoverScreens;
+const parser = __importStar(require("@babel/parser"));
+const traverse_1 = __importDefault(require("@babel/traverse"));
+const t = __importStar(require("@babel/types"));
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const glob_1 = require("glob");
+class ReactScanner {
+    constructor(config) {
+        this.elements = [];
+        this.elementCounter = 0;
+        this.detectedComponents = [];
+        this.scannedComponentPaths = new Set(); // Avoid duplicate scans
+        this.config = config;
+    }
+    /**
+     * Discover all routes/screens in Next.js app directory
+     */
+    async discoverScreens() {
+        const appDir = this.config.sourceRoot;
+        // Find all page.tsx/page.jsx files (Next.js 13+ app directory)
+        const pageFiles = await (0, glob_1.glob)('**/page.{tsx,jsx}', {
+            cwd: appDir,
+            absolute: false,
+            ignore: ['**/node_modules/**', '**/api/**']
+        });
+        // Extract screen IDs from paths
+        // Example: "login/page.tsx" -> "login"
+        // Example: "auth/login/page.tsx" -> "auth-login"
+        // Example: "page.tsx" -> "home"
+        const screens = pageFiles.map(file => {
+            const dir = path.dirname(file);
+            return dir === '.' ? 'home' : dir.replace(/\//g, '-');
+        });
+        return screens;
+    }
+    /**
+     * Build UI Model for a specific screen
+     */
+    async buildUIModel(screenId) {
+        // Reset state for new screen
+        this.elements = [];
+        this.elementCounter = 0;
+        this.detectedComponents = [];
+        this.scannedComponentPaths.clear();
+        // Determine route path from screen ID
+        // "home" -> "" (root)
+        // "auth-login" -> "auth/login"
+        const routePath = screenId === 'home' ? '' : screenId.replace(/-/g, '/');
+        const routeDir = path.join(this.config.sourceRoot, routePath);
+        // Collect source files to scan
+        const sourceFiles = [];
+        // 1. App root layout
+        const rootLayout = path.join(this.config.sourceRoot, 'layout.tsx');
+        if (fs.existsSync(rootLayout)) {
+            sourceFiles.push(rootLayout);
+        }
+        // 2. Route-specific layout (if exists)
+        const routeLayout = path.join(routeDir, 'layout.tsx');
+        if (fs.existsSync(routeLayout)) {
+            sourceFiles.push(routeLayout);
+        }
+        // 3. Page component
+        const pageTsx = path.join(routeDir, 'page.tsx');
+        const pageJsx = path.join(routeDir, 'page.jsx');
+        if (fs.existsSync(pageTsx)) {
+            sourceFiles.push(pageTsx);
+        }
+        else if (fs.existsSync(pageJsx)) {
+            sourceFiles.push(pageJsx);
+        }
+        else {
+            throw new Error(`Page component not found for screen: ${screenId} at ${routeDir}`);
+        }
+        // Phase 1: Scan all source files (page components)
+        for (const filePath of sourceFiles) {
+            await this.scanFile(filePath);
+        }
+        // Phase 2: Scan detected components (unlimited depth by default)
+        const maxDepth = this.config.maxDepth !== undefined ? this.config.maxDepth : 999; // Default unlimited
+        const depthLabel = maxDepth === 999 ? 'unlimited' : maxDepth.toString();
+        if (this.config.verbose && this.detectedComponents.length > 0) {
+            console.log(`  Detected ${this.detectedComponents.length} component(s), scanning with depth=${depthLabel}...`);
+        }
+        await this.scanComponentsRecursive(this.detectedComponents, 1, maxDepth);
+        // Build and return UI Model
+        const uiModel = {
+            screenId,
+            routeId: routePath || 'home',
+            framework: this.config.framework,
+            sourceFiles: sourceFiles.map(f => path.relative(this.config.sourceRoot, f)),
+            elements: this.elements,
+            metadata: {
+                scannedAt: new Date().toISOString(),
+                version: '1.0.0',
+                hash: this.generateHash(this.elements)
+            }
+        };
+        return uiModel;
+    }
+    /**
+     * Scan a single file and extract UI elements
+     */
+    async scanFile(filePath) {
+        const sourceFileName = path.basename(filePath);
+        const importMap = new Map(); // componentName → importPath
+        if (this.config.verbose) {
+            console.log(`  Scanning: ${filePath}`);
+        }
+        const code = fs.readFileSync(filePath, 'utf-8');
+        // Parse with Babel
+        const ast = parser.parse(code, {
+            sourceType: 'module',
+            plugins: ['typescript', 'jsx']
+        });
+        // Traverse AST to extract imports and JSX elements
+        (0, traverse_1.default)(ast, {
+            // Detect imports
+            ImportDeclaration: (path) => {
+                const importPath = path.node.source.value;
+                // Extract default import: import ChatInput from '...'
+                const defaultSpecifier = path.node.specifiers.find(s => t.isImportDefaultSpecifier(s));
+                if (defaultSpecifier && t.isImportDefaultSpecifier(defaultSpecifier)) {
+                    const componentName = defaultSpecifier.local.name;
+                    importMap.set(componentName, importPath);
+                }
+                // Extract named imports: import { Button } from '...'
+                path.node.specifiers
+                    .filter(s => t.isImportSpecifier(s))
+                    .forEach(specifier => {
+                    if (t.isImportSpecifier(specifier) && t.isIdentifier(specifier.imported)) {
+                        const componentName = specifier.imported.name;
+                        importMap.set(componentName, importPath);
+                    }
+                });
+            },
+            // Extract JSX elements
+            JSXElement: (path) => {
+                this.extractElement(path, sourceFileName, filePath, importMap);
+            },
+            // PHASE 1: Detect conditional rendering patterns
+            JSXExpressionContainer: (path) => {
+                this.detectConditionalElements(path, sourceFileName, filePath, importMap);
+            }
+        });
+    }
+    /**
+     * Smart element filter - determines if element should be scanned
+     */
+    shouldScanElement(tagName, attributes, textContent, path) {
+        const lowercaseTag = tagName.toLowerCase();
+        // 1. Always scan form elements
+        const formElements = ['input', 'button', 'textarea', 'select', 'form'];
+        if (formElements.includes(lowercaseTag))
+            return true;
+        // 2. Always scan links (a, Link)
+        if (lowercaseTag === 'a' || tagName === 'Link')
+            return true;
+        // 3. Scan headings with text content
+        if (/^h[1-6]$/.test(lowercaseTag) && textContent)
+            return true;
+        // 4. Scan images with alt text
+        if (lowercaseTag === 'img' && attributes['alt'])
+            return true;
+        // 5. Scan elements with identifying attributes
+        const hasIdentifier = attributes['id'] ||
+            attributes['name'] ||
+            attributes['data-testid'] ||
+            attributes['data-test-id'] ||
+            attributes['aria-label'] ||
+            attributes['ariaLabel'];
+        if (hasIdentifier)
+            return true;
+        // 6. Scan semantic components (ChatInput, SubmitButton, UserProfile, etc.)
+        // Pattern: *Input, *Field, *TextArea, *Select, *Button, *Link, *Form
+        const semanticPatterns = [
+            /Input$/, // ChatInput, MessageInput
+            /Field$/, // TextField, EmailField
+            /TextArea$/, // MessageTextArea
+            /Select$/, // CountrySelect
+            /Button$/, // SubmitButton, CancelButton
+            /Link$/, // NavLink
+            /Form$/, // LoginForm
+            /Avatar$/, // UserAvatar
+            /Icon$/, // SearchIcon
+            /Image$/, // ProfileImage
+            /Card$/, // UserCard
+            /List$/, // MessageList
+            /Item$/ // ListItem
+        ];
+        if (semanticPatterns.some(pattern => pattern.test(tagName))) {
+            return true;
+        }
+        // 7. Scan text containers with content
+        const textContainers = ['p', 'span', 'div', 'section', 'article'];
+        if (textContainers.includes(lowercaseTag) && textContent && textContent.length > 0) {
+            return true;
+        }
+        // 7.5. PHASE 1.5: Scan error/success message elements by className pattern (even without text)
+        const className = attributes['className'] || '';
+        const isErrorOrSuccessMessage = className.includes('text-red') ||
+            className.includes('text-green') ||
+            className.includes('bg-red') ||
+            className.includes('bg-green') ||
+            className.includes('error') ||
+            className.includes('success') ||
+            className.includes('alert');
+        if (textContainers.includes(lowercaseTag) && isErrorOrSuccessMessage) {
+            return true;
+        }
+        // 7.6. PHASE 1.6: Scan timestamp/metadata elements by className pattern
+        // Fix for elements with dynamic expressions like {timestamp.toLocaleTimeString()}
+        const isTimestampOrMetadata = className.includes('timestamp') ||
+            className.includes('time') ||
+            (className.includes('text-xs') && className.includes('text-gray')) ||
+            (className.includes('text-sm') && className.includes('text-gray') && className.includes('mt-'));
+        if (textContainers.includes(lowercaseTag) && isTimestampOrMetadata) {
+            return true;
+        }
+        // 8. NEW: Smart container detection for structural elements
+        if (['div', 'section', 'article', 'main', 'aside', 'nav'].includes(lowercaseTag)) {
+            if (path && this.shouldScanContainer(tagName, attributes, path)) {
+                return true;
+            }
+        }
+        return false; // Skip everything else
+    }
+    /**
+     * Smart container detection - checks if container is structurally important
+     * NEW: Phase 1 - Task 1
+     */
+    shouldScanContainer(tagName, attributes, path) {
+        // 1. Has important children (form elements, buttons, custom components)?
+        const children = path.node.children.filter(child => t.isJSXElement(child));
+        for (const child of children) {
+            const childTag = this.getTagName(child.openingElement.name);
+            const childTagLower = childTag.toLowerCase();
+            // Has form elements
+            if (['input', 'button', 'textarea', 'select', 'form'].includes(childTagLower)) {
+                return true;
+            }
+            // Has custom components (PascalCase)
+            if (/^[A-Z]/.test(childTag)) {
+                return true;
+            }
+        }
+        // 2. Semantic className keywords
+        const className = attributes['className'] || '';
+        const semanticKeywords = [
+            'message', 'messages', 'chat',
+            'list', 'items',
+            'container', 'wrapper', 'content',
+            'scroll', 'overflow',
+            'grid', 'flex'
+        ];
+        const hasSemanticClass = semanticKeywords.some(keyword => className.toLowerCase().includes(keyword));
+        if (hasSemanticClass) {
+            return true;
+        }
+        // 3. Has scroll behavior (overflow-auto, overflow-y-auto, etc.)
+        if (className.includes('overflow')) {
+            return true;
+        }
+        // 4. Has ARIA role
+        if (attributes['role']) {
+            return true;
+        }
+        // 5. Has ref (often used for important containers)
+        if (attributes['ref']) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Extract UI element from JSX node
+     */
+    extractElement(path, sourceFile, fullFilePath, importMap) {
+        const openingElement = path.node.openingElement;
+        const tagName = this.getTagName(openingElement.name);
+        // Extract attributes and text first (needed for filtering)
+        const attributes = this.extractAttributes(openingElement.attributes);
+        const textContent = this.extractTextContent(path.node);
+        // Check if this is a custom component (starts with uppercase)
+        const isCustomComponent = /^[A-Z]/.test(tagName);
+        // If it's a custom component and we have an import for it, track it for scanning
+        // UPDATED: Phase 1 - Task 2 - Track ALL PascalCase components, not just semantic patterns
+        if (isCustomComponent && importMap.has(tagName)) {
+            const importPath = importMap.get(tagName);
+            // Check if not already tracked
+            const alreadyTracked = this.detectedComponents.some(c => c.name === tagName && c.importPath === importPath);
+            if (!alreadyTracked) {
+                this.detectedComponents.push({
+                    name: tagName,
+                    importPath,
+                    sourceFile: fullFilePath
+                });
+                if (this.config.verbose) {
+                    console.log(`    Found component: ${tagName} from ${importPath}`);
+                }
+            }
+        }
+        // Use smart filter instead of static whitelist (pass path for container detection)
+        if (!this.shouldScanElement(tagName, attributes, textContent, path)) {
+            return; // Skip non-scannable elements
+        }
+        // Build UI Element
+        const element = {
+            key: `e${++this.elementCounter}`,
+            tag: tagName.toLowerCase(),
+            role: attributes['role'] || this.inferRole(tagName),
+            name: attributes['name'],
+            id: attributes['id'],
+            placeholder: attributes['placeholder'],
+            ariaLabel: attributes['aria-label'] || attributes['ariaLabel'],
+            testId: attributes['data-testid'] || attributes['data-test-id'],
+            text: textContent || attributes['value'],
+            source: sourceFile,
+            props: attributes
+        };
+        // Add label if associated
+        if (attributes['aria-labelledby']) {
+            element.label = `[ref:${attributes['aria-labelledby']}]`;
+        }
+        this.elements.push(element);
+    }
+    /**
+     * PHASE 1: Detect and extract conditionally rendered elements
+     * Handles patterns: {condition && <Element />}, {condition ? <A /> : <B />}, {arr.map(...)}
+     * PHASE 1.5: Now also traverses nested children
+     */
+    detectConditionalElements(path, sourceFile, fullFilePath, importMap) {
+        const expr = path.node.expression;
+        // Pattern 1: Logical AND (condition && <Element />)
+        if (t.isLogicalExpression(expr, { operator: '&&' })) {
+            const rightSide = expr.right;
+            if (t.isJSXElement(rightSide)) {
+                // Extract the direct element
+                this.extractConditionalElement(rightSide, sourceFile, fullFilePath, importMap, 'conditional-and');
+                // PHASE 1.5: Also traverse nested children
+                this.traverseConditionalChildren(rightSide, sourceFile, fullFilePath, importMap, 'conditional-nested');
+            }
+            else if (t.isJSXFragment(rightSide)) {
+                // Handle {condition && (<><Element1 /><Element2 /></>)}
+                this.extractFragmentElements(rightSide, sourceFile, fullFilePath, importMap, 'conditional-and');
+            }
+        }
+        // Pattern 2: Ternary operator (condition ? <A /> : <B />)
+        if (t.isConditionalExpression(expr)) {
+            const consequent = expr.consequent;
+            const alternate = expr.alternate;
+            if (t.isJSXElement(consequent)) {
+                this.extractConditionalElement(consequent, sourceFile, fullFilePath, importMap, 'conditional-true');
+                // PHASE 1.5: Traverse nested children
+                this.traverseConditionalChildren(consequent, sourceFile, fullFilePath, importMap, 'conditional-nested');
+            }
+            if (t.isJSXElement(alternate)) {
+                this.extractConditionalElement(alternate, sourceFile, fullFilePath, importMap, 'conditional-false');
+                // PHASE 1.5: Traverse nested children
+                this.traverseConditionalChildren(alternate, sourceFile, fullFilePath, importMap, 'conditional-nested');
+            }
+        }
+        // Pattern 3: Array.map() rendering (arr.map(item => <Element />))
+        if (t.isCallExpression(expr)) {
+            const callee = expr.callee;
+            // Check if it's a .map() call
+            if (t.isMemberExpression(callee) && t.isIdentifier(callee.property, { name: 'map' })) {
+                const mapCallback = expr.arguments[0];
+                if (t.isArrowFunctionExpression(mapCallback) || t.isFunctionExpression(mapCallback)) {
+                    const body = mapCallback.body;
+                    // Case 1: Direct return - arr.map(item => <Element />)
+                    if (t.isJSXElement(body)) {
+                        this.extractConditionalElement(body, sourceFile, fullFilePath, importMap, 'loop-item');
+                    }
+                    // Case 2: Block with return - arr.map(item => { return <Element /> })
+                    if (t.isBlockStatement(body)) {
+                        for (const statement of body.body) {
+                            if (t.isReturnStatement(statement) && statement.argument && t.isJSXElement(statement.argument)) {
+                                this.extractConditionalElement(statement.argument, sourceFile, fullFilePath, importMap, 'loop-item');
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Extract elements from JSX Fragment
+     */
+    extractFragmentElements(fragment, sourceFile, fullFilePath, importMap, renderType) {
+        for (const child of fragment.children) {
+            if (t.isJSXElement(child)) {
+                this.extractConditionalElement(child, sourceFile, fullFilePath, importMap, renderType);
+            }
+        }
+    }
+    /**
+     * PHASE 1.5: Traverse nested children of conditional elements
+     * Example: {error && <div><p>{error}</p></div>} - detect the nested <p> tag
+     */
+    traverseConditionalChildren(element, sourceFile, fullFilePath, importMap, renderType) {
+        for (const child of element.children) {
+            // Traverse nested JSX elements
+            if (t.isJSXElement(child)) {
+                const openingElement = child.openingElement;
+                const tagName = this.getTagName(openingElement.name);
+                const attributes = this.extractAttributes(openingElement.attributes);
+                const textContent = this.extractTextContent(child);
+                // Check if this nested element should be scanned
+                if (this.shouldScanElement(tagName, attributes, textContent, undefined)) {
+                    this.extractConditionalElement(child, sourceFile, fullFilePath, importMap, renderType);
+                }
+                // Recursively traverse deeper children
+                this.traverseConditionalChildren(child, sourceFile, fullFilePath, importMap, renderType);
+            }
+            // Traverse JSX expression containers (for nested dynamic content)
+            if (t.isJSXExpressionContainer(child)) {
+                const expr = child.expression;
+                // Handle nested JSX elements in expressions
+                if (t.isJSXElement(expr)) {
+                    this.extractConditionalElement(expr, sourceFile, fullFilePath, importMap, renderType);
+                }
+            }
+        }
+    }
+    /**
+     * Extract a conditionally rendered JSX element
+     */
+    extractConditionalElement(jsxElement, sourceFile, fullFilePath, importMap, renderType) {
+        const openingElement = jsxElement.openingElement;
+        const tagName = this.getTagName(openingElement.name);
+        // Extract attributes and text
+        const attributes = this.extractAttributes(openingElement.attributes);
+        const textContent = this.extractTextContent(jsxElement);
+        // Check if this is a custom component
+        const isCustomComponent = /^[A-Z]/.test(tagName);
+        if (isCustomComponent && importMap.has(tagName)) {
+            const importPath = importMap.get(tagName);
+            const alreadyTracked = this.detectedComponents.some(c => c.name === tagName && c.importPath === importPath);
+            if (!alreadyTracked) {
+                this.detectedComponents.push({
+                    name: tagName,
+                    importPath,
+                    sourceFile: fullFilePath
+                });
+            }
+        }
+        // Use smart filter to decide if we should scan this element
+        if (!this.shouldScanElement(tagName, attributes, textContent, undefined)) {
+            return;
+        }
+        // Build UI Element with conditional marker
+        const element = {
+            key: `e${++this.elementCounter}`,
+            tag: tagName.toLowerCase(),
+            role: attributes['role'] || this.inferRole(tagName),
+            name: attributes['name'],
+            id: attributes['id'],
+            placeholder: attributes['placeholder'],
+            ariaLabel: attributes['aria-label'] || attributes['ariaLabel'],
+            testId: attributes['data-testid'] || attributes['data-test-id'],
+            text: textContent || attributes['value'],
+            source: sourceFile,
+            props: {
+                ...attributes,
+                isConditional: renderType // Mark as conditional with type
+            }
+        };
+        if (attributes['aria-labelledby']) {
+            element.label = `[ref:${attributes['aria-labelledby']}]`;
+        }
+        this.elements.push(element);
+        if (this.config.verbose) {
+            console.log(`    Found conditional element: ${tagName} (${renderType})`);
+        }
+    }
+    /**
+     * Get tag name from JSX element
+     */
+    getTagName(name) {
+        if (t.isJSXIdentifier(name)) {
+            return name.name;
+        }
+        if (t.isJSXMemberExpression(name)) {
+            // Handle cases like <Form.Input />
+            return this.getTagName(name.property);
+        }
+        return 'unknown';
+    }
+    /**
+     * Extract attributes from JSX element
+     */
+    extractAttributes(attributes) {
+        const result = {};
+        for (const attr of attributes) {
+            if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
+                const name = attr.name.name;
+                const value = this.getAttributeValue(attr.value);
+                if (value !== null) {
+                    result[name] = value;
+                }
+            }
+        }
+        return result;
+    }
+    /**
+     * Get attribute value
+     */
+    getAttributeValue(value) {
+        if (!value)
+            return null;
+        if (t.isStringLiteral(value)) {
+            return value.value;
+        }
+        if (t.isJSXExpressionContainer(value)) {
+            const expr = value.expression;
+            // Handle string literals in expressions
+            if (t.isStringLiteral(expr)) {
+                return expr.value;
+            }
+            // Handle template literals
+            if (t.isTemplateLiteral(expr) && expr.quasis.length === 1) {
+                return expr.quasis[0].value.cooked || '';
+            }
+            // For complex expressions, return placeholder
+            return '[expression]';
+        }
+        return null;
+    }
+    /**
+     * Extract text content from JSX element
+     * PHASE 1 ENHANCED: Extract text from dynamic expressions
+     */
+    extractTextContent(node) {
+        const children = node.children;
+        const textParts = [];
+        for (const child of children) {
+            if (t.isJSXText(child)) {
+                const text = child.value.trim();
+                if (text)
+                    textParts.push(text);
+            }
+            if (t.isJSXExpressionContainer(child)) {
+                const expr = child.expression;
+                // Static string literal
+                if (t.isStringLiteral(expr)) {
+                    textParts.push(expr.value);
+                }
+                // PHASE 1: Extract text from ternary (condition ? 'Text A' : 'Text B')
+                if (t.isConditionalExpression(expr)) {
+                    const texts = [];
+                    if (t.isStringLiteral(expr.consequent)) {
+                        texts.push(expr.consequent.value);
+                    }
+                    if (t.isStringLiteral(expr.alternate)) {
+                        texts.push(expr.alternate.value);
+                    }
+                    if (texts.length > 0) {
+                        textParts.push(texts.join(' / ')); // e.g., "Copy / Copied!"
+                    }
+                }
+                // PHASE 1: Extract text from logical OR (defaultValue || 'Fallback')
+                if (t.isLogicalExpression(expr, { operator: '||' })) {
+                    if (t.isStringLiteral(expr.right)) {
+                        textParts.push(expr.right.value);
+                    }
+                }
+            }
+        }
+        return textParts.length > 0 ? textParts.join(' ') : null;
+    }
+    /**
+     * Infer ARIA role from tag name
+     */
+    inferRole(tagName) {
+        const roleMap = {
+            'button': 'button',
+            'input': 'textbox',
+            'textarea': 'textbox',
+            'select': 'combobox',
+            'a': 'link',
+            'form': 'form'
+        };
+        return roleMap[tagName.toLowerCase()];
+    }
+    /**
+     * Resolve component import path to actual file path
+     */
+    resolveComponentPath(importPath, sourceFile) {
+        try {
+            // Handle different import path formats
+            let resolvedPath;
+            if (importPath.startsWith('@/')) {
+                // Alias import: @/components/ChatInput → PROJECT_ROOT/components/ChatInput.tsx
+                // Note: @ alias points to project root, not sourceRoot (app/)
+                const projectRoot = path.resolve(this.config.sourceRoot, '..');
+                const relativePath = importPath.replace('@/', '');
+                resolvedPath = path.join(projectRoot, relativePath);
+            }
+            else if (importPath.startsWith('./') || importPath.startsWith('../')) {
+                // Relative import: ./components/ChatInput
+                const sourceDir = path.dirname(sourceFile);
+                resolvedPath = path.join(sourceDir, importPath);
+            }
+            else {
+                // Absolute or node_modules import - skip
+                return null;
+            }
+            // Try different file extensions
+            const extensions = ['.tsx', '.ts', '.jsx', '.js'];
+            for (const ext of extensions) {
+                const fullPath = resolvedPath + ext;
+                if (fs.existsSync(fullPath)) {
+                    return fullPath;
+                }
+            }
+            // Try index files
+            for (const ext of extensions) {
+                const indexPath = path.join(resolvedPath, `index${ext}`);
+                if (fs.existsSync(indexPath)) {
+                    return indexPath;
+                }
+            }
+            return null;
+        }
+        catch (error) {
+            if (this.config.verbose) {
+                console.log(`    Could not resolve: ${importPath}`);
+            }
+            return null;
+        }
+    }
+    /**
+     * NEW: Recursively scan components at multiple depths
+     * @param components - List of components to scan
+     * @param currentDepth - Current depth level
+     * @param maxDepth - Maximum depth to scan
+     */
+    async scanComponentsRecursive(components, currentDepth, maxDepth) {
+        if (currentDepth > maxDepth) {
+            return; // Stop recursion at max depth
+        }
+        const startTime = Date.now();
+        const componentsScanned = [];
+        // Scan all components at current level
+        for (const component of components) {
+            const componentPath = this.resolveComponentPath(component.importPath, component.sourceFile);
+            if (!componentPath) {
+                continue; // Skip if path cannot be resolved
+            }
+            // Skip node_modules
+            if (componentPath.includes('node_modules')) {
+                if (this.config.verbose) {
+                    console.log(`    Skipping node_modules: ${componentPath}`);
+                }
+                continue;
+            }
+            // Skip if already scanned (avoid duplicates)
+            if (this.scannedComponentPaths.has(componentPath)) {
+                continue;
+            }
+            // Mark as scanned
+            this.scannedComponentPaths.add(componentPath);
+            // Store the count of detected components before scanning
+            const detectedCountBefore = this.detectedComponents.length;
+            // Scan the component file
+            await this.scanComponentFile(componentPath, component.name);
+            // Track newly detected components from this scan
+            const newlyDetected = this.detectedComponents.slice(detectedCountBefore);
+            componentsScanned.push(...newlyDetected);
+        }
+        const elapsed = Date.now() - startTime;
+        if (this.config.verbose && componentsScanned.length > 0) {
+            console.log(`    [Depth ${currentDepth}] Scanned ${components.length} component(s), found ${componentsScanned.length} sub-component(s) (${elapsed}ms)`);
+        }
+        // Recursively scan newly detected components at next depth
+        if (componentsScanned.length > 0 && currentDepth < maxDepth) {
+            await this.scanComponentsRecursive(componentsScanned, currentDepth + 1, maxDepth);
+        }
+    }
+    /**
+     * Scan component file and extract elements
+     */
+    async scanComponentFile(componentPath, componentName) {
+        if (this.config.verbose) {
+            console.log(`    Scanning component: ${componentName} at ${componentPath}`);
+        }
+        const code = fs.readFileSync(componentPath, 'utf-8');
+        // Parse with Babel
+        const ast = parser.parse(code, {
+            sourceType: 'module',
+            plugins: ['typescript', 'jsx']
+        });
+        const importMap = new Map(); // Empty import map for component scanning
+        // Traverse AST and extract JSX elements (no nested component scanning)
+        (0, traverse_1.default)(ast, {
+            JSXElement: (path) => {
+                const openingElement = path.node.openingElement;
+                const tagName = this.getTagName(openingElement.name);
+                // Extract attributes and text
+                const attributes = this.extractAttributes(openingElement.attributes);
+                const textContent = this.extractTextContent(path.node);
+                // Use smart filter (pass path for container detection)
+                if (!this.shouldScanElement(tagName, attributes, textContent, path)) {
+                    return;
+                }
+                // Build UI Element with component context
+                const element = {
+                    key: `e${++this.elementCounter}`,
+                    tag: tagName.toLowerCase(),
+                    role: attributes['role'] || this.inferRole(tagName),
+                    name: attributes['name'],
+                    id: attributes['id'],
+                    placeholder: attributes['placeholder'],
+                    ariaLabel: attributes['aria-label'] || attributes['ariaLabel'],
+                    testId: attributes['data-testid'] || attributes['data-test-id'],
+                    text: textContent || attributes['value'],
+                    source: `${componentName}.tsx`, // Mark as from component
+                    props: attributes
+                };
+                // Add label if associated
+                if (attributes['aria-labelledby']) {
+                    element.label = `[ref:${attributes['aria-labelledby']}]`;
+                }
+                this.elements.push(element);
+            },
+            // PHASE 1: Detect conditional rendering in components too
+            JSXExpressionContainer: (path) => {
+                this.detectConditionalElements(path, `${componentName}.tsx`, componentPath, importMap);
+            }
+        });
+    }
+    /**
+     * Generate hash for cache key
+     */
+    generateHash(elements) {
+        const crypto = require('crypto');
+        const content = JSON.stringify(elements);
+        return crypto.createHash('sha256').update(content).digest('hex');
+    }
+}
+exports.ReactScanner = ReactScanner;
+// ============================================================================
+// Factory Function
+// ============================================================================
+async function buildUIModel(screenId, config) {
+    const scanner = new ReactScanner(config);
+    return scanner.buildUIModel(screenId);
+}
+async function discoverScreens(config) {
+    const scanner = new ReactScanner(config);
+    return scanner.discoverScreens();
+}
+//# sourceMappingURL=react-scanner.js.map