juxscript 1.0.7 → 1.0.9

package/README.md

@@ -7,25 +7,33 @@
 + Stay tuned! For now, you will see our roadmap here!
 
 ```
+- [X] Router
+  - [ ] Cross Page Store.
+  - [ ] Distributable Bundle (Static Sites)
+  - [ ] Tree Shake/Efficiencies.
+
 - [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.)
-  - [ ] Charts
+  - [X] Charts
   - [ ] Poor Intellisense support? Could be this issue.
   - [ ] Api Wrapper
   - [X] Params/Active State for Menu/Nav matching - built in.
   - [ ] CDN Bundle (import CDN/'state', 'jux' from cdn.)
   - [ ] Icon
-  - [ ] Cross Page Store.
+
 - [ ] Quickstart Boilerplates (20% done,notion.jux)
   - [ ] Mobile Nav
   - [ ] `npx jux present notion|default` etc..
 - [ ] Server side components (api and database)
 - [ ] Quick deploy option
-- [ ] Distributable Bundle (Static Sites)
-- [ ] Tree Shake/Efficiencies.
+
 
 ## *JUX* Authoring UI's in pure javascript.
 

package/bin/cli.js

@@ -183,33 +183,59 @@ async function buildProject(isServe = false) {
     // Create structure
     fs.mkdirSync(juxDir, { recursive: true });
 
-    // Copy template file from lib/presets/index.juxt
-    const templatePath = path.join(PATHS.packageRoot, 'lib', 'presets', 'index.juxt');
-    const targetPath = path.join(juxDir, 'index.jux');
-
-    if (fs.existsSync(templatePath)) {
-      fs.copyFileSync(templatePath, targetPath);
-      console.log('✅ Created jux/index.jux from template');
-    } else {
-      // Fallback if template doesn't exist
-      console.warn('⚠️  Template not found, creating basic index.jux');
-      const fallbackContent = `// Welcome to JUX!
-import { jux } from '/lib/jux.js';
+    // Create index.jux with proper imports
+    const indexContent = `// Welcome to JUX!
+import { jux } from 'juxscript';
 
-jux.style('/lib/layouts/default.css');
-jux.theme('light');
+// Apply a layout preset (optional)
+// import 'juxscript/presets/notion.js';
 
-const header = jux.header('header').render("#app");
-const main = jux.main('main').render("#app");
-const footer = jux.footer('footer').render("#app");
+// Create your app structure
+jux.container('app-container')
+  .direction('column')
+  .gap(20)
+  .style('padding: 40px;')
+  .render('body');
 
-jux.hero('hero1', {
+jux.hero('welcome-hero', {
   title: 'Welcome to JUX',
   subtitle: 'A JavaScript UX authorship platform'
-}).render('#main');
+}).render('#app-container');
+
+jux.divider({}).render('#app-container');
+
+jux.write(\`
+  <h2>Getting Started</h2>
+  <p>Edit <code>jux/index.jux</code> to build your app.</p>
+  <ul>
+    <li>Run <code>npx jux build</code> to compile</li>
+    <li>Run <code>npx jux serve</code> for dev mode</li>
+    <li>Serve <code>jux-dist/</code> from your backend</li>
+  </ul>
+\`).render('#app-container');
 `;
-      fs.writeFileSync(targetPath, fallbackContent);
-      console.log('✅ Created jux/index.jux');
+
+    const targetPath = path.join(juxDir, 'index.jux');
+    fs.writeFileSync(targetPath, indexContent);
+    console.log('✅ Created jux/index.jux');
+
+    // Create package.json if it doesn't exist
+    const pkgPath = path.join(PATHS.projectRoot, 'package.json');
+    if (!fs.existsSync(pkgPath)) {
+      const pkgContent = {
+        "name": "my-jux-project",
+        "version": "1.0.0",
+        "type": "module",
+        "scripts": {
+          "build": "jux build",
+          "serve": "jux serve"
+        },
+        "dependencies": {
+          "juxscript": "^1.0.8"
+        }
+      };
+      fs.writeFileSync(pkgPath, JSON.stringify(pkgContent, null, 2));
+      console.log('✅ Created package.json');
     }
 
     // Create .gitignore
@@ -226,9 +252,10 @@ node_modules/
 
     console.log('✅ Created jux/ directory\n');
     console.log('Next steps:');
