juxscript 1.1.31 → 1.1.32

package/lib/components/tabs.d.ts

@@ -1,8 +1,8 @@
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 export interface Tab {
     id: string;
     label: string;
-    content: string | HTMLElement;
+    content: string | HTMLElement | BaseComponent<any>;
     icon?: string;
 }
 export interface TabsOptions {
@@ -12,25 +12,38 @@ export interface TabsOptions {
     style?: string;
     class?: string;
 }
-type TabsState = {
+type TabsState = BaseState & {
     tabs: Tab[];
     activeTab: string;
     variant: string;
-    style: string;
-    class: string;
 };
 export declare class Tabs extends BaseComponent<TabsState> {
+    private _tabsWrapper;
     constructor(id: string, options?: TabsOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
+    update(prop: string, value: any): void;
+    private _updateActiveTab;
+    private _rebuildTabs;
+    /**
+     * ✅ NEW: Smart content rendering
+     * Handles strings, DOM elements, and component instances
+     */
+    private _renderTabContent;
     tabs(value: Tab[]): this;
     addTab(tab: Tab): this;
+    removeTab(tabId: string): this;
     activeTab(value: string): this;
     variant(value: 'default' | 'pills' | 'underline'): this;
-    private _updateActiveTab;
-    update(prop: string, value: any): void;
+    /**
+     * ✅ NEW: Update content of a specific tab
+     */
+    updateTabContent(tabId: string, content: string | HTMLElement | BaseComponent<any>): this;
+    /**
+     * ✅ NEW: Get current tab
+     */
+    getCurrentTab(): Tab | undefined;
     render(targetId?: string): this;
-    private _switchTab;
 }
 export declare function tabs(id: string, options?: TabsOptions): Tabs;
 export {};

package/lib/components/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAUjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAUhD,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAKxB,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAKtB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM9B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,IAAI;IAKvD,OAAO,CAAC,gBAAgB;IAgBxB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAwI/B,OAAO,CAAC,UAAU;CAcnB;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,YAAY,CAA4B;gBAEpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAUjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAuBtC,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,YAAY;IAuDpB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAkBzB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAKxB,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAKtB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAW9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK9B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,IAAI;IAKvD;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAkBzF;;OAEG;IACH,aAAa,IAAI,GAAG,GAAG,SAAS;IAQhC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAqEhC;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/tabs.js

@@ -11,6 +11,7 @@ export class Tabs extends BaseComponent {
             style: options.style ?? '',
             class: options.class ?? ''
         });
+        this._tabsWrapper = null;
     }
     getTriggerEvents() {
         return TRIGGER_EVENTS;
@@ -18,10 +19,110 @@ export class Tabs extends BaseComponent {
     getCallbackEvents() {
         return CALLBACK_EVENTS;
     }
+    /* ═════════════════════════════════════════════════════════════════
+     * REACTIVE UPDATE
+     * ═════════════════════════════════════════════════════════════════ */
+    update(prop, value) {
+        super.update(prop, value); // ✅ Handle base properties
+        if (!this._tabsWrapper)
+            return;
+        switch (prop) {
+            case 'activeTab':
+                this._updateActiveTab(value);
+                break;
+            case 'tabs':
+                this._rebuildTabs();
+                break;
+            case 'variant':
+                this._tabsWrapper.className = `jux-tabs jux-tabs-${value}`;
+                if (this.state.class) {
+                    this._tabsWrapper.className += ` ${this.state.class}`;
+                }
+                break;
+        }
+    }
+    _updateActiveTab(tabId) {
+        if (!this._tabsWrapper)
+            return;
+        // Update button states
+        this._tabsWrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
+            btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === tabId);
+        });
+        // Update panel visibility
+        this._tabsWrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
+            const isActive = panel.getAttribute('data-tab') === tabId;
+            panel.classList.toggle('jux-tabs-panel-active', isActive);
+            panel.style.display = isActive ? 'block' : 'none';
+        });
+    }
+    _rebuildTabs() {
+        if (!this._tabsWrapper)
+            return;
+        const tabList = this._tabsWrapper.querySelector('.jux-tabs-list');
+        const tabPanels = this._tabsWrapper.querySelector('.jux-tabs-panels');
+        if (!tabList || !tabPanels)
+            return;
+        // Clear existing
+        tabList.innerHTML = '';
+        tabPanels.innerHTML = '';
+        // Rebuild
+        this.state.tabs.forEach(tab => {
+            // Button
+            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');
+            }
+            if (tab.icon) {
+                const icon = document.createElement('span');
+                icon.className = 'jux-tabs-icon';
+                icon.textContent = tab.icon;
+                tabButton.appendChild(icon);
+            }
+            tabButton.appendChild(document.createTextNode(tab.label));
+            tabButton.addEventListener('click', () => {
+                this.state.activeTab = tab.id;
+                this._triggerCallback('tabChange', tab.id);
+            });
+            tabList.appendChild(tabButton);
+            // Panel
+            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';
+            }
+            // ✅ Render content (supports strings, DOM, and components)
+            this._renderTabContent(tabPanel, tab.content);
+            tabPanels.appendChild(tabPanel);
+        });
+    }
+    /**
+     * ✅ NEW: Smart content rendering
+     * Handles strings, DOM elements, and component instances
+     */
+    _renderTabContent(panel, content) {
+        if (typeof content === 'string') {
+            panel.innerHTML = content;
+        }
+        else if (content instanceof HTMLElement) {
+            panel.appendChild(content);
+        }
+        else if (content && typeof content.render === 'function') {
+            // It's a component instance - create a container and render into it
+            const componentContainer = document.createElement('div');
+            componentContainer.id = `${panel.getAttribute('data-tab')}-content`;
+            panel.appendChild(componentContainer);
+            content.render(`#${componentContainer.id}`);
+        }
+    }
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API
      * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from BaseComponent
     tabs(value) {
         this.state.tabs = value;
         return this;
@@ -30,32 +131,45 @@ export class Tabs extends BaseComponent {
         this.state.tabs = [...this.state.tabs, tab];
         return this;
     }
+    removeTab(tabId) {
+        this.state.tabs = this.state.tabs.filter(t => t.id !== tabId);
+        // If removing active tab, switch to first tab
+        if (this.state.activeTab === tabId && this.state.tabs.length > 0) {
+            this.state.activeTab = this.state.tabs[0].id;
+        }
+        return this;
+    }
     activeTab(value) {
         this.state.activeTab = value;
-        this._updateActiveTab();
         return this;
     }
     variant(value) {
         this.state.variant = value;
         return this;
     }
-    _updateActiveTab() {
-        if (!this.container)
-            return;
-        const wrapper = this.container.querySelector(`#${this._id}`);
-        if (!wrapper)
-            return;
-        wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
-            btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === 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.style.display = isActive ? 'block' : 'none';
-        });
+    /**
+     * ✅ NEW: Update content of a specific tab
+     */
+    updateTabContent(tabId, content) {
+        const tab = this.state.tabs.find(t => t.id === tabId);
+        if (!tab)
+            return this;
+        tab.content = content;
+        // Update DOM if tab is rendered
+        if (this._tabsWrapper) {
+            const panel = this._tabsWrapper.querySelector(`.jux-tabs-panel[data-tab="${tabId}"]`);
+            if (panel) {
+                panel.innerHTML = ''; // Clear existing content
+                this._renderTabContent(panel, content);
+            }
+        }
+        return this;
     }
