npm - juxscript - Versions diffs - 1.0.20 → 1.0.21 - Mend

juxscript 1.0.20 → 1.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/bin/cli.js +121 -72
package/lib/components/alert.ts +143 -92
package/lib/components/badge.ts +93 -94
package/lib/components/base/BaseComponent.ts +397 -0
package/lib/components/base/FormInput.ts +322 -0
package/lib/components/button.ts +40 -131
package/lib/components/card.ts +57 -79
package/lib/components/charts/areachart.ts +315 -0
package/lib/components/charts/barchart.ts +421 -0
package/lib/components/charts/doughnutchart.ts +263 -0
package/lib/components/charts/lib/BaseChart.ts +402 -0
package/lib/components/{chart-types.ts → charts/lib/chart-types.ts} +1 -1
package/lib/components/{chart-utils.ts → charts/lib/chart-utils.ts} +1 -1
package/lib/components/{chart.ts → charts/lib/chart.ts} +3 -3
package/lib/components/checkbox.ts +255 -204
package/lib/components/code.ts +31 -78
package/lib/components/container.ts +113 -130
package/lib/components/data.ts +37 -5
package/lib/components/datepicker.ts +180 -147
package/lib/components/dialog.ts +218 -221
package/lib/components/divider.ts +63 -87
package/lib/components/docs-data.json +498 -2404
package/lib/components/dropdown.ts +191 -236
package/lib/components/element.ts +196 -145
package/lib/components/fileupload.ts +253 -167
package/lib/components/guard.ts +92 -0
package/lib/components/heading.ts +31 -97
package/lib/components/helpers.ts +13 -6
package/lib/components/hero.ts +51 -114
package/lib/components/icon.ts +33 -120
package/lib/components/icons.ts +2 -1
package/lib/components/include.ts +76 -3
package/lib/components/input.ts +155 -407
package/lib/components/kpicard.ts +16 -16
package/lib/components/list.ts +358 -261
package/lib/components/loading.ts +142 -211
package/lib/components/menu.ts +63 -152
package/lib/components/modal.ts +42 -129
package/lib/components/nav.ts +79 -101
package/lib/components/paragraph.ts +38 -102
package/lib/components/progress.ts +108 -166
package/lib/components/radio.ts +283 -234
package/lib/components/script.ts +19 -87
package/lib/components/select.ts +189 -199
package/lib/components/sidebar.ts +110 -141
package/lib/components/style.ts +19 -82
package/lib/components/switch.ts +254 -183
package/lib/components/table.ts +1078 -208
package/lib/components/tabs.ts +42 -106
package/lib/components/theme-toggle.ts +73 -165
package/lib/components/tooltip.ts +85 -316
package/lib/components/write.ts +108 -127
package/lib/jux.ts +67 -41
package/machinery/build.js +466 -0
package/machinery/compiler.js +354 -105
package/machinery/server.js +23 -100
package/machinery/watcher.js +153 -130
package/package.json +1 -1
package/presets/base.css +1166 -0
package/presets/notion.css +2 -1975
package/lib/adapters/base-adapter.js +0 -35
package/lib/adapters/index.js +0 -33
package/lib/adapters/mysql-adapter.js +0 -65
package/lib/adapters/postgres-adapter.js +0 -70
package/lib/adapters/sqlite-adapter.js +0 -56
package/lib/components/areachart.ts +0 -1128
package/lib/components/areachartsmooth.ts +0 -1380
package/lib/components/barchart.ts +0 -1322
package/lib/components/doughnutchart.ts +0 -1259
package/lib/components/footer.ts +0 -165
package/lib/components/header.ts +0 -187
package/lib/components/layout.ts +0 -239
package/lib/components/main.ts +0 -137
package/lib/layouts/default.jux +0 -8
package/lib/layouts/figma.jux +0 -0
/package/lib/{themes → components/charts/lib}/charts.js +0 -0

package/machinery/compiler.js CHANGED Viewed

