codemeld 2.1.0

package/dist/converter.js

@@ -0,0 +1,836 @@
+import { readdir, readFile } from 'fs/promises';
+import { writeFile, mkdir } from 'fs/promises';
+import { join, extname, resolve, basename, dirname } from 'path';
+import { getFrameworkAdapter } from './frameworks/index.js';
+import { parseHTMLFile } from './parsers/html-parser.js';
+import { processCSSFile, mergeCSS, rewriteCSSUrls } from './parsers/css-processor.js';
+import { resolveAndAnalyzeJS } from './parsers/js-resolver.js';
+import { generateComponent, renderComponentFile } from './generators/component-generator.js';
+import { scaffoldProject } from './generators/scaffolder.js';
+import { discoverAssets, copyAssets } from './generators/asset-handler.js';
+import { verifyBuild } from './generators/build-verifier.js';
+import { generateRoutes, generateRouterApp, generateSimpleApp } from './generators/router-generator.js';
+import { extractComponents, detectSharedLayout } from './generators/component-extractor.js';
+import { generateErrorBoundary } from './generators/error-boundary.js';
+import { generateUseFetchHook, generateUseStorageHook, generateUseIntervalHook, generateUseTimeoutHook, generateUseScrollRevealHook, generateUseScrollClassHook, generateUseCounterAnimationHook, determineNeededHooks, } from './generators/hooks-generator.js';
+import { detectTailwind, generateTailwindConfig, generatePostCSSConfig, generateTailwindCSS } from './parsers/tailwind-detector.js';
+import { loadConfig } from './utils/config.js';
+import { formatProject } from './utils/formatter.js';
+import { generateReport } from './utils/report.js';
+import { toKebabCase, toComponentName } from './utils/naming.js';
+import { logger } from './utils/logger.js';
+/**
+ * Main conversion pipeline: HTML/CSS/JS site -> modern framework project.
+ * Supports React (Vite), Next.js, Vue, Svelte, and Angular.
+ */
+export async function convert(options) {
+    const startTime = Date.now();
+    const inputDir = resolve(options.input);
+    const outputDir = resolve(options.output);
+    // Load config (file + CLI overrides)
+    const config = await loadConfig(inputDir, options);
+    const cssModules = config.cssModules ?? options.cssModules ?? false;
+    const shouldExtract = config.extractComponents ?? options.extractComponents ?? true;
+    const shouldGenerateHooks = config.generateHooks ?? true;
+    const shouldErrorBoundary = config.errorBoundary ?? true;
+    const shouldFormat = config.prettier ?? options.prettier ?? true;
+    const tailwindMode = config.tailwind ?? 'auto';
+    const totalSteps = 10;
+    let step = 0;
+    const result = {
+        outputDir,
+        components: [],
+        assets: [],
+        buildSuccess: false,
+        errors: [],
+        warnings: [],
+    };
+    // === STEP 1: Discover HTML files ===
+    step++;
+    logger.step(step, totalSteps, 'Discovering source files...');
+    const htmlFiles = await discoverHTMLFiles(inputDir);
+    if (htmlFiles.length === 0) {
+        result.errors.push('No HTML files found in input directory');
+        return result;
+    }
+    logger.info(`Found ${htmlFiles.length} HTML file(s)`);
+    const isMultiPage = htmlFiles.length > 1;
+    if (isMultiPage)
+        logger.info('Multi-page site detected — generating React Router setup');
+    // === STEP 2: Parse HTML files ===
+    step++;
+    logger.step(step, totalSteps, 'Parsing HTML files...');
+    const parsedFiles = [];
+    for (const file of htmlFiles) {
+        try {
+            const parsed = await parseHTMLFile(file);
+            parsedFiles.push(parsed);
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            result.warnings.push(`Failed to parse ${file}: ${msg}`);
+        }
+    }
+    // === STEP 3: Detect Tailwind CSS ===
+    step++;
+    logger.step(step, totalSteps, 'Analyzing CSS framework...');
+    let tailwindDetection = null;
+    if (tailwindMode !== 'disable') {
+        for (const parsed of parsedFiles) {
+            const fullHtml = parsed.headContent + parsed.bodyContent;
+            const detection = detectTailwind(fullHtml);
+            if (detection.isTailwind || tailwindMode === 'force') {
+                tailwindDetection = detection;
+                logger.info(`Tailwind CSS detected (confidence: ${Math.round(detection.confidence * 100)}%)`);
+                break;
+            }
+        }
+    }
+    // === STEP 4: Analyze JavaScript (including linked files) ===
+    step++;
+    logger.step(step, totalSteps, 'Analyzing JavaScript patterns...');
+    const analyses = [];
+    for (const parsed of parsedFiles) {
+        const analysis = await resolveAndAnalyzeJS(parsed, inputDir);
+        analyses.push(analysis);
+        // Log detected patterns
+        const patterns = [];
+        if (analysis.stateVars.length > 0)
+            patterns.push(`${analysis.stateVars.length} state var(s)`);
+        if (analysis.eventHandlers.length > 0)
+            patterns.push(`${analysis.eventHandlers.length} handler(s)`);
+        if (analysis.fetchCalls.length > 0)
+            patterns.push(`${analysis.fetchCalls.length} fetch call(s)`);
+        if (analysis.storageCalls.length > 0)
+            patterns.push(`${analysis.storageCalls.length} storage call(s)`);
+        if (analysis.jqueryPatterns.length > 0)
+            patterns.push(`${analysis.jqueryPatterns.length} jQuery pattern(s)`);
+        if (analysis.domMutations.length > 0)
+            patterns.push(`${analysis.domMutations.length} DOM mutation(s)`);
+        if (analysis.timerCalls.length > 0)
+            patterns.push(`${analysis.timerCalls.length} timer(s)`);
+        if (patterns.length > 0) {
+            logger.info(`  ${parsed.fileName}: ${patterns.join(', ')}`);
+        }
+    }
+    // Detect hash-based SPA routing (single HTML file with multiple virtual pages)
+    const hasHashRouting = analyses.some(a => a.interactivePatterns?.historyRouting?.some(hr => hr.type === 'hash') ||
+        a.pageTemplates.length > 1);
+    const needsRouter = isMultiPage || hasHashRouting;
+    if (hasHashRouting && !isMultiPage)
+        logger.info('Hash-based SPA routing detected — generating React Router setup');
+    // === STEP 5: Scaffold project ===
+    step++;
+    const framework = options.framework || 'react';
+    const adapter = getFrameworkAdapter(framework);
+    logger.step(step, totalSteps, `Scaffolding ${adapter.name} project...`);
+    const projectName = options.componentName || basename(inputDir);
+    // Collect meta, external resources, favicons from first (main) parsed file
+    const mainParsed = parsedFiles[0];
+    const allExternalStyles = [...new Set(parsedFiles.flatMap(p => p.externalStyles || []))];
+    const allExternalScripts = [...new Set(parsedFiles.flatMap(p => p.externalScripts || []))];
+    const allPreconnectLinks = [...new Set(parsedFiles.flatMap(p => p.preconnectLinks || []))];
+    const allStructuredData = parsedFiles.flatMap(p => p.structuredData || []);
+    if (framework === 'react') {
+        await scaffoldProject(outputDir, projectName, needsRouter, !!tailwindDetection, {
+            title: mainParsed?.title,
+            meta: mainParsed?.meta,
+            externalStyles: allExternalStyles,
+            externalScripts: allExternalScripts,
+            preconnectLinks: allPreconnectLinks,
+            structuredData: allStructuredData,
+            favicons: mainParsed?.favicons,
+            manifest: mainParsed?.manifest,
+        });
+    }
+    else {
+        await adapter.scaffoldProject(outputDir, projectName, {
+            useRouter: needsRouter,
+            useTailwind: !!tailwindDetection,
+            title: mainParsed?.title,
+            meta: mainParsed?.meta,
+            externalStyles: allExternalStyles,
+            externalScripts: allExternalScripts,
+            preconnectLinks: allPreconnectLinks,
+            structuredData: allStructuredData,
+            favicons: mainParsed?.favicons,
+            manifest: mainParsed?.manifest,
+        });
+    }
+    if (allExternalStyles.length > 0) {
+        logger.info(`Preserved ${allExternalStyles.length} external stylesheet(s) (CDN fonts/icons)`);
+    }
+    if (allExternalScripts.length > 0) {
+        logger.info(`Preserved ${allExternalScripts.length} external script(s)`);
+    }
+    // Tailwind config files
+    if (tailwindDetection && framework === 'react') {
+        await Promise.all([
+            writeFile(join(outputDir, 'tailwind.config.js'), generateTailwindConfig()),
+            writeFile(join(outputDir, 'postcss.config.js'), generatePostCSSConfig()),
+            writeFile(join(outputDir, 'src', 'styles', 'tailwind.css'), generateTailwindCSS()),
+        ]);
+    }
+    // Error boundary (React-specific; other frameworks handle it differently)
+    if (shouldErrorBoundary && framework === 'react') {
+        await writeFile(join(outputDir, 'src', 'components', 'ErrorBoundary.tsx'), generateErrorBoundary());
+    }
+    // === STEP 6: Generate custom hooks ===
+    step++;
+    logger.step(step, totalSteps, 'Generating custom hooks...');
+    // Merge all interactive patterns across pages
+    const mergedInteractive = {
+        scrollReveals: analyses.flatMap(a => a.interactivePatterns?.scrollReveals || []),
+        tabs: analyses.flatMap(a => a.interactivePatterns?.tabs || []),
+        accordions: analyses.flatMap(a => a.interactivePatterns?.accordions || []),
+        scrollClasses: analyses.flatMap(a => a.interactivePatterns?.scrollClasses || []),
+        counterAnimations: analyses.flatMap(a => a.interactivePatterns?.counterAnimations || []),
+        carousels: analyses.flatMap(a => a.interactivePatterns?.carousels || []),
+        eventDelegations: analyses.flatMap(a => a.interactivePatterns?.eventDelegations || []),
+        debounces: analyses.flatMap(a => a.interactivePatterns?.debounces || []),
+        formValidations: analyses.flatMap(a => a.interactivePatterns?.formValidations || []),
+        historyRouting: analyses.flatMap(a => a.interactivePatterns?.historyRouting || []),
+        mobileMenus: analyses.flatMap(a => a.interactivePatterns?.mobileMenus || []),
+        formHandlers: analyses.flatMap(a => a.interactivePatterns?.formHandlers || []),
+        ripples: analyses.flatMap(a => a.interactivePatterns?.ripples || []),
+    };
+    const allAnalysis = {
+        fetchCalls: analyses.flatMap(a => a.fetchCalls),
+        storageCalls: analyses.flatMap(a => a.storageCalls),
+        timerCalls: analyses.flatMap(a => a.timerCalls),
+        interactivePatterns: mergedInteractive,
+    };
+    const neededHooks = shouldGenerateHooks ? determineNeededHooks(allAnalysis) : [];
+    if (neededHooks.length > 0) {
+        if (framework === 'react') {
+            const hooksDir = join(outputDir, 'src', 'hooks');
+            await mkdir(hooksDir, { recursive: true });
+            for (const hook of neededHooks) {
+                let content = '';
+                switch (hook) {
+                    case 'useFetch':
+                        content = generateUseFetchHook();
+                        break;
+                    case 'useLocalStorage':
+                        content = generateUseStorageHook('localStorage');
+                        break;
+                    case 'useSessionStorage':
+                        content = generateUseStorageHook('sessionStorage');
+                        break;
+                    case 'useInterval':
+                        content = generateUseIntervalHook();
+                        break;
+                    case 'useTimeout':
+                        content = generateUseTimeoutHook();
+                        break;
+                    case 'useScrollReveal': {
+                        const threshold = mergedInteractive.scrollReveals[0]?.threshold ?? 0.1;
+                        content = generateUseScrollRevealHook(threshold);
+                        break;
+                    }
+                    case 'useScrollClass':
+                        content = generateUseScrollClassHook();
+                        break;
+                    case 'useCounterAnimation':
+                        content = generateUseCounterAnimationHook();
+                        break;
+                }
+                if (content) {
+                    await writeFile(join(hooksDir, `${hook}.ts`), content);
+                }
+            }
+        }
+        else {
+            // Use the framework adapter to generate hooks/composables
+            const hookFiles = adapter.generateHooks(neededHooks, mergedInteractive);
+            for (const [relPath, content] of hookFiles) {
+                const fullPath = join(outputDir, 'src', relPath);
+                await mkdir(dirname(fullPath), { recursive: true });
+                await writeFile(fullPath, content);
+            }
+        }
+        logger.info(`Generated ${neededHooks.length} custom hook(s): ${neededHooks.join(', ')}`);
+    }
+    // Log detected interactive patterns
+    const patternNames = [];
+    if (mergedInteractive.scrollReveals.length > 0)
+        patternNames.push(`${mergedInteractive.scrollReveals.length} scroll-reveal(s)`);
+    if (mergedInteractive.tabs.length > 0)
+        patternNames.push(`${mergedInteractive.tabs.length} tab set(s)`);
+    if (mergedInteractive.accordions.length > 0)
+        patternNames.push(`${mergedInteractive.accordions.length} accordion(s)`);
+    if (mergedInteractive.scrollClasses.length > 0)
+        patternNames.push(`${mergedInteractive.scrollClasses.length} scroll-class toggle(s)`);
+    if (mergedInteractive.counterAnimations.length > 0)
+        patternNames.push(`${mergedInteractive.counterAnimations.length} counter animation(s)`);
+    if (mergedInteractive.mobileMenus.length > 0)
+        patternNames.push(`${mergedInteractive.mobileMenus.length} mobile menu(s)`);
+    if (mergedInteractive.formHandlers.length > 0)
+        patternNames.push(`${mergedInteractive.formHandlers.length} form handler(s)`);
+    if (mergedInteractive.ripples.length > 0)
+        patternNames.push(`${mergedInteractive.ripples.length} ripple effect(s)`);
+    if (patternNames.length > 0) {
+        logger.info(`Detected interactive patterns: ${patternNames.join(', ')}`);
+    }
+    // === STEP 7: Process CSS files ===
+    step++;
+    logger.step(step, totalSteps, 'Processing stylesheets...');
+    const globalCSSParts = [];
+    const processedCSSPaths = new Set();
+    for (const parsed of parsedFiles) {
+        for (const cssPath of parsed.linkedStyles) {
+            const htmlDir = parsed.filePath ? dirname(parsed.filePath) : inputDir;
+            const fullCssPath = resolve(htmlDir, cssPath);
+            if (processedCSSPaths.has(fullCssPath))
+                continue;
+            processedCSSPaths.add(fullCssPath);
+            try {
+                const processed = await processCSSFile(fullCssPath, cssModules);
+                const rewritten = rewriteCSSUrls(cssModules ? processed.moduleCSS : processed.globalCSS, (url) => url.startsWith('/') ? url : `/src/assets/${url}`);
+                globalCSSParts.push(rewritten);
+                if (processed.globalCSS && cssModules) {
+                    globalCSSParts.push(processed.globalCSS);
+                }
+            }
+            catch (err) {
+                const msg = err instanceof Error ? err.message : String(err);
+                result.warnings.push(`Failed to process CSS ${cssPath}: ${msg}`);
+            }
+        }
+    }
+    if (globalCSSParts.length > 0) {
+        const globalCSS = mergeCSS(globalCSSParts);
+        const stylesDir = framework === 'svelte'
+            ? join(outputDir, 'src', 'lib', 'styles')
+            : framework === 'nextjs'
+                ? join(outputDir, 'app', 'styles')
+                : join(outputDir, 'src', 'styles');
+        await mkdir(stylesDir, { recursive: true });
+        await writeFile(join(stylesDir, 'global.css'), globalCSS);
+    }
+    // === STEP 8: Generate components ===
+    step++;
+    logger.step(step, totalSteps, `Generating ${adapter.name} components...`);
+    const componentNames = [];
+    const fileNames = [];
+    let extractedComponentCount = 0;
+    // Detect shared layout (header/footer) across pages
+    if (isMultiPage && shouldExtract) {
+        const bodyContents = parsedFiles.map(p => p.bodyContent);
+        const shared = detectSharedLayout(bodyContents);
+        if (shared.header) {
+            logger.info('Shared header detected — extracting Layout component');
+        }
+        if (shared.footer) {
+            logger.info('Shared footer detected — extracting Layout component');
+        }
+    }
+    // Determine component directory based on framework
+    const componentDir = framework === 'svelte'
+        ? join(outputDir, 'src', 'lib', 'components')
+        : framework === 'angular'
+            ? join(outputDir, 'src', 'app', 'components')
+            : framework === 'nextjs'
+                ? join(outputDir, 'app', 'components')
+                : join(outputDir, 'src', 'components');
+    await mkdir(componentDir, { recursive: true });
+    for (let i = 0; i < parsedFiles.length; i++) {
+        const parsed = parsedFiles[i];
+        const analysis = analyses[i];
+        // Extract sub-components if enabled
+        const subComponentImports = [];
+        if (shouldExtract) {
+            const { sections, parentHtml } = extractComponents(parsed.bodyContent);
+            if (sections.length > 0) {
+                extractedComponentCount += sections.length;
+                for (const section of sections) {
+                    const subParsed = {
+                        ...parsed,
+                        fileName: `${section.name}.html`,
+                        bodyContent: section.html,
+                        inlineScripts: [],
+                        linkedScripts: [],
+                        inlineStyles: [],
+                    };
+                    const subComponent = generateComponent(subParsed, cssModules);
+                    // Pass a lightweight analysis to sub-components
+                    const subAnalysis = {
+                        ...analysis,
+                        refs: [],
+                        stateVars: [],
+                        effects: [],
+                        eventHandlers: [],
+                        domMutations: [],
+                        timerCalls: [],
+                        fetchCalls: [],
+                        storageCalls: [],
+                        jqueryPatterns: [],
+                        utilityCode: [],
+                    };
+                    if (framework === 'react') {
+                        const subCode = renderComponentFile(subComponent, cssModules, neededHooks, subAnalysis);
+                        const subFileName = `${toKebabCase(section.name)}.tsx`;
+                        await writeFile(join(componentDir, subFileName), subCode);
+                    }
+                    else {
+                        const subCode = adapter.renderComponent(subComponent, {
+                            cssModules,
+                            customHooks: neededHooks,
+                            analysis: subAnalysis,
+                        });
+                        const subFileName = `${toKebabCase(section.name)}${adapter.componentExtension}`;
+                        // For Angular, create subdirectory per component
+                        if (framework === 'angular') {
+                            const subDir = join(componentDir, toKebabCase(section.name));
+                            await mkdir(subDir, { recursive: true });
+                            await writeFile(join(subDir, `${toKebabCase(section.name)}.component${adapter.componentExtension}`), subCode);
+                        }
+                        else {
+                            await writeFile(join(componentDir, subFileName), subCode);
+                        }
+                    }
+                    subComponentImports.push(section.name);
+                }
+                parsed.bodyContent = parentHtml;
+            }
+        }
+        // If page templates exist, inject home page content into the main element
+        if (analysis.pageTemplates.length > 0) {
+            const homeTemplate = analysis.pageTemplates.find(t => t.route === '/');
+            if (homeTemplate) {
+                const targetId = homeTemplate.targetElement;
+                const emptyPattern = new RegExp(`(<[^>]*id=["']${targetId}["'][^>]*>)\\s*</`, 'i');
+                if (emptyPattern.test(parsed.bodyContent)) {
+                    parsed.bodyContent = parsed.bodyContent.replace(emptyPattern, `$1${homeTemplate.htmlContent}</`);
+                }
+            }
+            // Generate separate components for each page template (non-home)
+            for (const pt of analysis.pageTemplates) {
+                if (pt.route === '/')
+                    continue;
+                const pageName = pt.functionName.replace(/^render/, '').replace(/Page$/, '');
+                const pageParsed = {
+                    ...parsed,
+                    fileName: `${pageName}.html`,
+                    bodyContent: pt.htmlContent,
+                    inlineScripts: [],
+                    linkedScripts: [],
+                    inlineStyles: [],
+                };
+                const pageComponent = generateComponent(pageParsed, cssModules);
+                const pageFileName = toKebabCase(pageComponent.name);
+                if (framework === 'react') {
+                    const pageCode = renderComponentFile(pageComponent, cssModules);
+                    await writeFile(join(componentDir, `${pageFileName}.tsx`), pageCode);
+                }
+                else {
+                    const pageCode = adapter.renderComponent(pageComponent, { cssModules, customHooks: neededHooks });
+                    await writeFile(join(componentDir, `${pageFileName}${adapter.componentExtension}`), pageCode);
+                }
+                extractedComponentCount++;
+            }
+        }
+        const component = generateComponent(parsed, cssModules, analysis);
+        if (framework === 'react') {
+            const componentCode = renderComponentFile(component, cssModules, neededHooks, analysis, subComponentImports);
+            const componentFileName = `${toKebabCase(component.name)}.tsx`;
+            await writeFile(join(componentDir, componentFileName), componentCode);
+        }
+        else {
+            const componentCode = adapter.renderComponent(component, {
+                cssModules,
+                customHooks: neededHooks,
+                analysis,
+                subComponentImports,
+                isPage: true,
+            });
+            if (framework === 'angular') {
+                const angDir = join(componentDir, toKebabCase(component.name));
+                await mkdir(angDir, { recursive: true });
+                await writeFile(join(angDir, `${toKebabCase(component.name)}.component${adapter.componentExtension}`), componentCode);
+            }
+            else {
+                const componentFileName = `${toKebabCase(component.name)}${adapter.componentExtension}`;
+                await writeFile(join(componentDir, componentFileName), componentCode);
+            }
+        }
+        // Write CSS file for non-Vue/Svelte (they embed CSS in SFC)
+        if (component.css && framework === 'react') {
+            await writeFile(join(componentDir, component.cssFileName), component.css);
+        }
+        else if (component.css && (framework === 'nextjs' || framework === 'angular')) {
+            await writeFile(join(componentDir, component.cssFileName), component.css);
+        }
+        result.components.push(component.name);
+        componentNames.push(component.name);
+        fileNames.push(parsed.fileName);
+    }
+    // Generate App entry / routing
+    const hasGlobalCSS = globalCSSParts.length > 0;
+    let routeCount = 0;
+    // Build hash-based SPA route info (shared across all frameworks)
+    let hashRouteNames = null;
+    let hashRouteFiles = null;
+    let hashRoutePaths = null;
+    if (hasHashRouting && !isMultiPage) {
+        const allPageTemplates = analyses.flatMap(a => a.pageTemplates);
+        const pageRouteNames = [];
+        const pageRouteFiles = [];
+        const seenRoutes = new Set();
+        // Add the main page component (shell with nav/footer)
+        pageRouteNames.push(componentNames[0]);
+        pageRouteFiles.push('index.html');
+        seenRoutes.add('/');
+        // Add page template routes (deduplicated)
+        for (const pt of allPageTemplates) {
+            const route = pt.route || `/${pt.functionName.replace(/^render/, '').replace(/Page$/, '').toLowerCase()}`;
+            if (route === '/')
+                continue;
+            if (seenRoutes.has(route))
+                continue;
+            seenRoutes.add(route);
+            const pageName = pt.functionName.replace(/^render/, '').replace(/Page$/, '');
+            const componentName = toComponentName(`${pageName}.html`);
+            pageRouteNames.push(componentName);
+            pageRouteFiles.push(`${pageName.toLowerCase()}.html`);
+        }
+        hashRouteNames = pageRouteNames;
+        hashRouteFiles = pageRouteFiles;
+        hashRoutePaths = Array.from(seenRoutes);
+    }
+    if (framework === 'react') {
+        let appContent;
+        if (hashRouteNames && hashRouteFiles && hashRoutePaths) {
+            const routes = generateRoutes(hashRouteNames, hashRouteFiles);
+            // Override route paths with actual hash routes
+            for (let i = 0; i < routes.length && i < hashRoutePaths.length; i++) {
+                routes[i].path = hashRoutePaths[i];
+            }
+            routeCount = routes.length;
+            appContent = generateRouterApp(routes, hasGlobalCSS, shouldErrorBoundary, !!tailwindDetection, true);
+            logger.info(`Generated ${routes.length} hash route(s) using HashRouter`);
+        }
+        else if (isMultiPage) {
+            const routes = generateRoutes(componentNames, fileNames);
+            routeCount = routes.length;
+            appContent = generateRouterApp(routes, hasGlobalCSS, shouldErrorBoundary, !!tailwindDetection);
+            logger.info(`Generated ${routes.length} route(s)`);
+        }
+        else {
+            routeCount = 1;
+            appContent = generateSimpleApp(componentNames, hasGlobalCSS, shouldErrorBoundary, !!tailwindDetection);
+        }
+        await writeFile(join(outputDir, 'src', 'App.tsx'), appContent);
+    }
+    else {
+        // Use framework adapter for app entry & routing
+        const useHashRouting = !!(hashRouteNames && hashRouteFiles && hashRoutePaths);
+        const routingComponentNames = useHashRouting ? hashRouteNames : componentNames;
+        const routingFileNames = useHashRouting ? hashRouteFiles : fileNames;
+        if (needsRouter) {
+            const routeFiles = adapter.generateRouting({
+                componentNames: routingComponentNames,
+                fileNames: routingFileNames,
+                hasGlobalCSS,
+                errorBoundary: shouldErrorBoundary,
+                tailwind: !!tailwindDetection,
+                routePaths: hashRoutePaths || undefined,
+            });
+            routeCount = routingComponentNames.length;
+            for (const [relPath, content] of routeFiles) {
+                const fullPath = join(outputDir, framework === 'nextjs' ? '' : 'src', relPath);
+                await mkdir(dirname(fullPath), { recursive: true });
+                await writeFile(fullPath, content);
+            }
+            logger.info(`Generated ${routeCount} route(s)${useHashRouting ? ' from hash-based SPA' : ''}`);
+        }
+        else {
+            routeCount = 1;
+        }
+        // App entry file
+        const appEntry = adapter.generateAppEntry({
+            componentNames: routingComponentNames,
+            hasGlobalCSS,
+            errorBoundary: shouldErrorBoundary,
+            tailwind: !!tailwindDetection,
+            isMultiPage: needsRouter,
+        });
+        const appEntryPath = framework === 'nextjs'
+            ? join(outputDir, 'app', 'layout.tsx')
+            : framework === 'svelte'
+                ? join(outputDir, 'src', 'routes', '+layout.svelte')
+                : framework === 'angular'
+                    ? join(outputDir, 'src', 'app', 'app.component.ts')
+                    : join(outputDir, 'src', 'App.vue');
+        await mkdir(dirname(appEntryPath), { recursive: true });
+        await writeFile(appEntryPath, appEntry);
+        // For Next.js single-page: generate page.tsx
+        if (framework === 'nextjs' && !needsRouter && componentNames.length > 0) {
+            const name = componentNames[0];
+            const kebab = toKebabCase(name);
+            const pageContent = `import ${name} from './components/${kebab}';\n\nexport default function Page() {\n  return <${name} />;\n}\n`;
+            await writeFile(join(outputDir, 'app', 'page.tsx'), pageContent);
+        }
+        // For Svelte single-page: generate +page.svelte
+        if (framework === 'svelte' && !needsRouter && componentNames.length > 0) {
+            const name = componentNames[0];
+            const kebab = toKebabCase(name);
+            const pageContent = `<script lang="ts">\n  import ${name} from '$lib/components/${kebab}.svelte';\n</script>\n\n<${name} />\n`;
+            await writeFile(join(outputDir, 'src', 'routes', '+page.svelte'), pageContent);
+        }
+    }
+    // === STEP 9: Copy assets ===
+    step++;
+    logger.step(step, totalSteps, 'Copying assets...');
+    const assets = await discoverAssets(inputDir);
+    const copiedAssets = await copyAssets(assets, outputDir);
+    result.assets = copiedAssets;
+    if (copiedAssets.length > 0) {
+        logger.info(`Copied ${copiedAssets.length} asset(s)`);
+    }
+    // === STEP 10: Format & Verify ===
+    step++;
+    logger.step(step, totalSteps, 'Formatting & verifying...');
+    let formattedCount = 0;
+    if (shouldFormat) {
+        try {
+            formattedCount = await formatProject(outputDir);
+            logger.info(`Formatted ${formattedCount} file(s) with Prettier`);
+        }
+        catch {
+            result.warnings.push('Prettier formatting failed — output is still valid');
+        }
+    }
+    if (options.verify) {
+        logger.info('Running build verification...');
+        const buildResult = await verifyBuild(outputDir);
+        result.buildSuccess = buildResult.success;
+        if (!buildResult.success) {
+            result.errors.push(...buildResult.errors);
+        }
+    }
+    // === Generate test files ===
+    if (options.generateTests && framework === 'react') {
+        const { generateVitestConfig, generateTestSetup, generateComponentTest, generateTestPackageDeps } = await import('./generators/test-generator.js');
+        const testDir = join(outputDir, 'src', 'test');
+        await mkdir(testDir, { recursive: true });
+        await writeFile(join(outputDir, 'vitest.config.ts'), generateVitestConfig());
+        await writeFile(join(testDir, 'setup.ts'), generateTestSetup());
+        // Generate test for each component
+        const componentTestDir = join(outputDir, 'src', 'components');
+        for (let i = 0; i < parsedFiles.length; i++) {
+            const comp = generateComponent(parsedFiles[i], cssModules, analyses[i]);
+            const testCode = generateComponentTest(comp, analyses[i]);
+            await writeFile(join(componentTestDir, `${toKebabCase(comp.name)}.test.tsx`), testCode);
+        }
+        // Add test deps to package.json
+        const pkgPath = join(outputDir, 'package.json');
+        try {
+            const pkg = JSON.parse(await readFile(pkgPath, 'utf-8'));
+            const testDeps = generateTestPackageDeps();
+            pkg.devDependencies = { ...pkg.devDependencies, ...testDeps };
+            pkg.scripts = { ...pkg.scripts, test: 'vitest', 'test:ui': 'vitest --ui', 'test:coverage': 'vitest --coverage' };
+            await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+        }
+        catch { /* skip if package.json can't be read */ }
+        logger.info('Generated Vitest test files');
+    }
+    // === Generate deployment configs ===
+    if (options.generateDeploy) {
+        const { generateDockerfile, generateDockerCompose, generateGithubActionsCI, generateVercelConfig, generateNetlifyConfig, generateEnvExample, generateNginxConf } = await import('./generators/deploy-generator.js');
+        const allFetchCalls = analyses.flatMap(a => a.fetchCalls);
+        await writeFile(join(outputDir, 'Dockerfile'), generateDockerfile(framework));
+        await writeFile(join(outputDir, 'docker-compose.yml'), generateDockerCompose(projectName));
+        await writeFile(join(outputDir, 'nginx.conf'), generateNginxConf(isMultiPage));
+        await writeFile(join(outputDir, 'vercel.json'), generateVercelConfig());
+        await writeFile(join(outputDir, 'netlify.toml'), generateNetlifyConfig());
+        await writeFile(join(outputDir, '.env.example'), generateEnvExample(allFetchCalls));
+        const ghDir = join(outputDir, '.github', 'workflows');
+        await mkdir(ghDir, { recursive: true });
+        await writeFile(join(ghDir, 'ci.yml'), generateGithubActionsCI(framework));
+        logger.info('Generated deployment configs (Docker, CI/CD, Vercel, Netlify, nginx)');
+    }
+    // === Generate SEO files ===
+    if (options.generateSeo) {
+        const { generateSitemap, generateRobotsTxt, generateManifest, enhanceHeadMeta } = await import('./generators/seo-generator.js');
+        const baseUrl = options.seoBaseUrl || 'https://example.com';
+        const publicDir = join(outputDir, 'public');
+        await mkdir(publicDir, { recursive: true });
+        // Build route configs for sitemap
+        if (needsRouter) {
+            const routes = generateRoutes(componentNames, fileNames);
+            await writeFile(join(publicDir, 'sitemap.xml'), generateSitemap(routes, baseUrl));
+        }
+        else {
+            await writeFile(join(publicDir, 'sitemap.xml'), generateSitemap([{ path: '/', componentName: componentNames[0] || 'App', fileName: 'index.html', isIndex: true }], baseUrl));
+        }
+        await writeFile(join(publicDir, 'robots.txt'), generateRobotsTxt(baseUrl));
+        await writeFile(join(publicDir, 'manifest.json'), generateManifest(mainParsed?.title || projectName, mainParsed?.meta?.['description']));
+        logger.info('Generated SEO files (sitemap, robots.txt, manifest)');
+    }
+    // === Accessibility enhancements ===
+    if (options.enhanceA11y && framework === 'react') {
+        try {
+            const { enhanceAccessibility, addSkipNavigation, generateFocusTrapHook } = await import('./generators/accessibility-generator.js');
+            // Enhance each component file with accessibility improvements
+            const compDir = join(outputDir, 'src', 'components');
+            const compFiles = await readdir(compDir).catch(() => []);
+            for (const file of compFiles) {
+                if (typeof file === 'string' && file.endsWith('.tsx') && !file.endsWith('.test.tsx')) {
+                    const filePath = join(compDir, file);
+                    let content = await readFile(filePath, 'utf-8');
+                    content = enhanceAccessibility(content);
+                    await writeFile(filePath, content);
+                }
+            }
+            // Add skip navigation component
+            await writeFile(join(compDir, 'skip-navigation.tsx'), addSkipNavigation());
+            // Add focus trap hook
+            const hooksDir = join(outputDir, 'src', 'hooks');
+            await mkdir(hooksDir, { recursive: true });
+            await writeFile(join(hooksDir, 'useFocusTrap.ts'), generateFocusTrapHook());
+            logger.info('Enhanced accessibility (ARIA labels, semantic HTML, skip nav, focus trap)');
+        }
+        catch (err) {
+            result.warnings.push(`Accessibility enhancement failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }
+    // === Performance optimizations ===
+    if (options.enhancePerf && framework === 'react') {
+        try {
+            const { addLazyLoading, generatePerformanceUtils, generateLoadingFallback, generateCodeSplitConfig } = await import('./generators/performance-generator.js');
+            // Add lazy loading to App.tsx if multi-page
+            if (needsRouter) {
+                const appPath = join(outputDir, 'src', 'App.tsx');
+                let appContent = await readFile(appPath, 'utf-8');
+                appContent = addLazyLoading(appContent, componentNames);
+                await writeFile(appPath, appContent);
+            }
+            // Generate utility files
+            const utilsDir = join(outputDir, 'src', 'utils');
+            await mkdir(utilsDir, { recursive: true });
+            await writeFile(join(utilsDir, 'performance.ts'), generatePerformanceUtils());
+            const compDir = join(outputDir, 'src', 'components');
+            await writeFile(join(compDir, 'loading.tsx'), generateLoadingFallback());
+            logger.info('Added performance optimizations (lazy loading, code splitting, utilities)');
+        }
+        catch (err) {
+            result.warnings.push(`Performance optimization failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }
+    // === Form system ===
+    if (options.generateForms && framework === 'react') {
+        try {
+            const { detectFormFields, generateFormHook, generateFormValidation } = await import('./generators/form-generator.js');
+            // Generate form hook
+            const hooksDir = join(outputDir, 'src', 'hooks');
+            await mkdir(hooksDir, { recursive: true });
+            // Detect forms across all parsed HTML
+            const allFormFields = parsedFiles.flatMap(p => detectFormFields(p.bodyContent));
+            if (allFormFields.length > 0) {
+                await writeFile(join(hooksDir, 'useForm.ts'), generateFormHook(allFormFields));
+                await writeFile(join(hooksDir, 'validation.ts'), generateFormValidation(allFormFields));
+                logger.info(`Generated form handling for ${allFormFields.length} field(s)`);
+            }
+        }
+        catch (err) {
+            result.warnings.push(`Form generation failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }
+    // === Type definitions ===
+    if (options.generateTypes && framework === 'react') {
+        try {
+            const { generateGlobalTypes, generateTypeDefinitions, inferApiResponseType } = await import('./generators/type-generator.js');
+            // Generate global type definitions
+            const typesDir = join(outputDir, 'src', 'types');
+            await mkdir(typesDir, { recursive: true });
+            await writeFile(join(typesDir, 'global.d.ts'), generateGlobalTypes());
+            // Generate API response types from fetch calls
+            const allFetchCalls = analyses.flatMap(a => a.fetchCalls);
+            if (allFetchCalls.length > 0) {
+                await writeFile(join(typesDir, 'api.ts'), inferApiResponseType(allFetchCalls));
+            }
+            // Generate component-specific types
+            for (let i = 0; i < parsedFiles.length; i++) {
+                const comp = generateComponent(parsedFiles[i], cssModules, analyses[i]);
+                const typeDefs = generateTypeDefinitions(comp, analyses[i]);
+                if (typeDefs.trim()) {
+                    await writeFile(join(typesDir, `${toKebabCase(comp.name)}.types.ts`), typeDefs);
+                }
+            }
+            logger.info('Generated TypeScript type definitions');
+        }
+        catch (err) {
+            result.warnings.push(`Type generation failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }
+    // === Collect output stats ===
+    const elapsedMs = Date.now() - startTime;
+    const outputStats = await collectOutputStats(outputDir);
+    // === Generate report ===
+    const report = generateReport(result, analyses, tailwindDetection, {
+        customHooks: neededHooks,
+        routeCount,
+        formatted: formattedCount > 0,
+        extractedComponents: extractedComponentCount,
+        interactivePatterns: mergedInteractive,
+        elapsedMs,
+        outputFiles: outputStats.files,
+        outputLines: outputStats.lines,
+    });
+    return { ...result, report };
+}
+async function discoverHTMLFiles(dir) {
+    const files = [];
+    const entries = await readdir(dir, { withFileTypes: true });
+    for (const entry of entries) {
+        const fullPath = join(dir, entry.name);
+        if (entry.isDirectory() && !['node_modules', '.git', 'dist', 'build'].includes(entry.name)) {
+            const nested = await discoverHTMLFiles(fullPath);
+            files.push(...nested);
+        }
+        else if (entry.isFile() && ['.html', '.htm'].includes(extname(entry.name).toLowerCase())) {
+            files.push(fullPath);
+        }
+    }
+    return files;
+}
+/**
+ * Count all generated files and lines of code in the output project.
+ */
+async function collectOutputStats(outputDir) {
+    let files = 0;
+    let lines = 0;
+    const CODE_EXTS = new Set(['.ts', '.tsx', '.js', '.jsx', '.css', '.html', '.json', '.mjs', '.cjs']);
+    async function walk(dir) {
+        let entries;
+        try {
+            entries = await readdir(dir, { withFileTypes: true });
+        }
+        catch {
+            return;
+        }
+        for (const entry of entries) {
+            const fullPath = join(dir, entry.name);
+            if (entry.isDirectory()) {
+                if (entry.name === 'node_modules' || entry.name === '.git')
+                    continue;
+                await walk(fullPath);
+            }
+            else if (entry.isFile()) {
+                const ext = extname(entry.name).toLowerCase();
+                if (CODE_EXTS.has(ext)) {
+                    files++;
+                    try {
+                        const content = await readFile(fullPath, 'utf-8');
+                        lines += content.split('\n').length;
+                    }
+                    catch { /* skip unreadable */ }
+                }
+            }
+        }
+    }
+    await walk(outputDir);
+    return { files, lines };
+}
+//# sourceMappingURL=converter.js.map