juxscript 1.0.18 → 1.0.20

package/lib/components/modal.ts

@@ -1,4 +1,6 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+import { renderIcon } from './icons.js';
 
 /**
  * Modal component options
@@ -23,6 +25,7 @@ type ModalState = {
   closeOnBackdropClick: boolean;
   size: string;
   isOpen: boolean;
+  open: boolean;
   style: string;
   class: string;
 };
@@ -45,6 +48,15 @@ export class Modal {
   _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: ModalOptions = {}) {
     this._id = id;
     this.id = id;
@@ -56,6 +68,7 @@ export class Modal {
       closeOnBackdropClick: options.closeOnBackdropClick ?? true,
       size: options.size ?? 'medium',
       isOpen: false,
+      open: false,
       style: options.style ?? '',
       class: options.class ?? ''
     };
@@ -130,94 +143,167 @@ export class Modal {
    * Render
    * ------------------------- */
 
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
+    return this;
+  }
+
+  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    if (!stateObj || typeof stateObj.subscribe !== 'function') {
+      throw new Error(`Modal.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(`Modal: Target element "${targetId}" not found`);
+        throw new Error(`Modal: Target "${targetId}" not found`);
       }
       container = target;
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { title, content, showCloseButton, closeOnBackdropClick, size, isOpen, style, class: className } = this.state;
 
-    // Modal backdrop
+    // === 2. PREPARE: Destructure state and check sync flags ===
+    const { open, title, content, size, closeOnBackdropClick: closeOnBackdrop, showCloseButton: showClose, style, class: className } = this.state;
+    const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
+
+    // === 3. BUILD: Create DOM elements ===
+    const overlay = document.createElement('div');
+    overlay.className = 'jux-modal-overlay';
+    overlay.id = this._id;
+    overlay.style.display = open ? 'flex' : 'none';
+    if (className) overlay.className += ` ${className}`;
+    if (style) overlay.setAttribute('style', style);
+
     const modal = document.createElement('div');
     modal.className = `jux-modal jux-modal-${size}`;
-    modal.id = this._id;
 
-    if (className) {
-      modal.className += ` ${className}`;
+    if (showClose) {
+      const closeButton = document.createElement('button');
+      closeButton.className = 'jux-modal-close';
+      closeButton.innerHTML = '×';
+      modal.appendChild(closeButton);
     }
 
-    if (style) {
-      modal.setAttribute('style', style);
+    if (title) {
+      const header = document.createElement('div');
+      header.className = 'jux-modal-header';
+      header.textContent = title;
+      modal.appendChild(header);
     }
 
-    if (isOpen) {
-      modal.classList.add('jux-modal-open');
-    }
+    const body = document.createElement('div');
+    body.className = 'jux-modal-body';
+    body.innerHTML = content;
+    modal.appendChild(body);
 
-    // Modal dialog
-    const dialog = document.createElement('div');
-    dialog.className = 'jux-modal-dialog';
+    overlay.appendChild(modal);
 
-    // Modal header
-    if (title || showCloseButton) {
-      const header = document.createElement('div');
-      header.className = 'jux-modal-header';
+    // === 4. WIRE: Attach event listeners and sync bindings ===
 
-      if (title) {
-        const titleEl = document.createElement('h3');
-        titleEl.className = 'jux-modal-title';
-        titleEl.textContent = title;
-        header.appendChild(titleEl);
+    // Default close behavior (only if NOT using sync)
+    if (!hasOpenSync) {
+      if (showClose) {
+        const closeButton = modal.querySelector('.jux-modal-close');
+        closeButton?.addEventListener('click', () => {
+          this.state.open = false;
+          overlay.style.display = 'none';
+        });
       }
 
-      if (showCloseButton) {
-        const closeBtn = document.createElement('button');
-        closeBtn.className = 'jux-modal-close';
-        closeBtn.innerHTML = '&times;';
-        header.appendChild(closeBtn);
-
-        // Event binding - close button
-        closeBtn.addEventListener('click', () => this.close());
+      if (closeOnBackdrop) {
+        overlay.addEventListener('click', (e) => {
+          if (e.target === overlay) {
+            this.state.open = false;
+            overlay.style.display = 'none';
+          }
+        });
       }
-
-      dialog.appendChild(header);
     }
 
-    // Modal body
-    const body = document.createElement('div');
-    body.className = 'jux-modal-body';
-    body.innerHTML = content;
-    dialog.appendChild(body);
+    // Wire custom bindings from .bind() calls
+    this._bindings.forEach(({ event, handler }) => {
+      overlay.addEventListener(event, handler as EventListener);
+    });
+
+    // Wire sync bindings from .sync() calls
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'open') {
+        const transformToState = toState || ((v: any) => Boolean(v));
+        const transformToComponent = toComponent || ((v: any) => Boolean(v));
+
+        let isUpdating = false;
+
+        // State → Component
+        stateObj.subscribe((val: any) => {
+          if (isUpdating) return;
+          const transformed = transformToComponent(val);
+          this.state.open = transformed;
+          overlay.style.display = transformed ? 'flex' : 'none';
+        });
+
+        // Component → State (close button, backdrop)
+        if (showClose) {
+          const closeButton = modal.querySelector('.jux-modal-close');
+          closeButton?.addEventListener('click', () => {
+            if (isUpdating) return;
+            isUpdating = true;
+
+            this.state.open = false;
+            overlay.style.display = 'none';
+            stateObj.set(transformToState(false));
+
+            setTimeout(() => { isUpdating = false; }, 0);
+          });
+        }
 
-    modal.appendChild(dialog);
-    container.appendChild(modal);
+        if (closeOnBackdrop) {
+          overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+              if (isUpdating) return;
+              isUpdating = true;
 
-    // Event binding - backdrop click
-    if (closeOnBackdropClick) {
-      modal.addEventListener('click', (e) => {
-        if (e.target === modal) {
-          this.close();
-        }
-      });
-    }
+              this.state.open = false;
+              overlay.style.display = 'none';
+              stateObj.set(transformToState(false));
 
-    // Event binding - escape key
-    const escapeHandler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && this.state.isOpen) {
-        this.close();
+              setTimeout(() => { isUpdating = false; }, 0);
+            }
+          });
+        }
       }
-    };
-    document.addEventListener('keydown', escapeHandler);
+      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 === 'title') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          const header = modal.querySelector('.jux-modal-header');
+          if (header) {
+            header.textContent = transformed;
+          }
+          this.state.title = transformed;
+        });
+      }
+    });
 
+    // === 5. RENDER: Append to DOM and finalize ===
+    container.appendChild(overlay);
     return this;
   }
 
@@ -225,14 +311,9 @@ export class Modal {
    * Render to another Jux component's container
    */
   renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Modal.renderTo: Invalid component - not an object');
-    }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Modal.renderTo: Invalid component - missing _id (not a Jux component)');
+    if (!juxComponent?._id) {
+      throw new Error('Modal.renderTo: Invalid component');
     }
-
     return this.render(`#${juxComponent._id}`);
   }
 }

