juxscript 1.0.39 → 1.0.41

package/bin/cli.js

@@ -13,10 +13,14 @@ 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 = {
   // Where jux package is installed (in node_modules/juxscript or local dev)
@@ -25,20 +29,14 @@ const PATHS = {
   // Where the user's project root is (where they run `npx jux`)
   projectRoot: process.cwd(),
 
-  // Where user's .jux source files live (CONVENTION: ./jux/)
-  get juxSource() {
-    return path.join(this.projectRoot, 'jux');
-  },
+  // Where user's .jux source files live (from config or default)
+  juxSource: path.join(process.cwd(), config.sourceDir),
 
   // Where jux lib files are (components, layouts, etc.)
-  get juxLib() {
-    return path.join(this.packageRoot, 'lib');
-  },
+  juxLib: path.resolve(__dirname, '..', 'lib'),
 
-  // Where frontend build output goes (CONVENTION: ./jux-dist/)
-  get frontendDist() {
-    return path.join(this.projectRoot, 'jux-dist');
-  }
+  // Where frontend build output goes (from config or default)
+  frontendDist: path.join(process.cwd(), config.distDir)
 };
 
 console.log('📍 JUX Paths:');
@@ -80,8 +78,9 @@ 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) {
+async function buildProject(isServe = false, wsPort = 3001) {
   const buildStartTime = performance.now();
   console.log('🔨 Building JUX frontend...\n');
 
@@ -101,14 +100,14 @@ async function buildProject(isServe = false) {
 
     // Step 1: Generate documentation
     const docsStartTime = performance.now();
-    let docsTime = 0; // ✅ Declare with default value
+    let docsTime = 0;
     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; // ✅ Still calculate time even on error
+      docsTime = performance.now() - docsStartTime;
       console.warn(`⚠️  Failed to generate docs (${docsTime.toFixed(0)}ms):`, error.message);
     }
 
@@ -124,7 +123,7 @@ async function buildProject(isServe = false) {
     const presetsTime = performance.now() - presetsStartTime;
     console.log(`⏱️  Presets copy time: ${presetsTime.toFixed(0)}ms\n`);
 
-    // Step 4: Copy project assets (CSS, JS, images)
+    // Step 4: Copy project assets
     const assetsStartTime = performance.now();
     await copyProjectAssets(PATHS.juxSource, PATHS.frontendDist);
     const assetsTime = performance.now() - assetsStartTime;
@@ -145,7 +144,6 @@ async function buildProject(isServe = false) {
       process.exit(1);
     }
 
-    // ✅ Bundle and get the generated filename
     const bundleStartTime = performance.now();
     const mainJsFilename = await bundleJuxFilesToRouter(PATHS.juxSource, PATHS.frontendDist, {
       routePrefix: ''
@@ -175,16 +173,14 @@ async function buildProject(isServe = false) {
       };
     });
 
-    // ✅ Generate unified index.html
     const indexStartTime = performance.now();
-    generateIndexHtml(PATHS.frontendDist, routes, mainJsFilename);
+    generateIndexHtml(PATHS.frontendDist, routes, mainJsFilename, wsPort);
     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`);
@@ -197,7 +193,6 @@ async function buildProject(isServe = false) {
     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'))`);
@@ -220,7 +215,106 @@ async function buildProject(isServe = false) {
 }
 
 (async () => {
-  if (command === 'init') {
+  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: '^1.0.8'
+        }
+      };
+      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!                   ║
+║                                                       ║
+╚═══════════════════════════════════════════════════════╝
+
+📂 Your project is ready at: ./${projectName}
+
+🚀 Next steps:
+   cd ${projectName}
+   npm run dev
+
+📚 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]
+
+Happy coding! 🎉
+`);
+
+    } 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') {
     console.log('🎨 Initializing JUX project...\n');
 
     const juxDir = PATHS.juxSource;
@@ -230,10 +324,8 @@ async function buildProject(isServe = false) {
       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');
 
@@ -241,7 +333,6 @@ async function buildProject(isServe = false) {
       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);
@@ -254,7 +345,6 @@ async function buildProject(isServe = false) {
       }
     }
 
-    // Copy entire presets folder to jux/presets/ (excluding jux.jux)
     const presetsSrc = path.join(PATHS.packageRoot, 'presets');
     const presetsDest = path.join(juxDir, 'presets');
 
@@ -268,7 +358,6 @@ async function buildProject(isServe = false) {
           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;
           }
@@ -293,37 +382,51 @@ async function buildProject(isServe = false) {
       }
     }
 
-    // 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": "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"  // ✅ Always use latest stable
         }
       };
       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/
-node_modules/
-.DS_Store
-`;
+    const gitignoreContent = `jux-dist/\nnode_modules/\n.DS_Store\n`;
 
     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');
@@ -331,18 +434,15 @@ node_modules/
     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') {
-    // ✅ 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;
+    const httpPort = parseInt(process.argv[3]) || config.ports.http;
+    const wsPort = parseInt(process.argv[4]) || config.ports.ws;
 
+    await runBootstrap(config.bootstrap);
+    await buildProject(true, wsPort);
     await start(httpPort, wsPort);
 
   } else {
@@ -350,39 +450,15 @@ node_modules/
 JUX CLI - A JavaScript UX authorship platform
 
 Usage:
-  npx jux init              Initialize a new JUX project
+  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-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 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/lib/components/docs-data.json

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

package/machinery/compiler.js

@@ -673,16 +673,12 @@ render();
  * 
  * @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')
+ * @param {string} mainJsFilename - The generated main.js filename
+ * @param {number} wsPort - WebSocket port for hot reload
  */
-export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js') {
+export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js', wsPort = 3001) {
   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>
@@ -697,6 +693,62 @@ export function generateIndexHtml(distDir, routes, mainJsFilename = 'main.js') {
   <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/config.js

@@ -0,0 +1,94 @@
+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`);
+}

package/machinery/server.js

@@ -149,4 +149,66 @@ 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,10 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import {
-  copyLibToOutput,
-  bundleJuxFilesToRouter,
-  generateIndexHtml
-} from './compiler.js';
+import { bundleJuxFilesToRouter } from './compiler.js';
 
 let isRebuilding = false;
 let rebuildQueued = false;
@@ -119,53 +115,130 @@ async function fullRebuild(juxSource, distDir) {
  * Start watching for file changes and rebuild on change
  */
 export function startWatcher(juxSource, distDir, wsClients) {
-  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;
-    }
+  console.log(`👀 Watching for changes in: ${juxSource}`);
+
+  // Debounce map to prevent multiple rapid triggers
+  const debounceTimers = new Map();
 
-    // Debounce: If already rebuilding, queue another rebuild
-    if (isRebuilding) {
-      rebuildQueued = true;
-      return;
+  function debounce(key, fn, delay = 100) {
+    if (debounceTimers.has(key)) {
+      clearTimeout(debounceTimers.get(key));
     }
+    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}`);
 
-    isRebuilding = true;
-    console.log(`\n📝 File changed: ${filename}`);
+            try {
+              const relativePath = path.relative(juxSource, filePath);
+              const destPath = path.join(distDir, relativePath);
+              const destDir = path.dirname(destPath);
 
-    // Rebuild the entire bundle
-    const success = await fullRebuild(juxSource, distDir);
+              if (!fs.existsSync(destDir)) {
+                fs.mkdirSync(destDir, { recursive: true });
+              }
 
-    isRebuilding = false;
+              fs.copyFileSync(filePath, destPath);
+              console.log(`   ✓ Copied to: ${path.relative(process.cwd(), destPath)}`);
 
-    // Notify all WebSocket clients to reload
-    if (success && wsClients && wsClients.length > 0) {
-      console.log(`🔌 Notifying ${wsClients.length} client(s) to reload`);
+              wsClients.forEach(client => {
+                if (client.readyState === 1) {
+                  client.send(JSON.stringify({ type: 'reload' }));
+                }
+              });
 
-      // ✅ Add small delay to ensure file is fully written
-      setTimeout(() => {
-        wsClients.forEach(client => {
-          if (client.readyState === 1) { // OPEN
-            client.send(JSON.stringify({ type: 'reload' }));
+              console.log(`   🔄 Browser reloaded\n`);
+            } catch (err) {
+              console.error(`   ❌ JS copy failed:`, err.message);
+            }
           }
         });
-      }, 100);
-    }
-
-    // Process queued rebuild if needed
-    if (rebuildQueued) {
-      rebuildQueued = false;
-      console.log('🔄 Processing queued rebuild...');
-      setTimeout(() => watcher.emit('change', 'change', filename), 500);
+      });
+    } catch (err) {
+      console.error(`   ⚠️  Failed to watch ${dir}:`, err.message);
     }
-  });
+  }
 
-  return watcher;
+  // Start watching
+  watchRecursive(juxSource);
 }

package/package.json

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

package/presets/default/layout.css

@@ -105,6 +105,15 @@ body {
   cursor: pointer;
 }
 
+/* ✅ Fix h1 inside logo - reset default heading styles */
+#appheader-logo h1 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+
 #appheader-nav {
   flex: 1;
   display: flex;

package/presets/default/layout.jux

@@ -1,9 +1,8 @@
 import { jux } from 'juxscript';
 
-// Import the layout styles
+// Import the layout styles - testing link.
 jux.include('../presets/default/layout.css');
 
-
 // ═══════════════════════════════════════════════════════════════════
 // GRID LAYOUT - INITIALIZATION FUNCTION
 // ═══════════════════════════════════════════════════════════════════