@tanstack/devtools 0.6.24 → 0.7.0

package/dist/chunk/{XF4JFOLU.js → VZEY7HNC.js}

@@ -182,6 +182,22 @@ var usePiPWindow = () => {
   });
   return context;
 };
+
+// src/utils/constants.ts
+var MAX_ACTIVE_PLUGINS = 3;
+
+// src/utils/get-default-active-plugins.ts
+function getDefaultActivePlugins(plugins) {
+  if (plugins.length === 0) {
+    return [];
+  }
+  if (plugins.length === 1) {
+    return [plugins[0].id];
+  }
+  return plugins.filter((plugin) => plugin.defaultOpen === true).slice(0, MAX_ACTIVE_PLUGINS).map((plugin) => plugin.id);
+}
+
+// src/context/devtools-context.tsx
 var DevtoolsContext = createContext();
 var getSettings = () => {
   const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS);
@@ -215,18 +231,25 @@ function getStateFromLocalStorage(plugins) {
 var getExistingStateFromStorage = (config, plugins) => {
   const existingState = getStateFromLocalStorage(plugins);
   const settings = getSettings();
+  const pluginsWithIds = plugins?.map((plugin, i) => {
+    const id = generatePluginId(plugin, i);
+    return {
+      ...plugin,
+      id
+    };
+  }) || [];
+  let activePlugins = existingState?.activePlugins || [];
+  const shouldFillWithDefaultOpenPlugins = activePlugins.length === 0 && pluginsWithIds.length > 0;
+  if (shouldFillWithDefaultOpenPlugins) {
+    activePlugins = getDefaultActivePlugins(pluginsWithIds);
+  }
   const state = {
     ...initialState,
-    plugins: plugins?.map((plugin, i) => {
-      const id = generatePluginId(plugin, i);
-      return {
-        ...plugin,
-        id
-      };
-    }) || [],
+    plugins: pluginsWithIds,
     state: {
       ...initialState.state,
-      ...existingState
+      ...existingState,
+      activePlugins
     },
     settings: {
       ...initialState.settings,
@@ -277,4 +300,4 @@ var DevtoolsProvider = (props) => {
   });
 };
 
-export { DevtoolsContext, DevtoolsProvider, PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID, PiPProvider, TANSTACK_DEVTOOLS, getAllPermutations, initialState, keyboardModifiers, uppercaseFirstLetter, usePiPWindow };
+export { DevtoolsContext, DevtoolsProvider, MAX_ACTIVE_PLUGINS, PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID, PiPProvider, TANSTACK_DEVTOOLS, getAllPermutations, initialState, keyboardModifiers, uppercaseFirstLetter, usePiPWindow };

package/dist/dev.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/UUNAZSBD.js'));
+      this.#Component = lazy(() => import('./devtools/7NDEDZB7.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/dist/devtools/{UUNAZSBD.js → 7NDEDZB7.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 { delegateEvents, createComponent, Portal, template, use, setAttribute, insert, memo, effect, className, addEventListener, style, classList } 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: {

package/dist/devtools/{OBIHU6L6.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: {

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/UUNAZSBD.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.24",
+  "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'])
+  })
 })

package/src/context/devtools-context.tsx

@@ -1,5 +1,6 @@
 import { createContext, createEffect } from 'solid-js'
 import { createStore } from 'solid-js/store'
