juxscript 1.0.8 → 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",
@@ -3443,5 +3512,5 @@
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-21T05:03:38.497Z"
+  "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);
+}

package/lib/components/hero1/index.js

@@ -0,0 +1,4 @@
+import { hero1 } from './hero1.js'
+
+
+export { hero1 }

package/lib/components/kpicard.ts

@@ -242,6 +242,11 @@ export class KPICard {
             return this;
         }
 
+        // Remove existing element if it exists
+        if (this._element && this._element.parentNode) {
+            this._element.parentNode.removeChild(this._element);
+        }
+
         this._loadThemeFont();
         this._buildCard(element as HTMLElement);
         return this;
@@ -253,8 +258,11 @@ export class KPICard {
         const element = document.querySelector(this._container);
         if (!element) return;
 
-        // Clear and rebuild
-        element.innerHTML = '';
+        // Remove existing element
+        if (this._element && this._element.parentNode) {
+            this._element.parentNode.removeChild(this._element);
+        }
+
         this._loadThemeFont();
         this._buildCard(element as HTMLElement);
     }
@@ -317,6 +325,9 @@ export class KPICard {
         const baseHeight = 200;
         const scaleFactor = Math.min(width / baseWidth, height / baseHeight);
 
+        // Determine if we're in dark mode based on style mode
+        const isDarkMode = styleMode === 'gradient' || styleMode === 'glass';
+
         const content = document.createElement('div');
         content.className = 'jux-kpicard-content';
         content.style.cssText = `
@@ -331,10 +342,19 @@ export class KPICard {
         const titleEl = document.createElement('div');
         titleEl.className = 'jux-kpicard-title';
         titleEl.textContent = title;
+        
+        // Smart color selection based on theme
+        let titleColor = '#6b7280'; // default light mode
+        if (styleMode === 'gradient') {
+            titleColor = 'rgba(255, 255, 255, 0.95)';
+        } else if (styleMode === 'glass') {
+            titleColor = 'rgba(31, 41, 55, 0.9)'; // dark text for glass effect
+        }
+        
         titleEl.style.cssText = `
             font-size: ${16 * scaleFactor}px;
             font-weight: 500;
-            color: ${styleMode === 'gradient' ? 'rgba(255, 255, 255, 0.95)' : '#6b7280'};
+            color: ${titleColor};
             margin-bottom: ${16 * scaleFactor}px;
             font-family: ${themeConfig.variables['--chart-font-family']};
         `;
@@ -352,10 +372,19 @@ export class KPICard {
         const valueEl = document.createElement('div');
         valueEl.className = 'jux-kpicard-value';
         valueEl.textContent = `${prefix}${value}${suffix}`;
+        
+        // Smart color selection for value
+        let valueColor = '#1f2937'; // default dark
+        if (styleMode === 'gradient') {
+            valueColor = '#ffffff';
+        } else if (styleMode === 'glass') {
+            valueColor = '#111827'; // very dark for glass
+        }
+        
         valueEl.style.cssText = `
             font-size: ${56 * scaleFactor}px;
             font-weight: 800;
-            color: ${styleMode === 'gradient' ? '#ffffff' : '#1f2937'};
+            color: ${valueColor};
             line-height: 1;
             font-family: ${themeConfig.variables['--chart-font-family']};
             ${styleMode === 'glow' ? `text-shadow: 0 0 ${20 * scaleFactor}px ${themeConfig.colors[0]}40;` : ''}
@@ -391,12 +420,18 @@ export class KPICard {
             const arrow = this._createArrowSVG(delta > 0, styleMode === 'gradient', scaleFactor);
             deltaContainer.appendChild(arrow);
 
-            // Delta text
+            // Delta text with smart coloring
             const deltaText = document.createElement('span');
             deltaText.textContent = `${delta > 0 ? '+' : ''}${delta}%`;
-            const deltaColor = styleMode === 'gradient' 
-                ? (delta > 0 ? 'rgba(255, 255, 255, 0.95)' : 'rgba(255, 200, 200, 0.95)')
-                : (delta > 0 ? '#10b981' : '#ef4444');
+            
+            let deltaColor;
+            if (styleMode === 'gradient') {
+                deltaColor = delta > 0 ? 'rgba(255, 255, 255, 0.95)' : 'rgba(255, 200, 200, 0.95)';
+            } else if (styleMode === 'glass') {
+                deltaColor = delta > 0 ? '#10b981' : '#ef4444';
+            } else {
+                deltaColor = delta > 0 ? '#10b981' : '#ef4444';
+            }
             
             deltaText.style.cssText = `
                 font-size: ${18 * scaleFactor}px;

package/lib/components/sidebar.ts

@@ -18,7 +18,7 @@ export interface SidebarOptions {
  */
 type SidebarState = {
   title: string;
-  width: string;
+  width: string | null;
   position: string;
   collapsible: boolean;
   collapsed: boolean;
@@ -49,7 +49,7 @@ export class Sidebar {
 
     this.state = {
       title: options.title ?? '',
-      width: options.width ?? '300px',
+      width: options.width ?? null, // No default width - let CSS handle it
       position: options.position ?? 'left',
       collapsible: options.collapsible ?? false,
       collapsed: options.collapsed ?? false,
@@ -117,10 +117,14 @@ export class Sidebar {
 
     if (collapsed) {
       sidebar.classList.add('jux-sidebar-collapsed');
-      sidebar.style.width = '0';
+      if (width) {
+        sidebar.style.width = '0';
+      }
     } else {
       sidebar.classList.remove('jux-sidebar-collapsed');
-      sidebar.style.width = width;
+      if (width) {
+        sidebar.style.width = width;
+      }
     }
 
     const toggleBtn = sidebar.querySelector('.jux-sidebar-toggle');
@@ -152,7 +156,11 @@ export class Sidebar {
     const sidebar = document.createElement('aside');
     sidebar.className = `jux-sidebar jux-sidebar-${position}`;
     sidebar.id = this._id;
-    sidebar.style.width = collapsed ? '0' : width;
+    
+    // Only set width if explicitly provided
+    if (width) {
+      sidebar.style.width = collapsed ? '0' : width;
+    }
 
     if (className) {
       sidebar.className += ` ${className}`;

package/lib/jux.ts

@@ -51,9 +51,10 @@ import { heading, Heading, type HeadingOptions } from './components/heading.js';
 import { paragraph, Paragraph, type ParagraphOptions } from './components/paragraph.js';
 import { barchart, BarChart, type BarChartOptions, type BarChartDataPoint } from './components/barchart.js';
 import { areachart, AreaChart, type AreaChartOptions, type AreaChartDataPoint } from './components/areachart.js';
-import { areachartsmooth, AreaChartSmooth, type AreaChartSmoothOptions, AreaChartSmoothDataPoint  } from './components/areachartsmooth.js';
+import { areachartsmooth, AreaChartSmooth, type AreaChartSmoothOptions, AreaChartSmoothDataPoint } from './components/areachartsmooth.js';
 import { doughnutchart, DoughnutChart, type DoughnutChartOptions, type DoughnutChartDataPoint } from './components/doughnutchart.js';
 import { kpicard, KPICard, type KPICardOptions } from './components/kpicard.js';
+import { divider, Divider, type DividerOptions } from './components/divider.js';
 
 /* -------------------------
  * Type Exports
@@ -116,7 +117,8 @@ export type {
   AreaChartSmoothDataPoint,
   DoughnutChartOptions,
   DoughnutChartDataPoint,
-  KPICardOptions
+  KPICardOptions,
+  DividerOptions
 };
 
 /* -------------------------
@@ -172,7 +174,8 @@ export {
   AreaChart,
   AreaChartSmooth,
   DoughnutChart,
-  KPICard
+  KPICard,
+  Divider
 };
 
 /* -------------------------
@@ -234,6 +237,7 @@ export interface JuxAPI {
   areachartsmooth: typeof areachartsmooth;
   doughnutchart: typeof doughnutchart;
   kpicard: typeof kpicard;
+  divider: typeof divider;
 }
 
 /* -------------------------
@@ -311,8 +315,8 @@ class Jux implements JuxAPI {
   areachartsmooth = areachartsmooth;
   doughnutchart = doughnutchart;
   kpicard = kpicard;
+  divider = divider;
 }
-
 /**
  * Global jux singleton instance
  */

package/lib/presets/global.css

@@ -133,7 +133,6 @@ p {
 
 /* Sidebar Component */
 .jux-sidebar { 
-  padding: var(--space-md); 
   height: 100%;
   overflow-y: auto;
 }

package/machinery/compiler.js

@@ -2,6 +2,23 @@ import fs from 'fs';
 import path from 'path';
 import esbuild from 'esbuild';
 
+/**
+ * Generate import map script tag
+ */
+function generateImportMapScript() {
+  return `<script type="importmap">
+{
+  "imports": {
+    "juxscript": "./lib/jux.js",
+    "juxscript/": "./lib/",
+    "juxscript/reactivity": "./lib/reactivity/state.js",
+    "juxscript/presets/": "./lib/presets/",
+    "juxscript/components/": "./lib/components/"
+  }
+}
+</script>`;
+}
+
 /**
  * Compile a .jux file to .js and .html
  * 
@@ -36,7 +53,6 @@ export async function compileJuxFile(juxFilePath, options = {}) {
   // 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';
-  const styleBasePath = depth === 0 ? './lib/presets/' : '../'.repeat(depth) + 'lib/presets/';
 
   // Transform imports
   let transformedContent = juxContent;
@@ -68,8 +84,9 @@ export async function compileJuxFile(juxFilePath, options = {}) {
 
   console.log(`  ✓ JS: ${path.relative(projectRoot, jsOutputPath)}`);
 
-  // Generate HTML with correct script path
+  // Generate HTML with import map and correct script path
   const scriptPath = `./${parsedPath.name}.js`;
+  const importMapScript = generateImportMapScript();
 
   const html = `<!DOCTYPE html>
 <html lang="en">
@@ -77,12 +94,12 @@ export async function compileJuxFile(juxFilePath, options = {}) {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${parsedPath.name}</title>
-  <!-- JUX Core Styles -->
-  <link rel="stylesheet" href="${styleBasePath}global.css">
 </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 -->

package/machinery/server.js

@@ -12,7 +12,7 @@ const __dirname = path.dirname(__filename);
 
 let db = null;
 
-async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
+async function serve(port = 3000, distDir = './jux-dist') {
   const app = express();
   const absoluteDistDir = path.resolve(distDir);
   const projectRoot = path.resolve('.');
@@ -29,14 +29,14 @@ async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
   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);
-      
+
       const rows = [];
       while (stmt.step()) {
         rows.push(stmt.getAsObject());
@@ -61,16 +61,20 @@ async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
   // 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) 
+    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);
+      if (fs.existsSync(heyPath)) {
+        return res.sendFile(heyPath);
+      }
+      if (fs.existsSync(indexPath)) {
+        return res.sendFile(indexPath);
+      }
     }
 
     // Try to serve as HTML file
@@ -87,7 +91,7 @@ async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
 
     next();
   });
