@sun-asterisk/sungen 1.0.24 → 2.0.1

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

@@ -1,797 +0,0 @@
-"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