@tanstack/devtools 0.6.23 → 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/YRFZDV5N.js'));
+      this.#Component = lazy(() => import('./devtools/7NDEDZB7.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/dist/devtools/{YRFZDV5N.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: {
@@ -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);
@@ -2438,46 +2507,82 @@ var PluginCardComponent = (props) => {
 };
 
 // src/tabs/marketplace/plugin-section.tsx
-var _tmpl$10 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$24 = /* @__PURE__ */ template(`<div><div><div><div></div><h3>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<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">`);
+var _tmpl$24 = /* @__PURE__ */ template(`<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">`);
+var _tmpl$34 = /* @__PURE__ */ template(`<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`);
+var _tmpl$43 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$53 = /* @__PURE__ */ template(`<div><div><div><div></div><h3>`);
+var StarIcon = () => _tmpl$10();
+var MailIcon = () => _tmpl$24();
 var PluginSectionComponent = (props) => {
   const styles = useStyles();
   return (() => {
-    var _el$ = _tmpl$24(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
-    addEventListener(_el$2, "click", props.onToggleCollapse, true);
-    insert(_el$4, createComponent(ChevronDownIcon, {}));
-    insert(_el$5, () => props.section.displayName);
-    insert(_el$, createComponent(Show, {
+    var _el$3 = _tmpl$53(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+    addEventListener(_el$4, "click", props.onToggleCollapse, true);
+    insert(_el$6, createComponent(ChevronDownIcon, {}));
+    insert(_el$7, () => props.section.displayName);
+    insert(_el$3, createComponent(Show, {
       get when() {
         return !props.isCollapsed();
       },
       get children() {
-        var _el$6 = _tmpl$10();
-        insert(_el$6, createComponent(For, {
-          get each() {
-            return props.section.cards;
+        return [createComponent(Show, {
+          get when() {
+            return props.section.id === "featured";
           },
-          children: (card) => createComponent(PluginCardComponent, {
-            card,
-            get onAction() {
-              return props.onCardAction;
-            }
-          })
-        }));
-        effect(() => className(_el$6, styles().pluginMarketplaceGrid));
-        return _el$6;
+          get children() {
+            var _el$8 = _tmpl$34(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$0.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.firstChild;
+            insert(_el$1, createComponent(StarIcon, {}));
+            insert(_el$12, createComponent(MailIcon, {}));
+            effect((_p$) => {
+              var _v$ = styles().pluginMarketplaceFeatureBanner, _v$2 = styles().pluginMarketplaceFeatureBannerContent, _v$3 = styles().pluginMarketplaceFeatureBannerTitle, _v$4 = styles().pluginMarketplaceFeatureBannerIcon, _v$5 = styles().pluginMarketplaceFeatureBannerText, _v$6 = styles().pluginMarketplaceFeatureBannerButton, _v$7 = styles().pluginMarketplaceFeatureBannerButtonIcon;
+              _v$ !== _p$.e && className(_el$8, _p$.e = _v$);
+              _v$2 !== _p$.t && className(_el$9, _p$.t = _v$2);
+              _v$3 !== _p$.a && className(_el$0, _p$.a = _v$3);
+              _v$4 !== _p$.o && className(_el$1, _p$.o = _v$4);
+              _v$5 !== _p$.i && className(_el$10, _p$.i = _v$5);
+              _v$6 !== _p$.n && className(_el$11, _p$.n = _v$6);
+              _v$7 !== _p$.s && className(_el$12, _p$.s = _v$7);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0,
+              n: void 0,
+              s: void 0
+            });
+            return _el$8;
+          }
+        }), (() => {
+          var _el$13 = _tmpl$43();
+          insert(_el$13, createComponent(For, {
+            get each() {
+              return props.section.cards;
+            },
+            children: (card) => createComponent(PluginCardComponent, {
+              card,
+              get onAction() {
+                return props.onCardAction;
+              }
+            })
+          }));
+          effect(() => className(_el$13, styles().pluginMarketplaceGrid));
+          return _el$13;
+        })()];
       }
     }), null);
     effect((_p$) => {
-      var _v$ = styles().pluginMarketplaceSection, _v$2 = styles().pluginMarketplaceSectionHeader, _v$3 = styles().pluginMarketplaceSectionHeaderLeft, _v$4 = styles().pluginMarketplaceSectionChevron, _v$5 = {
+      var _v$8 = styles().pluginMarketplaceSection, _v$9 = styles().pluginMarketplaceSectionHeader, _v$0 = styles().pluginMarketplaceSectionHeaderLeft, _v$1 = styles().pluginMarketplaceSectionChevron, _v$10 = {
         [styles().pluginMarketplaceSectionChevronCollapsed]: props.isCollapsed()
-      }, _v$6 = styles().pluginMarketplaceSectionTitle;
-      _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);
-      _p$.i = classList(_el$4, _v$5, _p$.i);
-      _v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
+      }, _v$11 = styles().pluginMarketplaceSectionTitle;
+      _v$8 !== _p$.e && className(_el$3, _p$.e = _v$8);
+      _v$9 !== _p$.t && className(_el$4, _p$.t = _v$9);
+      _v$0 !== _p$.a && className(_el$5, _p$.a = _v$0);
+      _v$1 !== _p$.o && className(_el$6, _p$.o = _v$1);
+      _p$.i = classList(_el$6, _v$10, _p$.i);
+      _v$11 !== _p$.n && className(_el$7, _p$.n = _v$11);
       return _p$;
     }, {
       e: void 0,
@@ -2487,7 +2592,7 @@ var PluginSectionComponent = (props) => {
       i: void 0,
       n: void 0
     });
-    return _el$;
+    return _el$3;
   })();
 };
 delegateEvents(["click"]);
@@ -2757,11 +2862,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);
@@ -2947,6 +3077,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
   );
@@ -2957,17 +3096,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)
@@ -3234,7 +3362,7 @@ var PluginMarketplace = () => {
 // src/tabs/plugins-tab.tsx
 var _tmpl$15 = /* @__PURE__ */ template(`<div><div><div><div></div><div><h3>Add More`);
 var _tmpl$27 = /* @__PURE__ */ template(`<div><h3>`);
-var _tmpl$34 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$35 = /* @__PURE__ */ template(`<div>`);
 var PluginsTab = () => {
   const {
     plugins,
@@ -3331,7 +3459,7 @@ var PluginsTab = () => {
               return activePlugins();
             },
             children: (pluginId) => (() => {
-              var _el$8 = _tmpl$34();
+              var _el$8 = _tmpl$35();
               use((el) => {
                 setPluginRefs((prev) => {
                   const updated = new Map(prev);
@@ -3437,9 +3565,9 @@ function useHeadChanges(onChange, opts = {}) {
 // src/tabs/seo-tab.tsx
 var _tmpl$16 = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`);
 var _tmpl$28 = /* @__PURE__ */ template(`<img alt=Preview>`);
-var _tmpl$35 = /* @__PURE__ */ template(`<div>No Image`);
-var _tmpl$43 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$53 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<div>No Image`);
+var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$54 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`);
 var _tmpl$62 = /* @__PURE__ */ template(`<li>`);
 var SOCIALS = [
   {
@@ -3583,7 +3711,7 @@ function SocialPreview(props) {
         });
         return _el$7;
       })() : (() => {
-        var _el$8 = _tmpl$35();
+        var _el$8 = _tmpl$36();
         _el$8.style.setProperty("background", "#222");
         _el$8.style.setProperty("color", "#888");
         _el$8.style.setProperty("display", "flex");
@@ -3664,7 +3792,7 @@ 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."
           }), (() => {
-            var _el$9 = _tmpl$43();
+            var _el$9 = _tmpl$44();
             insert(_el$9, createComponent(For, {
               get each() {
                 return reports();
@@ -3672,7 +3800,7 @@ var SeoTab = () => {
               children: (report, i) => {
                 const social = SOCIALS[i()];
                 return (() => {
-                  var _el$0 = _tmpl$43();
+                  var _el$0 = _tmpl$44();
                   insert(_el$0, createComponent(SocialPreview, {
                     get meta() {
                       return report.found;
@@ -3687,7 +3815,7 @@ var SeoTab = () => {
                   insert(_el$0, (() => {
                     var _c$2 = memo(() => report.missing.length > 0);
                     return () => _c$2() ? (() => {
-                      var _el$1 = _tmpl$53(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$13 = _el$11.nextSibling; _el$13.nextSibling; var _el$14 = _el$10.nextSibling;
+                      var _el$1 = _tmpl$54(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$13 = _el$11.nextSibling; _el$13.nextSibling; var _el$14 = _el$10.nextSibling;
                       insert(_el$10, () => social?.network, _el$13);
                       insert(_el$14, createComponent(For, {
                         get each() {
@@ -3746,7 +3874,7 @@ var tabs = [{
 // src/components/tabs.tsx
 var _tmpl$17 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$29 = /* @__PURE__ */ template(`<button type=button>`);
-var _tmpl$36 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
+var _tmpl$37 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
 var Tabs = (props) => {
   const styles = useStyles();
   const {
@@ -3785,7 +3913,7 @@ var Tabs = (props) => {
     insert(_el$, (() => {
       var _c$ = memo(() => pipWindow().pipWindow !== null);
       return () => _c$() ? null : (() => {
-        var _el$3 = _tmpl$36(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+        var _el$3 = _tmpl$37(), _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, {}));