@tanstack/devtools 0.6.22 → 0.6.24

package/dist/dev.js

@@ -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/UUNAZSBD.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

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

@@ -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/devtools/{YRFZDV5N.js → UUNAZSBD.js}

@@ -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, {}));

package/dist/index.js

@@ -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/UUNAZSBD.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.6.22",
+  "version": "0.6.24",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "solid-js": "^1.9.9",
     "@tanstack/devtools-client": "0.0.3",
     "@tanstack/devtools-event-bus": "0.3.3",
-    "@tanstack/devtools-ui": "0.4.3"
+    "@tanstack/devtools-ui": "0.4.4"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"

package/src/styles/use-styles.ts

@@ -1168,6 +1168,75 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       text-transform: uppercase;
       letter-spacing: 0.05em;
     `,
+    pluginMarketplaceFeatureBanner: css`
+      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: css`
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    `,
+    pluginMarketplaceFeatureBannerTitle: css`
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: white;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    `,
+    pluginMarketplaceFeatureBannerIcon: css`
+      width: 24px;
+      height: 24px;
+      display: inline-flex;
+    `,
+    pluginMarketplaceFeatureBannerText: css`
+      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: css`
+      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: css`
+      width: 18px;
+      height: 18px;
+    `,
     pluginMarketplaceCardDisabled: css`
       opacity: 0.6;
       filter: grayscale(0.3);

package/src/tabs/marketplace/plugin-section.tsx

@@ -12,6 +12,31 @@ interface PluginSectionComponentProps {
   onCardAction: (card: PluginCard) => void
 }
 
+const StarIcon = () => (
+  <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" />
+  </svg>
+)
+
+const MailIcon = () => (
+  <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" />
+    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+  </svg>
+)
+
 export const PluginSectionComponent = (props: PluginSectionComponentProps) => {
   const styles = useStyles()
 
@@ -38,6 +63,33 @@ export const PluginSectionComponent = (props: PluginSectionComponentProps) => {
       </div>
 
       <Show when={!props.isCollapsed()}>
+        <Show when={props.section.id === 'featured'}>
+          <div class={styles().pluginMarketplaceFeatureBanner}>
+            <div class={styles().pluginMarketplaceFeatureBannerContent}>
+              <h4 class={styles().pluginMarketplaceFeatureBannerTitle}>
+                <span class={styles().pluginMarketplaceFeatureBannerIcon}>
+                  <StarIcon />
+                </span>
+                Want to be featured here?
+              </h4>
+              <p class={styles().pluginMarketplaceFeatureBannerText}>
+                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"
+                class={styles().pluginMarketplaceFeatureBannerButton}
+              >
+                <span class={styles().pluginMarketplaceFeatureBannerButtonIcon}>
+                  <MailIcon />
+                </span>
+                Contact Us
+              </a>
+            </div>
+          </div>
+        </Show>
+
         <div class={styles().pluginMarketplaceGrid}>
           <For each={props.section.cards}>
             {(card) => (

package/src/tabs/marketplace/plugin-utils.test.ts

@@ -223,10 +223,11 @@ describe('groupIntoSections', () => {
 
     const sections = groupIntoSections(cards)
 
-    expect(sections).toHaveLength(1)
-    expect(sections[0]?.id).toBe('active')
-    expect(sections[0]?.displayName).toBe('✓ Active Plugins')
-    expect(sections[0]?.cards).toHaveLength(1)
+    expect(sections).toHaveLength(2) // Featured (always present) + Active
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[1]?.id).toBe('active')
+    expect(sections[1]?.displayName).toBe('✓ Active Plugins')
+    expect(sections[1]?.cards).toHaveLength(1)
   })
 
   it('should group featured plugins', () => {
@@ -266,9 +267,11 @@ describe('groupIntoSections', () => {
 
     const sections = groupIntoSections(cards)
 
-    expect(sections).toHaveLength(1)
-    expect(sections[0]?.id).toBe('active')
-    expect(sections.find((s) => s.id === 'featured')).toBeUndefined()
+    expect(sections).toHaveLength(2) // Featured (always present) + Active
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[1]?.id).toBe('active')
+    expect(sections[0]?.cards).toHaveLength(0) // Featured section empty
+    expect(sections[1]?.cards).toHaveLength(1) // Active has the plugin
   })
 
   it('should group available plugins', () => {
@@ -286,9 +289,10 @@ describe('groupIntoSections', () => {
 
     const sections = groupIntoSections(cards)
 
-    expect(sections).toHaveLength(1)
-    expect(sections[0]?.id).toBe('available')
-    expect(sections[0]?.displayName).toBe('Available Plugins')
+    expect(sections).toHaveLength(2) // Featured (always present) + Available
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[1]?.id).toBe('available')
+    expect(sections[1]?.displayName).toBe('Available Plugins')
   })
 
   it('should not include featured plugins in available section', () => {
@@ -345,8 +349,8 @@ describe('groupIntoSections', () => {
     const sections = groupIntoSections(cards)
 
     expect(sections).toHaveLength(3)
-    expect(sections[0]?.id).toBe('active')
-    expect(sections[1]?.id).toBe('featured')
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[1]?.id).toBe('active')
     expect(sections[2]?.id).toBe('available')
   })
 
@@ -365,12 +369,16 @@ describe('groupIntoSections', () => {
 
     const sections = groupIntoSections(cards)
 
-    expect(sections).toHaveLength(0)
+    expect(sections).toHaveLength(1) // Only featured section (always present, empty)
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[0]?.cards).toHaveLength(0)
   })
 
   it('should handle empty card array', () => {
     const sections = groupIntoSections([])
-    expect(sections).toHaveLength(0)
+    expect(sections).toHaveLength(1) // Featured section always present
+    expect(sections[0]?.id).toBe('featured')
+    expect(sections[0]?.cards).toHaveLength(0)
   })
 })
 

package/src/tabs/marketplace/plugin-utils.ts

@@ -201,6 +201,20 @@ export const groupIntoSections = (
 ): Array<PluginSection> => {
   const sections: Array<PluginSection> = []
 
+  // Add Featured section first - always show this section
+  const featuredCards = allCards.filter(
+    (c) =>
+      c.metadata?.featured &&
+      c.actionType !== 'already-installed' &&
+      c.isCurrentFramework, // Only show featured plugins for current framework
+  )
+  // Always add featured section, even if no cards to show the partner banner
+  sections.push({
+    id: 'featured',
+    displayName: '⭐ Featured',
+    cards: featuredCards,
+  })
+
   // Add Active Plugins section
   const activeCards = allCards.filter(
     (c) => c.actionType === 'already-installed' && c.isRegistered,
@@ -213,21 +227,6 @@ export const groupIntoSections = (
     })
   }
 
-  // Add Featured section
-  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: '⭐ Featured',
-      cards: featuredCards,
-    })
-  }
-
   // Add Available section - all plugins for current framework (TanStack + third-party)
   const availableCards = allCards.filter(
     (c) =>

package/src/tabs/plugin-registry.ts

@@ -212,6 +212,35 @@ const PLUGIN_REGISTRY: Record<string, PluginMetadata> = {
   // 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'],
+  },
 }
 
 /**