juxscript 1.0.50 → 1.0.52

package/bin/cli.js

@@ -147,6 +147,10 @@ import {
 } from '../machinery/compiler.js';
 import { generateDocs } from '../machinery/doc-generator.js';
 import { start } from '../machinery/server.js';
+import { loadConfig, runBootstrap } from '../machinery/config.js';
+
+// ✅ Load config BEFORE setting up PATHS
+const config = await loadConfig(process.cwd());
 
 // CLEAR PATH CONTRACT - CONVENTIONS
 const PATHS = {
@@ -158,25 +162,25 @@ const PATHS = {
 
   // Where user's .jux source files live (CONVENTION: ./jux/)
   get juxSource() {
-    return path.join(this.projectRoot, 'jux');
+    return path.join(this.projectRoot, config.sourceDir);
   },
 
   // Where jux lib files are (components, layouts, etc.)
   get juxLib() {
-    return path.join(this.packageRoot, 'lib');
+    return path.resolve(__dirname, '..', 'lib');
   },
 
   // Where frontend build output goes (CONVENTION: ./jux-dist/)
   get frontendDist() {
-    return path.join(this.projectRoot, 'jux-dist');
+    return path.join(this.projectRoot, config.distDir);
   }
 };
 
 console.log('📍 JUX Paths:');
 console.log(`   Package:  ${PATHS.packageRoot}`);
 console.log(`   Project:  ${PATHS.projectRoot}`);
-console.log(`   Source:   ${PATHS.juxSource}`);
-console.log(`   Output:   ${PATHS.frontendDist}`);
+console.log(`   Source:   ${PATHS.juxSource} (from config: ${config.sourceDir})`);
+console.log(`   Output:   ${PATHS.frontendDist} (from config: ${config.distDir})`);
 console.log(`   Lib:      ${PATHS.juxLib}\n`);
 
 /**
@@ -208,7 +212,7 @@ function findJuxFiles(dir, fileList = []) {
  * 
  * @param {boolean} isServe - Whether building for dev server
  */
-async function buildProject(isServe = false) {
+async function buildProject(isServe = false, wsPort = 3001) {
   const buildStartTime = performance.now();
   console.log('🔨 Building JUX frontend...\n');
 
@@ -430,9 +434,9 @@ jux.paragraph('counter')
       console.log('+ Created package.json');
     }
 
-    // Create .gitignore
+    // Create .gitignore with config.distDir
     const gitignorePath = path.join(PATHS.projectRoot, '.gitignore');
-    const gitignoreContent = `.jux/\nnode_modules/\n.DS_Store\n`;  // ✅ Changed
+    const gitignoreContent = `${config.distDir}/\nnode_modules/\n.DS_Store\n`;
 
     if (!fs.existsSync(gitignorePath)) {
       fs.writeFileSync(gitignorePath, gitignoreContent);
@@ -458,8 +462,8 @@ jux.paragraph('counter')
 
     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(`  ${config.sourceDir}/              # Your source files`);
+    console.log(`  ${config.distDir}/                # Build output (git-ignored)`);
     console.log('  juxconfig.js      # Configuration');
     console.log('  package.json      # Dependencies\n');
     console.log('Next steps:');
@@ -467,19 +471,19 @@ jux.paragraph('counter')
     console.log('  npm run dev       # Start dev server\n');
 
   } else if (command === 'build') {
-    // ✅ Always builds router bundle
+    // ✅ Run bootstrap before build
+    await runBootstrap(config.bootstrap);
     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;
+    // ✅ Use ports from config
+    const httpPort = parseInt(process.argv[3]) || config.ports.http;
+    const wsPort = parseInt(process.argv[4]) || config.ports.ws;
 
-    await start(httpPort, wsPort);
+    await runBootstrap(config.bootstrap);
+    await buildProject(true, wsPort);
+    await start(httpPort, wsPort, PATHS.frontendDist);
 
   } else {
     console.log(`
@@ -488,16 +492,16 @@ 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 build             Build router bundle to ./.jux/
+  npx jux build             Build router bundle to ${config.distDir}/
   npx jux serve [http] [ws] Start dev server with hot reload
 
 Project Structure:
   my-project/
-  ├── .jux/            # Build output (git-ignored, like .git)
+  ├── ${config.distDir}/           # Build output (git-ignored, like .git)
   │   ├── lib/
   │   ├── main.js
   │   └── index.html
-  ├── jux/             # Your .jux source files
+  ├── ${config.sourceDir}/            # Your .jux source files
   │   ├── index.jux
   │   ├── layout.css
   │   └── layout.jux

package/machinery/config.js

@@ -1,709 +1,86 @@
-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);
-    }
-  });
+import fs from 'fs';
+import { fileURLToPath } from 'url';
 
-  return fileList;
-}
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 /**
- * Copy non-TypeScript files (CSS, JSON, JS, SVG, etc.)
- * 
- * @param {string} src - Source directory
- * @param {string} dest - Destination directory
+ * Default JUX configuration
  */
-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);
-      }
-    }
-  }
-}
+export const defaultConfig = {
+  // Source directory for .jux files
+  sourceDir: 'jux',
+  
+  // Output directory for built files (hidden like .git)
+  distDir: '.jux',
+  
+  // Dev server ports
+  ports: {
+    http: 3000,
+    ws: 3001
+  },
+  
+  // Build options
+  build: {
+    minify: false,
+    sourcemap: true
+  },
+  
+  // Bootstrap functions (run before app starts)
+  bootstrap: []
+};
 
 /**
- * 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
+ * Load configuration from juxconfig.js or use defaults
+ * @param {string} projectRoot - Project root directory
+ * @returns {Promise<object>} Configuration object
  */
-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);
-      }
+export async function loadConfig(projectRoot) {
+  const configPath = path.join(projectRoot, 'juxconfig.js');
+  
+  if (fs.existsSync(configPath)) {
+    try {
+      const configModule = await import(`file://${configPath}`);
+      const userConfig = configModule.default || configModule;
+      
+      return {
+        ...defaultConfig,
+        ...userConfig,
+        ports: { ...defaultConfig.ports, ...(userConfig.ports || {}) },
+        build: { ...defaultConfig.build, ...(userConfig.build || {}) }
+      };
+    } catch (err) {
+      console.warn(`⚠️  Failed to load juxconfig.js: ${err.message}`);
+      console.warn(`   Using default configuration\n`);
+      return defaultConfig;
     }
   }
-
-  return fileList;
+  
+  console.log('ℹ️  No juxconfig.js found, using defaults');
+  return defaultConfig;
 }
 
 /**
- * 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')
+ * Run bootstrap functions from config
+ * @param {Function[]} bootstrapFunctions - Array of async functions to run
  */
-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');
+export async function runBootstrap(bootstrapFunctions = []) {
+  if (!Array.isArray(bootstrapFunctions) || bootstrapFunctions.length === 0) {
     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');
+  console.log('🚀 Running bootstrap functions...\n');
   
-  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'];
+  for (const fn of bootstrapFunctions) {
+    if (typeof fn === 'function') {
+      try {
+        await fn();
+      } catch (err) {
+        console.error(`❌ Bootstrap function failed:`, err.message);
+      }
+    }
   }
   
-  // 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');
+  console.log('✅ Bootstrap complete\n');
 }

package/machinery/server.js

@@ -47,7 +47,7 @@ async function tryPort(startPort, maxAttempts = 5, reservedPorts = []) {
   throw new Error(`Could not find available port after ${maxAttempts} attempts starting from ${startPort}`);
 }
 
-async function serve(httpPort = 3000, wsPort = 3001, distDir = './jux-dist') {
+async function serve(httpPort = 3000, wsPort = 3001, distDir = './.jux') {
   const app = express();
   const absoluteDistDir = path.resolve(distDir);
   const projectRoot = path.resolve('.');
@@ -147,6 +147,6 @@ async function serve(httpPort = 3000, wsPort = 3001, distDir = './jux-dist') {
   return { server, httpPort: availableHttpPort, wsPort: availableWsPort };
 }
 
-export async function start(httpPort = 3000, wsPort = 3001) {
-  return serve(httpPort, wsPort, './jux-dist');
+export async function start(httpPort = 3000, wsPort = 3001, distDir = './.jux') {
+  return serve(httpPort, wsPort, distDir);
 }

package/package.json

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

package/presets/{jux.jux → default/index.jux}

@@ -1,5 +1,5 @@
 import { jux, state } from 'juxscript';
-import { initializeGrid } from '../presets/default/layout.jux';
+import { initializeGrid } from 'layout.jux';
 
 // Initialize the grid layout - this executes the rendering
 const grid = initializeGrid();

package/presets/default/layout.jux

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