package/lib/components/nav.ts

@@ -1,61 +1,62 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+import { renderIcon } from './icons.js';
 import { req } from './req.js';
 
-/**
- * Nav item configuration
- */
 export interface NavItem {
   label: string;
   href: string;
   active?: boolean;
 }
 
-/**
- * Nav component options
- */
+export interface NavBrand {
+  text?: string;
+  href?: string;
+  icon?: string;
+}
+
 export interface NavOptions {
   items?: NavItem[];
+  brand?: NavBrand;
   variant?: 'default' | 'pills' | 'tabs';
+  sticky?: boolean;
   style?: string;
   class?: string;
 }
 
-/**
- * Nav component state
- */
 type NavState = {
   items: NavItem[];
+  brand?: NavBrand;
   variant: string;
+  sticky: boolean;
   style: string;
   class: string;
 };
 
-/**
- * Nav component
- *
- * Usage:
- *   const nav = jux.nav('myNav', {
- *     variant: 'pills',
- *     items: [
- *       { label: 'Home', href: '/', active: true },
- *       { label: 'About', href: '/about' }
- *     ]
- *   });
- *   nav.render();
- */
 export class Nav {
   state: NavState;
   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: NavOptions = {}) {
     this._id = id;
     this.id = id;
 
     this.state = {
       items: options.items ?? [],
+      brand: options.brand,
       variant: options.variant ?? 'default',
+      sticky: options.sticky ?? false,
       style: options.style ?? '',
       class: options.class ?? ''
     };
@@ -90,11 +91,21 @@ export class Nav {
     return this;
   }
 
+  brand(value: NavBrand): this {
+    this.state.brand = value;
+    return this;
+  }
+
   variant(value: string): this {
     this.state.variant = value;
     return this;
   }
 
+  sticky(value: boolean): this {
+    this.state.sticky = value;
+    return this;
+  }
+
   style(value: string): this {
     this.state.style = value;
     return this;
@@ -105,74 +116,164 @@ export class Nav {
     return this;
   }
 
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
+    return this;
+  }
+
+  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    if (!stateObj || typeof stateObj.subscribe !== 'function') {
+      throw new Error(`Nav.sync: Expected a State object for property "${property}"`);
+    }
+    this._syncBindings.push({ property, stateObj, toState, toComponent });
+    return this;
+  }
+
   /* -------------------------
-   * Render
+   * Render (5-Step Pattern)
    * ------------------------- */
 
   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(`Nav: Target element "${targetId}" not found`);
