juxscript 1.0.89 → 1.0.90

package/machinery/compiler.js

@@ -1,706 +0,0 @@
-import fs from 'fs';
-import path, { parse } from 'path';
-import esbuild from 'esbuild';
-import * as acorn from 'acorn';
-
-/**
- * Copy and build the JUX library from TypeScript to JavaScript
- */
-export async function copyLibToOutput(projectRoot, distDir) {
-  const libSrc = path.resolve(projectRoot, '../lib');
-  if (!fs.existsSync(libSrc)) {
-    throw new Error(`lib/ directory not found at ${libSrc}`);
-  }
-  const libDest = path.join(distDir, 'lib');
-
-  if (fs.existsSync(libDest)) {
-    fs.rmSync(libDest, { recursive: true });
-  }
-  fs.mkdirSync(libDest, { recursive: true });
-
-  const tsFiles = findFiles(libSrc, '.ts');
-  if (tsFiles.length === 0) return;
-
-  try {
-    await esbuild.build({
-      entryPoints: tsFiles,
-      bundle: false,
-      format: 'esm',
-      outdir: libDest,
-      outbase: libSrc,
-      platform: 'browser',
-      target: 'es2020',
-      loader: { '.ts': 'ts' },
-      logLevel: 'error'
-    });
-    copyNonTsFiles(libSrc, libDest);
-  } catch (err) {
-    console.error('❌ Failed to build TypeScript:', err.message);
-    throw err;
-  }
-}
-
-/**
- * Copy project assets (CSS, JS, images) from jux/ to dist/
- */
-export async function copyProjectAssets(projectRoot, distDir) {
-  const allFiles = [];
-  findProjectFiles(projectRoot, ['.css', '.js'], allFiles, projectRoot);
-
-  for (const srcPath of allFiles) {
-    const relativePath = path.relative(projectRoot, srcPath);
-    const destPath = path.join(distDir, relativePath);
-    const destDir = path.dirname(destPath);
-    if (!fs.existsSync(destDir)) fs.mkdirSync(destDir, { recursive: true });
-    fs.copyFileSync(srcPath, destPath);
-  }
-}
-
-/**
- * Transpile TypeScript files from jux/ to jux-dist/
- */
-export async function transpileProjectTypeScript(srcDir, destDir) {
-  const tsFiles = findFiles(srcDir, '.ts');
-  if (tsFiles.length === 0) return;
-
-  try {
-    await esbuild.build({
-      entryPoints: tsFiles,
-      bundle: false,
-      format: 'esm',
-      outdir: destDir,
-      outbase: srcDir,
-      platform: 'browser',
-      target: 'es2020',
-      loader: { '.ts': 'ts' },
-      logLevel: 'error'
-    });
-  } catch (err) {
-    console.error('❌ Failed to transpile TypeScript:', err.message);
-    throw err;
-  }
-}
-
-/**
- * Copy presets (No-op log silenced)
- */
-export async function copyPresetsToOutput(packageRoot, distDir) {
-  // No-op
-}
-
-function findFiles(dir, extension, fileList = []) {
-  if (!fs.existsSync(dir)) return fileList;
-  const files = fs.readdirSync(dir);
-  files.forEach(file => {
-    const filePath = path.join(dir, file);
-    const stat = fs.statSync(filePath);
-    if (stat.isDirectory()) {
-      if (file !== 'node_modules' && file !== '.git' && file !== 'jux-dist') {
-        findFiles(filePath, extension, fileList);
-      }
-    } else if (file.endsWith(extension)) {
-      fileList.push(filePath);
-    }
-  });
-  return fileList;
-}
-
-function copyNonTsFiles(src, dest) {
-  const entries = fs.readdirSync(src, { withFileTypes: true });
-
-  for (const entry of entries) {
-    const srcPath = path.join(src, entry.name);
-    const destPath = path.join(dest, entry.name);
-
-    if (entry.isDirectory()) {
-      if (entry.name === 'layouts') continue;
-      if (!fs.existsSync(destPath)) fs.mkdirSync(destPath, { recursive: true });
-      copyNonTsFiles(srcPath, destPath);
-    } else if (entry.isFile()) {
-      const ext = path.extname(entry.name);
-      if (ext === '.js' || ext === '.map') {
-        let tsSibling = '';
-        if (ext === '.js') tsSibling = srcPath.replace(/\.js$/, '.ts');
-        else if (ext === '.map') tsSibling = srcPath.replace(/\.js\.map$/, '.ts');
-        if (tsSibling && fs.existsSync(tsSibling)) continue;
-      }
-      if (['.css', '.json', '.js', '.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp'].includes(ext)) {
-        fs.copyFileSync(srcPath, destPath);
-      }
-    }
-  }
-}
-
-function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, excludeDirs = ['node_modules', 'jux-dist', '.git', 'lib']) {
-  if (!fs.existsSync(dir)) return fileList;
-  const entries = fs.readdirSync(dir, { withFileTypes: true });
-  for (const entry of entries) {
-    const fullPath = path.join(dir, entry.name);
-    if (entry.isDirectory()) {
-      if (excludeDirs.includes(entry.name)) continue;
-      findProjectFiles(fullPath, extensions, fileList, rootDir, excludeDirs);
-    } else {
-      const hasExtension = extensions.some(ext => entry.name.endsWith(ext));
-      if (hasExtension) fileList.push(fullPath);
-    }
-  }
-  return fileList;
-}
-
-/**
- * Bundle all .jux files into a single router-based main.js
- */
-export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {}) {
-  const { routePrefix = '', config } = options;
-
-  // ✅ 1. Find all processable source files (.jux AND .js)
-  // This ensures locally imported helper JS files are bundled and namespaced correctly.
-  const juxFiles = findFiles(projectRoot, '.jux');
-  const jsFiles = findFiles(projectRoot, '.js');
-
-  // Combine, filtering duplicates if any
-  const allSourceFiles = Array.from(new Set([...juxFiles, ...jsFiles]));
-
-  if (allSourceFiles.length === 0) {
-    return { mainJsFilename: 'main.js', routes: [], external: new Set(), vendoredPaths: {} };
-  }
-
-  // Set of relative paths being bundled (used to decide if an import should be skipped)
-  const bundledPaths = new Set(allSourceFiles.map(f => path.relative(projectRoot, f).replace(/\\/g, '/')));
-
-  const pages = config?.pages || {};
-  const views = [];
-  const routes = [];
-  const sharedModules = new Map();
-  const allImports = [];
-  const externalModules = new Set();
-  const fileToFunction = new Map();
-
-  for (const sourceFile of allSourceFiles) {
-    const isJux = sourceFile.endsWith('.jux');
-    const relativePath = path.relative(projectRoot, sourceFile);
-    const parsedPath = path.parse(relativePath);
-
-    // Normalize function name: experiments/my-data -> ExperimentsMyData
-    const rawFunctionName = parsedPath.dir ? `${parsedPath.dir.replace(/\//g, '_')}_${parsedPath.name}` : parsedPath.name;
-    const cleanFunctionName = rawFunctionName.replace(/[-_]/g, ' ').split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join('');
-
-    // Only .jux files generate Routes/Views
-    if (isJux) {
-      fileToFunction.set(relativePath, cleanFunctionName);
-      fileToFunction.set(relativePath.split(path.sep).join('/'), cleanFunctionName);
-
-      // ✅ FIX: Register lookup without extension to match juxconfig routes like "/path/to/view"
-      const noExt = relativePath.replace(/\.jux$/, '');
-      const noExtNormalized = noExt.split(path.sep).join('/');
-      fileToFunction.set(noExt, cleanFunctionName);
-      fileToFunction.set(noExtNormalized, cleanFunctionName);
-    }
-
-    const routePath = routePrefix + '/' + (parsedPath.dir ? `${parsedPath.dir}/` : '') + parsedPath.name;
-    const cleanRoutePath = routePath.replace(/\/+/g, '/');
-
-    const fileContent = fs.readFileSync(sourceFile, 'utf-8');
-
-    // Parse Imports
-    try {
-      const ast = acorn.parse(fileContent, { ecmaVersion: 'latest', sourceType: 'module' });
-      ast.body.forEach(node => {
-        if (node.type === 'ImportDeclaration') {
-          const importStatement = fileContent.slice(node.start, node.end);
-          const moduleName = node.source.value;
-
-          // ✅ CHECK: Is this import pointing to a file we are bundling?
-          let isBundledLocal = false;
-          // Support relative (./, ../) OR project-root relative (/) imports
-          if (moduleName.startsWith('.') || moduleName.startsWith('/')) {
-            const resolved = resolveImportPath(moduleName, relativePath);
-
-            if (bundledPaths.has(resolved)) {
-              isBundledLocal = true;
-            }
-          }
-          // ONLY add to global imports if it is NOT a local bundled file
-          if (!isBundledLocal) {
-            allImports.push({ code: importStatement, filePath: relativePath });
-
-            if (!moduleName.startsWith('.') && !moduleName.startsWith('/') && !moduleName.startsWith('http') && !moduleName.startsWith('juxscript')) {
-              externalModules.add(moduleName);
-            }
-          }
-        }
-      });
-    } catch (parseErr) {
-      console.warn(`   ⚠️  Failed to parse imports in ${relativePath}, skipping`);
-    }
-
-    // Process Exports -> Shared Modules (Code Hoisting)
-    const hasExports = /^\s*export\s+(const|let|function|class|{)/m.test(fileContent);
-    if (hasExports) {
-      const exportKey = relativePath;
-      // ✅ FIX: Pass bundledPaths so imports can be resolved and rewritten in shared code
-      const exportCode = extractSharedModule(fileContent, rawFunctionName, relativePath, bundledPaths);
-      if (exportCode.trim()) sharedModules.set(exportKey, exportCode);
-    }
-
-    // Process .jux -> View Functions
-    if (isJux) {
-      // Pass bundledPaths so we know which imports to rewrite
-      const viewFunction = transformJuxToViewFunction(fileContent, rawFunctionName, parsedPath.name, relativePath, sharedModules, bundledPaths);
-      views.push(viewFunction);
-
-      if (config?.defaults?.autoRoute !== false) {
-        routes.push({ path: cleanRoutePath, functionName: cleanFunctionName });
-      }
-    }
-  }
-
-  if (pages) {
-    const resolveAndAddRoute = (urlPath, targetFile) => {
-      // ✅ FIX: Handle ./ and / prefixes in config paths
-      const cleanTarget = targetFile.replace(/^(\.\/|\/)/, '');
-      let funcName = fileToFunction.get(cleanTarget);
-
-      // Try appending .jux if not found and no extension provided
-      if (!funcName && !cleanTarget.endsWith('.jux')) {
-        funcName = fileToFunction.get(cleanTarget + '.jux');
-      }
-
-      if (funcName) {
-        console.log(`      📍 Custom Route: ${urlPath.padEnd(25)} -> ${funcName} (${targetFile})`);
-        routes.unshift({ path: urlPath, functionName: funcName });
-      } else {
-        console.warn(`      ⚠️  Route target not found: ${targetFile} (Cleaned: ${cleanTarget})`);
-      }
-    };
-    Object.entries(pages).forEach(([key, value]) => {
-      if (typeof value === 'string') {
-        resolveAndAddRoute(key, value);
-      } else if (typeof value === 'object') {
-        const prefix = value.prefix || '';
-        const groupRoutes = value.routes || {};
-        Object.entries(groupRoutes).forEach(([routePath, targetFile]) => {
-          const fullPath = (prefix + routePath).replace(/\/+/g, '/');
-          resolveAndAddRoute(fullPath, targetFile);
-        });
-      }
-    });
-  }
-
-  const vendoredPaths = await vendorExternalDependencies(externalModules, distDir);
-  const routerCode = generateRouterBundle(views, routes, sharedModules, allImports, projectRoot);
-  const mainJsFilename = 'main.js';
-  const mainJsPath = path.join(distDir, mainJsFilename);
-  fs.writeFileSync(mainJsPath, routerCode);
-
-  return {
-    mainJsFilename,
-    routes: routes.map(r => ({ path: r.path, functionName: r.functionName })),
-    external: externalModules,
-    vendoredPaths
-  };
-}
-
-function extractSharedModule(juxContent, moduleName, sourceFilePath, bundledPaths) {
-  // 1. Calculate Namespace
-  const namespace = sourceFilePath.replace(/\.(jux|js)$/, '').replace(/[\/\\]/g, '$').replace(/[^a-zA-Z0-9$]/g, '_');
-
-  let ast;
-  try {
-    ast = acorn.parse(juxContent, { ecmaVersion: 'latest', sourceType: 'module' });
-  } catch (err) {
-    throw new Error(`Invalid JavaScript syntax in ${sourceFilePath}: ${err.message}`);
-  }
-
-  // 2. Identify ALL Identifiers to rename (Local defs + Imports)
-  // We must rename everything to avoid global collision in the flat bundle
-  const identifiersToRename = new Map();
-
-  // A. Local Declarations (Self-namespacing)
-  const addId = (idNode) => {
-    if (idNode && idNode.type === 'Identifier') {
-      identifiersToRename.set(idNode.name, `${idNode.name}$${namespace}`);
-    }
-  };
-
-  ast.body.forEach(node => {
-    if (node.type === 'FunctionDeclaration' || node.type === 'ClassDeclaration') {
-      addId(node.id);
-    } else if (node.type === 'VariableDeclaration') {
-      node.declarations.forEach(d => addId(d.id));
-    } else if ((node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration') && node.declaration) {
-      const d = node.declaration;
-      if (d.type === 'FunctionDeclaration' || d.type === 'ClassDeclaration') addId(d.id);
-      else if (d.type === 'VariableDeclaration') d.declarations.forEach(v => addId(v.id));
-    } else if (node.type === 'ImportDeclaration') {
-      // B. Imports (Rewriting references to other bundled modules)
-      const importPath = node.source.value;
-      const resolvedPath = resolveImportPath(importPath, sourceFilePath);
-      // Check if this import is pointing to a bundled file
-      const isBundled = (bundledPaths && bundledPaths.has(resolvedPath)) || importPath.endsWith('.jux');
-
-      if (isBundled) {
-        const targetNamespace = resolvedPath.replace(/\.(jux|js)$/, '').replace(/[\/\\]/g, '$').replace(/[^a-zA-Z0-9$]/g, '_');
-        node.specifiers.forEach(spec => {
-          if (spec.type === 'ImportSpecifier') {
-            identifiersToRename.set(spec.local.name, `${spec.imported.name}$${targetNamespace}`);
-          } else if (spec.type === 'ImportDefaultSpecifier') {
-            // Best effort for defaults in this flat bundle scheme usually implies named export match or similar convention
-            // For now, assuming standard View exports which don't usually default export to shared
-          }
-        });
-      }
-    }
-  });
-
-  // 3. Reconstruct Code Line-by-Line (Node-by-Node)
-  const outputLines = [`// From: ${sourceFilePath}`];
-
-  // Sort keys by length desc to avoid partial replacement issues
-  const sortedKeys = Array.from(identifiersToRename.keys()).sort((a, b) => b.length - a.length);
-
-  ast.body.forEach(node => {
-    // Skip Imports (handled globally in bundling phase)
-    if (node.type === 'ImportDeclaration') return;
-    // Skip "export { a, b }" (re-exports) as 'a' and 'b' are already declared/renamed locally
-    if (node.type === 'ExportNamedDeclaration' && !node.declaration) return;
-
-    // Extract relevant code slice
-    let code = '';
-    if (node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration') {
-      if (node.declaration) {
-        code = juxContent.slice(node.declaration.start, node.declaration.end);
-      }
-    } else {
-      code = juxContent.slice(node.start, node.end);
-    }
-
-    if (!code) return;
-
-    // Replace Identifiers in this block
-    // Regex:
-    // (?<!\.) -> Negative lookbehind to avoid property access (obj.foo)
-    // \bkey\b -> Word boundary
-    // (?!\s*:) -> Negative lookahead to avoid object keys ({ foo: 1 })
-    for (const key of sortedKeys) {
-      const namespaced = identifiersToRename.get(key);
-      const regex = new RegExp(`(?<!\\.)\\b${key}\\b(?!\\s*:)`, 'g');
-      code = code.replace(regex, namespaced);
-    }
-
-    outputLines.push(code);
-  });
-
-  return outputLines.join('\n\n');
-}
-
-function transformJuxToViewFunction(juxContent, functionName, pageName, relativePath, sharedModules, bundledPaths) {
-  let result;
-  try {
-    const ast = acorn.parse(juxContent, { ecmaVersion: 'latest', sourceType: 'module' });
-    const nodesToRemove = [];
-    const importReplacements = new Map();
-    ast.body.forEach(node => {
-      if (node.type === 'ImportDeclaration') {
-        const importPath = node.source.value;
-        const resolvedPath = resolveImportPath(importPath, relativePath);
-
-        // ✅ Check if this import is pointing to a bundled file
-        // Handle BOTH relative and absolute-relative imports (starting with /)
-        const isBundled = (bundledPaths && bundledPaths.has(resolvedPath)) || importPath.endsWith('.jux');
-
-        if (isBundled) {
-          node.specifiers.forEach(spec => {
-            if (spec.type === 'ImportSpecifier') {
-              // ✅ Apply namespace convention to .js imports too
-              const namespace = resolvedPath.replace(/\.(jux|js)$/, '').replace(/[\/\\]/g, '$').replace(/[^a-zA-Z0-9$]/g, '_');
-              importReplacements.set(spec.local.name, `${spec.imported.name}$${namespace}`);
-            }
-          });
-        }
-
-        // 🔥 FIX: Always remove ImportDeclaration from the view function contents.
-        // Leftover imports inside a function body cause SyntaxError.
-        nodesToRemove.push({ start: node.start, end: node.end });
-      }
-      if (node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration') {
-        nodesToRemove.push({ start: node.start, end: node.end });
-      }
-    });
-    nodesToRemove.sort((a, b) => b.start - a.start);
-    result = juxContent;
-    nodesToRemove.forEach(({ start, end }) => { result = result.slice(0, start) + result.slice(end); });
-    importReplacements.forEach((namespacedName, localName) => {
-      result = result.replace(new RegExp(`\\b${localName}\\b`, 'g'), namespacedName);
-    });
-  } catch (err) {
-    throw new Error(`Invalid JavaScript syntax in ${relativePath}`);
-  }
-
-  result = result.replace(/\.renderTo\(container\)/g, '.render("#app")').replace(/\.render\(\s*\)/g, '.render("#app")');
-  const cleanName = functionName.replace(/[-_]/g, ' ').split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join('');
-
-  // ✅ Wrap View implementation in underscore function, then export Wrapped version
-  return `
-// View: ${cleanName}
-function _${cleanName}() {
-${result}
-  
-  return document.getElementById('app');
-}
-const ${cleanName} = JuxError.wrap('${cleanName}', _${cleanName});
-// Register Source
-JuxError.register('${cleanName}', '${relativePath}');
-`;
-}
-
-function resolveImportPath(importPath, currentFilePath) {
-
-  console.log(`[Resolve] Importing "${importPath}" from "${currentFilePath}"`);
-  // ✅ FIX: Handle root-relative imports (start with /)
-  if (importPath.startsWith('/')) {
-    const resolved = importPath.substring(1).replace(/\\/g, '/');
-    // console.log(`[Resolve] Root-relative: "${importPath}" -> "${resolved}"`);
-    return resolved;
-  }
-  const currentDir = path.dirname(currentFilePath);
-  // ✅ Ensure normalized separators
-  const resolved = path.join(currentDir, importPath).replace(/\\/g, '/');
-  // console.log(`[Resolve] Relative: "${importPath}" (from ${currentFilePath}) -> "${resolved}"`);
-  console.log(`[Resolve] Importing "${importPath}" from "${currentFilePath}" -> Resolved: "${resolved}"`);
-  return resolved;
-}
-
-function generateRouterBundle(views, routes, sharedModules = new Map(), allImports = [], projectRoot = '') {
-  const mergedImports = new Map();
-  const getCanonicalSource = (source, contextFilePath) => {
-    if (!source.startsWith('.') || source.includes('.jux')) return source;
-    const dir = path.dirname(contextFilePath);
-    const joinedPath = path.join(dir, source);
-    const v2Index = joinedPath.indexOf('lib/componentsv2');
-    if (v2Index !== -1) {
-      const subPath = joinedPath.substring(v2Index + 'lib/componentsv2'.length);
-      if (!subPath || subPath === '/index.js' || subPath === '/index') return 'juxscript';
-      return 'juxscript' + subPath.replace(/\\/g, '/');
-    }
-    if (joinedPath.includes('lib/components')) return 'juxscript/components';
-
-    // Fix: Ensure local relative paths ALWAYS start with ./
-    let normalized = joinedPath.replace(/\\/g, '/');
-    // If it's a bare filename like "file.js", prefix it to "./file.js"
-    // Also check for ":" to avoid messing up URLs like http:// or data:
-    if (!normalized.startsWith('.') && !normalized.startsWith('/') && !normalized.includes(':')) {
-      const old = normalized;
-      normalized = './' + normalized;
-      console.log(`      🛠️  Canonicalizing local import: "${old}" -> "${normalized}"`);
-    }
-    return normalized;
-  };
-
-  const importList = Array.isArray(allImports) ? allImports : Array.from(allImports);
-  for (const item of importList) {
-    try {
-      const code = typeof item === 'string' ? item : item.code;
-      const filePath = typeof item === 'string' ? '' : item.filePath;
-      const ast = acorn.parse(code.trim(), { ecmaVersion: 'latest', sourceType: 'module' });
-      const node = ast.body[0];
-      if (node && node.type === 'ImportDeclaration') {
-        const rawSource = node.source.value;
-        const source = getCanonicalSource(rawSource, filePath);
-
-        // Debug: Log if an import is being rewritten or handled specially
-        if (rawSource !== source && !source.startsWith('juxscript')) {
-          console.log(`      📦 Processing Import: "${rawSource}" -> "${source}" (in ${filePath})`);
-        }
-
-        if (!mergedImports.has(source)) mergedImports.set(source, { defaults: new Set(), named: new Set(), namespace: null });
-        const storage = mergedImports.get(source);
-        node.specifiers.forEach(spec => {
-          if (spec.type === 'ImportDefaultSpecifier') storage.defaults.add(spec.local.name);
-          else if (spec.type === 'ImportSpecifier') storage.named.add(spec.imported.name !== spec.local.name ? `${spec.imported.name} as ${spec.local.name}` : spec.imported.name);
-          else if (spec.type === 'ImportNamespaceSpecifier') storage.namespace = spec.local.name;
-        });
-      }
-    } catch (e) {
-      console.warn(`      ⚠️  Failed to process import in bundle:`, item);
-    }
-  }
-
-  const filteredImports = [];
-  mergedImports.forEach((storage, source) => {
-    if (storage.namespace) filteredImports.push(`import * as ${storage.namespace} from '${source}';`);
-    const parts = [];
-    if (storage.defaults.size > 0) parts.push(Array.from(storage.defaults)[0]);
-    if (storage.named.size > 0) parts.push(`{ ${Array.from(storage.named).sort().join(', ')} }`);
-    if (storage.defaults.size === 0 && storage.named.size === 0 && !storage.namespace) filteredImports.push(`import '${source}';`);
-    else if (parts.length > 0) filteredImports.push(`import ${parts.join(', ')} from '${source}';`);
-  });
-
-  const juxDebugUtils = `
-// ============================================
-// JUX DEBUG UTILITIES
-// ============================================
-const JUX_DEBUG = true; 
-
-const JuxError = {
-    sourceMap: {},
-    
-    register(viewName, sourceFile) {
-        this.sourceMap[viewName] = sourceFile;
-    },
-    
-    // Global Error Handler Setup
-    init() {
-        window.addEventListener('error', (event) => {
-             JuxError.displayError('Uncaught Exception', event.error);
-        });
-        window.addEventListener('unhandledrejection', (event) => {
-             JuxError.displayError('Unhandled Promise Rejection', event.reason);
-        });
-    },
-
-    displayError(title, error) {
-        console.error(\`🚨 JUX \${title}\`, error);
-        const app = document.getElementById('app');
-        if (app) {
-            // Prevent multiple error overlays stacking
-            if (document.getElementById('jux-error-overlay')) return;
-
-            app.innerHTML = \`
-                <div id="jux-error-overlay" style="font-family: monospace; background: #1e1e1e; color: #ff6b6b; min-height: 100vh; padding: 2rem; position:fixed; top:0; left:0; width:100%; z-index:99999;">
-                    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem;">
-                        <div style="font-size: 2rem;">🚨</div>
-                        <div>
-                            <h1 style="margin:0; font-size: 1.5rem; color: #ff6b6b;">JUX Runtime Error</h1>
-                            <div style="color: #888; margin-top: 4px;">\${title}</div>
-                        </div>
-                    </div>
-                    
-                    <pre style="background: #2d2d2d; padding: 20px; border-radius: 8px; overflow-x: auto; color: #e0e0e0; border-left: 4px solid #ff6b6b; font-size: 14px; line-height: 1.5;">\${error?.stack || error?.message || String(error)}</pre>
-                    
-                    <button onclick="window.location.reload()" style="margin-top:20px; padding: 10px 20px; background: #333; color: white; border: 1px solid #555; cursor: pointer; border-radius: 4px;">Reload Application</button>
-                </div>
-            \`;
-        }
-    },
-    
-    wrap(viewName, viewFn) {
-        return function() {
-            const sourceFile = JuxError.sourceMap[viewName] || 'unknown';
-            if (JUX_DEBUG) console.log(\`🚀 [JUX] Rendering: \${viewName} (\${sourceFile})\`);
-            
-            try {
-                return viewFn.apply(this, arguments);
-            } catch (error) {
-                // Enhance error object with view context if possible
-                error.message = \`[View: \${viewName}] \${error.message}\`;
-                JuxError.displayError('View Rendering Error', error);
-                // We do NOT rethrow here to prevent console noise, as we handled it UI-wise.
-                // However, stopping execution flow is implicitly handled by not returning valid DOM.
-            }
-        };
-    }
-};
-
-// Initialize Global Handlers
-JuxError.init();
-`;
-
-  return `// Generated Jux Router Bundle
-${filteredImports.join('\n')}
-
-${juxDebugUtils}
-
-// SHARED MODULES
-${Array.from(sharedModules.values()).filter(c => c.trim()).join('\n\n')}
-
-// VIEWS (Wrapped in JuxError)
-${views.filter(v => v.trim()).join('\n\n')}
-
-function JuxNotFound() { jux.heading(1, { text: '404 - Page Not Found' }).render('#app'); return document.getElementById('app'); }
-function JuxForbidden() { jux.heading(1, { text: '403 - Forbidden' }).render('#app'); return document.getElementById('app'); }
-
-const routes = {
-${routes.map(r => `  '${r.path}': ${r.functionName}`).join(',\n')}
-};
-
-const app = document.getElementById('app');
-function render() {
-  let path = location.pathname;
-  let view = routes[path] || (path.endsWith('/') ? (routes[path + 'index'] || routes[path.slice(0, -1) + '/index']) : routes[path + '/index']);
-  view = view || JuxNotFound;
-  app.innerHTML = '';
-  app.removeAttribute('data-jux-page');
-  view();
-  const pageName = Object.entries(routes).find(([p, v]) => v === view)?.[0] || 'not-found';
-  app.setAttribute('data-jux-page', pageName.replace(/^\\\//, '').replace(/\\\//g, '-'));
-}
-document.addEventListener('click', e => {
-  const a = e.target.closest('a');
-  if (!a || a.dataset.router === 'false' || new URL(a.href).origin !== location.origin) return;
-  e.preventDefault();
-  history.pushState({}, '', a.href);
-  render();
-});
-window.addEventListener('popstate', render);
-render();
-`;
-}
-
-export function generateIndexHtml(distDir, bundleResult, options = {}) {
-  const { mainJsFilename = 'main.js', vendoredPaths = {} } = bundleResult || {};
-  const { isDev = false, wsPort = 3001 } = options;
-  const importMapScript = generateVendorImportMap(vendoredPaths);
-  const hotReloadScript = isDev ? `
-  <script>
-    (function() {
-      let ws = new WebSocket('ws://' + window.location.hostname + ':${wsPort}');
-      ws.onmessage = (msg) => { if (JSON.parse(msg.data).type === 'reload') window.location.reload(); };
-    })();
-  </script>` : '';
-
-  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>
-</head>
-<body data-theme="">
-  <div id="app"></div>
-  ${importMapScript}
-  <script type="module" src="/${mainJsFilename}"></script>
-  ${hotReloadScript}
-</body>
-</html>`;
-  fs.writeFileSync(path.join(distDir, 'index.html'), html);
-}
-
-async function vendorExternalDependencies(externalDeps, distDir) {
-  const vendorDir = path.join(distDir, 'vendor');
-  if (!fs.existsSync(vendorDir)) fs.mkdirSync(vendorDir, { recursive: true });
-  const vendoredPaths = {};
-  for (const dep of externalDeps) {
-    try {
-      const nodeModulePath = path.join(process.cwd(), 'node_modules', dep);
-      if (!fs.existsSync(nodeModulePath)) continue;
-      const pkg = JSON.parse(fs.readFileSync(path.join(nodeModulePath, 'package.json'), 'utf-8'));
-      const entryPoints = [pkg.module, pkg.browser, pkg.main, 'index.js'].filter(Boolean);
-      let entryFile = entryPoints.map(e => path.join(nodeModulePath, e)).find(p => fs.existsSync(p));
-      if (!entryFile) continue;
-      await esbuild.build({ entryPoints: [entryFile], bundle: true, format: 'esm', outfile: path.join(vendorDir, `${dep}.js`), platform: 'browser', target: 'es2020', logLevel: 'silent' });
-      vendoredPaths[dep] = `/vendor/${dep}.js`;
-    } catch (err) { }
-  }
-  return vendoredPaths;
-}
-
-function generateVendorImportMap(vendoredPaths) {
-  const imports = {
-    "juxscript": "/lib/componentsv2/index.js",
-    "juxscript/": "/lib/componentsv2/",
-    ...vendoredPaths
-  };
-  Object.keys(imports).forEach(key => { if (imports[key].startsWith('./')) imports[key] = imports[key].substring(1); });
-  return `<script type="importmap">\n${JSON.stringify({ imports }, null, 2)}\n</script>`;
-}