juxscript 1.0.19 → 1.0.20

package/lib/components/badge.ts

@@ -1,87 +1,64 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
-/**
- * Badge component options
- */
 export interface BadgeOptions {
     text?: string;
-    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
-    size?: 'sm' | 'md' | 'lg';
-    pill?: boolean;
+    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     style?: string;
     class?: string;
 }
 
-/**
- * Badge component state
- */
 type BadgeState = {
     text: string;
     variant: string;
     size: string;
-    pill: boolean;
     style: string;
     class: string;
 };
 
-/**
- * Badge component - Status indicators, counts, labels
- * 
- * Usage:
- *   jux.badge('status', {
- *     text: 'Active',
- *     variant: 'success',
- *     pill: true
- *   }).render('#card');
- * 
- *   jux.badge('count', { text: '5' }).render('#notifications');
- */
 export class Badge {
     state: BadgeState;
     container: HTMLElement | null = null;
     _id: string;
     id: string;
 
+    private _bindings: Array<{ event: string, handler: Function }> = [];
+    private _syncBindings: Array<{
+        property: string,
+        stateObj: State<any>,
+        toState?: Function,
+        toComponent?: Function
+    }> = [];
+
     constructor(id: string, options: BadgeOptions = {}) {
         this._id = id;
         this.id = id;
 
         this.state = {
             text: options.text ?? '',
-            variant: options.variant ?? 'default',
+            variant: options.variant ?? 'primary',
             size: options.size ?? 'md',
-            pill: options.pill ?? false,
             style: options.style ?? '',
             class: options.class ?? ''
         };
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-
     text(value: string): this {
         this.state.text = value;
-        this._updateElement();
         return this;
     }
 
-    variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this {
+    variant(value: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'): this {
         this.state.variant = value;
-        this._updateElement();
         return this;
     }
 
-    size(value: 'sm' | 'md' | 'lg'): this {
+    size(value: 'xs' | 'sm' | 'md' | 'lg' | 'xl'): this {
         this.state.size = value;
         return this;
     }
 
-    pill(value: boolean): this {
-        this.state.pill = value;
-        return this;
-    }
-
     style(value: string): this {
         this.state.style = value;
         return this;
@@ -92,61 +69,75 @@ export class Badge {
         return this;
     }
 
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
-
-    private _updateElement(): void {
-        const element = document.getElementById(this._id);
-        if (element) {
-            element.textContent = this.state.text;
-            element.className = `jux-badge jux-badge-${this.state.variant} jux-badge-${this.state.size}`;
-            if (this.state.pill) {
-                element.classList.add('jux-badge-pill');
-            }
-            if (this.state.class) {
-                element.className += ` ${this.state.class}`;
-            }
-        }
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
+        return this;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Badge.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
+        return this;
+    }
 
     render(targetId?: string): this {
+        // === 1. SETUP: Get or create container ===
         let container: HTMLElement;
-
         if (targetId) {
             const target = document.querySelector(targetId);
             if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Badge: Target element "${targetId}" not found`);
+                throw new Error(`Badge: Target "${targetId}" not found`);
             }
             container = target;
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
-        const { text, variant, size, pill, style, class: className } = this.state;
 
+        // === 2. PREPARE: Destructure state ===
+        const { text, variant, size, style, class: className } = this.state;
+
+        // === 3. BUILD: Create DOM elements ===
         const badge = document.createElement('span');
         badge.className = `jux-badge jux-badge-${variant} jux-badge-${size}`;
         badge.id = this._id;
         badge.textContent = text;
+        if (className) badge.className += ` ${className}`;
+        if (style) badge.setAttribute('style', style);
+
+        // === 4. WIRE: Attach event listeners and sync bindings ===
+
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            badge.addEventListener(event, handler as EventListener);
+        });
+
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'text') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    badge.textContent = transformed;
+                    this.state.text = transformed;
+                });
+            }
+            else if (property === 'variant') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    badge.classList.remove(`jux-badge-${this.state.variant}`);
+                    this.state.variant = transformed;
+                    badge.classList.add(`jux-badge-${transformed}`);
+                });
+            }
+        });
 
-        if (pill) {
-            badge.classList.add('jux-badge-pill');
-        }
-
-        if (className) {
-            badge.className += ` ${className}`;
-        }
-
-        if (style) {
-            badge.setAttribute('style', style);
-        }
-
+        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(badge);
         return this;
     }

package/lib/components/barchart.ts

@@ -1,5 +1,24 @@
 import { getOrCreateContainer } from './helpers.js';
 import { State } from '../reactivity/state.js';
+import {
+    ChartDataPoint,
+    BarAreaChartOptions,
+    BarAreaChartState,
+    ChartTheme,
+    ChartStyleMode,
+    ChartOrientation,
+    ChartDirection,
+    LegendOrientation,
+    ChartPropertyMapping,
+    ChartStateObject
+} from './chart-types.js';
+import {
+    lightenColor,
+    getThemeConfig,
+    createLegend,
+    createDataTable,
+    applyThemeStyles
+} from './chart-utils.js';
 import {
     googleTheme,
     seriesaTheme,
@@ -384,6 +403,105 @@ export class BarChart {
         return this;
     }
 
+    /* -------------------------
+     * Reactivity Support
+     * ------------------------- */
+
+    /**
+     * Sync a single property to a state object
+     */
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        const transform = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+            const transformed = transform(val);
+
+            // Map property to correct method
+            switch (property) {
+                case 'data': this.data(transformed); break;
+                case 'title': this.title(transformed); break;
+                case 'subtitle': this.subtitle(transformed); break;
+                case 'width': this.width(transformed); break;
+                case 'height': this.height(transformed); break;
+                case 'theme': this.theme(transformed); break;
+                case 'styleMode': this.styleMode(transformed); break;
+                case 'borderRadius': this.borderRadius(transformed); break;
+                case 'showTicksX': this.showTicksX(transformed); break;
+                case 'showTicksY': this.showTicksY(transformed); break;
+                case 'showLegend': this.showLegend(transformed); break;
+                case 'showDataLabels': this.showDataLabels(transformed); break;
+                case 'showDataTable': this.showDataTable(transformed); break;
+                case 'animate': this.animate(transformed); break;
+                case 'animationDuration': this.animationDuration(transformed); break;
+                case 'legendOrientation': this.legendOrientation(transformed); break;
+                case 'chartOrientation': this.chartOrientation(transformed); break;
+                case 'chartDirection': this.chartDirection(transformed); break;
+            }
+        });
+
+        return this;
+    }
+
+    /**
+     * Sync multiple properties from a state object
+     */
+    syncState(stateObject: ChartStateObject, mapping?: ChartPropertyMapping): this {
+        // Default mapping: camelCase state names to method names
+        const defaultMapping: ChartPropertyMapping = {
+            chartType: 'type',           // Not used in bar chart, ignored
+            chartTheme: 'theme',
+            chartStyleMode: 'styleMode',
+            borderRadius: 'borderRadius',
+            chartTitle: 'title',
+            chartWidth: 'width',
+            chartHeight: 'height',
+            showTicksX: 'showTicksX',
+            showTicksY: 'showTicksY',
+            showLegend: 'showLegend',
+            showDataTable: 'showDataTable',
+            showDataLabels: 'showDataLabels',
+            animate: 'animate',
+            animationDuration: 'animationDuration',
+            legendOrientation: 'legendOrientation',
+            chartOrientation: 'chartOrientation',
+            chartDirection: 'chartDirection'
+        };
+
+        const finalMapping = { ...defaultMapping, ...mapping };
+
+        // Iterate through state object and bind each property
+        Object.entries(stateObject).forEach(([key, stateObj]) => {
+            if (!stateObj || typeof stateObj.subscribe !== 'function') {
+                return;
+            }
+
+            const methodOrFunction = finalMapping[key];
+
+            if (!methodOrFunction) {
+                return;
+            }
+
+            if (typeof methodOrFunction === 'function') {
+                // Custom function mapping
+                stateObj.subscribe(methodOrFunction);
+            } else {
+                // String mapping to method name
+                const methodName = methodOrFunction as keyof this;
+                const method = this[methodName];
+
+                if (typeof method !== 'function') {
+                    return;
+                }
+
+                stateObj.subscribe((val: any) => {
+                    (method as Function).call(this, val);
+                });
+            }
+        });
+
+        return this;
+    }
+
     /* -------------------------
      * Update chart
      * ------------------------- */
@@ -1049,59 +1167,13 @@ export class BarChart {
     }
 
     private _applyTheme(themeName: string): void {
-        const themes: Record<string, any> = {
-            google: googleTheme,
-            seriesa: seriesaTheme,
-            hr: hrTheme,
-            figma: figmaTheme,
-            notion: notionTheme,
-            chalk: chalkTheme,
-            mint: mintTheme
-        };
-
-        const theme = themes[themeName];
+        const theme = getThemeConfig(themeName as ChartTheme);
         if (!theme) return;
 
         // Apply colors
         this.state.colors = theme.colors;
 
-        // Inject base styles (once)
-        const baseStyleId = 'jux-barchart-base-styles';
-        if (!document.getElementById(baseStyleId)) {
-            const style = document.createElement('style');
-            style.id = baseStyleId;
-            style.textContent = this._getBaseStyles();
-            document.head.appendChild(style);
-        }
-
-        // Inject font (once per theme)
-        if (theme.font && !document.querySelector(`link[href="${theme.font}"]`)) {
-            const link = document.createElement('link');
-            link.rel = 'stylesheet';
-            link.href = theme.font;
-            document.head.appendChild(link);
-        }
-
-        // Apply theme-specific styles
-        const styleId = `jux-barchart-theme-${themeName}`;
-        let styleElement = document.getElementById(styleId) as HTMLStyleElement;
-
-        if (!styleElement) {
-            styleElement = document.createElement('style');
-            styleElement.id = styleId;
-            document.head.appendChild(styleElement);
-        }
-
-        // Generate CSS with theme variables
-        const variablesCSS = Object.entries(theme.variables)
-            .map(([key, value]) => `  ${key}: ${value};`)
-            .join('\n');
-
-        styleElement.textContent = `
-.jux-barchart.theme-${themeName} {
-${variablesCSS}
-}
-`;
+        applyThemeStyles(themeName as ChartTheme, 'jux-barchart', this._getBaseStyles());
     }
 
     private _applyThemeToWrapper(wrapper: HTMLElement): void {

package/lib/components/button.ts

@@ -1,5 +1,6 @@
 import { getOrCreateContainer } from './helpers.js';
 import { State } from '../reactivity/state.js';
+import { renderIcon } from './icons.js';
 
 /**
  * Button component options
@@ -7,7 +8,6 @@ import { State } from '../reactivity/state.js';
 export interface ButtonOptions {
   label?: string;
   icon?: string;
-  click?: (e: Event) => void;
   variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string;
   size?: 'small' | 'medium' | 'large';
   disabled?: boolean;
@@ -25,7 +25,6 @@ export interface ButtonOptions {
 type ButtonState = {
   label: string;
   icon: string;
-  click: ((e: Event) => void) | null;
   variant: string;
   size: string;
   disabled: boolean;
@@ -46,8 +45,14 @@ export class Button {
   _id: string;
   id: string;
 
-  // Store bind() instructions
+  // CRITICAL: Store bind/sync instructions for deferred wiring
   private _bindings: Array<{ event: string, handler: Function }> = [];
+  private _syncBindings: Array<{
+    property: string,
+    stateObj: State<any>,
+    toState?: Function,
+    toComponent?: Function
+  }> = [];
 
   constructor(id: string, options?: ButtonOptions) {
     this._id = id;
@@ -58,7 +63,6 @@ export class Button {
     this.state = {
       label: opts.label ?? 'Button',
       icon: opts.icon ?? '',
-      click: opts.click ?? null,
       variant: opts.variant ?? 'primary',
       size: opts.size ?? 'medium',
       disabled: opts.disabled ?? false,
@@ -85,20 +89,7 @@ export class Button {
     return this;
   }
 
-  click(callback: (e: Event) => void): this {
-    this.state.click = callback;
-    return this;
-  }
-
-  /**
-   * Bind event handler (stores for wiring in render)
-   */
-  bind(event: string, handler: Function): this {
-    this._bindings.push({ event, handler });
-    return this;
-  }
-
-  variant(value: string): this {
+  variant(value: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string): this {
     this.state.variant = value;
     return this;
   }
@@ -143,91 +134,132 @@ export class Button {
     return this;
   }
 
+  /**
+   * Bind DOM events (click, hover, etc.)
+   * Stores handlers for wiring in render()
+   */
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
+    return this;
+  }
+
+  /**
+   * Two-way state synchronization
+   * Stores sync instructions for wiring in render()
+   */
+  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    if (!stateObj || typeof stateObj.subscribe !== 'function') {
+      throw new Error(`Button.sync: Expected a State object for property "${property}"`);
+    }
+    this._syncBindings.push({ property, stateObj, toState, toComponent });
+    return this;
+  }
+
   /* -------------------------
    * Render
    * ------------------------- */
 
   render(targetId?: string): this {
+    // === 1. SETUP: Get or create container ===
     let container: HTMLElement;
-
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Button: Target element "${targetId}" not found`);
+        throw new Error(`Button: Target "${targetId}" not found`);
       }
       container = target;
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { label, icon, click, variant, size, disabled, loading, iconPosition, fullWidth, type, style, class: className } = this.state;
 
+    // === 2. PREPARE: Destructure state ===
+    const { label: text, variant, size, disabled, icon, iconPosition, loading, style, class: className } = this.state;
+    const hasTextSync = this._syncBindings.some(b => b.property === 'text');
+    const hasDisabledSync = this._syncBindings.some(b => b.property === 'disabled');
+
+    // === 3. BUILD: Create DOM elements ===
     const button = document.createElement('button');
     button.className = `jux-button jux-button-${variant} jux-button-${size}`;
     button.id = this._id;
-    button.type = type;
     button.disabled = disabled || loading;
 
-    if (fullWidth) {
-      button.classList.add('jux-button-full-width');
-    }
-
-    if (loading) {
-      button.classList.add('jux-button-loading');
-    }
-
-    if (className) {
-      button.className += ` ${className}`;
-    }
-
-    if (style) {
-      button.setAttribute('style', style);
-    }
+    if (className) button.className += ` ${className}`;
+    if (style) button.setAttribute('style', style);
 
-    // Build button content
     if (icon && iconPosition === 'left') {
       const iconEl = document.createElement('span');
-      iconEl.className = 'jux-button-icon jux-button-icon-left';
-      iconEl.textContent = icon;
+      iconEl.className = 'jux-button-icon';
+      iconEl.appendChild(renderIcon(icon));
       button.appendChild(iconEl);
     }
 
-    const labelEl = document.createElement('span');
-    labelEl.className = 'jux-button-label';
-    labelEl.textContent = loading ? 'Loading...' : label;
-    button.appendChild(labelEl);
+    const textEl = document.createElement('span');
+    textEl.textContent = loading ? 'Loading...' : text;
+    button.appendChild(textEl);
 
     if (icon && iconPosition === 'right') {
       const iconEl = document.createElement('span');
-      iconEl.className = 'jux-button-icon jux-button-icon-right';
-      iconEl.textContent = icon;
+      iconEl.className = 'jux-button-icon';
+      iconEl.appendChild(renderIcon(icon));
       button.appendChild(iconEl);
     }
 
-    // Event binding - legacy click handler from state
-    if (click) {
-      button.addEventListener('click', click);
-    }
+    // === 4. WIRE: Attach event listeners and sync bindings ===
 
-    // Event binding - bind() method handlers
+    // Wire custom bindings from .bind() calls
     this._bindings.forEach(({ event, handler }) => {
       button.addEventListener(event, handler as EventListener);
     });
 
+    // Wire sync bindings from .sync() calls
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'text') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          textEl.textContent = this.state.loading ? 'Loading...' : transformed;
+          this.state.label = transformed;
+        });
+      }
+      else if (property === 'disabled') {
+        const transformToComponent = toComponent || ((v: any) => Boolean(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          button.disabled = transformed || this.state.loading;
+          this.state.disabled = transformed;
+        });
+      }
+      else if (property === 'loading') {
+        const transformToComponent = toComponent || ((v: any) => Boolean(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          button.disabled = this.state.disabled || transformed;
+          textEl.textContent = transformed ? 'Loading...' : this.state.label;
+          this.state.loading = transformed;
+        });
+      }
+    });
+
+    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(button);
+
+    requestAnimationFrame(() => {
+      if ((window as any).lucide) {
+        (window as any).lucide.createIcons();
+      }
+    });
+
     return this;
   }
 
-  renderTo(juxComponent: this): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Button.renderTo: Invalid component - not an object');
+  renderTo(juxComponent: any): this {
+    if (!juxComponent?._id) {
+      throw new Error('Button.renderTo: Invalid component');
     }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Button.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
     return this.render(`#${juxComponent._id}`);
   }
 }