@africode/core 5.0.0

package/core/cli/commands/add.js

@@ -0,0 +1,23 @@
+/**
+ * AfriCode Add Component Command
+ */
+import { colors } from '../ui.js';
+
+export async function addComponent(name) {
+    if (!name) {
+        console.log(`${colors.red}✗ Please specify a component name${colors.reset}`);
+        return;
+    }
+    const components = {
+        sidebar: 'af-sidebar',
+        tooltip: 'af-tooltip',
+        toast: 'af-toast',
+        skeleton: 'af-skeleton',
+        dropdown: 'af-dropdown'
+    };
+    if (!components[name]) {
+        console.log(`${colors.red}✗ Unknown component: ${name}${colors.reset}`);
+        return;
+    }
+    console.log(`${colors.green}✓ Component ${colors.gold}${components[name]}${colors.green} is available in AfriCode!${colors.reset}`);
+}

package/core/cli/commands/audit.js

@@ -0,0 +1,58 @@
+import { readdirSync, readFileSync, statSync } from 'fs';
+import { join } from 'path';
+
+function scanDirectory(dir, issues = []) {
+    try {
+        const files = readdirSync(dir);
+        for (const file of files) {
+            const filePath = join(dir, file);
+            if (statSync(filePath).isDirectory()) {
+                scanDirectory(filePath, issues);
+            } else if (file.endsWith('.js') || file.endsWith('.ts') || file.endsWith('.html')) {
+                const content = readFileSync(filePath, 'utf-8');
+                
+                // Static heuristic checks
+                if (content.includes('<img ') && !content.includes('alt=')) {
+                    issues.push(`[WARN] ${file}: <img> tag missing 'alt' attribute`);
+                }
+                if (content.includes('<af-button') && !content.includes('aria-label=') && content.includes('icon=')) {
+                    issues.push(`[HINT] ${file}: Icon-only button might need 'aria-label'`);
+                }
+                if (content.includes('<input ') && !content.includes('id=')) {
+                    issues.push(`[HINT] ${file}: Input missing 'id', cannot link to a <label>`);
+                }
+            }
+        }
+    } catch(e) {
+        // Ignore if dir doesn't exist
+    }
+    return issues;
+}
+
+export async function audit() {
+    console.log('\n🔍 AfriCode Static Accessibility Hints');
+    console.log('Note: This is a static analysis heuristic, NOT a full WCAG certification tool.\n');
+    
+    const targets = [join(process.cwd(), 'components'), join(process.cwd(), 'pages')];
+    const allIssues = [];
+    
+    for (const target of targets) {
+        scanDirectory(target, allIssues);
+    }
+    
+    if (allIssues.length > 0) {
+        console.log('⚠️  Potential Concerns:\n');
+        allIssues.forEach(issue => console.log('  ' + issue));
+    } else {
+        console.log('✨ No obvious static A11y issues detected in UI files.');
+    }
+    
+    console.log('\n💡 Best Practices Check:');
+    console.log(' - Are all interactive elements reachable by the <Tab> key?');
+    console.log(' - Do visual icons have an invisible aria-label text?');
+    console.log(' - Are you using role="dialog" and aria-modal="true" for popups?\n');
+    
+    console.log('For comprehensive testing, we recommend:');
+    console.log(' 1. Axe DevTools browser extension');
+    console.log(' 2. Screen reader manual testing (VoiceOver/TalkBack)');
+}

package/core/cli/commands/build.js

