@tanstack/devtools 0.6.23 → 0.7.0

package/dist/devtools/{MBQPV7BO.js → JEZZ2PQE.js}

@@ -1,4 +1,4 @@
-import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/XF4JFOLU.js';
+import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter, MAX_ACTIVE_PLUGINS } from '../chunk/VZEY7HNC.js';
 import { createComponent, Portal, ssr, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
 import { createContext, createSignal, createEffect, Show, createMemo, For, useContext, onCleanup, onMount } from 'solid-js';
 import { createShortcut, useKeyDownList } from '@solid-primitives/keyboard';
@@ -94,7 +94,7 @@ var usePlugins = () => {
     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;
+      if (updatedPlugins.length > MAX_ACTIVE_PLUGINS) return prev;
       return {
         ...prev,
         state: {
@@ -1597,6 +1597,75 @@ var stylesFactory = (theme) => {
       text-transform: uppercase;
       letter-spacing: 0.05em;
     `,
+    pluginMarketplaceFeatureBanner: css2`
+      margin-top: 1rem;
+      padding: 1.25rem 1.5rem;
+      background: ${t(
+      "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",
+      "linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%)"
+    )};
+      border-radius: 0.75rem;
+      border: 1px solid ${t(colors.blue[400], colors.blue[800])};
+      box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    `,
+    pluginMarketplaceFeatureBannerContent: css2`
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    `,
+    pluginMarketplaceFeatureBannerTitle: css2`
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: white;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    `,
+    pluginMarketplaceFeatureBannerIcon: css2`
+      width: 24px;
+      height: 24px;
+      display: inline-flex;
+    `,
+    pluginMarketplaceFeatureBannerText: css2`
+      font-size: 0.95rem;
+      color: ${t("rgba(255, 255, 255, 0.95)", "rgba(255, 255, 255, 0.9)")};
+      line-height: 1.5;
+      margin: 0;
+    `,
+    pluginMarketplaceFeatureBannerButton: css2`
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.625rem 1.25rem;
+      background: white;
+      color: ${colors.blue[600]};
+      font-weight: 600;
+      font-size: 0.95rem;
+      border-radius: 0.5rem;
+      border: none;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      text-decoration: none;
+      align-self: flex-start;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+      &:hover {
+        background: ${t(colors.gray[50], colors.gray[100])};
+        transform: translateY(-1px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+    `,
+    pluginMarketplaceFeatureBannerButtonIcon: css2`
+      width: 18px;
+      height: 18px;
+    `,
     pluginMarketplaceCardDisabled: css2`
       opacity: 0.6;
       filter: grayscale(0.3);
@@ -2249,16 +2318,28 @@ var PluginCardComponent = (props) => {
 };
 
 // src/tabs/marketplace/plugin-section.tsx
-var _tmpl$12 = ["<div", ">", "</div>"];
-var _tmpl$25 = ["<div", "><div", "><div", '><div class="', '">', "</div><h3", ">", "</h3></div></div>", "</div>"];
+var _tmpl$12 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>';
+var _tmpl$25 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>';
+var _tmpl$34 = ["<div", "><div", "><h4", "><span", ">", "</span>Want to be featured here?</h4><p", `>If you've built a plugin for TanStack Devtools and would like to showcase it in the featured section, we'd love to hear from you! Reach out to us to discuss partnership opportunities.</p><a href="mailto:partners+devtools@tanstack.com?subject=Featured%20Plugin%20Partnership%20Inquiry"`, "><span", ">", "</span>Contact Us</a></div></div>"];
+var _tmpl$44 = ["<div", ">", "</div>"];
+var _tmpl$53 = ["<div", "><div", "><div", '><div class="', '">', "</div><h3", ">", "</h3></div></div>", "</div>"];
+var StarIcon = () => ssr(_tmpl$12);
+var MailIcon = () => ssr(_tmpl$25);
 var PluginSectionComponent = (props) => {
   const styles = useStyles();
-  return ssr(_tmpl$25, ssrAttribute("class", escape(styles().pluginMarketplaceSection, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeaderLeft, true), false), `${escape(styles().pluginMarketplaceSectionChevron, true) || ""} ${props.isCollapsed() ? escape(escape(styles().pluginMarketplaceSectionChevronCollapsed, true), true) : ""}`, escape(createComponent(ChevronDownIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSectionTitle, true), false), escape(props.section.displayName), escape(createComponent(Show, {
+  return ssr(_tmpl$53, ssrAttribute("class", escape(styles().pluginMarketplaceSection, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeaderLeft, true), false), `${escape(styles().pluginMarketplaceSectionChevron, true) || ""} ${props.isCollapsed() ? escape(escape(styles().pluginMarketplaceSectionChevronCollapsed, true), true) : ""}`, escape(createComponent(ChevronDownIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSectionTitle, true), false), escape(props.section.displayName), escape(createComponent(Show, {
     get when() {
       return !props.isCollapsed();
     },
     get children() {
-      return ssr(_tmpl$12, ssrAttribute("class", escape(styles().pluginMarketplaceGrid, true), false), escape(createComponent(For, {
+      return [createComponent(Show, {
+        get when() {
+          return props.section.id === "featured";
+        },
+        get children() {
+          return ssr(_tmpl$34, ssrAttribute("class", escape(styles().pluginMarketplaceFeatureBanner, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceFeatureBannerContent, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceFeatureBannerTitle, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceFeatureBannerIcon, true), false), escape(createComponent(StarIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceFeatureBannerText, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceFeatureBannerButton, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceFeatureBannerButtonIcon, true), false), escape(createComponent(MailIcon, {})));
+        }
+      }), ssr(_tmpl$44, ssrAttribute("class", escape(styles().pluginMarketplaceGrid, true), false), escape(createComponent(For, {
         get each() {
           return props.section.cards;
         },
@@ -2268,7 +2349,7 @@ var PluginSectionComponent = (props) => {
             return props.onCardAction;
           }
         })
-      })));
+      })))];
     }
   })));
 };
@@ -2467,11 +2548,36 @@ var PLUGIN_REGISTRY = {
     isNew: true,
     // New plugin banner
     tags: ["TanStack"]
-  }
+  },
   // ==========================================
   // THIRD-PARTY PLUGINS - Examples
   // ==========================================
   // External contributors can add their plugins below!
+  // Dimano — Prefetch Heatmap for TanStack Router
+  "@dimano/ts-devtools-plugin-prefetch-heatmap": {
+    packageName: "@dimano/ts-devtools-plugin-prefetch-heatmap",
+    title: "Prefetch Heatmap",
+    description: "Visualize TanStack Router prefetch intent, hits, and waste with a color overlay and a live metrics panel.",
+    requires: {
+      packageName: "@tanstack/react-router",
+      minVersion: "1.0.0"
+    },
+    // default export registers the plugin
+    pluginImport: {
+      importName: "registerPrefetchHeatmapPlugin",
+      type: "function"
+    },
+    // helps the host match your plugin deterministically
+    pluginId: "prefetch-heatmap",
+    // show a nice card in the marketplace
+    logoUrl: "https://raw.githubusercontent.com/dimitrianoudi/tanstack-prefetch-heatmap/main/assets/prefetch-heatmap-card.png",
+    docsUrl: "https://github.com/dimitrianoudi/tanstack-prefetch-heatmap#prefetch-heatmap-devtools-plugin",
+    repoUrl: "https://github.com/dimitrianoudi/tanstack-prefetch-heatmap",
+    author: "Dimitris Anoudis (@dimitrianoudi)",
+    framework: "react",
+    isNew: true,
+    tags: ["Router", "Prefetch", "Analytics", "Overlay", "TanStack"]
+  }
 };
 function getAllPluginMetadata() {
   return Object.values(PLUGIN_REGISTRY);
@@ -2657,6 +2763,15 @@ var buildPluginCards = (pkg, currentFramework, registeredPlugins, existingCards)
 };
 var groupIntoSections = (allCards) => {
   const sections = [];
+  const featuredCards = allCards.filter(
+    (c) => c.metadata?.featured && c.actionType !== "already-installed" && c.isCurrentFramework
+    // Only show featured plugins for current framework
+  );
+  sections.push({
+    id: "featured",
+    displayName: "\u2B50 Featured",
+    cards: featuredCards
+  });
   const activeCards = allCards.filter(
     (c) => c.actionType === "already-installed" && c.isRegistered
   );
@@ -2667,17 +2782,6 @@ var groupIntoSections = (allCards) => {
       cards: activeCards
     });
   }
-  const featuredCards = allCards.filter(
-    (c) => c.metadata?.featured && c.actionType !== "already-installed" && c.isCurrentFramework
-    // Only show featured plugins for current framework
-  );
-  if (featuredCards.length > 0) {
-    sections.push({
-      id: "featured",
-      displayName: "\u2B50 Featured",
-      cards: featuredCards
-    });
-  }
   const availableCards = allCards.filter(
     (c) => c.isCurrentFramework && c.actionType !== "already-installed" && !c.metadata?.featured
     // Not featured (already in featured section)
@@ -2922,7 +3026,7 @@ var PluginMarketplace = () => {
 // src/tabs/plugins-tab.tsx
 var _tmpl$17 = ["<div", "><div", "><div", "><div", ">", "</div><div", "><h3>Add More</h3></div></div></div>", "</div>"];
 var _tmpl$28 = ["<div", '><h3 id="', '"></h3></div>'];
-var _tmpl$34 = ['<div id="', '"', "></div>"];
+var _tmpl$35 = ['<div id="', '"', "></div>"];
 var PluginsTab = () => {
   const {
     plugins,
@@ -2987,7 +3091,7 @@ var PluginsTab = () => {
             get each() {
               return activePlugins();
             },
-            children: (pluginId) => ssr(_tmpl$34, `${escape(PLUGIN_CONTAINER_ID, true)}-${escape(pluginId, true)}`, ssrAttribute("class", escape(styles().pluginsTabContent, true), false))
+            children: (pluginId) => ssr(_tmpl$35, `${escape(PLUGIN_CONTAINER_ID, true)}-${escape(pluginId, true)}`, ssrAttribute("class", escape(styles().pluginsTabContent, true), false))
           });
         },
         get children() {
@@ -3061,9 +3165,9 @@ function useHeadChanges(onChange, opts = {}) {
 // src/tabs/seo-tab.tsx
 var _tmpl$18 = ["<div", ' style="', '"><div', ' style="', '">', " Preview</div>", "<div", ">", "</div><div", ">", "</div><div", ">", "</div></div>"];
 var _tmpl$29 = ["<img", ' alt="Preview"', ">"];
-var _tmpl$35 = ["<div", ' style="', '">No Image</div>'];
-var _tmpl$44 = ["<div", ">", "</div>"];
-var _tmpl$53 = ["<div>", "", "</div>"];
+var _tmpl$36 = ["<div", ' style="', '">No Image</div>'];
+var _tmpl$45 = ["<div", ">", "</div>"];
+var _tmpl$54 = ["<div>", "", "</div>"];
 var _tmpl$63 = ["<div", "><strong>Missing tags for ", ":</strong><ul", ">", "</ul></div>"];
 var _tmpl$72 = ["<li", ">", "</li>"];
 var SOCIALS = [
@@ -3190,7 +3294,7 @@ var SOCIALS = [
 ];
 function SocialPreview(props) {
   const styles = useStyles();
-  return ssr(_tmpl$18, 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$29, ssrAttribute("src", escape(props.meta.image, true), false), ssrAttribute("class", escape(styles().seoPreviewImage, true), false)) : ssr(_tmpl$35, 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$18, 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$29, ssrAttribute("src", escape(props.meta.image, true), false), ssrAttribute("class", escape(styles().seoPreviewImage, true), false)) : ssr(_tmpl$36, 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());
@@ -3235,13 +3339,13 @@ var SeoTab = () => {
             }
           }), createComponent(SectionDescription, {
             children: "See how your current page will look when shared on popular social networks. The tool checks for essential meta tags and highlights any that are missing."
-          }), ssr(_tmpl$44, ssrAttribute("class", escape(styles().seoPreviewSection, true), false), escape(createComponent(For, {
+          }), ssr(_tmpl$45, ssrAttribute("class", escape(styles().seoPreviewSection, true), false), escape(createComponent(For, {
             get each() {
               return reports();
             },
             children: (report, i) => {
               const social = SOCIALS[i()];
-              return ssr(_tmpl$53, escape(createComponent(SocialPreview, {
+              return ssr(_tmpl$54, escape(createComponent(SocialPreview, {
                 get meta() {
                   return report.found;
                 },
@@ -3286,7 +3390,7 @@ var tabs = [{
 // src/components/tabs.tsx
 var _tmpl$19 = ["<div", ">", "", "</div>"];
 var _tmpl$210 = ['<button type="button"', ">", "</button>"];
-var _tmpl$36 = ['<div style="', '"><button type="button"', ">", '</button><button type="button"', ">", "</button></div>"];
+var _tmpl$37 = ['<div style="', '"><button type="button"', ">", '</button><button type="button"', ">", "</button></div>"];
 var Tabs = (props) => {
   const styles = useStyles();
   const {
@@ -3302,7 +3406,7 @@ var Tabs = (props) => {
     children: (tab) => ssr(_tmpl$210, ssrAttribute("class", escape(clsx3(styles().tab, {
       active: state().activeTab === tab.id
     }), true), false), escape(tab.icon()))
-  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$36, "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$37, "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$20 = ["<div", ">", "</div>"];
 var TabContent = () => {

package/dist/index.d.ts

@@ -120,6 +120,12 @@ interface TanStackDevtoolsPlugin {
      * If not provided, it will be generated based on the name.
      */
     id?: string;
+    /**
+     * Whether the plugin should be open by default when there are no active plugins.
+     * If true, this plugin will be added to activePlugins on initial load when activePlugins is empty.
+     * @default false
+     */
+    defaultOpen?: boolean;
     /**
      * Render the plugin UI by using the provided element. This function will be called
      * when the plugin tab is clicked and expected to be mounted.

package/dist/index.js

@@ -1,5 +1,5 @@
-import { initialState, DevtoolsProvider, PiPProvider } from './chunk/XF4JFOLU.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XF4JFOLU.js';
+import { initialState, DevtoolsProvider, PiPProvider } from './chunk/VZEY7HNC.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/VZEY7HNC.js';
 import { render, createComponent, Portal } from 'solid-js/web';
 import { lazy } from 'solid-js';
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
@@ -30,7 +30,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/YRFZDV5N.js'));
+      this.#Component = lazy(() => import('./devtools/7NDEDZB7.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/XF4JFOLU.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XF4JFOLU.js';
+import { initialState } from './chunk/VZEY7HNC.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/VZEY7HNC.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.23",
+  "version": "0.7.0",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -56,8 +56,8 @@
     "goober": "^2.1.16",
     "solid-js": "^1.9.9",
     "@tanstack/devtools-client": "0.0.3",
-    "@tanstack/devtools-event-bus": "0.3.3",
-    "@tanstack/devtools-ui": "0.4.4"
+    "@tanstack/devtools-ui": "0.4.4",
+    "@tanstack/devtools-event-bus": "0.3.3"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"

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

@@ -1,6 +1,10 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 import { TANSTACK_DEVTOOLS_STATE } from '../utils/storage'
-import { getStateFromLocalStorage } from './devtools-context'
+import {
+  getExistingStateFromStorage,
+  getStateFromLocalStorage,
+} from './devtools-context'
+import type { TanStackDevtoolsPlugin } from './devtools-context'
 
 describe('getStateFromLocalStorage', () => {
   beforeEach(() => {
@@ -56,4 +60,267 @@ describe('getStateFromLocalStorage', () => {
     const state = getStateFromLocalStorage(undefined)
     expect(state).toEqual(undefined)
   })
+
+  it('should return undefined when no localStorage state exists (allowing defaultOpen to be applied)', () => {
+    // No existing state in localStorage - this allows defaultOpen logic to trigger
+    const plugins: Array<TanStackDevtoolsPlugin> = [
+      {
+        id: 'plugin1',
+        render: () => {},
+        name: 'Plugin 1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        render: () => {},
+        name: 'Plugin 2',
+        defaultOpen: false,
+      },
+      {
+        id: 'plugin3',
+        render: () => {},
+        name: 'Plugin 3',
+        defaultOpen: true,
+      },
+    ]
+
+    // When undefined is returned, getExistingStateFromStorage will fill activePlugins with defaultOpen plugins
+    const state = getStateFromLocalStorage(plugins)
+    expect(state).toEqual(undefined)
+  })
+
+  it('should preserve existing activePlugins from localStorage (defaultOpen should not override)', () => {
+    const mockState = {
+      activePlugins: ['plugin2'],
+      settings: {
+        theme: 'dark',
+      },
+    }
+    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(mockState))
+
+    const plugins: Array<TanStackDevtoolsPlugin> = [
+      {
+        id: 'plugin1',
+        render: () => {},
+        name: 'Plugin 1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        render: () => {},
+        name: 'Plugin 2',
+        defaultOpen: false,
+      },
+    ]
+
+    const state = getStateFromLocalStorage(plugins)
+    // Should keep existing activePlugins - defaultOpen logic won't override in getExistingStateFromStorage
+    expect(state?.activePlugins).toEqual(['plugin2'])
+  })
+
+  it('should automatically activate a single plugin when no active plugins exist', () => {
+    // No existing state in localStorage
+    const plugins: Array<TanStackDevtoolsPlugin> = [
+      {
+        id: 'only-plugin',
+        render: () => {},
+        name: 'Only Plugin',
+      },
+    ]
+
+    const state = getStateFromLocalStorage(plugins)
+    // Should return undefined - the single plugin activation happens in getExistingStateFromStorage
+    expect(state).toEqual(undefined)
+  })
+})
+
+describe('getExistingStateFromStorage - integration tests', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('should automatically activate a single plugin when no localStorage state exists', () => {
+    const plugins: Array<TanStackDevtoolsPlugin> = [
+      {
+        id: 'only-plugin',
+        render: () => {},
+        name: 'Only Plugin',
+      },
+    ]
+
+    const state = getExistingStateFromStorage(undefined, plugins)
+    expect(state.state.activePlugins).toEqual(['only-plugin'])
+    expect(state.plugins).toHaveLength(1)
+    expect(state.plugins![0]?.id).toBe('only-plugin')
+  })
+
+  it('should activate plugins with defaultOpen: true when no localStorage state exists', () => {
+    const plugins: Array<TanStackDevtoolsPlugin> = [
+      {
+        id: 'plugin1',
+        render: () => {},
+        name: 'Plugin 1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        render: () => {},
+        name: 'Plugin 2',
+        defaultOpen: false,
+      },
+      {
+        id: 'plugin3',
+        render: () => {},
+        name: 'Plugin 3',
+        defaultOpen: true,
+      },
+    ]
+
+    const state = getExistingStateFromStorage(undefined, plugins)
+    expect(state.state.activePlugins).toEqual(['plugin1', 'plugin3'])
+    expect(state.plugins).toHaveLength(3)
+  })
+
+  it('should limit defaultOpen plugins to MAX_ACTIVE_PLUGINS (3) when 5 have defaultOpen: true', () => {
+    const plugins: Array<TanStackDevtoolsPlugin> = [
+      {
+        id: 'plugin1',
+        render: () => {},
+        name: 'Plugin 1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        render: () => {},
+        name: 'Plugin 2',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin3',
+        render: () => {},
+        name: 'Plugin 3',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin4',
+        render: () => {},
+        name: 'Plugin 4',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin5',
+        render: () => {},
+        name: 'Plugin 5',
+        defaultOpen: true,
+      },
+    ]
+
+    const state = getExistingStateFromStorage(undefined, plugins)
+    // Should only activate first 3 plugins
+    expect(state.state.activePlugins).toEqual(['plugin1', 'plugin2', 'plugin3'])
+    expect(state.state.activePlugins).toHaveLength(3)
+    expect(state.state.activePlugins).not.toContain('plugin4')
+    expect(state.state.activePlugins).not.toContain('plugin5')
+    // All 5 plugins should still be in the plugins array
+    expect(state.plugins).toHaveLength(5)
+  })
+
+  it('should preserve existing activePlugins from localStorage even when plugins have defaultOpen', () => {
+    const mockState = {
+      activePlugins: ['plugin2', 'plugin4'],
+      settings: {
+        theme: 'dark',
+      },
+    }
+    localStorage.setItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(mockState))
+
+    const plugins: Array<TanStackDevtoolsPlugin> = [
+      {
+        id: 'plugin1',
+        render: () => {},
+        name: 'Plugin 1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        render: () => {},
+        name: 'Plugin 2',
+        defaultOpen: false,
+      },
+      {
+        id: 'plugin3',
+        render: () => {},
+        name: 'Plugin 3',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin4',
+        render: () => {},
+        name: 'Plugin 4',
+        defaultOpen: false,
+      },
+    ]
+
+    const state = getExistingStateFromStorage(undefined, plugins)
+    // Should preserve the localStorage state, not use defaultOpen
+    expect(state.state.activePlugins).toEqual(['plugin2', 'plugin4'])
+    expect(state.plugins).toHaveLength(4)
+  })
+
+  it('should return empty activePlugins when no defaultOpen and multiple plugins', () => {
+    const plugins: Array<TanStackDevtoolsPlugin> = [
+      {
+        id: 'plugin1',
+        render: () => {},
+        name: 'Plugin 1',
+      },
+      {
+        id: 'plugin2',
+        render: () => {},
+        name: 'Plugin 2',
+      },
+      {
+        id: 'plugin3',
+        render: () => {},
+        name: 'Plugin 3',
+      },
+    ]
+
+    const state = getExistingStateFromStorage(undefined, plugins)
+    expect(state.state.activePlugins).toEqual([])
+    expect(state.plugins).toHaveLength(3)
+  })
+
+  it('should handle single plugin with defaultOpen: false by activating it anyway', () => {
+    const plugins: Array<TanStackDevtoolsPlugin> = [
+      {
+        id: 'only-plugin',
+        render: () => {},
+        name: 'Only Plugin',
+        defaultOpen: false,
+      },
+    ]
+
+    const state = getExistingStateFromStorage(undefined, plugins)
+    // Single plugin should be activated regardless of defaultOpen flag
+    expect(state.state.activePlugins).toEqual(['only-plugin'])
+  })
+
+  it('should merge config settings into the returned state', () => {
+    const plugins: Array<TanStackDevtoolsPlugin> = [
+      {
+        id: 'plugin1',
+        render: () => {},
+        name: 'Plugin 1',
+      },
+    ]
+
+    const config = {
+      theme: 'light' as const,
+    }
+
+    const state = getExistingStateFromStorage(config as any, plugins)
+    expect(state.settings.theme).toBe('light')
+    expect(state.state.activePlugins).toEqual(['plugin1'])
+  })
 })