@tanstack/devtools 0.6.19 → 0.6.21

package/dist/devtools/{3YT62TLF.js → YRFZDV5N.js}

@@ -1,11 +1,15 @@
-import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/XFQ6P775.js';
-import { delegateEvents, createComponent, Portal, template, use, setAttribute, insert, memo, effect, className, addEventListener } from 'solid-js/web';
-import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
-import { createShortcut } from '@solid-primitives/keyboard';
-import { ThemeContextProvider, MainPanel as MainPanel$1, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Input, Select, Button } from '@tanstack/devtools-ui';
+import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/XF4JFOLU.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';
+import { ThemeContextProvider, MainPanel as MainPanel$1, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Input, Select, Button, ChevronDownIcon, CloseIcon, SearchIcon, SettingsIcon, PackageIcon, ExternalLinkIcon, CheckCircleIcon, XCircleIcon } from '@tanstack/devtools-ui';
 import clsx3 from 'clsx';
 import * as goober from 'goober';
 import { PiP, X, List, PageSearch, Cogs, SettingsCog, Link, Keyboard, GeoTag, SocialBubble } from '@tanstack/devtools-ui/icons';
+import { devtoolsEventClient } from '@tanstack/devtools-client';
+import { createStore } from 'solid-js/store';
+import { createElementSize } from '@solid-primitives/resize-observer';
+import { createEventListener } from '@solid-primitives/event-listener';
 
 var useDraw = (props) => {
   const [activeHover, setActiveHover] = createSignal(false);
@@ -476,8 +480,8 @@ var stylesFactory = (theme) => {
       padding: 0;
       margin: 0 auto;
       background: ${t(colors.white, colors.darkGray[700])};
-      border-radius: 12px;
-      box-shadow: 0 2px 16px ${t("rgba(0, 0, 0, 0.04)", "rgba(0, 0, 0, 0.08)")};
+      border-radius: 8px;
+      box-shadow: none;
       overflow-y: auto;
       height: 100%;
       display: flex;
@@ -489,16 +493,16 @@ var stylesFactory = (theme) => {
     seoTabTitle: css2`
       font-size: 1.25rem;
       font-weight: 600;
-      color: ${t(colors.purple[500], colors.purple[400])};
+      color: ${t(colors.gray[900], colors.gray[100])};
       margin: 0;
       padding: 1rem 1.5rem 0.5rem 1.5rem;
       text-align: left;
-      border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
     `,
     seoTabSection: css2`
       padding: 1.5rem;
-      background: ${t(colors.gray[100], colors.gray[800])};
-      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      background: ${t(colors.gray[50], colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
@@ -517,12 +521,12 @@ var stylesFactory = (theme) => {
       padding-bottom: 0.5rem;
     `,
     seoPreviewCard: css2`
-      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
       border-radius: 8px;
       padding: 12px 10px;
       background: ${t(colors.white, colors.darkGray[900])};
       margin-bottom: 0;
-      box-shadow: 0 1px 4px ${t("rgba(0,0,0,0.02)", "rgba(0,0,0,0.04)")};
+      box-shadow: 0 1px 3px ${t("rgba(0,0,0,0.05)", "rgba(0,0,0,0.1)")};
       display: flex;
       flex-direction: column;
       align-items: flex-start;
@@ -532,10 +536,10 @@ var stylesFactory = (theme) => {
       gap: 4px;
     `,
     seoPreviewHeader: css2`
-      font-size: 1rem;
-      font-weight: 500;
-      margin-bottom: 6px;
-      color: ${t(colors.purple[500], colors.purple[400])};
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-bottom: 0;
+      color: ${t(colors.gray[700], colors.gray[300])};
     `,
     seoPreviewImage: css2`
       max-width: 100%;
@@ -543,28 +547,29 @@ var stylesFactory = (theme) => {
       margin-bottom: 6px;
       box-shadow: 0 1px 2px ${t("rgba(0,0,0,0.03)", "rgba(0,0,0,0.06)")};
       height: 160px;
+      object-fit: cover;
     `,
     seoPreviewTitle: css2`
-      font-size: 1rem;
+      font-size: 0.9rem;
       font-weight: 600;
-      margin-bottom: 2px;
+      margin-bottom: 4px;
       color: ${t(colors.gray[900], colors.gray[100])};
     `,
     seoPreviewDesc: css2`
-      color: ${t(colors.gray[700], colors.gray[300])};
-      margin-bottom: 2px;
-      font-size: 0.95rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin-bottom: 4px;
+      font-size: 0.8rem;
     `,
     seoPreviewUrl: css2`
       color: ${t(colors.gray[500], colors.gray[500])};
-      font-size: 0.9rem;
-      margin-bottom: 2px;
+      font-size: 0.75rem;
+      margin-bottom: 0;
       word-break: break-all;
     `,
     seoMissingTagsSection: css2`
       margin-top: 4px;
-      font-size: 0.95rem;
-      color: ${t(colors.red[400], colors.red[400])};
+      font-size: 0.875rem;
+      color: ${t(colors.red[500], colors.red[400])};
     `,
     seoMissingTagsList: css2`
       margin: 4px 0 0 0;
@@ -572,22 +577,23 @@ var stylesFactory = (theme) => {
       list-style: none;
       display: flex;
       flex-wrap: wrap;
-      gap: 6px;
+      gap: 4px;
       max-width: 240px;
     `,
     seoMissingTag: css2`
       background: ${t(colors.red[100], colors.red[500] + "22")};
       color: ${t(colors.red[700], colors.red[500])};
-      border-radius: 4px;
-      padding: 1px 6px;
-      font-size: 0.9rem;
+      border-radius: 3px;
+      padding: 2px 6px;
+      font-size: 0.75rem;
       font-weight: 500;
     `,
     seoAllTagsFound: css2`
       color: ${t(colors.green[700], colors.green[500])};
       font-weight: 500;
-      margin-left: 6px;
-      font-size: 0.95rem;
+      margin-left: 0;
+      padding: 0 10px 8px 10px;
+      font-size: 0.875rem;
     `,
     devtoolsPanelContainer: (panelLocation, isDetached) => css2`
       direction: ltr;
@@ -599,7 +605,7 @@ var stylesFactory = (theme) => {
       z-index: 99999;
       width: 100%;
       ${isDetached ? "" : "max-height: 90%;"}
-      border-top: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-top: 1px solid ${t(colors.gray[200], colors.gray[800])};
       transform-origin: top;
     `,
     devtoolsPanelContainerVisibility: (isOpen) => {
@@ -652,7 +658,7 @@ var stylesFactory = (theme) => {
       user-select: none;
       z-index: 100000;
       &:hover {
-        background-color: ${t(colors.purple[700], colors.purple[400])};
+        background-color: ${t(colors.gray[400], colors.gray[500])};
       }
     `,
     mainCloseBtn: css2`
@@ -731,9 +737,9 @@ var stylesFactory = (theme) => {
       align-items: center;
       justify-content: flex-start;
       height: 100%;
-      background-color: ${t(colors.gray[100], colors.darkGray[800])};
-      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
-      box-shadow: 0 1px 0 ${t(colors.gray[200], colors.gray[700])};
+      background-color: ${t(colors.gray[50], colors.darkGray[900])};
+      border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
+      box-shadow: none;
       position: relative;
       width: ${size[10]};
     `,
@@ -746,24 +752,24 @@ var stylesFactory = (theme) => {
       cursor: pointer;
       font-size: ${fontSize.sm};
       font-family: ${fontFamily.sans};
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${t(colors.gray[600], colors.gray[400])};
       background-color: transparent;
       border: none;
-      transition: all 0.2s ease-in-out;
+      transition: all 0.15s ease;
       border-left: 2px solid transparent;
       &:hover:not(.close):not(.active):not(.detach) {
-        background-color: ${t(colors.gray[200], colors.gray[700])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
-        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
       }
       &.active {
-        background-color: ${t(colors.purple[200], colors.purple[500])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
-        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
       }
       &.detach {
         &:hover {
-          background-color: ${t(colors.gray[200], colors.gray[700])};
+          background-color: ${t(colors.gray[100], colors.gray[800])};
         }
         &:hover {
           color: ${t(colors.green[700], colors.green[500])};
@@ -772,7 +778,7 @@ var stylesFactory = (theme) => {
       &.close {
         margin-top: auto;
         &:hover {
-          background-color: ${t(colors.gray[200], colors.gray[700])};
+          background-color: ${t(colors.gray[100], colors.gray[800])};
         }
         &:hover {
           color: ${t(colors.red[700], colors.red[500])};
@@ -788,93 +794,925 @@ var stylesFactory = (theme) => {
         color: ${colors.gray[300]};
       }
     `,
-    tabContent: css2`
-      transition: all 0.2s ease-in-out;
-      width: 100%;
-      height: 100%;
+    tabContent: css2`
+      transition: all 0.2s ease-in-out;
+      width: 100%;
+      height: 100%;
+    `,
+    pluginsTabPanel: css2`
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    `,
+    pluginsTabDraw: (isExpanded) => css2`
+      width: ${isExpanded ? size[48] : 0};
+      height: 100%;
+      background-color: ${t(colors.white, colors.darkGray[900])};
+      box-shadow: none;
+      ${isExpanded ? `border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};` : ""}
+    `,
+    pluginsTabDrawExpanded: css2`
+      width: ${size[48]};
+      border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
+    `,
+    pluginsTabDrawTransition: (mSeconds) => {
+      return css2`
+        transition: width ${mSecondsToCssSeconds(mSeconds)} ease;
+      `;
+    },
+    pluginsTabSidebar: (isExpanded) => css2`
+      width: ${size[48]};
+      overflow-y: auto;
+      transform: ${isExpanded ? "translateX(0)" : "translateX(-100%)"};
+      display: flex;
+      flex-direction: column;
+    `,
+    pluginsTabSidebarTransition: (mSeconds) => {
+      return css2`
+        transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;
+      `;
+    },
+    pluginsList: css2`
+      flex: 1;
+      overflow-y: auto;
+    `,
+    pluginName: css2`
+      font-size: ${fontSize.xs};
+      font-family: ${fontFamily.sans};
+      color: ${t(colors.gray[600], colors.gray[400])};
+      padding: ${size[2]};
+      cursor: pointer;
+      text-align: center;
+      transition: all 0.15s ease;
+      border-left: 2px solid transparent;
+
+      &:hover {
+        background-color: ${t(colors.gray[100], colors.gray[800])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+        padding: ${size[2]};
+      }
+      &.active {
+        background-color: ${t(colors.gray[100], colors.gray[800])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
+      }
+      &.active:hover {
+        background-color: ${t(colors.gray[200], colors.gray[700])};
+      }
+    `,
+    pluginsTabContent: css2`
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+
+      &:not(:last-child) {
+        border-right: 5px solid ${t(colors.purple[200], colors.purple[800])};
+      }
+    `,
+    settingsGroup: css2`
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    `,
+    conditionalSetting: css2`
+      margin-left: 1.5rem;
+      padding-left: 1rem;
+      border-left: 2px solid ${t(colors.gray[300], colors.gray[600])};
+      background-color: ${t(colors.gray[50], colors.darkGray[900])};
+      padding: 0.75rem;
+      border-radius: 0.375rem;
+      margin-top: 0.5rem;
+    `,
+    settingRow: css2`
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+
+      @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+      }
+    `,
+    settingsModifiers: css2`
+      display: flex;
+      gap: 0.5rem;
+    `,
+    // No Plugins Fallback Styles
+    noPluginsFallback: css2`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 400px;
+      padding: 2rem;
+      background: ${t(colors.gray[50], colors.darkGray[700])};
+      width: 100%;
+      height: 100%;
+    `,
+    noPluginsFallbackContent: css2`
+      max-width: 600px;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+    `,
+    noPluginsFallbackIcon: css2`
+      width: 64px;
+      height: 64px;
+      color: ${t(colors.gray[400], colors.gray[600])};
+      margin-bottom: 0.5rem;
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    `,
+    noPluginsFallbackTitle: css2`
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0;
+    `,
+    noPluginsFallbackDescription: css2`
+      font-size: 0.95rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      line-height: 1.5;
+      margin: 0;
+    `,
+    noPluginsSuggestions: css2`
+      width: 100%;
+      margin-top: 1.5rem;
+      padding: 1.5rem;
+      background: ${t(colors.white, colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+    `,
+    noPluginsSuggestionsTitle: css2`
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0 0 0.5rem 0;
+    `,
+    noPluginsSuggestionsDesc: css2`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin: 0 0 1rem 0;
+    `,
+    noPluginsSuggestionsList: css2`
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    `,
+    noPluginsSuggestionCard: css2`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1rem;
+      background: ${t(colors.gray[50], colors.darkGray[900])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.375rem;
+      transition: all 0.15s ease;
+
+      &:hover {
+        border-color: ${t(colors.gray[300], colors.gray[600])};
+        background: ${t(colors.gray[100], colors.darkGray[800])};
+      }
+    `,
+    noPluginsSuggestionInfo: css2`
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.25rem;
+      flex: 1;
+    `,
+    noPluginsSuggestionPackage: css2`
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    `,
+    noPluginsSuggestionSource: css2`
+      font-size: 0.8rem;
+      color: ${t(colors.gray[500], colors.gray[500])};
+      margin: 0;
+    `,
+    noPluginsSuggestionStatus: css2`
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      color: ${t(colors.green[600], colors.green[400])};
+
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    `,
+    noPluginsSuggestionStatusText: css2`
+      font-size: 0.875rem;
+      font-weight: 500;
+    `,
+    noPluginsSuggestionStatusTextError: css2`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${t(colors.red[600], colors.red[400])};
+    `,
+    noPluginsEmptyState: css2`
+      margin-top: 1.5rem;
+      padding: 1.5rem;
+      background: ${t(colors.white, colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+    `,
+    noPluginsEmptyStateText: css2`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin: 0;
+      line-height: 1.5;
+    `,
+    noPluginsFallbackLinks: css2`
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-top: 1.5rem;
+    `,
+    noPluginsFallbackLink: css2`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      text-decoration: none;
+      transition: color 0.15s ease;
+
+      &:hover {
+        color: ${t(colors.gray[900], colors.gray[100])};
+        text-decoration: underline;
+      }
+    `,
+    noPluginsFallbackLinkSeparator: css2`
+      color: ${t(colors.gray[400], colors.gray[600])};
+    `,
+    // Plugin Marketplace Styles (for "Add More" tab)
+    pluginMarketplace: css2`
+      width: 100%;
+      overflow-y: auto;
+      padding: 2rem;
+      background: ${t(
+      "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
+      "linear-gradient(135deg, #1a1d23 0%, #13161a 100%)"
+    )};
+      animation: fadeIn 0.3s ease;
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          transform: translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `,
+    pluginMarketplaceHeader: css2`
+      margin-bottom: 2rem;
+      padding-bottom: 1rem;
+      border-bottom: 2px solid ${t(colors.gray[200], colors.gray[700])};
+    `,
+    pluginMarketplaceTitleRow: css2`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 2rem;
+      margin-bottom: 0.5rem;
+    `,
+    pluginMarketplaceTitle: css2`
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0;
+      letter-spacing: -0.02em;
+    `,
+    pluginMarketplaceDescription: css2`
+      font-size: 0.95rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin: 0 0 1rem 0;
+      line-height: 1.5;
+    `,
+    pluginMarketplaceSearchWrapper: css2`
+      position: relative;
+      display: flex;
+      align-items: center;
+      max-width: 400px;
+      flex-shrink: 0;
+
+      svg {
+        position: absolute;
+        left: 1rem;
+        color: ${t(colors.gray[400], colors.gray[500])};
+        pointer-events: none;
+      }
+    `,
+    pluginMarketplaceSearch: css2`
+      width: 100%;
+      padding: 0.75rem 1rem 0.75rem 2.75rem;
+      background: ${t(colors.gray[50], colors.darkGray[900])};
+      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      font-size: 0.875rem;
+      font-family: ${fontFamily.sans};
+      transition: all 0.2s ease;
+
+      &::placeholder {
+        color: ${t(colors.gray[400], colors.gray[500])};
+      }
+
+      &:focus {
+        outline: none;
+        border-color: ${t(colors.blue[500], colors.blue[400])};
+        background: ${t(colors.white, colors.darkGray[800])};
+        box-shadow: 0 0 0 3px
+          ${t("rgba(59, 130, 246, 0.1)", "rgba(96, 165, 250, 0.1)")};
+      }
+    `,
+    pluginMarketplaceFilters: css2`
+      margin-top: 1.5rem;
+      padding-top: 1rem;
+    `,
+    pluginMarketplaceTagsContainer: css2`
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-top: 1.5rem;
+      padding: 1rem;
+      background: ${t(colors.gray[50], colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+    `,
+    pluginMarketplaceTagButton: css2`
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      background: ${t(colors.white, colors.darkGray[700])};
+      border: 2px solid ${t(colors.gray[300], colors.gray[600])};
+      border-radius: 0.375rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      cursor: pointer;
+      transition: all 0.15s ease;
+
+      &:hover {
+        background: ${t(colors.gray[100], colors.darkGray[600])};
+        border-color: ${t(colors.gray[400], colors.gray[500])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+      }
+    `,
+    pluginMarketplaceTagButtonActive: css2`
+      background: ${t(
+      "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",
+      "linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)"
+    )} !important;
+      border-color: ${t("#2563eb", "#3b82f6")} !important;
+      color: white !important;
+
+      &:hover {
+        background: ${t(
+      "linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)",
+      "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)"
+    )} !important;
+        border-color: ${t("#1d4ed8", "#2563eb")} !important;
+      }
+    `,
+    pluginMarketplaceSettingsButton: css2`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.75rem;
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      cursor: pointer;
+      transition: all 0.2s ease;
+      margin-left: 0.5rem;
+
+      &:hover {
+        background: ${t(colors.gray[200], colors.darkGray[700])};
+        border-color: ${t(colors.gray[300], colors.gray[600])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+    `,
+    pluginMarketplaceSettingsPanel: css2`
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 350px;
+      background: ${t(colors.white, colors.darkGray[800])};
+      border-left: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      box-shadow: -4px 0 12px ${t("rgba(0, 0, 0, 0.1)", "rgba(0, 0, 0, 0.4)")};
+      z-index: 1000;
+      display: flex;
+      flex-direction: column;
+      animation: slideInRight 0.3s ease;
+
+      @keyframes slideInRight {
+        from {
+          transform: translateX(100%);
+        }
+        to {
+          transform: translateX(0);
+        }
+      }
+    `,
+    pluginMarketplaceSettingsPanelHeader: css2`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 1.5rem;
+      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[700])};
+    `,
+    pluginMarketplaceSettingsPanelTitle: css2`
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0;
+    `,
+    pluginMarketplaceSettingsPanelClose: css2`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.5rem;
+      background: transparent;
+      border: none;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      cursor: pointer;
+      border-radius: 0.375rem;
+      transition: all 0.15s ease;
+
+      &:hover {
+        background: ${t(colors.gray[100], colors.darkGray[700])};
+        color: ${t(colors.gray[900], colors.gray[100])};
+      }
+    `,
+    pluginMarketplaceSettingsPanelContent: css2`
+      flex: 1;
+      padding: 1.5rem;
+      overflow-y: auto;
+    `,
+    pluginMarketplaceGrid: css2`
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 1.25rem;
+      animation: slideUp 0.4s ease;
+
+      @keyframes slideUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `,
+    pluginMarketplaceCard: css2`
+      background: ${t(colors.white, colors.darkGray[800])};
+      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.75rem;
+      padding: 1.5rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: ${t(
+      "linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%)",
+      "linear-gradient(90deg, #60a5fa 0%, #a78bfa 100%)"
+    )};
+        transform: scaleX(0);
+        transform-origin: left;
+        transition: transform 0.25s ease;
+      }
+
+      &:hover {
+        border-color: ${t(colors.gray[400], colors.gray[500])};
+        box-shadow: 0 8px 24px ${t("rgba(0,0,0,0.1)", "rgba(0,0,0,0.4)")};
+        transform: translateY(-4px);
+
+        &::before {
+          transform: scaleX(1);
+        }
+      }
+    `,
+    pluginMarketplaceCardIcon: css2`
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: ${t(
+      "linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)",
+      "linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%)"
+    )};
+      border-radius: 0.5rem;
+      color: white;
+      transition: transform 0.25s ease;
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      &.custom-logo {
+      }
+    `,
+    pluginMarketplaceCardHeader: css2`
+      flex: 1;
+    `,
+    pluginMarketplaceCardTitle: css2`
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      margin: 0 0 0.5rem 0;
+      line-height: 1.4;
+    `,
+    pluginMarketplaceCardDescription: css2`
+      font-size: 0.8rem;
+      color: ${t(colors.gray[500], colors.gray[500])};
+      margin: 0;
+      padding: 0;
+      background: transparent;
+      border-radius: 0.375rem;
+      display: block;
+      font-weight: 500;
+    `,
+    pluginMarketplaceCardPackageBadge: css2`
+      margin-top: 4px;
+      margin-bottom: 8px;
+      font-size: 0.6875rem;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      opacity: 0.6;
+      padding: 4px 8px;
+      padding-left: 0;
+      background-color: var(--bg-tertiary);
+      border-radius: 4px;
+      word-break: break-all;
+      display: inline-block;
+    `,
+    pluginMarketplaceCardDescriptionText: css2`
+      line-height: 1.5;
+      margin-top: 0;
+    `,
+    pluginMarketplaceCardVersionInfo: css2`
+      margin-top: 8px;
+      font-size: 0.6875rem;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    `,
+    pluginMarketplaceCardVersionSatisfied: css2`
+      color: ${t(colors.green[600], colors.green[400])};
+    `,
+    pluginMarketplaceCardVersionUnsatisfied: css2`
+      color: ${t(colors.red[600], colors.red[400])};
+    `,
+    pluginMarketplaceCardDocsLink: css2`
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      font-size: 0.75rem;
+      color: ${t(colors.blue[600], colors.blue[400])};
+      text-decoration: none;
+      margin-top: 0.5rem;
+      transition: color 0.15s ease;
+
+      &:hover {
+        color: ${t(colors.blue[700], colors.blue[300])};
+        text-decoration: underline;
+      }
+
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    `,
+    pluginMarketplaceCardTags: css2`
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.375rem;
+      margin-top: 0.75rem;
+    `,
+    pluginMarketplaceCardTag: css2`
+      font-size: 0.6875rem;
+      font-weight: 500;
+      padding: 0.25rem 0.5rem;
+      background: ${t(colors.gray[100], colors.darkGray[700])};
+      border: 1px solid ${t(colors.gray[300], colors.gray[600])};
+      border-radius: 0.25rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+    `,
+    pluginMarketplaceCardImage: css2`
+      width: 28px;
+      height: 28px;
+      object-fit: contain;
+    `,
+    pluginMarketplaceNewBanner: css2`
+      position: absolute;
+      top: 12px;
+      right: -35px;
+      background-color: ${t(colors.green[500], colors.green[500])};
+      color: white;
+      padding: 4px 40px;
+      font-size: 0.6875rem;
+      font-weight: bold;
+      text-transform: uppercase;
+      transform: rotate(45deg);
+      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.5);
+      z-index: 10;
+      letter-spacing: 0.5px;
+    `,
+    pluginMarketplaceCardFeatured: css2`
+      border-color: ${t(colors.blue[500], colors.blue[400])};
+      border-width: 2px;
+    `,
+    pluginMarketplaceCardActive: css2`
+      border-color: ${t(colors.green[500], colors.green[600])};
+      border-width: 2px;
+
+      &:hover {
+        border-color: ${t(colors.green[500], colors.green[600])};
+        box-shadow: none;
+        transform: none;
+
+        &::before {
+          transform: scaleX(0);
+        }
+      }
+    `,
+    pluginMarketplaceCardStatus: css2`
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      color: ${t(colors.green[600], colors.green[400])};
+      animation: statusFadeIn 0.3s ease;
+
+      @keyframes statusFadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      svg {
+        width: 18px;
+        height: 18px;
+        animation: iconPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+
+      @keyframes iconPop {
+        0% {
+          transform: scale(0);
+        }
+        50% {
+          transform: scale(1.2);
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+    `,
+    pluginMarketplaceCardSpinner: css2`
+      width: 18px;
+      height: 18px;
+      border: 2px solid ${t(colors.gray[200], colors.gray[700])};
+      border-top-color: ${t(colors.blue[600], colors.blue[400])};
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+    pluginMarketplaceCardStatusText: css2`
+      font-size: 0.875rem;
+      font-weight: 600;
+    `,
+    pluginMarketplaceCardStatusTextError: css2`
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: ${t(colors.red[600], colors.red[400])};
+    `,
+    pluginMarketplaceEmpty: css2`
+      padding: 3rem 2rem;
+      text-align: center;
+      background: ${t(colors.white, colors.darkGray[800])};
+      border: 2px dashed ${t(colors.gray[300], colors.gray[700])};
+      border-radius: 0.75rem;
+      animation: fadeIn 0.3s ease;
+    `,
+    pluginMarketplaceEmptyText: css2`
+      font-size: 0.95rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin: 0;
+      line-height: 1.6;
+    `,
+    // Framework sections
+    pluginMarketplaceSection: css2`
+      margin-bottom: 2.5rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    `,
+    pluginMarketplaceSectionHeader: css2`
+      margin-bottom: 1rem;
+      padding: 1rem 1.25rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      cursor: pointer;
+      user-select: none;
+      background: ${t(colors.gray[50], colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 0.5rem;
+      transition: all 0.15s ease;
+
+      &:hover {
+        background: ${t(colors.gray[100], colors.darkGray[700])};
+        border-color: ${t(colors.gray[300], colors.gray[600])};
+      }
     `,
-    pluginsTabPanel: css2`
+    pluginMarketplaceSectionHeaderLeft: css2`
       display: flex;
-      flex-direction: row;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
+      align-items: center;
+      gap: 0.5rem;
     `,
-    pluginsTabDraw: (isExpanded) => css2`
-      width: ${isExpanded ? size[48] : 0};
-      height: 100%;
-      background-color: ${t(colors.white, colors.darkGray[800])};
-      box-shadow: 0 1px 0 ${colors.gray[700]};
-      ${isExpanded ? `border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};` : ""}
+    pluginMarketplaceSectionChevron: css2`
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      transition: transform 0.2s ease;
     `,
-    pluginsTabDrawExpanded: css2`
-      width: ${size[48]};
-      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
+    pluginMarketplaceSectionChevronCollapsed: css2`
+      transform: rotate(-90deg);
     `,
-    pluginsTabDrawTransition: (mSeconds) => {
-      return css2`
-        transition: width ${mSecondsToCssSeconds(mSeconds)} ease;
-      `;
-    },
-    pluginsTabSidebar: (isExpanded) => css2`
-      width: ${size[48]};
-      overflow-y: auto;
-      transform: ${isExpanded ? "translateX(0)" : "translateX(-100%)"};
+    pluginMarketplaceSectionTitle: css2`
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: ${t(colors.gray[900], colors.gray[50])};
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
     `,
-    pluginsTabSidebarTransition: (mSeconds) => {
-      return css2`
-        transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;
-      `;
-    },
-    pluginName: css2`
+    pluginMarketplaceSectionBadge: css2`
+      font-size: 0.75rem;
+      font-weight: 600;
+      padding: 0.25rem 0.5rem;
+      background: ${t(
+      "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",
+      "linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)"
+    )};
+      color: white;
+      border-radius: 0.25rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    `,
+    pluginMarketplaceCardDisabled: css2`
+      opacity: 0.6;
+      filter: grayscale(0.3);
+      cursor: not-allowed;
+
+      &:hover {
+        transform: none;
+        box-shadow: none;
+      }
+    `,
+    // Card state badges
+    pluginMarketplaceCardBadge: css2`
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      padding: 0.25rem 0.5rem;
+      font-size: 0.65rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      border-radius: 0.25rem;
+      letter-spacing: 0.05em;
+    `,
+    pluginMarketplaceCardBadgeInstall: css2`
+      background: ${t(colors.green[100], colors.green[900])};
+      color: ${t(colors.green[700], colors.green[300])};
+    `,
+    pluginMarketplaceCardBadgeAdd: css2`
+      background: ${t(colors.blue[100], colors.blue[900])};
+      color: ${t(colors.blue[700], colors.blue[300])};
+    `,
+    pluginMarketplaceCardBadgeRequires: css2`
+      background: ${t(colors.gray[100], colors.gray[800])};
+      color: ${t(colors.gray[600], colors.gray[400])};
+    `,
+    // Button style for already installed plugins
+    pluginMarketplaceButtonInstalled: css2`
+      opacity: 0.5;
+    `,
+    // Add More Tab Style (visually distinct from regular plugins)
+    pluginNameAddMore: css2`
       font-size: ${fontSize.xs};
       font-family: ${fontFamily.sans};
-      color: ${t(colors.gray[700], colors.gray[300])};
-      padding: ${size[2]};
+      color: ${t(colors.gray[600], colors.gray[400])};
+      padding: ${size[3]} ${size[2]};
       cursor: pointer;
       text-align: center;
-      transition: all 0.2s ease-in-out;
+      transition: all 0.15s ease;
+      border-left: 2px solid transparent;
+      background: ${t(
+      "linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)",
+      "linear-gradient(135deg, #1f2937 0%, #111827 100%)"
+    )};
+      font-weight: 600;
+      position: relative;
+      margin-top: auto;
+
+      h3 {
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem;
+
+        &::before {
+          content: '✨';
+          font-size: 0.875rem;
+          animation: sparkle 2s ease-in-out infinite;
+        }
+      }
+
+      @keyframes sparkle {
+        0%,
+        100% {
+          opacity: 1;
+          transform: scale(1) rotate(0deg);
+        }
+        50% {
+          opacity: 0.6;
+          transform: scale(1.1) rotate(10deg);
+        }
+      }
+
       &:hover {
-        background-color: ${t(colors.gray[200], colors.gray[700])};
+        background: ${t(
+      "linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%)",
+      "linear-gradient(135deg, #374151 0%, #1f2937 100%)"
+    )};
         color: ${t(colors.gray[900], colors.gray[100])};
-        padding: ${size[2]};
+        border-left-color: ${t(colors.blue[500], colors.blue[400])};
+
+        h3::before {
+          animation: sparkle 0.5s ease-in-out infinite;
+        }
       }
+
       &.active {
-        background-color: ${t(colors.purple[200], colors.purple[500])};
-        color: ${t(colors.gray[900], colors.gray[100])};
+        background: ${t(
+      "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",
+      "linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)"
+    )};
+        color: ${t(colors.white, colors.white)};
+        border-left: 2px solid ${t(colors.blue[600], colors.blue[300])};
+        box-shadow: 0 4px 12px
+          ${t("rgba(59, 130, 246, 0.3)", "rgba(96, 165, 250, 0.3)")};
+
+        h3::before {
+          filter: brightness(0) invert(1);
+        }
       }
-    `,
-    pluginsTabContent: css2`
-      width: 100%;
-      height: 100%;
-      overflow-y: auto;
-    `,
-    settingsGroup: css2`
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    `,
-    conditionalSetting: css2`
-      margin-left: 1.5rem;
-      padding-left: 1rem;
-      border-left: 2px solid ${t(colors.purple[600], colors.purple[400])};
-      background-color: ${t(colors.gray[100], colors.darkGray[800])};
-      padding: 1rem;
-      border-radius: 0.5rem;
-      margin-top: 0.5rem;
-    `,
-    settingRow: css2`
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 1rem;
 
-      @media (max-width: 768px) {
-        grid-template-columns: 1fr;
+      &.active:hover {
+        background: ${t(
+      "linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)",
+      "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)"
+    )};
       }
-    `,
-    settingsModifiers: css2`
-      display: flex;
-      gap: 0.5rem;
     `
   };
 };
@@ -1294,9 +2132,1109 @@ var SettingsTab = () => {
     }
   });
 };
-var _tmpl$5 = /* @__PURE__ */ template(`<div><div><div>`);
-var _tmpl$23 = /* @__PURE__ */ template(`<div><h3>`);
-var _tmpl$33 = /* @__PURE__ */ template(`<div>`);
+
+// src/tabs/marketplace/card-utils.ts
+var getButtonText = (card) => {
+  if (card.status === "installing") return "Installing...";
+  if (card.status === "success") return "Installed!";
+  if (card.status === "error") return "Error";
+  switch (card.actionType) {
+    case "install":
+      return "Install";
+    case "install-devtools":
+      return "Install Devtools";
+    case "add-to-devtools":
+      return "Add to Devtools";
+    case "requires-package":
+      return `Requires ${card.requiredPackageName}`;
+    case "wrong-framework":
+      return "Different Framework";
+    case "already-installed":
+      return "Already Installed";
+    case "bump-version":
+      return "Bump Version";
+    case "version-mismatch":
+      return "Version Mismatch";
+    default:
+      return "Install";
+  }
+};
+var getButtonVariant = (card) => {
+  if (card.actionType === "requires-package" || card.actionType === "wrong-framework" || card.actionType === "version-mismatch")
+    return "danger";
+  if (card.actionType === "bump-version") return "warning";
+  if (card.actionType === "already-installed") return "secondary";
+  return "primary";
+};
+var getBadgeClass = (card, styles) => {
+  const s = styles();
+  const base = s.pluginMarketplaceCardBadge;
+  switch (card.actionType) {
+    case "install":
+    case "install-devtools":
+      return `${base} ${s.pluginMarketplaceCardBadgeInstall}`;
+    case "add-to-devtools":
+      return `${base} ${s.pluginMarketplaceCardBadgeAdd}`;
+    case "already-installed":
+      return `${base} ${s.pluginMarketplaceCardBadgeAdd}`;
+    case "bump-version":
+      return `${base} ${s.pluginMarketplaceCardBadgeRequires}`;
+    case "version-mismatch":
+      return `${base} ${s.pluginMarketplaceCardBadgeRequires}`;
+    case "requires-package":
+    case "wrong-framework":
+      return `${base} ${s.pluginMarketplaceCardBadgeRequires}`;
+    default:
+      return base;
+  }
+};
+var getBadgeText = (card) => {
+  switch (card.actionType) {
+    case "install":
+    case "install-devtools":
+      return "Available";
+    case "add-to-devtools":
+      return "Installed";
+    case "already-installed":
+      return "Active";
+    case "version-mismatch":
+      return "Incompatible";
+    case "requires-package":
+      return "Unavailable";
+    case "wrong-framework":
+      return "Other Framework";
+    default:
+      return "";
+  }
+};
+
+// src/tabs/marketplace/plugin-card.tsx
+var _tmpl$5 = /* @__PURE__ */ template(`<div>New`);
+var _tmpl$23 = /* @__PURE__ */ template(`<img>`);
+var _tmpl$33 = /* @__PURE__ */ template(`<span>\u2713 v<!> \u2022 Min v`);
+var _tmpl$42 = /* @__PURE__ */ template(`<p>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer">Documentation `);
+var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div><span></span><div></div><div><h3></h3><p></p><p>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<span>\u26A0\uFE0F v<!> \u2022 Requires v<!>+`);
+var _tmpl$9 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$0 = /* @__PURE__ */ template(`<span>Installing...`);
+var _tmpl$1 = /* @__PURE__ */ template(`<span>Installed!`);
+var PluginCardComponent = (props) => {
+  const styles = useStyles();
+  const {
+    card
+  } = props;
+  return (() => {
+    var _el$ = _tmpl$7(), _el$3 = _el$.firstChild, _el$4 = _el$3.nextSibling, _el$6 = _el$4.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling;
+    _el$.style.setProperty("position", "relative");
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return card.metadata?.isNew;
+      },
+      get children() {
+        var _el$2 = _tmpl$5();
+        effect(() => className(_el$2, styles().pluginMarketplaceNewBanner));
+        return _el$2;
+      }
+    }), _el$3);
+    insert(_el$3, () => getBadgeText(card));
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return card.metadata?.logoUrl;
+      },
+      get fallback() {
+        return createComponent(PackageIcon, {});
+      },
+      get children() {
+        var _el$5 = _tmpl$23();
+        effect((_p$) => {
+          var _v$ = card.metadata?.logoUrl, _v$2 = card.metadata?.title || card.devtoolsPackage, _v$3 = styles().pluginMarketplaceCardImage;
+          _v$ !== _p$.e && setAttribute(_el$5, "src", _p$.e = _v$);
+          _v$2 !== _p$.t && setAttribute(_el$5, "alt", _p$.t = _v$2);
+          _v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$5;
+      }
+    }));
+    insert(_el$7, () => card.metadata?.title || card.devtoolsPackage);
+    insert(_el$8, () => card.devtoolsPackage);
+    insert(_el$9, () => card.actionType === "requires-package" ? `Requires ${card.requiredPackageName}` : card.actionType === "wrong-framework" ? `For different framework projects` : card.actionType === "already-installed" ? `Active in your devtools` : card.actionType === "version-mismatch" ? card.versionInfo?.reason || "Version incompatible" : card.metadata?.description || `For ${card.requiredPackageName}`);
+    insert(_el$6, createComponent(Show, {
+      get when() {
+        return card.versionInfo;
+      },
+      get children() {
+        var _el$0 = _tmpl$42();
+        insert(_el$0, createComponent(Show, {
+          get when() {
+            return card.versionInfo?.satisfied;
+          },
+          get fallback() {
+            return (() => {
+              var _el$16 = _tmpl$8(), _el$17 = _el$16.firstChild, _el$20 = _el$17.nextSibling, _el$18 = _el$20.nextSibling, _el$21 = _el$18.nextSibling; _el$21.nextSibling;
+              insert(_el$16, () => card.versionInfo?.current, _el$20);
+              insert(_el$16, () => card.versionInfo?.required, _el$21);
+              effect(() => className(_el$16, styles().pluginMarketplaceCardVersionUnsatisfied));
+              return _el$16;
+            })();
+          },
+          get children() {
+            var _el$1 = _tmpl$33(), _el$10 = _el$1.firstChild, _el$12 = _el$10.nextSibling; _el$12.nextSibling;
+            insert(_el$1, () => card.versionInfo?.current, _el$12);
+            insert(_el$1, () => card.versionInfo?.required, null);
+            effect(() => className(_el$1, styles().pluginMarketplaceCardVersionSatisfied));
+            return _el$1;
+          }
+        }));
+        effect(() => className(_el$0, styles().pluginMarketplaceCardVersionInfo));
+        return _el$0;
+      }
+    }), null);
+    insert(_el$6, createComponent(Show, {
+      get when() {
+        return card.metadata?.docsUrl;
+      },
+      get children() {
+        var _el$13 = _tmpl$52(); _el$13.firstChild;
+        insert(_el$13, createComponent(ExternalLinkIcon, {}), null);
+        effect((_p$) => {
+          var _v$4 = card.metadata?.docsUrl, _v$5 = styles().pluginMarketplaceCardDocsLink;
+          _v$4 !== _p$.e && setAttribute(_el$13, "href", _p$.e = _v$4);
+          _v$5 !== _p$.t && className(_el$13, _p$.t = _v$5);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$13;
+      }
+    }), null);
+    insert(_el$6, createComponent(Show, {
+      get when() {
+        return card.metadata?.tags && card.metadata.tags.length > 0;
+      },
+      get children() {
+        var _el$15 = _tmpl$6();
+        insert(_el$15, createComponent(For, {
+          get each() {
+            return card.metadata?.tags;
+          },
+          children: (tag) => (() => {
+            var _el$22 = _tmpl$9();
+            insert(_el$22, tag);
+            effect(() => className(_el$22, styles().pluginMarketplaceCardTag));
+            return _el$22;
+          })()
+        }));
+        effect(() => className(_el$15, styles().pluginMarketplaceCardTags));
+        return _el$15;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return card.status === "idle";
+      },
+      get fallback() {
+        return (() => {
+          var _el$23 = _tmpl$6();
+          insert(_el$23, createComponent(Show, {
+            get when() {
+              return card.status === "installing";
+            },
+            get children() {
+              return [(() => {
+                var _el$24 = _tmpl$6();
+                effect(() => className(_el$24, styles().pluginMarketplaceCardSpinner));
+                return _el$24;
+              })(), (() => {
+                var _el$25 = _tmpl$0();
+                effect(() => className(_el$25, styles().pluginMarketplaceCardStatusText));
+                return _el$25;
+              })()];
+            }
+          }), null);
+          insert(_el$23, createComponent(Show, {
+            get when() {
+              return card.status === "success";
+            },
+            get children() {
+              return [createComponent(CheckCircleIcon, {}), (() => {
+                var _el$26 = _tmpl$1();
+                effect(() => className(_el$26, styles().pluginMarketplaceCardStatusText));
+                return _el$26;
+              })()];
+            }
+          }), null);
+          insert(_el$23, createComponent(Show, {
+            get when() {
+              return card.status === "error";
+            },
+            get children() {
+              return [createComponent(XCircleIcon, {}), (() => {
+                var _el$27 = _tmpl$9();
+                insert(_el$27, () => card.error || "Failed to install");
+                effect(() => className(_el$27, styles().pluginMarketplaceCardStatusTextError));
+                return _el$27;
+              })()];
+            }
+          }), null);
+          effect(() => className(_el$23, styles().pluginMarketplaceCardStatus));
+          return _el$23;
+        })();
+      },
+      get children() {
+        return createComponent(Button, {
+          get variant() {
+            return getButtonVariant(card);
+          },
+          onClick: () => props.onAction(card),
+          get disabled() {
+            return card.status !== "idle" || card.actionType === "requires-package" || card.actionType === "wrong-framework" || card.actionType === "already-installed" || card.actionType === "version-mismatch";
+          },
+          get ["class"]() {
+            return memo(() => card.actionType === "already-installed")() ? styles().pluginMarketplaceButtonInstalled : "";
+          },
+          get children() {
+            return getButtonText(card);
+          }
+        });
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$6 = styles().pluginMarketplaceCard, _v$7 = {
+        [styles().pluginMarketplaceCardDisabled]: !card.isCurrentFramework && card.actionType !== "already-installed",
+        [styles().pluginMarketplaceCardFeatured]: !!card.metadata?.featured && card.actionType !== "already-installed",
+        [styles().pluginMarketplaceCardActive]: card.actionType === "already-installed"
+      }, _v$8 = getBadgeClass(card, styles), _v$9 = styles().pluginMarketplaceCardIcon, _v$0 = !!card.metadata?.logoUrl, _v$1 = styles().pluginMarketplaceCardHeader, _v$10 = styles().pluginMarketplaceCardTitle, _v$11 = styles().pluginMarketplaceCardPackageBadge, _v$12 = styles().pluginMarketplaceCardDescriptionText;
+      _v$6 !== _p$.e && className(_el$, _p$.e = _v$6);
+      _p$.t = classList(_el$, _v$7, _p$.t);
+      _v$8 !== _p$.a && className(_el$3, _p$.a = _v$8);
+      _v$9 !== _p$.o && className(_el$4, _p$.o = _v$9);
+      _v$0 !== _p$.i && _el$4.classList.toggle("custom-logo", _p$.i = _v$0);
+      _v$1 !== _p$.n && className(_el$6, _p$.n = _v$1);
+      _v$10 !== _p$.s && className(_el$7, _p$.s = _v$10);
+      _v$11 !== _p$.h && className(_el$8, _p$.h = _v$11);
+      _v$12 !== _p$.r && className(_el$9, _p$.r = _v$12);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0
+    });
+    return _el$;
+  })();
+};
+
+// src/tabs/marketplace/plugin-section.tsx
+var _tmpl$10 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$24 = /* @__PURE__ */ template(`<div><div><div><div></div><h3>`);
+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, {
+      get when() {
+        return !props.isCollapsed();
+      },
+      get children() {
+        var _el$6 = _tmpl$10();
+        insert(_el$6, createComponent(For, {
+          get each() {
+            return props.section.cards;
+          },
+          children: (card) => createComponent(PluginCardComponent, {
+            card,
+            get onAction() {
+              return props.onCardAction;
+            }
+          })
+        }));
+        effect(() => className(_el$6, styles().pluginMarketplaceGrid));
+        return _el$6;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$ = styles().pluginMarketplaceSection, _v$2 = styles().pluginMarketplaceSectionHeader, _v$3 = styles().pluginMarketplaceSectionHeaderLeft, _v$4 = styles().pluginMarketplaceSectionChevron, _v$5 = {
+        [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);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    });
+    return _el$;
+  })();
+};
+delegateEvents(["click"]);
+var _tmpl$11 = /* @__PURE__ */ template(`<div><div><h3>Marketplace Settings</h3><button></button></div><div>`);
+var SettingsPanel = (props) => {
+  const styles = useStyles();
+  return createComponent(Show, {
+    get when() {
+      return props.isOpen();
+    },
+    get children() {
+      var _el$ = _tmpl$11(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling;
+      addEventListener(_el$4, "click", props.onClose, true);
+      insert(_el$4, createComponent(CloseIcon, {}));
+      insert(_el$5, createComponent(Checkbox, {
+        label: "Show active plugins",
+        description: "Display installed plugins in a separate section",
+        get checked() {
+          return props.showActivePlugins();
+        },
+        onChange: (checked) => props.setShowActivePlugins(checked)
+      }));
+      effect((_p$) => {
+        var _v$ = styles().pluginMarketplaceSettingsPanel, _v$2 = styles().pluginMarketplaceSettingsPanelHeader, _v$3 = styles().pluginMarketplaceSettingsPanelTitle, _v$4 = styles().pluginMarketplaceSettingsPanelClose, _v$5 = styles().pluginMarketplaceSettingsPanelContent;
+        _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);
+        _v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0
+      });
+      return _el$;
+    }
+  });
+};
+delegateEvents(["click"]);
+var _tmpl$12 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$25 = /* @__PURE__ */ template(`<button>`);
+var TagFilters = (props) => {
+  const styles = useStyles();
+  return createComponent(Show, {
+    get when() {
+      return props.tags().length > 0;
+    },
+    get children() {
+      var _el$ = _tmpl$12();
+      insert(_el$, createComponent(For, {
+        get each() {
+          return props.tags();
+        },
+        children: (tag) => (() => {
+          var _el$2 = _tmpl$25();
+          _el$2.$$click = () => props.onToggleTag(tag);
+          insert(_el$2, tag);
+          effect((_p$) => {
+            var _v$ = styles().pluginMarketplaceTagButton, _v$2 = {
+              [styles().pluginMarketplaceTagButtonActive]: props.selectedTags().has(tag)
+            };
+            _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+            _p$.t = classList(_el$2, _v$2, _p$.t);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0
+          });
+          return _el$2;
+        })()
+      }));
+      effect(() => className(_el$, styles().pluginMarketplaceTagsContainer));
+      return _el$;
+    }
+  });
+};
+delegateEvents(["click"]);
+
+// src/tabs/marketplace/marketplace-header.tsx
+var _tmpl$13 = /* @__PURE__ */ template(`<div><div><h2>Plugin Marketplace</h2><div><div><input type=text placeholder="Search plugins..."></div><button></button></div></div><p>Discover and install devtools for TanStack Query, Router, Form, and Pacer`);
+var MarketplaceHeader = (props) => {
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$13(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$2.nextSibling;
+    _el$4.style.setProperty("display", "flex");
+    _el$4.style.setProperty("align-items", "center");
+    insert(_el$5, createComponent(SearchIcon, {}), _el$6);
+    _el$6.$$input = (e) => props.onSearchInput(e.currentTarget.value);
+    addEventListener(_el$7, "click", props.onSettingsClick, true);
+    insert(_el$7, createComponent(SettingsIcon, {}));
+    insert(_el$, createComponent(TagFilters, {
+      get tags() {
+        return props.tags;
+      },
+      get selectedTags() {
+        return props.selectedTags;
+      },
+      get onToggleTag() {
+        return props.onToggleTag;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$ = styles().pluginMarketplaceHeader, _v$2 = styles().pluginMarketplaceTitleRow, _v$3 = styles().pluginMarketplaceTitle, _v$4 = styles().pluginMarketplaceSearchWrapper, _v$5 = styles().pluginMarketplaceSearch, _v$6 = styles().pluginMarketplaceSettingsButton, _v$7 = styles().pluginMarketplaceDescription;
+      _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$5, _p$.o = _v$4);
+      _v$5 !== _p$.i && className(_el$6, _p$.i = _v$5);
+      _v$6 !== _p$.n && className(_el$7, _p$.n = _v$6);
+      _v$7 !== _p$.s && className(_el$8, _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
+    });
+    effect(() => _el$6.value = props.searchInput());
+    return _el$;
+  })();
+};
+delegateEvents(["input", "click"]);
+
+// src/tabs/marketplace/types.ts
+var FRAMEWORKS = [
+  "react",
+  "solid",
+  "vue",
+  "svelte",
+  "angular"
+];
+
+// src/tabs/plugin-registry.ts
+var PLUGIN_REGISTRY = {
+  // TanStack Query
+  "@tanstack/react-query-devtools": {
+    packageName: "@tanstack/react-query-devtools",
+    title: "TanStack Query Devtools",
+    description: "Powerful devtools for TanStack Query - inspect queries, mutations, and cache",
+    requires: {
+      packageName: "@tanstack/react-query",
+      minVersion: "5.0.0"
+    },
+    pluginId: "tanstack-query",
+    docsUrl: "https://tanstack.com/query/latest/docs/devtools",
+    author: "TanStack",
+    framework: "react",
+    featured: true,
+    // Featured plugin
+    tags: ["TanStack", "data-fetching", "caching", "state-management"]
+  },
+  "@tanstack/solid-query-devtools": {
+    packageName: "@tanstack/solid-query-devtools",
+    title: "TanStack Query Devtools",
+    description: "Powerful devtools for TanStack Query - inspect queries, mutations, and cache",
+    requires: {
+      packageName: "@tanstack/solid-query",
+      minVersion: "5.0.0"
+    },
+    pluginId: "tanstack-query",
+    docsUrl: "https://tanstack.com/query/latest/docs/devtools",
+    author: "TanStack",
+    framework: "solid",
+    tags: ["TanStack", "data-fetching", "caching", "state-management"]
+  },
+  // TanStack Router
+  "@tanstack/react-router-devtools": {
+    packageName: "@tanstack/react-router-devtools",
+    title: "TanStack Router Devtools",
+    description: "Inspect routes, navigation, and router state in real-time",
+    requires: {
+      packageName: "@tanstack/react-router",
+      minVersion: "1.0.0"
+    },
+    pluginId: "tanstack-router",
+    docsUrl: "https://tanstack.com/router/latest/docs/devtools",
+    author: "TanStack",
+    framework: "react",
+    featured: true,
+    // Featured plugin
+    tags: ["TanStack", "routing", "navigation"]
+  },
+  "@tanstack/solid-router-devtools": {
+    packageName: "@tanstack/solid-router-devtools",
+    title: "TanStack Router Devtools",
+    description: "Inspect routes, navigation, and router state in real-time",
+    requires: {
+      packageName: "@tanstack/solid-router",
+      minVersion: "1.0.0"
+    },
+    pluginId: "tanstack-router",
+    docsUrl: "https://tanstack.com/router/latest/docs/devtools",
+    author: "TanStack",
+    framework: "solid",
+    tags: ["TanStack", "routing", "navigation"]
+  },
+  // TanStack Form
+  "@tanstack/react-form-devtools": {
+    packageName: "@tanstack/react-form-devtools",
+    title: "TanStack Form Devtools",
+    description: "Debug form state, validation, and field values",
+    requires: {
+      packageName: "@tanstack/react-form",
+      minVersion: "1.23.0"
+    },
+    pluginImport: {
+      importName: "FormDevtoolsPlugin",
+      type: "function"
+    },
+    pluginId: "tanstack-form",
+    docsUrl: "https://tanstack.com/form/latest/docs/devtools",
+    author: "TanStack",
+    framework: "react",
+    isNew: true,
+    tags: ["TanStack", "forms", "validation"]
+  },
+  "@tanstack/solid-form-devtools": {
+    packageName: "@tanstack/solid-form-devtools",
+    title: "TanStack Form Devtools",
+    description: "Debug form state, validation, and field values",
+    requires: {
+      packageName: "@tanstack/solid-form",
+      minVersion: "1.23.0"
+    },
+    pluginImport: {
+      importName: "FormDevtoolsPlugin",
+      type: "function"
+    },
+    pluginId: "tanstack-form",
+    docsUrl: "https://tanstack.com/form/latest/docs/devtools",
+    author: "TanStack",
+    isNew: true,
+    framework: "solid",
+    tags: ["TanStack", "forms", "validation"]
+  },
+  // TanStack Pacer (Example - adjust as needed)
+  "@tanstack/react-pacer-devtools": {
+    packageName: "@tanstack/react-pacer-devtools",
+    title: "Pacer Devtools",
+    description: "Monitor and debug your Pacer animations and transitions",
+    requires: {
+      packageName: "@tanstack/react-pacer",
+      minVersion: "0.16.4"
+    },
+    author: "TanStack",
+    framework: "react",
+    isNew: true,
+    // New plugin banner
+    tags: ["TanStack"]
+  },
+  "@tanstack/solid-pacer-devtools": {
+    packageName: "@tanstack/solid-pacer-devtools",
+    title: "Pacer Devtools",
+    description: "Monitor and debug your Pacer animations and transitions",
+    requires: {
+      packageName: "@tanstack/solid-pacer",
+      minVersion: "0.14.4"
+    },
+    author: "TanStack",
+    framework: "solid",
+    isNew: true,
+    // New plugin banner
+    tags: ["TanStack"]
+  }
+  // ==========================================
+  // THIRD-PARTY PLUGINS - Examples
+  // ==========================================
+  // External contributors can add their plugins below!
+};
+function getAllPluginMetadata() {
+  return Object.values(PLUGIN_REGISTRY);
+}
+
+// src/tabs/semver-utils.ts
+function parseVersion(version) {
+  if (!version) return null;
+  const cleanVersion = version.replace(/^[v^~]/, "").split("-")[0]?.split("+")[0];
+  if (!cleanVersion) return null;
+  const parts = cleanVersion.split(".");
+  if (parts.length < 2) return null;
+  const major = parseInt(parts[0] ?? "0", 10);
+  const minor = parseInt(parts[1] ?? "0", 10);
+  const patch = parseInt(parts[2] ?? "0", 10);
+  if (isNaN(major) || isNaN(minor) || isNaN(patch)) {
+    return null;
+  }
+  return {
+    major,
+    minor,
+    patch,
+    raw: version
+  };
+}
+function compareVersions(v1, v2) {
+  if (v1.major !== v2.major) return v1.major - v2.major;
+  if (v1.minor !== v2.minor) return v1.minor - v2.minor;
+  return v1.patch - v2.patch;
+}
+function satisfiesMinVersion(currentVersion, minVersion) {
+  const current = parseVersion(currentVersion);
+  const min = parseVersion(minVersion);
+  if (!current || !min) return true;
+  return compareVersions(current, min) >= 0;
+}
+function satisfiesMaxVersion(currentVersion, maxVersion) {
+  const current = parseVersion(currentVersion);
+  const max = parseVersion(maxVersion);
+  if (!current || !max) return true;
+  return compareVersions(current, max) <= 0;
+}
+function satisfiesVersionRange(currentVersion, minVersion, maxVersion) {
+  if (!minVersion && !maxVersion) {
+    return { satisfied: true };
+  }
+  if (minVersion && !satisfiesMinVersion(currentVersion, minVersion)) {
+    return {
+      satisfied: false,
+      reason: `Requires v${minVersion} or higher (current: v${currentVersion})`
+    };
+  }
+  if (maxVersion && !satisfiesMaxVersion(currentVersion, maxVersion)) {
+    return {
+      satisfied: false,
+      reason: `Requires v${maxVersion} or lower (current: v${currentVersion})`
+    };
+  }
+  return { satisfied: true };
+}
+
+// src/tabs/marketplace/plugin-utils.ts
+var detectFramework = (pkg, frameworks) => {
+  const allDeps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies
+  };
+  const frameworkPackageMap = {
+    react: ["react", "react-dom"],
+    vue: ["vue", "@vue/core"],
+    solid: ["solid-js"],
+    svelte: ["svelte"],
+    angular: ["@angular/core"]
+  };
+  for (const framework of frameworks) {
+    const frameworkPackages = frameworkPackageMap[framework];
+    if (frameworkPackages && frameworkPackages.some((pkg2) => allDeps[pkg2])) {
+      return framework;
+    }
+  }
+  return "unknown";
+};
+var isPluginRegistered = (registeredPlugins, packageName, pluginName, framework, pluginId) => {
+  if (pluginId) {
+    return Array.from(registeredPlugins).some((id) => {
+      const idLower = id.toLowerCase();
+      const pluginIdLower = pluginId.toLowerCase();
+      return idLower.startsWith(pluginIdLower) || idLower.includes(pluginIdLower);
+    });
+  }
+  if (registeredPlugins.has(packageName)) return true;
+  const pluginWords = pluginName.toLowerCase().split(/[-_/@]/).filter((word) => word.length > 0);
+  const frameworkPart = framework.toLowerCase();
+  return Array.from(registeredPlugins).some((id) => {
+    const idLower = id.toLowerCase();
+    if (idLower.includes(pluginName.toLowerCase())) {
+      return true;
+    }
+    const matchedWords = pluginWords.filter((word) => idLower.includes(word));
+    if (matchedWords.length >= 2) {
+      return true;
+    }
+    if (idLower.includes(frameworkPart) && matchedWords.length >= 1) {
+      return true;
+    }
+    return false;
+  });
+};
+var buildPluginCards = (pkg, currentFramework, registeredPlugins, existingCards) => {
+  const allDeps = {
+    ...pkg.dependencies,
+    ...pkg.devDependencies
+  };
+  const allCards = [];
+  const allPlugins = getAllPluginMetadata();
+  allPlugins.forEach((metadata) => {
+    const devtoolsPackage = metadata.packageName;
+    const isCurrentFramework = metadata.framework === currentFramework || metadata.framework === "other";
+    const requiredPackageName = metadata.requires?.packageName;
+    const hasPackage = requiredPackageName ? !!allDeps[requiredPackageName] : false;
+    const hasDevtools = !!allDeps[devtoolsPackage];
+    let versionInfo;
+    if (hasPackage && metadata.requires) {
+      const currentVersion = requiredPackageName ? allDeps[requiredPackageName] : void 0;
+      if (currentVersion) {
+        const versionCheck = satisfiesVersionRange(
+          currentVersion,
+          metadata.requires.minVersion,
+          metadata.requires.maxVersion
+        );
+        versionInfo = {
+          current: currentVersion,
+          required: metadata.requires.minVersion,
+          satisfied: versionCheck.satisfied,
+          reason: versionCheck.reason
+        };
+      }
+    }
+    const isRegistered = isPluginRegistered(
+      registeredPlugins,
+      devtoolsPackage,
+      metadata.packageName,
+      metadata.framework,
+      metadata.pluginId
+    );
+    let actionType;
+    if (!isCurrentFramework) {
+      actionType = "wrong-framework";
+    } else if (metadata.requires && !hasPackage) {
+      actionType = "requires-package";
+    } else if (versionInfo && !versionInfo.satisfied) {
+      actionType = "bump-version";
+    } else if (hasDevtools && isRegistered) {
+      actionType = "already-installed";
+    } else if (hasDevtools && !isRegistered) {
+      actionType = "add-to-devtools";
+    } else if (!hasDevtools && metadata.requires && hasPackage) {
+      actionType = "install-devtools";
+    } else if (!hasDevtools) {
+      actionType = "install";
+    } else {
+      actionType = "install";
+    }
+    const existing = existingCards.find(
+      (c) => c.devtoolsPackage === devtoolsPackage
+    );
+    allCards.push({
+      requiredPackageName: requiredPackageName || "",
+      devtoolsPackage,
+      framework: metadata.framework,
+      hasPackage,
+      hasDevtools,
+      isRegistered,
+      actionType,
+      status: existing?.status || "idle",
+      error: existing?.error,
+      isCurrentFramework,
+      metadata,
+      versionInfo
+    });
+  });
+  return allCards;
+};
+var groupIntoSections = (allCards) => {
+  const sections = [];
+  const activeCards = allCards.filter(
+    (c) => c.actionType === "already-installed" && c.isRegistered
+  );
+  if (activeCards.length > 0) {
+    sections.push({
+      id: "active",
+      displayName: "\u2713 Active Plugins",
+      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)
+  );
+  if (availableCards.length > 0) {
+    sections.push({
+      id: "available",
+      displayName: "Available Plugins",
+      cards: availableCards
+    });
+  }
+  return sections;
+};
+
+// src/tabs/plugin-marketplace.tsx
+var _tmpl$14 = /* @__PURE__ */ template(`<div><p>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<div>`);
+var PluginMarketplace = () => {
+  const styles = useStyles();
+  const {
+    plugins
+  } = usePlugins();
+  const [pluginSections, setPluginSections] = createSignal([]);
+  const [currentPackageJson, setCurrentPackageJson] = createSignal(null);
+  const [searchInput, setSearchInput] = createSignal("");
+  const [searchQuery, setSearchQuery] = createSignal("");
+  const [collapsedSections, setCollapsedSections] = createSignal(/* @__PURE__ */ new Set());
+  const [showActivePlugins, setShowActivePlugins] = createSignal(true);
+  const [selectedTags, setSelectedTags] = createSignal(/* @__PURE__ */ new Set());
+  const [isSettingsOpen, setIsSettingsOpen] = createSignal(false);
+  let debounceTimeout;
+  const handleSearchInput = (value) => {
+    setSearchInput(value);
+    if (debounceTimeout) {
+      clearTimeout(debounceTimeout);
+    }
+    debounceTimeout = setTimeout(() => {
+      setSearchQuery(value);
+    }, 300);
+  };
+  const toggleSection = (framework) => {
+    setCollapsedSections((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(framework)) {
+        newSet.delete(framework);
+      } else {
+        newSet.add(framework);
+      }
+      return newSet;
+    });
+  };
+  const matchesSearch = (card, query) => {
+    if (!query) return true;
+    const lowerQuery = query.toLowerCase();
+    return card.devtoolsPackage.toLowerCase().includes(lowerQuery) || card.requiredPackageName.toLowerCase().includes(lowerQuery) || card.framework.toLowerCase().includes(lowerQuery);
+  };
+  const getFilteredSections = () => {
+    const query = searchQuery();
+    const showActive = showActivePlugins();
+    const tags = selectedTags();
+    const pkg = currentPackageJson();
+    if (!pkg) return [];
+    const currentFramework = detectFramework(pkg, FRAMEWORKS);
+    const registeredPlugins = new Set(plugins()?.map((p) => p.id || "") || []);
+    const allCards = buildPluginCards(
+      pkg,
+      currentFramework,
+      registeredPlugins,
+      pluginSections().flatMap((s) => s.cards)
+      // Preserve status from existing cards
+    );
+    let sections = groupIntoSections(allCards);
+    if (!showActive) {
+      sections = sections.filter((section) => section.id !== "active");
+    }
+    if (tags.size > 0) {
+      sections = sections.map((section) => ({
+        ...section,
+        cards: section.cards.filter((card) => {
+          if (!card.metadata?.tags) return false;
+          return card.metadata.tags.some((tag) => tags.has(tag));
+        })
+      })).filter((section) => section.cards.length > 0);
+    }
+    if (!query) return sections;
+    return sections.map((section) => ({
+      ...section,
+      cards: section.cards.filter((card) => matchesSearch(card, query))
+    })).filter((section) => section.cards.length > 0);
+  };
+  onMount(() => {
+    const cleanupJsonRead = devtoolsEventClient.on("package-json-read", (event) => {
+      setCurrentPackageJson(event.payload.packageJson);
+      updatePluginCards(event.payload.packageJson);
+    });
+    const cleanupJsonUpdated = devtoolsEventClient.on("package-json-updated", (event) => {
+      setCurrentPackageJson(event.payload.packageJson);
+      updatePluginCards(event.payload.packageJson);
+    });
+    const cleanupDevtoolsInstalled = devtoolsEventClient.on("devtools-installed", (event) => {
+      setPluginSections((prevSections) => prevSections.map((section) => ({
+        ...section,
+        cards: section.cards.map((card) => card.devtoolsPackage === event.payload.packageName ? {
+          ...card,
+          status: event.payload.success ? "success" : "error",
+          error: event.payload.error
+        } : card)
+      })));
+    });
+    const cleanupPluginAdded = devtoolsEventClient.on("plugin-added", (event) => {
+      setPluginSections((prevSections) => prevSections.map((section) => ({
+        ...section,
+        cards: section.cards.map((card) => card.devtoolsPackage === event.payload.packageName ? {
+          ...card,
+          status: event.payload.success ? "success" : "error",
+          error: event.payload.error
+        } : card)
+      })));
+      if (event.payload.success) {
+        const pkg = currentPackageJson();
+        if (pkg) {
+          updatePluginCards(pkg);
+        }
+      }
+    });
+    onCleanup(() => {
+      cleanupJsonRead();
+      cleanupJsonUpdated();
+      cleanupDevtoolsInstalled();
+      cleanupPluginAdded();
+    });
+    devtoolsEventClient.emit("mounted", void 0);
+  });
+  const updatePluginCards = (pkg) => {
+    if (!pkg) return;
+    const currentFramework = detectFramework(pkg, FRAMEWORKS);
+    const registeredPlugins = new Set(plugins()?.map((p) => p.id || "") || []);
+    const allCards = buildPluginCards(pkg, currentFramework, registeredPlugins, pluginSections().flatMap((s) => s.cards));
+    const sections = groupIntoSections(allCards);
+    setPluginSections(sections);
+  };
+  const handleAction = (card) => {
+    if (card.actionType === "requires-package" || card.actionType === "wrong-framework" || card.actionType === "already-installed" || card.actionType === "version-mismatch") {
+      return;
+    }
+    setPluginSections((prevSections) => prevSections.map((section) => ({
+      ...section,
+      cards: section.cards.map((c) => c.devtoolsPackage === card.devtoolsPackage ? {
+        ...c,
+        status: "installing"
+      } : c)
+    })));
+    if (card.actionType === "bump-version") {
+      devtoolsEventClient.emit("bump-package-version", {
+        packageName: card.requiredPackageName,
+        devtoolsPackage: card.devtoolsPackage,
+        pluginName: card.metadata?.title || card.devtoolsPackage,
+        minVersion: card.metadata?.requires?.minVersion,
+        pluginImport: card.metadata?.pluginImport
+      });
+      return;
+    }
+    if (card.actionType === "add-to-devtools") {
+      devtoolsEventClient.emit("add-plugin-to-devtools", {
+        packageName: card.devtoolsPackage,
+        // should always be defined
+        pluginName: card.metadata?.title ?? card.devtoolsPackage,
+        pluginImport: card.metadata?.pluginImport
+      });
+      return;
+    }
+    devtoolsEventClient.emit("install-devtools", {
+      packageName: card.devtoolsPackage,
+      // should always be defined
+      pluginName: card.metadata?.title ?? card.devtoolsPackage,
+      pluginImport: card.metadata?.pluginImport
+    });
+  };
+  const getAllTags = () => {
+    const tags = /* @__PURE__ */ new Set();
+    pluginSections().forEach((section) => {
+      if (section.id === "featured" || section.id === "available") {
+        section.cards.forEach((card) => {
+          if (card.metadata?.tags) {
+            card.metadata.tags.forEach((tag) => tags.add(tag));
+          }
+        });
+      }
+    });
+    return Array.from(tags).sort();
+  };
+  const toggleTag = (tag) => {
+    setSelectedTags((prev) => {
+      const newTags = new Set(prev);
+      if (newTags.has(tag)) {
+        newTags.delete(tag);
+      } else {
+        newTags.add(tag);
+      }
+      return newTags;
+    });
+  };
+  return (() => {
+    var _el$ = _tmpl$26();
+    insert(_el$, createComponent(SettingsPanel, {
+      isOpen: isSettingsOpen,
+      onClose: () => setIsSettingsOpen(false),
+      showActivePlugins,
+      setShowActivePlugins
+    }), null);
+    insert(_el$, createComponent(MarketplaceHeader, {
+      searchInput,
+      onSearchInput: handleSearchInput,
+      onSettingsClick: () => setIsSettingsOpen(!isSettingsOpen()),
+      tags: getAllTags,
+      selectedTags,
+      onToggleTag: toggleTag
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return getFilteredSections().length > 0;
+      },
+      get children() {
+        return createComponent(For, {
+          get each() {
+            return getFilteredSections();
+          },
+          children: (section) => createComponent(PluginSectionComponent, {
+            section,
+            isCollapsed: () => collapsedSections().has(section.id),
+            onToggleCollapse: () => toggleSection(section.id),
+            onCardAction: handleAction
+          })
+        });
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return getFilteredSections().length === 0;
+      },
+      get children() {
+        var _el$2 = _tmpl$14(), _el$3 = _el$2.firstChild;
+        insert(_el$3, (() => {
+          var _c$ = memo(() => !!searchQuery());
+          return () => _c$() ? `No plugins found matching "${searchQuery()}"` : "No additional plugins available. You have all compatible devtools installed and registered!";
+        })());
+        effect((_p$) => {
+          var _v$ = styles().pluginMarketplaceEmpty, _v$2 = styles().pluginMarketplaceEmptyText;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$2;
+      }
+    }), null);
+    effect(() => className(_el$, styles().pluginMarketplace));
+    return _el$;
+  })();
+};
+
+// 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 PluginsTab = () => {
   const {
     plugins,
@@ -1306,13 +3244,19 @@ var PluginsTab = () => {
   const {
     expanded,
     hoverUtils,
-    animationMs
+    animationMs,
+    setForceExpand
   } = useDrawContext();
   const [pluginRefs, setPluginRefs] = createSignal(/* @__PURE__ */ new Map());
+  const [showMarketplace, setShowMarketplace] = createSignal(false);
   const styles = useStyles();
   const {
     theme
   } = useTheme();
+  const hasPlugins = createMemo(() => plugins()?.length && plugins().length > 0);
+  createEffect(() => {
+    setForceExpand(showMarketplace());
+  });
   createEffect(() => {
     const currentActivePlugins = plugins()?.filter((plugin) => activePlugins().includes(plugin.id));
     currentActivePlugins?.forEach((plugin) => {
@@ -1322,77 +3266,111 @@ var PluginsTab = () => {
       }
     });
   });
-  return (() => {
-    var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
-    _el$2.addEventListener("mouseleave", () => hoverUtils.leave());
-    _el$2.addEventListener("mouseenter", () => hoverUtils.enter());
-    insert(_el$3, createComponent(For, {
-      get each() {
-        return plugins();
-      },
-      children: (plugin) => {
-        let pluginHeading;
-        createEffect(() => {
-          if (pluginHeading) {
-            typeof plugin.name === "string" ? pluginHeading.textContent = plugin.name : plugin.name(pluginHeading, theme());
-          }
-        });
-        const isActive = createMemo(() => activePlugins().includes(plugin.id));
-        return (() => {
-          var _el$4 = _tmpl$23(), _el$5 = _el$4.firstChild;
-          _el$4.$$click = () => {
-            toggleActivePlugins(plugin.id);
-          };
-          var _ref$ = pluginHeading;
-          typeof _ref$ === "function" ? use(_ref$, _el$5) : pluginHeading = _el$5;
-          effect((_p$) => {
-            var _v$4 = clsx3(styles().pluginName, {
-              active: isActive()
-            }), _v$5 = `${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`;
-            _v$4 !== _p$.e && className(_el$4, _p$.e = _v$4);
-            _v$5 !== _p$.t && setAttribute(_el$5, "id", _p$.t = _v$5);
-            return _p$;
-          }, {
-            e: void 0,
-            t: void 0
+  const handleMarketplaceClick = () => setShowMarketplace(!showMarketplace());
+  const handlePluginClick = (pluginId) => {
+    if (showMarketplace()) {
+      setShowMarketplace(false);
+    }
+    toggleActivePlugins(pluginId);
+  };
+  return createComponent(Show, {
+    get when() {
+      return hasPlugins();
+    },
+    get fallback() {
+      return createComponent(PluginMarketplace, {});
+    },
+    get children() {
+      var _el$ = _tmpl$15(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+      _el$2.addEventListener("mouseleave", () => {
+        if (!showMarketplace()) {
+          hoverUtils.leave();
+        }
+      });
+      _el$2.addEventListener("mouseenter", () => hoverUtils.enter());
+      insert(_el$4, createComponent(For, {
+        get each() {
+          return plugins();
+        },
+        children: (plugin) => {
+          let pluginHeading;
+          createEffect(() => {
+            if (pluginHeading) {
+              typeof plugin.name === "string" ? pluginHeading.textContent = plugin.name : plugin.name(pluginHeading, theme());
+            }
           });
-          return _el$4;
-        })();
-      }
-    }));
-    insert(_el$, createComponent(For, {
-      get each() {
-        return activePlugins();
-      },
-      children: (pluginId) => (() => {
-        var _el$6 = _tmpl$33();
-        use((el) => {
-          setPluginRefs((prev) => {
-            const updated = new Map(prev);
-            updated.set(pluginId, el);
-            return updated;
+          const isActive = createMemo(() => activePlugins().includes(plugin.id));
+          return (() => {
+            var _el$6 = _tmpl$27(), _el$7 = _el$6.firstChild;
+            _el$6.$$click = () => handlePluginClick(plugin.id);
+            var _ref$ = pluginHeading;
+            typeof _ref$ === "function" ? use(_ref$, _el$7) : pluginHeading = _el$7;
+            effect((_p$) => {
+              var _v$6 = clsx3(styles().pluginName, {
+                active: isActive()
+              }), _v$7 = `${PLUGIN_TITLE_CONTAINER_ID}-${plugin.id}`;
+              _v$6 !== _p$.e && className(_el$6, _p$.e = _v$6);
+              _v$7 !== _p$.t && setAttribute(_el$7, "id", _p$.t = _v$7);
+              return _p$;
+            }, {
+              e: void 0,
+              t: void 0
+            });
+            return _el$6;
+          })();
+        }
+      }));
+      _el$5.$$click = handleMarketplaceClick;
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return showMarketplace();
+        },
+        get fallback() {
+          return createComponent(For, {
+            get each() {
+              return activePlugins();
+            },
+            children: (pluginId) => (() => {
+              var _el$8 = _tmpl$34();
+              use((el) => {
+                setPluginRefs((prev) => {
+                  const updated = new Map(prev);
+                  updated.set(pluginId, el);
+                  return updated;
+                });
+              }, _el$8);
+              setAttribute(_el$8, "id", `${PLUGIN_CONTAINER_ID}-${pluginId}`);
+              effect(() => className(_el$8, styles().pluginsTabContent));
+              return _el$8;
+            })()
           });
-        }, _el$6);
-        setAttribute(_el$6, "id", `${PLUGIN_CONTAINER_ID}-${pluginId}`);
-        effect(() => className(_el$6, styles().pluginsTabContent));
-        return _el$6;
-      })()
-    }), null);
-    effect((_p$) => {
-      var _v$ = styles().pluginsTabPanel, _v$2 = clsx3(styles().pluginsTabDraw(expanded()), {
-        [styles().pluginsTabDraw(expanded())]: expanded()
-      }, styles().pluginsTabDrawTransition(animationMs)), _v$3 = clsx3(styles().pluginsTabSidebar(expanded()), styles().pluginsTabSidebarTransition(animationMs));
-      _v$ !== _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);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$;
-  })();
+        },
+        get children() {
+          return createComponent(PluginMarketplace, {});
+        }
+      }), null);
+      effect((_p$) => {
+        var _v$ = styles().pluginsTabPanel, _v$2 = clsx3(styles().pluginsTabDraw(expanded()), {
+          [styles().pluginsTabDraw(expanded())]: expanded()
+        }, styles().pluginsTabDrawTransition(animationMs)), _v$3 = clsx3(styles().pluginsTabSidebar(expanded()), styles().pluginsTabSidebarTransition(animationMs)), _v$4 = styles().pluginsList, _v$5 = clsx3(styles().pluginNameAddMore, {
+          active: showMarketplace()
+        });
+        _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);
+        _v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0
+      });
+      return _el$;
+    }
+  });
 };
 delegateEvents(["click"]);
 function useHeadChanges(onChange, opts = {}) {
@@ -1457,11 +3435,11 @@ function useHeadChanges(onChange, opts = {}) {
 }
 
 // src/tabs/seo-tab.tsx
-var _tmpl$6 = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`);
-var _tmpl$24 = /* @__PURE__ */ template(`<img alt=Preview>`);
-var _tmpl$34 = /* @__PURE__ */ template(`<div>No Image`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`);
+var _tmpl$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$62 = /* @__PURE__ */ template(`<li>`);
 var SOCIALS = [
   {
@@ -1588,12 +3566,12 @@ var SOCIALS = [
 function SocialPreview(props) {
   const styles = useStyles();
   return (() => {
-    var _el$ = _tmpl$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
+    var _el$ = _tmpl$16(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
     insert(_el$2, () => props.network, _el$3);
     insert(_el$, (() => {
       var _c$ = memo(() => !!props.meta.image);
       return () => _c$() ? (() => {
-        var _el$7 = _tmpl$24();
+        var _el$7 = _tmpl$28();
         effect((_p$) => {
           var _v$8 = props.meta.image, _v$9 = styles().seoPreviewImage;
           _v$8 !== _p$.e && setAttribute(_el$7, "src", _p$.e = _v$8);
@@ -1605,7 +3583,7 @@ function SocialPreview(props) {
         });
         return _el$7;
       })() : (() => {
-        var _el$8 = _tmpl$34();
+        var _el$8 = _tmpl$35();
         _el$8.style.setProperty("background", "#222");
         _el$8.style.setProperty("color", "#888");
         _el$8.style.setProperty("display", "flex");
@@ -1686,7 +3664,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$42();
+            var _el$9 = _tmpl$43();
             insert(_el$9, createComponent(For, {
               get each() {
                 return reports();
@@ -1694,7 +3672,7 @@ var SeoTab = () => {
               children: (report, i) => {
                 const social = SOCIALS[i()];
                 return (() => {
-                  var _el$0 = _tmpl$42();
+                  var _el$0 = _tmpl$43();
                   insert(_el$0, createComponent(SocialPreview, {
                     get meta() {
                       return report.found;
@@ -1709,7 +3687,7 @@ var SeoTab = () => {
                   insert(_el$0, (() => {
                     var _c$2 = memo(() => report.missing.length > 0);
                     return () => _c$2() ? (() => {
-                      var _el$1 = _tmpl$52(), _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$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;
                       insert(_el$10, () => social?.network, _el$13);
                       insert(_el$14, createComponent(For, {
                         get each() {
@@ -1766,9 +3744,9 @@ var tabs = [{
 }];
 
 // src/components/tabs.tsx
-var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$25 = /* @__PURE__ */ template(`<button type=button>`);
-var _tmpl$35 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
+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 Tabs = (props) => {
   const styles = useStyles();
   const {
@@ -1783,11 +3761,11 @@ var Tabs = (props) => {
     hoverUtils
   } = useDrawContext();
   return (() => {
-    var _el$ = _tmpl$7();
+    var _el$ = _tmpl$17();
     insert(_el$, createComponent(For, {
       each: tabs,
       children: (tab) => (() => {
-        var _el$2 = _tmpl$25();
+        var _el$2 = _tmpl$29();
         _el$2.addEventListener("mouseleave", () => {
           if (tab.id === "plugins") hoverUtils.leave();
         });
@@ -1807,7 +3785,7 @@ var Tabs = (props) => {
     insert(_el$, (() => {
       var _c$ = memo(() => pipWindow().pipWindow !== null);
       return () => _c$() ? null : (() => {
-        var _el$3 = _tmpl$35(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+        var _el$3 = _tmpl$36(), _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, {}));
@@ -1830,7 +3808,7 @@ var Tabs = (props) => {
   })();
 };
 delegateEvents(["click"]);
-var _tmpl$8 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$18 = /* @__PURE__ */ template(`<div>`);
 var TabContent = () => {
   const {
     state
@@ -1838,15 +3816,160 @@ var TabContent = () => {
   const styles = useStyles();
   const component = createMemo(() => tabs.find((t) => t.id === state().activeTab)?.component || null);
   return (() => {
-    var _el$ = _tmpl$8();
+    var _el$ = _tmpl$18();
     insert(_el$, () => component()?.());
     effect(() => className(_el$, styles().tabContent));
     return _el$;
   })();
 };
+var _tmpl$19 = /* @__PURE__ */ template(`<div>`);
+var SourceInspector = () => {
+  const highlightStateInit = () => ({
+    element: null,
+    bounding: {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    },
+    dataSource: ""
+  });
+  const [highlightState, setHighlightState] = createStore(highlightStateInit());
+  const resetHighlight = () => {
+    setHighlightState(highlightStateInit());
+  };
+  const [nameTagRef, setNameTagRef] = createSignal(null);
+  const nameTagSize = createElementSize(() => nameTagRef());
+  const [mousePosition, setMousePosition] = createStore({
+    x: 0,
+    y: 0
+  });
+  createEventListener(document, "mousemove", (e) => {
+    setMousePosition({
+      x: e.clientX,
+      y: e.clientY
+    });
+  });
+  const downList = useKeyDownList();
+  const isHighlightingKeysHeld = createMemo(() => {
+    const keys = downList();
+    const isShiftHeld = keys.includes("SHIFT");
+    const isCtrlHeld = keys.includes("CONTROL");
+    const isMetaHeld = keys.includes("META");
+    return isShiftHeld && (isCtrlHeld || isMetaHeld);
+  });
+  createEffect(() => {
+    if (!isHighlightingKeysHeld()) {
+      resetHighlight();
+      return;
+    }
+    const target = document.elementFromPoint(mousePosition.x, mousePosition.y);
+    if (!(target instanceof HTMLElement)) {
+      resetHighlight();
+      return;
+    }
+    if (target === highlightState.element) {
+      return;
+    }
+    const dataSource = target.getAttribute("data-tsd-source");
+    if (!dataSource) {
+      resetHighlight();
+      return;
+    }
+    const rect = target.getBoundingClientRect();
+    const bounding = {
+      width: rect.width,
+      height: rect.height,
+      left: rect.left,
+      top: rect.top
+    };
+    setHighlightState({
+      element: target,
+      bounding,
+      dataSource
+    });
+  });
+  createEventListener(document, "click", (e) => {
+    if (!highlightState.element) return;
+    window.getSelection()?.removeAllRanges();
+    e.preventDefault();
+    e.stopPropagation();
+    fetch(`${location.origin}/__tsd/open-source?source=${encodeURIComponent(highlightState.dataSource)}`).catch(() => {
+    });
+  });
+  const currentElementBoxStyles = createMemo(() => {
+    if (highlightState.element) {
+      return {
+        display: "block",
+        width: `${highlightState.bounding.width}px`,
+        height: `${highlightState.bounding.height}px`,
+        left: `${highlightState.bounding.left}px`,
+        top: `${highlightState.bounding.top}px`,
+        "background-color": "oklch(55.4% 0.046 257.417 /0.25)",
+        transition: "all 0.05s linear",
+        position: "fixed",
+        "z-index": 9999
+      };
+    }
+    return {
+      display: "none"
+    };
+  });
+  const fileNameStyles = createMemo(() => {
+    if (highlightState.element && nameTagRef()) {
+      const windowWidth = window.innerWidth;
+      const nameTagHeight = nameTagSize.height || 26;
+      const nameTagWidth = nameTagSize.width || 0;
+      let left = highlightState.bounding.left;
+      let top = highlightState.bounding.top - nameTagHeight - 4;
+      if (top < 0) {
+        top = highlightState.bounding.top + highlightState.bounding.height + 4;
+      }
+      if (left + nameTagWidth > windowWidth) {
+        left = windowWidth - nameTagWidth - 4;
+      }
+      if (left < 0) {
+        left = 4;
+      }
+      return {
+        position: "fixed",
+        left: `${left}px`,
+        top: `${top}px`,
+        "background-color": "oklch(55.4% 0.046 257.417 /0.80)",
+        color: "white",
+        padding: "2px 4px",
+        fontSize: "12px",
+        "border-radius": "2px",
+        "z-index": 1e4,
+        visibility: "visible",
+        transition: "all 0.05s linear"
+      };
+    }
+    return {
+      display: "none"
+    };
+  });
+  return [(() => {
+    var _el$ = _tmpl$19();
+    use(setNameTagRef, _el$);
+    insert(_el$, () => highlightState.dataSource);
+    effect((_$p) => style(_el$, {
+      ...fileNameStyles(),
+      "pointer-events": "none"
+    }, _$p));
+    return _el$;
+  })(), (() => {
+    var _el$2 = _tmpl$19();
+    effect((_$p) => style(_el$2, {
+      ...currentElementBoxStyles(),
+      "pointer-events": "none"
+    }, _$p));
+    return _el$2;
+  })()];
+};
 
 // src/devtools.tsx
-var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$20 = /* @__PURE__ */ template(`<div>`);
 function DevTools() {
   const {
     settings
@@ -1959,27 +4082,6 @@ function DevTools() {
       });
     }
   });
-  createEffect(() => {
-    const openSourceHandler = (e) => {
-      const isShiftHeld = e.shiftKey;
-      const isCtrlHeld = e.ctrlKey || e.metaKey;
-      if (!isShiftHeld || !isCtrlHeld) return;
-      if (e.target instanceof HTMLElement) {
-        const dataSource = e.target.getAttribute("data-tsd-source");
-        window.getSelection()?.removeAllRanges();
-        if (dataSource) {
-          e.preventDefault();
-          e.stopPropagation();
-          fetch(`${location.origin}/__tsd/open-source?source=${encodeURIComponent(dataSource)}`).catch(() => {
-          });
-        }
-      }
-    };
-    window.addEventListener("click", openSourceHandler);
-    onCleanup(() => {
-      window.removeEventListener("click", openSourceHandler);
-    });
-  });
   const {
     theme
   } = useTheme();
@@ -1993,7 +4095,7 @@ function DevTools() {
           return (pip().pipWindow ?? window).document.body;
         },
         get children() {
-          var _el$ = _tmpl$9();
+          var _el$ = _tmpl$20();
           use(setRootEl, _el$);
           setAttribute(_el$, "data-testid", TANSTACK_DEVTOOLS);
           insert(_el$, createComponent(Show, {
@@ -2023,7 +4125,8 @@ function DevTools() {
                 }
               })];
             }
-          }));
+          }), null);
+          insert(_el$, createComponent(SourceInspector, {}), null);
           return _el$;
         }
       });