juxscript 1.1.31 → 1.1.33

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;
     icon?: string;
 }
 export interface TabsOptions {
@@ -12,25 +12,37 @@ 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;
     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;
+    /**
+     * Update content of a specific tab by ID
+     */
+    updateTabContent(tabId: string, content: string): this;
+    /**
+     * Get tab by ID
+     */
+    getTab(tabId: string): Tab | undefined;
+    /**
+     * Get current active 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,CAAC;IAChB,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;IAsBxB,OAAO,CAAC,YAAY;IA6DpB,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,IAAI;IAetD;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,GAAG,SAAS;IAItC;;OAEG;IACH,aAAa,IAAI,GAAG,GAAG,SAAS;IAQhC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAuEhC;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,98 @@ export class Tabs extends BaseComponent {
     getCallbackEvents() {
         return CALLBACK_EVENTS;
     }
+    /* ═════════════════════════════════════════════════════════════════
+     * REACTIVE UPDATE
+     * ═════════════════════════════════════════════════════════════════ */
+    update(prop, value) {
+        super.update(prop, value);
+        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.state.tabs.forEach(tab => {
+            const btn = document.getElementById(`${this._id}-${tab.id}-button`);
+            if (btn) {
+                btn.classList.toggle('jux-tabs-button-active', tab.id === tabId);
+            }
+        });
+        // Update panel visibility
+        this.state.tabs.forEach(tab => {
+            const panel = document.getElementById(`${this._id}-${tab.id}-panel`);
+            if (panel) {
+                const isActive = tab.id === 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 with unique ID
+            const tabButton = document.createElement('button');
+            tabButton.id = `${this._id}-${tab.id}-button`;
+            tabButton.className = 'jux-tabs-button';
+            tabButton.setAttribute('data-tab-id', 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 with unique ID
+            const tabPanel = document.createElement('div');
+            tabPanel.id = `${this._id}-${tab.id}-panel`;
+            tabPanel.className = 'jux-tabs-panel';
+            tabPanel.setAttribute('data-tab-id', tab.id);
+            if (tab.id === this.state.activeTab) {
+                tabPanel.classList.add('jux-tabs-panel-active');
+            }
+            else {
+                tabPanel.style.display = 'none';
+            }
+            tabPanel.innerHTML = tab.content;
+            tabPanels.appendChild(tabPanel);
+        });
+    }
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API
      * ═════════════════════════════════════════════════════════════════ */
-    // ✅ Inherited from BaseComponent
     tabs(value) {
         this.state.tabs = value;
         return this;
@@ -30,32 +119,48 @@ 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';
-        });
+    /**
+     * Update content of a specific tab by ID
+     */
+    updateTabContent(tabId, content) {
+        const tab = this.state.tabs.find(t => t.id === tabId);
+        if (!tab)
+            return this;
+        tab.content = content;
+        // Update DOM if rendered
+        const panel = document.getElementById(`${this._id}-${tabId}-panel`);
+        if (panel) {
+            panel.innerHTML = content;
+        }
+        return this;
     }
-    update(prop, value) {
-        // No reactive updates needed
+    /**
+     * Get tab by ID
+     */
+    getTab(tabId) {
+        return this.state.tabs.find(t => t.id === tabId);
+    }
+    /**
+     * Get current active tab
+     */
+    getCurrentTab() {
+        return this.state.tabs.find(t => t.id === this.state.activeTab);
     }
     /* ═════════════════════════════════════════════════════════════════
      * RENDER
@@ -63,7 +168,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,125 +180,48 @@ export class Tabs extends BaseComponent {
         const tabPanels = document.createElement('div');
         tabPanels.className = 'jux-tabs-panels';
         tabs.forEach(tab => {
+            // Tab button with unique ID
             const tabButton = document.createElement('button');
+            tabButton.id = `${this._id}-${tab.id}-button`;
             tabButton.className = 'jux-tabs-button';
-            tabButton.setAttribute('data-tab', tab.id);
-            if (tab.id === activeTab)
+            tabButton.setAttribute('data-tab-id', tab.id);
+            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 with unique ID
             const tabPanel = document.createElement('div');
+            tabPanel.id = `${this._id}-${tab.id}-panel`;
             tabPanel.className = 'jux-tabs-panel';
-            tabPanel.setAttribute('data-tab', tab.id);
+            tabPanel.setAttribute('data-tab-id', 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);
-            }
+            tabPanel.innerHTML = 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; // ✅ Only static HTML strings for now
   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,114 @@ export class Tabs extends BaseComponent<TabsState> {
   }
 
   /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API
+   * REACTIVE UPDATE
    * ═════════════════════════════════════════════════════════════════ */
 
-  // ✅ Inherited from BaseComponent
+  update(prop: string, value: any): void {
+    super.update(prop, value);
+
+    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.state.tabs.forEach(tab => {
+      const btn = document.getElementById(`${this._id}-${tab.id}-button`);
+      if (btn) {
+        btn.classList.toggle('jux-tabs-button-active', tab.id === tabId);
+      }
+    });
+
+    // Update panel visibility
+    this.state.tabs.forEach(tab => {
+      const panel = document.getElementById(`${this._id}-${tab.id}-panel`);
+      if (panel) {
+        const isActive = tab.id === tabId;
+        panel.classList.toggle('jux-tabs-panel-active', isActive);
+        panel.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 with unique ID
+      const tabButton = document.createElement('button');
+      tabButton.id = `${this._id}-${tab.id}-button`;
+      tabButton.className = 'jux-tabs-button';
+      tabButton.setAttribute('data-tab-id', 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 with unique ID
+      const tabPanel = document.createElement('div');
+      tabPanel.id = `${this._id}-${tab.id}-panel`;
+      tabPanel.className = 'jux-tabs-panel';
+      tabPanel.setAttribute('data-tab-id', tab.id);
+
+      if (tab.id === this.state.activeTab) {
+        tabPanel.classList.add('jux-tabs-panel-active');
+      } else {
+        tabPanel.style.display = 'none';
+      }
+
+      tabPanel.innerHTML = tab.content;
+      tabPanels.appendChild(tabPanel);
+    });
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
 
   tabs(value: Tab[]): this {
     this.state.tabs = value;
@@ -62,9 +166,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 +187,36 @@ 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;
+  /**
+   * Update content of a specific tab by ID
+   */
+  updateTabContent(tabId: string, content: string): this {
+    const tab = this.state.tabs.find(t => t.id === tabId);
+    if (!tab) return this;
 
-    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
-      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === this.state.activeTab);
-    });
+    tab.content = 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';
-    });
+    // Update DOM if rendered
+    const panel = document.getElementById(`${this._id}-${tabId}-panel`);
+    if (panel) {
+      panel.innerHTML = content;
+    }
+
+    return this;
   }
 
-  update(prop: string, value: any): void {
-    // No reactive updates needed
+  /**
+   * Get tab by ID
+   */
+  getTab(tabId: string): Tab | undefined {
+    return this.state.tabs.find(t => t.id === tabId);
+  }
+
+  /**
+   * Get current active tab
+   */
+  getCurrentTab(): Tab | undefined {
+    return this.state.tabs.find(t => t.id === this.state.activeTab);
   }
 
   /* ═════════════════════════════════════════════════════════════════
@@ -101,7 +227,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 +241,58 @@ export class Tabs extends BaseComponent<TabsState> {
     tabPanels.className = 'jux-tabs-panels';
 
     tabs.forEach(tab => {
+      // Tab button with unique ID
       const tabButton = document.createElement('button');
+      tabButton.id = `${this._id}-${tab.id}-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;
+      tabButton.setAttribute('data-tab-id', tab.id);
+
+      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 with unique ID
       const tabPanel = document.createElement('div');
+      tabPanel.id = `${this._id}-${tab.id}-panel`;
       tabPanel.className = 'jux-tabs-panel';
-      tabPanel.setAttribute('data-tab', tab.id);
+      tabPanel.setAttribute('data-tab-id', 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);
-      }
+
+      tabPanel.innerHTML = 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.33",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",