@tanstack/devtools 0.6.10 → 0.6.11

package/dist/chunk/{CEHNENNI.js → EYSAUXP6.js}

@@ -62,12 +62,12 @@ var initialState = {
     openHotkey: ["Shift", "A"],
     requireUrlFlag: false,
     urlFlag: "tanstack-devtools",
-    theme: typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+    theme: typeof window !== "undefined" && typeof window.matchMedia !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
   },
   state: {
     activeTab: "plugins",
     height: 400,
-    activePlugin: void 0,
+    activePlugins: [],
     persistOpen: false
   }
 };
@@ -198,8 +198,21 @@ var generatePluginId = (plugin, index) => {
   }
   return index.toString();
 };
+function getStateFromLocalStorage(plugins) {
+  const existingStateString = getStorageItem(TANSTACK_DEVTOOLS_STATE);
+  const existingState = tryParseJson(existingStateString);
+  const pluginIds = [];
+  if (existingState?.activePlugins) {
+    const originalLength = existingState.activePlugins.length;
+    existingState.activePlugins = existingState.activePlugins.filter((id) => pluginIds.includes(id));
+    if (existingState.activePlugins.length !== originalLength) {
+      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(existingState));
+    }
+  }
+  return existingState;
+}
 var getExistingStateFromStorage = (config, plugins) => {
-  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE);
+  const existingState = getStateFromLocalStorage();
   const settings = getSettings();
   const state = {
     ...initialState,
@@ -212,7 +225,7 @@ var getExistingStateFromStorage = (config, plugins) => {
     }) || [],
     state: {
       ...initialState.state,
-      ...existingState ? JSON.parse(existingState) : {}
+      ...existingState
     },
     settings: {
       ...initialState.settings,

package/dist/dev.js

@@ -1,5 +1,5 @@
-import { initialState, DevtoolsProvider, PiPProvider } from './chunk/CEHNENNI.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/CEHNENNI.js';
+import { initialState, DevtoolsProvider, PiPProvider } from './chunk/EYSAUXP6.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/EYSAUXP6.js';
 import { render, createComponent, Portal } from 'solid-js/web';
 import { lazy } from 'solid-js';
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
@@ -29,7 +29,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/67YFWU65.js'));
+      this.#Component = lazy(() => import('./devtools/HKKVBS5C.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/dist/devtools/{O4SGY7NG.js → CR4IWRG4.js}

@@ -1,4 +1,4 @@
-import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/CEHNENNI.js';
+import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/EYSAUXP6.js';
 import { createComponent, Portal, ssr, ssrAttribute, escape } from 'solid-js/web';
 import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
 import { createShortcut } from '@solid-primitives/keyboard';
@@ -78,24 +78,29 @@ var usePlugins = () => {
   const { store, setStore } = useDevtoolsContext();
   const { setForceExpand } = useDrawContext();
   const plugins = createMemo(() => store.plugins);
-  const activePlugin = createMemo(() => store.state.activePlugin);
+  const activePlugins = createMemo(() => store.state.activePlugins);
   createEffect(() => {
-    if (activePlugin() == null) {
-      setForceExpand(false);
-    } else {
+    if (activePlugins().length === 0) {
       setForceExpand(true);
+    } else {
+      setForceExpand(false);
     }
   });
-  const setActivePlugin = (pluginId) => {
-    setStore((prev) => ({
-      ...prev,
-      state: {
-        ...prev.state,
-        activePlugin: pluginId
-      }
-    }));
+  const toggleActivePlugins = (pluginId) => {
+    setStore((prev) => {
+      const isActive = prev.state.activePlugins.includes(pluginId);
+      const updatedPlugins = isActive ? prev.state.activePlugins.filter((id) => id !== pluginId) : [...prev.state.activePlugins, pluginId];
+      if (updatedPlugins.length > 3) return prev;
+      return {
+        ...prev,
+        state: {
+          ...prev.state,
+          activePlugins: updatedPlugins
+        }
+      };
+    });
   };
-  return { plugins, setActivePlugin, activePlugin };
+  return { plugins, toggleActivePlugins, activePlugins };
 };
 var useDevtoolsState = () => {
   const { store, setStore } = useDevtoolsContext();
@@ -1182,24 +1187,34 @@ var SettingsTab = () => {
     }
   });
 };
-var _tmpl$6 = ["<div", "><div", "><div", ">", "</div></div><div", "></div></div>"];
-var _tmpl$24 = ["<div", "><h3", "></h3></div>"];
+var _tmpl$6 = ["<div", "><div", "><div", ">", "</div></div>", "</div>"];
+var _tmpl$24 = ["<div", '><h3 id="', '"></h3></div>'];
+var _tmpl$33 = ['<div id="', '"', "></div>"];
 var PluginsTab = () => {
   const {
     plugins,
-    activePlugin,
-    setActivePlugin
+    activePlugins,
+    toggleActivePlugins
   } = usePlugins();
   const {
     expanded,
     hoverUtils,
     animationMs
   } = useDrawContext();
-  useTheme();
+  const [pluginRefs, setPluginRefs] = createSignal(/* @__PURE__ */ new Map());
+  const styles = useStyles();
+  const {
+    theme
+  } = useTheme();
   createEffect(() => {
-    plugins()?.find((plugin) => plugin.id === activePlugin());
+    const currentActivePlugins = plugins()?.filter((plugin) => activePlugins().includes(plugin.id));
+    currentActivePlugins?.forEach((plugin) => {
+      const ref = pluginRefs().get(plugin.id);
+      if (ref) {
+        plugin.render(ref, theme());
+      }
+    });
   });
-  const styles = useStyles();
   return ssr(_tmpl$6, ssrAttribute("class", escape(styles().pluginsTabPanel, true), false), ssrAttribute("class", escape(clsx3(styles().pluginsTabDraw(expanded()), {
     [styles().pluginsTabDraw(expanded())]: expanded()
   }, styles().pluginsTabDrawTransition(animationMs)), true), false), ssrAttribute("class", escape(clsx3(styles().pluginsTabSidebar(expanded()), styles().pluginsTabSidebarTransition(animationMs)), true), false), escape(createComponent(For, {
@@ -1209,11 +1224,17 @@ var PluginsTab = () => {
     children: (plugin) => {
       createEffect(() => {
       });
+      const isActive = createMemo(() => activePlugins().includes(plugin.id));
       return ssr(_tmpl$24, ssrAttribute("class", escape(clsx3(styles().pluginName, {
-        active: activePlugin() === plugin.id
-      }), true), false), ssrAttribute("id", escape(PLUGIN_TITLE_CONTAINER_ID, true), false));
+        active: isActive()
+      }), true), false), `${escape(PLUGIN_TITLE_CONTAINER_ID, true)}-${escape(plugin.id, true)}`);
     }
-  })), ssrAttribute("id", escape(PLUGIN_CONTAINER_ID, true), false) + ssrAttribute("class", escape(styles().pluginsTabContent, true), false));
+  })), escape(createComponent(For, {
+    get each() {
+      return activePlugins();
+    },
+    children: (pluginId) => ssr(_tmpl$33, `${escape(PLUGIN_CONTAINER_ID, true)}-${escape(pluginId, true)}`, ssrAttribute("class", escape(styles().pluginsTabContent, true), false))
+  })));
 };
 function useHeadChanges(onChange, opts = {}) {
   const {
@@ -1279,7 +1300,7 @@ function useHeadChanges(onChange, opts = {}) {
 // src/tabs/seo-tab.tsx
 var _tmpl$7 = ["<div", ' style="', '"><div', ' style="', '">', " Preview</div>", "<div", ">", "</div><div", ">", "</div><div", ">", "</div></div>"];
 var _tmpl$25 = ["<img", ' alt="Preview"', ">"];
-var _tmpl$33 = ["<div", ' style="', '">No Image</div>'];
+var _tmpl$34 = ["<div", ' style="', '">No Image</div>'];
 var _tmpl$43 = ["<div", ">", "</div>"];
 var _tmpl$52 = ["<div>", "", "</div>"];
 var _tmpl$62 = ["<div", "><strong>Missing tags for ", ":</strong><ul", ">", "</ul></div>"];
@@ -1408,7 +1429,7 @@ var SOCIALS = [
 ];
 function SocialPreview(props) {
   const styles = useStyles();
-  return ssr(_tmpl$7, ssrAttribute("class", escape(styles().seoPreviewCard, true), false), "border-color:" + escape(props.color, true), ssrAttribute("class", escape(styles().seoPreviewHeader, true), false), "color:" + escape(props.color, true), escape(props.network), props.meta.image ? ssr(_tmpl$25, ssrAttribute("src", escape(props.meta.image, true), false), ssrAttribute("class", escape(styles().seoPreviewImage, true), false)) : ssr(_tmpl$33, ssrAttribute("class", escape(styles().seoPreviewImage, true), false), "background:#222;color:#888;display:flex;align-items:center;justify-content:center;min-height:80px;width:100%"), ssrAttribute("class", escape(styles().seoPreviewTitle, true), false), escape(props.meta.title) || "No Title", ssrAttribute("class", escape(styles().seoPreviewDesc, true), false), escape(props.meta.description) || "No Description", ssrAttribute("class", escape(styles().seoPreviewUrl, true), false), escape(props.meta.url) || escape(window.location.href));
+  return ssr(_tmpl$7, ssrAttribute("class", escape(styles().seoPreviewCard, true), false), "border-color:" + escape(props.color, true), ssrAttribute("class", escape(styles().seoPreviewHeader, true), false), "color:" + escape(props.color, true), escape(props.network), props.meta.image ? ssr(_tmpl$25, ssrAttribute("src", escape(props.meta.image, true), false), ssrAttribute("class", escape(styles().seoPreviewImage, true), false)) : ssr(_tmpl$34, ssrAttribute("class", escape(styles().seoPreviewImage, true), false), "background:#222;color:#888;display:flex;align-items:center;justify-content:center;min-height:80px;width:100%"), ssrAttribute("class", escape(styles().seoPreviewTitle, true), false), escape(props.meta.title) || "No Title", ssrAttribute("class", escape(styles().seoPreviewDesc, true), false), escape(props.meta.description) || "No Description", ssrAttribute("class", escape(styles().seoPreviewUrl, true), false), escape(props.meta.url) || escape(window.location.href));
 }
 var SeoTab = () => {
   const [reports, setReports] = createSignal(analyzeHead());
@@ -1504,7 +1525,7 @@ var tabs = [{
 // src/components/tabs.tsx
 var _tmpl$8 = ["<div", ">", "", "</div>"];
 var _tmpl$26 = ['<button type="button"', ">", "</button>"];
-var _tmpl$34 = ['<div style="', '"><button type="button"', ">", '</button><button type="button"', ">", "</button></div>"];
+var _tmpl$35 = ['<div style="', '"><button type="button"', ">", '</button><button type="button"', ">", "</button></div>"];
 var Tabs = (props) => {
   const styles = useStyles();
   const {
@@ -1520,7 +1541,7 @@ var Tabs = (props) => {
     children: (tab) => ssr(_tmpl$26, ssrAttribute("class", escape(clsx3(styles().tab, {
       active: state().activeTab === tab.id
     }), true), false), escape(tab.icon()))
-  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$34, "margin-top:auto", ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
+  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$35, "margin-top:auto", ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
 };
 var _tmpl$9 = ["<div", ">", "</div>"];
 var TabContent = () => {

package/dist/devtools/{67YFWU65.js → HKKVBS5C.js}

@@ -1,4 +1,4 @@
-import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/CEHNENNI.js';
+import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/EYSAUXP6.js';
 import { delegateEvents, createComponent, Portal, template, use, setAttribute, insert, memo, effect, className, addEventListener } from 'solid-js/web';
 import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
 import { createShortcut } from '@solid-primitives/keyboard';
@@ -78,24 +78,29 @@ var usePlugins = () => {
   const { store, setStore } = useDevtoolsContext();
   const { setForceExpand } = useDrawContext();
   const plugins = createMemo(() => store.plugins);
-  const activePlugin = createMemo(() => store.state.activePlugin);
+  const activePlugins = createMemo(() => store.state.activePlugins);
   createEffect(() => {
-    if (activePlugin() == null) {
-      setForceExpand(false);
-    } else {
+    if (activePlugins().length === 0) {
       setForceExpand(true);
+    } else {
+      setForceExpand(false);
     }
   });
-  const setActivePlugin = (pluginId) => {
-    setStore((prev) => ({
-      ...prev,
-      state: {
-        ...prev.state,
-        activePlugin: pluginId
-      }
-    }));
+  const toggleActivePlugins = (pluginId) => {
+    setStore((prev) => {
+      const isActive = prev.state.activePlugins.includes(pluginId);
+      const updatedPlugins = isActive ? prev.state.activePlugins.filter((id) => id !== pluginId) : [...prev.state.activePlugins, pluginId];
+      if (updatedPlugins.length > 3) return prev;
+      return {
+        ...prev,
+        state: {
+          ...prev.state,
+          activePlugins: updatedPlugins
+        }
+      };
+    });
   };
-  return { plugins, setActivePlugin, activePlugin };
+  return { plugins, toggleActivePlugins, activePlugins };
 };
 var useDevtoolsState = () => {
   const { store, setStore } = useDevtoolsContext();
@@ -1262,38 +1267,38 @@ var SettingsTab = () => {
     }
   });
 };
-var _tmpl$5 = /* @__PURE__ */ template(`<div><div><div></div></div><div>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div><div><div>`);
 var _tmpl$23 = /* @__PURE__ */ template(`<div><h3>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<div>`);
 var PluginsTab = () => {
   const {
     plugins,
-    activePlugin,
-    setActivePlugin
+    activePlugins,
+    toggleActivePlugins
   } = usePlugins();
   const {
     expanded,
     hoverUtils,
     animationMs
   } = useDrawContext();
-  let activePluginRef;
+  const [pluginRefs, setPluginRefs] = createSignal(/* @__PURE__ */ new Map());
+  const styles = useStyles();
   const {
     theme
   } = useTheme();
   createEffect(() => {
-    const currentActivePlugin = plugins()?.find((plugin) => plugin.id === activePlugin());
-    if (activePluginRef && currentActivePlugin) {
-      currentActivePlugin.render(activePluginRef, theme());
-    }
+    const currentActivePlugins = plugins()?.filter((plugin) => activePlugins().includes(plugin.id));
+    currentActivePlugins?.forEach((plugin) => {
+      const ref = pluginRefs().get(plugin.id);
+      if (ref) {
+        plugin.render(ref, theme());
+      }
+    });
   });
-  const styles = useStyles();
   return (() => {
-    var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
-    _el$2.addEventListener("mouseleave", () => {
-      hoverUtils.leave();
-    });
-    _el$2.addEventListener("mouseenter", () => {
-      hoverUtils.enter();
-    });
+    var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+    _el$2.addEventListener("mouseleave", () => hoverUtils.leave());
+    _el$2.addEventListener("mouseenter", () => hoverUtils.enter());
     insert(_el$3, createComponent(For, {
       get each() {
         return plugins();
@@ -1305,36 +1310,59 @@ var PluginsTab = () => {
             typeof plugin.name === "string" ? pluginHeading.textContent = plugin.name : plugin.name(pluginHeading, theme());
           }
         });
+        const isActive = createMemo(() => activePlugins().includes(plugin.id));
         return (() => {
-          var _el$5 = _tmpl$23(), _el$6 = _el$5.firstChild;
-          _el$5.$$click = () => setActivePlugin(plugin.id);
-          var _ref$2 = pluginHeading;
-          typeof _ref$2 === "function" ? use(_ref$2, _el$6) : pluginHeading = _el$6;
-          setAttribute(_el$6, "id", PLUGIN_TITLE_CONTAINER_ID);
-          effect(() => className(_el$5, clsx3(styles().pluginName, {
-            active: activePlugin() === plugin.id
-          })));
-          return _el$5;
+          var _el$4 = _tmpl$23(), _el$5 = _el$4.firstChild;
+          _el$4.$$click = () => {
+            toggleActivePlugins(plugin.id);
+          };
+          var _ref$ = pluginHeading;
+          typeof _ref$ === "function" ? use(_ref$, _el$5) : pluginHeading = _el$5;
+          effect((_p$) => {
+            var _v$4 = clsx3(styles().pluginName, {
+              active: isActive()
+            }), _v$5 = `${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`;
+            _v$4 !== _p$.e && className(_el$4, _p$.e = _v$4);
+            _v$5 !== _p$.t && setAttribute(_el$5, "id", _p$.t = _v$5);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$4;
         })();
       }
     }));
-    var _ref$ = activePluginRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$4) : activePluginRef = _el$4;
-    setAttribute(_el$4, "id", PLUGIN_CONTAINER_ID);
+    insert(_el$, createComponent(For, {
+      get each() {
+        return activePlugins();
+      },
+      children: (pluginId) => (() => {
+        var _el$6 = _tmpl$33();
+        use((el) => {
+          setPluginRefs((prev) => {
+            const updated = new Map(prev);
+            updated.set(pluginId, el);
+            return updated;
+          });
+        }, _el$6);
+        setAttribute(_el$6, "id", `${PLUGIN_CONTAINER_ID}-${pluginId}`);
+        effect(() => className(_el$6, styles().pluginsTabContent));
+        return _el$6;
+      })()
+    }), null);
     effect((_p$) => {
       var _v$ = styles().pluginsTabPanel, _v$2 = clsx3(styles().pluginsTabDraw(expanded()), {
         [styles().pluginsTabDraw(expanded())]: expanded()
-      }, styles().pluginsTabDrawTransition(animationMs)), _v$3 = clsx3(styles().pluginsTabSidebar(expanded()), styles().pluginsTabSidebarTransition(animationMs)), _v$4 = styles().pluginsTabContent;
+      }, styles().pluginsTabDrawTransition(animationMs)), _v$3 = clsx3(styles().pluginsTabSidebar(expanded()), styles().pluginsTabSidebarTransition(animationMs));
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
       _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0,
-      o: void 0
+      a: void 0
     });
     return _el$;
   })();
@@ -1404,7 +1432,7 @@ function useHeadChanges(onChange, opts = {}) {
 // src/tabs/seo-tab.tsx
 var _tmpl$6 = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`);
 var _tmpl$24 = /* @__PURE__ */ template(`<img alt=Preview>`);
-var _tmpl$33 = /* @__PURE__ */ template(`<div>No Image`);
+var _tmpl$34 = /* @__PURE__ */ template(`<div>No Image`);
 var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$52 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`);
 var _tmpl$62 = /* @__PURE__ */ template(`<li>`);
@@ -1550,7 +1578,7 @@ function SocialPreview(props) {
         });
         return _el$7;
       })() : (() => {
-        var _el$8 = _tmpl$33();
+        var _el$8 = _tmpl$34();
         _el$8.style.setProperty("background", "#222");
         _el$8.style.setProperty("color", "#888");
         _el$8.style.setProperty("display", "flex");
@@ -1713,7 +1741,7 @@ var tabs = [{
 // src/components/tabs.tsx
 var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$25 = /* @__PURE__ */ template(`<button type=button>`);
-var _tmpl$34 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
+var _tmpl$35 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
 var Tabs = (props) => {
   const styles = useStyles();
   const {
@@ -1752,7 +1780,7 @@ var Tabs = (props) => {
     insert(_el$, (() => {
       var _c$ = memo(() => pipWindow().pipWindow !== null);
       return () => _c$() ? null : (() => {
-        var _el$3 = _tmpl$34(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+        var _el$3 = _tmpl$35(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
         _el$3.style.setProperty("margin-top", "auto");
         _el$4.$$click = handleDetachment;
         insert(_el$4, createComponent(PiP, {}));

package/dist/index.d.ts

@@ -72,7 +72,7 @@ type DevtoolsStore = {
     state: {
         activeTab: TabName;
         height: number;
-        activePlugin?: string | undefined;
+        activePlugins: Array<string>;
         persistOpen: boolean;
     };
     plugins?: Array<TanStackDevtoolsPlugin>;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { initialState, DevtoolsProvider, PiPProvider } from './chunk/CEHNENNI.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/CEHNENNI.js';
+import { initialState, DevtoolsProvider, PiPProvider } from './chunk/EYSAUXP6.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/EYSAUXP6.js';
 import { render, createComponent, Portal } from 'solid-js/web';
 import { lazy } from 'solid-js';
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
@@ -29,7 +29,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/67YFWU65.js'));
+      this.#Component = lazy(() => import('./devtools/HKKVBS5C.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/dist/server.js

@@ -1,5 +1,5 @@
-import { initialState } from './chunk/CEHNENNI.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/CEHNENNI.js';
+import { initialState } from './chunk/EYSAUXP6.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/EYSAUXP6.js';
 import 'solid-js/web';
 import 'solid-js';
 import '@tanstack/devtools-event-bus/client';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.6.10",
+  "version": "0.6.11",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/context/devtools-context.test.ts

@@ -0,0 +1,59 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { TANSTACK_DEVTOOLS_STATE } from '../utils/storage'
+import { getStateFromLocalStorage } from './devtools-context'
+
+describe('getStateFromLocalStorage', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+  it('should return undefined when no data in localStorage', () => {
+    const state = getStateFromLocalStorage()
+    expect(state).toEqual(undefined)
+  })
+  it('should return parsed state from localStorage and not remove valid plugins', () => {
+    const mockState = {
+      activePlugins: ['plugin1'],
+      settings: {
+        theme: 'dark',
+      },
+    }
+    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(mockState))
+    const state = getStateFromLocalStorage([
+      {
+        id: 'plugin1',
+        render: () => {},
+        name: 'Plugin 1',
+      },
+    ])
+    expect(state).toEqual(mockState)
+  })
+  it('should filter out inactive plugins', () => {
+    const mockState = {
+      activePlugins: ['plugin1', 'plugin2'],
+      settings: {
+        theme: 'dark',
+      },
+    }
+    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(mockState))
+    const plugins = [{ id: 'plugin1', render: () => {}, name: 'Plugin 1' }]
+    const state = getStateFromLocalStorage(plugins)
+    expect(state?.activePlugins).toEqual(['plugin1'])
+  })
+  it('should return empty plugin state if all active plugins are invalid', () => {
+    const mockState = {
+      activePlugins: ['plugin1', 'plugin2'],
+      settings: {
+        theme: 'dark',
+      },
+    }
+    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(mockState))
+    const plugins = [{ id: 'plugin3', render: () => {}, name: 'Plugin 3' }]
+    const state = getStateFromLocalStorage(plugins)
+    expect(state?.activePlugins).toEqual([])
+  })
+  it('should handle invalid JSON in localStorage gracefully', () => {
+    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, 'invalid json')
+    const state = getStateFromLocalStorage()
+    expect(state).toEqual(undefined)
+  })
+})

package/src/context/devtools-context.tsx

@@ -99,11 +99,35 @@ const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {
   return index.toString()
 }
 
+export function getStateFromLocalStorage(
+  plugins?: Array<TanStackDevtoolsPlugin>,
+) {
+  const existingStateString = getStorageItem(TANSTACK_DEVTOOLS_STATE)
+  const existingState =
+    tryParseJson<DevtoolsStore['state']>(existingStateString)
+  const pluginIds =
+    plugins?.map((plugin, i) => generatePluginId(plugin, i)) || []
+  if (existingState?.activePlugins) {
+    const originalLength = existingState.activePlugins.length
+    // Filter out any active plugins that are no longer available
+    existingState.activePlugins = existingState.activePlugins.filter((id) =>
+      pluginIds.includes(id),
+    )
+
+    if (existingState.activePlugins.length !== originalLength) {
+      // If any active plugins were removed, update local storage
+      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(existingState))
+    }
+  }
+
+  return existingState
+}
+
 const getExistingStateFromStorage = (
   config?: TanStackDevtoolsConfig,
   plugins?: Array<TanStackDevtoolsPlugin>,
 ) => {
-  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)
+  const existingState = getStateFromLocalStorage()
   const settings = getSettings()
 
   const state: DevtoolsStore = {
@@ -118,7 +142,7 @@ const getExistingStateFromStorage = (
       }) || [],
     state: {
       ...initialState.state,
-      ...(existingState ? JSON.parse(existingState) : {}),
+      ...existingState,
     },
     settings: {
       ...initialState.settings,

package/src/context/devtools-store.ts

@@ -65,7 +65,7 @@ export type DevtoolsStore = {
   state: {
     activeTab: TabName
     height: number
-    activePlugin?: string | undefined
+    activePlugins: Array<string>
     persistOpen: boolean
   }
   plugins?: Array<TanStackDevtoolsPlugin>
@@ -82,6 +82,7 @@ export const initialState: DevtoolsStore = {
     urlFlag: 'tanstack-devtools',
     theme:
       typeof window !== 'undefined' &&
+      typeof window.matchMedia !== 'undefined' &&
       window.matchMedia('(prefers-color-scheme: dark)').matches
         ? 'dark'
         : 'light',
@@ -89,7 +90,7 @@ export const initialState: DevtoolsStore = {
   state: {
     activeTab: 'plugins',
     height: 400,
-    activePlugin: undefined,
+    activePlugins: [],
     persistOpen: false,
   },
 }

package/src/context/use-devtools-context.ts

@@ -33,27 +33,35 @@ export const usePlugins = () => {
   const { setForceExpand } = useDrawContext()
 
   const plugins = createMemo(() => store.plugins)
-  const activePlugin = createMemo(() => store.state.activePlugin)
+  const activePlugins = createMemo(() => store.state.activePlugins)
 
   createEffect(() => {
-    if (activePlugin() == null) {
-      setForceExpand(false)
-    } else {
+    if (activePlugins().length === 0) {
       setForceExpand(true)
+    } else {
+      setForceExpand(false)
     }
   })
 
-  const setActivePlugin = (pluginId: string) => {
-    setStore((prev) => ({
-      ...prev,
-      state: {
-        ...prev.state,
-        activePlugin: pluginId,
-      },
-    }))
+  const toggleActivePlugins = (pluginId: string) => {
+    setStore((prev) => {
+      const isActive = prev.state.activePlugins.includes(pluginId)
+
+      const updatedPlugins = isActive
+        ? prev.state.activePlugins.filter((id) => id !== pluginId)
+        : [...prev.state.activePlugins, pluginId]
+      if (updatedPlugins.length > 3) return prev
+      return {
+        ...prev,
+        state: {
+          ...prev.state,
+          activePlugins: updatedPlugins,
+        },
+      }
+    })
   }
 
-  return { plugins, setActivePlugin, activePlugin }
+  return { plugins, toggleActivePlugins, activePlugins }
 }
 
 export const useDevtoolsState = () => {

package/src/tabs/plugins-tab.tsx

@@ -1,4 +1,4 @@
-import { For, createEffect } from 'solid-js'
+import { For, createEffect, createMemo, createSignal } from 'solid-js'
 import clsx from 'clsx'
 import { useDrawContext } from '../context/draw-context'
 import { usePlugins, useTheme } from '../context/use-devtools-context'
@@ -6,20 +6,30 @@ import { useStyles } from '../styles/use-styles'
 import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
 
 export const PluginsTab = () => {
-  const { plugins, activePlugin, setActivePlugin } = usePlugins()
+  const { plugins, activePlugins, toggleActivePlugins } = usePlugins()
   const { expanded, hoverUtils, animationMs } = useDrawContext()
-  let activePluginRef: HTMLDivElement | undefined
+
+  const [pluginRefs, setPluginRefs] = createSignal(
+    new Map<string, HTMLDivElement>(),
+  )
+
+  const styles = useStyles()
 
   const { theme } = useTheme()
   createEffect(() => {
-    const currentActivePlugin = plugins()?.find(
-      (plugin) => plugin.id === activePlugin(),
+    const currentActivePlugins = plugins()?.filter((plugin) =>
+      activePlugins().includes(plugin.id!),
     )
-    if (activePluginRef && currentActivePlugin) {
-      currentActivePlugin.render(activePluginRef, theme())
-    }
+
+    currentActivePlugins?.forEach((plugin) => {
+      const ref = pluginRefs().get(plugin.id!)
+
+      if (ref) {
+        plugin.render(ref, theme())
+      }
+    })
   })
-  const styles = useStyles()
+
   return (
     <div class={styles().pluginsTabPanel}>
       <div
@@ -30,12 +40,8 @@ export const PluginsTab = () => {
           },
           styles().pluginsTabDrawTransition(animationMs),
         )}
-        onMouseEnter={() => {
-          hoverUtils.enter()
-        }}
-        onMouseLeave={() => {
-          hoverUtils.leave()
-        }}
+        onMouseEnter={() => hoverUtils.enter()}
+        onMouseLeave={() => hoverUtils.leave()}
       >
         <div
           class={clsx(
@@ -46,6 +52,7 @@ export const PluginsTab = () => {
           <For each={plugins()}>
             {(plugin) => {
               let pluginHeading: HTMLHeadingElement | undefined
+
               createEffect(() => {
                 if (pluginHeading) {
                   typeof plugin.name === 'string'
@@ -53,14 +60,24 @@ export const PluginsTab = () => {
                     : plugin.name(pluginHeading, theme())
                 }
               })
+
+              const isActive = createMemo(() =>
+                activePlugins().includes(plugin.id!),
+              )
+
               return (
                 <div
-                  onClick={() => setActivePlugin(plugin.id!)}
+                  onClick={() => {
+                    toggleActivePlugins(plugin.id!)
+                  }}
                   class={clsx(styles().pluginName, {
-                    active: activePlugin() === plugin.id,
+                    active: isActive(),
                   })}
                 >
-                  <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />
+                  <h3
+                    id={`${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`}
+                    ref={pluginHeading}
+                  />
                 </div>
               )
             }}
@@ -68,11 +85,21 @@ export const PluginsTab = () => {
         </div>
       </div>
 
-      <div
-        id={PLUGIN_CONTAINER_ID}
-        ref={activePluginRef}
-        class={styles().pluginsTabContent}
-      ></div>
+      <For each={activePlugins()}>
+        {(pluginId) => (
+          <div
+            id={`${PLUGIN_CONTAINER_ID}-${pluginId}`}
+            ref={(el) => {
+              setPluginRefs((prev) => {
+                const updated = new Map(prev)
+                updated.set(pluginId, el)
+                return updated
+              })
+            }}
+            class={styles().pluginsTabContent}
+          />
+        )}
+      </For>
     </div>
   )
 }