-  
+
   // Serve static files (CSS, JS, images, etc.)
   app.use(express.static(absoluteDistDir));
 
@@ -96,25 +100,24 @@ async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
     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') {
-      // Add debug info as query params
       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);
     }
-    
+
     // Fallback: minimal 404 response
     res.status(404).send('<h1>404 - Not Found</h1>');
   });
@@ -175,7 +178,7 @@ async function serve(port = 3000, distDir = './jux-dist') {  // Changed default
 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);
@@ -188,5 +191,5 @@ async function initDatabase() {
 
 export async function start(port = 3000) {
   await initDatabase();
-  return serve(port, './jux-dist');  // Changed default
+  return serve(port, './jux-dist');
 }

package/package.json

@@ -1,84 +1,64 @@
 {
   "name": "juxscript",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",
   "types": "lib/jux.d.ts",
+  "access": "public",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jux/juxscript.git"
+  },
   "exports": {
     ".": {
       "types": "./lib/jux.d.ts",
       "import": "./lib/jux.js",
       "default": "./lib/jux.js"
     },
-    "./lib/*": "./lib/*",
-    "./lib/components/*": "./lib/components/*",
+    "./reactivity": {
+      "types": "./lib/reactivity/index.d.ts",
+      "import": "./lib/reactivity/index.js",
+      "default": "./lib/reactivity/index.js"
+    },
+    "./components/*": "./lib/components/*/index.js",
+    "./presets/*": "./lib/presets/*.js",
     "./package.json": "./package.json"
   },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "lib/*"
-      ],
-      "lib/*": [
-        "lib/*"
-      ],
-      "lib/components/*": [
-        "lib/components/*"
-      ]
-    }
-  },
-  "bin": {
-    "jux": "./bin/cli.js"
-  },
-  "scripts": {
-    "dev": "cd examples && npx jux serve",
-    "build:examples": "cd examples && rm -rf dist && npx jux build",
-    "build": "tsc",
-    "test": "node test/run-tests.js",
-    "generate:icons": "node scripts/generate-icon-types.js"
-  },
   "files": [
     "lib",
     "bin",
     "machinery",
     "types",
-    "lib/**/*.d.ts",
     "README.md",
     "LICENSE"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/juxscript/jux.git"
+  "bin": {
+    "jux": "./bin/cli.js"
   },
   "keywords": [
-    "jux",
     "ui",
-    "authoring",
+    "ux",
+    "components",
+    "framework",
+    "reactive",
     "javascript"
   ],
-  "author": "Tim Kerr",
-  "license": "MIT",
-  "dependencies": {
-    "acorn": "^8.15.0",
-    "chokidar": "^5.0.0",
-    "clean-css": "^5.3.3",
-    "esbuild": "^0.27.2",
-    "express": "^5.2.1",
-    "glob": "^13.0.0",
-    "node": "^24.12.0",
-    "sql.js": "^1.10.3",
-    "terser": "^5.44.1",
-    "ws": "^8.19.0"
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
   },
-  "optionalDependencies": {
-    "mysql2": "^3.6.5",
-    "pg": "^8.11.3"
+  "dependencies": {
+    "express": "^4.18.2",
+    "chokidar": "^3.5.3",
+    "ws": "^8.13.0",
+    "sql.js": "^1.8.0"
   },
   "devDependencies": {
-    "typescript": "^5.9.3"
+    "typescript": "^5.0.0",
+    "@types/express": "^4.17.17",
+    "@types/node": "^20.0.0",
+    "@types/ws": "^8.5.5"
   }
 }

package/machinery/generators/css.js

@@ -1,128 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import CleanCSS from 'clean-css';
-import { FileValidator } from '../validators/file-validator.js';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-/**
- * Generates CSS content from Jux configuration
- * Handles: global.css, themes, imports, styleImports, and styleInline blocks
- */
-export function generateCSS(juxConfig, layoutParsed = null) {
-  const fileValidator = new FileValidator();
-  let cssOutput = '';
-
-  // 1. Add global.css (always first)
-  const globalCssPath = path.join(__dirname, '../../lib/global.css');
-  if (fs.existsSync(globalCssPath)) {
-    cssOutput += `/* Global Styles */\n`;
-    cssOutput += fs.readFileSync(globalCssPath, 'utf-8') + '\n\n';
-    console.log(`  ✓ Included global.css`);
-  }
-
-  // 2. Add theme CSS (layout theme first, then page theme if different)
-  const themesToLoad = [];
-  
-  if (layoutParsed?.config?.theme) {
-    themesToLoad.push({ theme: layoutParsed.config.theme, source: 'layout' });
-  }
-  
-  if (juxConfig.theme && juxConfig.theme !== layoutParsed?.config?.theme) {
-    themesToLoad.push({ theme: juxConfig.theme, source: 'page' });
-  }
-
-  for (const { theme, source } of themesToLoad) {
-    const themePath = path.join(__dirname, '../../lib/themes', `${theme}.css`);
-    if (fs.existsSync(themePath)) {
-      cssOutput += `/* Theme: ${theme} (${source}) */\n`;
-      cssOutput += fs.readFileSync(themePath, 'utf-8') + '\n\n';
-      console.log(`  ✓ Included theme: ${theme} (${source})`);
-    } else {
-      console.warn(`  ⚠️  Theme not found: ${theme}`);
-    }
-  }
-
-  // 3. Process @import directives (CSS files only from layout, then page)
-  const allImports = [
-    ...(layoutParsed?.config?.import || []),
-    ...(juxConfig.import || [])
-  ];
-
-  if (allImports.length > 0) {
-    const { categorized } = fileValidator.categorizeImports(allImports);
-
-    // Only process CSS files
-    for (const cssImport of categorized.css) {
-      const resolvedPath = path.join(__dirname, '../../', cssImport);
-      if (fs.existsSync(resolvedPath)) {
-        cssOutput += `/* Import: ${cssImport} */\n`;
-        cssOutput += fs.readFileSync(resolvedPath, 'utf-8') + '\n\n';
-        console.log(`  ✓ Included import: ${cssImport}`);
-      } else {
-        console.warn(`  ⚠️  Import not found: ${cssImport} (resolved to ${resolvedPath})`);
-      }
-    }
-
-    // Log skipped JS imports (will be handled in HTML)
-    if (categorized.js.length > 0) {
-      console.log(`  ℹ️  Skipped JS imports (will be added to HTML): ${categorized.js.length} file(s)`);
-    }
-  }
-
-  // 4. Process @style imports (CSS file references from layout, then page)
-  const allStyleImports = [
-    ...(layoutParsed?.config?.styleImports || []),
-    ...(juxConfig.styleImports || [])
-  ];
-
-  for (const styleImport of allStyleImports) {
-    // Handle URLs (CDN)
-    if (styleImport.startsWith('http://') || styleImport.startsWith('https://')) {
-      cssOutput += `/* External CSS: ${styleImport} */\n`;
-      cssOutput += `@import url('${styleImport}');\n\n`;
-      console.log(`  ✓ Added CDN import: ${styleImport}`);
-    } else {
-      // Handle local files
-      const resolvedPath = path.join(__dirname, '../../', styleImport);
-      if (fs.existsSync(resolvedPath)) {
-        cssOutput += `/* Style Import: ${styleImport} */\n`;
-        cssOutput += fs.readFileSync(resolvedPath, 'utf-8') + '\n\n';
-        console.log(`  ✓ Included style import: ${styleImport}`);
-      } else {
-        console.warn(`  ⚠️  Style import not found: ${styleImport} (resolved to ${resolvedPath})`);
-      }
-    }
-  }
-
-  // 5. Process inline @style blocks (layout first, then page)
-  const allInlineStyles = [
-    ...(layoutParsed?.config?.styleInline || []),
-    ...(juxConfig.styleInline || [])
-  ];
-
-  if (allInlineStyles.length > 0) {
-    cssOutput += `/* Inline Styles (${allInlineStyles.length} block(s)) */\n`;
-    
-    allInlineStyles.forEach((styleBlock, index) => {
-      const source = index < (layoutParsed?.config?.styleInline?.length || 0) ? 'layout' : 'page';
-      
-      try {
-        const validatedStyle = fileValidator.validateStyleContent(styleBlock, `inline block #${index + 1}`);
-        
-        if (!fileValidator.isEmptyStyle(validatedStyle)) {
-          cssOutput += `/* Inline Block #${index + 1} (${source}) */\n`;
-          cssOutput += validatedStyle + '\n\n';
-        }
-      } catch (error) {
-        console.error(`  ❌ ${error.message}`);
-      }
-    });
-
-    console.log(`  ✓ Included ${allInlineStyles.length} inline style block(s)`);
-  }
-
-  return cssOutput.trim();
-}