-    console.log('  1. Edit jux/index.jux');
-    console.log('  2. Run: npx jux build');
-    console.log('  3. Serve jux-dist/ from your backend\n');
+    console.log('  1. npm install              # Install juxscript');
+    console.log('  2. Edit jux/index.jux       # Build your app');
+    console.log('  3. npx jux build            # Compile to jux-dist/');
+    console.log('  4. Serve jux-dist/ from your backend\n');
 
   } else if (command === 'build') {
     await buildProject(false);
@@ -249,24 +276,25 @@ Usage:
   npx jux build              Compile .jux files from ./jux/ to ./jux-dist/
   npx jux serve [port]       Start dev server with hot reload (default: 3000)
 
-Project Structure (Convention):
+Project Structure:
   my-project/
-  ├── jux/                   # Your .jux source files (REQUIRED)
-  │   ├── index.jux
-  │   ├── samples/
-  │   │   └── mypage.ts     # TypeScript files transpiled to .js
-  │   └── pages/
-  ├── jux-dist/             # Build output (generated, git-ignore this)
-  │   ├── samples/
-  │   │   └── mypage.js     # Transpiled TypeScript
-  │   └── ...
-  ├── server/               # Your backend (untouched by jux)
+  ├── jux/                   # Your .jux source files
+  │   ├── index.jux         # Entry point (uses 'juxscript' imports)
+  │   └── 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 jux/ directory
-  2. npx jux build          # Build to jux-dist/
-  3. Serve jux-dist/ from your backend
+  1. npx jux init           # Create project structure
+  2. npm install            # Install dependencies
+  3. npx jux build          # Build to jux-dist/
+  4. Serve jux-dist/ from your backend
 
 Examples:
   npx jux build              Build for production

package/lib/components/divider.ts

@@ -0,0 +1,233 @@
+/**
+ * Divider - Simple horizontal or vertical divider line
+ */
+
+export interface DividerOptions {
+    orientation?: 'horizontal' | 'vertical';
+    thickness?: number;
+    color?: string;
+    margin?: string;
+    style?: string;
+    className?: string;
+}
+
+/**
+ * Divider component for visual separation
+ * 
+ * Usage:
+ *   // Simple horizontal divider
+ *   jux.divider().render('#container');
+ *   
+ *   // Vertical divider
+ *   jux.divider({ orientation: 'vertical' }).render('#container');
+ *   
+ *   // Custom styling
+ *   jux.divider({ 
+ *     thickness: 2,
+ *     color: '#3b82f6',
+ *     margin: '24px 0'
+ *   }).render('#container');
+ *   
+ *   // With custom class
+ *   jux.divider({ className: 'my-divider' }).render('#container');
+ */
+export class Divider {
+    private options: Required<DividerOptions>;
+
+    constructor(options: DividerOptions = {}) {
+        this.options = {
+            orientation: 'horizontal',
+            thickness: 1,
+            color: '#e5e7eb',
+            margin: '16px 0',
+            style: '',
+            className: '',
+            ...options
+        };
+    }
+
+    /**
+     * Set orientation
+     */
+    orientation(value: 'horizontal' | 'vertical'): this {
+        this.options.orientation = value;
+        return this;
+    }
+
+    /**
+     * Set thickness in pixels
+     */
+    thickness(value: number): this {
+        this.options.thickness = value;
+        return this;
+    }
+
+    /**
+     * Set color
+     */
+    color(value: string): this {
+        this.options.color = value;
+        return this;
+    }
+
+    /**
+     * Set margin
+     */
+    margin(value: string): this {
+        this.options.margin = value;
+        return this;
+    }
+
+    /**
+     * Set custom styles
+     */
+    style(value: string): this {
+        this.options.style = value;
+        return this;
+    }
+
+    /**
+     * Set class name
+     */
+    className(value: string): this {
+        this.options.className = value;
+        return this;
+    }
+
+    /**
+     * Render divider to target element
+     */
+    render(targetSelector: string): this {
+        const target = document.querySelector(targetSelector);
+
+        if (!target || !(target instanceof HTMLElement)) {
+            console.warn(`Divider: Target element "${targetSelector}" not found`);
+            return this;
+        }
+
+        const divider = document.createElement('hr');
+        divider.className = `jux-divider ${this.options.className}`.trim();
+
+        const isVertical = this.options.orientation === 'vertical';
+
+        const baseStyles = `
+            border: none;
+            background-color: ${this.options.color};
+            margin: ${this.options.margin};
+            ${isVertical ? `
+                width: ${this.options.thickness}px;
+                height: 100%;
+                display: inline-block;
+                vertical-align: middle;
+            ` : `
+                width: 100%;
+                height: ${this.options.thickness}px;
+            `}
+            ${this.options.style}
+        `;
+
+        divider.setAttribute('style', baseStyles);
+
+        target.appendChild(divider);
+
+        return this;
+    }
+
+    /**
+     * Replace target content with divider
+     */
+    replace(targetSelector: string): this {
+        const target = document.querySelector(targetSelector);
+
+        if (!target || !(target instanceof HTMLElement)) {
+            console.warn(`Divider: Target element "${targetSelector}" not found`);
+            return this;
+        }
+
+        target.innerHTML = '';
+        return this.render(targetSelector);
+    }
+
+    /**
+     * Render before target element
+     */
+    before(targetSelector: string): this {
+        const target = document.querySelector(targetSelector);
+
+        if (!target || !(target instanceof HTMLElement)) {
+            console.warn(`Divider: Target element "${targetSelector}" not found`);
+            return this;
+        }
+
+        const divider = document.createElement('hr');
+        divider.className = `jux-divider ${this.options.className}`.trim();
+
+        const isVertical = this.options.orientation === 'vertical';
+
+        const baseStyles = `
+            border: none;
+            background-color: ${this.options.color};
+            margin: ${this.options.margin};
+            ${isVertical ? `
+                width: ${this.options.thickness}px;
+                height: 100%;
+                display: inline-block;
+                vertical-align: middle;
+            ` : `
+                width: 100%;
+                height: ${this.options.thickness}px;
+            `}
+            ${this.options.style}
+        `;
+
+        divider.setAttribute('style', baseStyles);
+        target.parentNode?.insertBefore(divider, target);
+
+        return this;
+    }
+
+    /**
+     * Render after target element
+     */
+    after(targetSelector: string): this {
+        const target = document.querySelector(targetSelector);
+
+        if (!target || !(target instanceof HTMLElement)) {
+            console.warn(`Divider: Target element "${targetSelector}" not found`);
+            return this;
+        }
+
+        const divider = document.createElement('hr');
+        divider.className = `jux-divider ${this.options.className}`.trim();
+
+        const isVertical = this.options.orientation === 'vertical';
+
+        const baseStyles = `
+            border: none;
+            background-color: ${this.options.color};
+            margin: ${this.options.margin};
+            ${isVertical ? `
+                width: ${this.options.thickness}px;
+                height: 100%;
+                display: inline-block;
+                vertical-align: middle;
+            ` : `
+                width: 100%;
+                height: ${this.options.thickness}px;
+            `}
+            ${this.options.style}
+        `;
+
+        divider.setAttribute('style', baseStyles);
+        target.parentNode?.insertBefore(divider, target.nextSibling);
+
+        return this;
+    }
+}
+
+/**
+ * Factory function for quick divider creation
+ */
+export function divider(options: DividerOptions = {}): Divider {
+    return new Divider(options);
+}

package/lib/components/docs-data.json

@@ -1553,6 +1553,75 @@
       ],
       "example": "jux.dialog('confirm-delete', {"
     },
