juxscript 1.0.46 → 1.0.47

package/README.md

@@ -1,83 +1,271 @@
-# JUX - JavaScript UX Authorship Platform
+# The web needs a higher level of abstraction: Meet **JUX**
 
-> Say goodbye to markup `</</>>>`. Build reactive UIs with pure JavaScript.
 
-[![npm version](https://img.shields.io/npm/v/juxscript.svg)](https://www.npmjs.com/package/juxscript)
-[![License](https://img.shields.io/npm/l/juxscript.svg)](https://github.com/jux/juxscript/blob/main/LICENSE)
+```diff
+- IF YOU ARE CURRENTLY USING THIS PACKAGE COOL! But it is still a little fragile. 
+- We are working on opening our repo to public and working on our documentation pages. 
++ Stay tuned! For now, you will see our roadmap here!
 
-## 🚀 Quick Start
+```
+- [X] Router
+  - [ ] Cross Page Store.
+  - [ ] Distributable Bundle (Static Sites)
+  - [ ] Tree Shake/Efficiencies.
 
-Create a new JUX app in one command:
+- [ ] Data
+  - [ ] Drivers: File, S3, Database.
+  - [ ] const d = jux.data('id',{});
+  - [ ] d.driver(file|s3|database)
+  - [ ] d.items([] | juxitem)
+  - [ ] d.store(callback)
 
-```bash
-npx jux create my-app
-cd my-app
-npm run dev
+- [X] Layouts (100% done.)
+  - [ ] *Authoring Layout Pages* - `docs`
+  - [ ] *Authoring Application Pages* - `docs`
+  - [ ] *Authoring Custom Components* - `docs`
+
+  - [ ] Render Dependency Tree
+    > Idea here is, one element may be a predicate for another. Will need promises. **predicting problems with slow-loading components that depend on containers from other components. May to to separate concerns with container "building" vs. content addition OR use async processes (promises).
+- [X] Reactivity (90% done.)
+- [ ] Client Components (99% of what would be needed.)
+  - [X] Charts
+  - [X] Poor Intellisense support? Could be this issue. - fixed.
+  - [ ] Api Wrapper
+  - [X] Params/Active State for Menu/Nav matching - built in.
+  - [ ] CDN Bundle (import CDN/'state', 'jux' from cdn.)
+  - [ ] Icon
+
+- [ ] Quickstart Boilerplates (20% done,notion.jux)
+  - [ ] Mobile Nav
+  - [ ] `npx jux present notion|default` etc..
+- [ ] Server side components (api and database)
+- [ ] Quick deploy option
+
+
+## *JUX* Authoring UI's in pure javascript.
+
+> Build beautiful, reactive UI's using only javascript. **No markup required.**
+> A clean authorship layer capable of being taught to non-developers, strong enough to be used by real developers.
+
+>> **jux** challenges the idea that markup based systems are the most efficient way to author web applications.
+## AI friendly - **use less tokens!**
+
+
+```diff
+- Markup is expensive! 
+Have you ever considered the energy requirements to ship chunks of HTML markup like Vue or React components?
 ```
 
-Or add JUX to an existing project:
+- [ ] Build a code calculator (token calculator)
+> As a user, I want to be efficient with the LLM's. I want my code to be clean. I want to avoid repeating myself. I ultimately, want to write less code. Less code is better code.
+
+## Ecosystem friendly (NPM)
+
+> Because it is just javascript, .jux files work with any npm package you want to throw at it with standard ESM syntax.
+
+## GETTING STARTED
 
 ```bash
+# New project
+mkdir my-project
+cd my-project
+npm init -y
 npm install juxscript
+
+# Initialize (creates jux/ directory)
 npx jux init
+
+# Builds jux-dist and serves index.jux
 npx jux serve
 ```
+> install
+`npm i juxscript`
 
-## ✨ Features
+>> Your IDE must be setup to read .jux files as .js files. In VS Code, this is do in the `.vscode/settings.json`. Here is an example.
 
-- 🎨 **No markup** - Build UIs with pure JavaScript
-- ⚡ **Reactive** - Built-in state management with automatic DOM updates
-- 🧩 **Component-based** - Reusable, composable UI components
-- 🔥 **Hot reload** - Instant feedback during development
-- 📦 **Zero config** - Works out of the box
-- 🎯 **Type-safe** - Full TypeScript support
+```json
+//.vscode/settings.json
+{
+  "files.associations": {
+    "*.jux": "javascript",
+    "*.juxt": "javascript"
+  },
+  "javascript.validate.enable": false,
+  "[javascript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  }
+}
+```
 
-## 📖 Example
+> building and serving the `examples` project directory.
+`npm run dev` 
 
-```javascript
-import { jux, state } from 'juxscript';
+> building only (the `examples` project directory)
+`npm run build:examples`
 
-// Create reactive state
-const count = state(0);
 
-// Build UI with fluent API
-jux.button('increment')
-  .label('Click me!')
-  .bind('click', () => count.value++)
-  .render('#app');
+# Authoring in Jux
 
-jux.paragraph('counter')
-  .sync('text', count, val => `Count: ${val}`)
-  .render('#app');
-```
+1. Build a Layout Page you can reuse.
+Check out the presets, they speed this process up. Just modify them with your goals, such as logo, menu options, nav etc.
+2. Build your Pages
+Just get to work, using the **jux** component library to build most of what you need, filling in any details with *javascript* logically arranged the way you want. Think, authoring SFC but with only the composition layer.
+3. Test it out!
+Jux comes with a watcher system built in, so you can see your edits to *.jux* files live.
 
-## 📚 Documentation
+# GOAL: Eliminating the Markup System of building UI's.
+> HTML markup is the equivalent of still writing in `C` ro `C++` despite the availability of more functional levels of abstraction like `python`.
+> To remove the requirement for markup, **jux** must address the utility of markup.
 
-- [Getting Started](https://juxscript.com/docs) _(coming soon)_
-- [API Reference](https://juxscript.com/api) _(coming soon)_
-- [Examples](https://github.com/juxscript/examples)
+## Layouts
 
-## 🛠️ CLI Commands
+### Grid System
+- [ ] Laying out JUX files in a rational way.
+> Develop a higher-level layout javascript grammar for building layouts and palettes of style using *ZERO markup*.
 
-```bash
-npx jux create <name>     # Create new project
-npx jux init              # Initialize in existing directory
-npx jux build             # Build for production
-npx jux serve             # Start dev server with hot reload
-```
+- [ ] A Partial View Strategy
+>>> As a dev I may need to load partial pages/components into other pages. This should avoid noisy wrappers and ideally be just javascript imports of jux objects.
+
+### Components
+
+We have constructed the most helpful components for building 99% of core business/saas web applications, that present beautifully on the page and are created purely with javascript.
+> https://www.shadcn-vue.com/docs/components
+> Run time slots.. Example, `table.slot(columnName -> object);`
+
+# Backend
+
+### Routing & Views
+- [X] Subviews architecture
+  - [X] Nested routing support
+  - [X] View composition
+  - [X] Layout system
+- [X] User views
+  - [X] `profile.jux` - User 
+
+### Server Docs/Documentation. 
+
+- [ ] Should *jux* ship with a server at all? Or merely for demos.
 
-## 🤝 Contributing
+> What is the server even doing? Is it merely a matter of understanding that JUX builder/compilation gives you a mirror of how you setup your project. It can be as flat or deep as you would like.
 
-We welcome contributions! Please see [CONTRIBUTING.md](https://github.com/jux/juxscript/blob/main/CONTRIBUTING.md) for details.
+> *At this point*, we are speaking almost 100% towards UI interfaces. 
+> Servers should be 'loosely coupled.'. This allows for a standard. 
+>>> In the future, we could introduce an *auto api* feature, similar to *next.js* api heuristic for folders and files. 
+---
+
+
+[ **@jesseallenrxtrail -> Discuss.** ]
+
+### Chore: Commit to building more in package directory. 
+
+> We can experiment with our example project, using a simple `express` server, running. What third-party integration do we need? 
+- [ ] Chore: Cleanup our `machinery/server.js` to separate concerns and build our actual endpoints we need to build software here. 
+
+#### Alternative Chore: package this for `npmjs.org`, combine with our existing project, re-author frontend in *jux*.
+
+- [ ] Alternative Chore: package this for `npmjs.org` and ship it. 
+- [ ] Start a brand new project. 
+- [ ] Build the server aspect in `flask` (already done). 
+- [ ] Author the frontend in **jux** instead of **vue**.
+
+> This may require us to move our 'complilation error module', `lib/components/error-handler.ts` to the front-end for display without a 'server call' at all?
+- [ ] Chore for this? This takes more analysis, discussion.
+
+> How and what will we wire for backend and what **jux** components will we support for working with backends.
+- [ X ] SQL Database (query component) 
+  - [ ] Chore: This is currently supported. Needs revisiting and testing
+> API's 
+- [ ] Base payload creater and consumer as a **jux** component. *jux.api*??
+
+---
+
+# Jux Configs
+
+> Jux configs.. `jux.config.js` what should this entail?
+Currently it looks like this: 
+- [ ] Chore: **WHAT IS ACTUALLY BEING USED AND WHERE?**
 
-## 📄 License
+```javascript
+export default {
+  projectRoot: __dirname,
+  distDir: path.join(__dirname, 'dist'),
+  build: {
+    minify: false
+  },
+  
+  database: {
+    // Default connection
+    default: 'sqlite',
+    
+    // Named connections
+    connections: {
+      sqlite: {
+        driver: 'sqlite',
+        database: path.join(__dirname, 'db', 'jux.db')
+      },
+      ... // props to feed drivers for mysql/postgres
+    }
+  },
+  
+  server: {
+    port: process.env.PORT || 3000,
+    host: process.env.HOST || 'localhost'
+  },
+  
+};
+```  
+**As a user, I will want to control where JUX sends queries.**
+**As a user, I may want to specify a default proxy for backend. I may also want to specify, explicitly, URL's to hit other service endpoints**
+- [ ] Escape hatch (backend API proxy vs default)
+    - [ ] As a user, I may want to run my own server for backend requests/proxies.
+    - [ ] As a user, I may want to hit multiple endpoints in the same JUX file.
 
-MIT © [Your Name]
+--- 
 
-## ⭐ Support
+# CORE 
 
-If you find JUX useful, please star us on [GitHub](https://github.com/jux/juxscript)!
+### STATIC SERVING (your local file system, s3 bucket static sites, any host that allows serving etc...)
+**Should JUX function, as a 100% client side app (STATIC WEBSITES)**
+- [ ] Chore: Discovery... I think the answer is yes. I think what might be missing is bundling.
+![alt text](local.png)
 
 ---
+## REACTIVITY LAYER.
+### Goal for Reactivity
+> We are shooting for better than nasty amounts of javascript, not as sophisticated as vue/react.
+
+> As a user, I want changes in state of my objects to be consumable by other objects on the page so they can paint changes and interface with each other seamlessly.
+- [ ] Build a basic `v-model` strategy in pure javascript. Different than jquery, javascript etc.
+- [ ] Build standard eventing systems, listeners and emitters on components where they make sense.
+`
+# ROADMAP
+
+### KEY UI PAGES
+- [ ] JWT Authentication (`authJWT`) (demo `examples` only)
+  - [ ] Token generation  (demo `examples` only)
+  - [ ] Token validation middleware  (demo `examples` only)
+  - [ ] Refresh token logic  (demo `examples` only)
+- [ ] *Login system PAGES! Ships with `vendor` assets like lib files/layouts etc.*
+  - [ ] Login
+  - [ ] Logout
+  - [ ] Profile
+
+
+### Additional Features
+- [ ] API documentation
+- [ ] Testing setup
+
+
+
+
+
+### LAYOUT NOTES...
+### Jux Standard Layout Regions
+
+- [ ] CHORE : REVISIT! I think maybe we ship with our figma, notion, default etc. But then document how to build and reuse a .jux page as a layout using the `jux.layout` class.
+
+### Start with a layout page
+
+You can build a simple one, or copy and use one of the Jux presets.
 
-**Need help?** Join our [Discord](https://discord.gg/juxscript) _(placeholder)_ or open an [issue](https://github.com/jux/juxscript/issues).
+`npx jux preset notion|default|figma|slack|other`

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,8 +1,8 @@
 {
   "name": "juxscript",
-  "version": "1.0.46",
-  "description": "Build reactive UIs with pure JavaScript - no markup needed. Say goodbye to </</>>>",
+  "version": "1.0.47",
   "type": "module",
+  "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",
   "types": "lib/jux.d.ts",
   "access": "public",
@@ -39,20 +39,29 @@
     "jux": "./bin/cli.js"
   },
   "keywords": [
-    "jux",
-    "ui-framework",
-    "reactive",
+    "ui",
+    "ux",
     "components",
-    "no-markup",
-    "fluent-api",
-    "state-management",
-    "hot-reload",
-    "typescript"
+    "framework",
+    "reactive",
+    "javascript"
   ],
-  "homepage": "https://juxscript.com",
-  "bugs": {
-    "url": "https://github.com/jux/juxscript/issues"
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "chokidar": "^3.5.3",
+    "esbuild": "^0.19.0",
+    "express": "^4.18.2",
+    "glob": "^13.0.0",
+    "ws": "^8.13.0"
   },
-  "author": "Your Name <your.email@example.com>",
-  "license": "MIT"
+  "devDependencies": {
+    "@types/express": "^4.17.17",
+    "@types/node": "^20.0.0",
+    "@types/ws": "^8.5.5",
+    "typescript": "^5.0.0"
+  }
 }

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`);
-}