juxscript 1.0.18 → 1.0.20

package/lib/components/list.ts

@@ -1,8 +1,7 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+import { renderIcon } from './icons.js';
 
-/**
- * List item interface
- */
 export interface ListItem {
   icon?: string;
   title?: string;
@@ -11,9 +10,6 @@ export interface ListItem {
   metadata?: string;
 }
 
-/**
- * List component options
- */
 export interface ListOptions {
   items?: ListItem[];
   header?: string;
@@ -27,9 +23,6 @@ export interface ListOptions {
   class?: string;
 }
 
-/**
- * List component state
- */
 type ListState = {
   items: ListItem[];
   header: string;
@@ -37,42 +30,28 @@ type ListState = {
   direction: string;
   selectable: boolean;
   selectedIndex: number | null;
+  ordered?: boolean;
   style: string;
   class: string;
 };
 
-/**
- * List component - renders a list of items with optional header
- * 
- * Usage:
- *   const myList = jux.list('myList', { 
- *     header: '✓ Accomplishments',
- *     items: [
- *       { icon: '✓', title: 'Task 1', body: 'Description', type: 'success' },
- *       { icon: '⚠️', title: 'Task 2', body: 'Description', type: 'warning' }
- *     ],
- *     gap: '0.75rem',
- *     selectable: true,
- *     onItemClick: (item, index) => console.log('Clicked:', item, index)
- *   });
- *   myList.render();
- *   
- *   // Add item
- *   myList.add({ icon: '🎉', title: 'New Task', body: 'Done!', type: 'success' });
- *   
- *   // Remove item by index
- *   myList.remove(1);
- *   
- *   // Move item from index 0 to index 2
- *   myList.move(0, 2);
- */
 export class List {
   state: ListState;
   container: HTMLElement | null = null;
   _id: string;
   id: string;
-  private _onItemClick: ((item: ListItem, index: number, e: Event) => void) | null;
-  private _onItemDoubleClick: ((item: ListItem, index: number, e: Event) => void) | null;
+
+  // 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
+  }> = [];
+  
+  private _onItemClick: ((item: ListItem, index: number, e: Event) => void) | null = null;
+  private _onItemDoubleClick: ((item: ListItem, index: number, e: Event) => void) | null = null;
 
   constructor(id: string, options: ListOptions = {}) {
     this._id = id;
@@ -94,47 +73,50 @@ export class List {
   }
 
   /* -------------------------
-   * Fluent API
-   * ------------------------- */
+     * Fluent API
+     * ------------------------- */
 
   items(value: ListItem[]): this {
     this.state.items = value;
     return this;
   }
 
-  header(value: string): this {
-    this.state.header = value;
+  addItem(value: ListItem): this {
+    this.state.items = [...this.state.items, value];
     return this;
   }
 
-  gap(value: string): this {
-    this.state.gap = value;
+  ordered(value: boolean): this {
+    this.state.ordered = value;
     return this;
   }
 
-  direction(value: 'vertical' | 'horizontal'): this {
-    this.state.direction = value;
+  style(value: string): this {
+    this.state.style = value;
     return this;
   }
 
-  selectable(value: boolean): this {
-    this.state.selectable = value;
+  class(value: string): this {
+    this.state.class = value;
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
     return this;
   }
 
-  class(value: string): this {
-    this.state.class = value;
+  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    if (!stateObj || typeof stateObj.subscribe !== 'function') {
+      throw new Error(`List.sync: Expected a State object for property "${property}"`);
+    }
+    this._syncBindings.push({ property, stateObj, toState, toComponent });
     return this;
   }
 
   /* -------------------------
-   * List operations
-   * ------------------------- */
+     * List operations
+     * ------------------------- */
 
   add(item: ListItem, index?: number): this {
     const items = [...this.state.items];
@@ -242,18 +224,21 @@ export class List {
   }
 
   /* -------------------------
-   * Helpers
-   * ------------------------- */
+     * Helpers
+     * ------------------------- */
 
   private _updateDOM(): void {
     if (!this.container) return;
 
-    // Clear and re-render
-    this.container.innerHTML = '';
-    this._renderContent();
+    const existingWrapper = this.container.querySelector(`#${this._id}`);
+    if (existingWrapper) {
+      existingWrapper.remove();
+    }
+
+    this._buildAndAppendList();
   }
 
-  private _renderContent(): void {
+  private _buildAndAppendList(): void {
     if (!this.container) return;
 
     const { items, header, gap, direction, selectable, selectedIndex, style, class: className } = this.state;
@@ -296,7 +281,11 @@ export class List {
       if (item.icon) {
         const iconEl = document.createElement('span');
         iconEl.className = 'jux-list-item-icon';
-        iconEl.textContent = item.icon;
+        iconEl.style.display = 'flex';
+        iconEl.style.alignItems = 'center';
+        iconEl.style.justifyContent = 'center';
+        const iconElement = renderIcon(item.icon);
+        iconEl.appendChild(iconElement);
         itemEl.appendChild(iconEl);
       }
 
@@ -353,49 +342,101 @@ export class List {
   }
 
   /* -------------------------
-   * Render
-   * ------------------------- */
+     * 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(`List: Target element "${targetId}" not found`);
+        throw new Error(`List: Target "${targetId}" not found`);
       }
       container = target;
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    this.container.innerHTML = '';
 
-    this._renderContent();
+    // === 2. PREPARE: Destructure state ===
+    const { items, ordered, style, class: className } = this.state;
+
+    // === 3. BUILD: Create DOM elements ===
+    const list = document.createElement(ordered ? 'ol' : 'ul') as HTMLOListElement | HTMLUListElement;
+    list.className = `jux-list ${ordered ? 'jux-list-ordered' : 'jux-list-unordered'}`;
+    list.id = this._id;
+    if (className) list.className += ` ${className}`;
+    if (style) list.setAttribute('style', style);
+
+    items.forEach(item => {
+      const li = document.createElement('li');
+      li.className = 'jux-list-item';
+      
+      // Handle ListItem object
+      if (item.title) {
+        li.textContent = item.title;
+      }
+      if (item.body) {
+        const bodyEl = document.createElement('div');
+        bodyEl.textContent = item.body;
+        li.appendChild(bodyEl);
+      }
+      
+      list.appendChild(li);
+    });
+
+    // === 4. WIRE: Attach event listeners and sync bindings ===
+
+    // Wire custom bindings from .bind() calls
+    this._bindings.forEach(({ event, handler }) => {
+      list.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;
+
+          // Re-render items
+          list.innerHTML = '';
+          transformed.forEach((item: ListItem) => {
+            const li = document.createElement('li');
+            li.className = 'jux-list-item';
+            
+            // Handle ListItem object
+            if (item.title) {
+              li.textContent = item.title;
+            }
+            if (item.body) {
+              const bodyEl = document.createElement('div');
+              bodyEl.textContent = item.body;
+              li.appendChild(bodyEl);
+            }
+            
+            list.appendChild(li);
+          });
+        });
+      }
+    });
+
+    // === 5. RENDER: Append to DOM and finalize ===
+    container.appendChild(list);
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
   renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('List.renderTo: Invalid component - not an object');
+    if (!juxComponent?._id) {
+      throw new Error('List.renderTo: Invalid component');
     }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('List.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
     return this.render(`#${juxComponent._id}`);
   }
 }
 
-/**
- * Factory helper
- */
 export function list(id: string, options: ListOptions = {}): List {
   return new List(id, options);
 }

package/lib/components/menu.ts

@@ -1,5 +1,7 @@
 import { getOrCreateContainer } from './helpers.js';
+import { renderIcon } from './icons.js';
 import { req } from './req.js';
+import { State } from '../reactivity/state.js';
 
 /**
  * Menu item configuration
@@ -54,6 +56,12 @@ export class Menu {
   _id: string;
   id: string;
 
+  // Store bind() instructions (DOM events only)
+  private _bindings: Array<{ event: string, handler: Function }> = [];
+
+  // Store sync() instructions (state synchronization)
+  private _syncBindings: Array<{ property: string, stateObj: State<any>, toState?: Function, toComponent?: Function }> = [];
+
   constructor(id: string, options: MenuOptions = {}) {
     this._id = id;
     this.id = id;
@@ -84,6 +92,31 @@ export class Menu {
     }));
   }
 
+  /**
+   * Bind event handler (stores for wiring in render)
+   * DOM events only: click, mouseenter, mouseleave, etc.
+   */
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
+    return this;
+  }
+
+  /**
+   * Two-way sync with state (stores for wiring in render)
+   * 
+   * @param property - Component property to sync ('items', 'orientation', etc)
+   * @param stateObj - State object to sync with
+   * @param toState - Optional transform function when going from component to state
+   * @param toComponent - Optional transform function when going from state to component
+   */
+  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    if (!stateObj || typeof stateObj.subscribe !== 'function') {
+      throw new Error(`Menu.sync: Expected a State object for property "${property}"`);
+    }
+    this._syncBindings.push({ property, stateObj, toState, toComponent });
+    return this;
+  }
+
   /* -------------------------
    * Fluent API
    * ------------------------- */
@@ -141,7 +174,8 @@ export class Menu {
       if (item.icon) {
         const icon = document.createElement('span');
         icon.className = 'jux-menu-icon';
-        icon.textContent = item.icon;
+        const iconElement = renderIcon(item.icon);
+        icon.appendChild(iconElement);
         link.appendChild(icon);
       }
 
@@ -158,7 +192,8 @@ export class Menu {
       if (item.icon) {
         const icon = document.createElement('span');
         icon.className = 'jux-menu-icon';
-        icon.textContent = item.icon;
+        const iconElement = renderIcon(item.icon);
+        icon.appendChild(iconElement);
         button.appendChild(icon);
       }
 
@@ -195,6 +230,7 @@ export class Menu {
    * ------------------------- */
 
   render(targetId?: string): this {
+    // === 1. SETUP: Get container ===
     let container: HTMLElement;
 
     if (targetId) {
@@ -208,8 +244,11 @@ export class Menu {
     }
 
     this.container = container;
+
+    // === 2. PREPARE: Destructure state ===
     const { items, orientation, style, class: className } = this.state;
 
+    // === 3. BUILD: Create DOM elements ===
     const menu = document.createElement('nav');
     menu.className = `jux-menu jux-menu-${orientation}`;
     menu.id = this._id;
@@ -226,7 +265,63 @@ export class Menu {
       menu.appendChild(this._renderMenuItem(item));
     });
 
+    // === 4. WIRE: Add event listeners ===
+
+    // Wire up custom event bindings (from .bind() calls)
+    this._bindings.forEach(({ event, handler }) => {
+      menu.addEventListener(event, handler as EventListener);
+    });
+
+    // Wire up sync bindings (from .sync() calls)
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'items') {
+        // Sync items array
+        const transformToComponent = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          this.state.items = transformed;
+          this._setActiveStates();
+
+          // Re-render menu items
+          const existingItems = menu.querySelectorAll('.jux-menu-item');
+          existingItems.forEach(item => item.remove());
+
+          this.state.items.forEach(item => {
+            menu.appendChild(this._renderMenuItem(item));
+          });
+
+          // Re-trigger icon rendering
+          requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+              (window as any).lucide.createIcons();
+            }
+          });
+        });
+      }
+      else if (property === 'orientation') {
+        // Sync orientation
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          menu.classList.remove(`jux-menu-${this.state.orientation}`);
+          this.state.orientation = transformed;
+          menu.classList.add(`jux-menu-${transformed}`);
+        });
+      }
+    });
+
+    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(menu);
+
+    // Trigger Lucide icon rendering
+    requestAnimationFrame(() => {
+      if ((window as any).lucide) {
+        (window as any).lucide.createIcons();
+      }
+    });
+
     return this;
   }