juxscript 1.0.19 → 1.0.20

package/lib/components/tabs.ts

@@ -1,62 +1,52 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
-/**
- * Tab configuration
- */
 export interface Tab {
   id: string;
   label: string;
-  content: string | (() => string);
+  content: string | HTMLElement;
+  icon?: string;
 }
 
-/**
- * Tabs component options
- */
 export interface TabsOptions {
   tabs?: Tab[];
   activeTab?: string;
+  variant?: 'default' | 'pills' | 'underline';
   style?: string;
   class?: string;
 }
 
-/**
- * Tabs component state
- */
 type TabsState = {
   tabs: Tab[];
   activeTab: string;
+  variant: string;
   style: string;
   class: string;
 };
 
-/**
- * Tabs component
- * 
- * Usage:
- *   const tabs = jux.tabs('myTabs', {
- *     tabs: [
- *       { id: 'tab1', label: 'Tab 1', content: 'Content 1' },
- *       { id: 'tab2', label: 'Tab 2', content: 'Content 2' }
- *     ]
- *   });
- *   tabs.render();
- */
 export class Tabs {
   state: TabsState;
   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: TabsOptions = {}) {
     this._id = id;
     this.id = id;
 
-    const tabs = options.tabs ?? [];
-    const activeTab = options.activeTab ?? (tabs.length > 0 ? tabs[0].id : '');
-
     this.state = {
-      tabs,
-      activeTab,
+      tabs: options.tabs ?? [],
+      activeTab: options.activeTab ?? (options.tabs?.[0]?.id ?? ''),
+      variant: options.variant ?? 'default',
       style: options.style ?? '',
       class: options.class ?? ''
     };
@@ -78,6 +68,12 @@ export class Tabs {
 
   activeTab(value: string): this {
     this.state.activeTab = value;
+    this._updateActiveTab();
+    return this;
+  }
+
+  variant(value: 'default' | 'pills' | 'underline'): this {
+    this.state.variant = value;
     return this;
   }
 
@@ -91,143 +87,228 @@ export class Tabs {
     return this;
   }
 
-  /* -------------------------
-   * Helpers
-   * ------------------------- */
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
+    return this;
+  }
 
-  private _updateActiveTab(tabId: string): void {
-    if (!this.container) return;
+  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    if (!stateObj || typeof stateObj.subscribe !== 'function') {
+      throw new Error(`Tabs.sync: Expected a State object for property "${property}"`);
+    }
+    this._syncBindings.push({ property, stateObj, toState, toComponent });
+    return this;
+  }
 
+  private _updateActiveTab(): void {
+    if (!this.container) return;
     const wrapper = this.container.querySelector(`#${this._id}`);
     if (!wrapper) return;
 
-    this.state.activeTab = tabId;
-
     // Update tab buttons
-    const tabButtons = wrapper.querySelectorAll('.jux-tab-button');
-    tabButtons.forEach((btn, index) => {
-      if (this.state.tabs[index]?.id === tabId) {
-        btn.classList.add('jux-tab-button-active');
-      } else {
-        btn.classList.remove('jux-tab-button-active');
-      }
+    wrapper.querySelectorAll('.jux-tab-button').forEach(btn => {
+      btn.classList.toggle('active', btn.getAttribute('data-tab-id') === this.state.activeTab);
     });
 
     // Update tab panels
-    const tabPanels = wrapper.querySelectorAll('.jux-tab-panel');
-    tabPanels.forEach(panel => {
-      const panelId = panel.getAttribute('data-tab-id');
-      if (panelId === tabId) {
-        panel.classList.add('jux-tab-panel-active');
-      } else {
-        panel.classList.remove('jux-tab-panel-active');
-      }
+    wrapper.querySelectorAll('.jux-tab-panel').forEach(panel => {
+      panel.classList.toggle('active', panel.getAttribute('data-tab-id') === this.state.activeTab);
     });
   }
 
-  /* -------------------------
-   * 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(`Tabs: Target element "${targetId}" not found`);
+        throw new Error(`Tabs: Target "${targetId}" not found`);
       }
       container = target;
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { tabs, activeTab, style, class: className } = this.state;
 
+    // === 2. PREPARE: Destructure state and check sync flags ===
+    const { tabs, activeTab, variant, style, class: className } = this.state;
+    const hasActiveTabSync = this._syncBindings.some(b => b.property === 'activeTab');
+
+    // === 3. BUILD: Create DOM elements ===
     const wrapper = document.createElement('div');
-    wrapper.className = 'jux-tabs';
+    wrapper.className = `jux-tabs jux-tabs-${variant}`;
     wrapper.id = this._id;
+    if (className) wrapper.className += ` ${className}`;
+    if (style) wrapper.setAttribute('style', style);
 
-    if (className) {
-      wrapper.className += ` ${className}`;
-    }
+    const tabList = document.createElement('div');
+    tabList.className = 'jux-tabs-list';
 
-    if (style) {
-      wrapper.setAttribute('style', style);
-    }
-
-    // Tab headers
-    const tabHeaders = document.createElement('div');
-    tabHeaders.className = 'jux-tabs-header';
-
-    tabs.forEach(tab => {
-      const tabBtn = document.createElement('button');
-      tabBtn.className = 'jux-tab-button';
-      tabBtn.textContent = tab.label;
+    const tabPanels = document.createElement('div');
+    tabPanels.className = 'jux-tabs-panels';
 
+    tabs.forEach((tab, index) => {
+      // Tab button
+      const tabButton = document.createElement('button');
+      tabButton.className = 'jux-tabs-button';
+      tabButton.setAttribute('data-tab', tab.id);
+      if (tab.id === activeTab) tabButton.classList.add('jux-tabs-button-active');
+      tabButton.textContent = tab.label;
+      tabList.appendChild(tabButton);
+
+      // Tab panel
+      const tabPanel = document.createElement('div');
+      tabPanel.className = 'jux-tabs-panel';
+      tabPanel.setAttribute('data-tab', tab.id);
       if (tab.id === activeTab) {
-        tabBtn.classList.add('jux-tab-button-active');
+        tabPanel.classList.add('jux-tabs-panel-active');
+      } else {
+        tabPanel.style.display = 'none';
+      }
+      if (typeof tab.content === 'string') {
+        tabPanel.innerHTML = tab.content;
+      } else {
+        tabPanel.appendChild(tab.content);
       }
+      tabPanels.appendChild(tabPanel);
+    });
+
+    wrapper.appendChild(tabList);
+    wrapper.appendChild(tabPanels);
 
-      tabHeaders.appendChild(tabBtn);
+    // === 4. WIRE: Attach event listeners and sync bindings ===
 
-      // Event binding - tab click
-      tabBtn.addEventListener('click', () => {
-        this._updateActiveTab(tab.id);
+    // Default tab switching behavior (only if NOT using sync)
+    if (!hasActiveTabSync) {
+      tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+        button.addEventListener('click', () => {
+          const tabId = button.getAttribute('data-tab')!;
+          this.state.activeTab = tabId;
+          this._switchTab(tabId, wrapper);
+        });
       });
-    });
+    }
 
-    wrapper.appendChild(tabHeaders);
+    // Wire custom bindings from .bind() calls
+    this._bindings.forEach(({ event, handler }) => {
+      wrapper.addEventListener(event, handler as EventListener);
+    });
 
-    // Tab panels
-    const tabPanels = document.createElement('div');
-    tabPanels.className = 'jux-tabs-panels';
+    // Wire sync bindings from .sync() calls
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'activeTab') {
+        const transformToState = toState || ((v: any) => String(v));
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        let isUpdating = false;
+
+        // State → Component
+        stateObj.subscribe((val: any) => {
+          if (isUpdating) return;
+          const transformed = transformToComponent(val);
+          this.state.activeTab = transformed;
+          this._switchTab(transformed, wrapper);
+        });
+
+        // Component → State (tab clicks)
+        tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+          button.addEventListener('click', () => {
+            if (isUpdating) return;
+            isUpdating = true;
+
+            const tabId = button.getAttribute('data-tab')!;
+            this.state.activeTab = tabId;
+            this._switchTab(tabId, wrapper);
+
+            const transformed = transformToState(tabId);
+            stateObj.set(transformed);
+
+            setTimeout(() => { isUpdating = false; }, 0);
+          });
+        });
+      }
+      else if (property === 'tabs') {
+        const transformToComponent = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          this.state.tabs = transformed;
+
+          // Re-render tabs
+          tabList.innerHTML = '';
+          tabPanels.innerHTML = '';
+
+          transformed.forEach((tab: any) => {
+            const tabButton = document.createElement('button');
+            tabButton.className = 'jux-tabs-button';
+            tabButton.setAttribute('data-tab', tab.id);
+            if (tab.id === this.state.activeTab) tabButton.classList.add('jux-tabs-button-active');
+            tabButton.textContent = tab.label;
+            tabList.appendChild(tabButton);
+
+            const tabPanel = document.createElement('div');
+            tabPanel.className = 'jux-tabs-panel';
+            tabPanel.setAttribute('data-tab', tab.id);
+            if (tab.id === this.state.activeTab) {
+              tabPanel.classList.add('jux-tabs-panel-active');
+            } else {
+              tabPanel.style.display = 'none';
+            }
+            if (typeof tab.content === 'string') {
+              tabPanel.innerHTML = tab.content;
+            } else {
+              tabPanel.appendChild(tab.content);
+            }
+            tabPanels.appendChild(tabPanel);
+          });
+
+          // Re-wire click handlers
+          tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+            button.addEventListener('click', () => {
+              const tabId = button.getAttribute('data-tab')!;
+              this.state.activeTab = tabId;
+              this._switchTab(tabId, wrapper);
+            });
+          });
+        });
+      }
+    });
 
-    tabs.forEach(tab => {
-      const panel = document.createElement('div');
-      panel.className = 'jux-tab-panel';
-      panel.setAttribute('data-tab-id', tab.id);
+    // === 5. RENDER: Append to DOM and finalize ===
+    container.appendChild(wrapper);
+    return this;
+  }
 
-      if (tab.id === activeTab) {
-        panel.classList.add('jux-tab-panel-active');
+  private _switchTab(tabId: string, wrapper: HTMLElement): void {
+    // Update buttons
+    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
+      if (btn.getAttribute('data-tab') === tabId) {
+        btn.classList.add('jux-tabs-button-active');
+      } else {
+        btn.classList.remove('jux-tabs-button-active');
       }
+    });
 
-      // Render content
-      if (typeof tab.content === 'function') {
-        panel.innerHTML = tab.content();
+    // Update panels
+    wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
+      if (panel.getAttribute('data-tab') === tabId) {
+        panel.classList.add('jux-tabs-panel-active');
+        (panel as HTMLElement).style.display = 'block';
       } else {
-        panel.innerHTML = tab.content;
+        panel.classList.remove('jux-tabs-panel-active');
+        (panel as HTMLElement).style.display = 'none';
       }
-
-      tabPanels.appendChild(panel);
     });
-
-    wrapper.appendChild(tabPanels);
-    container.appendChild(wrapper);
-
-    return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
   renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Tabs.renderTo: Invalid component - not an object');
+    if (!juxComponent?._id) {
+      throw new Error('Tabs.renderTo: Invalid component');
     }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Tabs.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
     return this.render(`#${juxComponent._id}`);
   }
 }
 
-/**
- * Factory helper
- */
 export function tabs(id: string, options: TabsOptions = {}): Tabs {
   return new Tabs(id, options);
 }

package/lib/components/theme-toggle.ts

@@ -1,5 +1,6 @@
 import { getOrCreateContainer } from './helpers.js';
 import { ErrorHandler } from './error-handler.js';
+import { renderIcon } from './icons.js';
 
 /**
  * Theme configuration
@@ -237,10 +238,23 @@ export class ThemeToggle {
         // Update button variant
         if (this.state.variant === 'button' || this.state.variant === 'cycle') {
             const button = toggle.querySelector('button');
-            if (button) {
-                button.innerHTML = this.state.showLabel
-                    ? `${currentTheme.icon || ''} ${currentTheme.label}`.trim()
-                    : currentTheme.icon || currentTheme.label;
+            if (button && currentTheme.icon) {
+                button.innerHTML = '';
+                const iconElement = renderIcon(currentTheme.icon);
+                button.appendChild(iconElement);
+
+                if (this.state.showLabel) {
+                    const labelSpan = document.createElement('span');
+                    labelSpan.textContent = ` ${currentTheme.label}`;
+                    button.appendChild(labelSpan);
+                }
+
+                // Trigger Lucide rendering
+                requestAnimationFrame(() => {
+                    if ((window as any).lucide) {
+                        (window as any).lucide.createIcons();
+                    }
+                });
             }
         }
 
@@ -295,9 +309,18 @@ export class ThemeToggle {
             button.type = 'button';
             button.setAttribute('aria-label', 'Toggle theme');
 
-            button.innerHTML = showLabel
-                ? `${theme?.icon || ''} ${theme?.label || currentTheme}`.trim()
-                : theme?.icon || theme?.label || currentTheme;
+            if (theme?.icon) {
+                const iconElement = renderIcon(theme.icon);
+                button.appendChild(iconElement);
+            }
+
+            if (showLabel) {
+                const labelSpan = document.createElement('span');
+                labelSpan.textContent = ` ${theme?.label || currentTheme}`;
+                button.appendChild(labelSpan);
+            } else if (!theme?.icon) {
+                button.textContent = theme?.label || currentTheme;
+            }
 
             button.addEventListener('click', () => {
                 this.cycleTheme();
@@ -334,6 +357,14 @@ export class ThemeToggle {
         }
 
         container.appendChild(wrapper);
+
+        // Trigger Lucide icon rendering
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
+
         return this;
     }