+import { getDefaultActivePlugins } from '../utils/get-default-active-plugins'
 import { tryParseJson } from '../utils/sanitize'
 import {
   TANSTACK_DEVTOOLS_SETTINGS,
@@ -49,6 +50,12 @@ export 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.
@@ -127,26 +134,39 @@ export function getStateFromLocalStorage(
   return existingState
 }
 
-const getExistingStateFromStorage = (
+export const getExistingStateFromStorage = (
   config?: TanStackDevtoolsConfig,
   plugins?: Array<TanStackDevtoolsPlugin>,
 ) => {
   const existingState = getStateFromLocalStorage(plugins)
   const settings = getSettings()
 
+  const pluginsWithIds =
+    plugins?.map((plugin, i) => {
+      const id = generatePluginId(plugin, i)
+      return {
+        ...plugin,
+        id,
+      }
+    }) || []
+
+  // If no active plugins exist, add plugins with defaultOpen: true
+  // Or if there's only 1 plugin, activate it automatically
+  let activePlugins = existingState?.activePlugins || []
+
+  const shouldFillWithDefaultOpenPlugins =
+    activePlugins.length === 0 && pluginsWithIds.length > 0
+  if (shouldFillWithDefaultOpenPlugins) {
+    activePlugins = getDefaultActivePlugins(pluginsWithIds)
+  }
+
   const state: DevtoolsStore = {
     ...initialState,
-    plugins:
-      plugins?.map((plugin, i) => {
-        const id = generatePluginId(plugin, i)
-        return {
-          ...plugin,
-          id,
-        }
-      }) || [],
+    plugins: pluginsWithIds,
     state: {
       ...initialState.state,
       ...existingState,
+      activePlugins,
     },
     settings: {
       ...initialState.settings,

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

@@ -1,4 +1,5 @@
 import { createEffect, createMemo, useContext } from 'solid-js'
+import { MAX_ACTIVE_PLUGINS } from '../utils/constants.js'
 import { DevtoolsContext } from './devtools-context.jsx'
 import { useDrawContext } from './draw-context.jsx'
 
@@ -50,7 +51,7 @@ export const usePlugins = () => {
       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: {

package/src/utils/constants.ts

@@ -0,0 +1,4 @@
+/**
+ * Maximum number of plugins that can be active simultaneously in the devtools
+ */
+export const MAX_ACTIVE_PLUGINS = 3

package/src/utils/get-default-active-plugins.test.ts

@@ -0,0 +1,194 @@
+import { describe, expect, it } from 'vitest'
+import { getDefaultActivePlugins } from './get-default-active-plugins'
+import type { PluginWithId } from './get-default-active-plugins'
+
+describe('getDefaultActivePlugins', () => {
+  it('should return empty array when no plugins provided', () => {
+    const result = getDefaultActivePlugins([])
+    expect(result).toEqual([])
+  })
+
+  it('should automatically activate a single plugin', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'only-plugin',
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual(['only-plugin'])
+  })
+
+  it('should automatically activate a single plugin even if defaultOpen is false', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'only-plugin',
+        defaultOpen: false,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual(['only-plugin'])
+  })
+
+  it('should return empty array when multiple plugins without defaultOpen', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+      },
+      {
+        id: 'plugin2',
+      },
+      {
+        id: 'plugin3',
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual([])
+  })
+
+  it('should activate plugins with defaultOpen: true', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        defaultOpen: false,
+      },
+      {
+        id: 'plugin3',
+        defaultOpen: true,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual(['plugin1', 'plugin3'])
+  })
+
+  it('should limit defaultOpen plugins to MAX_ACTIVE_PLUGINS (3)', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin3',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin4',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin5',
+        defaultOpen: true,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    // Should only return first 3
+    expect(result).toEqual(['plugin1', 'plugin2', 'plugin3'])
+    expect(result.length).toBe(3)
+  })
+
+  it('should activate exactly MAX_ACTIVE_PLUGINS when that many have defaultOpen', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin3',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin4',
+        defaultOpen: false,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual(['plugin1', 'plugin2', 'plugin3'])
+    expect(result.length).toBe(3)
+  })
+
+  it('should handle mix of defaultOpen true/false/undefined', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        // undefined defaultOpen
+      },
+      {
+        id: 'plugin3',
+        defaultOpen: false,
+      },
+      {
+        id: 'plugin4',
+        defaultOpen: true,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    // Only plugin1 and plugin4 have defaultOpen: true
+    expect(result).toEqual(['plugin1', 'plugin4'])
+  })
+
+  it('should return single plugin even if it has defaultOpen: true', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'only-plugin',
+        defaultOpen: true,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    expect(result).toEqual(['only-plugin'])
+  })
+
+  it('should stop at MAX_ACTIVE_PLUGINS limit when 5 plugins have defaultOpen: true', () => {
+    const plugins: Array<PluginWithId> = [
+      {
+        id: 'plugin1',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin2',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin3',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin4',
+        defaultOpen: true,
+      },
+      {
+        id: 'plugin5',
+        defaultOpen: true,
+      },
+    ]
+
+    const result = getDefaultActivePlugins(plugins)
+    // Should only activate the first 3, plugin4 and plugin5 should be ignored
+    expect(result).toEqual(['plugin1', 'plugin2', 'plugin3'])
+    expect(result.length).toBe(3)
+    expect(result).not.toContain('plugin4')
+    expect(result).not.toContain('plugin5')
+  })
+})

package/src/utils/get-default-active-plugins.ts

@@ -0,0 +1,36 @@
+import { MAX_ACTIVE_PLUGINS } from './constants'
+
+export interface PluginWithId {
+  id: string
+  defaultOpen?: boolean
+}
+
+/**
+ * Determines which plugins should be active by default when no plugins are currently active.
+ *
+ * Rules:
+ * 1. If there's only 1 plugin, activate it automatically
+ * 2. If there are multiple plugins, activate those with defaultOpen: true (up to MAX_ACTIVE_PLUGINS limit)
+ * 3. If no plugins have defaultOpen: true, return empty array
+ *
+ * @param plugins - Array of plugins with IDs
+ * @returns Array of plugin IDs that should be active by default
+ */
+export function getDefaultActivePlugins(
+  plugins: Array<PluginWithId>,
+): Array<string> {
+  if (plugins.length === 0) {
+    return []
+  }
+
+  // If there's only 1 plugin, activate it automatically
+  if (plugins.length === 1) {
+    return [plugins[0]!.id]
+  }
+
+  // Otherwise, activate plugins with defaultOpen: true (up to the limit)
+  return plugins
+    .filter((plugin) => plugin.defaultOpen === true)
+    .slice(0, MAX_ACTIVE_PLUGINS)
+    .map((plugin) => plugin.id)
+}