lightview 2.0.7 → 2.0.9

package/docs/assets/js/examplify.js

@@ -1,6 +1,6 @@
 // Unique ID counter for iframe identification
-var examplifyIdCounter = window.examplifyIdCounter || 0;
-window.examplifyIdCounter = examplifyIdCounter;
+var examplifyIdCounter = globalThis.examplifyIdCounter || 0;
+globalThis.examplifyIdCounter = examplifyIdCounter;
 
 function examplify(target, options = {}) {
     const { scripts, styles, modules, html, at, location = 'beforeBegin', type, height, minHeight = 100, maxHeight = Infinity, allowSameOrigin = false, useOrigin = null, language = 'js', autoRun = false } = options;
@@ -49,7 +49,7 @@ function examplify(target, options = {}) {
     iframe.style.background = '#f9fafb'; // Light gray placeholder
     iframe.style.border = '1px solid #e5e7eb';
     iframe.style.transition = 'opacity 0.2s ease-in, height 0.2s ease-out';
-    const sandboxFlags = ['allow-scripts'];
+    const sandboxFlags = ['allow-scripts', 'allow-modals', 'allow-forms', 'allow-popups'];
     if (allowSameOrigin) sandboxFlags.push('allow-same-origin');
     iframe.sandbox = sandboxFlags.join(' ');
 
@@ -160,7 +160,7 @@ function examplify(target, options = {}) {
         const currentTheme = document.documentElement.getAttribute('data-theme');
         const themeAttr = currentTheme ? ` data-theme="${currentTheme}"` : '';
 
-        const path = window.location.pathname;
+        const path = globalThis.location.pathname;
         const baseDir = path.substring(0, path.lastIndexOf('/') + 1);
         const baseTag = useOrigin ? `<base href="${useOrigin}${baseDir}">` : '';
 
@@ -177,7 +177,7 @@ function examplify(target, options = {}) {
                     parent.postMessage({ type: 'examplify-resize', id: frameId, height: height }, '*');
                 }
                 
-                window.addEventListener('load', () => {
+                globalThis.addEventListener('load', () => {
                     sendHeight();
                     setTimeout(sendHeight, 300);
                     setTimeout(sendHeight, 1000);
@@ -213,7 +213,7 @@ function examplify(target, options = {}) {
     ${styles ? styles.map(href => `<link rel="stylesheet" href="${href}">`).join('\n') : ''}
     <script>
         // Synchronously create the stylesheet-ready promise before any modules execute
-        window.__stylesheetsReady = (function() {
+        globalThis.__stylesheetsReady = (function() {
             return new Promise(resolve => {
                 // Use requestAnimationFrame to ensure DOM is ready for querying
                 requestAnimationFrame(() => {
@@ -248,9 +248,9 @@ function examplify(target, options = {}) {
     ${scripts ? scripts.map(src => `<script src="${src}"></script>`).join('\n') : ''}
     <script type="module">
         // Wait for stylesheets before initializing Lightview components
-        await window.__stylesheetsReady;
-        if (window.LightviewX) {
-            await window.LightviewX.initComponents({ shadowDefault: true });
+        await globalThis.__stylesheetsReady;
+        if (globalThis.LightviewX) {
+            await globalThis.LightviewX.initComponents({ shadowDefault: true });
         }
     </script>
 </head>
@@ -270,7 +270,7 @@ function examplify(target, options = {}) {
         };
         ${type === 'module' ? codeContent : `
             // Wait for stylesheets before running example code
-            window.__stylesheetsReady.then(async () => {
+            globalThis.__stylesheetsReady.then(async () => {
                 ${codeContent}
             });
         `}
@@ -278,7 +278,7 @@ function examplify(target, options = {}) {
     ${autoResizeScript}
     <script>
         // Reveal body and signal ready only after stylesheets are loaded
-        window.__stylesheetsReady.then(() => {
+        globalThis.__stylesheetsReady.then(() => {
             document.body.classList.add('styles-ready');
             setTimeout(() => {
                 parent.postMessage({ type: 'examplify-ready', id: '${iframeId}' }, '*');
@@ -286,11 +286,11 @@ function examplify(target, options = {}) {
         });
 
         // Listen for theme changes from parent
-        window.addEventListener('message', (event) => {
+        globalThis.addEventListener('message', (event) => {
             if (event.data && event.data.type === 'theme-change' && event.data.theme) {
                 document.documentElement.setAttribute('data-theme', event.data.theme);
-                if (window.LightviewX && typeof window.LightviewX.setTheme === 'function') {
-                    window.LightviewX.setTheme(event.data.theme);
+                if (globalThis.LightviewX && typeof globalThis.LightviewX.setTheme === 'function') {
+                    globalThis.LightviewX.setTheme(event.data.theme);
                 }
             }
         });
@@ -375,7 +375,7 @@ function examplify(target, options = {}) {
     }
 
     // Global Message Listener (for resizing and run click)
-    window.addEventListener('message', (event) => {
+    globalThis.addEventListener('message', (event) => {
         if (!event.data || event.data.id !== iframeId) return;
 
         if (event.data.type === 'examplify-resize' && autoResize) {

package/docs/components/accordion.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -69,7 +69,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -210,7 +210,7 @@ $('#example').content(accordion);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -436,4 +436,4 @@ $('#example').content(accordion);</code></pre>
                 </div>
             </div>
         </div>
-    </div>
+    </div>

package/docs/components/alert.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -71,7 +71,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -236,7 +236,7 @@ $('#example').content(alerts);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -525,4 +525,4 @@ $('#example').content(demo);</code></pre>
                 </div>
             </div>
         </div>
-    </div>
+    </div>

package/docs/components/avatar.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -74,7 +74,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -255,7 +255,7 @@ $('#example').content(avatars);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -583,4 +583,4 @@ Avatar.Group({},
                 </div>
             </div>
         </div>
-    </div>
+    </div>

package/docs/components/badge.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -71,7 +71,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -272,7 +272,7 @@ $('#example').content(badges);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -528,4 +528,4 @@ $('#example').content(demo);</code></pre>
             </div>
         </div>
     </div>
-</div>
+</div>

package/docs/components/breadcrumbs.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -71,7 +71,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -275,4 +275,4 @@ $('#example').content(breadcrumbs);</code></pre>
                 </div>
             </div>
         </div>
-    </div>
+    </div>

package/docs/components/button.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -73,7 +73,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -212,7 +212,7 @@ $('#example').content(buttons);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object', 'html'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -374,7 +374,7 @@ $('#example').content(button);</code></pre>
                                     });
                                 </script><code contenteditable="true" class="language-html">&lt;!-- Define a named signal globally --&gt;
 &lt;script&gt;
-window.signal = Lightview.signal;
+globalThis.signal = Lightview.signal;
 signal(false, 'btnLoading');
 &lt;/script&gt;
 
@@ -576,4 +576,4 @@ signal(false, 'btnLoading');
             </div>
         </div>
     </div>
-</div>
+</div>

package/docs/components/card.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -71,7 +71,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -234,7 +234,7 @@ $('#example').content(card);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -558,4 +558,4 @@ $('#example').content(card);</code></pre>
                 </div>
             </div>
         </div>
-    </div>
+    </div>

package/docs/components/carousel.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -72,7 +72,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -283,4 +283,4 @@ $('#example').content(demo);</code></pre>
                 </div>
             </div>
         </div>
-    </div>
+    </div>

package/docs/components/chart-area.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -73,7 +73,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchBasicAreaTab = (tabId) => {
+                                globalThis.switchBasicAreaTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`basic-area-tab-btn-${t}`);
@@ -227,7 +227,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchMultipleAreaTab = (tabId) => {
+                                globalThis.switchMultipleAreaTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`multiple-area-tab-btn-${t}`);
@@ -405,7 +405,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchAxesAreaTab = (tabId) => {
+                                globalThis.switchAxesAreaTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`axes-area-tab-btn-${t}`);
@@ -559,7 +559,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchStyledAreaTab = (tabId) => {
+                                globalThis.switchStyledAreaTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`styled-area-tab-btn-${t}`);
@@ -699,4 +699,4 @@ $('#example').content(chart);</code></pre>
             </div>
         </div>
     </div>
-</div>
+</div>

package/docs/components/chart-bar.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -71,7 +71,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchBasicBarTab = (tabId) => {
+                                globalThis.switchBasicBarTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`basic-bar-tab-btn-${t}`);
@@ -247,7 +247,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchMultipleBarTab = (tabId) => {
+                                globalThis.switchMultipleBarTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`multiple-bar-tab-btn-${t}`);
@@ -449,7 +449,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchAxesBarTab = (tabId) => {
+                                globalThis.switchAxesBarTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`axes-bar-tab-btn-${t}`);
@@ -607,7 +607,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSpacingBarTab = (tabId) => {
+                                globalThis.switchSpacingBarTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`spacing-bar-tab-btn-${t}`);
@@ -779,4 +779,4 @@ $('#example').content(charts);</code></pre>
             </div>
         </div>
     </div>
-</div>
+</div>

package/docs/components/chart-column.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -71,7 +71,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchBasicColumnTab = (tabId) => {
+                                globalThis.switchBasicColumnTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`basic-column-tab-btn-${t}`);
@@ -216,7 +216,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchMultipleColumnTab = (tabId) => {
+                                globalThis.switchMultipleColumnTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`multiple-column-tab-btn-${t}`);
@@ -398,7 +398,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchAxesColumnTab = (tabId) => {
+                                globalThis.switchAxesColumnTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`axes-column-tab-btn-${t}`);
@@ -555,7 +555,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSpacingColumnTab = (tabId) => {
+                                globalThis.switchSpacingColumnTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`spacing-column-tab-btn-${t}`);
@@ -732,4 +732,4 @@ $('#example').content(charts);</code></pre>
             </div>
         </div>
     </div>
-</div>
+</div>

package/docs/components/chart-line.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -72,7 +72,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchBasicLineTab = (tabId) => {
+                                globalThis.switchBasicLineTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`basic-line-tab-btn-${t}`);
@@ -281,7 +281,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchMultipleLineTab = (tabId) => {
+                                globalThis.switchMultipleLineTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`multiple-line-tab-btn-${t}`);
@@ -495,7 +495,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchAxesLineTab = (tabId) => {
+                                globalThis.switchAxesLineTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`axes-line-tab-btn-${t}`);
@@ -651,7 +651,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchStyledLineTab = (tabId) => {
+                                globalThis.switchStyledLineTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`styled-line-tab-btn-${t}`);
@@ -791,4 +791,4 @@ $('#example').content(chart);</code></pre>
             </div>
         </div>
     </div>
-</div>
+</div>

package/docs/components/chart-pie.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -74,7 +74,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchBasicPieTab = (tabId) => {
+                                globalThis.switchBasicPieTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`basic-pie-tab-btn-${t}`);
@@ -222,7 +222,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchLabelsPieTab = (tabId) => {
+                                globalThis.switchLabelsPieTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`labels-pie-tab-btn-${t}`);
@@ -404,7 +404,7 @@ $('#example').content(chart);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSpacingPieTab = (tabId) => {
+                                globalThis.switchSpacingPieTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`spacing-pie-tab-btn-${t}`);
@@ -593,7 +593,7 @@ $('#example').content(charts);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchColorPieTab = (tabId) => {
+                                globalThis.switchColorPieTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`color-pie-tab-btn-${t}`);
@@ -820,4 +820,4 @@ const slices = percentagesToPie([50, 30, 20]);
             </div>
         </div>
     </div>
-</div>
+</div>

package/docs/components/chart.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -609,4 +609,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

package/docs/components/chat.html

@@ -1,7 +1,7 @@
 <!-- SEO-friendly SPA Shim -->
 <script src="/lightview-router.js"></script>
 <script>
-    if (window.LightviewRouter) {
+    if (globalThis.LightviewRouter) {
         LightviewRouter.base('/index.html');
     }
 </script>
@@ -69,7 +69,7 @@
 
                             <!-- Tabs -->
                             <script>
-                                window.switchSyntaxTab = (tabId) => {
+                                globalThis.switchSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`tab-btn-${t}`);
@@ -226,7 +226,7 @@ $('#example').content(conversation);</code></pre>
 
                             <!-- Tabs -->
                             <script>
-                                window.switchReactiveSyntaxTab = (tabId) => {
+                                globalThis.switchReactiveSyntaxTab = (tabId) => {
                                     const tabs = ['tagged', 'vdom', 'object'];
                                     tabs.forEach(t => {
                                         const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
@@ -544,4 +544,4 @@ $('#example').content(demo);</code></pre>
                 </div>
             </div>
         </div>
-    </div>
+    </div>