juxscript 1.1.32 → 1.1.33

package/lib/components/tabs.d.ts

@@ -2,7 +2,7 @@ import { BaseComponent, BaseState } from './base/BaseComponent.js';
 export interface Tab {
     id: string;
     label: string;
-    content: string | HTMLElement | BaseComponent<any>;
+    content: string;
     icon?: string;
 }
 export interface TabsOptions {
@@ -25,22 +25,21 @@ export declare class Tabs extends BaseComponent<TabsState> {
     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;
     /**
-     * ✅ NEW: Update content of a specific tab
+     * Update content of a specific tab by ID
+     */
+    updateTabContent(tabId: string, content: string): this;
+    /**
+     * Get tab by ID
      */
-    updateTabContent(tabId: string, content: string | HTMLElement | BaseComponent<any>): this;
+    getTab(tabId: string): Tab | undefined;
     /**
-     * ✅ NEW: Get current tab
+     * Get current active tab
      */
     getCurrentTab(): Tab | undefined;
     render(targetId?: string): this;

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,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"}
+{"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

@@ -23,7 +23,7 @@ export class Tabs extends BaseComponent {
      * REACTIVE UPDATE
      * ═════════════════════════════════════════════════════════════════ */
     update(prop, value) {
-        super.update(prop, value); // ✅ Handle base properties
+        super.update(prop, value);
         if (!this._tabsWrapper)
             return;
         switch (prop) {
@@ -45,14 +45,20 @@ export class Tabs extends BaseComponent {
         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);
+        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._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';
+        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() {
@@ -67,10 +73,11 @@ export class Tabs extends BaseComponent {
         tabPanels.innerHTML = '';
         // Rebuild
         this.state.tabs.forEach(tab => {
-            // Button
+            // 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);
+            tabButton.setAttribute('data-tab-id', tab.id);
             if (tab.id === this.state.activeTab) {
                 tabButton.classList.add('jux-tabs-button-active');
             }
@@ -86,40 +93,21 @@ export class Tabs extends BaseComponent {
                 this._triggerCallback('tabChange', tab.id);
             });
             tabList.appendChild(tabButton);
-            // Panel
+            // 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 === 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);
+            tabPanel.innerHTML = 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
      * ═════════════════════════════════════════════════════════════════ */
@@ -148,25 +136,28 @@ export class Tabs extends BaseComponent {
         return this;
     }
     /**
-     * ✅ NEW: Update content of a specific tab
+     * 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 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);
-            }
+        // Update DOM if rendered
+        const panel = document.getElementById(`${this._id}-${tabId}-panel`);
+        if (panel) {
+            panel.innerHTML = content;
         }
         return this;
     }
     /**
-     * ✅ NEW: Get current tab
+     * 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);
@@ -189,10 +180,11 @@ export class Tabs extends BaseComponent {
         const tabPanels = document.createElement('div');
         tabPanels.className = 'jux-tabs-panels';
         tabs.forEach(tab => {
-            // Tab button
+            // 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);
+            tabButton.setAttribute('data-tab-id', tab.id);
             if (tab.id === activeTab) {
                 tabButton.classList.add('jux-tabs-button-active');
             }
@@ -208,18 +200,18 @@ export class Tabs extends BaseComponent {
                 this._triggerCallback('tabChange', tab.id);
             });
             tabList.appendChild(tabButton);
-            // Tab panel
+            // 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';
             }
-            // ✅ Render content (supports strings, DOM, and components)
-            this._renderTabContent(tabPanel, tab.content);
+            tabPanel.innerHTML = tab.content;
             tabPanels.appendChild(tabPanel);
         });
         wrapper.appendChild(tabList);

package/lib/components/tabs.ts

@@ -7,7 +7,7 @@ const CALLBACK_EVENTS = ['tabChange'] as const;
 export interface Tab {
   id: string;
   label: string;
-  content: string | HTMLElement | BaseComponent<any>; // ✅ Support component instances
+  content: string; // ✅ Only static HTML strings for now
   icon?: string;
 }
 
@@ -51,7 +51,7 @@ export class Tabs extends BaseComponent<TabsState> {
    * ═════════════════════════════════════════════════════════════════ */
 
   update(prop: string, value: any): void {
-    super.update(prop, value); // ✅ Handle base properties
+    super.update(prop, value);
 
     if (!this._tabsWrapper) return;
 
@@ -77,15 +77,21 @@ export class Tabs extends BaseComponent<TabsState> {
     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);
+    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._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';
+    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';
+      }
     });
   }
 
@@ -103,10 +109,12 @@ export class Tabs extends BaseComponent<TabsState> {
 
     // Rebuild
     this.state.tabs.forEach(tab => {
-      // Button
+      // 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);
+      tabButton.setAttribute('data-tab-id', tab.id);
+
       if (tab.id === this.state.activeTab) {
         tabButton.classList.add('jux-tabs-button-active');
       }
@@ -119,6 +127,7 @@ export class Tabs extends BaseComponent<TabsState> {
       }
 
       tabButton.appendChild(document.createTextNode(tab.label));
+
       tabButton.addEventListener('click', () => {
         this.state.activeTab = tab.id;
         this._triggerCallback('tabChange', tab.id);
@@ -126,10 +135,11 @@ export class Tabs extends BaseComponent<TabsState> {
 
       tabList.appendChild(tabButton);
 
-      // Panel
+      // 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 === this.state.activeTab) {
         tabPanel.classList.add('jux-tabs-panel-active');
@@ -137,31 +147,11 @@ export class Tabs extends BaseComponent<TabsState> {
         tabPanel.style.display = 'none';
       }
 
-      // ✅ Render content (supports strings, DOM, and components)
-      this._renderTabContent(tabPanel, tab.content);
-
+      tabPanel.innerHTML = 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
    * ═════════════════════════════════════════════════════════════════ */
@@ -198,28 +188,32 @@ export class Tabs extends BaseComponent<TabsState> {
   }
 
   /**
-   * ✅ NEW: Update content of a specific tab
+   * Update content of a specific tab by ID
    */
-  updateTabContent(tabId: string, content: string | HTMLElement | BaseComponent<any>): this {
+  updateTabContent(tabId: string, content: string): 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);
-      }
+    // Update DOM if rendered
+    const panel = document.getElementById(`${this._id}-${tabId}-panel`);
+    if (panel) {
+      panel.innerHTML = content;
     }
 
     return this;
   }
 
   /**
-   * ✅ NEW: Get current tab
+   * 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);
@@ -247,10 +241,12 @@ export class Tabs extends BaseComponent<TabsState> {
     tabPanels.className = 'jux-tabs-panels';
 
     tabs.forEach(tab => {
-      // Tab button
+      // 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);
+      tabButton.setAttribute('data-tab-id', tab.id);
+
       if (tab.id === activeTab) {
         tabButton.classList.add('jux-tabs-button-active');
       }
@@ -263,6 +259,7 @@ export class Tabs extends BaseComponent<TabsState> {
       }
 
       tabButton.appendChild(document.createTextNode(tab.label));
+
       tabButton.addEventListener('click', () => {
         this.state.activeTab = tab.id;
         this._triggerCallback('tabChange', tab.id);
@@ -270,10 +267,11 @@ export class Tabs extends BaseComponent<TabsState> {
 
       tabList.appendChild(tabButton);
 
-      // Tab panel
+      // 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');
@@ -281,9 +279,7 @@ export class Tabs extends BaseComponent<TabsState> {
         tabPanel.style.display = 'none';
       }
 
-      // ✅ Render content (supports strings, DOM, and components)
-      this._renderTabContent(tabPanel, tab.content);
-
+      tabPanel.innerHTML = tab.content;
       tabPanels.appendChild(tabPanel);
     });
 

package/package.json

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