+        throw new Error(`Nav: Target "${targetId}" not found`);
       }
       container = target;
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { items, variant, style, class: className } = this.state;
 
+    // === 2. PREPARE: Destructure state ===
+    const { brand, items, variant, sticky, style, class: className } = this.state;
+
+    // === 3. BUILD: Create DOM elements ===
     const nav = document.createElement('nav');
     nav.className = `jux-nav jux-nav-${variant}`;
     nav.id = this._id;
+    if (sticky) nav.classList.add('jux-nav-sticky');
+    if (className) nav.className += ` ${className}`;
+    if (style) nav.setAttribute('style', style);
 
-    if (className) {
-      nav.className += ` ${className}`;
-    }
+    // Brand/Logo
+    if (brand) {
+      const brandEl = document.createElement('div');
+      brandEl.className = 'jux-nav-brand';
 
-    if (style) {
-      nav.setAttribute('style', style);
+      if (brand.href) {
+        const link = document.createElement('a');
+        link.href = brand.href;
+        if (brand.icon) {
+          const icon = document.createElement('span');
+          icon.appendChild(renderIcon(brand.icon));
+          link.appendChild(icon);
+        }
+        if (brand.text) {
+          const text = document.createElement('span');
+          text.textContent = brand.text;
+          link.appendChild(text);
+        }
+        brandEl.appendChild(link);
+      } else {
+        if (brand.icon) {
+          const icon = document.createElement('span');
+          icon.appendChild(renderIcon(brand.icon));
+          brandEl.appendChild(icon);
+        }
+        if (brand.text) {
+          const text = document.createElement('span');
+          text.textContent = brand.text;
+          brandEl.appendChild(text);
+        }
+      }
+
+      nav.appendChild(brandEl);
     }
 
+    // Nav items
+    const itemsContainer = document.createElement('div');
+    itemsContainer.className = 'jux-nav-items';
+
     items.forEach(item => {
-      const link = document.createElement('a');
-      link.className = 'jux-nav-item';
-      link.href = item.href;
-      link.textContent = item.label;
+      const navItem = document.createElement('a');
+      navItem.className = 'jux-nav-item';
+      navItem.href = item.href;
+      navItem.textContent = item.label;
+      if (item.active) navItem.classList.add('jux-nav-item-active');
+      itemsContainer.appendChild(navItem);
+    });
+
+    nav.appendChild(itemsContainer);
+
+    // === 4. WIRE: Attach event listeners and sync bindings ===
+
+    // Wire custom bindings from .bind() calls
+    this._bindings.forEach(({ event, handler }) => {
+      nav.addEventListener(event, handler as EventListener);
+    });
+
+    // Wire sync bindings from .sync() calls
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'items') {
+        const transformToComponent = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          this.state.items = transformed;
+          this._setActiveStates();
 
-      if (item.active) {
-        link.classList.add('jux-nav-item-active');
+          // Re-render items
+          itemsContainer.innerHTML = '';
+          this.state.items.forEach((item: any) => {
+            const navItem = document.createElement('a');
+            navItem.className = 'jux-nav-item';
+            navItem.href = item.href;
+            navItem.textContent = item.label;
+            if (item.active) navItem.classList.add('jux-nav-item-active');
+            itemsContainer.appendChild(navItem);
+          });
+        });
       }
+      else if (property === 'brand') {
+        const transformToComponent = toComponent || ((v: any) => v);
 
-      nav.appendChild(link);
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          const brandEl = nav.querySelector('.jux-nav-brand');
+          if (brandEl && transformed.text) {
+            const textEl = brandEl.querySelector('span:last-child');
+            if (textEl) {
+              textEl.textContent = transformed.text;
+            }
+          }
+          this.state.brand = transformed;
+        });
+      }
     });
 
+    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(nav);
+
+    requestAnimationFrame(() => {
+      if ((window as any).lucide) {
+        (window as any).lucide.createIcons();
+      }
+    });
+
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
   renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Nav.renderTo: Invalid component - not an object');
+    if (!juxComponent?._id) {
+      throw new Error('Nav.renderTo: Invalid component');
     }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Nav.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
     return this.render(`#${juxComponent._id}`);
   }
 }
 
-/**
- * Factory helper
- */
 export function nav(id: string, options: NavOptions = {}): Nav {
   return new Nav(id, options);
 }