juxscript 1.0.104 → 1.0.106

package/lib/componentsv2/grid/component.js

@@ -19,10 +19,6 @@ export function Grid(id, options = {}) {
     };
     // @ts-ignore
     engine.injectCSS = (id, css) => skin.injectCSS(id, css);
-    // --- Structural API ---
-    // --- Tools ---
-    // @ts-ignore
-    engine.gridder = (active) => { engine.toggleGridder(active); return engine; };
     // --- Helpers ---
     // @ts-ignore
     engine.getCellId = (row, col) => `${id}-${row}-${col}`;

package/machinery/build3.js

@@ -1,12 +1,150 @@
 import { JuxCompiler } from './compiler3.js';
 import path from 'path';
+import fs from 'fs';
 
-// Resolve paths relative to CWD (user's project)
 const PROJECT_ROOT = process.cwd();
 
+// ═══════════════════════════════════════════════════════════════
+// LOAD CONFIG
+// ═══════════════════════════════════════════════════════════════
+const JUX_CONFIG_PATH = path.resolve(PROJECT_ROOT, 'juxconfig.js');
+let rawConfig = {};
+
+try {
+    rawConfig = (await import(JUX_CONFIG_PATH)).config;
+    console.log(`⚙️  Loaded config: ${JUX_CONFIG_PATH}`);
+} catch (err) {
+    console.warn(`⚠️  No juxconfig.js found, using defaults`);
+}
+
+// ═══════════════════════════════════════════════════════════════
+// EXPLODE CONFIG INTO NAMED OBJECTS
+// ═══════════════════════════════════════════════════════════════
+const directories = {
+    source: rawConfig.directories?.source || './jux',
+    distribution: rawConfig.directories?.distribution || './.jux-dist',
+    themes: rawConfig.directories?.themes || './themes',
+    layouts: rawConfig.directories?.layouts || './themes/layouts',
+    assets: rawConfig.directories?.assets || './themes/assets'
+};
+
+const defaults = {
+    httpPort: rawConfig.defaults?.httpPort || 3000,
+    wsPort: rawConfig.defaults?.wsPort || 3001,
+    autoRoute: rawConfig.defaults?.autoRoute ?? true,
+    layout: rawConfig.defaults?.layout || null,
+    theme: rawConfig.defaults?.theme || null
+};
+
+// Resolve absolute paths
+const paths = {
+    source: path.resolve(PROJECT_ROOT, directories.source),
+    distribution: path.resolve(PROJECT_ROOT, directories.distribution),
+    themes: path.resolve(PROJECT_ROOT, directories.source, directories.themes),
+    layouts: path.resolve(PROJECT_ROOT, directories.source, directories.layouts),
+    assets: path.resolve(PROJECT_ROOT, directories.source, directories.assets)
+};
+
+// ═══════════════════════════════════════════════════════════════
+// VALIDATE DIRECTORIES
+// ═══════════════════════════════════════════════════════════════
+console.log(`\n📁 Directory Check:`);
+
+const dirStatus = {};
+for (const [name, dirPath] of Object.entries(paths)) {
+    if (name === 'distribution') continue;
+
+    const exists = fs.existsSync(dirPath);
+    dirStatus[name] = exists;
+
+    const icon = exists ? '✓' : '✗';
+    const suffix = exists ? '' : ' (will be skipped)';
+    console.log(`   ${icon} ${name}: ${dirPath}${suffix}`);
+}
+
+// ═══════════════════════════════════════════════════════════════
+// RESOLVE DEFAULT LAYOUT & THEME
+// ═══════════════════════════════════════════════════════════════
+function resolveFile(filename, ...searchPaths) {
+    if (!filename) return null;
+
+    // First try the filename as-is
+    if (fs.existsSync(filename)) {
+        return path.resolve(filename);
+    }
+
+    // Try each search path
+    for (const searchPath of searchPaths) {
+        if (!searchPath || !fs.existsSync(searchPath)) continue;
+
+        const fullPath = path.resolve(searchPath, filename);
+        if (fs.existsSync(fullPath)) {
+            return fullPath;
+        }
+    }
+
+    return null;
+}
+
+console.log(`\n🎨 Defaults Resolution:`);
+
+// Resolve layout
+const layoutPath = defaults.layout ? resolveFile(
+    defaults.layout,
+    paths.layouts,
+    paths.source,
+    PROJECT_ROOT
+) : null;
+
+if (defaults.layout) {
+    if (layoutPath) {
+        console.log(`   ✓ layout: ${layoutPath}`);
+    } else {
+        console.log(`   ✗ layout: "${defaults.layout}" not found, will be skipped`);
+    }
+} else {
+    console.log(`   - layout: not configured`);
+}
+
+// Resolve theme
+const themePath = defaults.theme ? resolveFile(
+    defaults.theme,
+    paths.themes,
+    paths.source,
+    PROJECT_ROOT
+) : null;
+
+if (defaults.theme) {
+    if (themePath) {
+        console.log(`   ✓ theme: ${themePath}`);
+    } else {
+        console.log(`   ✗ theme: "${defaults.theme}" not found, will be skipped`);
+    }
+} else {
+    console.log(`   - theme: not configured`);
+}
+
+// ═══════════════════════════════════════════════════════════════
+// VALIDATE SOURCE DIRECTORY EXISTS
+// ═══════════════════════════════════════════════════════════════
+if (!dirStatus.source) {
+    console.error(`\n❌ Source directory not found: ${paths.source}`);
+    console.error(`   Create the directory or update juxconfig.js`);
+    process.exit(1);
+}
+
+// ═══════════════════════════════════════════════════════════════
+// RUN BUILD
+// ═══════════════════════════════════════════════════════════════
+console.log(`\n`);
+
 const compiler = new JuxCompiler({
-    srcDir: path.resolve(PROJECT_ROOT, 'jux'),
-    distDir: path.resolve(PROJECT_ROOT, '.jux-dist')
+    srcDir: paths.source,
+    distDir: paths.distribution,
+    layoutPath,
+    themePath,
+    defaults,
+    paths
 });
 
 compiler.build()