-    update(prop, value) {
-        // No reactive updates needed
+    /**
+     * ✅ NEW: Get current tab
+     */
+    getCurrentTab() {
+        return this.state.tabs.find(t => t.id === this.state.activeTab);
     }
     /* ═════════════════════════════════════════════════════════════════
      * RENDER
@@ -63,7 +177,6 @@ export class Tabs extends BaseComponent {
     render(targetId) {
         const container = this._setupContainer(targetId);
         const { tabs, activeTab, variant, style, class: className } = this.state;
-        const hasActiveTabSync = this._syncBindings.some(b => b.property === 'activeTab');
         const wrapper = document.createElement('div');
         wrapper.className = `jux-tabs jux-tabs-${variant}`;
         wrapper.id = this._id;
@@ -76,13 +189,26 @@ export class Tabs extends BaseComponent {
         const tabPanels = document.createElement('div');
         tabPanels.className = 'jux-tabs-panels';
         tabs.forEach(tab => {
+            // Tab button
             const tabButton = document.createElement('button');
             tabButton.className = 'jux-tabs-button';
             tabButton.setAttribute('data-tab', tab.id);
-            if (tab.id === activeTab)
+            if (tab.id === activeTab) {
                 tabButton.classList.add('jux-tabs-button-active');
-            tabButton.textContent = tab.label;
+            }
+            if (tab.icon) {
+                const icon = document.createElement('span');
+                icon.className = 'jux-tabs-icon';
+                icon.textContent = tab.icon;
+                tabButton.appendChild(icon);
+            }
+            tabButton.appendChild(document.createTextNode(tab.label));
+            tabButton.addEventListener('click', () => {
+                this.state.activeTab = tab.id;
+                this._triggerCallback('tabChange', tab.id);
+            });
             tabList.appendChild(tabButton);
+            // Tab panel
             const tabPanel = document.createElement('div');
             tabPanel.className = 'jux-tabs-panel';
             tabPanel.setAttribute('data-tab', tab.id);
@@ -92,109 +218,18 @@ export class Tabs extends BaseComponent {
             else {
                 tabPanel.style.display = 'none';
             }
-            if (typeof tab.content === 'string') {
-                tabPanel.innerHTML = tab.content;
-            }
-            else {
-                tabPanel.appendChild(tab.content);
-            }
+            // ✅ Render content (supports strings, DOM, and components)
+            this._renderTabContent(tabPanel, tab.content);
             tabPanels.appendChild(tabPanel);
         });
         wrapper.appendChild(tabList);
         wrapper.appendChild(tabPanels);
-        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);
-                });
-            });
-        }
         this._wireStandardEvents(wrapper);
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'activeTab') {
-                const transformToState = toState || ((v) => String(v));
-                const transformToComponent = toComponent || ((v) => String(v));
-                let isUpdating = false;
-                stateObj.subscribe((val) => {
-                    if (isUpdating)
-                        return;
-                    const transformed = transformToComponent(val);
-                    this.state.activeTab = transformed;
-                    this._switchTab(transformed, wrapper);
-                });
-                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 transform = toComponent || ((v) => v);
-                stateObj.subscribe((val) => {
-                    const transformed = transform(val);
-                    this.state.tabs = transformed;
-                    tabList.innerHTML = '';
-                    tabPanels.innerHTML = '';
-                    transformed.forEach((tab) => {
-                        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);
-                    });
-                    tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
-                        button.addEventListener('click', () => {
-                            const tabId = button.getAttribute('data-tab');
-                            this.state.activeTab = tabId;
-                            this._switchTab(tabId, wrapper);
-                        });
-                    });
-                });
-            }
-        });
+        this._wireAllSyncs();
         container.appendChild(wrapper);
+        this._tabsWrapper = wrapper;
         return this;
     }
-    _switchTab(tabId, wrapper) {
-        wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
-            btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === tabId);
-        });
-        wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
-            const isActive = panel.getAttribute('data-tab') === tabId;
-            panel.classList.toggle('jux-tabs-panel-active', isActive);
-            panel.style.display = isActive ? 'block' : 'none';
-        });
-        // 🎯 Fire the tabChange callback event
-        this._triggerCallback('tabChange', tabId);
-    }
 }
 export function tabs(id, options = {}) {
     return new Tabs(id, options);

package/lib/components/tabs.ts

@@ -1,4 +1,4 @@
-import { BaseComponent } from './base/BaseComponent.js';
+import { BaseComponent, BaseState } from './base/BaseComponent.js';
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
@@ -7,7 +7,7 @@ const CALLBACK_EVENTS = ['tabChange'] as const;
 export interface Tab {
   id: string;
   label: string;
-  content: string | HTMLElement;
+  content: string | HTMLElement | BaseComponent<any>; // ✅ Support component instances
   icon?: string;
 }
 
@@ -19,15 +19,15 @@ export interface TabsOptions {
   class?: string;
 }
 
-type TabsState = {
+type TabsState = BaseState & {
   tabs: Tab[];
   activeTab: string;
   variant: string;
-  style: string;
-  class: string;
 };
 
 export class Tabs extends BaseComponent<TabsState> {
+  private _tabsWrapper: HTMLElement | null = null;
+
   constructor(id: string, options: TabsOptions = {}) {
     super(id, {
       tabs: options.tabs ?? [],
@@ -47,10 +47,124 @@ export class Tabs extends BaseComponent<TabsState> {
   }
 
   /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
+   * REACTIVE UPDATE
    * ═════════════════════════════════════════════════════════════════ */
 
-  // ✅ Inherited from BaseComponent
+  update(prop: string, value: any): void {
+    super.update(prop, value); // ✅ Handle base properties
+
+    if (!this._tabsWrapper) return;
+
+    switch (prop) {
+      case 'activeTab':
+        this._updateActiveTab(value);
+        break;
+
+      case 'tabs':
+        this._rebuildTabs();
+        break;
+
+      case 'variant':
+        this._tabsWrapper.className = `jux-tabs jux-tabs-${value}`;
+        if (this.state.class) {
+          this._tabsWrapper.className += ` ${this.state.class}`;
+        }
+        break;
+    }
+  }
+
+  private _updateActiveTab(tabId: string): void {
+    if (!this._tabsWrapper) return;
+
+    // Update button states
+    this._tabsWrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
+      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === tabId);
+    });
+
+    // Update panel visibility
+    this._tabsWrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
+      const isActive = panel.getAttribute('data-tab') === tabId;
+      panel.classList.toggle('jux-tabs-panel-active', isActive);
+      (panel as HTMLElement).style.display = isActive ? 'block' : 'none';
+    });
+  }
+
+  private _rebuildTabs(): void {
+    if (!this._tabsWrapper) return;
+
+    const tabList = this._tabsWrapper.querySelector('.jux-tabs-list');
+    const tabPanels = this._tabsWrapper.querySelector('.jux-tabs-panels');
+
+    if (!tabList || !tabPanels) return;
+
+    // Clear existing
+    tabList.innerHTML = '';
+    tabPanels.innerHTML = '';
+
+    // Rebuild
+    this.state.tabs.forEach(tab => {
+      // Button
+      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');
+      }
+
+      if (tab.icon) {
+        const icon = document.createElement('span');
+        icon.className = 'jux-tabs-icon';
+        icon.textContent = tab.icon;
+        tabButton.appendChild(icon);
+      }
+
+      tabButton.appendChild(document.createTextNode(tab.label));
+      tabButton.addEventListener('click', () => {
+        this.state.activeTab = tab.id;
+        this._triggerCallback('tabChange', tab.id);
+      });
+
+      tabList.appendChild(tabButton);
+
+      // Panel
+      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';
+      }
+
+      // ✅ Render content (supports strings, DOM, and components)
+      this._renderTabContent(tabPanel, tab.content);
+
+      tabPanels.appendChild(tabPanel);
+    });
+  }
+
+  /**
+   * ✅ NEW: Smart content rendering
+   * Handles strings, DOM elements, and component instances
+   */
+  private _renderTabContent(panel: HTMLElement, content: string | HTMLElement | BaseComponent<any>): void {
+    if (typeof content === 'string') {
+      panel.innerHTML = content;
+    } else if (content instanceof HTMLElement) {
+      panel.appendChild(content);
+    } else if (content && typeof (content as any).render === 'function') {
+      // It's a component instance - create a container and render into it
+      const componentContainer = document.createElement('div');
+      componentContainer.id = `${panel.getAttribute('data-tab')}-content`;
+      panel.appendChild(componentContainer);
+      (content as BaseComponent<any>).render(`#${componentContainer.id}`);
+    }
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
 
   tabs(value: Tab[]): this {
     this.state.tabs = value;
@@ -62,9 +176,19 @@ export class Tabs extends BaseComponent<TabsState> {
     return this;
   }
 
+  removeTab(tabId: string): this {
+    this.state.tabs = this.state.tabs.filter(t => t.id !== tabId);
+
+    // If removing active tab, switch to first tab
+    if (this.state.activeTab === tabId && this.state.tabs.length > 0) {
+      this.state.activeTab = this.state.tabs[0].id;
+    }
+
+    return this;
+  }
+
   activeTab(value: string): this {
     this.state.activeTab = value;
-    this._updateActiveTab();
     return this;
   }
 
@@ -73,24 +197,32 @@ export class Tabs extends BaseComponent<TabsState> {
     return this;
   }
 
-  private _updateActiveTab(): void {
-    if (!this.container) return;
-    const wrapper = this.container.querySelector(`#${this._id}`);
-    if (!wrapper) return;
-
-    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
-      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === this.state.activeTab);
-    });
+  /**
+   * ✅ NEW: Update content of a specific tab
+   */
+  updateTabContent(tabId: string, content: string | HTMLElement | BaseComponent<any>): this {
+    const tab = this.state.tabs.find(t => t.id === tabId);
+    if (!tab) return this;
+
+    tab.content = content;
+
+    // Update DOM if tab is rendered
+    if (this._tabsWrapper) {
+      const panel = this._tabsWrapper.querySelector(`.jux-tabs-panel[data-tab="${tabId}"]`);
+      if (panel) {
+        panel.innerHTML = ''; // Clear existing content
+        this._renderTabContent(panel as HTMLElement, content);
+      }
+    }
 
-    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';
-    });
+    return this;
   }
 