@@ -0,0 +1,137 @@
+/**
+ * AfriCode Build Command
+ */
+import { logo, colors } from '../ui.js';
+import { rm, cp, mkdir, readdir, writeFile } from 'fs/promises';
+import { existsSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+export async function build() {
+    logo();
+    console.log(`${colors.green}▶ Building for production (SSG + Islands)...${colors.reset}\n`);
+
+    const distDir = './dist';
+    const cwd = process.cwd();
+    const hasSrc = existsSync(path.join(cwd, 'src'));
+    const pagesDir = hasSrc ? './src/pages' : './pages';
+    const componentsDir = hasSrc ? './src/components' : './components';
+    const stylesDir = hasSrc ? './src/styles' : './styles';
+
+    try {
+        const buildStart = performance.now();
+        await rm(distDir, { recursive: true, force: true });
+        await mkdir(distDir);
+
+        console.log('  Bundling JavaScript Islands...');
+        const bundleStart = performance.now();
+
+        // Resolve core paths relative to the framework - Robust for Windows
+        const __filename = fileURLToPath(import.meta.url);
+        const __dirname = path.dirname(__filename);
+        const frameworkCoreDir = path.resolve(__dirname, '../../');
+        const sdkPath = path.join(frameworkCoreDir, 'sdk.js');
+        const projectComponentsPath = path.resolve(cwd, `${componentsDir}/index.js`);
+
+        // Check if paths exist before building
+        if (!await Bun.file(sdkPath).exists()) {throw new Error(`SDK not found at ${sdkPath}`);}
+        if (!await Bun.file(projectComponentsPath).exists()) {throw new Error(`Project components not found at ${projectComponentsPath}`);}
+
+        console.log(`    SDK Entry: ${sdkPath}`);
+        console.log(`    Components Entry: ${projectComponentsPath}`);
+
+        let buildResult;
+        try {
+            buildResult = await Bun.build({
+                entrypoints: [sdkPath, projectComponentsPath],
+                outdir: './dist/assets',
+                minify: true,
+                splitting: true,
+                target: 'browser',
+                naming: '[name]-[hash].[ext]'
+            });
+        } catch (bundleErr) {
+            console.error(`${colors.red}    ! Bun.build threw an exception:${colors.reset}`, bundleErr);
+            throw bundleErr;
+        }
+
+        // Log all build output for debugging
+        for (const log of buildResult.logs) {
+            console.log(`  ${log.level === 'error' ? colors.red : colors.blue} ${log.message}${colors.reset}`);
+        }
+
+        const bundleEnd = performance.now();
+        console.log(`  ${colors.blue}⚡ Bundled in ${(bundleEnd - bundleStart).toFixed(2)}ms${colors.reset}`);
+
+        if (!buildResult.success) {
+            throw new Error('Bundle failed');
+        }
+
+        console.log('  Pre-rendering Pages (SSG)...');
+        const pageFiles = await readdir(pagesDir);
+        const routes = [];
+
+        for (const file of pageFiles) {
+            if (!file.endsWith('.js')) {continue;}
+
+            const name = file.replace('.js', '');
+            const route = name === 'index' ? '/' : `/${name}`;
+            routes.push(route);
+
+            const renderStart = performance.now();
+            console.log(`    • Rendering ${route}...`);
+            const pagePath = path.resolve(process.cwd(), pagesDir, file);
+            const pageModule = await import(pagePath);
+
+            let loaderData = {};
+            if (typeof pageModule.loader === 'function') {
+                loaderData = await pageModule.loader({ request: new Request(`http://localhost${route}`), params: {} });
+            }
+
+            if (typeof pageModule.default === 'function') {
+                const htmlContent = pageModule.default({ data: loaderData });
+                const outputPath = path.join(distDir, `${name}.html`);
+                await writeFile(outputPath, htmlContent);
+                const renderEnd = performance.now();
+                console.log(`      ${colors.blue}⚡ ${name} pre-rendered in ${(renderEnd - renderStart).toFixed(2)}ms${colors.reset}`);
+            }
+        }
+
+        console.log('  Generating Sitemap...');
+        const seoPath = path.join(frameworkCoreDir, 'seo.js');
+        const { generateSitemap } = await import(seoPath);
+        const sitemapXml = generateSitemap('https://your-domain.com', routes);
+        await writeFile(path.join(distDir, 'sitemap.xml'), sitemapXml);
+
+        console.log('  Copying Assets...');
+        if (await Bun.file(stylesDir).exists()) {await cp(stylesDir, `${distDir}/styles`, { recursive: true });}
+
+        if (await Bun.file('./server.js').exists()) {
+            console.log('  Bundling Production Server...');
+            await Bun.build({
+                entrypoints: ['./server.js'],
+                outdir: './dist',
+                target: 'bun'
+            });
+        }
+
+        const buildEnd = performance.now();
+        const totalTime = ((buildEnd - buildStart) / 1000).toFixed(2);
+
+        // Write performance metrics
+        await writeFile(path.join(distDir, 'performance.json'), JSON.stringify({
+            totalBuildTime: totalTime,
+            bundleTime: (bundleEnd - bundleStart).toFixed(2),
+            pageCount: routes.length,
+            timestamp: new Date().toISOString()
+        }, null, 2));
+
+        console.log(`\n${colors.green}✓ Build complete in ${totalTime}s!${colors.reset}`);
+        console.log(`  Output: ${colors.blue}./dist${colors.reset} (Ready to deploy)`);
+        console.log(`  Pages: ${colors.bold}${routes.length}${colors.reset} pre-rendered`);
+        console.log(`  Sitemap: ${colors.blue}./dist/sitemap.xml${colors.reset}\n`);
+
+    } catch (err) {
+        console.error(`${colors.red}✗ Build failed:${colors.reset}`, err.message || err);
+    }
+}

package/core/cli/commands/create-plugin.js

@@ -0,0 +1,241 @@
+/**
+ * AfriCode Plugin Scaffolder
+ *
+ * Generates a complete, testable, safe plugin project.
+ * Usage: africode create plugin my-plugin [--minimal] [--with-tests] [--hook onRequest,onResponse]
+ */
+import { mkdir, writeFile } from 'fs/promises';
+import { existsSync } from 'fs';
+import path from 'path';
+
+const ALLOWED_HOOKS = [
+    'onConfigLoad', 'onComponentRegister', 'onRouteRegister',
+    'onStateInit', 'onServerStart', 'onRequest', 'onResponse',
+    'onError', 'onCliCommandRegister',
+];
+
+export async function createPlugin(pluginName, args = []) {
+    if (!pluginName) {
+        console.error('✗ Please provide a plugin name: africode create plugin my-plugin');
+        process.exit(1);
+    }
+
+    const isMinimal = args.includes('--minimal');
+    const withTests = args.includes('--with-tests') || !isMinimal;
+    const hookFlagIdx = args.indexOf('--hook');
+    const selectedHooks = hookFlagIdx > -1
+        ? args[hookFlagIdx + 1]?.split(',').filter(h => ALLOWED_HOOKS.includes(h)) || ['onRequest', 'onResponse']
+        : ['onConfigLoad', 'onRequest', 'onResponse'];
+
+    const pluginDir = path.join(process.cwd(), pluginName);
+
+    if (existsSync(pluginDir)) {
+        console.error(`✗ Directory "${pluginName}" already exists`);
+        process.exit(1);
+    }
+
+    console.log(`\n🔌 Scaffolding AfriCode Plugin: ${pluginName}\n`);
+
+    // Create directory tree
+    await mkdir(path.join(pluginDir, 'src', 'hooks'), { recursive: true });
+    await mkdir(path.join(pluginDir, 'src', 'utils'), { recursive: true });
+    if (withTests) await mkdir(path.join(pluginDir, 'tests'), { recursive: true });
+    if (!isMinimal) await mkdir(path.join(pluginDir, 'examples'), { recursive: true });
+
+    // --- package.json ---
+    await writeFile(path.join(pluginDir, 'package.json'), JSON.stringify({
+        name: pluginName,
+        version: '1.0.0',
+        description: `AfriCode plugin: ${pluginName}`,
+        type: 'module',
+        main: 'index.js',
+        scripts: {
+            test: 'bun test',
+        },
+        keywords: ['africode', 'plugin', pluginName],
+        license: 'MIT',
+        peerDependencies: {
+            africode: '^3.0.0',
+        },
+    }, null, 2));
+
+    // --- manifest.js ---
+    await writeFile(path.join(pluginDir, 'src', 'manifest.js'),
+`export default {
+  name: '${pluginName}',
+  version: '1.0.0',
+  compatibleWith: '^3.0.0',
+  hooks: ${JSON.stringify(selectedHooks)},
+  critical: false,
+};
+`);
+
+    // --- Hook files ---
+    for (const hook of selectedHooks) {
+        await writeFile(path.join(pluginDir, 'src', 'hooks', `${hook}.js`),
+`/**
+ * ${hook} handler for ${pluginName}
+ */
+export default async function ${hook}(ctx) {
+  // Your plugin logic here
+  ctx.logger?.info?.(\`[${pluginName}] ${hook} executed\`);
+}
+`);
+    }
+
+    // --- Logger util ---
+    await writeFile(path.join(pluginDir, 'src', 'utils', 'logger.js'),
+`/**
+ * Simple structured logger for ${pluginName}
+ */
+export const logger = {
+  info: (msg) => console.log(\`[INFO] \${msg}\`),
+  warn: (msg) => console.warn(\`[WARN] \${msg}\`),
+  error: (msg) => console.error(\`[ERROR] \${msg}\`),
+};
+`);
+
+    // --- index.js ---
+    const hookImports = selectedHooks.map(h => `import ${h} from './src/hooks/${h}.js';`).join('\n');
+    const hookEntries = selectedHooks.map(h => `  ${h},`).join('\n');
+    await writeFile(path.join(pluginDir, 'index.js'),
+`import manifest from './src/manifest.js';
+${hookImports}
+
+export default {
+  manifest,
+${hookEntries}
+};
+`);
+
+    // --- plugin.config.js ---
+    await writeFile(path.join(pluginDir, 'plugin.config.js'),
+`/**
+ * Plugin configuration defaults.
+ * These can be overridden by the host application's config.
+ */
+export default {
+  enabled: true,
+  logLevel: 'info',
+};
+`);
+
+    // --- Tests ---
+    if (withTests) {
+        await writeFile(path.join(pluginDir, 'tests', 'plugin.test.js'),
+`import { describe, it, expect } from 'bun:test';
+import plugin from '../index.js';
+
+describe('${pluginName}', () => {
+  it('should have a valid manifest', () => {
+    expect(plugin.manifest).toBeDefined();
+    expect(plugin.manifest.name).toBe('${pluginName}');
+    expect(plugin.manifest.version).toBeDefined();
+    expect(plugin.manifest.compatibleWith).toBeDefined();
+  });
+
+  it('should only declare allowed hooks', () => {
+    const allowed = new Set([
+      'onConfigLoad', 'onComponentRegister', 'onRouteRegister',
+      'onStateInit', 'onServerStart', 'onRequest', 'onResponse',
+      'onError', 'onCliCommandRegister',
+    ]);
+    for (const hook of plugin.manifest.hooks) {
+      expect(allowed.has(hook)).toBe(true);
+    }
+  });
+
+  it('should expose all declared hooks as functions', () => {
+    for (const hook of plugin.manifest.hooks) {
+      expect(typeof plugin[hook]).toBe('function');
+    }
+  });
+
+  it('hooks should execute without throwing', async () => {
+    const mockCtx = { logger: { info: () => {}, warn: () => {}, error: () => {} } };
+    for (const hook of plugin.manifest.hooks) {
+      await expect(plugin[hook](mockCtx)).resolves.toBeUndefined();
+    }
+  });
+});
+`);
+    }
+
+    // --- README.md ---
+    await writeFile(path.join(pluginDir, 'README.md'),
+`# ${pluginName}
+
+An AfriCode Framework plugin.
+
+## What this plugin does
+
+Describe your plugin's purpose here.
+
+## Supported Hooks
+
+${selectedHooks.map(h => `- \`${h}\``).join('\n')}
+
+## Install
+
+\`\`\`bash
+bun add ${pluginName}
+\`\`\`
+
+## Register
+
+\`\`\`javascript
+import plugin from '${pluginName}';
+
+africode.plugins.register(plugin.manifest, plugin);
+\`\`\`
+
+## Configuration
+
+Edit \`plugin.config.js\` to adjust defaults.
+
+## Troubleshooting
+
+- Ensure your AfriCode version satisfies \`${'^3.0.0'}\`
+- Check that only valid hooks are declared in the manifest
+
+## Compatibility
+
+| AfriCode Version | Plugin Version |
+|:---:|:---:|
+| ^3.0.0 | 1.0.0 |
+`);
+
+    // --- Example usage ---
+    if (!isMinimal) {
+        await writeFile(path.join(pluginDir, 'examples', 'usage.js'),
+`/**
+ * Example: registering ${pluginName} in an AfriCode app
+ */
+import { AfriPluginRegistry } from 'africode/core/plugins/index.js';
+import plugin from '../index.js';
+
+const registry = new AfriPluginRegistry();
+registry.register(plugin.manifest, plugin);
+
+// Simulate a hook emission
+await registry.emit('onRequest', { req: {}, meta: {} });
+console.log('Plugin executed successfully!');
+`);
+    }
+
+    console.log(`✓ Created ${pluginName}/`);
+    console.log(`  ├── package.json`);
+    console.log(`  ├── index.js`);
+    console.log(`  ├── plugin.config.js`);
+    console.log(`  ├── README.md`);
+    console.log(`  ├── src/`);
+    console.log(`  │   ├── manifest.js`);
+    console.log(`  │   ├── hooks/`);
+    selectedHooks.forEach(h => console.log(`  │   │   └── ${h}.js`));
+    console.log(`  │   └── utils/logger.js`);
+    if (withTests) console.log(`  ├── tests/plugin.test.js`);
+    if (!isMinimal) console.log(`  └── examples/usage.js`);
+    console.log(`\n🚀 Next steps:`);
+    console.log(`  cd ${pluginName}`);
+    console.log(`  bun test\n`);
+}