package/machinery/compiler3.js

@@ -13,6 +13,10 @@ export class JuxCompiler {
         this.config = config;
         this.srcDir = config.srcDir || './jux';
         this.distDir = config.distDir || './.jux-dist';
+        this.layoutPath = config.layoutPath || null;
+        this.themePath = config.themePath || null;
+        this.defaults = config.defaults || {};
+        this.paths = config.paths || {};
         this._juxscriptExports = null;
         this._juxscriptPath = null;
     }
@@ -61,7 +65,7 @@ export class JuxCompiler {
 
     scanFiles() {
         const files = fs.readdirSync(this.srcDir)
-            .filter(f => f.endsWith('.jux') || f.endsWith('.js'));
+            .filter(f => (f.endsWith('.jux') || f.endsWith('.js')) && !this.isAssetFile(f));
 
         const views = [], dataModules = [], sharedModules = [];
 
@@ -81,6 +85,11 @@ export class JuxCompiler {
         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, '')
@@ -93,6 +102,56 @@ export class JuxCompiler {
         return name.replace(/[^a-zA-Z0-9]/g, '_');
     }
 
+    /**
+     * Copy all source assets (themes, layouts, assets folders) to dist
+     */
+    copySourceAssets() {
+        const copied = { themes: 0, layouts: 0, assets: 0, other: 0 };
+
+        const copyDir = (srcDir, destDir, category) => {
+            if (!fs.existsSync(srcDir)) return 0;
+
+            let count = 0;
+            fs.mkdirSync(destDir, { recursive: true });
+
+            const entries = fs.readdirSync(srcDir, { withFileTypes: true });
+            for (const entry of entries) {
+                const srcPath = path.join(srcDir, entry.name);
+                const destPath = path.join(destDir, entry.name);
+
+                if (entry.isDirectory()) {
+                    count += copyDir(srcPath, destPath, category);
+                } else {
+                    fs.copyFileSync(srcPath, destPath);
+                    count++;
+                }
+            }
+            return count;
+        };
+
+        // Copy themes folder
+        if (this.paths.themes && fs.existsSync(this.paths.themes)) {
+            copied.themes = copyDir(this.paths.themes, path.join(this.distDir, 'themes'), 'themes');
+        }
+
+        // Copy layouts folder (if separate from themes)
+        if (this.paths.layouts && fs.existsSync(this.paths.layouts) && this.paths.layouts !== this.paths.themes) {
+            copied.layouts = copyDir(this.paths.layouts, path.join(this.distDir, 'layouts'), 'layouts');
+        }
+
+        // Copy assets folder
+        if (this.paths.assets && fs.existsSync(this.paths.assets)) {
+            copied.assets = copyDir(this.paths.assets, path.join(this.distDir, 'assets'), 'assets');
+        }
+
+        const total = copied.themes + copied.layouts + copied.assets;
+        if (total > 0) {
+            console.log(`📂 Copied source assets: ${copied.themes} themes, ${copied.layouts} layouts, ${copied.assets} assets`);
+        }
+
+        return copied;
+    }
+
     /**
      * Collect and bundle all component CSS into a single file
      */
@@ -114,15 +173,9 @@ export class JuxCompiler {
                 } else if (entry.name === 'structure.css') {
                     const componentName = relativePath || 'base';
                     const content = fs.readFileSync(fullPath, 'utf8');
-
-                    // Add comment header for each component's CSS
-                    cssContents.push(`/* ═══════════════════════════════════════════════════════════════
- * Component: ${componentName}
- * Source: ${relPath}
- * ═══════════════════════════════════════════════════════════════ */\n`);
+                    cssContents.push(`/* Component: ${componentName} */\n`);
                     cssContents.push(content);
                     cssContents.push('\n');
-
                     components.push(componentName);
                 }
             }
@@ -134,39 +187,35 @@ export class JuxCompiler {
             return { bundlePath: null, components: [] };
         }
 
-        // Create bundled CSS file
         const cssDistDir = path.join(this.distDir, 'css');
         fs.mkdirSync(cssDistDir, { recursive: true });
 
-        const bundleHeader = `/**
- * JUX Component Styles Bundle
- * Auto-generated - Do not edit directly
- * 
- * Components included:
- * ${components.map(c => `  - ${c}`).join('\n * ')}
- * 
- * Generated: ${new Date().toISOString()}
- */\n\n`;
+        const bundledCss = `/* JUX Components CSS Bundle */\n\n` + cssContents.join('\n');
+        fs.writeFileSync(path.join(cssDistDir, 'jux-components.css'), bundledCss);
 
-        const bundledCss = bundleHeader + cssContents.join('\n');
-        const bundlePath = path.join(cssDistDir, 'jux-components.css');
+        console.log(`📄 Bundled ${components.length} component CSS files`);
 
-        fs.writeFileSync(bundlePath, bundledCss);
-
-        console.log(`📄 Bundled ${components.length} CSS files → css/jux-components.css`);
-
-        return {
-            bundlePath: './css/jux-components.css',
-            components
-        };
+        return { bundlePath: './css/jux-components.css', components };
     }
 
     /**
-     * Generate single CSS link for the bundled stylesheet
+     * Generate CSS links including theme if configured
      */
     generateCssLinks(cssBundle) {
-        if (!cssBundle.bundlePath) return '';
-        return `    <link rel="stylesheet" href="${cssBundle.bundlePath}">`;
+        const links = [];
+
+        // JUX components CSS
+        if (cssBundle.bundlePath) {
+            links.push(`    <link rel="stylesheet" href="${cssBundle.bundlePath}">`);
+        }
+
+        // User theme CSS
+        if (this.themePath) {
+            const themeName = path.basename(this.themePath);
+            links.push(`    <link rel="stylesheet" href="./themes/${themeName}" id="jux-theme">`);
+        }
+
+        return links.join('\n');
     }
 
     async loadJuxscriptExports() {
@@ -178,7 +227,6 @@ export class JuxCompiler {
                 const indexContent = fs.readFileSync(juxscriptPath, 'utf8');
                 const exports = new Set();
 
-                // Parse export statements
                 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();
@@ -215,16 +263,12 @@ export class JuxCompiler {
             return issues;
         }
 
-        const juxscriptImports = new Set();
         const allImports = new Set();
 
         walk(ast, {
             ImportDeclaration(node) {
                 node.specifiers.forEach(spec => {
                     allImports.add(spec.local.name);
-                    if (node.source.value === 'juxscript') {
-                        juxscriptImports.add(spec.local.name);
-                    }
                 });
             }
         });
@@ -251,6 +295,17 @@ export class JuxCompiler {
         return issues;
     }
 
+    /**
+     * Extract layout function name from layout file
+     */
+    getLayoutFunctionName() {
+        if (!this.layoutPath || !fs.existsSync(this.layoutPath)) return null;
+
+        const content = fs.readFileSync(this.layoutPath, 'utf8');
+        const match = content.match(/export\s+function\s+(\w+)/);
+        return match ? match[1] : null;
+    }
+
     generateEntryPoint(views, dataModules, sharedModules) {
         let entry = `// Auto-generated JUX entry point\n\n`;
         const allIssues = [];
@@ -265,6 +320,16 @@ export class JuxCompiler {
             }
         });
 
+        // Check layout file for juxscript imports too
+        if (this.layoutPath && fs.existsSync(this.layoutPath)) {
+            const layoutContent = fs.readFileSync(this.layoutPath, 'utf8');
+            for (const match of layoutContent.matchAll(/import\s*\{\s*([^}]+)\s*\}\s*from\s*['"]juxscript['"]/g)) {
+                match[1].split(',').map(s => s.trim()).forEach(imp => {
+                    if (imp) juxImports.add(imp);
+                });
+            }
+        }
+
         if (juxImports.size > 0) {
             entry += `import { ${[...juxImports].sort().join(', ')} } from 'juxscript';\n\n`;
         }
@@ -284,6 +349,25 @@ export class JuxCompiler {
             entry += `\nObject.assign(window, { ${[...juxImports].join(', ')} });\n`;
         }
 
+        // Add layout function if configured
+        const layoutFnName = this.getLayoutFunctionName();
+        if (layoutFnName && this.layoutPath) {
+            const layoutContent = fs.readFileSync(this.layoutPath, 'utf8');
+            const layoutCode = this.removeImports(layoutContent);
+            entry += `\n// --- DEFAULT LAYOUT ---\n`;
+            entry += layoutCode;
+            entry += `\n`;
+
+            // Store in source snapshot
+            const layoutFile = path.basename(this.layoutPath);
+            sourceSnapshot[layoutFile] = {
+                name: 'layout',
+                file: layoutFile,
+                content: layoutContent,
+                lines: layoutContent.split('\n')
+            };
+        }
+
         entry += `\n// --- VIEW FUNCTIONS ---\n`;
 
         views.forEach(v => {
@@ -312,6 +396,7 @@ export class JuxCompiler {
 
         this._sourceSnapshot = sourceSnapshot;
         this._validationIssues = allIssues;
+        this._layoutFnName = layoutFnName;
         entry += this._generateRouter(views);
         return entry;
     }
@@ -341,6 +426,11 @@ export class JuxCompiler {
             routeMap += `  '/${v.name.toLowerCase()}': render${cap},\n`;
         });
 
+        // Initialize layout call if configured
+        const layoutInit = this._layoutFnName
+            ? `\n// Initialize default layout\nif (typeof ${this._layoutFnName} === 'function') {\n    ${this._layoutFnName}();\n}\n`
+            : '';
+
         return `
 // --- JUX SOURCE LOADER ---
 var __juxSources = null;
@@ -355,7 +445,6 @@ async function __juxLoadSources() {
     return __juxSources;
 }
 
-// Find source file from error stack
 function __juxFindSource(stack) {
     var match = stack.match(/render(\\w+)/);
     if (match) {
@@ -366,6 +455,14 @@ function __juxFindSource(stack) {
             }
         }
     }
+    // Also check for layout
+    if (stack.indexOf('Layout') > -1) {
+        for (var file in __juxSources || {}) {
+            if (file.indexOf('layout') > -1) {
+                return { file: file, source: __juxSources[file] };
+            }
+        }
+    }
     return null;
 }
 
@@ -377,39 +474,21 @@ var __juxErrorOverlay = {
             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);
+            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;
+            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;
+            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; letter-spacing: 0.5px;
-        }
-        .__jux-header h1 {
-            margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #dc2626;
-            line-height: 1.3;
-        }
+        .__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; }
@@ -418,138 +497,73 @@ var __juxErrorOverlay = {
         .__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; user-select: none;
-            border-right: 1px solid #e5e7eb; font-size: 12px;
-        }
+        .__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-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; transition: background 0.15s;
-        }
+        .__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;
-        }
+        .__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 = '';
-        var fileInfo = '';
+        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 (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 || lines[i].indexOf('throw(') > -1) {
-                        errorLineIndex = i;
-                        break;
-                    }
+                    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);
-            }
+            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>';
+                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 for this error.</p>' +
-                '<pre>' + stack + '</pre>' +
-                '</div>';
+            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>';
-        
+        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);
-        
-        // Trigger transition
-        requestAnimationFrame(function() {
-            overlay.classList.add('visible');
-        });
-        
+        requestAnimationFrame(function() { overlay.classList.add('visible'); });
         console.error(title + ':', error);
     }
 };
 
-// Global error handlers
-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);
+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}};
-
+${layoutInit}
 async function navigate(path) {
     const view = routes[path];
     if (!view) {
@@ -557,15 +571,9 @@ async function navigate(path) {
         return;
     }
     document.getElementById('app').innerHTML = '';
-    
     var overlay = document.getElementById('__jux-error-overlay');
     if (overlay) overlay.remove();
-    
-    try {
-        await view();
-    } catch (err) {
-        __juxErrorOverlay.show(err, 'Jux Render Error');
-    }
+    try { await view(); } catch (err) { __juxErrorOverlay.show(err, 'Jux Render Error'); }
 }
 
 document.addEventListener('click', e => {
@@ -600,9 +608,12 @@ navigate(location.pathname);
         fs.mkdirSync(this.distDir, { recursive: true });
 
         const { views, dataModules, sharedModules } = this.scanFiles();
-        console.log(`📁 Found ${views.length} views, ${sharedModules.length} shared, ${dataModules.length} data\n`);
+        console.log(`📁 Found ${views.length} views, ${sharedModules.length} shared, ${dataModules.length} data`);
+
+        // Copy source assets (themes, layouts, assets)
+        this.copySourceAssets();
 
-        // ✅ Changed: Now returns bundle info instead of array of files
+        // Bundle juxscript component CSS
         const cssBundle = this.copyJuxscriptCss();
 
         // Copy data/shared modules to dist
@@ -616,7 +627,6 @@ navigate(location.pathname);
         const entryPath = path.join(this.distDir, 'entry.js');
         fs.writeFileSync(entryPath, entryContent);
 
-        // Write source snapshot for dev tools
         const snapshotPath = path.join(this.distDir, '__jux_sources.json');
         fs.writeFileSync(snapshotPath, JSON.stringify(this._sourceSnapshot, null, 2));
         console.log(`📸 Source snapshot written`);
@@ -650,7 +660,7 @@ navigate(location.pathname);
             return { success: false, errors: [{ message: err.message }], warnings: [] };
         }
 
-        // Generate index.html with single CSS link
+        // Generate HTML with layout container sibling to app
         const html = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -661,12 +671,12 @@ ${this.generateCssLinks(cssBundle)}
     <script type="module" src="./bundle.js"></script>
 </head>
 <body>
+    <div id="jux-layout"></div>
     <div id="app"></div>
 </body>
 </html>`;
         fs.writeFileSync(path.join(this.distDir, 'index.html'), html);
 
-        // Cleanup temp files
         fs.unlinkSync(entryPath);
         fs.rmSync(juxDistDir, { recursive: true, force: true });
 

package/package.json

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