-  update(prop: string, value: any): void {
-    // No reactive updates needed
+  /**
+   * ✅ NEW: Get current tab
+   */
+  getCurrentTab(): Tab | undefined {
+    return this.state.tabs.find(t => t.id === this.state.activeTab);
   }
 
   /* ═════════════════════════════════════════════════════════════════
@@ -101,7 +233,6 @@ export class Tabs extends BaseComponent<TabsState> {
     const container = this._setupContainer(targetId);
 
     const { tabs, activeTab, variant, style, class: className } = this.state;
-    const hasActiveTabSync = this._syncBindings.some(b => b.property === 'activeTab');
 
     const wrapper = document.createElement('div');
     wrapper.className = `jux-tabs jux-tabs-${variant}`;
@@ -116,136 +247,56 @@ export class Tabs extends BaseComponent<TabsState> {
     tabPanels.className = 'jux-tabs-panels';
 
     tabs.forEach(tab => {
+      // 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;
+      if (tab.id === activeTab) {
+        tabButton.classList.add('jux-tabs-button-active');
+      }
+
+      if (tab.icon) {
+        const icon = document.createElement('span');
+        icon.className = 'jux-tabs-icon';
+        icon.textContent = tab.icon;
+        tabButton.appendChild(icon);
+      }
+
+      tabButton.appendChild(document.createTextNode(tab.label));
+      tabButton.addEventListener('click', () => {
+        this.state.activeTab = tab.id;
+        this._triggerCallback('tabChange', tab.id);
+      });
+
       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) {
         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);
-      }
+
+      // ✅ Render content (supports strings, DOM, and components)
+      this._renderTabContent(tabPanel, tab.content);
+
       tabPanels.appendChild(tabPanel);
     });
 
     wrapper.appendChild(tabList);
     wrapper.appendChild(tabPanels);
 
-    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);
-        });
-      });
-    }
-
     this._wireStandardEvents(wrapper);
-
-    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;
-
-        stateObj.subscribe((val: any) => {
-          if (isUpdating) return;
-          const transformed = transformToComponent(val);
-          this.state.activeTab = transformed;
-          this._switchTab(transformed, wrapper);
-        });
-
-        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 transform = toComponent || ((v: any) => v);
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          this.state.tabs = transformed;
-
-          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);
-          });
-
-          tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
-            button.addEventListener('click', () => {
-              const tabId = button.getAttribute('data-tab')!;
-              this.state.activeTab = tabId;
-              this._switchTab(tabId, wrapper);
-            });
-          });
-        });
-      }
-    });
+    this._wireAllSyncs();
 
     container.appendChild(wrapper);
-    return this;
-  }
-
-  private _switchTab(tabId: string, wrapper: HTMLElement): void {
-    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
-      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === tabId);
-    });
+    this._tabsWrapper = wrapper;
 
-    wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
-      const isActive = panel.getAttribute('data-tab') === tabId;
-      panel.classList.toggle('jux-tabs-panel-active', isActive);
-      (panel as HTMLElement).style.display = isActive ? 'block' : 'none';
-    });
-
-    // 🎯 Fire the tabChange callback event
-    this._triggerCallback('tabChange', tabId);
+    return this;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.31",
+  "version": "1.1.32",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",