juxscript 1.0.45 → 1.0.47

package/bin/cli.js

@@ -1,5 +1,123 @@
 #!/usr/bin/env node
 
+import path from 'path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const command = process.argv[2];
+
+// ═══════════════════════════════════════════════════════════════════
+// CREATE COMMAND - Runs BEFORE dependencies are installed
+// ═══════════════════════════════════════════════════════════════════
+
+if (command === 'create') {
+  const projectName = process.argv[3] || 'my-jux-app';
+  const projectPath = path.join(process.cwd(), projectName);
+
+  console.log(`
+╔═══════════════════════════════════════════════════════╗
+║                                                       ║
+║   🎨  Welcome to JUX                                  ║
+║                                                       ║
+║   Creating your new JUX project...                   ║
+║                                                       ║
+╚═══════════════════════════════════════════════════════╝
+`);
+
+  if (fs.existsSync(projectPath)) {
+    console.error(`❌ Directory "${projectName}" already exists.`);
+    console.error(`   Please choose a different name or remove the existing directory.\n`);
+    process.exit(1);
+  }
+
+  try {
+    const { execSync } = await import('child_process');
+
+    console.log(`📁 Creating directory: ${projectName}`);
+    fs.mkdirSync(projectPath, { recursive: true });
+    process.chdir(projectPath);
+
+    console.log(`📦 Initializing package.json...`);
+    const packageJson = {
+      name: projectName,
+      version: '0.1.0',
+      type: 'module',
+      scripts: {
+        dev: 'jux serve',
+        build: 'jux build'
+      },
+      dependencies: {
+        juxscript: 'latest'
+      }
+    };
+    fs.writeFileSync('package.json', JSON.stringify(packageJson, null, 2));
+    console.log(`   ✓ package.json created`);
+
+    console.log(`\n📥 Installing juxscript...\n`);
+    try {
+      execSync('npm install', { stdio: 'inherit' });
+      console.log(`\n   ✓ Dependencies installed`);
+    } catch (err) {
+      console.error(`\n   ⚠️  npm install failed, but continuing...`);
+    }
+
+    console.log(`\n🎨 Initializing JUX project structure...`);
+    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`);
+    console.log(`   ✓ .gitignore created`);
+
+    console.log(`
+╔═══════════════════════════════════════════════════════╗
+║                                                       ║
+║   ✅  Project created successfully!                   ║
+║                                                       ║
+╚═══════════════════════════════════════════════════════╝
+
+📚 Resources:
+   Documentation:  [coming soon]
+   GitHub:         https://github.com/juxscript/jux
+   Examples:       https://github.com/juxscript/examples
+
+⭐ If you find JUX useful, please star us on GitHub!
+🔒 Security: Report issues to security@juxscript.com [placeholder]
+
+Say goodbye to markup </</>>>. 
+Happy javascripting your frontend! 🎉
+
+Next steps:
+   cd ${projectName}
+   npm run dev
+`);
+
+  } catch (err) {
+    console.error(`\n❌ Project creation failed:`, err.message);
+
+    if (fs.existsSync(projectPath)) {
+      try {
+        process.chdir('..');
+        fs.rmSync(projectPath, { recursive: true, force: true });
+        console.log(`   ✓ Cleaned up failed project directory\n`);
+      } catch (cleanupErr) {
+        console.error(`   ⚠️  Could not clean up directory\n`);
+      }
+    }
+
+    process.exit(1);
+  }
+
+  process.exit(0); // ✅ Exit after create completes
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// ALL OTHER COMMANDS - Require dependencies to be installed
+// ═══════════════════════════════════════════════════════════════════
+
+// ✅ Now import dependencies (only needed for init, build, serve)
 import {
   copyLibToOutput,
   copyProjectAssets,
@@ -10,16 +128,6 @@ import {
 } from '../machinery/compiler.js';
 import { generateDocs } from '../machinery/doc-generator.js';
 import { start } from '../machinery/server.js';
-import path from 'path';
-import fs from 'fs';
-import { fileURLToPath } from 'url';
-import { loadConfig, runBootstrap } from '../machinery/config.js';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// Load configuration first (before PATHS)
-const config = await loadConfig(process.cwd());
 
 // CLEAR PATH CONTRACT - CONVENTIONS
 const PATHS = {
@@ -29,14 +137,20 @@ const PATHS = {
   // Where the user's project root is (where they run `npx jux`)
   projectRoot: process.cwd(),
 
-  // Where user's .jux source files live (from config or default)
-  juxSource: path.join(process.cwd(), config.sourceDir),
+  // Where user's .jux source files live (CONVENTION: ./jux/)
+  get juxSource() {
+    return path.join(this.projectRoot, 'jux');
+  },
 
   // Where jux lib files are (components, layouts, etc.)
-  juxLib: path.resolve(__dirname, '..', 'lib'),
+  get juxLib() {
+    return path.join(this.packageRoot, 'lib');
+  },
 
-  // Where frontend build output goes (from config or default)
-  frontendDist: path.join(process.cwd(), config.distDir)
+  // Where frontend build output goes (CONVENTION: ./jux-dist/)
+  get frontendDist() {
+    return path.join(this.projectRoot, 'jux-dist');
+  }
 };
 
 console.log('📍 JUX Paths:');
@@ -46,10 +160,6 @@ console.log(`   Source:   ${PATHS.juxSource}`);
 console.log(`   Output:   ${PATHS.frontendDist}`);
 console.log(`   Lib:      ${PATHS.juxLib}\n`);
 
-const command = process.argv[2];
-const watchMode = process.argv.includes('--watch');
-const bundleMode = process.argv.includes('--bundle');
-
 /**
  * Recursively find .jux files in a directory
  */
@@ -78,9 +188,8 @@ function findJuxFiles(dir, fileList = []) {
  * Build the entire JUX project (ALWAYS uses router bundle)
  * 
  * @param {boolean} isServe - Whether building for dev server
- * @param {number} wsPort - WebSocket port for hot reload
  */
-async function buildProject(isServe = false, wsPort = 3001) {
+async function buildProject(isServe = false) {
   const buildStartTime = performance.now();
   console.log('🔨 Building JUX frontend...\n');
 
@@ -100,14 +209,14 @@ async function buildProject(isServe = false, wsPort = 3001) {
 
     // Step 1: Generate documentation
     const docsStartTime = performance.now();
-    let docsTime = 0;
+    let docsTime = 0; // ✅ Declare with default value
     console.log('📚 Generating documentation...');
     try {
       await generateDocs(PATHS.juxLib);
       docsTime = performance.now() - docsStartTime;
       console.log(`✅ Documentation generated (${docsTime.toFixed(0)}ms)\n`);
     } catch (error) {
-      docsTime = performance.now() - docsStartTime;
+      docsTime = performance.now() - docsStartTime; // ✅ Still calculate time even on error
       console.warn(`⚠️  Failed to generate docs (${docsTime.toFixed(0)}ms):`, error.message);
     }
 
@@ -123,7 +232,7 @@ async function buildProject(isServe = false, wsPort = 3001) {
     const presetsTime = performance.now() - presetsStartTime;
     console.log(`⏱️  Presets copy time: ${presetsTime.toFixed(0)}ms\n`);
 
-    // Step 4: Copy project assets
+    // Step 4: Copy project assets (CSS, JS, images)
     const assetsStartTime = performance.now();
     await copyProjectAssets(PATHS.juxSource, PATHS.frontendDist);
     const assetsTime = performance.now() - assetsStartTime;
@@ -144,6 +253,7 @@ async function buildProject(isServe = false, wsPort = 3001) {
       process.exit(1);
     }
 
+    // ✅ Bundle and get the generated filename
     const bundleStartTime = performance.now();
     const mainJsFilename = await bundleJuxFilesToRouter(PATHS.juxSource, PATHS.frontendDist, {
       routePrefix: ''
@@ -173,14 +283,16 @@ async function buildProject(isServe = false, wsPort = 3001) {
       };
     });
 
+    // ✅ Generate unified index.html
     const indexStartTime = performance.now();
-    generateIndexHtml(PATHS.frontendDist, routes, mainJsFilename, wsPort);
+    generateIndexHtml(PATHS.frontendDist, routes, mainJsFilename);
     const indexTime = performance.now() - indexStartTime;
 
     const totalBuildTime = performance.now() - buildStartTime;
 
     console.log(`\n✅ Bundled ${projectJuxFiles.length} page(s) → ${PATHS.frontendDist}/${mainJsFilename}\n`);
 
+    // ✅ Build summary with timing breakdown
     console.log(`📊 Build Summary:`);
     console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
     console.log(`   Documentation:     ${docsTime.toFixed(0)}ms`);
@@ -193,6 +305,7 @@ async function buildProject(isServe = false, wsPort = 3001) {
     console.log(`   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
     console.log(`   Total build time:  ${totalBuildTime.toFixed(0)}ms\n`);
 
+    // Show usage
     if (!isServe) {
       console.log('📦 Serve from your backend:');
       console.log(`   Express:  app.use(express.static('jux-dist'))`);
@@ -215,102 +328,7 @@ async function buildProject(isServe = false, wsPort = 3001) {
 }
 
 (async () => {
-  if (command === 'create') {
-    const projectName = process.argv[3] || 'my-jux-app';
-    const projectPath = path.join(PATHS.projectRoot, projectName);
-
-    console.log(`
-╔═══════════════════════════════════════════════════════╗
-║                                                       ║
-║   🎨  Welcome to JUX                                  ║
-║                                                       ║
-║   Creating your new JUX project...                   ║
-║                                                       ║
-╚═══════════════════════════════════════════════════════╝
-`);
-
-    if (fs.existsSync(projectPath)) {
-      console.error(`❌ Directory "${projectName}" already exists.`);
-      console.error(`   Please choose a different name or remove the existing directory.\n`);
-      process.exit(1);
-    }
-
-    try {
-      const { execSync } = await import('child_process');
-
-      console.log(`📁 Creating directory: ${projectName}`);
-      fs.mkdirSync(projectPath, { recursive: true });
-      process.chdir(projectPath);
-
-      console.log(`📦 Initializing package.json...`);
-      const packageJson = {
-        name: projectName,
-        version: '0.1.0',
-        type: 'module',
-        scripts: {
-          dev: 'jux serve',
-          build: 'jux build'
-        },
-        dependencies: {
-          juxscript: 'latest'  // ✅ Changed from '^1.0.8' to 'latest'
-        }
-      };
-      fs.writeFileSync('package.json', JSON.stringify(packageJson, null, 2));
-      console.log(`   ✓ package.json created`);
-
-      console.log(`\n📥 Installing juxscript...\n`);
-      try {
-        execSync('npm install', { stdio: 'inherit' });
-        console.log(`\n   ✓ Dependencies installed`);
-      } catch (err) {
-        console.error(`\n   ⚠️  npm install failed, but continuing...`);
-      }
-
-      console.log(`\n🎨 Initializing JUX project structure...`);
-      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`);
-      console.log(`   ✓ .gitignore created`);
-
-      console.log(`
-╔═══════════════════════════════════════════════════════╗
-║                                                       ║
-║   ✅  Project created successfully!                   ║
-║                                                       ║
-╚═══════════════════════════════════════════════════════╝
-
-📚 Resources:
-   Documentation:  [coming soon]
-   GitHub:         https://github.com/juxscript/jux
-   Examples:       https://github.com/juxscript/examples
-
-⭐ If you find JUX useful, please star us on GitHub!
-🔒 Security: Report issues to security@juxscript.com [placeholder]
-
-Say goodbye to markup </</>>>. 
-Happy javascripting your frontend! 🎉
-
-Next steps, run: cd ${projectName} && npm run dev
-`);
-
-    } catch (err) {
-      console.error(`\n❌ Project creation failed:`, err.message);
-
-      if (fs.existsSync(projectPath)) {
-        try {
-          process.chdir('..');
-          fs.rmSync(projectPath, { recursive: true, force: true });
-          console.log(`   ✓ Cleaned up failed project directory\n`);
-        } catch (cleanupErr) {
-          console.error(`   ⚠️  Could not clean up directory\n`);
-        }
-      }
-
-      process.exit(1);
-    }
-
-  } else if (command === 'init') {
+  if (command === 'init') {
     console.log('🎨 Initializing JUX project...\n');
 
     const juxDir = PATHS.juxSource;
@@ -320,8 +338,10 @@ Next steps, run: cd ${projectName} && npm run dev
       process.exit(1);
     }
 
+    // Create 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');
 
@@ -329,6 +349,7 @@ Next steps, run: cd ${projectName} && npm run dev
       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);
@@ -341,6 +362,7 @@ Next steps, run: cd ${projectName} && npm run dev
       }
     }
 
+    // Copy entire presets folder to jux/presets/ (excluding jux.jux)
     const presetsSrc = path.join(PATHS.packageRoot, 'presets');
     const presetsDest = path.join(juxDir, 'presets');
 
@@ -354,6 +376,7 @@ Next steps, run: cd ${projectName} && npm run dev
           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;
           }
@@ -378,51 +401,37 @@ Next steps, run: cd ${projectName} && npm run dev
       }
     }
 
+    // Create package.json if it doesn't exist
     const pkgPath = path.join(PATHS.projectRoot, 'package.json');
     if (!fs.existsSync(pkgPath)) {
-      // ✅ Get project name from current directory or default
-      const projectName = path.basename(PATHS.projectRoot).toLowerCase().replace(/[^a-z0-9-]/g, '-');
-
       const pkgContent = {
-        "name": projectName,
-        "version": "0.1.0",
+        "name": "my-jux-project",
+        "version": "1.0.0",
         "type": "module",
         "scripts": {
-          "dev": "jux serve",
-          "build": "jux build"
+          "build": "jux build",
+          "serve": "jux serve"
         },
         "dependencies": {
-          "juxscript": "latest"  // ✅ Always use latest stable
+          "juxscript": "^1.0.8"
         }
       };
       fs.writeFileSync(pkgPath, JSON.stringify(pkgContent, null, 2));
       console.log('+ Created package.json');
     }
 
+    // Create .gitignore
     const gitignorePath = path.join(PATHS.projectRoot, '.gitignore');
-    const gitignoreContent = `jux-dist/\nnode_modules/\n.DS_Store\n`;
+    const gitignoreContent = `jux-dist/
+node_modules/
+.DS_Store
+`;
 
     if (!fs.existsSync(gitignorePath)) {
       fs.writeFileSync(gitignorePath, gitignoreContent);
       console.log('+ Created .gitignore');
     }
 
-    // ✅ Create actual juxconfig.js (not just example)
-    const configSrc = path.join(PATHS.packageRoot, 'juxconfig.example.js');
-    const configDest = path.join(PATHS.projectRoot, 'juxconfig.js');
-
-    if (fs.existsSync(configSrc) && !fs.existsSync(configDest)) {
-      fs.copyFileSync(configSrc, configDest);
-      console.log('+ Created juxconfig.js (customize as needed)');
-    }
-
-    // Also copy example as reference
-    const configExampleDest = path.join(PATHS.projectRoot, 'juxconfig.example.js');
-    if (fs.existsSync(configSrc) && !fs.existsSync(configExampleDest)) {
-      fs.copyFileSync(configSrc, configExampleDest);
-      console.log('+ Created juxconfig.example.js (reference)');
-    }
-
     console.log('\n✅ JUX project initialized!\n');
     console.log('Next steps:');
     console.log('  npm install              # Install dependencies');
@@ -430,15 +439,18 @@ Next steps, run: cd ${projectName} && npm run dev
     console.log('Check out the docs: https://juxscript.com/docs\n');
 
   } else if (command === 'build') {
+    // ✅ Always builds router bundle
     await buildProject(false);
     console.log(`✅ Build complete: ${PATHS.frontendDist}`);
 
   } else if (command === 'serve') {
-    const httpPort = parseInt(process.argv[3]) || config.ports.http;
-    const wsPort = parseInt(process.argv[4]) || config.ports.ws;
+    // ✅ Always serves router bundle
+    await buildProject(true);
+
+    // Parse port arguments: npx jux serve [httpPort] [wsPort]
+    const httpPort = parseInt(process.argv[3]) || 3000;
+    const wsPort = parseInt(process.argv[4]) || 3001;
 
-    await runBootstrap(config.bootstrap);
-    await buildProject(true, wsPort);
     await start(httpPort, wsPort);
 
   } else {
@@ -446,15 +458,39 @@ Next steps, run: cd ${projectName} && npm run dev
 JUX CLI - A JavaScript UX authorship platform
 
 Usage:
-  npx jux create [name]     Create a new JUX project
-  npx jux init              Initialize JUX in current directory
+  npx jux init              Initialize a new JUX project
   npx jux build             Build router bundle to ./jux-dist/
   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
+  └── 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 create my-app     Create new project
-  npx jux serve             Dev server (ports 3000/3001)
-  npx jux serve 8080 8081   Custom ports
+  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
     `);
   }
 })();

package/lib/components/docs-data.json

@@ -2053,5 +2053,5 @@
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-28T20:10:47.892Z"
+  "lastUpdated": "2026-01-28T20:46:06.367Z"
 }

package/machinery/compiler.js

@@ -673,12 +673,16 @@ render();
  * 
  * @param {string} distDir - Destination directory
  * @param {Array<{path: string, functionName: string}>} routes - Route definitions
- * @param {string} mainJsFilename - The generated main.js filename
- * @param {number} wsPort - WebSocket port for hot reload
+ * @param {string} mainJsFilename - The generated main.js filename (e.g., 'main.1234567890.js')
  */
-export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js', wsPort = 3001) {
+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>
@@ -693,62 +697,6 @@ export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js', w
   <div id="app"></div>
   ${importMapScript}
   <script type="module" src="/${mainJsFilename}"></script>
-  
-  <!-- Hot Reload Script -->
-  <script>
-    (function() {
-      const ws = new WebSocket('ws://' + location.hostname + ':${wsPort}');
-      
-      ws.onopen = () => {
-        console.log('🔌 Hot reload connected');
-      };
-      
-      ws.onmessage = (event) => {
-        const data = JSON.parse(event.data);
-        
-        if (data.type === 'reload') {
-          console.log('🔄 Hot reload triggered - reloading page...');
-          location.reload();
-        } else if (data.type === 'css-reload') {
-          console.log('🎨 CSS hot reload:', data.path);
-          
-          // Find all link tags pointing to this CSS file
-          const links = document.querySelectorAll('link[rel="stylesheet"]');
-          links.forEach(link => {
-            if (link.href.includes(data.path)) {
-              const newLink = link.cloneNode();
-              newLink.href = data.path + '?t=' + Date.now();
-              link.parentNode.insertBefore(newLink, link.nextSibling);
-              setTimeout(() => link.remove(), 100);
-            }
-          });
-          
-          // Also reload any @import in style tags
-          const styles = document.querySelectorAll('style');
-          styles.forEach(style => {
-            if (style.textContent.includes(data.path)) {
-              style.textContent = style.textContent.replace(
-                new RegExp(data.path + '(\\\\?t=\\\\d+)?', 'g'),
-                data.path + '?t=' + Date.now()
-              );
-            }
-          });
-        }
-      };
-      
-      ws.onclose = () => {
-        console.log('🔌 Hot reload disconnected');
-        // Try to reconnect after 1 second
-        setTimeout(() => {
-          location.reload();
-        }, 1000);
-      };
-      
-      ws.onerror = (error) => {
-        console.error('🔌 Hot reload error:', error);
-      };
-    })();
-  </script>
 </body>
 </html>`;
 

package/machinery/server.js

@@ -149,66 +149,4 @@ async function serve(httpPort = 3000, wsPort = 3001, distDir = './jux-dist') {
 
 export async function start(httpPort = 3000, wsPort = 3001) {
   return serve(httpPort, wsPort, './jux-dist');
-}
-
-function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js') {
-  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>
-  
-  <!-- Hot Reload Script -->
-  <script>
-    (function() {
-      const ws = new WebSocket('ws://' + location.hostname + ':${wsPort}');
-      
-      ws.onmessage = (event) => {
-        const data = JSON.parse(event.data);
-        
-        if (data.type === 'reload') {
-          console.log('🔄 Hot reload triggered');
-          location.reload();
-        } else if (data.type === 'css-reload') {
-          console.log('🎨 CSS hot reload:', data.path);
-          
-          // Find all link tags pointing to this CSS file
-          const links = document.querySelectorAll('link[rel="stylesheet"]');
-          links.forEach(link => {
-            if (link.href.includes(data.path)) {
-              const newLink = link.cloneNode();
-              newLink.href = data.path + '?t=' + Date.now();
-              link.parentNode.insertBefore(newLink, link.nextSibling);
-              setTimeout(() => link.remove(), 100);
-            }
-          });
-          
-          // Also reload any @import in style tags
-          const styles = document.querySelectorAll('style');
-          styles.forEach(style => {
-            if (style.textContent.includes(data.path)) {
-              style.textContent = style.textContent.replace(
-                new RegExp(data.path + '(\\?t=\\d+)?', 'g'),
-                data.path + '?t=' + Date.now()
-              );
-            }
-          });
-        }
-      };
-      
-      ws.onclose = () => {
-        console.log('🔌 Hot reload disconnected');
-      };
-    })();
-  </script>
-</body>
-</html>`;
-
-  return html;
 }

package/machinery/watcher.js

@@ -1,6 +1,10 @@
 import fs from 'fs';
 import path from 'path';
-import { bundleJuxFilesToRouter } from './compiler.js';
+import {
+  copyLibToOutput,
+  bundleJuxFilesToRouter,
+  generateIndexHtml
+} from './compiler.js';
 
 let isRebuilding = false;
 let rebuildQueued = false;
@@ -115,130 +119,53 @@ async function fullRebuild(juxSource, distDir) {
  * Start watching for file changes and rebuild on change
  */
 export function startWatcher(juxSource, distDir, wsClients) {
-  console.log(`👀 Watching for changes in: ${juxSource}`);
-
-  // Debounce map to prevent multiple rapid triggers
-  const debounceTimers = new Map();
-
-  function debounce(key, fn, delay = 100) {
-    if (debounceTimers.has(key)) {
-      clearTimeout(debounceTimers.get(key));
+  console.log(`👀 Watching: ${juxSource}`);
+
+  const watcher = fs.watch(juxSource, { recursive: true }, async (eventType, filename) => {
+    // Ignore non-.jux files and certain patterns
+    if (!filename ||
+      !filename.endsWith('.jux') ||
+      filename.includes('node_modules') ||
+      filename.includes('jux-dist') ||
+      filename.startsWith('.')) {
+      return;
     }
-    debounceTimers.set(key, setTimeout(() => {
-      debounceTimers.delete(key);
-      fn();
-    }, delay));
-  }
-
-  // Recursively watch directories
-  function watchRecursive(dir) {
-    if (!fs.existsSync(dir)) return;
-
-    try {
-      fs.watch(dir, { recursive: true }, (eventType, filename) => {
-        if (!filename) return;
-
-        const filePath = path.join(dir, filename);
-        const ext = path.extname(filename);
-
-        // Skip certain patterns
-        if (filename.includes('node_modules') ||
-          filename.includes('jux-dist') ||
-          filename.includes('.git') ||
-          filename.startsWith('.')) {
-          return;
-        }
-
-        // Debounce to avoid multiple rapid events
-        debounce(filePath, async () => {
-          // ✅ Handle CSS files
-          if (ext === '.css') {
-            console.log(`\n🎨 CSS changed: ${filename}`);
-
-            try {
-              const relativePath = path.relative(juxSource, filePath);
-              const destPath = path.join(distDir, relativePath);
-              const destDir = path.dirname(destPath);
-
-              if (!fs.existsSync(destDir)) {
-                fs.mkdirSync(destDir, { recursive: true });
-              }
-
-              fs.copyFileSync(filePath, destPath);
-              console.log(`   ✓ Copied to: ${path.relative(process.cwd(), destPath)}`);
-
-              // Notify browser to reload CSS
-              wsClients.forEach(client => {
-                if (client.readyState === 1) {
-                  client.send(JSON.stringify({
-                    type: 'css-reload',
-                    path: `/${relativePath}`
-                  }));
-                }
-              });
-
-              console.log(`   🔄 Browser CSS reloaded\n`);
-            } catch (err) {
-              console.error(`   ❌ CSS copy failed:`, err.message);
-            }
-            return;
-          }
-
-          // ✅ Handle .jux files
-          if (ext === '.jux') {
-            console.log(`\n📝 File changed: ${filename}`);
-            console.log('   🔨 Rebuilding...');
-
-            try {
-              await bundleJuxFilesToRouter(juxSource, distDir, { routePrefix: '' });
-
-              wsClients.forEach(client => {
-                if (client.readyState === 1) {
-                  client.send(JSON.stringify({ type: 'reload' }));
-                }
-              });
-
-              console.log('   ✅ Rebuild complete');
-              console.log('   🔄 Browser reloaded\n');
-            } catch (err) {
-              console.error('   ❌ Rebuild failed:', err.message);
-            }
-          }
 
-          // ✅ Handle .js files (non-_dev-imports.js)
-          if (ext === '.js' && !filename.includes('_dev-imports.js')) {
-            console.log(`\n📦 JS asset changed: ${filename}`);
+    // Debounce: If already rebuilding, queue another rebuild
+    if (isRebuilding) {
+      rebuildQueued = true;
+      return;
+    }
 
-            try {
-              const relativePath = path.relative(juxSource, filePath);
-              const destPath = path.join(distDir, relativePath);
-              const destDir = path.dirname(destPath);
+    isRebuilding = true;
+    console.log(`\n📝 File changed: ${filename}`);
 
-              if (!fs.existsSync(destDir)) {
-                fs.mkdirSync(destDir, { recursive: true });
-              }
+    // Rebuild the entire bundle
+    const success = await fullRebuild(juxSource, distDir);
 
-              fs.copyFileSync(filePath, destPath);
-              console.log(`   ✓ Copied to: ${path.relative(process.cwd(), destPath)}`);
+    isRebuilding = false;
 
-              wsClients.forEach(client => {
-                if (client.readyState === 1) {
-                  client.send(JSON.stringify({ type: 'reload' }));
-                }
-              });
+    // Notify all WebSocket clients to reload
+    if (success && wsClients && wsClients.length > 0) {
+      console.log(`🔌 Notifying ${wsClients.length} client(s) to reload`);
 
-              console.log(`   🔄 Browser reloaded\n`);
-            } catch (err) {
-              console.error(`   ❌ JS copy failed:`, err.message);
-            }
+      // ✅ Add small delay to ensure file is fully written
+      setTimeout(() => {
+        wsClients.forEach(client => {
+          if (client.readyState === 1) { // OPEN
+            client.send(JSON.stringify({ type: 'reload' }));
           }
         });
-      });
-    } catch (err) {
-      console.error(`   ⚠️  Failed to watch ${dir}:`, err.message);
+      }, 100);
     }
-  }
 
-  // Start watching
-  watchRecursive(juxSource);
+    // Process queued rebuild if needed
+    if (rebuildQueued) {
+      rebuildQueued = false;
+      console.log('🔄 Processing queued rebuild...');
+      setTimeout(() => watcher.emit('change', 'change', filename), 500);
+    }
+  });
+
+  return watcher;
 }

package/package.json

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

package/machinery/config.js

@@ -1,94 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-/**
- * Default JUX configuration
- */
-export const defaultConfig = {
-    // Source directory for .jux files
-    sourceDir: 'jux',
-
-    // Output directory for built files
-    distDir: 'jux-dist',
-
-    // Dev server ports
-    ports: {
-        http: 3000,
-        ws: 3001
-    },
-
-    // Build options
-    build: {
-        minify: false,
-        sourcemap: true
-    },
-
-    // Bootstrap functions (run before app starts)
-    bootstrap: []
-};
-
-/**
- * Load juxconfig.js from project root
- * @param {string} projectRoot - Project root directory
- * @returns {object} Merged configuration
- */
-export async function loadConfig(projectRoot) {
-    const configPath = path.join(projectRoot, 'juxconfig.js');
-
-    if (!fs.existsSync(configPath)) {
-        console.log('ℹ️  No juxconfig.js found, using defaults');
-        return defaultConfig;
-    }
-
-    try {
-        console.log(`📋 Loading config from: ${configPath}`);
-
-        // Dynamic import for ES modules
-        const configUrl = `file://${configPath}`;
-        const { default: userConfig } = await import(configUrl);
-
-        // Merge with defaults
-        const config = {
-            ...defaultConfig,
-            ...userConfig,
-            ports: {
-                ...defaultConfig.ports,
-                ...(userConfig.ports || {})
-            },
-            build: {
-                ...defaultConfig.build,
-                ...(userConfig.build || {})
-            }
-        };
-
-        console.log(`   ✓ Config loaded`);
-        console.log(`   Source: ${config.sourceDir}`);
-        console.log(`   Output: ${config.distDir}\n`);
-
-        return config;
-    } catch (err) {
-        console.warn(`⚠️  Failed to load juxconfig.js:`, err.message);
-        console.warn(`   Using default configuration\n`);
-        return defaultConfig;
-    }
-}
-
-/**
- * Run bootstrap functions from config
- * @param {Array<Function>} bootstrapFns - Array of bootstrap functions
- */
-export async function runBootstrap(bootstrapFns) {
-    if (!bootstrapFns || bootstrapFns.length === 0) return;
-
-    console.log(`🚀 Running ${bootstrapFns.length} bootstrap function(s)...`);
-
-    for (const fn of bootstrapFns) {
-        try {
-            await fn();
-        } catch (err) {
-            console.error(`   ❌ Bootstrap function failed:`, err.message);
-        }
-    }
-
-    console.log(`   ✓ Bootstrap complete\n`);
-}