juxscript 1.1.38 → 1.1.40

package/lib/components/tabs.d.ts

@@ -34,6 +34,11 @@ export declare class Tabs extends BaseComponent<TabsState> {
      * Update content of a specific tab by ID
      */
     updateTabContent(tabId: string, content: string | BaseComponent<any>): this;
+    /**
+     * ✅ NEW: Append content to a specific tab
+     * Accepts single item or array of strings/BaseComponents
+     */
+    addTabContent(tabId: string, content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this;
     /**
      * Get tab by ID
      */

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,aAAa,CAAC,GAAG,CAAC,CAAC;IACrC,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;IAoEpB,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,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAqB3E;;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,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA6EnE;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,aAAa,CAAC,GAAG,CAAC,CAAC;IACrC,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;IAoEpB,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,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAqB3E;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IA2B7G;;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,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA+EnE;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/tabs.js

@@ -163,6 +163,34 @@ export class Tabs extends BaseComponent {
         }
         return this;
     }
+    /**
+     * ✅ NEW: Append content to a specific tab
+     * Accepts single item or array of strings/BaseComponents
+     */
+    addTabContent(tabId, content) {
+        const panel = document.getElementById(`${this._id}-${tabId}-panel`);
+        if (!panel) {
+            console.warn(`[Tabs] Panel not found for tab: ${tabId}`);
+            return this;
+        }
+        // Normalize to array
+        const items = Array.isArray(content) ? content : [content];
+        items.forEach(item => {
+            if (typeof item === 'string') {
+                // Append HTML string
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = item;
+                while (tempDiv.firstChild) {
+                    panel.appendChild(tempDiv.firstChild);
+                }
+            }
+            else if (item instanceof BaseComponent) {
+                // Render component into panel
+                item.render(`#${panel.id}`);
+            }
+        });
+        return this;
+    }
     /**
      * Get tab by ID
      */
@@ -192,6 +220,10 @@ export class Tabs extends BaseComponent {
         tabList.className = 'jux-tabs-list';
         const tabPanels = document.createElement('div');
         tabPanels.className = 'jux-tabs-panels';
+        // ✅ Append structure to DOM FIRST, then render content
+        wrapper.appendChild(tabList);
+        wrapper.appendChild(tabPanels);
+        container.appendChild(wrapper);
         tabs.forEach(tab => {
             // Tab button with unique ID
             const tabButton = document.createElement('button');
@@ -226,19 +258,17 @@ export class Tabs extends BaseComponent {
             }
             // ✅ Append panel to DOM FIRST
             tabPanels.appendChild(tabPanel);
-            // ✅ THEN render content into it
+            // ✅ THEN render content into it (panel is now in DOM)
             if (typeof tab.content === 'string') {
                 tabPanel.innerHTML = tab.content;
             }
             else if (tab.content instanceof BaseComponent) {
+                // Now panel exists in DOM, so render() can find it
                 tab.content.render(`#${tabPanel.id}`);
             }
         });
-        wrapper.appendChild(tabList);
-        wrapper.appendChild(tabPanels);
         this._wireStandardEvents(wrapper);
         this._wireAllSyncs();
-        container.appendChild(wrapper);
         this._tabsWrapper = wrapper;
         return this;
     }

package/lib/components/tabs.ts

@@ -218,6 +218,37 @@ export class Tabs extends BaseComponent<TabsState> {
     return this;
   }
 
+  /**
+   * ✅ NEW: Append content to a specific tab
+   * Accepts single item or array of strings/BaseComponents
+   */
+  addTabContent(tabId: string, content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this {
+    const panel = document.getElementById(`${this._id}-${tabId}-panel`);
+    if (!panel) {
+      console.warn(`[Tabs] Panel not found for tab: ${tabId}`);
+      return this;
+    }
+
+    // Normalize to array
+    const items = Array.isArray(content) ? content : [content];
+
+    items.forEach(item => {
+      if (typeof item === 'string') {
+        // Append HTML string
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = item;
+        while (tempDiv.firstChild) {
+          panel.appendChild(tempDiv.firstChild);
+        }
+      } else if (item instanceof BaseComponent) {
+        // Render component into panel
+        item.render(`#${panel.id}`);
+      }
+    });
+
+    return this;
+  }
+
   /**
    * Get tab by ID
    */
@@ -252,6 +283,11 @@ export class Tabs extends BaseComponent<TabsState> {
     const tabPanels = document.createElement('div');
     tabPanels.className = 'jux-tabs-panels';
 
+    // ✅ Append structure to DOM FIRST, then render content
+    wrapper.appendChild(tabList);
+    wrapper.appendChild(tabPanels);
+    container.appendChild(wrapper);
+
     tabs.forEach(tab => {
       // Tab button with unique ID
       const tabButton = document.createElement('button');
@@ -294,21 +330,18 @@ export class Tabs extends BaseComponent<TabsState> {
       // ✅ Append panel to DOM FIRST
       tabPanels.appendChild(tabPanel);
 
-      // ✅ THEN render content into it
+      // ✅ THEN render content into it (panel is now in DOM)
       if (typeof tab.content === 'string') {
         tabPanel.innerHTML = tab.content;
       } else if (tab.content instanceof BaseComponent) {
+        // Now panel exists in DOM, so render() can find it
         tab.content.render(`#${tabPanel.id}`);
       }
     });
 
-    wrapper.appendChild(tabList);
-    wrapper.appendChild(tabPanels);
-
     this._wireStandardEvents(wrapper);
     this._wireAllSyncs();
 
-    container.appendChild(wrapper);
     this._tabsWrapper = wrapper;
 
     return this;

package/package.json

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