@@ -19,111 +19,6 @@ function generateImportMapScript() {
 </script>`;
 }
-/**
- * Compile a .jux file to .js and .html
- *
- * @param {string} juxFilePath - Path to the .jux file
- * @param {Object} options - Compilation options
- * @param {string} options.distDir - Output directory
- * @param {string} options.projectRoot - Project root directory
- * @param {boolean} options.isServe - Whether serving for development
- * @returns {Promise<{jsOutputPath: string, htmlOutputPath: string}>}
- */
-export async function compileJuxFile(juxFilePath, options = {}) {
-  const { distDir, projectRoot, isServe = false } = options;
-  const relativePath = path.relative(projectRoot, juxFilePath);
-  const parsedPath = path.parse(relativePath);
-  // Output paths
-  const outputDir = path.join(distDir, parsedPath.dir);
-  const jsOutputPath = path.join(outputDir, `${parsedPath.name}.js`);
-  const htmlOutputPath = path.join(outputDir, `${parsedPath.name}.html`);
-  // Ensure output directory exists
-  if (!fs.existsSync(outputDir)) {
-    fs.mkdirSync(outputDir, { recursive: true });
-  }
-  console.log(`📝 Compiling: ${relativePath}`);
-  // Read the .jux file
-  const juxContent = fs.readFileSync(juxFilePath, 'utf-8');
-  // Calculate depth for relative paths
-  const depth = parsedPath.dir.split(path.sep).filter(p => p).length;
-  const libPath = depth === 0 ? './lib/jux.js' : '../'.repeat(depth) + 'lib/jux.js';
-  // Transform imports
-  let transformedContent = juxContent;
-  // Replace common import patterns with calculated path
-  transformedContent = transformedContent.replace(
-    /from\s+['"]\.\.?\/lib\/jux\.js['"]/g,
-    `from '${libPath}'`
-  );
-  // Only inject import if:
-  // 1. File is not empty (ignoring whitespace and comments)
-  // 2. File uses 'jux.' but has no import statement
-  const contentWithoutComments = transformedContent
-    .replace(/\/\*[\s\S]*?\*\//g, '') // Remove block comments
-    .replace(/\/\/.*/g, '')             // Remove line comments
-    .trim();
-  const hasContent = contentWithoutComments.length > 0;
-  const usesJux = /\bjux\./g.test(contentWithoutComments);
-  const hasImport = /import\s+.*from/.test(transformedContent);
-  if (hasContent && usesJux && !hasImport) {
-    transformedContent = `import { jux } from '${libPath}';\n\n${transformedContent}`;
-  }
-  // Write the transformed JS
-  fs.writeFileSync(jsOutputPath, transformedContent);
-  console.log(`  ✓ JS: ${path.relative(projectRoot, jsOutputPath)}`);
-  // Generate HTML with import map and correct script path
-  const scriptPath = `./${parsedPath.name}.js`;
-  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>${parsedPath.name}</title>
-</head>
-<body data-theme="">
-  <!-- App container -->
-  <div id="app" data-jux-page="${parsedPath.name}"></div>
-  ${importMapScript}
-  <script type="module" src="${scriptPath}"></script>
-  ${isServe ? `
-  <!-- Hot reload -->
-  <script type="module">
-    const ws = new WebSocket('ws://localhost:3001');
-    ws.onmessage = (msg) => {
-      const data = JSON.parse(msg.data);
-      if (data.type === 'reload') {
-        console.log('🔄 Reloading page...');
-        location.reload();
-      }
-    };
-    ws.onerror = () => console.warn('⚠️  WebSocket connection failed');
-  </script>
-  ` : ''}
-</body>
-</html>`;
-  fs.writeFileSync(htmlOutputPath, html);
-  console.log(`  ✓ HTML: ${path.relative(projectRoot, htmlOutputPath)}`);
-  return { jsOutputPath, htmlOutputPath };
-}
 /**
  * Copy and build the JUX library from TypeScript to JavaScript
  *
@@ -406,3 +301,357 @@ function findProjectFiles(dir, extensions, fileList = [], rootDir = dir, exclude
   return fileList;
 }
+/**
+ * Bundle all .jux files into a single router-based main.js
+ *
+ * @param {string} projectRoot - Source directory (jux/)
+ * @param {string} distDir - Destination directory (jux-dist/)
+ * @param {Object} options - Bundle options
+ * @param {string} options.routePrefix - Route prefix (e.g., '/experiments')
+ * @returns {Promise<string>} - Returns the generated filename (e.g., 'main.1234567890.js')
+ */
+export async function bundleJuxFilesToRouter(projectRoot, distDir, options = {}) {
+  const startTime = performance.now();
+  const { routePrefix = '' } = options;
+  console.log('🔀 Bundling .jux files into router...');
+  const juxFiles = findFiles(projectRoot, '.jux');
+  if (juxFiles.length === 0) {
+    console.log('   No .jux files found');
+    return;
+  }
+  console.log(`   Found ${juxFiles.length} .jux file(s)`);
+  const fileTimings = [];
+  const views = [];
+  const routes = [];
+  const sharedModules = new Map(); // Track shared .jux modules
+  for (const juxFile of juxFiles) {
+    const fileStartTime = performance.now();
+    const relativePath = path.relative(projectRoot, juxFile);
+    const parsedPath = path.parse(relativePath);
+    const rawFunctionName = parsedPath.dir
+      ? `${parsedPath.dir.replace(/\//g, '_')}_${parsedPath.name}`
+      : parsedPath.name;
+    const cleanFunctionName = rawFunctionName
+      .replace(/[-_]/g, ' ')
+      .split(' ')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join('');
+    const routePath = routePrefix + '/' + (parsedPath.dir ? `${parsedPath.dir}/` : '') + parsedPath.name;
+    const cleanRoutePath = routePath.replace(/\/+/g, '/');
+    const juxContent = fs.readFileSync(juxFile, 'utf-8');
+    // Check if this file exports components (shared module)
+    const hasExports = /export\s+(const|let|function|class|{)/.test(juxContent);
+    if (hasExports) {
+      // Extract exports to shared modules section
+      sharedModules.set(relativePath, extractSharedModule(juxContent, rawFunctionName));
+    }
+    const viewFunction = transformJuxToViewFunction(juxContent, rawFunctionName, parsedPath.name, relativePath, sharedModules);
+    views.push(viewFunction);
+    routes.push({ path: cleanRoutePath, functionName: cleanFunctionName });
+    const fileTime = performance.now() - fileStartTime;
+    fileTimings.push({ file: relativePath, time: fileTime });
+    const exportNote = hasExports ? ' [+exports]' : '';
+    console.log(`   ✓ ${relativePath} → ${cleanFunctionName}()${exportNote} (${fileTime.toFixed(1)}ms)`);
+  }
+  // ✅ Show slowest files if any took >50ms
+  const slowFiles = fileTimings.filter(f => f.time > 50).sort((a, b) => b.time - a.time);
+  if (slowFiles.length > 0) {
+    console.log(`\n   ⚠️  Slowest files:`);
+    slowFiles.slice(0, 3).forEach(f => {
+      console.log(`      ${f.file}: ${f.time.toFixed(0)}ms`);
+    });
+  }
+  const bundleStartTime = performance.now();
+  const routerCode = generateRouterBundle(views, routes, sharedModules);
+  const bundleGenTime = performance.now() - bundleStartTime;
+  // ✅ Use fixed filename (no timestamp)
+  const mainJsFilename = 'main.js';
+  const mainJsPath = path.join(distDir, mainJsFilename);
+  // Write to dist/main.js
+  const writeStartTime = performance.now();
+  fs.writeFileSync(mainJsPath, routerCode);
+  const writeTime = performance.now() - writeStartTime;
+  const totalTime = performance.now() - startTime;
+  console.log(`   ✓ Generated: ${path.relative(projectRoot, mainJsPath)}`);
+  console.log(`\n   📊 Bundle Statistics:`);
+  console.log(`      Files processed:    ${juxFiles.length}`);
+  console.log(`      Bundle size:        ${(routerCode.length / 1024).toFixed(1)} KB`);
+  console.log(`      Code generation:    ${bundleGenTime.toFixed(0)}ms`);
+  console.log(`      File write:         ${writeTime.toFixed(0)}ms`);
+  console.log(`      Total bundle time:  ${totalTime.toFixed(0)}ms`);
+  console.log('✅ Router bundle complete\n');
+  // ✅ Return the filename so index.html can reference it
+  return mainJsFilename;
+}
+/**
+ * Extract 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) {
+  // Remove string literals temporarily to avoid false matches
+  const strings = [];
+  // Handle template literals, single quotes, and double quotes separately
+  let code = juxContent
+    .replace(/`(?:\\.|[^`\\])*`/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; })
+    .replace(/"(?:\\.|[^"\\])*"/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; })
+    .replace(/'(?:\\.|[^'\\])*'/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; });
+  // Remove ALL imports - including _dev-imports.js
+  code = code.replace(/import\s+\{[^}]+\}\s+from\s+__STRING_\d+__;?\s*/g, '');
+  code = code.replace(/import\s+\*\s+as\s+\w+\s+from\s+__STRING_\d+__;?\s*/g, '');
+  code = code.replace(/import\s+__STRING_\d+__;?\s*/g, '');
+  // Convert exports to declarations (keep function keyword for functions)
+  code = code.replace(/export\s+const\s+/g, 'const ');
+  code = code.replace(/export\s+let\s+/g, 'let ');
+  code = code.replace(/export\s+function\s+/g, 'function ');
+  code = code.replace(/export\s+class\s+/g, 'class ');
+  code = code.replace(/export\s+\{([^}]+)\}\s*;?\s*/g, '');
+  // Restore string literals
+  code = code.replace(/__STRING_(\d+)__/g, (_, index) => strings[index]);
+  return code;
+}
+/**
+ * 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) {
+  // Remove string literals temporarily to avoid false matches
+  const strings = [];
+  // Handle template literals, single quotes, and double quotes separately
+  let code = juxContent
+    .replace(/`(?:\\.|[^`\\])*`/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; })
+    .replace(/"(?:\\.|[^"\\])*"/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; })
+    .replace(/'(?:\\.|[^'\\])*'/g, (match) => { strings.push(match); return `__STRING_${strings.length - 1}__`; });
+  // Remove ALL imports - now matching against placeholders
+  code = code.replace(/import\s+\{[^}]+\}\s+from\s+__STRING_\d+__;?\s*/g, '');
+  code = code.replace(/import\s+\*\s+as\s+\w+\s+from\s+__STRING_\d+__;?\s*/g, '');
+  code = code.replace(/import\s+__STRING_\d+__;?\s*/g, '');
+  // Handle exports - convert named exports to const declarations
+  code = code.replace(/export\s+const\s+(\w+)\s*=/g, 'const $1 =');
+  code = code.replace(/export\s+let\s+(\w+)\s*=/g, 'let $1 =');
+  code = code.replace(/export\s+function\s+(\w+)/g, 'const $1 = function');
+  code = code.replace(/export\s+class\s+/g, 'class ');
+  code = code.replace(/export\s+default\s+/g, '');
+  code = code.replace(/export\s+\{([^}]+)\}\s*;?\s*/g, '');
+  // Only replace .renderTo(container) calls - leave explicit render targets alone
+  code = code.replace(/\.renderTo\(container\)/g, '.render("#app")');
+  // Only replace empty .render() calls (no arguments)
+  code = code.replace(/\.render\(\s*\)/g, '.render("#app")');
+  // Restore string literals
+  code = code.replace(/__STRING_(\d+)__/g, (_, index) => strings[index]);
+  const cleanName = functionName
+    .replace(/[-_]/g, ' ')
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('');
+  return `
+// View: ${cleanName}
+function ${cleanName}() {
+  ${code}
+  return document.getElementById('app');
+}`;
+}
+/**
+ * Generate complete router bundle with all views and routing logic
+ *
+ * @param {string[]} views - Array of view function code
+ * @param {Array<{path: string, functionName: string}>} routes - Route definitions
+ * @param {Map} sharedModules - Map of shared module code
+ * @returns {string} Complete bundle code
+ */
+function generateRouterBundle(views, routes, sharedModules = new Map()) {
+  const libImport = './lib/jux.js';
+  // Generate shared modules section
+  const sharedModulesCode = Array.from(sharedModules.values())
+    .filter(code => code.trim())
+    .join('\n\n');
+  // Filter out empty views (shared modules)
+  const viewsCode = views.filter(v => v.trim()).join('\n\n');
+  const routeTable = routes
+    .map(r => `  '${r.path}': ${r.functionName}`)
+    .join(',\n');
+  return `// Generated Jux Router Bundle
+import { jux, state } from '${libImport}';
+// ═══════════════════════════════════════════════════════════════════
+// SHARED MODULES
+// ═══════════════════════════════════════════════════════════════════
+${sharedModulesCode}
+// ═══════════════════════════════════════════════════════════════════
+// VIEW FUNCTIONS
+// ═══════════════════════════════════════════════════════════════════
+${viewsCode}
+// ═══════════════════════════════════════════════════════════════════
+// 404 VIEW
+// ═══════════════════════════════════════════════════════════════════
+function JuxNotFound() {
+  jux.heading(1, { text: '404 - Page Not Found' }).render('#app');
+  jux.paragraph('404-msg')
+    .text('The page you are looking for does not exist.')
+    .render('#app');
+  return document.getElementById('app');
+}
+// ═══════════════════════════════════════════════════════════════════
+// 403 VIEW
+// ═══════════════════════════════════════════════════════════════════
+function JuxForbidden() {
+  jux.heading(1, { text: '403 - Forbidden' }).render('#app');
+  jux.paragraph('403-msg')
+    .text('You are not authorized to view this page.')
+    .render('#app');
+  return document.getElementById('app');
+}
+// ═══════════════════════════════════════════════════════════════════
+// ROUTE TABLE
+// ═══════════════════════════════════════════════════════════════════
+const routes = {
+${routeTable}
+};
+// ═══════════════════════════════════════════════════════════════════
+// ROUTER CORE
+// ═══════════════════════════════════════════════════════════════════
+const app = document.getElementById('app');
+function render() {
+  const path = location.pathname;
+  const view = routes[path] || 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="">
+  <!-- Navigation -->
+  <nav style="padding: 20px; background: #f5f5f5; border-bottom: 2px solid #ddd;">
+${navLinks}
+  </nav>
+  <!-- App container - router renders here -->
+  <div id="app"></div>
+  ${importMapScript}
+  <script type="module" src="/${mainJsFilename}"></script>
+</body>
+</html>`;
+  const indexPath = path.join(distDir, 'index.html');
+  fs.writeFileSync(indexPath, html);
+  console.log(`   ✓ Generated: index.html (references ${mainJsFilename})`);
+  console.log('✅ Index HTML complete\n');
+}