+    {
+      "name": "Divider",
+      "category": "UI Components",
+      "description": "Divider - Simple horizontal or vertical divider line",
+      "constructor": "jux.divider(options: DividerOptions = {})",
+      "fluentMethods": [
+        {
+          "name": "orientation",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set orientation"
+        },
+        {
+          "name": "thickness",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set thickness"
+        },
+        {
+          "name": "color",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set color"
+        },
+        {
+          "name": "margin",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set margin"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "className",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set className"
+        },
+        {
+          "name": "render",
+          "params": "(targetSelector)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "replace",
+          "params": "(targetSelector)",
+          "returns": "this",
+          "description": "Set replace"
+        },
+        {
+          "name": "before",
+          "params": "(targetSelector)",
+          "returns": "this",
+          "description": "Set before"
+        },
+        {
+          "name": "after",
+          "params": "(targetSelector)",
+          "returns": "this",
+          "description": "Set after"
+        }
+      ],
+      "example": "// Simple horizontal divider"
+    },
     {
       "name": "Doughnutchart",
       "category": "UI Components",
@@ -2413,6 +2482,18 @@
           "returns": "this",
           "description": "Set animationDuration"
         },
+        {
+          "name": "borderRadius",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set borderRadius"
+        },
+        {
+          "name": "showAccentBar",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set showAccentBar"
+        },
         {
           "name": "class",
           "params": "(value)",
@@ -3431,5 +3512,5 @@
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-21T04:25:36.636Z"
+  "lastUpdated": "2026-01-21T20:25:28.145Z"
 }

