codemeld 2.1.0

package/dist/generators/component-generator.js

@@ -0,0 +1,724 @@
+import { htmlToJsx } from '../parsers/html-parser.js';
+import { analyzeJS, convertEventHandlerToReact } from '../parsers/js-analyzer.js';
+import { processCSS, mergeCSS } from '../parsers/css-processor.js';
+import { toComponentName, toKebabCase, toValidIdentifier } from '../utils/naming.js';
+import { implementPatterns } from './pattern-implementer.js';
+/**
+ * Convert DOM mutations (classList.toggle, style changes, textContent) into
+ * React useState declarations where possible. Returns unconverted mutations
+ * as remaining for TODO comments.
+ */
+function convertDOMMutationsToState(mutations) {
+    const stateDeclarations = [];
+    const remaining = [];
+    const seen = new Set();
+    for (const dm of mutations) {
+        // classList.toggle('active') → [isActive, setIsActive] = useState(false)
+        if (dm.type === 'classList.toggle' || dm.type.startsWith('classList')) {
+            const className = dm.value.replace(/['"]/g, '');
+            // Sanitize class name to valid JS identifier (e.g., "text-[var(--primary)]" → "TextVarPrimary")
+            const sanitized = className
+                .replace(/\[.*?\]/g, '') // Remove bracket expressions like [var(--primary)]
+                .replace(/[^a-zA-Z0-9]+/g, ' ') // Replace non-alphanumeric with spaces
+                .trim()
+                .split(/\s+/)
+                .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+                .join('');
+            if (!sanitized)
+                continue; // Skip if nothing remains after sanitization
+            const stateKey = `is${sanitized}`;
+            if (!seen.has(stateKey)) {
+                seen.add(stateKey);
+                stateDeclarations.push({
+                    name: stateKey,
+                    setter: `set${capitalize(stateKey)}`,
+                    initial: 'false',
+                });
+            }
+            continue;
+        }
+        // style.property = value → state-driven inline styles
+        if (dm.type === 'style') {
+            const selector = toValidIdentifier(dm.selector);
+            const stateKey = `${selector}Style`;
+            if (!seen.has(stateKey)) {
+                seen.add(stateKey);
+                stateDeclarations.push({
+                    name: stateKey,
+                    setter: `set${capitalize(stateKey)}`,
+                    initial: '{}',
+                });
+            }
+            continue;
+        }
+        // textContent mutations (e.g., counter updates) → state
+        if (dm.type === 'textContent') {
+            const stateKey = toValidIdentifier(dm.selector || 'text');
+            if (!seen.has(stateKey)) {
+                seen.add(stateKey);
+                stateDeclarations.push({
+                    name: stateKey,
+                    setter: `set${capitalize(stateKey)}`,
+                    initial: "''",
+                });
+            }
+            continue;
+        }
+        // innerHTML with simple content → state
+        if (dm.type === 'innerHTML' && !dm.value.includes('<')) {
+            const stateKey = toValidIdentifier(dm.selector || 'content');
+            if (!seen.has(stateKey)) {
+                seen.add(stateKey);
+                stateDeclarations.push({
+                    name: stateKey,
+                    setter: `set${capitalize(stateKey)}`,
+                    initial: "''",
+                });
+            }
+            continue;
+        }
+        remaining.push(dm);
+    }
+    return { stateDeclarations, remaining };
+}
+/**
+ * Generate a React component from parsed HTML data.
+ * Optionally accepts a pre-computed analysis and custom hook info.
+ */
+export function generateComponent(parsed, cssModules, preAnalysis) {
+    const name = toComponentName(parsed.fileName);
+    const hooks = new Set();
+    // Process CSS
+    const allCSS = mergeCSS(parsed.inlineStyles);
+    const processed = processCSS(allCSS, cssModules);
+    // Analyze JavaScript (use pre-analysis if available)
+    const analyzed = preAnalysis || analyzeJS(parsed.inlineScripts.join('\n'));
+    // Determine needed hooks
+    if (analyzed.stateVars.length > 0)
+        hooks.add('useState');
+    if (analyzed.effects.length > 0 || analyzed.fetchCalls.length > 0)
+        hooks.add('useEffect');
+    if (analyzed.eventHandlers.some(h => h.elementSelector) || analyzed.refs.length > 0)
+        hooks.add('useRef');
+    if (analyzed.domMutations.length > 0)
+        hooks.add('useState');
+    // Convert HTML body to JSX
+    let jsx = htmlToJsx(parsed.bodyContent);
+    // Convert component placeholder divs to JSX component tags
+    jsx = jsx.replace(/<div data-component-placeholder="([^"]+)"><\/div>/g, (_, componentName) => `<${componentName} />`);
+    // Replace class names with CSS module references if using modules
+    if (cssModules && processed.classMap.size > 0) {
+        for (const [original, moduleName] of processed.classMap) {
+            jsx = jsx.replace(new RegExp(`className="${original}"`, 'g'), `className={styles.${moduleName}}`);
+            jsx = jsx.replace(new RegExp(`(className=")([^"]*\\b)${original}(\\b[^"]*")`, 'g'), (_, _pre, before, after) => {
+                const classes = `${before}${original}${after.slice(0, -1)}`.trim().split(/\s+/);
+                const moduleClasses = classes.map(c => {
+                    const mapped = processed.classMap.get(c);
+                    return mapped ? `styles.${mapped}` : `'${c}'`;
+                });
+                if (moduleClasses.length === 1)
+                    return `className={${moduleClasses[0]}}`;
+                return `className={\`${moduleClasses.map(c => c.startsWith("'") ? c.slice(1, -1) : `\${${c}}`).join(' ')}\`}`;
+            });
+        }
+    }
+    const convertedHandlers = analyzed.eventHandlers.map(eh => ({
+        ...eh,
+        handler: convertEventHandlerToReact(eh.handler, analyzed.stateVars),
+    }));
+    const cssFileName = cssModules
+        ? `${toKebabCase(name)}.module.css`
+        : `${toKebabCase(name)}.css`;
+    return {
+        name,
+        jsx,
+        css: cssModules ? processed.moduleCSS : allCSS,
+        cssFileName,
+        hooks,
+        stateVars: analyzed.stateVars,
+        effects: analyzed.effects,
+        eventHandlers: convertedHandlers,
+    };
+}
+/**
+ * Render a full React component file from extracted component data.
+ */
+export function renderComponentFile(component, cssModules, customHooks = [], analysis, subComponentImports = []) {
+    const lines = [];
+    // Pre-compute stubs so we know if useState is needed for imports
+    // (stubs are rendered later in the function body)
+    const preStubs = generateEventHandlerStubs(component.jsx, '');
+    const stubsNeedState = preStubs.some(s => s.includes('useState('));
+    // React imports — use a placeholder that we'll replace at the end
+    // because pattern implementations may add more hooks later
+    const allHooks = new Set(component.hooks);
+    if (analysis?.fetchCalls?.length)
+        allHooks.add('useEffect');
+    if (analysis?.fetchCalls?.length)
+        allHooks.add('useState');
+    if (stubsNeedState)
+        allHooks.add('useState');
+    const REACT_IMPORT_PLACEHOLDER = '___REACT_IMPORT_PLACEHOLDER___';
+    lines.push(REACT_IMPORT_PLACEHOLDER);
+    // CSS imports
+    if (component.css) {
+        if (cssModules) {
+            lines.push(`import styles from './${component.cssFileName}';`);
+        }
+        else {
+            lines.push(`import './${component.cssFileName}';`);
+        }
+    }
+    // Sub-component imports
+    for (const subName of subComponentImports) {
+        const kebab = subName.charAt(0).toLowerCase() + subName.slice(1).replace(/([A-Z])/g, '-$1').toLowerCase();
+        lines.push(`import ${subName} from './${kebab}';`);
+    }
+    // Custom hook imports
+    if (analysis) {
+        if (analysis.fetchCalls.length > 0 && customHooks.includes('useFetch')) {
+            lines.push(`import { useFetch } from '../hooks/useFetch';`);
+        }
+        if (analysis.storageCalls.some(s => s.storageType === 'localStorage') && customHooks.includes('useLocalStorage')) {
+            lines.push(`import { useLocalStorage } from '../hooks/useLocalStorage';`);
+        }
+        if (analysis.storageCalls.some(s => s.storageType === 'sessionStorage') && customHooks.includes('useSessionStorage')) {
+            lines.push(`import { useSessionStorage } from '../hooks/useSessionStorage';`);
+        }
+        if (analysis.timerCalls.some(t => t.type === 'setInterval') && customHooks.includes('useInterval')) {
+            lines.push(`import { useInterval } from '../hooks/useInterval';`);
+        }
+        if (analysis.timerCalls.some(t => t.type === 'setTimeout') && customHooks.includes('useTimeout')) {
+            lines.push(`import { useTimeout } from '../hooks/useTimeout';`);
+        }
+        // Interactive pattern hook imports
+        const ip = analysis.interactivePatterns;
+        if (ip?.scrollReveals?.length && customHooks.includes('useScrollReveal')) {
+            lines.push(`import { useScrollReveal } from '../hooks/useScrollReveal';`);
+        }
+        if (ip?.scrollClasses?.length && customHooks.includes('useScrollClass')) {
+            lines.push(`import { useScrollClass } from '../hooks/useScrollClass';`);
+        }
+        if (ip?.counterAnimations?.length && customHooks.includes('useCounterAnimation')) {
+            lines.push(`import { useCounterAnimation } from '../hooks/useCounterAnimation';`);
+        }
+    }
+    lines.push('');
+    // Component function
+    lines.push(`function ${component.name}() {`);
+    // State declarations
+    for (const sv of component.stateVars) {
+        lines.push(`  const [${sv.name}, ${sv.setter}] = useState(${sv.initialValue});`);
+    }
+    if (component.stateVars.length > 0)
+        lines.push('');
+    // Interactive pattern hook calls
+    if (analysis?.interactivePatterns) {
+        const ip = analysis.interactivePatterns;
+        if (ip.scrollReveals.length > 0 && customHooks.includes('useScrollReveal')) {
+            for (const sr of ip.scrollReveals) {
+                const mode = sr.property === 'animationPlayState' ? 'animation' : 'class';
+                const className = sr.property === 'classList' ? `, '${sr.activeValue}'` : '';
+                lines.push(`  useScrollReveal('${sr.selector}', ${sr.threshold}, '${mode}'${className});`);
+            }
+            lines.push('');
+        }
+        if (ip.scrollClasses.length > 0 && customHooks.includes('useScrollClass')) {
+            for (const sc of ip.scrollClasses) {
+                lines.push(`  useScrollClass('${sc.elementSelector}', '${sc.className}', ${sc.threshold});`);
+            }
+            lines.push('');
+        }
+        if (ip.counterAnimations.length > 0 && customHooks.includes('useCounterAnimation')) {
+            for (const ca of ip.counterAnimations) {
+                lines.push(`  useCounterAnimation('${ca.selector}');`);
+            }
+            lines.push('');
+        }
+        if (ip.tabs.length > 0) {
+            allHooks.add('useState');
+            for (let i = 0; i < ip.tabs.length; i++) {
+                const suffix = ip.tabs.length > 1 ? String(i + 1) : '';
+                lines.push(`  const [activeTab${suffix}, setActiveTab${suffix}] = useState(0);`);
+            }
+            lines.push('');
+        }
+        if (ip.accordions.length > 0) {
+            allHooks.add('useState');
+            for (let i = 0; i < ip.accordions.length; i++) {
+                const suffix = ip.accordions.length > 1 ? String(i + 1) : '';
+                lines.push(`  const [openAccordion${suffix}, setOpenAccordion${suffix}] = useState<number | null>(null);`);
+            }
+            lines.push('');
+        }
+    }
+    // Ref declarations
+    if (analysis?.refs?.length) {
+        for (const ref of analysis.refs) {
+            lines.push(`  const ${ref.name} = useRef<${ref.type}>(null);`);
+        }
+        lines.push('');
+    }
+    // Fetch calls -> useFetch or useEffect+fetch
+    if (analysis?.fetchCalls?.length) {
+        for (const fc of analysis.fetchCalls) {
+            if (customHooks.includes('useFetch')) {
+                const varName = fc.variableName || 'data';
+                lines.push(`  const { data: ${varName}, loading, error } = useFetch('${fc.url}');`);
+            }
+            else {
+                lines.push(`  const [fetchData, setFetchData] = useState<unknown>(null);`);
+                lines.push(`  const [fetchLoading, setFetchLoading] = useState(true);`);
+                lines.push('');
+                lines.push('  useEffect(() => {');
+                lines.push(`    fetch('${fc.url}'${fc.method !== 'GET' ? `, { method: '${fc.method}' }` : ''})`);
+                lines.push('      .then(res => res.json())');
+                lines.push('      .then(data => { setFetchData(data); setFetchLoading(false); })');
+                lines.push('      .catch(err => { console.error(err); setFetchLoading(false); });');
+                lines.push('  }, []);');
+            }
+            lines.push('');
+        }
+    }
+    // Storage calls -> custom hooks
+    if (analysis?.storageCalls?.length) {
+        const processedKeys = new Set();
+        for (const sc of analysis.storageCalls) {
+            if (sc.operation === 'getItem' && !processedKeys.has(sc.key)) {
+                processedKeys.add(sc.key);
+                const varName = toSafeVarName(sc.key);
+                const hookName = sc.storageType === 'localStorage' ? 'useLocalStorage' : 'useSessionStorage';
+                if (customHooks.includes(hookName)) {
+                    lines.push(`  const [${varName}, set${capitalize(varName)}] = ${hookName}('${sc.key}', null);`);
+                }
+            }
+        }
+        if (processedKeys.size > 0)
+            lines.push('');
+    }
+    // Effects
+    for (const effect of component.effects) {
+        lines.push('  useEffect(() => {');
+        for (const line of effect.split('\n')) {
+            lines.push(`    ${line}`);
+        }
+        lines.push('  }, []);');
+        lines.push('');
+    }
+    // Timer calls -> custom hooks or inline useEffect
+    // Filter out timers that contain DOM manipulation (they can't run in React)
+    const safeTimerCalls = (analysis?.timerCalls || []).filter(tc => {
+        return !/\.classList\.|\.innerHTML|\.textContent|\.style\.|\.remove\(\)|document\.|\.appendChild/.test(tc.handler);
+    });
+    if (safeTimerCalls.length > 0) {
+        for (const tc of safeTimerCalls) {
+            if (tc.type === 'setInterval' && customHooks.includes('useInterval')) {
+                lines.push(`  useInterval(() => {`);
+                for (const line of tc.handler.split('\n')) {
+                    if (line.trim())
+                        lines.push(`    ${line.trim()}`);
+                }
+                lines.push(`  }, ${tc.delay});`);
+            }
+            else if (tc.type === 'setTimeout' && customHooks.includes('useTimeout')) {
+                lines.push(`  useTimeout(() => {`);
+                for (const line of tc.handler.split('\n')) {
+                    if (line.trim())
+                        lines.push(`    ${line.trim()}`);
+                }
+                lines.push(`  }, ${tc.delay});`);
+            }
+            else {
+                lines.push('  useEffect(() => {');
+                lines.push(`    const id = ${tc.type}(() => {`);
+                for (const line of tc.handler.split('\n')) {
+                    if (line.trim())
+                        lines.push(`      ${line.trim()}`);
+                }
+                lines.push(`    }, ${tc.delay});`);
+                lines.push(`    return () => clear${tc.type === 'setTimeout' ? 'Timeout' : 'Interval'}(id);`);
+                lines.push('  }, []);');
+            }
+            lines.push('');
+        }
+    }
+    // Event handler functions
+    for (const eh of component.eventHandlers) {
+        const handlerName = `handle${capitalize(eh.event)}`;
+        // Add event parameter for submit, change, input, keydown, etc.
+        const needsEvent = ['submit', 'change', 'input', 'keydown', 'keyup', 'keypress'].includes(eh.event);
+        const eventTypeMap = {
+            submit: 'React.FormEvent<HTMLFormElement>',
+            change: 'React.ChangeEvent<HTMLInputElement>',
+            input: 'React.ChangeEvent<HTMLInputElement>',
+            keydown: 'React.KeyboardEvent<HTMLElement>',
+            keyup: 'React.KeyboardEvent<HTMLElement>',
+            keypress: 'React.KeyboardEvent<HTMLElement>',
+            click: 'React.MouseEvent<HTMLElement>',
+            focus: 'React.FocusEvent<HTMLElement>',
+            blur: 'React.FocusEvent<HTMLElement>',
+        };
+        const eventType = eventTypeMap[eh.event] || 'React.SyntheticEvent';
+        const paramStr = needsEvent ? `(e: ${eventType})` : '()';
+        lines.push(`  const ${handlerName} = ${paramStr} => {`);
+        for (const line of eh.handler.split('\n')) {
+            const trimmed = line.trim();
+            if (!trimmed)
+                continue;
+            // Convert classList.toggle('x') to React state toggle
+            const toggleMatch = trimmed.match(/\w+\.classList\.toggle\(['"]([^'"]+)['"]\)/);
+            if (toggleMatch) {
+                const cls = toggleMatch[1]
+                    .replace(/\[.*?\]/g, '')
+                    .replace(/[^a-zA-Z0-9]+/g, ' ')
+                    .trim()
+                    .split(/\s+/)
+                    .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+                    .join('');
+                if (cls) {
+                    lines.push(`    setIs${cls}(prev => !prev);`);
+                    continue;
+                }
+            }
+            // Skip other raw DOM manipulation lines that would cause TS errors
+            if (/\.\s*(classList|style|innerHTML|textContent|appendChild|removeChild)\b/.test(trimmed) ||
+                /document\.(getElementById|querySelector|getElementsBy)/.test(trimmed)) {
+                lines.push(`    // TODO: ${trimmed}`);
+                continue;
+            }
+            lines.push(`    ${trimmed}`);
+        }
+        lines.push('  };');
+        lines.push('');
+    }
+    // jQuery pattern warnings as comments
+    if (analysis?.jqueryPatterns?.length) {
+        lines.push('  // TODO: The following jQuery patterns were detected and need manual review:');
+        for (const jp of analysis.jqueryPatterns) {
+            lines.push(`  // jQuery: $('${jp.selector}').${jp.method}(${jp.args})`);
+        }
+        lines.push('');
+    }
+    // Convert DOM mutations to React state + effects where possible
+    if (analysis?.domMutations?.length) {
+        const converted = convertDOMMutationsToState(analysis.domMutations);
+        if (converted.stateDeclarations.length > 0) {
+            for (const decl of converted.stateDeclarations) {
+                // Only add if not already declared
+                if (!lines.some(l => l.includes(`const [${decl.name},`))) {
+                    lines.splice(lines.findIndex(l => l.includes('return (')) || lines.length, 0, `  const [${decl.name}, ${decl.setter}] = useState(${decl.initial});`);
+                }
+            }
+            lines.push('');
+        }
+        // Add remaining unconverted mutations as TODO comments
+        if (converted.remaining.length > 0) {
+            lines.push('  // TODO: DOM mutations detected — consider converting to React state:');
+            for (const dm of converted.remaining) {
+                const valueLine = dm.value.split('\n')[0].trim();
+                const suffix = dm.value.includes('\n') ? ' ...' : '';
+                lines.push(`  // ${dm.type}: ${dm.selector} = ${valueLine}${suffix}`);
+            }
+            lines.push('');
+        }
+    }
+    // ─── PATTERN IMPLEMENTATION ENGINE ─────────────────────────────────
+    // Apply detected interactive patterns to generate real working React code
+    // instead of stubs. This modifies the JSX and adds state/handlers.
+    let patternJsx = component.jsx;
+    if (analysis?.interactivePatterns) {
+        const patternResult = implementPatterns(patternJsx, analysis.interactivePatterns, customHooks);
+        patternJsx = patternResult.jsx;
+        // Add pattern state declarations (before return, after existing state)
+        for (const decl of patternResult.stateDeclarations) {
+            // Skip if already declared
+            const varName = decl.match(/\[(\w+),/)?.[1];
+            if (varName && lines.some(l => l.includes(`const [${varName},`)))
+                continue;
+            lines.push(`  ${decl}`);
+        }
+        if (patternResult.stateDeclarations.length > 0)
+            lines.push('');
+        // Add pattern handlers
+        for (const handler of patternResult.handlers) {
+            // Skip if already declared
+            const fnName = handler.match(/const\s+(\w+)\s*=/)?.[1];
+            if (fnName && lines.some(l => l.includes(`const ${fnName}`)))
+                continue;
+            lines.push(`  ${handler}`);
+            lines.push('');
+        }
+        // Add pattern effects
+        for (const effect of patternResult.effects) {
+            lines.push('  useEffect(() => {');
+            lines.push(`    ${effect}`);
+            lines.push('  }, []);');
+            lines.push('');
+            allHooks.add('useEffect');
+        }
+        // Add any additional hooks needed
+        for (const hook of patternResult.additionalHooks) {
+            allHooks.add(hook);
+        }
+    }
+    // Generate stub functions for undefined references in JSX event handlers
+    // Also scan handler bodies for function calls that need stubs (e.g., showToast)
+    const handlerBodies = component.eventHandlers.map(eh => eh.handler).join('\n');
+    const stubs = generateEventHandlerStubs(patternJsx + '\n' + handlerBodies, lines.join('\n'));
+    if (stubs.length > 0) {
+        lines.push('  // Auto-generated stub functions for inline event handlers');
+        for (const stub of stubs) {
+            lines.push(stub);
+        }
+        lines.push('');
+    }
+    // Post-process JSX: add key props to list items
+    let finalJsx = addKeyPropsToLists(patternJsx);
+    // Detect <Link> usage and add react-router-dom import
+    const usesLink = /<Link\b/.test(finalJsx);
+    if (usesLink) {
+        // Insert import after the React import placeholder
+        const placeholderIdx = lines.indexOf(REACT_IMPORT_PLACEHOLDER);
+        if (placeholderIdx >= 0) {
+            lines.splice(placeholderIdx + 1, 0, `import { Link } from 'react-router-dom';`);
+        }
+    }
+    // JSX return
+    lines.push('  return (');
+    lines.push('    <>');
+    for (const line of finalJsx.split('\n')) {
+        lines.push(`      ${line}`);
+    }
+    lines.push('    </>');
+    lines.push('  );');
+    lines.push('}');
+    lines.push('');
+    // Use React.memo for sub-components (not the main page component)
+    const useReactMemo = subComponentImports.length === 0 && component.name !== 'Index';
+    if (useReactMemo) {
+        lines.push(`export default React.memo(${component.name});`);
+    }
+    else {
+        lines.push(`export default ${component.name};`);
+    }
+    // Utility functions — placed outside the component as commented-out reference code
+    // since they typically contain DOM manipulation that needs manual React conversion
+    if (analysis?.utilityCode?.length) {
+        lines.push('');
+        lines.push('/*');
+        lines.push(' * TODO: The following utility functions were extracted from the original JavaScript.');
+        lines.push(' * They contain DOM manipulation and need to be converted to React patterns.');
+        lines.push(' *');
+        for (const fn of analysis.utilityCode) {
+            for (const line of fn.split('\n')) {
+                lines.push(` * ${line}`);
+            }
+            lines.push(' *');
+        }
+        lines.push(' */');
+    }
+    lines.push('');
+    // Resolve the React import placeholder now that all hooks are known
+    const placeholderIdx = lines.indexOf(REACT_IMPORT_PLACEHOLDER);
+    if (placeholderIdx >= 0) {
+        if (allHooks.size > 0 && useReactMemo) {
+            const hookImports = Array.from(allHooks).join(', ');
+            lines[placeholderIdx] = `import React, { ${hookImports} } from 'react';`;
+        }
+        else if (allHooks.size > 0) {
+            const hookImports = Array.from(allHooks).join(', ');
+            lines[placeholderIdx] = `import { ${hookImports} } from 'react';`;
+        }
+        else if (useReactMemo) {
+            lines[placeholderIdx] = `import React from 'react';`;
+        }
+        else {
+            lines[placeholderIdx] = '';
+        }
+    }
+    return lines.join('\n');
+}
+function capitalize(s) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+function toSafeVarName(key) {
+    return key.replace(/[^a-zA-Z0-9]/g, '_').replace(/^_+|_+$/g, '') || 'value';
+}
+/**
+ * Add key props to repeated list items (<li>, <tr>, <option>) inside their parent containers.
+ * This prevents React "key" warnings.
+ */
+function addKeyPropsToLists(jsx) {
+    // Add key to <li> elements inside <ul> or <ol>
+    let keyCounter = 0;
+    return jsx.replace(/<(li|tr|option)(\s[^>]*?)?(\/?)>/g, (match, tag, attrs, selfClose) => {
+        attrs = attrs || '';
+        // Skip if already has a key prop
+        if (/\bkey=/.test(attrs))
+            return match;
+        keyCounter++;
+        return `<${tag}${attrs} key="${tag}-${keyCounter}"${selfClose}>`;
+    });
+}
+/**
+ * Scan JSX for function calls in event handlers and generate stubs
+ * for any that aren't already defined in the component body.
+ */
+function generateEventHandlerStubs(jsx, existingCode) {
+    const stubs = [];
+    const generated = new Set();
+    // Strip content inside <pre>, <code>, <textarea>, and <script> to avoid
+    // generating stubs for function calls in displayed code examples
+    const strippedJsx = jsx
+        .replace(/<pre[^>]*>[\s\S]*?<\/pre>/gi, '<pre></pre>')
+        .replace(/<code[^>]*>[\s\S]*?<\/code>/gi, '<code></code>')
+        .replace(/<textarea[^>]*>[\s\S]*?<\/textarea>/gi, '<textarea></textarea>');
+    // Find all function calls inside event handlers: onClick={() => { funcName(...) }}
+    const handlerPattern = /on[A-Z][a-zA-Z]*=\{[^}]*?(\w+)\s*\(/g;
+    let match;
+    while ((match = handlerPattern.exec(strippedJsx)) !== null) {
+        const funcName = match[1];
+        // Skip common built-in/known names
+        if (['console', 'window', 'document', 'Math', 'JSON', 'Array', 'Object',
+            'parseInt', 'parseFloat', 'setTimeout', 'setInterval', 'clearTimeout',
+            'clearInterval', 'alert', 'confirm', 'prompt', 'fetch', 'event', 'e',
+            'if', 'for', 'while', 'switch', 'return', 'function', 'const', 'let', 'var',
+            'typeof', 'instanceof', 'void', 'delete', 'new', 'this', 'class', 'super',
+            'set', 'get', 'String', 'Number', 'Boolean', 'Date', 'Promise',
+            'preventDefault', 'stopPropagation', 'reset', 'FormData', 'Error',
+            'requestAnimationFrame', 'cancelAnimationFrame', 'require',
+            'resolve', 'reject', 'then', 'catch', 'map', 'filter', 'reduce',
+            'push', 'pop', 'shift', 'unshift', 'splice', 'slice', 'concat',
+            'join', 'split', 'trim', 'replace', 'match', 'test', 'exec',
+            'find', 'findIndex', 'every', 'some', 'includes', 'indexOf',
+            'keys', 'values', 'entries', 'assign', 'freeze', 'create',
+            'from', 'isArray', 'isNaN', 'isFinite', 'encodeURIComponent',
+            'decodeURIComponent', 'encodeURI', 'decodeURI', 'atob', 'btoa',
+            'useScrollReveal', 'useScrollClass', 'useCounterAnimation',
+            'useInterval', 'useTimeout', 'useFetch', 'useLocalStorage',
+            'useRef', 'useState', 'useEffect', 'useCallback', 'useMemo',
+            'useContext', 'useReducer', 'useLayoutEffect',
+            'checkValidity', 'reportValidity', 'setCustomValidity',
+            'closest', 'contains', 'getAttribute', 'setAttribute',
+            'classList', 'getComputedStyle', 'getBoundingClientRect',
+            'scrollTo', 'scrollIntoView', 'focus', 'blur', 'click',
+            'dispatchEvent', 'removeAttribute', 'hasAttribute',
+        ].includes(funcName))
+            continue;
+        // Skip if it starts with 'set' (likely a useState setter)
+        if (/^set[A-Z]/.test(funcName))
+            continue;
+        // Skip if already defined in the component
+        if (existingCode.includes(`const ${funcName}`) ||
+            existingCode.includes(`function ${funcName}`) ||
+            existingCode.includes(`let ${funcName}`))
+            continue;
+        // Skip duplicates
+        if (generated.has(funcName))
+            continue;
+        generated.add(funcName);
+        // Generate a sensible stub based on the function name pattern
+        const stub = generateStubForFunction(funcName);
+        stubs.push(stub);
+    }
+    // Also scan for function calls in handler bodies and JSX expressions
+    // Match standalone function calls (not method calls preceded by '.')
+    const bareCallPattern = /(?<![.\w])([a-zA-Z_]\w*)\s*\(/g;
+    while ((match = bareCallPattern.exec(strippedJsx)) !== null) {
+        const funcName = match[1];
+        if (generated.has(funcName))
+            continue;
+        // Skip built-ins, keywords, common methods
+        if (['console', 'window', 'document', 'Math', 'JSON', 'setTimeout',
+            'clearTimeout', 'setInterval', 'clearInterval', 'alert', 'fetch',
+            'preventDefault', 'stopPropagation', 'reset', 'FormData', 'Error',
+            'requestAnimationFrame', 'cancelAnimationFrame', 'new', 'require',
+            'resolve', 'reject', 'then', 'catch', 'map', 'filter', 'reduce',
+            'push', 'pop', 'shift', 'unshift', 'splice', 'slice', 'concat',
+            'join', 'split', 'trim', 'replace', 'match', 'test', 'exec',
+            'find', 'findIndex', 'every', 'some', 'includes', 'indexOf',
+            'keys', 'values', 'entries', 'assign', 'freeze', 'create',
+            'from', 'isArray', 'isNaN', 'isFinite', 'Promise', 'Date',
+            'if', 'for', 'while', 'switch', 'return', 'function', 'const',
+            'let', 'var', 'typeof', 'instanceof', 'void', 'delete',
+            'addEventListener', 'removeEventListener', 'querySelector',
+            'querySelectorAll', 'getElementById', 'getElementsByClassName',
+            'createElement', 'appendChild', 'removeChild', 'insertBefore',
+            'observe', 'unobserve', 'disconnect', 'IntersectionObserver',
+            'MutationObserver', 'ResizeObserver', 'AbortController',
+            'encodeURIComponent', 'decodeURIComponent', 'atob', 'btoa',
+            'useScrollReveal', 'useScrollClass', 'useCounterAnimation',
+            'useInterval', 'useTimeout', 'useFetch', 'useLocalStorage',
+            'useRef', 'useState', 'useEffect', 'useCallback', 'useMemo',
+            'checkValidity', 'reportValidity', 'setCustomValidity',
+            'closest', 'contains', 'getAttribute', 'setAttribute',
+            'getComputedStyle', 'getBoundingClientRect', 'scrollTo',
+            'scrollIntoView', 'focus', 'blur', 'click', 'dispatchEvent',
+        ].includes(funcName))
+            continue;
+        // Skip React/state setters
+        if (/^set[A-Z]/.test(funcName))
+            continue;
+        // Skip constructor-like calls (start uppercase, not a known pattern)
+        if (/^[A-Z]/.test(funcName) && !funcName.includes('Toast') && !funcName.includes('Modal'))
+            continue;
+        // Skip if already defined in the component
+        if (existingCode.includes(`const ${funcName}`) ||
+            existingCode.includes(`function ${funcName}`) ||
+            existingCode.includes(`let ${funcName}`))
+            continue;
+        generated.add(funcName);
+        stubs.push(generateStubForFunction(funcName));
+    }
+    return stubs;
+}
+/**
+ * Generate a sensible stub implementation based on function name patterns.
+ */
+function generateStubForFunction(name) {
+    const lower = name.toLowerCase();
+    // Navigation
+    if (lower === 'navigate' || lower === 'goto' || lower === 'redirect') {
+        return `  const ${name} = (path: string) => { window.location.hash = path; };`;
+    }
+    // Close/open modal patterns
+    if (lower.startsWith('close') || lower.startsWith('hide')) {
+        const target = name.replace(/^(close|hide)/i, '');
+        const stateVar = target.charAt(0).toLowerCase() + target.slice(1) + 'Open';
+        return `  const [${stateVar}, set${capitalize(stateVar)}] = useState(false);\n  const ${name} = () => { set${capitalize(stateVar)}(false); };`;
+    }
+    // Toast/notification pattern (check before generic show/open)
+    if (lower.includes('toast') || lower.includes('notify') || lower.includes('notification') || lower.includes('snackbar') || lower.includes('alert') || lower.includes('flash')) {
+        return `  const [toastMessage, setToastMessage] = useState('');\n  const ${name} = (message: string) => {\n    setToastMessage(message);\n    setTimeout(() => setToastMessage(''), 3000);\n  };`;
+    }
+    if (lower.startsWith('open') || lower.startsWith('show')) {
+        const target = name.replace(/^(open|show)/i, '');
+        const stateVar = target.charAt(0).toLowerCase() + target.slice(1) + 'Open';
+        return `  const [${stateVar}, set${capitalize(stateVar)}] = useState(false);\n  const ${name} = (..._args: any[]) => { set${capitalize(stateVar)}(true); };`;
+    }
+    // Toggle patterns
+    if (lower.startsWith('toggle')) {
+        const target = name.replace(/^toggle/i, '');
+        const stateVar = target.charAt(0).toLowerCase() + target.slice(1) + 'Open';
+        return `  const [${stateVar}, set${capitalize(stateVar)}] = useState(false);\n  const ${name} = () => { set${capitalize(stateVar)}(prev => !prev); };`;
+    }
+    // Handle/on patterns
+    if (lower.startsWith('handle') || lower.startsWith('on')) {
+        return `  const ${name} = (..._args: any[]) => { /* TODO: implement ${name} */ };`;
+    }
+    // prev/next patterns (e.g., prevLightboxImage, nextLightboxImage)
+    if (lower.startsWith('prev') || lower.startsWith('next') || lower.startsWith('go')) {
+        return `  const ${name} = () => { /* TODO: implement ${name} */ };`;
+    }
+    // Filter/sort patterns
+    if (lower.startsWith('filter') || lower.startsWith('sort') || lower.startsWith('search')) {
+        return `  const ${name} = (..._args: any[]) => { /* TODO: implement ${name} */ };`;
+    }
+    // Submit/send pattern
+    if (lower.startsWith('submit') || lower.startsWith('send')) {
+        return `  const ${name} = (e: React.FormEvent) => {\n    e.preventDefault();\n    /* TODO: implement ${name} */\n  };`;
+    }
+    // Generic fallback
+    return `  const ${name} = (..._args: any[]) => { /* TODO: implement ${name} */ };`;
+}
+//# sourceMappingURL=component-generator.js.map