package/core/cli/commands/dev.js

@@ -0,0 +1,228 @@
+import { logo, colors } from '../ui.js';
+import * as nodePath from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { createHMRServer } from '../../hmr.js';
+
+export async function dev() {
+    logo();
+    console.log(`${colors.green}▶ Starting development server...${colors.reset}\n`);
+
+    const PORT = process.env.PORT || 3000;
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = nodePath.dirname(__filename);
+    const frameworkRoot = nodePath.resolve(__dirname, '../../../');
+
+    // Initialize HMR server
+    const hmr = createHMRServer(PORT);
+    const clients = new Set();
+
+    const server = Bun.serve({
+        port: PORT,
+        idleTimeout: 30,
+        async fetch(req) {
+            const url = new URL(req.url);
+            let pathname = url.pathname;
+
+            // 1. API Route Delegation
+            if (pathname.startsWith('/api/')) {
+                const { handleApiRequest } = await import('../../server/router.js');
+                const apiRes = await handleApiRequest(req);
+                if (apiRes) {return apiRes;}
+            }
+
+            // 2. Root Redirect
+            if (pathname === '/') {pathname = '/index';}
+
+            // 3. JS-First Page Rendering
+            const pageName = pathname.replace(/^\//, '').replace(/\.html$/, '');
+            const cwd = process.cwd();
+            const hasSrc = await Bun.file(nodePath.join(cwd, 'src/pages')).exists() || await Bun.file(nodePath.join(cwd, 'src')).exists();
+            const pagesDir = hasSrc ? 'src/pages' : 'pages';
+            const jsPagePath = `./${pagesDir}/${pageName}.js`;
+
+            if (await Bun.file(jsPagePath).exists()) {
+                const start = performance.now();
+                try {
+                    const absPath = nodePath.resolve(cwd, pagesDir, `${pageName}.js`);
+                    const moduleUrl = pathToFileURL(absPath).href + `?t=${Date.now()}`;
+                    const pageModule = await import(moduleUrl);
+                    let loaderData = {};
+                    if (typeof pageModule.loader === 'function') {
+                        loaderData = await pageModule.loader({ request: req, params: {} });
+                    }
+                    if (typeof pageModule.default === 'function') {
+                        let htmlContent = pageModule.default({ data: loaderData });
+                        // Inject HMR client
+                        htmlContent = injectHMRClient(htmlContent);
+                        const end = performance.now();
+                        console.log(`${colors.blue}  ⚡ Rendered ${pageName} in ${(end - start).toFixed(2)}ms${colors.reset}`);
+                        return new Response(htmlContent, { headers: { 'Content-Type': 'text/html' } });
+                    }
+                } catch (err) {
+                    console.error(`Error rendering page ${pageName}:`, err);
+                    return new Response(`Error rendering page: ${err.message}`, { status: 500 });
+                }
+            }
+
+            // 4. Fallback to Static HTML
+            if (await Bun.file(`./${pagesDir}${pathname}.html`).exists()) {
+                const { renderPage } = await import('../../server/render.js');
+                let response = await renderPage(`./${pagesDir}${pathname}.html`);
+                let htmlContent = await response.text();
+                // Inject HMR client
+                htmlContent = injectHMRClient(htmlContent);
+                return new Response(htmlContent, { headers: { 'Content-Type': 'text/html' } });
+            }
+
+            // 5. Static Assets
+            const file = Bun.file('.' + url.pathname);
+            if (await file.exists()) {
+                if (pathname.endsWith('.html')) {
+                    const { renderPage } = await import('../../server/render.js');
+                    let response = await renderPage('.' + pathname);
+                    let htmlContent = await response.text();
+                    // Inject HMR client
+                    htmlContent = injectHMRClient(htmlContent);
+                    return new Response(htmlContent, { headers: { 'Content-Type': 'text/html' } });
+                }
+                const ext = pathname.split('.').pop();
+                const types = {
+                    html: 'text/html', css: 'text/css', js: 'application/javascript',
+                    json: 'application/json', svg: 'image/svg+xml', png: 'image/png', jpg: 'image/jpeg'
+                };
+                return new Response(file, { headers: { 'Content-Type': types[ext] || 'application/octet-stream' } });
+            }
+
+            // 6. Framework Fallback (for linked projects)
+            const frameworkFile = Bun.file(nodePath.join(frameworkRoot, url.pathname));
+            if (await frameworkFile.exists()) {
+                const ext = pathname.split('.').pop();
+                const types = {
+                    css: 'text/css', js: 'application/javascript',
+                    svg: 'image/svg+xml', png: 'image/png', jpg: 'image/jpeg'
+                };
+                return new Response(frameworkFile, { headers: { 'Content-Type': types[ext] || 'application/octet-stream' } });
+            }
+
+            return new Response('404 Not Found', { status: 404 });
+        },
+        websocket: {
+            open(ws) {
+                console.log(`${colors.green}[HMR] Client connected${colors.reset}`);
+                clients.add(ws);
+            },
+            message(ws, message) {
+                try {
+                    const data = JSON.parse(message);
+                    if (data.type === 'ping') {
+                        ws.send(JSON.stringify({ type: 'pong' }));
+                    }
+                } catch (e) {
+                    // Invalid message, ignore
+                }
+            },
+            close(ws) {
+                clients.delete(ws);
+                console.log(`${colors.gold}[HMR] Client disconnected${colors.reset}`);
+            }
+        }
+    });
+
+    // Helper function to inject HMR client into HTML
+    function injectHMRClient(htmlContent) {
+        if (typeof htmlContent !== 'string') {
+            return htmlContent;
+        }
+
+        const hmrScript = `<script>
+    (async function() {
+        let ws = null;
+        let reconnecting = false;
+        
+        function connect() {
+            if (reconnecting) return;
+            if (ws && ws.readyState === WebSocket.OPEN) return;
+            
+            ws = new WebSocket('ws://' + location.hostname + ':' + location.port);
+            ws.onopen = () => {
+                console.log('%c[HMR] Connected', 'color: green; font-weight: bold;');
+                reconnecting = false;
+            };
+            ws.onmessage = (e) => {
+                try {
+                    const msg = JSON.parse(e.data);
+                    if (msg.type === 'update') {
+                        console.log('%c[HMR] Reloading...', 'color: #4CAF50; font-weight: bold;');
+                        setTimeout(() => location.reload(), 100);
+                    }
+                } catch (err) {}
+            };
+            ws.onclose = () => {
+                console.log('%c[HMR] Disconnected', 'color: orange;');
+                if (!reconnecting) {
+                    reconnecting = true;
+                    setTimeout(connect, 1000);
+                }
+            };
+        }
+        
+        connect();
+    })();
+</script>`;
+
+        // Inject before closing </body> tag if it exists, otherwise at the end
+        if (htmlContent.includes('</body>')) {
+            return htmlContent.replace('</body>', hmrScript + '</body>');
+        } else if (htmlContent.includes('</html>')) {
+            return htmlContent.replace('</html>', hmrScript + '</html>');
+        } else {
+            return htmlContent + hmrScript;
+        }
+    }
+
+    // File watching for HMR
+    async function watchFiles() {
+        const { watch } = await import('node:fs');
+        const ignoreDirs = new Set(['node_modules', '.git', 'dist', '.bun', 'build']);
+
+        function watchDir(dir) {
+            try {
+                const watcher = watch(dir, { recursive: true }, (eventType, filename) => {
+                    if (!filename) return;
+                    
+                    const dirName = filename.split(nodePath.sep)[0];
+                    if (ignoreDirs.has(dirName) || filename.includes('node_modules')) return;
+                    
+                    const validExts = ['.js', '.jsx', '.ts', '.tsx', '.css', '.html'];
+                    if (!validExts.some(ext => filename.endsWith(ext))) return;
+
+                    console.log(`${colors.blue}[HMR] File changed: ${filename}${colors.reset}`);
+                    
+                    // Broadcast to all clients
+                    const message = JSON.stringify({
+                        type: 'update',
+                        file: filename,
+                        timestamp: Date.now()
+                    });
+                    
+                    for (const client of clients) {
+                        try {
+                            client.send(message);
+                        } catch (err) {}
+                    }
+                });
+            } catch (err) {
+                console.error('[HMR] Watch error:', err);
+            }
+        }
+
+        watchDir(process.cwd());
+    }
+
+    // Start file watching
+    watchFiles();
+
+    console.log(`${colors.green}✓ Server running at ${colors.blue}http://localhost:${server.port}${colors.reset}`);
+    console.log(`${colors.green}✓ HMR enabled - Changes will reload automatically${colors.reset}`);
+    console.log(`${colors.gold}  Press Ctrl+C to stop${colors.reset}\n`);
+}