juxscript 1.1.129 → 1.1.131

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
   "totalComponents": 69,
-  "generatedAt": "2026-02-13T05:40:44.264Z",
+  "generatedAt": "2026-02-13T05:56:39.490Z",
   "components": [
     {
       "file": "alert.js",

package/machinery/compiler3.js

@@ -1,25 +1,66 @@
+import * as esbuild from 'esbuild';
+import * as acorn from 'acorn';
+import { walk } from 'astray';
 import fs from 'fs';
 import path from 'path';
-import esbuild from 'esbuild';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 export class JuxCompiler {
-    constructor(config) {
+    constructor(config = {}) {
         this.config = config;
-        this.srcDir = config.srcDir;
-        this.distDir = config.distDir;
-        this.publicDir = config.publicDir;
-        this.paths = config.paths;
+        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;
     }
 
-    /* ═══════════════════════════════════════════════════════════════════
-     * SCAN FILES (Recursive)
-     * ═══════════════════════════════════════════════════════════════════ */
+    /**
+     * 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 = [];
 
         /**
-         * ✅ Recursive directory scanner
+         * Recursive directory scanner
          */
         const scanDirectory = (currentDir) => {
             const entries = fs.readdirSync(currentDir, { withFileTypes: true });
@@ -58,37 +99,146 @@ export class JuxCompiler {
     }
 
     isAssetFile(filename) {
-        const assetExtensions = ['.css', '.scss', '.sass', '.less', '.jpg', '.jpeg', '.png', '.gif', '.svg', '.ico', '.woff', '.woff2', '.ttf', '.eot', '.otf'];
+        const assetExtensions = ['.css', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.woff', '.woff2', '.ttf', '.eot'];
         return assetExtensions.some(ext => filename.endsWith(ext));
     }
 
-    /* ═══════════════════════════════════════════════════════════════════
-     * GENERATE ENTRY POINT
-     * ═══════════════════════════════════════════════════════════════════ */
+    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 without layout/theme logic
+     */
     generateEntryPoint(views, dataModules, sharedModules) {
+        let entry = `// Auto-generated JUX entry point\n\n`;
+        const allIssues = [];
         const sourceSnapshot = {};
-        let entry = `/* Auto-generated entry point */\n`;
-        entry += `import { jux, state, registry } from 'juxscript';\n\n`;
 
-        // Import shared modules
-        sharedModules.forEach(m => {
-            entry += `// Shared: ${m.file}\n${m.content}\n\n`;
+        const juxImports = new Set();
+        [...views, ...dataModules, ...sharedModules].forEach(m => {
+            for (const match of m.content.matchAll(/import\s*\{\s*([^}]+)\s*\}\s*from\s*['"]juxscript['"]/g)) {
+                match[1].split(',').map(s => s.trim()).forEach(imp => {
+                    if (imp) juxImports.add(imp);
+                });
+            }
         });
 
-        // Import data modules
-        dataModules.forEach(d => {
-            entry += `// Data: ${d.file}\n${d.content}\n\n`;
+        if (juxImports.size > 0) {
+            entry += `import { ${[...juxImports].sort().join(', ')} } from 'juxscript';\n\n`;
+        }
+
+        dataModules.forEach(m => {
+            entry += `import * as ${this.sanitizeName(m.name)}Data from './jux/${m.file}';\n`;
+        });
+        sharedModules.forEach(m => {
+            entry += `import * as ${this.sanitizeName(m.name)}Shared from './jux/${m.file}';\n`;
         });
 
-        // Generate render functions for views
+        entry += `\n// Expose to window\n`;
+        dataModules.forEach(m => entry += `Object.assign(window, ${this.sanitizeName(m.name)}Data);\n`);
+        sharedModules.forEach(m => entry += `Object.assign(window, ${this.sanitizeName(m.name)}Shared);\n`);
+
+        if (juxImports.size > 0) {
+            entry += `\nObject.assign(window, { ${[...juxImports].join(', ')} });\n`;
+        }
+
+        entry += `\n// --- VIEW FUNCTIONS ---\n`;
+
         views.forEach(v => {
             // ✅ Sanitize the name for use in function names
+            // Replace slashes, dots, and other invalid characters with underscores
             const sanitizedName = v.name
-                .replace(/[\/\\.\\-\s]/g, '_')
-                .replace(/[^a-zA-Z0-9_]/g, '_')
-                .replace(/_+/g, '_')
-                .replace(/^_|_$/g, '');
+                .replace(/[\/\\.\\-\s]/g, '_')     // Replace /, \, ., -, spaces 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
 
             const capitalized = sanitizedName.charAt(0).toUpperCase() + sanitizedName.slice(1);
 
@@ -102,12 +252,44 @@ export class JuxCompiler {
             let viewCode = this.removeImports(v.content).replace(/^\s*export\s+default\s+.*$/gm, '');
             const asyncPrefix = viewCode.includes('await ') ? 'async ' : '';
 
+            // ✅ Use sanitized name in function declaration
             entry += `\n${asyncPrefix}function render${capitalized}() {\n${viewCode}\n}\n`;
         });
 
-        // ✅ Generate route map with sanitized names
+        dataModules.forEach(m => {
+            sourceSnapshot[m.file] = { name: m.name, file: m.file, content: m.content, lines: m.content.split('\n') };
+        });
+        sharedModules.forEach(m => {
+            sourceSnapshot[m.file] = { name: m.name, file: m.file, content: m.content, lines: m.content.split('\n') };
+        });
+
+        this._sourceSnapshot = sourceSnapshot;
+        this._validationIssues = allIssues;
+        entry += this._generateRouter(views);
+        return entry;
+    }
+
+    reportValidationIssues() {
+        const issues = this._validationIssues || [];
+        const errors = issues.filter(i => i.type === 'error');
+        const warnings = issues.filter(i => i.type === 'warning');
+
+        if (issues.length > 0) {
+            console.log('\n⚠️  Validation Issues:\n');
+            issues.forEach(issue => {
+                const icon = issue.type === 'error' ? '❌' : '⚠️';
+                console.log(`${icon} [${issue.view}:${issue.line}] ${issue.message}`);
+            });
+            console.log('');
+        }
+
+        return { isValid: errors.length === 0, errors, warnings };
+    }
+
+    _generateRouter(views) {
         let routeMap = '';
         views.forEach(v => {
+            // ✅ Sanitize function name (same as above)
             const sanitizedName = v.name
                 .replace(/[\/\\.\\-\s]/g, '_')
                 .replace(/[^a-zA-Z0-9_]/g, '_')
@@ -116,93 +298,251 @@ export class JuxCompiler {
 
             const cap = sanitizedName.charAt(0).toUpperCase() + sanitizedName.slice(1);
 
-            // ✅ Generate URL-safe route path
+            // ✅ Generate URL-safe route path from original name
+            // Convert: 'menus/main' → '/menus/main'
+            // Convert: 'about-us' → '/about-us'
+            // Convert: 'blog.post' → '/blog-post' (dots become dashes for URLs)
             const routePath = v.name
                 .toLowerCase()
-                .replace(/\\/g, '/')
-                .replace(/\.jux$/i, '')
-                .replace(/\./g, '-')
-                .replace(/\s+/g, '-')
-                .replace(/[^a-z0-9\/_-]/g, '')
-                .replace(/-+/g, '-')
-                .replace(/^-|-$/g, '');
-
+                .replace(/\\/g, '/')          // Normalize backslashes to forward slashes
+                .replace(/\.jux$/i, '')       // Remove .jux extension if present
+                .replace(/\./g, '-')          // Convert dots to dashes (blog.post → blog-post)
+                .replace(/\s+/g, '-')         // Convert spaces to dashes
+                .replace(/[^a-z0-9\/_-]/g, '') // Remove any other unsafe URL chars
+                .replace(/-+/g, '-')          // Collapse multiple dashes
+                .replace(/^-|-$/g, '');       // Remove leading/trailing dashes
+
+            // ✅ Handle index route
             if (routePath === 'index' || routePath === '') {
                 routeMap += `  '/': render${cap},\n`;
             }
 
+            // ✅ Add regular route
             routeMap += `  '/${routePath}': render${cap},\n`;
         });
 
-        // Router setup
-        entry += `\n// Router\nconst routes = {\n${routeMap}};\n\n`;
-        entry += `function route(path) {\n`;
-        entry += `  const renderFn = routes[path] || routes['/'];\n`;
-        entry += `  if (renderFn) {\n`;
-        entry += `    document.getElementById('app').innerHTML = '';\n`;
-        entry += `    renderFn();\n`;
-        entry += `  }\n`;
-        entry += `}\n\n`;
-        entry += `route(window.location.pathname);\n`;
-        entry += `window.addEventListener('popstate', () => route(window.location.pathname));\n`;
-
-        // Save source snapshot
-        const snapshotPath = path.join(this.distDir, 'source-snapshot.json');
-        fs.writeFileSync(snapshotPath, JSON.stringify(sourceSnapshot, null, 2));
-        console.log('📸 Source snapshot written');
+        return `
+// --- JUX SOURCE LOADER ---
+var __juxSources = null;
+async function __juxLoadSources() {
+    if (__juxSources) return __juxSources;
+    try {
+        var res = await fetch('/__jux_sources.json');
+        __juxSources = await res.json();
+    } catch (e) {
+        __juxSources = {};
+    }
+    return __juxSources;
+}
 
-        return entry;
+function __juxFindSource(stack) {
+    var match = stack.match(/render(\\w+)/);
+    if (match) {
+        var viewName = match[1].toLowerCase();
+        for (var file in __juxSources || {}) {
+            if (__juxSources[file].name.toLowerCase() === viewName) {
+                return { file: file, source: __juxSources[file], viewName: match[1] };
+            }
+        }
     }
+    return null;
+}
 
-    removeImports(code) {
-        return code.replace(/^\s*import\s+.*?from\s+['"].*?['"];?\s*$/gm, '');
+// --- JUX RUNTIME ERROR OVERLAY ---
+var __juxErrorOverlay = {
+    styles: \`
+        #__jux-error-overlay {
+            position: fixed; inset: 0; z-index: 99999;
+            background: rgba(0, 0, 0, 0.4);
+            display: flex; align-items: center; justify-content: center;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+            opacity: 0; transition: opacity 0.2s ease-out; backdrop-filter: blur(2px);
+        }
+        #__jux-error-overlay.visible { opacity: 1; }
+        #__jux-error-overlay * { box-sizing: border-box; }
+        .__jux-modal {
+            background: #f8f9fa; border-radius: 4px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+            max-width: 80vw; width: 90%; max-height: 90vh;
+            overflow: hidden; display: flex; flex-direction: column;
+            transform: translateY(10px); transition: transform 0.2s ease-out;
+        }
+        #__jux-error-overlay.visible .__jux-modal { transform: translateY(0); }
+        .__jux-header { background: #fff; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; }
+        .__jux-header h3 { margin: 0 0 6px; font-weight: 600; font-size: 11px; color: #9ca3af; text-transform: uppercase; }
+        .__jux-header h1 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #dc2626; line-height: 1.3; }
+        .__jux-header .file-info { color: #6b7280; font-size: 13px; }
+        .__jux-header .file-info strong { color: #dc2626; font-weight: 600; }
+        .__jux-source { padding: 16px 24px; overflow: auto; flex: 1; background: #f8f9fa; }
+        .__jux-code { background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; }
+        .__jux-code-line { display: flex; font-size: 13px; line-height: 1.7; }
+        .__jux-code-line.error { background: #fef2f2; }
+        .__jux-code-line.error .__jux-line-code { color: #dc2626; font-weight: 500; }
+        .__jux-code-line.context { background: #fefce8; }
+        .__jux-line-num { min-width: 44px; padding: 4px 12px; text-align: right; color: #9ca3af; background: #f9fafb; border-right: 1px solid #e5e7eb; font-size: 12px; }
+        .__jux-code-line.error .__jux-line-num { background: #fef2f2; color: #dc2626; }
+        .__jux-line-code { flex: 1; padding: 4px 16px; color: #374151; white-space: pre; overflow-x: auto; }
+        .__jux-footer { padding: 16px 24px; background: #fff; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
+        .__jux-tip { color: #6b7280; font-size: 12px; }
+        .__jux-dismiss { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; }
+        .__jux-dismiss:hover { background: #e5e7eb; }
+        .__jux-no-source { color: #6b7280; padding: 24px; text-align: center; }
+        .__jux-no-source pre { background: #fff; padding: 16px; border-radius: 8px; margin-top: 16px; font-size: 11px; color: #6b7280; overflow-x: auto; text-align: left; border: 1px solid #e5e7eb; }
+    \`,
+
+    show: async function(error, title) {
+        title = title || 'Runtime Error';
+        var existing = document.getElementById('__jux-error-overlay');
+        if (existing) existing.remove();
+        await __juxLoadSources();
+        
+        var overlay = document.createElement('div');
+        overlay.id = '__jux-error-overlay';
+        var stack = error && error.stack ? error.stack : '';
+        var msg = error && error.message ? error.message : String(error);
+        var found = __juxFindSource(stack);
+        var sourceHtml = '', fileInfo = '';
+        
+        if (found && found.source && found.source.lines) {
+            var lines = found.source.lines;
+            fileInfo = '<span class="file-info">in <strong>' + found.file + '</strong></span>';
+            var errorLineIndex = -1;
+            var errorMethod = msg.match(/\\.([a-zA-Z]+)\\s*is not a function/);
+            if (errorMethod) {
+                for (var i = 0; i < lines.length; i++) {
+                    if (lines[i].indexOf('.' + errorMethod[1]) > -1) { errorLineIndex = i; break; }
+                }
+            }
+            if (errorLineIndex === -1) {
+                for (var i = 0; i < lines.length; i++) {
+                    if (lines[i].indexOf('throw ') > -1) { errorLineIndex = i; break; }
+                }
+            }
+            var contextStart = Math.max(0, errorLineIndex - 3);
+            var contextEnd = Math.min(lines.length - 1, errorLineIndex + 5);
+            if (errorLineIndex === -1) { contextStart = 0; contextEnd = Math.min(14, lines.length - 1); }
+            
+            for (var i = contextStart; i <= contextEnd; i++) {
+                var isError = (i === errorLineIndex);
+                var isContext = !isError && errorLineIndex > -1 && Math.abs(i - errorLineIndex) <= 2;
+                var lineClass = isError ? ' error' : (isContext ? ' context' : '');
+                var lineCode = lines[i].replace(/</g, '&lt;').replace(/>/g, '&gt;') || ' ';
+                sourceHtml += '<div class="__jux-code-line' + lineClass + '"><span class="__jux-line-num">' + (i + 1) + '</span><span class="__jux-line-code">' + lineCode + '</span></div>';
+            }
+        } else {
+            sourceHtml = '<div class="__jux-no-source"><p>Could not locate source file.</p><pre>' + stack + '</pre></div>';
+        }
+        
+        overlay.innerHTML = '<style>' + this.styles + '</style><div class="__jux-modal"><div class="__jux-header"><h3>' + title + '</h3><h1>' + msg + '</h1>' + fileInfo + '</div><div class="__jux-source"><div class="__jux-code">' + sourceHtml + '</div></div><div class="__jux-footer"><span class="__jux-tip">💡 Fix the error and save to reload</span><button class="__jux-dismiss" onclick="document.getElementById(\\'__jux-error-overlay\\').remove()">Dismiss</button></div></div>';
+        document.body.appendChild(overlay);
+        requestAnimationFrame(function() { overlay.classList.add('visible'); });
+        console.error(title + ':', error);
     }
+};
+
+window.addEventListener('error', function(e) { __juxErrorOverlay.show(e.error || new Error(e.message), 'Uncaught Error'); }, true);
+window.addEventListener('unhandledrejection', function(e) { __juxErrorOverlay.show(e.reason || new Error('Promise rejected'), 'Unhandled Promise Rejection'); }, true);
+
+// --- JUX ROUTER ---
+const routes = {\n${routeMap}};
+
+// Simple router
+function route(path) {
+    const renderFn = routes[path] || routes['/'];
+    if (renderFn) {
+        document.getElementById('app').innerHTML = '';
+        renderFn();
+    } else {
+        document.getElementById('app').innerHTML = '<h1>404 - Page Not Found</h1>';
+    }
+}
 
-    /* ═══════════════════════════════════════════════════════════════════
-     * COPY PUBLIC ASSETS
-     * ═══════════════════════════════════════════════════════════════════ */
+// Initial route
+route(window.location.pathname);
 
-    async copyPublicAssets() {
-        const publicPath = this.paths?.public || path.resolve(this.srcDir, '..', this.publicDir);
+// Handle navigation
+window.addEventListener('popstate', () => route(window.location.pathname));
 
-        if (!fs.existsSync(publicPath)) {
-            console.log(`ℹ️  No public folder found, skipping`);
-            return;
+// Intercept link clicks
+document.addEventListener('click', (e) => {
+    if (e.target.matches('a[href]')) {
+        const href = e.target.getAttribute('href');
+        if (href.startsWith('/') && !href.startsWith('//')) {
+            e.preventDefault();
+            window.history.pushState({}, '', href);
+            route(href);
         }
+    }
+});
+`;
+    }
 
-        console.log('📦 Copying public assets...');
+    async build() {
+        console.log('🚀 JUX Build\n');
 
-        const copyRecursive = (src, dest) => {
-            if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
+        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}`);
 
-            const entries = fs.readdirSync(src, { withFileTypes: true });
+        await this.loadJuxscriptExports();
 
-            for (const entry of entries) {
-                const srcPath = path.join(src, entry.name);
-                const destPath = path.join(dest, entry.name);
+        if (fs.existsSync(this.distDir)) {
+            fs.rmSync(this.distDir, { recursive: true, force: true });
+        }
+        fs.mkdirSync(this.distDir, { recursive: true });
 
-                if (entry.isDirectory()) {
-                    copyRecursive(srcPath, destPath);
-                } else {
-                    const ext = path.extname(entry.name).toLowerCase();
-                    // ✅ Skip .jux files (they're compiled, not copied)
-                    if (ext !== '.jux') {
-                        fs.copyFileSync(srcPath, destPath);
-                    }
-                }
-            }
-        };
+        // ✅ Copy public folder if exists
+        this.copyPublicFolder();
 
-        copyRecursive(publicPath, this.distDir);
-        console.log('✅ Public assets copied');
-    }
+        const { views, dataModules, sharedModules } = this.scanFiles();
+        console.log(`📁 Found ${views.length} views, ${sharedModules.length} shared, ${dataModules.length} data`);
+
+        // Copy data/shared modules to dist
+        const juxDistDir = path.join(this.distDir, 'jux');
+        fs.mkdirSync(juxDistDir, { recursive: true });
+        [...dataModules, ...sharedModules].forEach(m => {
+            fs.writeFileSync(path.join(juxDistDir, m.file), m.content);
+        });
 
-    /* ═══════════════════════════════════════════════════════════════════
-     * GENERATE index.html
-     * ═══════════════════════════════════════════════════════════════════ */
+        const entryContent = this.generateEntryPoint(views, dataModules, sharedModules);
+        const entryPath = path.join(this.distDir, 'entry.js');
+        fs.writeFileSync(entryPath, entryContent);
 
-    async generateIndexHtml() {
-        console.log('   ✅ Generated index.html');
+        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 {
+            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) => {
+                        build.onResolve({ filter: /^juxscript$/ }, () => ({ path: juxscriptPath }));
+                    }
+                }],
+            });
+            console.log('✅ esbuild complete');
+        } catch (err) {
+            console.error('❌ esbuild failed:', err);
+            return { success: false, errors: [{ message: err.message }], warnings: [] };
+        }
 
         const html = `<!DOCTYPE html>
 <html lang="en">
@@ -210,80 +550,115 @@ export class JuxCompiler {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>JUX Application</title>
-    <link rel="stylesheet" href="/styles.css">
-    <script src="https://unpkg.com/lucide@latest"></script>
+    <script type="module" src="/bundle.js"></script>
+    <script src="/entry.js"></script>
 </head>
 <body>
     <div id="app"></div>
-    <script src="/entry.js"></script>
 </body>
 </html>`;
 
-        fs.writeFileSync(path.join(this.distDir, 'index.html'), html, 'utf8');
-    }
-
-    /* ═══════════════════════════════════════════════════════════════════
-     * BUILD
-     * ═══════════════════════════════════════════════════════════════════ */
-
-    async build() {
-        try {
-            // Clean dist
-            if (fs.existsSync(this.distDir)) {
-                fs.rmSync(this.distDir, { recursive: true, force: true });
-            }
-            fs.mkdirSync(this.distDir, { recursive: true });
+        fs.writeFileSync(
+            path.join(this.config.distDir, 'index.html'),
+            html,
+            'utf8'
+        );
 
-            // Copy public assets first
-            await this.copyPublicAssets();
+        console.log('   ✅ Generated index.html');
+        return { success: true, errors: [], warnings: validation.warnings };
+    }
 
-            // Scan files
-            const { views, dataModules, sharedModules } = this.scanFiles();
-            console.log(`📁 Found ${views.length} views, ${sharedModules.length} shared, ${dataModules.length} data`);
+    /**
+     * 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
+        }
 
-            // Generate entry point
-            const entryCode = this.generateEntryPoint(views, dataModules, sharedModules);
-            const entryPath = path.join(this.distDir, 'entry-temp.js');
-            fs.writeFileSync(entryPath, entryCode, 'utf8');
+        console.log('📦 Copying public assets...');
 
-            // Bundle with esbuild
-            await esbuild.build({
-                entryPoints: [entryPath],
-                bundle: true,
-                outfile: path.join(this.distDir, 'entry.js'),
-                format: 'esm',
-                platform: 'browser',
-                target: 'es2020',
-                minify: false,
-                sourcemap: false
-            });
+        try {
+            this._copyDirRecursive(publicSrc, this.distDir, 0);
+            console.log('✅ Public assets copied');
+        } catch (err) {
+            console.warn('⚠️  Error copying public folder:', err.message);
+        }
+    }
 
-            console.log('✅ esbuild complete');
+    /**
+     * Recursively copy directory contents
+     */
+    _copyDirRecursive(src, dest, depth = 0) {
+        const entries = fs.readdirSync(src, { withFileTypes: true });
 
-            // Clean up temp file
-            fs.unlinkSync(entryPath);
+        entries.forEach(entry => {
+            // Skip hidden files and directories
+            if (entry.name.startsWith('.')) return;
 
-            // Generate index.html
-            await this.generateIndexHtml();
+            const srcPath = path.join(src, entry.name);
+            const destPath = path.join(dest, entry.name);
 
-            // ✅ Return success object
-            return {
-                success: true,
-                errors: [],
-                warnings: [],
-                fileCount: views.length
-            };
+            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}`);
+                }
+            }
+        });
+    }
 
-        } catch (error) {
-            console.error('\n❌ Build failed:', error.message);
-            console.error(error.stack);
+    /**
+     * 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()] || '📦';
+    }
 
-            // ✅ Return failure object
-            return {
-                success: false,
-                errors: [error.message],
-                warnings: []
-            };
-        }
+    /**
+     * ✅ 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
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.129",
+  "version": "1.1.131",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",