juxscript 1.1.37 → 1.1.39

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;IAsEpB,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;CA+EnE;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;;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

@@ -104,17 +104,15 @@ export class Tabs extends BaseComponent {
             else {
                 tabPanel.style.display = 'none';
             }
-            // ✅ Render content (string or component)
+            // ✅ Append panel to DOM FIRST
+            tabPanels.appendChild(tabPanel);
+            // THEN render content into it
             if (typeof tab.content === 'string') {
                 tabPanel.innerHTML = tab.content;
             }
             else if (tab.content instanceof BaseComponent) {
-                // Component needs to be appended after panel is in DOM
-                tabPanels.appendChild(tabPanel);
                 tab.content.render(`#${tabPanel.id}`);
-                return; // Skip the second appendChild below
             }
-            tabPanels.appendChild(tabPanel);
         });
     }
     /* ═════════════════════════════════════════════════════════════════
@@ -194,6 +192,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,23 +228,19 @@ export class Tabs extends BaseComponent {
             else {
                 tabPanel.style.display = 'none';
             }
-            // ✅ Render content (string or component)
+            // ✅ Append panel to DOM FIRST
+            tabPanels.appendChild(tabPanel);
+            // ✅ 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) {
-                // Component needs to be appended after panel is in DOM
-                tabPanels.appendChild(tabPanel);
+                // Now panel exists in DOM, so render() can find it
                 tab.content.render(`#${tabPanel.id}`);
-                return; // Skip the second appendChild below
             }
-            tabPanels.appendChild(tabPanel);
         });
-        wrapper.appendChild(tabList);
-        wrapper.appendChild(tabPanels);
         this._wireStandardEvents(wrapper);
         this._wireAllSyncs();
-        container.appendChild(wrapper);
         this._tabsWrapper = wrapper;
         return this;
     }

package/lib/components/tabs.ts

@@ -7,7 +7,7 @@ const CALLBACK_EVENTS = ['tabChange'] as const;
 export interface Tab {
   id: string;
   label: string;
-  content: string | BaseComponent<any>; // ✅ Support component instances
+  content: string | BaseComponent<any>;
   icon?: string;
 }
 
@@ -147,17 +147,15 @@ export class Tabs extends BaseComponent<TabsState> {
         tabPanel.style.display = 'none';
       }
 
-      // ✅ Render content (string or component)
+      // ✅ Append panel to DOM FIRST
+      tabPanels.appendChild(tabPanel);
+
+      // THEN render content into it
       if (typeof tab.content === 'string') {
         tabPanel.innerHTML = tab.content;
       } else if (tab.content instanceof BaseComponent) {
-        // Component needs to be appended after panel is in DOM
-        tabPanels.appendChild(tabPanel);
         tab.content.render(`#${tabPanel.id}`);
-        return; // Skip the second appendChild below
       }
-
-      tabPanels.appendChild(tabPanel);
     });
   }
 
@@ -254,6 +252,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');
@@ -293,26 +296,21 @@ export class Tabs extends BaseComponent<TabsState> {
         tabPanel.style.display = 'none';
       }
 
-      // ✅ Render content (string or component)
+      // ✅ Append panel to DOM FIRST
+      tabPanels.appendChild(tabPanel);
+
+      // ✅ 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) {
-        // Component needs to be appended after panel is in DOM
-        tabPanels.appendChild(tabPanel);
+        // Now panel exists in DOM, so render() can find it
         tab.content.render(`#${tabPanel.id}`);
-        return; // Skip the second appendChild below
       }
-
-      tabPanels.appendChild(tabPanel);
     });
 
-    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.37",
+  "version": "1.1.39",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",