package/machinery/server.js CHANGED Viewed

@@ -3,15 +3,12 @@ import http from 'http';
 import path from 'path';
 import fs from 'fs';
 import { fileURLToPath } from 'url';
-import initSqlJs from 'sql.js';
 import { startWatcher } from './watcher.js';
 import { WebSocketServer } from 'ws';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-let db = null;
 async function serve(port = 3000, distDir = './jux-dist') {
   const app = express();
   const absoluteDistDir = path.resolve(distDir);
@@ -25,29 +22,16 @@ async function serve(port = 3000, distDir = './jux-dist') {
     process.exit(1);
   }
-  // API endpoint for SQL queries
-  app.post('/api/query', async (req, res) => {
-    try {
-      const { sql, params = [] } = req.body;
-      if (!db) {
-        return res.status(500).json({ error: 'Database not initialized' });
-      }
-      const stmt = db.prepare(sql);
-      stmt.bind(params);
+  // ✅ Strong cache prevention for main.js
+  app.use((req, res, next) => {
+    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0');
+    res.setHeader('Pragma', 'no-cache');
+    res.setHeader('Expires', '0');
-      const rows = [];
-      while (stmt.step()) {
-        rows.push(stmt.getAsObject());
-      }
-      stmt.free();
+    // ✅ Add ETag prevention
+    res.setHeader('ETag', 'W/"' + Date.now() + '"');
-      res.json({ data: rows, rowCount: rows.length });
-    } catch (error) {
-      console.error('Query error:', error.message);
-      res.status(400).json({ error: error.message });
-    }
+    next();
   });
   // Disable caching in dev mode
@@ -58,74 +42,29 @@ async function serve(port = 3000, distDir = './jux-dist') {
     next();
   });
-  // Serve HTML files with clean URLs
-  const heyPath = path.join(absoluteDistDir, 'hey.html');
-  const indexPath = path.join(absoluteDistDir, 'index.html');
-  app.use((req, res, next) => {
-    let requestPath = req.path.endsWith('/') && req.path.length > 1
-      ? req.path.slice(0, -1)
-      : req.path;
-    // Root path - serve hey.html or index.html
-    if (requestPath === '/') {
-      if (fs.existsSync(heyPath)) {
-        return res.sendFile(heyPath);
-      }
-      if (fs.existsSync(indexPath)) {
-        return res.sendFile(indexPath);
-      }
-    }
-    // Try to serve as HTML file
-    const htmlPath = path.join(absoluteDistDir, requestPath + '.html');
-    if (fs.existsSync(htmlPath) && fs.statSync(htmlPath).isFile()) {
-      return res.sendFile(htmlPath);
-    }
-    // Try to serve index.html in directory
-    const indexInDirPath = path.join(absoluteDistDir, requestPath, 'index.html');
-    if (fs.existsSync(indexInDirPath)) {
-      return res.sendFile(indexInDirPath);
-    }
-    next();
-  });
   // Serve static files (CSS, JS, images, etc.)
   app.use(express.static(absoluteDistDir));
-  // Enhanced 404 handler with debug info
-  app.use((req, res) => {
-    const notFoundPath = path.join(absoluteDistDir, '404.html');
-    const requestedPath = path.join(absoluteDistDir, req.path);
-    const fileType = path.extname(req.path) || 'directory';
-    // Log to console for debugging
-    console.log(`❌ 404: ${req.path}`);
-    console.log(`   Looked for: ${requestedPath}`);
-    console.log(`   Type: ${fileType}`);
-    console.log(`   Referer: ${req.get('referer') || 'direct'}`);
-    // If custom 404.html exists and this isn't already /404
-    if (fs.existsSync(notFoundPath) && req.path !== '/404') {
-      const debugUrl = `/404?path=${encodeURIComponent(req.path)}&type=${fileType}&from=${encodeURIComponent(req.get('referer') || 'direct')}`;
-      return res.redirect(debugUrl);
-    }
-    // Serve custom 404 page
-    if (fs.existsSync(notFoundPath)) {
-      return res.status(404).sendFile(notFoundPath);
+  // SPA fallback: only for requests that accept HTML (not static files)
+  app.get('*', (req, res) => {
+    // If request accepts HTML, serve index.html
+    if (req.accepts('html')) {
+      const indexPath = path.join(absoluteDistDir, 'index.html');
+      if (fs.existsSync(indexPath)) {
+        res.sendFile(indexPath);
+      } else {
+        res.status(404).send('index.html not found. Run `npx jux bundle` first.');
+      }
+    } else {
+      // For non-HTML requests (like .js, .css), return 404
+      res.status(404).send('Not found');
     }
-    // Fallback: minimal 404 response
-    res.status(404).send('<h1>404 - Not Found</h1>');
   });
-  // Create HTTP server (wrap Express app)
+  // Create HTTP server
   const server = http.createServer(app);
-  // WebSocket server on separate port 3001
+  // WebSocket server for hot reload
   const wss = new WebSocketServer({ port: 3001 });
   const clients = [];
@@ -165,7 +104,6 @@ async function serve(port = 3000, distDir = './jux-dist') {
     console.log('\n\n👋 Shutting down server...');
     wss.close();
     server.close();
-    if (db) db = null;
     process.exit(0);
   };
@@ -175,21 +113,6 @@ async function serve(port = 3000, distDir = './jux-dist') {
   return { server };
 }
-async function initDatabase() {
-  const SQL = await initSqlJs();
-  const dbPath = path.join(__dirname, '../db/jux.db');
-  if (fs.existsSync(dbPath)) {
-    const buffer = fs.readFileSync(dbPath);
-    db = new SQL.Database(buffer);
-    console.log('📊 Database loaded:', dbPath);
-  } else {
-    db = new SQL.Database();
-    console.log('📊 Using in-memory database');
-  }
-}
 export async function start(port = 3000) {
-  await initDatabase();
   return serve(port, './jux-dist');
 }