juxscript 1.0.20 → 1.0.21

package/lib/components/tabs.ts

@@ -1,5 +1,8 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['tabChange'] as const;
 
 export interface Tab {
   id: string;
@@ -24,37 +27,30 @@ type TabsState = {
   class: string;
 };
 
-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
-  }> = [];
-
+export class Tabs extends BaseComponent<TabsState> {
   constructor(id: string, options: TabsOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
+    super(id, {
       tabs: options.tabs ?? [],
       activeTab: options.activeTab ?? (options.tabs?.[0]?.id ?? ''),
       variant: options.variant ?? 'default',
       style: options.style ?? '',
       class: options.class ?? ''
-    };
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   tabs(value: Tab[]): this {
     this.state.tabs = value;
@@ -77,64 +73,32 @@ export class Tabs {
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
-    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(`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;
 
-    // Update tab buttons
-    wrapper.querySelectorAll('.jux-tab-button').forEach(btn => {
-      btn.classList.toggle('active', btn.getAttribute('data-tab-id') === this.state.activeTab);
+    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
+      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === this.state.activeTab);
     });
 
-    // Update tab panels
-    wrapper.querySelectorAll('.jux-tab-panel').forEach(panel => {
-      panel.classList.toggle('active', panel.getAttribute('data-tab-id') === this.state.activeTab);
+    wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
+      const isActive = panel.getAttribute('data-tab') === this.state.activeTab;
+      panel.classList.toggle('jux-tabs-panel-active', isActive);
+      (panel as HTMLElement).style.display = isActive ? 'block' : 'none';
     });
   }
 
+  /* ═════════════════════════════════════════════════════════════════
+   * 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 "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-    this.container = container;
+    const container = this._setupContainer(targetId);
 
-    // === 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 jux-tabs-${variant}`;
     wrapper.id = this._id;
@@ -147,8 +111,7 @@ export class Tabs {
     const tabPanels = document.createElement('div');
     tabPanels.className = 'jux-tabs-panels';
 
-    tabs.forEach((tab, index) => {
-      // Tab button
+    tabs.forEach(tab => {
       const tabButton = document.createElement('button');
       tabButton.className = 'jux-tabs-button';
       tabButton.setAttribute('data-tab', tab.id);
@@ -156,7 +119,6 @@ export class Tabs {
       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);
@@ -176,9 +138,6 @@ export class Tabs {
     wrapper.appendChild(tabList);
     wrapper.appendChild(tabPanels);
 
-    // === 4. WIRE: Attach event listeners and sync bindings ===
-
-    // Default tab switching behavior (only if NOT using sync)
     if (!hasActiveTabSync) {
       tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
         button.addEventListener('click', () => {
@@ -189,12 +148,8 @@ export class Tabs {
       });
     }
 
-    // Wire custom bindings from .bind() calls
-    this._bindings.forEach(({ event, handler }) => {
-      wrapper.addEventListener(event, handler as EventListener);
-    });
+    this._wireStandardEvents(wrapper);
 
-    // Wire sync bindings from .sync() calls
     this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
       if (property === 'activeTab') {
         const transformToState = toState || ((v: any) => String(v));
@@ -202,7 +157,6 @@ export class Tabs {
 
         let isUpdating = false;
 
-        // State → Component
         stateObj.subscribe((val: any) => {
           if (isUpdating) return;
           const transformed = transformToComponent(val);
@@ -210,7 +164,6 @@ export class Tabs {
           this._switchTab(transformed, wrapper);
         });
 
-        // Component → State (tab clicks)
         tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
           button.addEventListener('click', () => {
             if (isUpdating) return;
@@ -228,13 +181,12 @@ export class Tabs {
         });
       }
       else if (property === 'tabs') {
-        const transformToComponent = toComponent || ((v: any) => v);
+        const transform = toComponent || ((v: any) => v);
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           this.state.tabs = transformed;
 
-          // Re-render tabs
           tabList.innerHTML = '';
           tabPanels.innerHTML = '';
 
@@ -262,7 +214,6 @@ export class Tabs {
             tabPanels.appendChild(tabPanel);
           });
 
-          // Re-wire click handlers
           tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
             button.addEventListener('click', () => {
               const tabId = button.getAttribute('data-tab')!;
@@ -274,38 +225,23 @@ export class Tabs {
       }
     });
 
-    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(wrapper);
     return this;
   }
 
   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');
-      }
+      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === tabId);
     });
 
-    // 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.classList.remove('jux-tabs-panel-active');
-        (panel as HTMLElement).style.display = 'none';
-      }
+      const isActive = panel.getAttribute('data-tab') === tabId;
+      panel.classList.toggle('jux-tabs-panel-active', isActive);
+      (panel as HTMLElement).style.display = isActive ? 'block' : 'none';
     });
-  }
 
-  renderTo(juxComponent: any): this {
-    if (!juxComponent?._id) {
-      throw new Error('Tabs.renderTo: Invalid component');
-    }
-    return this.render(`#${juxComponent._id}`);
+    // 🎯 Fire the tabChange callback event
+    this._triggerCallback('tabChange', tabId);
   }
 }
 

package/lib/components/theme-toggle.ts

@@ -1,19 +1,17 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
 import { ErrorHandler } from './error-handler.js';
 import { renderIcon } from './icons.js';
 
-/**
- * Theme configuration
- */
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['themeChange'] as const;
+
 export interface Theme {
     id: string;
     label: string;
     icon?: string;
 }
 
-/**
- * ThemeToggle component options
- */
 export interface ThemeToggleOptions {
     themes?: Theme[];
     defaultTheme?: string;
@@ -24,9 +22,6 @@ export interface ThemeToggleOptions {
     class?: string;
 }
 
-/**
- * ThemeToggle component state
- */
 type ThemeToggleState = {
     themes: Theme[];
     currentTheme: string;
@@ -37,71 +32,48 @@ type ThemeToggleState = {
     class: string;
 };
 
-/**
- * ThemeToggle component - Manage and switch between themes
- * 
- * Usage:
- *   // Simple light/dark toggle
- *   jux.themeToggle('myToggle').render('#appheader-actions');
- *   
- *   // Custom themes
- *   jux.themeToggle('myToggle', {
- *     themes: [
- *       { id: 'light', label: 'Light', icon: '☀️' },
- *       { id: 'dark', label: 'Dark', icon: '🌙' },
- *       { id: 'auto', label: 'Auto', icon: '🌓' }
- *     ],
- *     variant: 'dropdown'
- *   }).render('#appheader-actions');
- */
-export class ThemeToggle {
-    state: ThemeToggleState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
+export class ThemeToggle extends BaseComponent<ThemeToggleState> {
     constructor(id: string, options: ThemeToggleOptions = {}) {
-        this._id = id;
-        this.id = id;
-
         const defaultThemes: Theme[] = [
             { id: 'light', label: 'Light', icon: '☀️' },
             { id: 'dark', label: 'Dark', icon: '🌙' }
         ];
 
-        this.state = {
+        super(id, {
             themes: options.themes ?? defaultThemes,
-            currentTheme: options.defaultTheme ?? this.detectTheme(options.storageKey),
+            currentTheme: options.defaultTheme ?? ThemeToggle.detectTheme(options.storageKey),
             storageKey: options.storageKey ?? 'jux-theme',
             showLabel: options.showLabel ?? false,
             variant: options.variant ?? 'button',
             style: options.style ?? '',
             class: options.class ?? ''
-        };
+        });
 
         // Apply theme on initialization
         this.applyTheme(this.state.currentTheme);
     }
 
-    /* -------------------------
-     * Theme Detection & Management
-     * ------------------------- */
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
 
-    /**
-     * Detect theme from localStorage or system preference
-     */
-    private detectTheme(storageKey = 'jux-theme'): string {
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * STATIC METHODS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    private static detectTheme(storageKey = 'jux-theme'): string {
         if (typeof window === 'undefined') return 'light';
 
-        // Check localStorage first
         const stored = localStorage.getItem(storageKey);
         if (stored) return stored;
 
-        // Check current document attribute
         const current = document.body.getAttribute('data-theme');
         if (current) return current;
 
-        // Check system preference
         if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
             return 'dark';
         }
@@ -109,58 +81,27 @@ export class ThemeToggle {
         return 'light';
     }
 
-    /**
-     * Apply theme to document
-     */
-    private applyTheme(themeId: string): void {
-        if (typeof document === 'undefined') return;
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-        try {
-            // Update data-theme attribute on body
-            document.body.setAttribute('data-theme', themeId);
+    // ✅ Inherited from BaseComponent
 
-            // Also update on html element for broader CSS support
-            document.documentElement.setAttribute('data-theme', themeId);
-
-            // Store in localStorage
-            localStorage.setItem(this.state.storageKey, themeId);
-
-            // Dispatch custom event for other components to listen
-            window.dispatchEvent(new CustomEvent('themechange', {
-                detail: { theme: themeId }
-            }));
-
-            console.log(`🎨 Theme applied: ${themeId}`);
-        } catch (error: any) {
-            ErrorHandler.captureError({
-                component: 'ThemeToggle',
-                method: 'applyTheme',
-                message: `Failed to apply theme: ${error.message}`,
-                stack: error.stack,
-                timestamp: new Date(),
-                context: { themeId }
-            });
-        }
+    themes(value: Theme[]): this {
+        this.state.themes = value;
+        return this;
     }
 
-    /**
-     * Cycle to next theme
-     */
-    private cycleTheme(): void {
-        const currentIndex = this.state.themes.findIndex(t => t.id === this.state.currentTheme);
-        const nextIndex = (currentIndex + 1) % this.state.themes.length;
-        const nextTheme = this.state.themes[nextIndex];
-
-        this.setTheme(nextTheme.id);
+    variant(value: 'button' | 'dropdown' | 'cycle'): this {
+        this.state.variant = value;
+        return this;
     }
 
-    /* -------------------------
-     * Public API
-     * ------------------------- */
+    showLabel(value: boolean): this {
+        this.state.showLabel = value;
+        return this;
+    }
 
-    /**
-     * Set current theme
-     */
     setTheme(themeId: string): this {
         const theme = this.state.themes.find(t => t.id === themeId);
 
@@ -176,16 +117,10 @@ export class ThemeToggle {
         return this;
     }
 
-    /**
-     * Get current theme
-     */
     getTheme(): string {
         return this.state.currentTheme;
     }
 
-    /**
-     * Add a theme
-     */
     addTheme(theme: Theme): this {
         if (!this.state.themes.find(t => t.id === theme.id)) {
             this.state.themes.push(theme);
@@ -193,38 +128,45 @@ export class ThemeToggle {
         return this;
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE METHODS
+     * ═════════════════════════════════════════════════════════════════ */
 
-    themes(value: Theme[]): this {
-        this.state.themes = value;
-        return this;
-    }
+    private applyTheme(themeId: string): void {
+        if (typeof document === 'undefined') return;
 
-    variant(value: 'button' | 'dropdown' | 'cycle'): this {
-        this.state.variant = value;
-        return this;
-    }
+        try {
+            document.body.setAttribute('data-theme', themeId);
+            document.documentElement.setAttribute('data-theme', themeId);
+            localStorage.setItem(this.state.storageKey, themeId);
 
-    showLabel(value: boolean): this {
-        this.state.showLabel = value;
-        return this;
-    }
+            window.dispatchEvent(new CustomEvent('themechange', {
+                detail: { theme: themeId }
+            }));
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
+            // 🎯 Fire the themeChange callback event
+            this._triggerCallback('themeChange', themeId);
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
+            console.log(`🎨 Theme applied: ${themeId}`);
+        } catch (error: any) {
+            ErrorHandler.captureError({
+                component: 'ThemeToggle',
+                method: 'applyTheme',
+                message: `Failed to apply theme: ${error.message}`,
+                stack: error.stack,
+                timestamp: new Date(),
+                context: { themeId }
+            });
+        }
     }
 
-    /* -------------------------
-     * DOM Update
-     * ------------------------- */
+    private cycleTheme(): void {
+        const currentIndex = this.state.themes.findIndex(t => t.id === this.state.currentTheme);
+        const nextIndex = (currentIndex + 1) % this.state.themes.length;
+        const nextTheme = this.state.themes[nextIndex];
+
+        this.setTheme(nextTheme.id);
+    }
 
     private _updateDOM(): void {
         if (!this.container) return;
@@ -235,7 +177,6 @@ export class ThemeToggle {
         const currentTheme = this.state.themes.find(t => t.id === this.state.currentTheme);
         if (!currentTheme) return;
 
-        // Update button variant
         if (this.state.variant === 'button' || this.state.variant === 'cycle') {
             const button = toggle.querySelector('button');
             if (button && currentTheme.icon) {
@@ -249,7 +190,6 @@ export class ThemeToggle {
                     button.appendChild(labelSpan);
                 }
 
-                // Trigger Lucide rendering
                 requestAnimationFrame(() => {
                     if ((window as any).lucide) {
                         (window as any).lucide.createIcons();
@@ -258,7 +198,6 @@ export class ThemeToggle {
             }
         }
 
-        // Update dropdown variant
         if (this.state.variant === 'dropdown') {
             const select = toggle.querySelector('select') as HTMLSelectElement;
             if (select) {
@@ -267,24 +206,13 @@ export class ThemeToggle {
         }
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        let container: HTMLElement;
-
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`ThemeToggle: Target element "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
+        const container = this._setupContainer(targetId);
 
-        this.container = container;
         const { themes, currentTheme, showLabel, variant, style, class: className } = this.state;
 
         const wrapper = document.createElement('div');
@@ -301,9 +229,7 @@ export class ThemeToggle {
 
         const theme = themes.find(t => t.id === currentTheme);
 
-        // Render based on variant
         if (variant === 'button' || variant === 'cycle') {
-            // Single button that cycles through themes
             const button = document.createElement('button');
             button.className = 'jux-theme-toggle-button';
             button.type = 'button';
@@ -329,7 +255,6 @@ export class ThemeToggle {
             wrapper.appendChild(button);
 
         } else if (variant === 'dropdown') {
-            // Dropdown select with all themes
             const select = document.createElement('select');
             select.className = 'jux-theme-toggle-select';
             select.setAttribute('aria-label', 'Select theme');
@@ -356,9 +281,10 @@ export class ThemeToggle {
             wrapper.appendChild(select);
         }
 
+        this._wireStandardEvents(wrapper);
+
         container.appendChild(wrapper);
 
-        // Trigger Lucide icon rendering
         requestAnimationFrame(() => {
             if ((window as any).lucide) {
                 (window as any).lucide.createIcons();
@@ -367,26 +293,8 @@ export class ThemeToggle {
 
         return this;
     }
-
-    /**
-     * Render to another Jux component's container
-     */
-    renderTo(juxComponent: any): this {
-        if (!juxComponent || typeof juxComponent !== 'object') {
-            throw new Error('ThemeToggle.renderTo: Invalid component - not an object');
-        }
-
-        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-            throw new Error('ThemeToggle.renderTo: Invalid component - missing _id (not a Jux component)');
-        }
-
-        return this.render(`#${juxComponent._id}`);
-    }
 }
 
-/**
- * Factory helper
- */
 export function themeToggle(id: string, options: ThemeToggleOptions = {}): ThemeToggle {
     return new ThemeToggle(id, options);
 }