juxscript 1.0.49 → 1.0.50

package/bin/cli.js

@@ -68,7 +68,7 @@ if (command === 'create') {
     execSync('npx jux init', { stdio: 'inherit' });
 
     console.log(`\n📝 Creating .gitignore...`);
-    fs.writeFileSync('.gitignore', `jux-dist/\nnode_modules/\n.DS_Store\n.env\n*.log\n`);
+    fs.writeFileSync('.gitignore', `.jux/\nnode_modules/\n.DS_Store\n.env\n*.log\n`);  // ✅ Changed jux-dist/ to .jux/
     console.log(`   ✓ .gitignore created`);
 
     // ✅ Copy juxconfig.example.js from the package
@@ -78,13 +78,16 @@ if (command === 'create') {
     if (fs.existsSync(configExampleSrc)) {
       // Copy as juxconfig.js (working config)
       const configDest = path.join(process.cwd(), 'juxconfig.js');
-      fs.copyFileSync(configExampleSrc, configDest);
-      console.log(`   ✓ juxconfig.js created`);
-
-      // Also copy as .example (reference)
+      if (!fs.existsSync(configDest)) {
+        fs.copyFileSync(configExampleSrc, configDest);
+        console.log('+ Created juxconfig.js');
+      }
+      
       const configExampleDest = path.join(process.cwd(), 'juxconfig.example.js');
-      fs.copyFileSync(configExampleSrc, configExampleDest);
-      console.log(`   ✓ juxconfig.example.js created`);
+      if (!fs.existsSync(configExampleDest)) {
+        fs.copyFileSync(configExampleSrc, configExampleDest);
+        console.log('+ Created juxconfig.example.js (reference)');
+      }
     }
 
     console.log(`
@@ -354,82 +357,73 @@ async function buildProject(isServe = false) {
       process.exit(1);
     }
 
-    // Create structure
+    // Create jux/ structure
     fs.mkdirSync(juxDir, { recursive: true });
 
-    // Copy jux.jux as the starter index.jux (if it exists)
-    const juxJuxSrc = path.join(PATHS.packageRoot, 'presets', 'jux.jux');
-    const indexJuxDest = path.join(juxDir, 'index.jux');
+    // ✅ Copy presets/default/ directly to jux/ (no presets subfolder!)
+    const defaultPresetSrc = path.join(PATHS.packageRoot, 'presets', 'default');
+    
+    if (fs.existsSync(defaultPresetSrc)) {
+      console.log('📦 Copying default preset boilerplate...');
+      
+      const entries = fs.readdirSync(defaultPresetSrc, { withFileTypes: true });
+      let copiedCount = 0;
+
+      for (const entry of entries) {
+        const srcPath = path.join(defaultPresetSrc, entry.name);
+        const destPath = path.join(juxDir, entry.name);
 
-    if (fs.existsSync(juxJuxSrc)) {
-      fs.copyFileSync(juxJuxSrc, indexJuxDest);
-      console.log('+ Created jux/index.jux from jux.jux template');
-    } else {
-      // Fallback to hey.jux if jux.jux doesn't exist
-      const heyJuxSrc = path.join(PATHS.packageRoot, 'presets', 'hey.jux');
-      if (fs.existsSync(heyJuxSrc)) {
-        fs.copyFileSync(heyJuxSrc, indexJuxDest);
-        console.log('+ Created jux/index.jux from hey.jux template');
-      } else {
-        console.warn('⚠️  No template found, creating basic file');
-        const basicContent = `import { jux } from 'juxscript';\n\njux.heading('welcome').text('Welcome to JUX').render('#app');`;
-        fs.writeFileSync(indexJuxDest, basicContent);
-        console.log('+ Created jux/index.jux');
+        if (entry.isFile()) {
+          fs.copyFileSync(srcPath, destPath);
+          console.log(`+ Created jux/${entry.name}`);
+          copiedCount++;
+        }
       }
+
+      console.log(`✅ Copied ${copiedCount} boilerplate file(s) to jux/\n`);
     }
 
-    // Copy entire presets folder to jux/presets/ (excluding jux.jux)
-    const presetsSrc = path.join(PATHS.packageRoot, 'presets');
-    const presetsDest = path.join(juxDir, 'presets');
+    // ✅ Create a simple index.jux if none exists
+    const indexJuxDest = path.join(juxDir, 'index.jux');
+    if (!fs.existsSync(indexJuxDest)) {
+      const basicContent = `import { jux, state } from 'juxscript';
 
-    if (fs.existsSync(presetsSrc)) {
-      let copiedCount = 0;
+jux.hero('welcome', {
+  title: 'Welcome to JUX',
+  subtitle: 'Start building your app'
+}).render('#app');
 
-      function copyRecursive(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);
-
-          // Skip jux.jux since we already copied it to index.jux
-          if (entry.isFile() && entry.name === 'jux.jux') {
-            continue;
-          }
-
-          if (entry.isDirectory()) {
-            fs.mkdirSync(destPath, { recursive: true });
-            copyRecursive(srcPath, destPath);
-          } else if (entry.isFile()) {
-            fs.copyFileSync(srcPath, destPath);
-            const relativePath = path.relative(presetsSrc, srcPath);
-            console.log(`+ Copied preset: presets/${relativePath}`);
-            copiedCount++;
-          }
-        }
-      }
+const count = state(0);
 
-      fs.mkdirSync(presetsDest, { recursive: true });
-      copyRecursive(presetsSrc, presetsDest);
+jux.button('increment')
+  .label('Click me!')
+  .bind('click', () => count.value++)
+  .style('margin: 2rem 0;')
+  .render('#app');
 
-      if (copiedCount > 0) {
-        console.log(`+ Copied ${copiedCount} preset file(s) to jux/presets/`);
-      }
+jux.paragraph('counter')
+  .sync('text', count, val => \`Count: \${val}\`)
+  .render('#app');
+`;
+      fs.writeFileSync(indexJuxDest, basicContent);
+      console.log('+ Created jux/index.jux');
     }
 
     // Create package.json if it doesn't exist
     const pkgPath = path.join(PATHS.projectRoot, 'package.json');
     if (!fs.existsSync(pkgPath)) {
+      const projectName = path.basename(PATHS.projectRoot).toLowerCase().replace(/[^a-z0-9-]/g, '-');
+      
       const pkgContent = {
-        "name": "my-jux-project",
-        "version": "1.0.0",
+        "name": projectName,
+        "version": "0.1.0",
         "type": "module",
         "scripts": {
-          "build": "jux build",
-          "serve": "jux serve"
+          "dev": "jux serve",
+          "build": "jux build"
         },
         "dependencies": {
-          "juxscript": "^1.0.8"
+          "juxscript": "latest"
         }
       };
       fs.writeFileSync(pkgPath, JSON.stringify(pkgContent, null, 2));
@@ -438,21 +432,39 @@ async function buildProject(isServe = false) {
 
     // Create .gitignore
     const gitignorePath = path.join(PATHS.projectRoot, '.gitignore');
-    const gitignoreContent = `jux-dist/
-node_modules/
-.DS_Store
-`;
+    const gitignoreContent = `.jux/\nnode_modules/\n.DS_Store\n`;  // ✅ Changed
 
     if (!fs.existsSync(gitignorePath)) {
       fs.writeFileSync(gitignorePath, gitignoreContent);
       console.log('+ Created .gitignore');
     }
 
+    // ✅ Copy juxconfig to root
+    const configExampleSrc = path.join(PATHS.packageRoot, 'juxconfig.example.js');
+    
+    if (fs.existsSync(configExampleSrc)) {
+      const configDest = path.join(PATHS.projectRoot, 'juxconfig.js');
+      if (!fs.existsSync(configDest)) {
+        fs.copyFileSync(configExampleSrc, configDest);
+        console.log('+ Created juxconfig.js');
+      }
+      
+      const configExampleDest = path.join(PATHS.projectRoot, 'juxconfig.example.js');
+      if (!fs.existsSync(configExampleDest)) {
+        fs.copyFileSync(configExampleSrc, configExampleDest);
+        console.log('+ Created juxconfig.example.js (reference)');
+      }
+    }
+
     console.log('\n✅ JUX project initialized!\n');
+    console.log('Project structure:');
+    console.log('  jux/              # Your source files');
+    console.log('  .jux/             # Build output (git-ignored)');
+    console.log('  juxconfig.js      # Configuration');
+    console.log('  package.json      # Dependencies\n');
     console.log('Next steps:');
-    console.log('  npm install              # Install dependencies');
-    console.log('  npx jux serve            # Start dev server with hot reload\n');
-    console.log('Check out the docs: https://juxscript.com/docs\n');
+    console.log('  npm install       # Install dependencies');
+    console.log('  npm run dev       # Start dev server\n');
 
   } else if (command === 'build') {
     // ✅ Always builds router bundle
@@ -474,39 +486,28 @@ node_modules/
 JUX CLI - A JavaScript UX authorship platform
 
 Usage:
-  npx jux init              Initialize a new JUX project
-  npx jux build             Build router bundle to ./jux-dist/
+  npx jux create [name]     Create a new JUX project
+  npx jux init              Initialize JUX in current directory
+  npx jux build             Build router bundle to ./.jux/
   npx jux serve [http] [ws] Start dev server with hot reload
 
-Arguments:
-  [http]  HTTP server port (default: 3000)
-  [ws]    WebSocket port (default: 3001)
-
 Project Structure:
   my-project/
-  ├── jux/              # Your .jux source files
-  │   ├── index.jux    # Entry point
-  │   └── pages/       # Additional pages
-  ├── jux-dist/        # Build output (git-ignore this)
-  ├── server/          # Your backend
+  ├── .jux/            # Build output (git-ignored, like .git)
+  │   ├── lib/
+  │   ├── main.js
+  │   └── index.html
+  ├── jux/             # Your .jux source files
+  │   ├── index.jux
+  │   ├── layout.css
+  │   └── layout.jux
+  ├── juxconfig.js     # Configuration
   └── package.json
 
-Import Style:
-  // In your project's .jux files
-  import { jux, state } from 'juxscript';
-  import 'juxscript/presets/notion.js';
-
-Getting Started:
-  1. npx jux init      # Create project structure
-  2. npm install       # Install dependencies
-  3. npx jux serve     # Dev server with hot reload
-  4. Serve jux-dist/ from your backend
-
 Examples:
-  npx jux build        # Build production bundle
-  npx jux serve        # Dev server (ports 3000/3001)
-  npx jux serve 8080   # HTTP on 8080, WS on 3001
-  npx jux serve 8080 8081  # HTTP on 8080, WS on 8081
+  npx jux create my-app     Create new project
+  npx jux serve             Dev server (ports 3000/3001)
+  npx jux serve 8080 8081   Custom ports
     `);
   }
 })();

package/juxconfig.example.js

@@ -21,8 +21,8 @@ export default {
     // Source directory for .jux files (default: 'jux')
     sourceDir: 'jux',
 
-    // Output directory for built files (default: 'jux-dist')
-    distDir: 'jux-dist',
+    // Output directory for built files (default: '.jux')
+    distDir: '.jux',  // ✅ Changed from 'jux-dist',
 
     services: {
         database: 'http://localhost:4000/api/db',

package/machinery/config.js

@@ -0,0 +1,709 @@
+import fs from 'fs';
+import path from 'path';
+import esbuild from 'esbuild';
+
+/**
+ * Generate import map script tag
+ */
+function generateImportMapScript() {
+  return `<script type="importmap">
+{
+  "imports": {
+    "juxscript": "./lib/jux.js",
+    "juxscript/": "./lib/",
+    "juxscript/reactivity": "./lib/reactivity/state.js",
+    "juxscript/presets/": "./presets/",
+    "juxscript/components/": "./lib/components/"
+  }
+}
+</script>`;
+}
+
+/**
+ * Copy and build the JUX library from TypeScript to JavaScript
+ * 
+ * @param {string} projectRoot - Root directory containing lib/
+ * @param {string} distDir - Destination directory for built files
+ */
+export async function copyLibToOutput(projectRoot, distDir) {
+  // Simplified lib path resolution
+  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');
+
+  console.log('📦 Building TypeScript library...');
+  console.log(`   From: ${libSrc}`);
+  console.log(`   To: ${libDest}`);
+
+  if (fs.existsSync(libDest)) {
+    fs.rmSync(libDest, { recursive: true });
+  }
+
+  fs.mkdirSync(libDest, { recursive: true });
+
+  // Find all TypeScript entry points
+  const tsFiles = findFiles(libSrc, '.ts');
+
+  if (tsFiles.length === 0) {
+    console.warn('⚠️  No TypeScript files found in lib/');
+    return;
+  }
+
+  console.log(`   Found ${tsFiles.length} TypeScript files`);
+
+  // Build all TypeScript files with esbuild
+  try {
+    await esbuild.build({
+      entryPoints: tsFiles,
+      bundle: false,
+      format: 'esm',
+      outdir: libDest,
+      outbase: libSrc,
+      platform: 'browser',
+      target: 'es2020',
+      loader: {
+        '.ts': 'ts'
+      },
+      logLevel: 'warning'
+    });
+
+    console.log('   ✓ TypeScript compiled to JavaScript');
+
+    // Copy non-TS files (CSS, HTML, etc.)
+    console.log('   Copying lib assets...');
+    copyNonTsFiles(libSrc, libDest);
+    console.log('   ✓ Lib assets copied');
+
+  } catch (err) {
+    console.error('❌ Failed to build TypeScript:', err.message);
+    throw err;
+  }
+
+  console.log('✅ Library ready\n');
+}
+
+/**
+ * Copy project assets (CSS, JS, images) from jux/ to dist/
+ * 
+ * @param {string} projectRoot - Source directory (jux/)
+ * @param {string} distDir - Destination directory (jux-dist/)
+ */
+export async function copyProjectAssets(projectRoot, distDir) {
+  console.log('📦 Copying project assets...');
+
+  // Find all CSS and JS files in project root (excluding node_modules, dist, .git)
+  const allFiles = [];
+  findProjectFiles(projectRoot, ['.css', '.js'], allFiles, projectRoot);
+
+  console.log(`   Found ${allFiles.length} asset file(s)`);
+
+  for (const srcPath of allFiles) {
+    const relativePath = path.relative(projectRoot, srcPath);
+    const destPath = path.join(distDir, relativePath);
+    const destDir = path.dirname(destPath);
+
+    // Create destination directory if needed
+    if (!fs.existsSync(destDir)) {
+      fs.mkdirSync(destDir, { recursive: true });
+    }
+
+    // Copy file
+    fs.copyFileSync(srcPath, destPath);
+    console.log(`   ✓ ${relativePath}`);
+  }
+
+  console.log('✅ Project assets copied\n');
+}
+
+/**
+ * Transpile TypeScript files from jux/ to jux-dist/, preserving folder structure
+ * 
+ * @param {string} srcDir - Source directory (jux/)
+ * @param {string} destDir - Destination directory (jux-dist/)
+ * @example
+ * // jux/samples/mypage.ts -> jux-dist/samples/mypage.js
+ * await transpileProjectTypeScript('jux/', 'jux-dist/');
+ */
+export async function transpileProjectTypeScript(srcDir, destDir) {
+  console.log('🔷 Transpiling TypeScript files...');
+
+  // Find all TypeScript files in the project
+  const tsFiles = findFiles(srcDir, '.ts');
+
+  if (tsFiles.length === 0) {
+    console.log('   No TypeScript files found in project');
+    return;
+  }
+
+  console.log(`   Found ${tsFiles.length} TypeScript file(s)`);
+
+  try {
+    // Build all TypeScript files with esbuild
+    await esbuild.build({
+      entryPoints: tsFiles,
+      bundle: false,
+      format: 'esm',
+      outdir: destDir,
+      outbase: srcDir,
+      platform: 'browser',
+      target: 'es2020',
+      loader: {
+        '.ts': 'ts'
+      },
+      logLevel: 'warning'
+    });
+
+    // Log each transpiled file
+    tsFiles.forEach(tsFile => {
+      const relativePath = path.relative(srcDir, tsFile);
+      const jsPath = relativePath.replace(/\.ts$/, '.js');
+      console.log(`   ✓ ${relativePath} → ${jsPath}`);
+    });
+
+    console.log('✅ TypeScript transpiled\n');
+
+  } catch (err) {
+    console.error('❌ Failed to transpile TypeScript:', err.message);
+    throw err;
+  }
+}
+
+/**
+ * Copy presets folder from lib to dist (maintaining directory structure)
+ * 
+ * @param {string} packageRoot - Source package root directory
+ * @param {string} distDir - Destination directory
+ */
+export async function copyPresetsToOutput(packageRoot, distDir) {
+  console.log('📦 Copying presets...');
+
+  const presetsSrc = path.join(packageRoot, 'presets');
+  const presetsDest = path.join(distDir, 'presets');
+
+  if (!fs.existsSync(presetsSrc)) {
+    console.log('   No presets directory found');
+    return;
+  }
+
+  if (fs.existsSync(presetsDest)) {
+    fs.rmSync(presetsDest, { recursive: true });
+  }
+
+  fs.mkdirSync(presetsDest, { recursive: true });
+
+  // Recursively copy entire presets directory structure
+  let copiedCount = 0;
+
+  function copyRecursive(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()) {
+        fs.mkdirSync(destPath, { recursive: true });
+        copyRecursive(srcPath, destPath);
+      } else if (entry.isFile()) {
+        fs.copyFileSync(srcPath, destPath);
+        const relativePath = path.relative(presetsSrc, srcPath);
+        console.log(`   ✓ ${relativePath}`);
+        copiedCount++;
+      }
+    }
+  }
+
+  copyRecursive(presetsSrc, presetsDest);
+
+  console.log(`✅ Copied ${copiedCount} preset file(s)\n`);
+}
+
+/**
+ * Recursively find files with a specific extension
+ * 
+ * @param {string} dir - Directory to search
+ * @param {string} extension - File extension (e.g., '.ts')
+ * @param {string[]} fileList - Accumulator for found files
+ * @returns {string[]} Array of file paths
+ */
+function findFiles(dir, extension, fileList = []) {
+  const files = fs.readdirSync(dir);
+
+  files.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stat = fs.statSync(filePath);
+
+    if (stat.isDirectory()) {
+      findFiles(filePath, extension, fileList);
+    } else if (file.endsWith(extension)) {
+      fileList.push(filePath);
+    }
+  });
+
+  return fileList;
+}
+
+/**
+ * Copy non-TypeScript files (CSS, JSON, JS, SVG, etc.)
+ * 
+ * @param {string} src - Source directory
+ * @param {string} dest - Destination directory
+ */
+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 (!fs.existsSync(destPath)) {
+        fs.mkdirSync(destPath, { recursive: true });
+      }
+      copyNonTsFiles(srcPath, destPath);
+    } else if (entry.isFile()) {
+      const ext = path.extname(entry.name);
+      // Copy CSS, JSON, SVG, and JS files (but not .ts files)
+      if (['.css', '.json', '.js', '.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp'].includes(ext)) {
+        fs.copyFileSync(srcPath, destPath);
+      }
+    }
+  }
+}
+
+/**
+ * Find project files with specific extensions, excluding certain directories
+ * 
+ * @param {string} dir - Directory to search
+ * @param {string[]} extensions - File extensions to find
+ * @param {string[]} fileList - Accumulator for found files
+ * @param {string} rootDir - Root directory for relative paths
+ * @param {string[]} excludeDirs - Directories to exclude
+ * @returns {string[]} Array of file paths
+ */
+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()) {
+      // Skip excluded directories
+      if (excludeDirs.includes(entry.name)) {
+        continue;
+      }
+      findProjectFiles(fullPath, extensions, fileList, rootDir, excludeDirs);
+    } else {
+      // Check if file has one of the desired extensions
+      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
+ * 
+ * @param {string} projectRoot - Source directory (jux/)
+ * @param {string} distDir - Destination directory (jux-dist/)
+ * @param {Object} options - Bundle options
+ * @param {string} options.routePrefix - Route prefix (e.g., '/experiments')
+ * @returns {Promise<string>} - Returns the generated filename (e.g., 'main.1234567890.js')
+ */
+export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {}) {
+  const startTime = performance.now();
+  const { routePrefix = '' } = options;
+
+  console.log('🔀 Bundling .jux files into router...');
+
+  const juxFiles = findFiles(projectRoot, '.jux');
+
+  if (juxFiles.length === 0) {
+    console.log('   No .jux files found');
+    return;
+  }
+
+  console.log(`   Found ${juxFiles.length} .jux file(s)`);
+
+  const fileTimings = [];
+  const views = [];
+  const routes = [];
+  const sharedModules = new Map(); // Track shared .jux modules
+
+  for (const juxFile of juxFiles) {
+    const fileStartTime = performance.now();
+
+    const relativePath = path.relative(projectRoot, juxFile);
+    const parsedPath = path.parse(relativePath);
+
+    const rawFunctionName = parsedPath.dir
+      ? `${parsedPath.dir.replace(/\//g, '_')}_${parsedPath.name}`
+      : parsedPath.name;
+
+    const cleanFunctionName = rawFunctionName
+      .replace(/[-_]/g, ' ')
+      .split(' ')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join('');
+
+    const routePath = routePrefix + '/' + (parsedPath.dir ? `${parsedPath.dir}/` : '') + parsedPath.name;
+    const cleanRoutePath = routePath.replace(/\/+/g, '/');
+
+    const juxContent = fs.readFileSync(juxFile, 'utf-8');
+
+    // Check if this file exports components (shared module)
+    const hasExports = /export\s+(const|let|function|class|{)/.test(juxContent);
+
+    if (hasExports) {
+      // Extract exports to shared modules section
+      sharedModules.set(relativePath, extractSharedModule(juxContent, rawFunctionName));
+    }
+
+    const viewFunction = transformJuxToViewFunction(juxContent, rawFunctionName, parsedPath.name, relativePath, sharedModules);
+
+    views.push(viewFunction);
+    routes.push({ path: cleanRoutePath, functionName: cleanFunctionName });
+
+    const fileTime = performance.now() - fileStartTime;
+    fileTimings.push({ file: relativePath, time: fileTime });
+
+    const exportNote = hasExports ? ' [+exports]' : '';
+    console.log(`   ✓ ${relativePath} → ${cleanFunctionName}()${exportNote} (${fileTime.toFixed(1)}ms)`);
+  }
+
+  // ✅ Show slowest files if any took >50ms
+  const slowFiles = fileTimings.filter(f => f.time > 50).sort((a, b) => b.time - a.time);
+  if (slowFiles.length > 0) {
+    console.log(`\n   ⚠️  Slowest files:`);
+    slowFiles.slice(0, 3).forEach(f => {
+      console.log(`      ${f.file}: ${f.time.toFixed(0)}ms`);
+    });
+  }
+
+  const bundleStartTime = performance.now();
+  const routerCode = generateRouterBundle(views, routes, sharedModules);
+  const bundleGenTime = performance.now() - bundleStartTime;
+
+  // ✅ Use fixed filename (no timestamp)
+  const mainJsFilename = 'main.js';
+  const mainJsPath = path.join(distDir, mainJsFilename);
+
+  // Write to dist/main.js
+  const writeStartTime = performance.now();
+  fs.writeFileSync(mainJsPath, routerCode);
+  const writeTime = performance.now() - writeStartTime;
+
+  const totalTime = performance.now() - startTime;
+
+  console.log(`   ✓ Generated: ${path.relative(projectRoot, mainJsPath)}`);
+  console.log(`\n   📊 Bundle Statistics:`);
+  console.log(`      Files processed:    ${juxFiles.length}`);
+  console.log(`      Bundle size:        ${(routerCode.length / 1024).toFixed(1)} KB`);
+  console.log(`      Code generation:    ${bundleGenTime.toFixed(0)}ms`);
+  console.log(`      File write:         ${writeTime.toFixed(0)}ms`);
+  console.log(`      Total bundle time:  ${totalTime.toFixed(0)}ms`);
+  console.log('✅ Router bundle complete\n');
+
+  // ✅ Return the filename so index.html can reference it
+  return mainJsFilename;
+}
+
+/**
+ * Extract and replace all string literals with placeholders
+ * Handles: template literals WITHOUT interpolations, single quotes, double quotes
+ * SKIPS: Template literals WITH ${} interpolations (those are dynamic code)
+ */
+function extractStrings(code) {
+  const strings = [];
+  let result = code;
+
+  // 1. Template literals WITHOUT interpolations (static strings only)
+  //    Match backticks that DON'T contain ${ 
+  result = result.replace(/`([^`$\\]|\\[^$])*`/g, (match) => {
+    // Double-check it doesn't contain ${ 
+    if (!match.includes('${')) {
+      strings.push(match);
+      return `__STRING_${strings.length - 1}__`;
+    }
+    return match; // Leave dynamic templates alone
+  });
+
+  // 2. Double-quoted strings (with escaped quotes)
+  result = result.replace(/"(?:[^"\\]|\\.)*"/g, (match) => {
+    strings.push(match);
+    return `__STRING_${strings.length - 1}__`;
+  });
+
+  // 3. Single-quoted strings (with escaped quotes)
+  result = result.replace(/'(?:[^'\\]|\\.)*'/g, (match) => {
+    strings.push(match);
+    return `__STRING_${strings.length - 1}__`;
+  });
+
+  return { code: result, strings };
+}
+
+/**
+ * Restore string placeholders back to original strings
+ */
+function restoreStrings(code, strings) {
+  return code.replace(/__STRING_(\d+)__/g, (match, index) => {
+    const idx = parseInt(index, 10);
+    if (idx >= 0 && idx < strings.length) {
+      return strings[idx];
+    }
+    console.warn(`[Compiler] String placeholder ${match} not found (idx: ${idx}, available: ${strings.length})`);
+    return match; // Leave as-is for debugging
+  });
+}
+
+/**
+ * Extract shared module exports from a .jux file
+ * 
+ * @param {string} juxContent - Original .jux file content
+ * @param {string} moduleName - Module identifier
+ * @returns {string} Shared module code
+ */
+function extractSharedModule(juxContent, moduleName) {
+  const { code, strings } = extractStrings(juxContent);
+
+  // Remove ALL imports
+  let result = code.replace(/import\s+\{[^}]+\}\s+from\s+__STRING_\d+__;?\s*/g, '');
+  result = result.replace(/import\s+\*\s+as\s+\w+\s+from\s+__STRING_\d+__;?\s*/g, '');
+  result = result.replace(/import\s+__STRING_\d+__;?\s*/g, '');
+
+  // Convert exports to declarations
+  result = result.replace(/export\s+const\s+/g, 'const ');
+  result = result.replace(/export\s+let\s+/g, 'let ');
+  result = result.replace(/export\s+function\s+/g, 'function ');
+  result = result.replace(/export\s+class\s+/g, 'class ');
+  result = result.replace(/export\s+default\s+/g, '');
+  result = result.replace(/export\s+\{([^}]+)\}\s*;?\s*/g, '');
+
+  // Restore strings
+  return restoreStrings(result, strings);
+}
+
+/**
+ * Transform .jux file content into a view function
+ * 
+ * @param {string} juxContent - Original .jux file content
+ * @param {string} functionName - Function name for the view
+ * @param {string} pageName - Page name for data attribute
+ * @param {string} relativePath - Relative path of the .jux file
+ * @param {Map} sharedModules - Map of shared module paths to their code
+ * @returns {string} View function code
+ */
+function transformJuxToViewFunction(juxContent, functionName, pageName, relativePath, sharedModules) {
+  const { code, strings } = extractStrings(juxContent);
+
+  // Remove ALL imports
+  let result = code.replace(/import\s+\{[^}]+\}\s+from\s+__STRING_\d+__;?\s*/g, '');
+  result = result.replace(/import\s+\*\s+as\s+\w+\s+from\s+__STRING_\d+__;?\s*/g, '');
+  result = result.replace(/import\s+__STRING_\d+__;?\s*/g, '');
+
+  // Handle exports
+  result = result.replace(/export\s+const\s+(\w+)\s*=/g, 'const $1 =');
+  result = result.replace(/export\s+let\s+(\w+)\s*=/g, 'let $1 =');
+  result = result.replace(/export\s+function\s+(\w+)/g, 'const $1 = function');
+  result = result.replace(/export\s+class\s+/g, 'class ');
+  result = result.replace(/export\s+default\s+/g, '');
+  result = result.replace(/export\s+\{([^}]+)\}\s*;?\s*/g, '');
+
+  // Replace render patterns
+  result = result.replace(/\.renderTo\(container\)/g, '.render("#app")');
+  result = result.replace(/\.render\(\s*\)/g, '.render("#app")');
+
+  // Restore strings
+  result = restoreStrings(result, strings);
+
+  const cleanName = functionName
+    .replace(/[-_]/g, ' ')
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('');
+
+  return `
+// View: ${cleanName}
+function ${cleanName}() {
+  ${result}
+  
+  return document.getElementById('app');
+}`;
+}
+
+/**
+ * Generate complete router bundle with all views and routing logic
+ * 
+ * @param {string[]} views - Array of view function code
+ * @param {Array<{path: string, functionName: string}>} routes - Route definitions
+ * @param {Map} sharedModules - Map of shared module code
+ * @returns {string} Complete bundle code
+ */
+function generateRouterBundle(views, routes, sharedModules = new Map()) {
+  const libImport = './lib/jux.js';
+
+  // Generate shared modules section
+  const sharedModulesCode = Array.from(sharedModules.values())
+    .filter(code => code.trim())
+    .join('\n\n');
+
+  // Filter out empty views (shared modules)
+  const viewsCode = views.filter(v => v.trim()).join('\n\n');
+
+  const routeTable = routes
+    .map(r => `  '${r.path}': ${r.functionName}`)
+    .join(',\n');
+
+  return `// Generated Jux Router Bundle
+import { jux, state } from '${libImport}';
+
+// ═══════════════════════════════════════════════════════════════════
+// SHARED MODULES
+// ═══════════════════════════════════════════════════════════════════
+
+${sharedModulesCode}
+
+// ═══════════════════════════════════════════════════════════════════
+// VIEW FUNCTIONS
+// ═══════════════════════════════════════════════════════════════════
+
+${viewsCode}
+
+// ═══════════════════════════════════════════════════════════════════
+// 404 VIEW
+// ═══════════════════════════════════════════════════════════════════
+
+function JuxNotFound() {
+  jux.heading(1, { text: '404 - Page Not Found' }).render('#app');
+  jux.paragraph('404-msg')
+    .text('The page you are looking for does not exist.')
+    .render('#app');
+  
+  return document.getElementById('app');
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// 403 VIEW
+// ═══════════════════════════════════════════════════════════════════
+
+function JuxForbidden() {
+  jux.heading(1, { text: '403 - Forbidden' }).render('#app');
+  jux.paragraph('403-msg')
+    .text('You are not authorized to view this page.')
+    .render('#app');
+  
+  return document.getElementById('app');
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// ROUTE TABLE
+// ═══════════════════════════════════════════════════════════════════
+
+const routes = {
+${routeTable}
+};
+
+// ═══════════════════════════════════════════════════════════════════
+// ROUTER CORE
+// ═══════════════════════════════════════════════════════════════════
+
+const app = document.getElementById('app');
+
+function render() {
+  let path = location.pathname;
+  
+  // Try exact match first
+  let view = routes[path];
+  
+  // If no match and path ends with /, try appending 'index'
+  if (!view && path.endsWith('/')) {
+    view = routes[path + 'index'] || routes[path.slice(0, -1) + '/index'];
+  }
+  
+  // If still no match and path doesn't end with /, try appending '/index'
+  if (!view && !path.endsWith('/')) {
+    view = routes[path + '/index'];
+  }
+  
+  // Fall back to 404
+  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) return;
+  
+  if (a.dataset.router === 'false') return;
+  
+  const url = new URL(a.href);
+  if (url.origin !== location.origin) return;
+  
+  e.preventDefault();
+  history.pushState({}, '', url.pathname);
+  render();
+});
+
+window.addEventListener('popstate', render);
+
+render();
+`;
+
+}
+
+/**
+ * Generate a unified index.html for router bundle
+ * 
+ * @param {string} distDir - Destination directory
+ * @param {Array<{path: string, functionName: string}>} routes - Route definitions
+ * @param {string} mainJsFilename - The generated main.js filename (e.g., 'main.1234567890.js')
+ */
+export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js') {
+  console.log('📄 Generating index.html...');
+
+  // Generate navigation links
+  const navLinks = routes
+    .map(r => `    <a href="${r.path}">${r.functionName.replace(/_/g, ' ')}</a>`)
+    .join(' |\n');
+
+  const importMapScript = generateImportMapScript();
+
+  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="">
+  <!-- App container - router renders here -->
+  <div id="app"></div>
+  ${importMapScript}
+  <script type="module" src="/${mainJsFilename}"></script>
+</body>
+</html>`;
+
+  const indexPath = path.join(distDir, 'index.html');
+  fs.writeFileSync(indexPath, html);
+
+  console.log(`   ✓ Generated: index.html (references ${mainJsFilename})`);
+  console.log('✅ Index HTML complete\n');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.49",
+  "version": "1.0.50",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",