juxscript 1.1.140 → 1.1.141

package/machinery/compiler4.js

@@ -0,0 +1,834 @@
+import * as esbuild from 'esbuild';
+import * as acorn from 'acorn';
+import { walk } from 'astray';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export class JuxCompiler {
+    constructor(config = {}) {
+        this.config = config;
+        this.srcDir = config.srcDir || './jux';
+        this.distDir = config.distDir || './.jux-dist';
+        this.publicDir = config.publicDir || './public'; // ✅ Configurable public path
+        this.defaults = config.defaults || {};
+        this.paths = config.paths || {};
+        this._juxscriptExports = null;
+        this._juxscriptPath = null;
+        this._renderFunctionCounter = 0; // ✅ Add counter for unique IDs
+    }
+
+    /**
+     * Locate juxscript package - simplified resolution
+     */
+    findJuxscriptPath() {
+        if (this._juxscriptPath) return this._juxscriptPath;
+
+        const projectRoot = process.cwd();
+
+        // Priority 1: User's node_modules (when used as dependency)
+        const userPath = path.resolve(projectRoot, 'node_modules/juxscript/index.js');
+        if (fs.existsSync(userPath)) {
+            this._juxscriptPath = userPath;
+            return userPath;
+        }
+
+        // Priority 2: Package root (when developing juxscript itself)
+        const packageRoot = path.resolve(__dirname, '..');
+        const devPath = path.resolve(packageRoot, 'index.js');
+        if (fs.existsSync(devPath)) {
+            this._juxscriptPath = devPath;
+            return devPath;
+        }
+
+        // Priority 3: Sibling in monorepo
+        const monoPath = path.resolve(projectRoot, '../jux/index.js');
+        if (fs.existsSync(monoPath)) {
+            this._juxscriptPath = monoPath;
+            return monoPath;
+        }
+
+        return null;
+    }
+
+    /**
+     * ✅ Recursively scan for .jux and .js files in srcDir and subdirectories
+     */
+    scanFiles() {
+        const views = [], dataModules = [], sharedModules = [];
+
+        const scanDirectory = (currentDir) => {
+            const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+
+            for (const entry of entries) {
+                const fullPath = path.join(currentDir, entry.name);
+
+                if (entry.isDirectory()) {
+                    scanDirectory(fullPath);
+                } else if (entry.isFile()) {
+                    const file = entry.name;
+
+                    if ((file.endsWith('.jux') || file.endsWith('.js')) && !this.isAssetFile(file)) {
+                        const content = fs.readFileSync(fullPath, 'utf8');
+                        const relativePath = path.relative(this.srcDir, fullPath);
+                        const name = relativePath.replace(/\.[^/.]+$/, '');
+
+                        // Check if it has exports (module) or is executable code (view)
+                        const hasExports = /export\s+(default|const|function|class|{)/.test(content);
+
+                        if (file.includes('data')) {
+                            dataModules.push({
+                                name,
+                                file: relativePath,
+                                content,
+                                originalContent: content
+                            });
+                        } else if (hasExports) {
+                            // ✅ Any file with exports is a module (not just .js files)
+                            sharedModules.push({
+                                name,
+                                file: relativePath,
+                                content,
+                                originalContent: content
+                            });
+                        } else {
+                            // .jux files without exports are views - use AST to extract imports
+                            let wrappedContent;
+                            try {
+                                const ast = acorn.parse(content, {
+                                    ecmaVersion: 'latest',
+                                    sourceType: 'module',
+                                    locations: true
+                                });
+
+                                const imports = [];
+                                let lastImportEnd = 0;
+
+                                // Collect imports and track where they end
+                                for (const node of ast.body) {
+                                    if (node.type === 'ImportDeclaration') {
+                                        imports.push(content.substring(node.start, node.end));
+                                        lastImportEnd = node.end;
+                                    }
+                                }
+
+                                // Get the rest of the code (everything after imports)
+                                const restOfCode = content.substring(lastImportEnd).trim();
+
+                                // Build wrapped content
+                                wrappedContent = [
+                                    ...imports,
+                                    '',
+                                    'export default async function() {',
+                                    restOfCode,
+                                    '}'
+                                ].join('\n');
+
+                            } catch (parseError) {
+                                // Fallback: if parsing fails, just wrap the whole thing
+                                console.warn(`⚠️  Could not parse ${relativePath}, using basic wrapping`);
+                                wrappedContent = `export default async function() {\n${content}\n}`;
+                            }
+
+                            views.push({
+                                name,
+                                file: relativePath,
+                                content: wrappedContent,
+                                originalContent: content
+                            });
+                        }
+                    }
+                }
+            }
+        };
+
+        scanDirectory(this.srcDir);
+        return { views, dataModules, sharedModules };
+    }
+
+    isAssetFile(filename) {
+        const assetExtensions = ['.css', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.woff', '.woff2', '.ttf', '.eot'];
+        return assetExtensions.some(ext => filename.endsWith(ext));
+    }
+
+    removeImports(code) {
+        return code
+            .replace(/^\s*import\s+.*?from\s+['"][^'"]+['"][\s;]*$/gm, '')
+            .replace(/^\s*import\s*\{[\s\S]*?\}\s*from\s*['"][^'"]+['"][\s;]*/gm, '')
+            .replace(/^\s*import\s+\w+\s+from\s+['"][^'"]+['"][\s;]*$/gm, '')
+            .replace(/^\s*import\s*;?\s*$/gm, '');
+    }
+
+    sanitizeName(name) {
+        return name.replace(/[^a-zA-Z0-9]/g, '_');
+    }
+
+    async loadJuxscriptExports() {
+        if (this._juxscriptExports) return this._juxscriptExports;
+
+        try {
+            const juxscriptPath = this.findJuxscriptPath();
+            if (juxscriptPath) {
+                const indexContent = fs.readFileSync(juxscriptPath, 'utf8');
+                const exports = new Set();
+
+                for (const match of indexContent.matchAll(/export\s*\{\s*([^}]+)\s*\}/g)) {
+                    match[1].split(',').forEach(exp => {
+                        const name = exp.trim().split(/\s+as\s+/)[0].trim();
+                        if (name) exports.add(name);
+                    });
+                }
+
+                this._juxscriptExports = [...exports];
+                if (this._juxscriptExports.length > 0) {
+                    console.log(`📦 juxscript exports: ${this._juxscriptExports.join(', ')}`);
+                }
+            }
+        } catch (err) {
+            this._juxscriptExports = [];
+        }
+
+        return this._juxscriptExports;
+    }
+
+    validateViewCode(viewName, code) {
+        const issues = [];
+
+        let ast;
+        try {
+            ast = acorn.parse(code, { ecmaVersion: 'latest', sourceType: 'module', locations: true });
+        } catch (parseError) {
+            issues.push({
+                type: 'error',
+                view: viewName,
+                line: parseError.loc?.line || 0,
+                message: `Syntax error: ${parseError.message}`,
+                code: ''
+            });
+            return issues;
+        }
+
+        const allImports = new Set();
+
+        walk(ast, {
+            ImportDeclaration(node) {
+                node.specifiers.forEach(spec => {
+                    allImports.add(spec.local.name);
+                });
+            }
+        });
+
+        // Default known facades/components if load fails
+        const knownComponents = this._juxscriptExports || ['element', 'input', 'buttonGroup'];
+
+        walk(ast, {
+            Identifier(node, parent) {
+                if (parent?.type === 'CallExpression' && parent.callee === node) {
+                    const name = node.name;
+                    if (!allImports.has(name) && knownComponents.includes(name)) {
+                        issues.push({
+                            type: 'warning',
+                            view: viewName,
+                            line: node.loc?.start?.line || 0,
+                            message: `"${name}" is used but not imported from juxscript`,
+                            code: ''
+                        });
+                    }
+                }
+            }
+        });
+
+        return issues;
+    }
+
+    /**
+     * Generate entry point - inline EVERYTHING
+     */
+    generateEntryPoint(views, dataModules, sharedModules) {
+        let entry = `// Auto-generated JUX entry point\n\n`;
+        const sourceSnapshot = {};
+
+        // ✅ Collect ALL unique imports from ALL files (views + shared + data)
+        const allImports = new Map(); // Map<resolvedPath, Set<importedNames>>
+        const allFiles = [...views, ...sharedModules, ...dataModules];
+
+        allFiles.forEach(file => {
+            const codeBody = file.originalContent || file.content;
+            const filePath = path.join(this.srcDir, file.file);
+
+            try {
+                const ast = acorn.parse(codeBody, {
+                    ecmaVersion: 'latest',
+                    sourceType: 'module',
+                    locations: true
+                });
+
+                // Extract import statements
+                ast.body.filter(node => node.type === 'ImportDeclaration').forEach(node => {
+                    const importPath = node.source.value;
+
+                    // ✅ Resolve the import path
+                    let resolvedImportPath;
+                    if (importPath.startsWith('.')) {
+                        // Relative import
+                        const absolutePath = path.resolve(path.dirname(filePath), importPath);
+                        resolvedImportPath = path.relative(this.srcDir, absolutePath);
+                        resolvedImportPath = resolvedImportPath.replace(/\\/g, '/');
+                    } else {
+                        // Module import like 'juxscript', 'axios'
+                        resolvedImportPath = importPath;
+                    }
+
+                    // Initialize Set for this path
+                    if (!allImports.has(resolvedImportPath)) {
+                        allImports.set(resolvedImportPath, new Set());
+                    }
+
+                    // Add imported names
+                    node.specifiers.forEach(spec => {
+                        if (spec.type === 'ImportSpecifier') {
+                            allImports.get(resolvedImportPath).add(spec.imported.name);
+                        } else if (spec.type === 'ImportDefaultSpecifier') {
+                            allImports.get(resolvedImportPath).add('default:' + spec.local.name);
+                        }
+                    });
+                });
+            } catch (parseError) {
+                console.warn(`⚠️  Could not parse ${file.file} for imports`);
+            }
+        });
+
+        // ✅ Filter out imports that point to our own files (these will be inlined)
+        const externalImports = new Map();
+        allImports.forEach((names, resolvedPath) => {
+            // Only include if it's NOT a file in our src directory
+            if (!resolvedPath.endsWith('.js') && !resolvedPath.endsWith('.jux')) {
+                externalImports.set(resolvedPath, names);
+            }
+        });
+
+        // ✅ Write external imports only (juxscript, axios, etc.)
+        externalImports.forEach((names, importPath) => {
+            const namedImports = Array.from(names).filter(n => !n.startsWith('default:'));
+            const defaultImports = Array.from(names).filter(n => n.startsWith('default:')).map(n => n.split(':')[1]);
+
+            if (defaultImports.length > 0) {
+                defaultImports.forEach(name => {
+                    entry += `import ${name} from '${importPath}';\n`;
+                });
+            }
+
+            if (namedImports.length > 0) {
+                entry += `import { ${namedImports.join(', ')} } from '${importPath}';\n`;
+            }
+        });
+
+        entry += '\n';
+
+        // ✅ Inline shared modules as constants/functions
+        entry += `// --- SHARED MODULES (INLINED) ---\n`;
+        sharedModules.forEach(m => {
+            sourceSnapshot[m.file] = {
+                name: m.name,
+                file: m.file,
+                content: m.content,
+                lines: m.content.split('\n')
+            };
+
+            // Remove imports and exports, just keep the code
+            let code = m.originalContent || m.content;
+            code = this._stripImportsAndExports(code);
+
+            entry += `\n// From: ${m.file}\n${code}\n`;
+        });
+
+        // ✅ Inline data modules
+        entry += `\n// --- DATA MODULES (INLINED) ---\n`;
+        dataModules.forEach(m => {
+            sourceSnapshot[m.file] = {
+                name: m.name,
+                file: m.file,
+                content: m.content,
+                lines: m.content.split('\n')
+            };
+
+            let code = m.originalContent || m.content;
+            code = this._stripImportsAndExports(code);
+
+            entry += `\n// From: ${m.file}\n${code}\n`;
+        });
+
+        // ✅ Expose everything to window (since we removed exports)
+        //entry += `\n// Expose to window\n`;
+        //entry += `Object.assign(window, { jux, state, registry, stateHistory, Link, link, navLink, externalLink, layer, overlay, VStack, HStack, ZStack, vstack, hstack, zstack });\n`;
+
+        entry += `\n// --- VIEW FUNCTIONS ---\n`;
+
+        const routeToFunctionMap = new Map();
+
+        // ✅ Process views: strip imports, inline as functions
+        views.forEach((v, index) => {
+            const functionName = `renderJux${index}`;
+
+            sourceSnapshot[v.file] = {
+                name: v.name,
+                file: v.file,
+                content: v.originalContent || v.content,
+                lines: (v.originalContent || v.content).split('\n'),
+                functionName
+            };
+
+            let codeBody = v.originalContent || v.content;
+            codeBody = this._stripImportsAndExports(codeBody);
+
+            entry += `\nasync function ${functionName}() {\n${codeBody}\n}\n`;
+
+            // Generate route path
+            const routePath = v.name
+                .toLowerCase()
+                .replace(/\\/g, '/')
+                .replace(/\.jux$/i, '')
+                .replace(/\./g, '-')
+                .replace(/\s+/g, '-')
+                .replace(/[^a-z0-9\/_-]/g, '')
+                .replace(/-+/g, '-')
+                .replace(/^-|-$/g, '');
+
+            if (routePath === 'index' || routePath === '') {
+                routeToFunctionMap.set('/', functionName);
+            }
+            routeToFunctionMap.set(`/${routePath}`, functionName);
+        });
+
+        // ✅ Generate router
+        entry += this._generateRouter(routeToFunctionMap);
+
+        this._sourceSnapshot = sourceSnapshot;
+        this._validationIssues = [];
+
+        return entry;
+    }
+
+    /**
+     * Strip imports and exports from code, keeping the actual logic
+     */
+    _stripImportsAndExports(code) {
+        try {
+            const ast = acorn.parse(code, {
+                ecmaVersion: 'latest',
+                sourceType: 'module',
+                locations: true
+            });
+
+            // Remove imports and exports
+            const nodesToRemove = ast.body.filter(node =>
+                node.type === 'ImportDeclaration' ||
+                node.type === 'ExportNamedDeclaration' ||
+                node.type === 'ExportDefaultDeclaration' ||
+                node.type === 'ExportAllDeclaration'
+            );
+
+            if (nodesToRemove.length === 0) {
+                return code.trim();
+            }
+
+            // Remove nodes in reverse order
+            let result = code;
+            let offset = 0;
+
+            nodesToRemove.forEach(node => {
+                let start = node.start - offset;
+                let end = node.end - offset;
+
+                // If it's an export with a declaration, keep the declaration
+                if (node.type === 'ExportNamedDeclaration' && node.declaration) {
+                    // Keep the declaration part, remove just "export"
+                    const declarationStart = node.declaration.start - offset;
+                    result = result.substring(0, start) + result.substring(declarationStart);
+                    offset += (declarationStart - start);
+                } else if (node.type === 'ExportDefaultDeclaration') {
+                    // Remove "export default", keep the expression
+                    const exportKeyword = result.substring(start, end).match(/export\s+default\s+/);
+                    if (exportKeyword) {
+                        result = result.substring(0, start) + result.substring(start + exportKeyword[0].length);
+                        offset += exportKeyword[0].length;
+                    }
+                } else {
+                    // Remove the entire node
+                    result = result.substring(0, start) + result.substring(end);
+                    offset += (end - start);
+                }
+            });
+
+            return result.trim();
+        } catch (parseError) {
+            console.warn(`⚠️  Could not parse code for stripping, keeping as-is`);
+            return code.trim();
+        }
+    }
+
+    async build() {
+        console.log('🚀 JUX Build\n');
+
+        const juxscriptPath = this.findJuxscriptPath();
+        if (!juxscriptPath) {
+            console.error('❌ Could not locate juxscript package');
+            return { success: false, errors: [{ message: 'juxscript not found' }], warnings: [] };
+        }
+        console.log(`📦 Using: ${juxscriptPath}`);
+
+        await this.loadJuxscriptExports();
+
+        if (fs.existsSync(this.distDir)) {
+            fs.rmSync(this.distDir, { recursive: true, force: true });
+        }
+        fs.mkdirSync(this.distDir, { recursive: true });
+
+        // ✅ Copy public folder if exists
+        this.copyPublicFolder();
+
+        const { views, dataModules, sharedModules } = this.scanFiles();
+        console.log(`📁 Found ${views.length} views, ${sharedModules.length} shared, ${dataModules.length} data`);
+
+        // ❌ REMOVE: No need to copy files to dist - everything goes in bundle
+        // const juxDistDir = path.join(this.distDir, 'jux');
+        // fs.mkdirSync(juxDistDir, { recursive: true });
+        // ... copying logic removed ...
+
+        const entryContent = this.generateEntryPoint(views, dataModules, sharedModules);
+
+        const entryPath = path.join(this.distDir, 'entry.js');
+        fs.writeFileSync(entryPath, entryContent);
+
+        const snapshotPath = path.join(this.distDir, '__jux_sources.json');
+        fs.writeFileSync(snapshotPath, JSON.stringify(this._sourceSnapshot, null, 2));
+        console.log(`📸 Source snapshot written`);
+
+        const validation = this.reportValidationIssues();
+        if (!validation.isValid) {
+            console.log('🛑 BUILD FAILED\n');
+            return { success: false, errors: validation.errors, warnings: validation.warnings };
+        }
+
+        try {
+            console.log('🔧 Starting esbuild...\n');
+
+            await esbuild.build({
+                entryPoints: [entryPath],
+                bundle: true,
+                outfile: path.join(this.distDir, 'bundle.js'),
+                format: 'esm',
+                platform: 'browser',
+                target: 'esnext',
+                sourcemap: true,
+
+                loader: {
+                    '.jux': 'js',
+                    '.css': 'empty'
+                },
+
+                plugins: [{
+                    name: 'juxscript-resolver',
+                    setup: (build) => {
+                        // Resolve juxscript
+                        build.onResolve({ filter: /^juxscript$/ }, () => ({
+                            path: juxscriptPath
+                        }));
+
+                        // ✅ Force axios to resolve from project's node_modules
+                        build.onResolve({ filter: /^axios$/ }, () => {
+                            const projectRoot = process.cwd();
+                            const axiosPath = path.resolve(projectRoot, 'node_modules/axios/dist/esm/axios.js');
+
+                            if (fs.existsSync(axiosPath)) {
+                                console.log('✅ Found axios at:', axiosPath);
+                                return { path: axiosPath };
+                            }
+
+                            console.error('❌ axios not found in project node_modules');
+                            return null;
+                        });
+
+                        // ✅ Resolve .jux file imports - with detailed logging
+                        build.onResolve({ filter: /\.jux$/ }, (args) => {
+                            console.log(`🔍 Resolving: ${args.path} from ${args.importer}`);
+
+                            // Skip if already resolved
+                            if (path.isAbsolute(args.path)) {
+                                return { path: args.path };
+                            }
+
+                            // Handle relative imports
+                            if (args.path.startsWith('.')) {
+                                const importer = args.importer || entryPath;
+                                const importerDir = path.dirname(importer);
+                                const resolvedPath = path.resolve(importerDir, args.path);
+
+                                console.log(`   Importer dir: ${importerDir}`);
+                                console.log(`   Resolved to: ${resolvedPath}`);
+                                console.log(`   Exists: ${fs.existsSync(resolvedPath)}`);
+
+                                if (fs.existsSync(resolvedPath)) {
+                                    return { path: resolvedPath };
+                                } else {
+                                    console.error(`❌ Could not resolve ${args.path} from ${importer}`);
+                                    console.error(`   Tried: ${resolvedPath}`);
+                                }
+                            }
+
+                            return null;
+                        });
+                    }
+                }],
+
+                mainFields: ['browser', 'module', 'main'],
+                conditions: ['browser', 'import', 'module', 'default'],
+
+                define: {
+                    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+                    'global': 'globalThis',
+                    'process.env': JSON.stringify({})
+                },
+
+                minify: false,
+                treeShaking: true,
+                metafile: true,
+            });
+
+            console.log('\n✅ Build complete');
+
+            const bundlePath = path.join(this.distDir, 'bundle.js');
+            const bundleStats = fs.statSync(bundlePath);
+            const bundleSizeKB = (bundleStats.size / 1024).toFixed(2);
+            console.log(`📦 Bundle size: ${bundleSizeKB} KB`);
+
+        } catch (err) {
+            console.error('❌ esbuild failed:', err);
+            return { success: false, errors: [{ message: err.message }], warnings: [] };
+        }
+
+        const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JUX Application</title>
+    <script type="module" src="/bundle.js"></script>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>`;
+
+        fs.writeFileSync(
+            path.join(this.config.distDir, 'index.html'),
+            html,
+            'utf8'
+        );
+
+        console.log('✅ Generated index.html\n');
+        return { success: true, errors: [], warnings: validation.warnings };
+    }
+
+    /**
+     * Generate router code
+     */
+    _generateRouter(routeToFunctionMap) {
+        let router = `\n// --- ROUTER ---\n`;
+        router += `const routes = {\n`;
+
+        routeToFunctionMap.forEach((functionName, route) => {
+            router += `  '${route}': ${functionName},\n`;
+        });
+
+        router += `};\n\n`;
+
+        router += `function route(path) {
+    const renderFn = routes[path] || routes['/'];
+    if (renderFn) {
+        // Clear main content area
+        const appMain = document.getElementById('appmain-content');
+        if (appMain) appMain.innerHTML = '';
+        
+        const app = document.getElementById('app');
+        if (app) app.innerHTML = '';
+        
+        // Call render function
+        if (typeof renderFn === 'function') {
+            renderFn();
+        }
+    } else {
+        const app = document.getElementById('app');
+        if (app) app.innerHTML = '<h1>404 - Page Not Found</h1>';
+    }
+}
+
+// Initial route
+window.addEventListener('DOMContentLoaded', () => {
+    route(window.location.pathname);
+});
+
+// Handle navigation
+window.addEventListener('popstate', () => route(window.location.pathname));
+
+// Intercept link clicks for SPA navigation
+document.addEventListener('click', (e) => {
+    const link = e.target.closest('a[href]');
+    if (link) {
+        const href = link.getAttribute('href');
+        if (href.startsWith('/') && !href.startsWith('//')) {
+            e.preventDefault();
+            window.history.pushState({}, '', href);
+            route(href);
+        }
+    }
+});
+
+// Expose router for manual navigation
+window.navigateTo = (path) => {
+    window.history.pushState({}, '', path);
+    route(path);
+};
+`;
+
+        return router;
+    }
+
+    /**
+     * Report validation issues
+     */
+    reportValidationIssues() {
+        const errors = [];
+        const warnings = [];
+
+        // Check if there are any validation issues collected
+        if (this._validationIssues && this._validationIssues.length > 0) {
+            this._validationIssues.forEach(issue => {
+                if (issue.type === 'error') {
+                    errors.push(issue);
+                } else if (issue.type === 'warning') {
+                    warnings.push(issue);
+                }
+            });
+        }
+
+        // Log warnings
+        if (warnings.length > 0) {
+            console.log('\n⚠️  Warnings:\n');
+            warnings.forEach(w => {
+                console.log(`   ${w.view}:${w.line} - ${w.message}`);
+            });
+        }
+
+        // Log errors
+        if (errors.length > 0) {
+            console.log('\n❌ Errors:\n');
+            errors.forEach(e => {
+                console.log(`   ${e.view}:${e.line} - ${e.message}`);
+            });
+        }
+
+        return {
+            isValid: errors.length === 0,
+            errors,
+            warnings
+        };
+    }
+
+    /**
+     * Copy public folder contents to dist
+     */
+    copyPublicFolder() {
+        // ✅ Use configured public path or resolve from paths object
+        const publicSrc = this.paths.public
+            ? this.paths.public
+            : path.resolve(process.cwd(), this.publicDir);
+
+        if (!fs.existsSync(publicSrc)) {
+            return; // No public folder, skip
+        }
+
+        console.log('📦 Copying public assets...');
+
+        try {
+            this._copyDirRecursive(publicSrc, this.distDir, 0);
+            console.log('✅ Public assets copied');
+        } catch (err) {
+            console.warn('⚠️  Error copying public folder:', err.message);
+        }
+    }
+
+    /**
+     * Recursively copy directory contents
+     */
+    _copyDirRecursive(src, dest, depth = 0) {
+        const entries = fs.readdirSync(src, { withFileTypes: true });
+
+        entries.forEach(entry => {
+            // Skip hidden files and directories
+            if (entry.name.startsWith('.')) return;
+
+            const srcPath = path.join(src, entry.name);
+            const destPath = path.join(dest, entry.name);
+
+            if (entry.isDirectory()) {
+                // Create directory and recurse
+                if (!fs.existsSync(destPath)) {
+                    fs.mkdirSync(destPath, { recursive: true });
+                }
+                this._copyDirRecursive(srcPath, destPath, depth + 1);
+            } else {
+                // Copy file
+                fs.copyFileSync(srcPath, destPath);
+
+                // Log files at root level only
+                if (depth === 0) {
+                    const ext = path.extname(entry.name);
+                    const icon = this._getFileIcon(ext);
+                    console.log(`   ${icon} ${entry.name}`);
+                }
+            }
+        });
+    }
+
+    /**
+     * Get icon for file type
+     */
+    _getFileIcon(ext) {
+        const icons = {
+            '.html': '📄',
+            '.css': '🎨',
+            '.js': '📜',
+            '.json': '📋',
+            '.png': '🖼️',
+            '.jpg': '🖼️',
+            '.jpeg': '🖼️',
+            '.gif': '🖼️',
+            '.svg': '🎨',
+            '.ico': '🔖',
+            '.woff': '🔤',
+            '.woff2': '🔤',
+            '.ttf': '🔤',
+            '.eot': '🔤'
+        };
+        return icons[ext.toLowerCase()] || '📦';
+    }
+
+    /**
+     * ✅ Generate valid JavaScript identifier from file path
+     * Example: abc/aaa.jux -> abc_aaa
+     * Example: menus/main.jux -> menus_main
+     * Example: pages/blog/post.jux -> pages_blog_post
+     */
+    _generateNameFromPath(filepath) {
+        return filepath
+            .replace(/\.jux$/, '')              // Remove .jux extension
+            .replace(/[\/\\]/g, '_')            // Replace / and \ with _
+            .replace(/[^a-zA-Z0-9_]/g, '_')     // Replace any other invalid chars with _
+            .replace(/_+/g, '_')                // Collapse multiple consecutive underscores
+            .replace(/^_|_$/g, '');             // Remove leading/trailing underscores
+    }
+}