package/lib/components/hero1/hero1.ts

@@ -0,0 +1,196 @@
+import { getOrCreateContainer } from '../helpers.js';
+
+/**
+ * Hero component options
+ */
+export interface HeroOptions {
+  title?: string;
+  subtitle?: string;
+  cta?: string;
+  ctaLink?: string;
+  backgroundImage?: string;
+  variant?: 'default' | 'centered' | 'split';
+  style?: string;
+  class?: string;
+}
+
+/**
+ * Hero component state
+ */
+type HeroState = {
+  title: string;
+  subtitle: string;
+  cta: string;
+  ctaLink: string;
+  backgroundImage: string;
+  variant: string;
+  style: string;
+  class: string;
+};
+
+/**
+ * Hero component
+ * 
+ * Usage:
+ *   const hero = jux.hero('myHero', {
+ *     title: 'Welcome',
+ *     subtitle: 'Get started today',
+ *     cta: 'Learn More'
+ *   });
+ *   hero.render();
+ */
+export class Hero1 {
+  state: HeroState;
+  container: HTMLElement | null = null;
+  _id: string;
+  id: string;
+
+  constructor(id: string, options: HeroOptions = {}) {
+    this._id = id;
+    this.id = id;
+
+    this.state = {
+      title: options.title ?? '',
+      subtitle: options.subtitle ?? '',
+      cta: options.cta ?? '',
+      ctaLink: options.ctaLink ?? '#',
+      backgroundImage: options.backgroundImage ?? '',
+      variant: options.variant ?? 'default',
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  subtitle(value: string): this {
+    this.state.subtitle = value;
+    return this;
+  }
+
+  cta(value: string): this {
+    this.state.cta = value;
+    return this;
+  }
+
+  ctaLink(value: string): this {
+    this.state.ctaLink = value;
+    return this;
+  }
+
+  backgroundImage(value: string): this {
+    this.state.backgroundImage = value;
+    return this;
+  }
+
+  variant(value: string): this {
+    this.state.variant = value;
+    return this;
+  }
+
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  render(targetId?: string): this {
+    let container: HTMLElement;
+
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`Hero: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._id);
+    }
+
+    this.container = container;
+    const { title, subtitle, cta, ctaLink, backgroundImage, variant, style, class: className } = this.state;
+
+    const hero = document.createElement('div');
+    hero.className = `jux-hero jux-hero-${variant}`;
+    hero.id = this._id;
+
+    if (className) {
+      hero.className += ` ${className}`;
+    }
+
+    if (style) {
+      hero.setAttribute('style', style);
+    }
+
+    if (backgroundImage) {
+      hero.style.backgroundImage = `url(${backgroundImage})`;
+    }
+
+    const content = document.createElement('div');
+    content.className = 'jux-hero-content';
+
+    if (title) {
+      const titleEl = document.createElement('h1');
+      titleEl.className = 'jux-hero-title';
+      titleEl.textContent = title;
+      content.appendChild(titleEl);
+    }
+
+    if (subtitle) {
+      const subtitleEl = document.createElement('p');
+      subtitleEl.className = 'jux-hero-subtitle';
+      subtitleEl.textContent = subtitle;
+      content.appendChild(subtitleEl);
+    }
+
+    if (cta) {
+      const ctaEl = document.createElement('a');
+      ctaEl.className = 'jux-hero-cta jux-button jux-button-primary';
+      ctaEl.href = ctaLink;
+      ctaEl.textContent = cta;
+      content.appendChild(ctaEl);
+    }
+
+    hero.appendChild(content);
+    container.appendChild(hero);
+
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Hero.renderTo: Invalid component - not an object');
+    }
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Hero.renderTo: Invalid component - missing _id (not a Jux component)');
+    }
+
+    return this.render(`#${juxComponent._id}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function hero1(id: string, options: HeroOptions = {}): Hero1 {
+  return new Hero1(id, options);
+}