juxscript 1.1.371 → 1.1.375

package/bin/cli.js

@@ -67,6 +67,24 @@ function resolveDestFolderName(parentDir, baseName) {
   return `${baseName}-${Date.now()}`;
 }
 
+function listFilesRecursive(dir, base = '') {
+  const results = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    if (entry.name.startsWith('.')) continue;
+    const rel = base ? path.join(base, entry.name) : entry.name;
+
+    if (entry.isDirectory()) {
+      results.push(...listFilesRecursive(path.join(dir, entry.name), rel));
+    } else {
+      results.push(rel);
+    }
+  }
+
+  return results;
+}
+
 function promptPresetSelection(presets) {
   return new Promise((resolve) => {
     console.log('\n📦 Available component presets:\n');

package/juxconfig.example.js

@@ -9,14 +9,23 @@ export const config = {
     directories: {
         source: './jux',          // Where your .jux files live
         distribution: './.jux-dist', // Where build artifacts go
-        public: './public'        // ✅ Static assets folder (CSS, images, fonts, etc.)
+        public: './public'        // Static assets folder (CSS, images, fonts, etc.)
     },
 
     // Application Defaults
     defaults: {
         httpPort: 3000,
         wsPort: 3001,
-        //iconlibrary: 'heroicons'
+    },
+
+    // Precompile: bootstrap .jux files that run before routing.
+    // These render into sibling containers of #app at boot time.
+    // For CSS/JS injection, use jux.include() inside your .jux files.
+    //
+    // String form:  'sidebar/usage.jux'  → auto-derives container id
+    // Object form:  { file: 'sidebar/usage.jux', target: 'app-sidebar' }
+    precompile: {
+        juxfiles: [],
     }
 
 };

package/machinery/build3.js

@@ -33,6 +33,10 @@ const defaults = {
     autoRoute: rawConfig.defaults?.autoRoute ?? true
 };
 
+const precompile = {
+    juxfiles: rawConfig.precompile?.juxfiles || [],
+};
+
 // Resolve absolute paths
 const paths = {
     source: path.resolve(PROJECT_ROOT, directories.source),
@@ -69,9 +73,10 @@ console.log(`\n`);
 const compiler = new JuxCompiler({
     srcDir: paths.source,
     distDir: paths.distribution,
-    publicDir: directories.public, // ✅ Pass configured public directory name
+    publicDir: directories.public,
     defaults,
-    paths // ✅ Pass resolved paths object (includes paths.public)
+    paths,
+    precompile
 });
 
 compiler.build()

package/machinery/compiler4.js

@@ -18,6 +18,7 @@ export class JuxCompiler {
         this.publicDir = config.publicDir || './public';
         this.defaults = config.defaults || {};
         this.paths = config.paths || {};
+        this.precompile = config.precompile || { juxfiles: [] };
         this._juxscriptExports = null;
         this._juxscriptPath = null;
         this._renderFunctionCounter = 0;
@@ -28,7 +29,6 @@ export class JuxCompiler {
 
         const projectRoot = process.cwd();
 
-        // 1. User's project node_modules (standard npm install)
         const userPath = path.resolve(projectRoot, 'node_modules/juxscript/dist/lib/index.js');
         if (fs.existsSync(userPath)) {
             console.log(`📦 Using: ${userPath}`);
@@ -36,7 +36,6 @@ export class JuxCompiler {
             return userPath;
         }
 
-        // 2. User's project node_modules — flat dist
         const userPathFlat = path.resolve(projectRoot, 'node_modules/juxscript/dist/index.js');
         if (fs.existsSync(userPathFlat)) {
             console.log(`📦 Using: ${userPathFlat}`);
@@ -44,7 +43,6 @@ export class JuxCompiler {
             return userPathFlat;
         }
 
-        // 3. Dev mode — built from parent package
         const packageRoot = path.resolve(__dirname, '..');
         const devPath = path.resolve(packageRoot, 'dist', 'lib', 'index.js');
         if (fs.existsSync(devPath)) {
@@ -53,7 +51,6 @@ export class JuxCompiler {
             return devPath;
         }
 
-        // 4. Dev mode — flat dist
         const devPathFlat = path.resolve(packageRoot, 'dist', 'index.js');
         if (fs.existsSync(devPathFlat)) {
             console.log(`📦 Using (dev flat): ${devPathFlat}`);
@@ -61,7 +58,6 @@ export class JuxCompiler {
             return devPathFlat;
         }
 
-        // 5. Monorepo sibling
         const monoPath = path.resolve(projectRoot, '../jux/dist/lib/index.js');
         if (fs.existsSync(monoPath)) {
             console.log(`📦 Using (mono): ${monoPath}`);
@@ -69,7 +65,6 @@ export class JuxCompiler {
             return monoPath;
         }
 
-        // 6. Try require.resolve as last resort
         try {
             const resolved = require.resolve('juxscript');
             if (fs.existsSync(resolved)) {
@@ -79,7 +74,6 @@ export class JuxCompiler {
             }
         } catch (_) { }
 
-        // Debug: show what was checked
         console.error('❌ Searched for juxscript at:');
         console.error(`   ${userPath}`);
         console.error(`   ${userPathFlat}`);
@@ -87,7 +81,6 @@ export class JuxCompiler {
         console.error(`   ${devPathFlat}`);
         console.error(`   ${monoPath}`);
 
-        // Check if node_modules/juxscript exists at all
         const juxscriptDir = path.resolve(projectRoot, 'node_modules/juxscript');
         if (fs.existsSync(juxscriptDir)) {
             console.error(`\n📁 node_modules/juxscript exists. Contents:`);
@@ -137,7 +130,6 @@ export class JuxCompiler {
                         } else if (hasExports) {
                             sharedModules.push({ name, file: relativePath, content, originalContent: content });
                         } else {
-                            // ✅ Auto-wrap pageState references before wrapping in async function
                             let processedContent = content;
                             if (file.endsWith('.jux')) {
                                 const result = autowrap(content, relativePath);
@@ -364,10 +356,8 @@ export class JuxCompiler {
                 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`;
         });
 
@@ -379,20 +369,18 @@ export class JuxCompiler {
                 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`;
         });
 
         entry += `\n// --- VIEW FUNCTIONS ---\n`;
 
         const routeToFunctionMap = new Map();
+        const fileToFunctionMap = new Map();
 
         views.forEach((v, index) => {
             const functionName = `renderJux${index}`;
-
             let codeBody = v.autowrappedContent || v.originalContent || v.content;
             const originalLines = (v.originalContent || codeBody).split('\n');
             codeBody = this._stripImportsAndExports(codeBody);
@@ -406,6 +394,9 @@ export class JuxCompiler {
 
             entry += `\nasync function ${functionName}() {\n${codeBody}\n}\n`;
 
+            const relNormalized = v.file.replace(/\\/g, '/');
+            fileToFunctionMap.set(relNormalized, functionName);
+
             const routePath = v.name
                 .toLowerCase()
                 .replace(/\\/g, '/')
@@ -427,12 +418,207 @@ export class JuxCompiler {
         this._sourceSnapshot = sourceSnapshot;
         this._validationIssues = [];
 
-        // Embed source snapshot for runtime error overlay
         entry += `\nwindow.__juxSources = ${JSON.stringify(sourceSnapshot)};\n`;
 
+        const bootCalls = this._resolvePrecompileBootCalls(fileToFunctionMap);
+
+        entry += `\n// --- STARTUP ---\n`;
+        entry += `window.addEventListener('DOMContentLoaded', async () => {\n`;
+        for (const bc of bootCalls) {
+            entry += `  await ${bc.functionName}(); // boot: ${bc.file}\n`;
+        }
+        entry += `  route(window.location.pathname);\n`;
+        entry += `});\n`;
+
+        this._bootCalls = bootCalls;
+
         return entry;
     }
 
+    _resolvePrecompileBootCalls(fileToFunctionMap) {
+        const bootCalls = [];
+        const pc = this.precompile;
+
+        for (const jfEntry of pc.juxfiles) {
+            const jf = typeof jfEntry === 'string'
+                ? { file: jfEntry }
+                : jfEntry;
+
+            const fullPath = path.resolve(this.srcDir, jf.file);
+            const relativePath = path.relative(this.srcDir, fullPath).replace(/\\/g, '/');
+
+            const functionName = fileToFunctionMap.get(relativePath);
+            if (!functionName) {
+                console.error(`❌ precompile.juxfiles: "${jf.file}" (${relativePath}) was not compiled as a view.`);
+                console.error(`   It may have exports or be classified as a data/shared module.`);
+                console.error(`   Available views: ${[...fileToFunctionMap.keys()].join(', ')}`);
+                continue;
+            }
+
+            let containerId = jf.target;
+            if (!containerId) {
+                const baseName = jf.file
+                    .replace(/\.jux$/, '')
+                    .replace(/\/index$/, '')
+                    .replace(/[\/\\]/g, '-')
+                    .replace(/[^a-z0-9-]/gi, '')
+                    .replace(/-+/g, '-')
+                    .replace(/^-|-$/g, '')
+                    .toLowerCase();
+                containerId = 'app-' + (baseName || 'boot');
+            }
+
+            bootCalls.push({ file: relativePath, functionName, containerId });
+            console.log(`   🏗️  Boot: ${jf.file} → ${functionName} → <div id="${containerId}">`);
+        }
+
+        return bootCalls;
+    }
+
+    _generateRouter(routeToFunctionMap) {
+        let router = `\n// --- ROUTER ---\n`;
+        router += `const routes = {\n`;
+
+        routeToFunctionMap.forEach((functionName, route) => {
+            router += `  '${route}': ${functionName},\n`;
+        });
+
+        router += `};\n\n`;
+
+        const routeIndex = [];
+        routeToFunctionMap.forEach((functionName, routePath) => {
+            const name = routePath === '/'
+                ? 'Home'
+                : routePath.split('/').filter(Boolean).pop()
+                    .split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' ');
+            const sourceFile = this._sourceSnapshot
+                ? Object.values(this._sourceSnapshot).find(s => s.functionName === functionName)
+                : null;
+            routeIndex.push({ path: routePath, name, file: sourceFile?.file || '' });
+        });
+        router += `window.__juxRouteIndex = ${JSON.stringify(routeIndex)};\n\n`;
+
+        router += `function route(path) {
+    const renderFn = routes[path] || routes['/'];
+    if (renderFn) {
+        const app = document.getElementById('app');
+        if (app) app.innerHTML = '';
+        
+        if (typeof renderFn === 'function') {
+            renderFn();
+        }
+    } else {
+        const app = document.getElementById('app');
+        if (app) app.innerHTML = '<h1>404 - Page Not Found</h1>';
+    }
+}
+
+window.addEventListener('popstate', () => route(window.location.pathname));
+
+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);
+        }
+    }
+});
+
+window.navigateTo = (path) => {
+    window.history.pushState({}, '', path);
+    route(path);
+};
+`;
+
+        return router;
+    }
+
+    _generateIndexHtml() {
+        const bootCalls = this._bootCalls || [];
+
+        let bodyContainers = '';
+        for (const bc of bootCalls) {
+            bodyContainers += `    <div id="${bc.containerId}"></div>\n`;
+        }
+
+        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>
+    ${generateErrorCollector({
+            enabled: process.env.NODE_ENV !== 'production',
+            maxErrors: 50
+        })}
+    <script type="module" src="/bundle.js"></script>
+</head>
+<body>
+${bodyContainers}    <div id="app"></div>
+</body>
+</html>`;
+
+        return html;
+    }
+
+    copyPublicFolder() {
+        const publicSrc = this.paths?.public
+            ? this.paths.public
+            : path.resolve(process.cwd(), this.publicDir);
+
+        if (!fs.existsSync(publicSrc)) {
+            return;
+        }
+
+        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);
+        }
+    }
+
+    _copyDirRecursive(src, dest, depth = 0) {
+        const entries = fs.readdirSync(src, { withFileTypes: true });
+
+        entries.forEach(entry => {
+            if (entry.name.startsWith('.')) return;
+
+            const srcPath = path.join(src, entry.name);
+            const destPath = path.join(dest, entry.name);
+
+            if (entry.isDirectory()) {
+                if (!fs.existsSync(destPath)) {
+                    fs.mkdirSync(destPath, { recursive: true });
+                }
+                this._copyDirRecursive(srcPath, destPath, depth + 1);
+            } else {
+                fs.copyFileSync(srcPath, destPath);
+
+                if (depth === 0) {
+                    const ext = path.extname(entry.name);
+                    const icon = this._getFileIcon(ext);
+                    console.log(`   ${icon} ${entry.name}`);
+                }
+            }
+        });
+    }
+
+    _getFileIcon(ext) {
+        const icons = {
+            '.html': '📄', '.css': '🎨', '.js': '📜', '.json': '📋',
+            '.png': '🖼️', '.jpg': '🖼️', '.jpeg': '🖼️', '.gif': '🖼️',
+            '.svg': '🎨', '.ico': '🔖',
+            '.woff': '🔤', '.woff2': '🔤', '.ttf': '🔤', '.eot': '🔤'
+        };
+        return icons[ext.toLowerCase()] || '📦';
+    }
+
     _stripImportsAndExports(code) {
         try {
             const ast = acorn.parse(code, {
@@ -455,31 +641,89 @@ export class JuxCompiler {
             let result = code;
             let offset = 0;
 
-            nodesToRemove.forEach(node => {
-                let start = node.start - offset;
-                let end = node.end - offset;
+            for (const node of nodesToRemove) {
+                const start = node.start - offset;
+                const end = node.end - offset;
 
                 if (node.type === 'ExportNamedDeclaration' && node.declaration) {
-                    const declarationStart = node.declaration.start - offset;
-                    result = result.substring(0, start) + result.substring(declarationStart);
-                    offset += (declarationStart - start);
+                    const declStart = node.declaration.start - offset;
+                    result = result.substring(0, start) + result.substring(declStart);
+                    offset += (declStart - start);
                 } else if (node.type === 'ExportDefaultDeclaration') {
-                    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;
+                    const match = result.substring(start, end).match(/export\s+default\s+/);
+                    if (match) {
+                        result = result.substring(0, start) + result.substring(start + match[0].length);
+                        offset += match[0].length;
                     }
                 } else {
                     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();
+            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, '')
+                .trim();
+        }
+    }
+
+    _validatePrecompile() {
+        const errors = [];
+        const pc = this.precompile;
+
+        for (const jfEntry of pc.juxfiles) {
+            const jf = typeof jfEntry === 'string' ? jfEntry : jfEntry.file;
+            const fullPath = path.resolve(this.srcDir, jf);
+            if (!fs.existsSync(fullPath)) {
+                errors.push({ message: `precompile.juxfiles: "${jf}" not found at ${fullPath}` });
+            }
+        }
+
+        if (errors.length > 0) {
+            console.error('\n❌ Precompile validation failed:\n');
+            errors.forEach(e => console.error(`   ${e.message}`));
+        } else if (pc.juxfiles.length) {
+            console.log(`\n🔧 Precompile:`);
+            console.log(`   📄 juxfiles: ${pc.juxfiles.map(j => typeof j === 'string' ? j : j.file).join(', ')}`);
+        }
+
+        return { valid: errors.length === 0, errors };
+    }
+
+    reportValidationIssues() {
+        const errors = [];
+        const warnings = [];
+
+        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);
+                }
+            });
+        }
+
+        if (warnings.length > 0) {
+            console.log('\n⚠️  Warnings:\n');
+            warnings.forEach(w => {
+                console.log(`   ${w.view}:${w.line} - ${w.message}`);
+            });
+        }
+
+        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 };
     }
 
     async build() {
@@ -502,6 +746,12 @@ export class JuxCompiler {
 
         this.copyPublicFolder();
 
+        const precompileResult = this._validatePrecompile();
+        if (!precompileResult.valid) {
+            console.log('🛑 BUILD FAILED — precompile errors\n');
+            return { success: false, errors: precompileResult.errors, warnings: [] };
+        }
+
         const { views, dataModules, sharedModules } = this.scanFiles();
         console.log(`📁 Found ${views.length} views, ${sharedModules.length} shared, ${dataModules.length} data`);
 
@@ -531,271 +781,63 @@ export class JuxCompiler {
                 platform: 'browser',
                 target: 'esnext',
                 sourcemap: true,
-
-                loader: {
-                    '.jux': 'js',
-                    '.css': 'empty'
-                },
-
+                loader: { '.jux': 'js', '.css': 'empty' },
                 plugins: [{
                     name: 'juxscript-resolver',
                     setup: (build) => {
                         build.onResolve({ filter: /^juxscript$/ }, () => ({
                             path: juxscriptPath
                         }));
-
                         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;
                         });
-
                         build.onResolve({ filter: /\.jux$/ }, (args) => {
                             console.log(`🔍 Resolving: ${args.path} from ${args.importer}`);
-
-                            if (path.isAbsolute(args.path)) {
-                                return { path: args.path };
-                            }
-
+                            if (path.isAbsolute(args.path)) return { path: args.path };
                             if (args.path.startsWith('.')) {
                                 const importer = args.importer || entryPath;
                                 const importerDir = path.dirname(importer);
                                 const resolvedPath = path.resolve(importerDir, args.path);
-
-                                if (fs.existsSync(resolvedPath)) {
-                                    return { path: resolvedPath };
-                                } else {
-                                    console.error(`❌ Could not resolve ${args.path} from ${importer}`);
-                                }
+                                if (fs.existsSync(resolvedPath)) return { path: resolvedPath };
+                                else console.error(`❌ Could not resolve ${args.path} from ${importer}`);
                             }
-
                             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`);
+            console.log(`📦 Bundle size: ${(bundleStats.size / 1024).toFixed(2)} 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>
-    ${generateErrorCollector({
-            enabled: process.env.NODE_ENV !== 'production',
-            maxErrors: 50
-        })}
-    <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'
-        );
+        const html = this._generateIndexHtml();
+        fs.writeFileSync(path.join(this.distDir, 'index.html'), html, 'utf8');
 
         console.log('✅ Generated index.html\n');
         return { success: true, errors: [], warnings: validation.warnings };
     }
-
-    _generateRouter(routeToFunctionMap) {
-        let router = `\n// --- ROUTER ---\n`;
-        router += `const routes = {\n`;
-
-        routeToFunctionMap.forEach((functionName, route) => {
-            router += `  '${route}': ${functionName},\n`;
-        });
-
-        router += `};\n\n`;
-
-        // Build route index for jux.routes.all()
-        const routeIndex = [];
-        routeToFunctionMap.forEach((functionName, routePath) => {
-            const name = routePath === '/'
-                ? 'Home'
-                : routePath.split('/').filter(Boolean).pop()
-                    .split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' ');
-            // Find matching source file from snapshot
-            const sourceFile = this._sourceSnapshot
-                ? Object.values(this._sourceSnapshot).find(s => s.functionName === functionName)
-                : null;
-            routeIndex.push({ path: routePath, name, file: sourceFile?.file || '' });
-        });
-        router += `window.__juxRouteIndex = ${JSON.stringify(routeIndex)};\n\n`;
-
-        router += `function route(path) {
-    const renderFn = routes[path] || routes['/'];
-    if (renderFn) {
-        const appMain = document.getElementById('appmain-content');
-        if (appMain) appMain.innerHTML = '';
-        
-        const app = document.getElementById('app');
-        if (app) app.innerHTML = '';
-        
-        if (typeof renderFn === 'function') {
-            renderFn();
-        }
-    } else {
-        const app = document.getElementById('app');
-        if (app) app.innerHTML = '<h1>404 - Page Not Found</h1>';
-    }
-}
-
-window.addEventListener('DOMContentLoaded', () => {
-    route(window.location.pathname);
-});
-
-window.addEventListener('popstate', () => route(window.location.pathname));
-
-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);
-        }
-    }
-});
-
-window.navigateTo = (path) => {
-    window.history.pushState({}, '', path);
-    route(path);
-};
-`;
-
-        return router;
-    }
-
-    reportValidationIssues() {
-        const errors = [];
-        const warnings = [];
-
-        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);
-                }
-            });
-        }
-
-        if (warnings.length > 0) {
-            console.log('\n⚠️  Warnings:\n');
-            warnings.forEach(w => {
-                console.log(`   ${w.view}:${w.line} - ${w.message}`);
-            });
-        }
-
-        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 };
-    }
-
-    copyPublicFolder() {
-        const publicSrc = this.paths.public
-            ? this.paths.public
-            : path.resolve(process.cwd(), this.publicDir);
-
-        if (!fs.existsSync(publicSrc)) {
-            return;
-        }
-
-        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);
-        }
-    }
-
-    _copyDirRecursive(src, dest, depth = 0) {
-        const entries = fs.readdirSync(src, { withFileTypes: true });
-
-        entries.forEach(entry => {
-            if (entry.name.startsWith('.')) return;
-
-            const srcPath = path.join(src, entry.name);
-            const destPath = path.join(dest, entry.name);
-
-            if (entry.isDirectory()) {
-                if (!fs.existsSync(destPath)) {
-                    fs.mkdirSync(destPath, { recursive: true });
-                }
-                this._copyDirRecursive(srcPath, destPath, depth + 1);
-            } else {
-                fs.copyFileSync(srcPath, destPath);
-
-                if (depth === 0) {
-                    const ext = path.extname(entry.name);
-                    const icon = this._getFileIcon(ext);
-                    console.log(`   ${icon} ${entry.name}`);
-                }
-            }
-        });
-    }
-
-    _getFileIcon(ext) {
-        const icons = {
-            '.html': '📄', '.css': '🎨', '.js': '📜', '.json': '📋',
-            '.png': '🖼️', '.jpg': '🖼️', '.jpeg': '🖼️', '.gif': '🖼️',
-            '.svg': '🎨', '.ico': '🔖',
-            '.woff': '🔤', '.woff2': '🔤', '.ttf': '🔤', '.eot': '🔤'
-        };
-        return icons[ext.toLowerCase()] || '📦';
-    }
-
-    _generateNameFromPath(filepath) {
-        return filepath
-            .replace(/\.jux$/, '')
-            .replace(/[\/\\]/g, '_')
-            .replace(/[^a-zA-Z0-9_]/g, '_')
-            .replace(/_+/g, '_')
-            .replace(/^_|_$/g, '');
-    }
 }

package/machinery/serve.js

@@ -29,11 +29,11 @@ function getArgValue(flag, shortFlag, defaultValue) {
 const PORT = parseInt(getArgValue('--port', '-p', process.env.PORT || '3000'));
 const WS_PORT = parseInt(getArgValue('--ws-port', '-w', process.env.WS_PORT || String(PORT + 1)));
 
-// ✅ Load juxconfig.js to get configured paths
+// Where the config is loaded (near the top, after imports)
 const PROJECT_ROOT = process.cwd();
 const JUX_CONFIG_PATH = path.resolve(PROJECT_ROOT, 'juxconfig.js');
-
 let rawConfig = {};
+
 try {
   const imported = await import(JUX_CONFIG_PATH);
   rawConfig = imported.config || {};
@@ -70,8 +70,9 @@ if (!fs.existsSync(DIST_DIR) || !fs.existsSync(path.join(DIST_DIR, 'index.html')
   const compiler = new JuxCompiler({
     srcDir: SRC_DIR,
     distDir: DIST_DIR,
-    publicDir: directories.public, // ✅ Pass configured name
-    paths // ✅ Pass resolved paths
+    publicDir: directories.public,
+    paths,
+    precompile
   });
 
   try {
@@ -106,6 +107,11 @@ app.use((req, res, next) => {
 app.get('/favicon.ico', (req, res) => res.status(204).end());
 app.get('/favicon.png', (req, res) => res.status(204).end());
 
+// Near the top, after config is loaded — ensure precompile is extracted:
+const precompile = {
+    juxfiles: rawConfig.precompile?.juxfiles || [],
+};
+
 // ═══════════════════════════════════════════════════════════════
 // API ROUTES — BEFORE static and catch-all
 // ═══════════════════════════════════════════════════════════════
@@ -276,8 +282,9 @@ if (HOT_RELOAD) {
   const compiler = new JuxCompiler({
     srcDir: SRC_DIR,
     distDir: DIST_DIR,
-    publicDir: directories.public, // ✅ Pass configured name
-    paths // ✅ Pass resolved paths
+    publicDir: directories.public,
+    paths,
+    precompile
   });
 
   watcher = createWatcher(SRC_DIR, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.371",
+  "version": "1.1.375",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",

package/presets/sidebar/index.jux

@@ -28,13 +28,14 @@ export function juxSidebar(id, sections, options) {
         if (typeof item === 'string') {
             var path = item.startsWith('/') ? item : '/' + item;
             var seg = path.split('/').filter(Boolean).pop() || 'Home';
-            return { id: id + '-' + seg.toLowerCase().replace(/[^a-z0-9]/g, '-'), label: seg.charAt(0).toUpperCase() + seg.slice(1), path: path };
+            return { id: id + '-' + path.replace(/^\//, '').replace(/[^a-z0-9]/gi, '-').toLowerCase() || id + '-home', label: seg.charAt(0).toUpperCase() + seg.slice(1), path: path };
         }
         // Support RouteInfo shape { path, name, file } from jux.routes.all()
         var itemPath = item.path || '';
         var seg = itemPath.split('/').filter(Boolean).pop() || 'home';
+        var fullSlug = itemPath.replace(/^\//, '').replace(/[^a-z0-9]/gi, '-').toLowerCase() || 'home';
         return {
-            id: item.id || id + '-' + seg.toLowerCase().replace(/[^a-z0-9]/g, '-'),
+            id: item.id || id + '-' + fullSlug,
             label: item.label || item.name || seg.charAt(0).toUpperCase() + seg.slice(1),
             path: itemPath,
             icon: item.icon
@@ -57,11 +58,34 @@ export function juxSidebar(id, sections, options) {
         injectStyles();
         var sidebarClass = 'jux-sidebar jux-sidebar--' + _density;
         if (_collapsed) sidebarClass += ' jux-sidebar--collapsed';
-        jux.div(id, { class: sidebarClass, style: 'width:' + (_collapsed ? _collapsedWidth : _width), target: _target });
+
+        // If the target container already has our ID, reuse it instead of nesting
+        var existingEl = document.getElementById(id);
+        if (_target === id && existingEl) {
+            existingEl.className = sidebarClass;
+            existingEl.style.width = _collapsed ? _collapsedWidth : _width;
+        } else {
+            jux.div(id, { class: sidebarClass, style: 'width:' + (_collapsed ? _collapsedWidth : _width), target: _target });
+        }
+
         jux.div(id + '-header', { class: 'jux-sidebar-header', target: id });
-        jux.div(id + '-logo', { class: 'jux-sidebar-logo', target: id + '-header' });
+        jux.div(id + '-header-link', { class: 'jux-sidebar-header-link', target: id + '-header' });
+        jux.div(id + '-logo', { class: 'jux-sidebar-logo', target: id + '-header-link' });
         renderLogo();
-        jux.span(id + '-title', { class: 'jux-sidebar-title-text', content: _title, target: id + '-header' });
+        jux.span(id + '-title', { class: 'jux-sidebar-title-text', content: _title, target: id + '-header-link' });
+
+        // Make header link navigate to root
+        var headerLinkEl = document.getElementById(id + '-header-link');
+        if (headerLinkEl) {
+            headerLinkEl.addEventListener('click', function () {
+                if (window.navigateTo) {
+                    window.navigateTo('/');
+                } else {
+                    window.location.href = '/';
+                }
+            });
+        }
+
         if (_collapsible) {
             jux.div(id + '-collapse-btn', {
                 class: 'jux-sidebar-collapse-btn',
@@ -116,10 +140,19 @@ export function juxSidebar(id, sections, options) {
     }
 
     function injectStyles() {
-        jux.style('menu-styles', '\
+        var appPadding = {
+            dense: '10px',
+            normal: '16px',
+            inflated: '24px'
+        };
+        var currentWidth = _collapsed ? _collapsedWidth : _width;
+        jux.style('sidebar-styles', '\
         body { margin: 0; }\
+        #app { left: '+ currentWidth + '; position: fixed; top: 0; width: calc(100% - ' + currentWidth + '); height: 100vh; padding: ' + appPadding[_density] + '; box-sizing: border-box; transition: left 0.2s ease, width 0.2s ease, padding 0.2s ease; overflow-y: auto; }\
         .jux-sidebar { display:flex; flex-direction:column; min-height:100vh; background:hsl(var(--card)); color:hsl(var(--card-foreground)); border-right:1px solid hsl(var(--border)); font-family:var(--font-sans,system-ui,sans-serif); transition:width 0.2s ease; overflow:hidden; }\
         .jux-sidebar-header { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; border-bottom:1px solid hsl(var(--border)); min-height:20px; position:relative; }\
+        .jux-sidebar-header-link { display:flex; align-items:center; gap:8px; cursor:pointer; flex:1; min-width:0; text-decoration:none; color:inherit; }\
+        .jux-sidebar-header-link:hover { opacity:0.8; }\
         .jux-sidebar-logo { width:20px; height:20px; min-width:20px; border-radius:6px; background:hsl(var(--primary)); display:flex; align-items:center; justify-content:center; color:hsl(var(--primary-foreground)); font-size:11px; font-weight:700; flex-shrink:0; overflow:hidden; }\
         .jux-sidebar-logo-img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }\
         .jux-sidebar-logo svg { width:14px; height:14px; }\
@@ -146,24 +179,28 @@ export function juxSidebar(id, sections, options) {
         .jux-sidebar--collapsed .jux-sidebar-collapse-btn { margin-left:0; width:24px; height:24px; }\
         .jux-sidebar--collapsed .jux-sidebar-collapse-btn svg { width:14px; height:14px; }\
         .jux-sidebar--collapsed .jux-sidebar-logo { margin:0; }\
+        .jux-sidebar--collapsed ~ #app, .jux-sidebar--collapsed + #app { left: ' + _collapsedWidth + '; width: calc(100% - ' + _collapsedWidth + '); }\
         \
         .jux-sidebar--dense .jux-sidebar-header { padding:' + DENSITY.dense.headerPad + '; }\
         .jux-sidebar--dense .jux-sidebar-label { padding:' + DENSITY.dense.labelPad + '; }\
         .jux-sidebar--dense .jux-sidebar-footer { padding:' + DENSITY.dense.footerPad + '; }\
         .jux-sidebar--dense .jux-nav-item { padding:' + DENSITY.dense.itemPad + '; margin:' + DENSITY.dense.gap + ' 0; font-size:' + DENSITY.dense.fontSize + '; gap:8px; }\
         .jux-sidebar--dense .jux-nav-item-icon { width:16px; font-size:' + DENSITY.dense.iconSize + '; }\
+        .jux-sidebar--dense ~ #app, .jux-sidebar--dense + #app { padding: ' + appPadding.dense + '; }\
         \
         .jux-sidebar--normal .jux-sidebar-header { padding:' + DENSITY.normal.headerPad + '; }\
         .jux-sidebar--normal .jux-sidebar-label { padding:' + DENSITY.normal.labelPad + '; }\
         .jux-sidebar--normal .jux-sidebar-footer { padding:' + DENSITY.normal.footerPad + '; }\
         .jux-sidebar--normal .jux-nav-item { padding:' + DENSITY.normal.itemPad + '; margin:' + DENSITY.normal.gap + ' 0; font-size:' + DENSITY.normal.fontSize + '; gap:10px; }\
         .jux-sidebar--normal .jux-nav-item-icon { width:18px; font-size:' + DENSITY.normal.iconSize + '; }\
+        .jux-sidebar--normal ~ #app, .jux-sidebar--normal + #app { padding: ' + appPadding.normal + '; }\
         \
         .jux-sidebar--inflated .jux-sidebar-header { padding:' + DENSITY.inflated.headerPad + '; }\
         .jux-sidebar--inflated .jux-sidebar-label { padding:' + DENSITY.inflated.labelPad + '; }\
         .jux-sidebar--inflated .jux-sidebar-footer { padding:' + DENSITY.inflated.footerPad + '; }\
         .jux-sidebar--inflated .jux-nav-item { padding:' + DENSITY.inflated.itemPad + '; margin:' + DENSITY.inflated.gap + ' 0; font-size:' + DENSITY.inflated.fontSize + '; gap:12px; }\
         .jux-sidebar--inflated .jux-nav-item-icon { width:20px; font-size:' + DENSITY.inflated.iconSize + '; }\
+        .jux-sidebar--inflated ~ #app, .jux-sidebar--inflated + #app { padding: ' + appPadding.inflated + '; }\
         ');
     }
 

package/presets/sidebar/usage.jux

@@ -1,7 +1,7 @@
 import { jux } from 'juxscript';
 import { juxSidebar } from './index.jux';
 const allRoutes = jux.routes.all();
-
+// ['/route/path', '/another/route']
 juxSidebar('my-sidebar', allRoutes,
     { title: 'Simple App', logo: 'J', footer: 'v1.0', density: 'inflated', collapsible: true });