juxscript 1.1.156 → 1.1.158

package/machinery/compiler4.js

@@ -14,30 +14,25 @@ export class JuxCompiler {
         this.config = config;
         this.srcDir = config.srcDir || './jux';
         this.distDir = config.distDir || './.jux-dist';
-        this.publicDir = config.publicDir || './public'; // ✅ Configurable public path
+        this.publicDir = config.publicDir || './public';
         this.defaults = config.defaults || {};
         this.paths = config.paths || {};
         this._juxscriptExports = null;
         this._juxscriptPath = null;
-        this._renderFunctionCounter = 0; // ✅ Add counter for unique IDs
+        this._renderFunctionCounter = 0;
     }
 
-    /**
-     * 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)) {
@@ -45,7 +40,6 @@ export class JuxCompiler {
             return devPath;
         }
 
-        // Priority 3: Sibling in monorepo
         const monoPath = path.resolve(projectRoot, '../jux/index.js');
         if (fs.existsSync(monoPath)) {
             this._juxscriptPath = monoPath;
@@ -55,9 +49,6 @@ export class JuxCompiler {
         return null;
     }
 
-    /**
-     * ✅ Recursively scan for .jux and .js files in srcDir and subdirectories
-     */
     scanFiles() {
         const views = [], dataModules = [], sharedModules = [];
 
@@ -77,26 +68,13 @@ export class JuxCompiler {
                         const relativePath = path.relative(this.srcDir, fullPath);
                         const name = relativePath.replace(/\.[^/.]+$/, '');
 
-                        // Check if it has exports (module) or is executable code (view)
                         const hasExports = /export\s+(default|const|function|class|{)/.test(content);
 
                         if (file.includes('data')) {
-                            dataModules.push({
-                                name,
-                                file: relativePath,
-                                content,
-                                originalContent: content
-                            });
+                            dataModules.push({ name, file: relativePath, content, originalContent: content });
                         } else if (hasExports) {
-                            // ✅ Any file with exports is a module (not just .js files)
-                            sharedModules.push({
-                                name,
-                                file: relativePath,
-                                content,
-                                originalContent: content
-                            });
+                            sharedModules.push({ name, file: relativePath, content, originalContent: content });
                         } else {
-                            // .jux files without exports are views - use AST to extract imports
                             let wrappedContent;
                             try {
                                 const ast = acorn.parse(content, {
@@ -108,7 +86,6 @@ export class JuxCompiler {
                                 const imports = [];
                                 let lastImportEnd = 0;
 
-                                // Collect imports and track where they end
                                 for (const node of ast.body) {
                                     if (node.type === 'ImportDeclaration') {
                                         imports.push(content.substring(node.start, node.end));
@@ -116,10 +93,8 @@ export class JuxCompiler {
                                     }
                                 }
 
-                                // Get the rest of the code (everything after imports)
                                 const restOfCode = content.substring(lastImportEnd).trim();
 
-                                // Build wrapped content
                                 wrappedContent = [
                                     ...imports,
                                     '',
@@ -129,17 +104,11 @@ export class JuxCompiler {
                                 ].join('\n');
 
                             } catch (parseError) {
-                                // Fallback: if parsing fails, just wrap the whole thing
                                 console.warn(`⚠️  Could not parse ${relativePath}, using basic wrapping`);
                                 wrappedContent = `export default async function() {\n${content}\n}`;
                             }
 
-                            views.push({
-                                name,
-                                file: relativePath,
-                                content: wrappedContent,
-                                originalContent: content
-                            });
+                            views.push({ name, file: relativePath, content: wrappedContent, originalContent: content });
                         }
                     }
                 }
@@ -222,7 +191,6 @@ export class JuxCompiler {
             }
         });
 
-        // Default known facades/components if load fails
         const knownComponents = this._juxscriptExports || ['element', 'input', 'buttonGroup'];
 
         walk(ast, {
@@ -245,15 +213,11 @@ export class JuxCompiler {
         return issues;
     }
 
-    /**
-     * Generate entry point - inline EVERYTHING
-     */
     generateEntryPoint(views, dataModules, sharedModules) {
         let entry = `// Auto-generated JUX entry point\n\n`;
         const sourceSnapshot = {};
 
-        // ✅ Collect ALL unique imports from ALL files (views + shared + data)
-        const allImports = new Map(); // Map<resolvedPath, Set<importedNames>>
+        const allImports = new Map();
         const allFiles = [...views, ...sharedModules, ...dataModules];
 
         allFiles.forEach(file => {
@@ -267,28 +231,22 @@ export class JuxCompiler {
                     locations: true
                 });
 
-                // Extract import statements
                 ast.body.filter(node => node.type === 'ImportDeclaration').forEach(node => {
                     const importPath = node.source.value;
 
-                    // ✅ Resolve the import path
                     let resolvedImportPath;
                     if (importPath.startsWith('.')) {
-                        // Relative import
                         const absolutePath = path.resolve(path.dirname(filePath), importPath);
                         resolvedImportPath = path.relative(this.srcDir, absolutePath);
                         resolvedImportPath = resolvedImportPath.replace(/\\/g, '/');
                     } else {
-                        // Module import like 'juxscript', 'axios'
                         resolvedImportPath = importPath;
                     }
 
-                    // Initialize Set for this path
                     if (!allImports.has(resolvedImportPath)) {
                         allImports.set(resolvedImportPath, new Set());
                     }
 
-                    // Add imported names
                     node.specifiers.forEach(spec => {
                         if (spec.type === 'ImportSpecifier') {
                             allImports.get(resolvedImportPath).add(spec.imported.name);
@@ -302,16 +260,13 @@ export class JuxCompiler {
             }
         });
 
-        // ✅ Filter out imports that point to our own files (these will be inlined)
         const externalImports = new Map();
         allImports.forEach((names, resolvedPath) => {
-            // Only include if it's NOT a file in our src directory
             if (!resolvedPath.endsWith('.js') && !resolvedPath.endsWith('.jux')) {
                 externalImports.set(resolvedPath, names);
             }
         });
 
-        // ✅ Write external imports only (juxscript, axios, etc.)
         externalImports.forEach((names, importPath) => {
             const namedImports = Array.from(names).filter(n => !n.startsWith('default:'));
             const defaultImports = Array.from(names).filter(n => n.startsWith('default:')).map(n => n.split(':')[1]);
@@ -329,7 +284,6 @@ export class JuxCompiler {
 
         entry += '\n';
 
-        // ✅ Inline shared modules as constants/functions
         entry += `// --- SHARED MODULES (INLINED) ---\n`;
         sharedModules.forEach(m => {
             sourceSnapshot[m.file] = {
@@ -339,14 +293,12 @@ export class JuxCompiler {
                 lines: m.content.split('\n')
             };
 
-            // Remove imports and exports, just keep the code
             let code = m.originalContent || m.content;
             code = this._stripImportsAndExports(code);
 
             entry += `\n// From: ${m.file}\n${code}\n`;
         });
 
-        // ✅ Inline data modules
         entry += `\n// --- DATA MODULES (INLINED) ---\n`;
         dataModules.forEach(m => {
             sourceSnapshot[m.file] = {
@@ -362,32 +314,26 @@ export class JuxCompiler {
             entry += `\n// From: ${m.file}\n${code}\n`;
         });
 
-        // ✅ Expose everything to window (since we removed exports)
-        //entry += `\n// Expose to window\n`;
-        //entry += `Object.assign(window, { jux, state, registry, stateHistory, Link, link, navLink, externalLink, layer, overlay, VStack, HStack, ZStack, vstack, hstack, zstack });\n`;
-
         entry += `\n// --- VIEW FUNCTIONS ---\n`;
 
         const routeToFunctionMap = new Map();
 
-        // ✅ Process views: strip imports, inline as functions
         views.forEach((v, index) => {
             const functionName = `renderJux${index}`;
 
+            let codeBody = v.originalContent || v.content;
+            const originalLines = codeBody.split('\n');
+            codeBody = this._stripImportsAndExports(codeBody);
+
             sourceSnapshot[v.file] = {
                 name: v.name,
                 file: v.file,
-                content: v.originalContent || v.content,
-                lines: (v.originalContent || v.content).split('\n'),
+                lines: originalLines,
                 functionName
             };
 
-            let codeBody = v.originalContent || v.content;
-            codeBody = this._stripImportsAndExports(codeBody);
-
             entry += `\nasync function ${functionName}() {\n${codeBody}\n}\n`;
 
-            // Generate route path
             const routePath = v.name
                 .toLowerCase()
                 .replace(/\\/g, '/')
@@ -404,18 +350,17 @@ export class JuxCompiler {
             routeToFunctionMap.set(`/${routePath}`, functionName);
         });
 
-        // ✅ Generate router
         entry += this._generateRouter(routeToFunctionMap);
 
         this._sourceSnapshot = sourceSnapshot;
         this._validationIssues = [];
 
+        // Embed source snapshot for runtime error overlay
+        entry += `\nwindow.__juxSources = ${JSON.stringify(sourceSnapshot)};\n`;
+
         return entry;
     }
 
-    /**
-     * Strip imports and exports from code, keeping the actual logic
-     */
     _stripImportsAndExports(code) {
         try {
             const ast = acorn.parse(code, {
@@ -424,7 +369,6 @@ export class JuxCompiler {
                 locations: true
             });
 
-            // Remove imports and exports
             const nodesToRemove = ast.body.filter(node =>
                 node.type === 'ImportDeclaration' ||
                 node.type === 'ExportNamedDeclaration' ||
@@ -436,7 +380,6 @@ export class JuxCompiler {
                 return code.trim();
             }
 
-            // Remove nodes in reverse order
             let result = code;
             let offset = 0;
 
@@ -444,21 +387,17 @@ export class JuxCompiler {
                 let start = node.start - offset;
                 let end = node.end - offset;
 
-                // If it's an export with a declaration, keep the declaration
                 if (node.type === 'ExportNamedDeclaration' && node.declaration) {
-                    // Keep the declaration part, remove just "export"
                     const declarationStart = node.declaration.start - offset;
                     result = result.substring(0, start) + result.substring(declarationStart);
                     offset += (declarationStart - start);
                 } else if (node.type === 'ExportDefaultDeclaration') {
-                    // Remove "export default", keep the expression
                     const exportKeyword = result.substring(start, end).match(/export\s+default\s+/);
                     if (exportKeyword) {
                         result = result.substring(0, start) + result.substring(start + exportKeyword[0].length);
                         offset += exportKeyword[0].length;
                     }
                 } else {
-                    // Remove the entire node
                     result = result.substring(0, start) + result.substring(end);
                     offset += (end - start);
                 }
@@ -488,17 +427,11 @@ export class JuxCompiler {
         }
         fs.mkdirSync(this.distDir, { recursive: true });
 
-        // ✅ Copy public folder if exists
         this.copyPublicFolder();
 
         const { views, dataModules, sharedModules } = this.scanFiles();
         console.log(`📁 Found ${views.length} views, ${sharedModules.length} shared, ${dataModules.length} data`);
 
-        // ❌ REMOVE: No need to copy files to dist - everything goes in bundle
-        // const juxDistDir = path.join(this.distDir, 'jux');
-        // fs.mkdirSync(juxDistDir, { recursive: true });
-        // ... copying logic removed ...
-
         const entryContent = this.generateEntryPoint(views, dataModules, sharedModules);
 
         const entryPath = path.join(this.distDir, 'entry.js');
@@ -508,12 +441,6 @@ export class JuxCompiler {
         fs.writeFileSync(snapshotPath, JSON.stringify(this._sourceSnapshot, null, 2));
         console.log(`📸 Source snapshot written`);
 
-        // ✅ Also write to dist root so the error overlay can fetch it via /__jux_sources.json
-        const distSnapshotPath = path.join(this.config.distDir, '__jux_sources.json');
-        if (distSnapshotPath !== snapshotPath) {
-            fs.writeFileSync(distSnapshotPath, JSON.stringify(this._sourceSnapshot, null, 2));
-        }
-
         const validation = this.reportValidationIssues();
         if (!validation.isValid) {
             console.log('🛑 BUILD FAILED\n');
@@ -540,12 +467,10 @@ export class JuxCompiler {
                 plugins: [{
                     name: 'juxscript-resolver',
                     setup: (build) => {
-                        // Resolve juxscript
                         build.onResolve({ filter: /^juxscript$/ }, () => ({
                             path: juxscriptPath
                         }));
 
-                        // ✅ Force axios to resolve from project's node_modules
                         build.onResolve({ filter: /^axios$/ }, () => {
                             const projectRoot = process.cwd();
                             const axiosPath = path.resolve(projectRoot, 'node_modules/axios/dist/esm/axios.js');
@@ -559,30 +484,22 @@ export class JuxCompiler {
                             return null;
                         });
 
-                        // ✅ Resolve .jux file imports - with detailed logging
                         build.onResolve({ filter: /\.jux$/ }, (args) => {
                             console.log(`🔍 Resolving: ${args.path} from ${args.importer}`);
 
-                            // Skip if already resolved
                             if (path.isAbsolute(args.path)) {
                                 return { path: args.path };
                             }
 
-                            // Handle relative imports
                             if (args.path.startsWith('.')) {
                                 const importer = args.importer || entryPath;
                                 const importerDir = path.dirname(importer);
                                 const resolvedPath = path.resolve(importerDir, args.path);
 
-                                console.log(`   Importer dir: ${importerDir}`);
-                                console.log(`   Resolved to: ${resolvedPath}`);
-                                console.log(`   Exists: ${fs.existsSync(resolvedPath)}`);
-
                                 if (fs.existsSync(resolvedPath)) {
                                     return { path: resolvedPath };
                                 } else {
                                     console.error(`❌ Could not resolve ${args.path} from ${importer}`);
-                                    console.error(`   Tried: ${resolvedPath}`);
                                 }
                             }
 
@@ -625,8 +542,7 @@ export class JuxCompiler {
     <title>JUX Application</title>
     ${generateErrorCollector({
             enabled: process.env.NODE_ENV !== 'production',
-            maxErrors: 50,
-            position: 'bottom-right'
+            maxErrors: 50
         })}
     <script type="module" src="/bundle.js"></script>
 </head>
@@ -645,9 +561,6 @@ export class JuxCompiler {
         return { success: true, errors: [], warnings: validation.warnings };
     }
 
-    /**
-     * Generate router code
-     */
     _generateRouter(routeToFunctionMap) {
         let router = `\n// --- ROUTER ---\n`;
         router += `const routes = {\n`;
@@ -661,14 +574,12 @@ export class JuxCompiler {
         router += `function route(path) {
     const renderFn = routes[path] || routes['/'];
     if (renderFn) {
-        // Clear main content area
         const appMain = document.getElementById('appmain-content');
         if (appMain) appMain.innerHTML = '';
         
         const app = document.getElementById('app');
         if (app) app.innerHTML = '';
         
-        // Call render function
         if (typeof renderFn === 'function') {
             renderFn();
         }
@@ -678,15 +589,12 @@ export class JuxCompiler {
     }
 }
 
-// Initial route
 window.addEventListener('DOMContentLoaded', () => {
     route(window.location.pathname);
 });
 
-// Handle navigation
 window.addEventListener('popstate', () => route(window.location.pathname));
 
-// Intercept link clicks for SPA navigation
 document.addEventListener('click', (e) => {
     const link = e.target.closest('a[href]');
     if (link) {
@@ -699,7 +607,6 @@ document.addEventListener('click', (e) => {
     }
 });
 
-// Expose router for manual navigation
 window.navigateTo = (path) => {
     window.history.pushState({}, '', path);
     route(path);
@@ -709,14 +616,10 @@ window.navigateTo = (path) => {
         return router;
     }
 
-    /**
-     * Report validation issues
-     */
     reportValidationIssues() {
         const errors = [];
         const warnings = [];
 
-        // Check if there are any validation issues collected
         if (this._validationIssues && this._validationIssues.length > 0) {
             this._validationIssues.forEach(issue => {
                 if (issue.type === 'error') {
@@ -727,7 +630,6 @@ window.navigateTo = (path) => {
             });
         }
 
-        // Log warnings
         if (warnings.length > 0) {
             console.log('\n⚠️  Warnings:\n');
             warnings.forEach(w => {
@@ -735,7 +637,6 @@ window.navigateTo = (path) => {
             });
         }
 
-        // Log errors
         if (errors.length > 0) {
             console.log('\n❌ Errors:\n');
             errors.forEach(e => {
@@ -743,24 +644,16 @@ window.navigateTo = (path) => {
             });
         }
 
-        return {
-            isValid: errors.length === 0,
-            errors,
-            warnings
-        };
+        return { isValid: errors.length === 0, errors, warnings };
     }
 
-    /**
-     * Copy public folder contents to dist
-     */
     copyPublicFolder() {
-        // ✅ Use configured public path or resolve from paths object
         const publicSrc = this.paths.public
             ? this.paths.public
             : path.resolve(process.cwd(), this.publicDir);
 
         if (!fs.existsSync(publicSrc)) {
-            return; // No public folder, skip
+            return;
         }
 
         console.log('📦 Copying public assets...');
@@ -773,30 +666,23 @@ window.navigateTo = (path) => {
         }
     }
 
-    /**
-     * Recursively copy directory contents
-     */
     _copyDirRecursive(src, dest, depth = 0) {
         const entries = fs.readdirSync(src, { withFileTypes: true });
 
         entries.forEach(entry => {
-            // Skip hidden files and directories
             if (entry.name.startsWith('.')) return;
 
             const srcPath = path.join(src, entry.name);
             const destPath = path.join(dest, entry.name);
 
             if (entry.isDirectory()) {
-                // Create directory and recurse
                 if (!fs.existsSync(destPath)) {
                     fs.mkdirSync(destPath, { recursive: true });
                 }
                 this._copyDirRecursive(srcPath, destPath, depth + 1);
             } else {
-                // Copy file
                 fs.copyFileSync(srcPath, destPath);
 
-                // Log files at root level only
                 if (depth === 0) {
                     const ext = path.extname(entry.name);
                     const icon = this._getFileIcon(ext);
@@ -806,41 +692,22 @@ window.navigateTo = (path) => {
         });
     }
 
-    /**
-     * Get icon for file type
-     */
     _getFileIcon(ext) {
         const icons = {
-            '.html': '📄',
-            '.css': '🎨',
-            '.js': '📜',
-            '.json': '📋',
-            '.png': '🖼️',
-            '.jpg': '🖼️',
-            '.jpeg': '🖼️',
-            '.gif': '🖼️',
-            '.svg': '🎨',
-            '.ico': '🔖',
-            '.woff': '🔤',
-            '.woff2': '🔤',
-            '.ttf': '🔤',
-            '.eot': '🔤'
+            '.html': '📄', '.css': '🎨', '.js': '📜', '.json': '📋',
+            '.png': '🖼️', '.jpg': '🖼️', '.jpeg': '🖼️', '.gif': '🖼️',
+            '.svg': '🎨', '.ico': '🔖',
+            '.woff': '🔤', '.woff2': '🔤', '.ttf': '🔤', '.eot': '🔤'
         };
         return icons[ext.toLowerCase()] || '📦';
     }
 
-    /**
-     * ✅ Generate valid JavaScript identifier from file path
-     * Example: abc/aaa.jux -> abc_aaa
-     * Example: menus/main.jux -> menus_main
-     * Example: pages/blog/post.jux -> pages_blog_post
-     */
     _generateNameFromPath(filepath) {
         return filepath
-            .replace(/\.jux$/, '')              // Remove .jux extension
-            .replace(/[\/\\]/g, '_')            // Replace / and \ with _
-            .replace(/[^a-zA-Z0-9_]/g, '_')     // Replace any other invalid chars with _
-            .replace(/_+/g, '_')                // Collapse multiple consecutive underscores
-            .replace(/^_|_$/g, '');             // Remove leading/trailing underscores
+            .replace(/\.jux$/, '')
+            .replace(/[\/\\]/g, '_')
+            .replace(/[^a-zA-Z0-9_]/g, '_')
+            .replace(/_+/g, '_')
+            .replace(/^_|_$/g, '');
     }
-}
+}

package/machinery/errors.js

@@ -1,378 +1,109 @@
 /**
- * Generates an injectable client-side error collector script.
- * Full-screen overlay similar to Vite's error screen.
- * Resolves bundle line numbers back to original .jux source using __jux_sources.json.
- *
- * @param {Object} options
- * @param {boolean} [options.enabled=true]
- * @param {number} [options.maxErrors=50]
- * @returns {string} Inline script to inject into HTML
+ * Injectable client-side error overlay.
+ * Matches renderJuxN in stack traces to show original .jux source.
  */
 export function generateErrorCollector(options = {}) {
-    const {
-        enabled = true,
-        maxErrors = 50
-    } = options;
-
+    const { enabled = true, maxErrors = 50 } = options;
     if (!enabled) return '';
 
     return `
 <script>
 (function() {
     var __errors = [];
-    var __maxErrors = ${maxErrors};
     var __overlay = null;
     var __list = null;
-    var __sources = null;
-    var __sourcesFetched = false;
-    var __bundleLines = null;
-
-    // Fetch source map + bundle on first error
-    function loadSources(cb) {
-        if (__sourcesFetched) return cb();
-        __sourcesFetched = true;
-
-        var done = 0;
-        function check() { if (++done >= 2) cb(); }
-
-        // Fetch source snapshot
-        var xhr1 = new XMLHttpRequest();
-        xhr1.open('GET', '/__jux_sources.json', true);
-        xhr1.onload = function() {
-            try { __sources = JSON.parse(xhr1.responseText); } catch(e) {}
-            check();
-        };
-        xhr1.onerror = check;
-        xhr1.send();
-
-        // Fetch bundle to split into lines
-        var xhr2 = new XMLHttpRequest();
-        xhr2.open('GET', '/bundle.js', true);
-        xhr2.onload = function() {
-            try { __bundleLines = xhr2.responseText.split('\\n'); } catch(e) {}
-            check();
-        };
-        xhr2.onerror = check;
-        xhr2.send();
-    }
-
-    // Given a bundle line number, find which view function it belongs to
-    // and map back to the original .jux source line
-    function resolveSourceLocation(bundleLine) {
-        if (!__sources || !__bundleLines || !bundleLine) return null;
 
-        // Find the renderJuxN function that contains this line
-        // by scanning backwards from bundleLine for "async function renderJux"
-        var funcName = null;
-        var funcStartLine = 0;
-        for (var i = bundleLine - 1; i >= 0; i--) {
-            var line = __bundleLines[i];
-            if (!line) continue;
-            var match = line.match(/async\\s+function\\s+(renderJux\\d+)/);
-            if (match) {
-                funcName = match[1];
-                funcStartLine = i + 1; // 1-based
-                break;
-            }
+    function findSource(stack) {
+        var sources = window.__juxSources;
+        if (!sources || !stack) return null;
+        var m = stack.match(/renderJux\\d+/);
+        if (!m) return null;
+        for (var key in sources) {
+            if (sources[key].functionName === m[0]) return sources[key];
         }
+        return null;
+    }
 
-        if (!funcName) return null;
-
-        // Find the source entry that maps to this function
-        var sourceEntry = null;
-        for (var key in __sources) {
-            if (__sources[key].functionName === funcName) {
-                sourceEntry = __sources[key];
-                break;
-            }
-        }
-
-        if (!sourceEntry) return null;
-
-        // Calculate approximate original line
-        // bundleLine is inside the function body, funcStartLine is the function declaration
-        // +1 because function body starts after the declaration line
-        var offsetInFunc = bundleLine - funcStartLine - 1;
-        var originalLines = sourceEntry.lines || [];
-        var approxLine = Math.max(0, Math.min(offsetInFunc, originalLines.length - 1));
-
-        return {
-            file: sourceEntry.file,
-            name: sourceEntry.name,
-            functionName: funcName,
-            originalLine: approxLine + 1,
-            originalCode: originalLines[approxLine] || '',
-            // Provide surrounding context (3 lines before/after)
-            context: originalLines.slice(
-                Math.max(0, approxLine - 3),
-                Math.min(originalLines.length, approxLine + 4)
-            ),
-            contextStartLine: Math.max(0, approxLine - 3) + 1,
-            highlightLine: approxLine + 1
-        };
+    function escapeHtml(s) {
+        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
     }
 
-    // Parse stack trace and extract bundle line numbers
-    function parseStack(stack) {
-        if (!stack) return [];
-        var frames = [];
-        var lines = stack.split('\\n');
+    function renderSource(src) {
+        if (!src) return '';
+        var lines = src.lines || [];
+        var html = '<div style="margin-top:8px;padding:8px;background:#111;border:1px solid #333;border-radius:4px;">';
+        html += '<div style="color:#ff5555;font-size:12px;margin-bottom:6px;font-weight:bold;">' + escapeHtml(src.file) + '</div>';
         for (var i = 0; i < lines.length; i++) {
-            // Match patterns like "at funcName (url:line:col)" or "at url:line:col"
-            var m = lines[i].match(/(?:at\\s+(.+?)\\s+\\()?(?:https?:\\/\\/[^:]+):([\\d]+):([\\d]+)\\)?/);
-            if (m) {
-                frames.push({
-                    raw: lines[i].trim(),
-                    func: m[1] || '(anonymous)',
-                    line: parseInt(m[2], 10),
-                    col: parseInt(m[3], 10)
-                });
-            }
+            html += '<div style="padding:1px 8px;white-space:pre;">' +
+                '<span style="color:#555;display:inline-block;width:32px;text-align:right;margin-right:12px;user-select:none;">' + (i+1) + '</span>' +
+                '<span style="color:#ccc;">' + escapeHtml(lines[i]) + '</span></div>';
         }
-        return frames;
+        html += '</div>';
+        return html;
     }
 
     function createOverlay() {
         __overlay = document.createElement('div');
-        __overlay.id = '__jux-error-overlay';
-        __overlay.setAttribute('style', [
-            'position:fixed',
-            'top:0',
-            'left:0',
-            'width:100vw',
-            'height:100vh',
-            'z-index:99999',
-            'background:rgba(0,0,0,0.85)',
-            'color:#f8f8f8',
-            'font-family:monospace',
-            'font-size:14px',
-            'overflow-y:auto',
-            'padding:0',
-            'margin:0',
-            'box-sizing:border-box'
-        ].join(';'));
-
-        var container = document.createElement('div');
-        container.setAttribute('style', [
-            'max-width:960px',
-            'margin:40px auto',
-            'padding:24px 32px',
-            'border:2px solid #ff5555',
-            'border-radius:8px',
-            'background:#1a1a1a'
-        ].join(';'));
-
-        var header = document.createElement('div');
-        header.setAttribute('style', [
-            'display:flex',
-            'justify-content:space-between',
-            'align-items:center',
-            'margin-bottom:16px',
-            'padding-bottom:12px',
-            'border-bottom:1px solid #333'
-        ].join(';'));
-
-        var title = document.createElement('div');
-        title.setAttribute('style', 'color:#ff5555;font-size:16px;font-weight:bold;');
-        title.textContent = 'Runtime Error';
-        header.appendChild(title);
-
-        var actions = document.createElement('div');
-        actions.setAttribute('style', 'display:flex;gap:8px;');
-
-        var clearBtn = document.createElement('button');
-        clearBtn.textContent = 'Clear';
-        clearBtn.setAttribute('style', [
-            'background:transparent',
-            'border:1px solid #555',
-            'color:#aaa',
-            'padding:4px 12px',
-            'border-radius:4px',
-            'cursor:pointer',
-            'font-family:monospace',
-            'font-size:12px'
-        ].join(';'));
-        clearBtn.addEventListener('click', clearErrors);
-
-        var closeBtn = document.createElement('button');
-        closeBtn.textContent = 'Close';
-        closeBtn.setAttribute('style', [
-            'background:transparent',
-            'border:1px solid #555',
-            'color:#aaa',
-            'padding:4px 12px',
-            'border-radius:4px',
-            'cursor:pointer',
-            'font-family:monospace',
-            'font-size:12px'
-        ].join(';'));
-        closeBtn.addEventListener('click', function() {
-            __overlay.style.display = 'none';
-        });
-
-        actions.appendChild(clearBtn);
-        actions.appendChild(closeBtn);
-        header.appendChild(actions);
-        container.appendChild(header);
-
+        __overlay.setAttribute('style','position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;background:rgba(0,0,0,0.85);color:#f8f8f8;font-family:monospace;font-size:14px;overflow-y:auto;');
+        var c = document.createElement('div');
+        c.setAttribute('style','max-width:960px;margin:40px auto;padding:24px 32px;border:2px solid #ff5555;border-radius:8px;background:#1a1a1a;');
+        var h = document.createElement('div');
+        h.setAttribute('style','display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #333;');
+        var t = document.createElement('div');
+        t.setAttribute('style','color:#ff5555;font-size:16px;font-weight:bold;');
+        t.textContent = 'Runtime Error';
+        var btn = document.createElement('button');
+        btn.textContent = 'Close';
+        btn.setAttribute('style','background:transparent;border:1px solid #555;color:#aaa;padding:4px 12px;border-radius:4px;cursor:pointer;font-family:monospace;font-size:12px;');
+        btn.addEventListener('click', function() { __overlay.style.display = 'none'; });
+        h.appendChild(t); h.appendChild(btn); c.appendChild(h);
         __list = document.createElement('div');
-        container.appendChild(__list);
-
-        __overlay.appendChild(container);
+        c.appendChild(__list); __overlay.appendChild(c);
         document.body.appendChild(__overlay);
     }
 
-    function clearErrors() {
-        __errors = [];
-        if (__list) __list.innerHTML = '';
-        if (__overlay) __overlay.style.display = 'none';
-    }
-
-    function renderSourceContext(resolved) {
-        if (!resolved) return '';
-
-        var lines = resolved.context || [];
-        var startLine = resolved.contextStartLine || 1;
-        var highlight = resolved.highlightLine || -1;
-
-        var html = '<div style="margin-top:8px;padding:8px;background:#111;border:1px solid #333;border-radius:4px;">';
-        html += '<div style="color:#ff5555;font-size:12px;margin-bottom:6px;font-weight:bold;">' +
-            escapeHtml(resolved.file) + ':' + resolved.originalLine +
-            '</div>';
-
-        for (var i = 0; i < lines.length; i++) {
-            var lineNum = startLine + i;
-            var isHighlight = lineNum === highlight;
-            var bg = isHighlight ? 'background:#3a1a1a;' : '';
-            var color = isHighlight ? 'color:#ff8888;' : 'color:#888;';
-            var numColor = isHighlight ? 'color:#ff5555;' : 'color:#555;';
-            var marker = isHighlight ? '>' : ' ';
-
-            html += '<div style="' + bg + 'padding:1px 8px;white-space:pre;">' +
-                '<span style="' + numColor + 'display:inline-block;width:40px;text-align:right;margin-right:12px;user-select:none;">' +
-                    marker + ' ' + lineNum +
-                '</span>' +
-                '<span style="' + color + '">' + escapeHtml(lines[i]) + '</span>' +
-            '</div>';
-        }
-
-        html += '</div>';
-        return html;
-    }
-
-    function addError(type, message, source, line, col, stack) {
-        if (__errors.length >= __maxErrors) __errors.shift();
-
-        var entry = {
-            type: type,
-            message: String(message || ''),
-            source: source || '',
-            line: line || 0,
-            col: col || 0,
-            stack: stack || '',
-            time: new Date().toLocaleTimeString()
-        };
-        __errors.push(entry);
-
+    function addError(type, message, stack) {
+        if (__errors.length >= ${maxErrors}) __errors.shift();
+        __errors.push({ type: type, message: message, stack: stack });
         if (!__overlay) createOverlay();
         __overlay.style.display = 'block';
 
         var item = document.createElement('div');
-        item.setAttribute('style', [
-            'padding:12px 16px',
-            'margin-bottom:8px',
-            'background:#222',
-            'border-left:3px solid #ff5555',
-            'border-radius:4px'
-        ].join(';'));
+        item.setAttribute('style','padding:12px 16px;margin-bottom:8px;background:#222;border-left:3px solid #ff5555;border-radius:4px;');
 
-        var typeLabel = type === 'error' ? 'Error' : type === 'rejection' ? 'Unhandled Rejection' : 'console.error';
+        var label = type === 'error' ? 'Error' : type === 'rejection' ? 'Unhandled Rejection' : 'console.error';
+        item.innerHTML = '<div style="color:#888;font-size:12px;margin-bottom:4px;">' + label + '</div>' +
+            '<div style="color:#ff8888;font-size:14px;white-space:pre-wrap;word-break:break-word;font-weight:bold;">' + escapeHtml(message) + '</div>';
 
-        item.innerHTML =
-            '<div style="color:#888;font-size:12px;margin-bottom:4px;">' +
-                typeLabel +
-                '<span style="float:right;">' + entry.time + '</span>' +
-            '</div>' +
-            '<div style="color:#ff8888;font-size:14px;white-space:pre-wrap;word-break:break-word;font-weight:bold;">' +
-                escapeHtml(entry.message) +
-            '</div>';
+        var src = findSource(stack);
+        if (src) item.innerHTML += renderSource(src);
 
+        if (stack) {
+            var d = document.createElement('details');
+            d.setAttribute('style','margin-top:8px;');
+            d.innerHTML = '<summary style="cursor:pointer;color:#555;font-size:12px;">Stack trace</summary>' +
+                '<pre style="margin:4px 0 0;padding:8px;font-size:12px;color:#666;white-space:pre-wrap;background:#111;border:1px solid #333;border-radius:4px;max-height:200px;overflow-y:auto;">' + escapeHtml(stack) + '</pre>';
+            item.appendChild(d);
+        }
         __list.appendChild(item);
-
-        // Resolve source location asynchronously
-        loadSources(function() {
-            var frames = parseStack(entry.stack);
-            var resolved = null;
-
-            // Try each frame until we find one that maps to a .jux source
-            for (var i = 0; i < frames.length; i++) {
-                var r = resolveSourceLocation(frames[i].line);
-                if (r) {
-                    resolved = r;
-                    break;
-                }
-            }
-
-            // Also try the direct line/col from the error itself
-            if (!resolved && entry.line) {
-                resolved = resolveSourceLocation(entry.line);
-            }
-
-            if (resolved) {
-                // Add source context block
-                var sourceBlock = document.createElement('div');
-                sourceBlock.innerHTML = renderSourceContext(resolved);
-                item.appendChild(sourceBlock);
-            }
-
-            // Add raw stack (collapsed) if present
-            if (entry.stack) {
-                var stackBlock = document.createElement('details');
-                stackBlock.setAttribute('style', 'margin-top:8px;');
-                stackBlock.innerHTML =
-                    '<summary style="cursor:pointer;color:#555;font-size:12px;user-select:none;">Raw stack trace</summary>' +
-                    '<pre style="margin:4px 0 0;padding:8px;font-size:12px;color:#666;' +
-                    'white-space:pre-wrap;background:#111;border-radius:4px;' +
-                    'border:1px solid #333;max-height:200px;overflow-y:auto;">' +
-                        escapeHtml(entry.stack) +
-                    '</pre>';
-                item.appendChild(stackBlock);
-            }
-        });
     }
 
-    function escapeHtml(str) {
-        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-    }
-
-    // --- Hooks ---
-
-    window.onerror = function(msg, source, line, col, err) {
-        addError('error', msg, source, line, col, err && err.stack ? err.stack : '');
+    window.onerror = function(msg, src, line, col, err) {
+        addError('error', msg, err && err.stack ? err.stack : '');
     };
-
     window.addEventListener('unhandledrejection', function(e) {
-        var reason = e.reason;
-        var msg = reason instanceof Error ? reason.message : String(reason);
-        var stack = reason instanceof Error ? reason.stack : '';
-        addError('rejection', msg, '', 0, 0, stack);
+        var r = e.reason;
+        addError('rejection', r instanceof Error ? r.message : String(r), r instanceof Error ? r.stack : '');
     });
-
-    var _origConsoleError = console.error;
+    var _ce = console.error;
     console.error = function() {
-        var args = Array.prototype.slice.call(arguments);
-        var msg = args.map(function(a) {
-            return typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a);
+        var msg = Array.prototype.slice.call(arguments).map(function(a) {
+            return typeof a === 'object' ? JSON.stringify(a) : String(a);
         }).join(' ');
-        addError('console', msg);
-        _origConsoleError.apply(console, arguments);
-    };
-
-    window.__juxErrors = {
-        list: function() { return __errors.slice(); },
-        clear: clearErrors,
-        count: function() { return __errors.length; }
+        addError('console', msg, '');
+        _ce.apply(console, arguments);
     };
+    window.__juxErrors = { list: function() { return __errors.slice(); }, count: function() { return __errors.length; } };
 })();
 </script>`;
 }

package/package.json

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