juxscript 1.0.18 → 1.0.20

package/lib/components/button.ts

@@ -1,4 +1,6 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+import { renderIcon } from './icons.js';
 
 /**
  * Button component options
@@ -6,7 +8,6 @@ import { getOrCreateContainer } from './helpers.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;
@@ -24,7 +25,6 @@ export interface ButtonOptions {
 type ButtonState = {
   label: string;
   icon: string;
-  click: ((e: Event) => void) | null;
   variant: string;
   size: string;
   disabled: boolean;
@@ -38,12 +38,6 @@ type ButtonState = {
 
 /**
  * Button component
- * 
- * Usage:
- *   jux.button('myButton').label('Click Me').click(() => console.log('hi')).render();
- *   
- *   // Or with options
- *   jux.button('myButton', { label: 'Click Me', click: () => console.log('hi') }).render();
  */
 export class Button {
   state: ButtonState;
@@ -51,6 +45,15 @@ export class Button {
   _id: string;
   id: string;
 
+  // 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;
     this.id = id;
@@ -60,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,
@@ -77,195 +79,191 @@ export class Button {
    * Fluent API
    * ------------------------- */
 
-  /**
-   * Set button label text
-   */
   label(value: string): this {
     this.state.label = value;
     return this;
   }
 
-  /**
-   * Set button icon (emoji or text)
-   */
   icon(value: string): this {
     this.state.icon = value;
     return this;
   }
 
-  /**
-   * Set click handler
-   */
-  click(callback: (e: Event) => void): this {
-    this.state.click = callback;
-    return this;
-  }
-
-  /**
-   * Set button variant/style
-   */
-  variant(value: string): this {
+  variant(value: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info' | 'link' | string): this {
     this.state.variant = value;
     return this;
   }
 
-  /**
-   * Set button size
-   */
   size(value: 'small' | 'medium' | 'large'): this {
     this.state.size = value;
     return this;
   }
 
-  /**
-   * Set disabled state
-   */
   disabled(value: boolean): this {
     this.state.disabled = value;
     return this;
   }
 
-  /**
-   * Set loading state
-   */
   loading(value: boolean): this {
     this.state.loading = value;
     return this;
   }
 
-  /**
-   * Set icon position (left or right)
-   */
   iconPosition(value: 'left' | 'right'): this {
     this.state.iconPosition = value;
     return this;
   }
 
-  /**
-   * Set full width
-   */
   fullWidth(value: boolean): this {
     this.state.fullWidth = value;
     return this;
   }
 
-  /**
-   * Set button type attribute
-   */
   type(value: 'button' | 'submit' | 'reset'): this {
     this.state.type = value;
     return this;
   }
 
-  /**
-   * Set inline style
-   */
   style(value: string): this {
     this.state.style = value;
     return this;
   }
 
-  /**
-   * Set additional CSS classes
-   */
   class(value: string): this {
     this.state.class = value;
     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 button to target element
-   */
   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 - click handler
-    if (click) {
-      button.addEventListener('click', click);
-    }
+    // === 4. WIRE: Attach event listeners and sync bindings ===
+
+    // 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;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: this): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Button.renderTo: Invalid component - not an object');
-    }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Button.renderTo: Invalid component - missing _id (not a Jux component)');
+  renderTo(juxComponent: any): this {
+    if (!juxComponent?._id) {
+      throw new Error('Button.renderTo: Invalid component');
     }
-
     return this.render(`#${juxComponent._id}`);
   }
 }
 
-/**
- * Factory helper
- */
 export function button(id: string, options?: ButtonOptions): Button {
   return new Button(id, options);
 }

package/lib/components/card.ts

@@ -1,94 +1,68 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
-/**
- * Card component options
- */
 export interface CardOptions {
   title?: string;
-  subtitle?: string;
   content?: string;
-  image?: string;
-  variant?: 'default' | 'elevated' | 'outlined';
+  footer?: string;
+  variant?: string;
+  hoverable?: boolean;
   style?: string;
   class?: string;
 }
 
-/**
- * Card component state
- */
 type CardState = {
   title: string;
-  subtitle: string;
   content: string;
-  image: string;
+  footer: string;
   variant: string;
+  hoverable: boolean;
   style: string;
   class: string;
-  hasActions: boolean;
 };
 
-/**
- * Card component
- * 
- * Usage:
- *   const card = jux.card('myCard', {
- *     title: 'Card Title',
- *     content: 'Card content here'
- *   });
- *   card.render();
- * 
- *   // Add actions (any components)
- *   jux.button('view-btn').label('View').render('#myCard-actions');
- *   jux.button('delete-btn').label('Delete').render('#myCard-actions');
- */
 export class Card {
   state: CardState;
   container: HTMLElement | null = null;
   _id: string;
   id: string;
 
+  // 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: CardOptions = {}) {
     this._id = id;
     this.id = id;
 
     this.state = {
       title: options.title ?? '',
-      subtitle: options.subtitle ?? '',
       content: options.content ?? '',
-      image: options.image ?? '',
+      footer: options.footer ?? '',
       variant: options.variant ?? 'default',
+      hoverable: options.hoverable ?? false,
       style: options.style ?? '',
-      class: options.class ?? '',
-      hasActions: false
+      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;
-  }
-
   content(value: string): this {
     this.state.content = value;
     return this;
   }
 
-  image(value: string): this {
-    this.state.image = value;
-    return this;
-  }
-
-  variant(value: string): this {
-    this.state.variant = value;
+  footer(value: string): this {
+    this.state.footer = value;
     return this;
   }
 
@@ -102,118 +76,120 @@ export class Card {
     return this;
   }
 
-  /**
-   * Enable actions region
-   * Creates an empty actions container that components can render into
-   */
-  withActions(): this {
-    this.state.hasActions = true;
+  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(`Card.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(`Card: Target element "${targetId}" not found`);
+        throw new Error(`Card: Target "${targetId}" not found`);
       }
       container = target;
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { title, subtitle, content, image, variant, style, class: className, hasActions } = this.state;
 
-    // Create card element
+    // === 2. PREPARE: Destructure state ===
+    const { title, content, footer, variant, hoverable, style, class: className } = this.state;
+
+    // === 3. BUILD: Create DOM elements ===
     const card = document.createElement('div');
     card.className = `jux-card jux-card-${variant}`;
     card.id = this._id;
+    if (hoverable) card.classList.add('jux-card-hoverable');
+    if (className) card.className += ` ${className}`;
+    if (style) card.setAttribute('style', style);
 
-    if (className) {
-      card.className += ` ${className}`;
-    }
-
-    if (style) {
-      card.setAttribute('style', style);
-    }
-
-    // Image
-    if (image) {
-      const img = document.createElement('img');
-      img.className = 'jux-card-image';
-      img.src = image;
-      img.alt = title || 'Card image';
-      card.appendChild(img);
-    }
-
-    // Content wrapper
-    const cardBody = document.createElement('div');
-    cardBody.className = 'jux-card-body';
-
-    // Title
     if (title) {
-      const titleEl = document.createElement('h3');
-      titleEl.className = 'jux-card-title';
-      titleEl.textContent = title;
-      cardBody.appendChild(titleEl);
+      const header = document.createElement('div');
+      header.className = 'jux-card-header';
+      header.textContent = title;
+      card.appendChild(header);
     }
 
-    // Subtitle
-    if (subtitle) {
-      const subtitleEl = document.createElement('p');
-      subtitleEl.className = 'jux-card-subtitle';
-      subtitleEl.textContent = subtitle;
-      cardBody.appendChild(subtitleEl);
-    }
+    const body = document.createElement('div');
+    body.className = 'jux-card-body';
+    body.innerHTML = content;
+    card.appendChild(body);
 
-    // Content
-    if (content) {
-      const contentEl = document.createElement('p');
-      contentEl.className = 'jux-card-content';
-      contentEl.textContent = content;
-      cardBody.appendChild(contentEl);
+    if (footer) {
+      const footerEl = document.createElement('div');
+      footerEl.className = 'jux-card-footer';
+      footerEl.innerHTML = footer;
+      card.appendChild(footerEl);
     }
 
-    card.appendChild(cardBody);
-
-    // Actions region (empty container for user to populate)
-    if (hasActions) {
-      const actionsEl = document.createElement('div');
-      actionsEl.className = 'jux-card-actions';
-      actionsEl.id = `${this._id}-actions`;
-      card.appendChild(actionsEl);
-    }
+    // === 4. WIRE: Attach event listeners and sync bindings ===
+
+    // Wire custom bindings from .bind() calls
+    this._bindings.forEach(({ event, handler }) => {
+      card.addEventListener(event, handler as EventListener);
+    });
+
+    // Wire sync bindings from .sync() calls
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'title') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          const header = card.querySelector('.jux-card-header');
+          if (header) {
+            header.textContent = transformed;
+          }
+          this.state.title = transformed;
+        });
+      }
+      else if (property === 'content') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          body.innerHTML = transformed;
+          this.state.content = transformed;
+        });
+      }
+      else if (property === 'footer') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          const footerEl = card.querySelector('.jux-card-footer');
+          if (footerEl) {
+            footerEl.innerHTML = transformed;
+          }
+          this.state.footer = transformed;
+        });
+      }
+    });
 
+    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(card);
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
   renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Card.renderTo: Invalid component - not an object');
+    if (!juxComponent?._id) {
+      throw new Error('Card.renderTo: Invalid component');
     }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Card.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
     return this.render(`#${juxComponent._id}`);
   }
 }
 
-/**
- * Factory helper
- */
 export function card(id: string, options: CardOptions = {}): Card {
   return new Card(id, options);
 }