@tanstack/devtools 0.6.20 → 0.6.22

package/dist/devtools/{YM72BEIK.js → MBQPV7BO.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 { createComponent, Portal, ssr, ssrAttribute, escape } 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 { createComponent, Portal, ssr, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
+import { createContext, createSignal, createEffect, Show, createMemo, For, useContext, onCleanup, onMount } from 'solid-js';
+import { createShortcut, useKeyDownList } from '@solid-primitives/keyboard';
+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);
@@ -822,12 +826,18 @@ var stylesFactory = (theme) => {
       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};
@@ -887,6 +897,822 @@ var stylesFactory = (theme) => {
     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])};
+      }
+    `,
+    pluginMarketplaceSectionHeaderLeft: css2`
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    `,
+    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;
+    `,
+    pluginMarketplaceSectionChevronCollapsed: css2`
+      transform: rotate(-90deg);
+    `,
+    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;
+    `,
+    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[600], colors.gray[400])};
+      padding: ${size[3]} ${size[2]};
+      cursor: pointer;
+      text-align: center;
+      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: ${t(
+      "linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%)",
+      "linear-gradient(135deg, #374151 0%, #1f2937 100%)"
+    )};
+        color: ${t(colors.gray[900], colors.gray[100])};
+        border-left-color: ${t(colors.blue[500], colors.blue[400])};
+
+        h3::before {
+          animation: sparkle 0.5s ease-in-out infinite;
+        }
+      }
+
+      &.active {
+        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);
+        }
+      }
+
+      &.active:hover {
+        background: ${t(
+      "linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)",
+      "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)"
+    )};
+      }
     `
   };
 };
@@ -1222,13 +2048,881 @@ var SettingsTab = () => {
             })
           })))];
         }
-      })];
+      })];
+    }
+  });
+};
+
+// 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$6 = ["<div", ">New</div>"];
+var _tmpl$24 = ["<img", ">"];
+var _tmpl$33 = ["<span", ">\u2713 v", " \u2022 Min v", "</span>"];
+var _tmpl$43 = ["<p", ">", "</p>"];
+var _tmpl$52 = ["<a", ' target="_blank" rel="noopener noreferrer"', ">Documentation ", "</a>"];
+var _tmpl$62 = ["<div", ">", "</div>"];
+var _tmpl$7 = ['<div class="', '" style="', '">', "<span", ">", '</span><div class="', '">', "</div><div", "><h3", ">", "</h3><p", ">", "</p><p", ">", "</p>", "", "", "</div>", "</div>"];
+var _tmpl$8 = ["<span", ">\u26A0\uFE0F v", " \u2022 Requires v", "+</span>"];
+var _tmpl$9 = ["<span", ">", "</span>"];
+var _tmpl$0 = ["<div", "></div>"];
+var _tmpl$1 = ["<span", ">Installing...</span>"];
+var _tmpl$10 = ["<span", ">Installed!</span>"];
+var _tmpl$11 = ["<div", ">", "", "", "</div>"];
+var PluginCardComponent = (props) => {
+  const styles = useStyles();
+  const {
+    card
+  } = props;
+  return ssr(_tmpl$7, `${escape(styles().pluginMarketplaceCard, true) || ""} ${!card.isCurrentFramework && card.actionType !== "already-installed" ? escape(escape(styles().pluginMarketplaceCardDisabled, true), true) : ""} ${!!card.metadata?.featured && card.actionType !== "already-installed" ? escape(escape(styles().pluginMarketplaceCardFeatured, true), true) : ""} ${card.actionType === "already-installed" ? escape(escape(styles().pluginMarketplaceCardActive, true), true) : ""}`, "position:relative", escape(createComponent(Show, {
+    get when() {
+      return card.metadata?.isNew;
+    },
+    get children() {
+      return ssr(_tmpl$6, ssrAttribute("class", escape(styles().pluginMarketplaceNewBanner, true), false));
+    }
+  })), ssrAttribute("class", escape(getBadgeClass(card, styles), true), false), escape(getBadgeText(card)), `${escape(styles().pluginMarketplaceCardIcon, true) || ""} ${!!card.metadata?.logoUrl ? "custom-logo" : ""}`, escape(createComponent(Show, {
+    get when() {
+      return card.metadata?.logoUrl;
+    },
+    get fallback() {
+      return createComponent(PackageIcon, {});
+    },
+    get children() {
+      return ssr(_tmpl$24, ssrAttribute("src", escape(card.metadata?.logoUrl, true), false) + ssrAttribute("alt", escape(card.metadata?.title, true) || escape(card.devtoolsPackage, true), false) + ssrAttribute("class", escape(styles().pluginMarketplaceCardImage, true), false));
+    }
+  })), ssrAttribute("class", escape(styles().pluginMarketplaceCardHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceCardTitle, true), false), escape(card.metadata?.title) || escape(card.devtoolsPackage), ssrAttribute("class", escape(styles().pluginMarketplaceCardPackageBadge, true), false), escape(card.devtoolsPackage), ssrAttribute("class", escape(styles().pluginMarketplaceCardDescriptionText, true), false), card.actionType === "requires-package" ? `Requires ${escape(card.requiredPackageName)}` : card.actionType === "wrong-framework" ? `For different framework projects` : card.actionType === "already-installed" ? `Active in your devtools` : card.actionType === "version-mismatch" ? escape(card.versionInfo?.reason) || "Version incompatible" : escape(card.metadata?.description) || `For ${escape(card.requiredPackageName)}`, escape(createComponent(Show, {
+    get when() {
+      return card.versionInfo;
+    },
+    get children() {
+      return ssr(_tmpl$43, ssrAttribute("class", escape(styles().pluginMarketplaceCardVersionInfo, true), false), escape(createComponent(Show, {
+        get when() {
+          return card.versionInfo?.satisfied;
+        },
+        get fallback() {
+          return ssr(_tmpl$8, ssrAttribute("class", escape(styles().pluginMarketplaceCardVersionUnsatisfied, true), false), escape(card.versionInfo?.current), escape(card.versionInfo?.required));
+        },
+        get children() {
+          return ssr(_tmpl$33, ssrAttribute("class", escape(styles().pluginMarketplaceCardVersionSatisfied, true), false), escape(card.versionInfo?.current), escape(card.versionInfo?.required));
+        }
+      })));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return card.metadata?.docsUrl;
+    },
+    get children() {
+      return ssr(_tmpl$52, ssrAttribute("href", escape(card.metadata?.docsUrl, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceCardDocsLink, true), false), escape(createComponent(ExternalLinkIcon, {})));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return card.metadata?.tags && card.metadata.tags.length > 0;
+    },
+    get children() {
+      return ssr(_tmpl$62, ssrAttribute("class", escape(styles().pluginMarketplaceCardTags, true), false), escape(createComponent(For, {
+        get each() {
+          return card.metadata?.tags;
+        },
+        children: (tag) => ssr(_tmpl$9, ssrAttribute("class", escape(styles().pluginMarketplaceCardTag, true), false), escape(tag))
+      })));
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return card.status === "idle";
+    },
+    get fallback() {
+      return ssr(_tmpl$11, ssrAttribute("class", escape(styles().pluginMarketplaceCardStatus, true), false), escape(createComponent(Show, {
+        get when() {
+          return card.status === "installing";
+        },
+        get children() {
+          return [ssr(_tmpl$0, ssrAttribute("class", escape(styles().pluginMarketplaceCardSpinner, true), false)), ssr(_tmpl$1, ssrAttribute("class", escape(styles().pluginMarketplaceCardStatusText, true), false))];
+        }
+      })), escape(createComponent(Show, {
+        get when() {
+          return card.status === "success";
+        },
+        get children() {
+          return [createComponent(CheckCircleIcon, {}), ssr(_tmpl$10, ssrAttribute("class", escape(styles().pluginMarketplaceCardStatusText, true), false))];
+        }
+      })), escape(createComponent(Show, {
+        get when() {
+          return card.status === "error";
+        },
+        get children() {
+          return [createComponent(XCircleIcon, {}), ssr(_tmpl$9, ssrAttribute("class", escape(styles().pluginMarketplaceCardStatusTextError, true), false), escape(card.error) || "Failed to install")];
+        }
+      })));
+    },
+    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 card.actionType === "already-installed" ? styles().pluginMarketplaceButtonInstalled : "";
+        },
+        get children() {
+          return getButtonText(card);
+        }
+      });
+    }
+  })));
+};
+
+// src/tabs/marketplace/plugin-section.tsx
+var _tmpl$12 = ["<div", ">", "</div>"];
+var _tmpl$25 = ["<div", "><div", "><div", '><div class="', '">', "</div><h3", ">", "</h3></div></div>", "</div>"];
+var PluginSectionComponent = (props) => {
+  const styles = useStyles();
+  return ssr(_tmpl$25, ssrAttribute("class", escape(styles().pluginMarketplaceSection, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeaderLeft, true), false), `${escape(styles().pluginMarketplaceSectionChevron, true) || ""} ${props.isCollapsed() ? escape(escape(styles().pluginMarketplaceSectionChevronCollapsed, true), true) : ""}`, escape(createComponent(ChevronDownIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSectionTitle, true), false), escape(props.section.displayName), escape(createComponent(Show, {
+    get when() {
+      return !props.isCollapsed();
+    },
+    get children() {
+      return ssr(_tmpl$12, ssrAttribute("class", escape(styles().pluginMarketplaceGrid, true), false), escape(createComponent(For, {
+        get each() {
+          return props.section.cards;
+        },
+        children: (card) => createComponent(PluginCardComponent, {
+          card,
+          get onAction() {
+            return props.onCardAction;
+          }
+        })
+      })));
+    }
+  })));
+};
+var _tmpl$13 = ["<div", "><div", "><h3", ">Marketplace Settings</h3><button", ">", "</button></div><div", ">", "</div></div>"];
+var SettingsPanel = (props) => {
+  const styles = useStyles();
+  return createComponent(Show, {
+    get when() {
+      return props.isOpen();
+    },
+    get children() {
+      return ssr(_tmpl$13, ssrAttribute("class", escape(styles().pluginMarketplaceSettingsPanel, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSettingsPanelHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSettingsPanelTitle, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSettingsPanelClose, true), false), escape(createComponent(CloseIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSettingsPanelContent, true), false), escape(createComponent(Checkbox, {
+        label: "Show active plugins",
+        description: "Display installed plugins in a separate section",
+        get checked() {
+          return props.showActivePlugins();
+        },
+        onChange: (checked) => props.setShowActivePlugins(checked)
+      })));
+    }
+  });
+};
+var _tmpl$14 = ["<div", ">", "</div>"];
+var _tmpl$26 = ['<button class="', '">', "</button>"];
+var TagFilters = (props) => {
+  const styles = useStyles();
+  return createComponent(Show, {
+    get when() {
+      return props.tags().length > 0;
+    },
+    get children() {
+      return ssr(_tmpl$14, ssrAttribute("class", escape(styles().pluginMarketplaceTagsContainer, true), false), escape(createComponent(For, {
+        get each() {
+          return props.tags();
+        },
+        children: (tag) => ssr(_tmpl$26, `${escape(styles().pluginMarketplaceTagButton, true) || ""} ${props.selectedTags().has(tag) ? escape(escape(styles().pluginMarketplaceTagButtonActive, true), true) : ""}`, escape(tag))
+      })));
+    }
+  });
+};
+
+// src/tabs/marketplace/marketplace-header.tsx
+var _tmpl$15 = ["<div", "><div", "><h2", '>Plugin Marketplace</h2><div style="', '"><div', ">", '<input type="text"', ' placeholder="Search plugins..."', "></div><button", ">", "</button></div></div><p", ">Discover and install devtools for TanStack Query, Router, Form, and Pacer</p>", "</div>"];
+var MarketplaceHeader = (props) => {
+  const styles = useStyles();
+  return ssr(_tmpl$15, ssrAttribute("class", escape(styles().pluginMarketplaceHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceTitleRow, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceTitle, true), false), "display:flex;align-items:center", ssrAttribute("class", escape(styles().pluginMarketplaceSearchWrapper, true), false), escape(createComponent(SearchIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSearch, true), false), ssrAttribute("value", escape(props.searchInput(), true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSettingsButton, true), false), escape(createComponent(SettingsIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceDescription, true), false), escape(createComponent(TagFilters, {
+    get tags() {
+      return props.tags;
+    },
+    get selectedTags() {
+      return props.selectedTags;
+    },
+    get onToggleTag() {
+      return props.onToggleTag;
+    }
+  })));
+};
+
+// 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$16 = ["<div", "><p", ">", "</p></div>"];
+var _tmpl$27 = ["<div", ">", "", "", "", "</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 ssr(_tmpl$27, ssrAttribute("class", escape(styles().pluginMarketplace, true), false), escape(createComponent(SettingsPanel, {
+    isOpen: isSettingsOpen,
+    onClose: () => setIsSettingsOpen(false),
+    showActivePlugins,
+    setShowActivePlugins
+  })), escape(createComponent(MarketplaceHeader, {
+    searchInput,
+    onSearchInput: handleSearchInput,
+    onSettingsClick: () => setIsSettingsOpen(!isSettingsOpen()),
+    tags: getAllTags,
+    selectedTags,
+    onToggleTag: toggleTag
+  })), escape(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
+        })
+      });
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return getFilteredSections().length === 0;
+    },
+    get children() {
+      return ssr(_tmpl$16, ssrAttribute("class", escape(styles().pluginMarketplaceEmpty, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceEmptyText, true), false), searchQuery() ? `No plugins found matching "${escape(searchQuery())}"` : "No additional plugins available. You have all compatible devtools installed and registered!");
+    }
+  })));
 };
-var _tmpl$6 = ["<div", "><div", "><div", ">", "</div></div>", "</div>"];
-var _tmpl$24 = ["<div", '><h3 id="', '"></h3></div>'];
-var _tmpl$33 = ['<div id="', '"', "></div>"];
+
+// src/tabs/plugins-tab.tsx
+var _tmpl$17 = ["<div", "><div", "><div", "><div", ">", "</div><div", "><h3>Add More</h3></div></div></div>", "</div>"];
+var _tmpl$28 = ["<div", '><h3 id="', '"></h3></div>'];
+var _tmpl$34 = ['<div id="', '"', "></div>"];
 var PluginsTab = () => {
   const {
     plugins,
@@ -1238,13 +2932,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) => {
@@ -1254,26 +2954,48 @@ var PluginsTab = () => {
       }
     });
   });
-  return ssr(_tmpl$6, ssrAttribute("class", escape(styles().pluginsTabPanel, true), false), ssrAttribute("class", escape(clsx3(styles().pluginsTabDraw(expanded()), {
-    [styles().pluginsTabDraw(expanded())]: expanded()
-  }, styles().pluginsTabDrawTransition(animationMs)), true), false), ssrAttribute("class", escape(clsx3(styles().pluginsTabSidebar(expanded()), styles().pluginsTabSidebarTransition(animationMs)), true), false), escape(createComponent(For, {
-    get each() {
-      return plugins();
+  return createComponent(Show, {
+    get when() {
+      return hasPlugins();
     },
-    children: (plugin) => {
-      createEffect(() => {
-      });
-      const isActive = createMemo(() => activePlugins().includes(plugin.id));
-      return ssr(_tmpl$24, ssrAttribute("class", escape(clsx3(styles().pluginName, {
-        active: isActive()
-      }), true), false), `${escape(PLUGIN_TITLE_CONTAINER_ID, true)}-${escape(plugin.id, true)}`);
-    }
-  })), escape(createComponent(For, {
-    get each() {
-      return activePlugins();
+    get fallback() {
+      return createComponent(PluginMarketplace, {});
     },
-    children: (pluginId) => ssr(_tmpl$33, `${escape(PLUGIN_CONTAINER_ID, true)}-${escape(pluginId, true)}`, ssrAttribute("class", escape(styles().pluginsTabContent, true), false))
-  })));
+    get children() {
+      return ssr(_tmpl$17, ssrAttribute("class", escape(styles().pluginsTabPanel, true), false), ssrAttribute("class", escape(clsx3(styles().pluginsTabDraw(expanded()), {
+        [styles().pluginsTabDraw(expanded())]: expanded()
+      }, styles().pluginsTabDrawTransition(animationMs)), true), false), ssrAttribute("class", escape(clsx3(styles().pluginsTabSidebar(expanded()), styles().pluginsTabSidebarTransition(animationMs)), true), false), ssrAttribute("class", escape(styles().pluginsList, true), false), escape(createComponent(For, {
+        get each() {
+          return plugins();
+        },
+        children: (plugin) => {
+          createEffect(() => {
+          });
+          const isActive = createMemo(() => activePlugins().includes(plugin.id));
+          return ssr(_tmpl$28, ssrAttribute("class", escape(clsx3(styles().pluginName, {
+            active: isActive()
+          }), true), false), `${escape(PLUGIN_TITLE_CONTAINER_ID, true)}-${escape(plugin.id, true)}`);
+        }
+      })), ssrAttribute("class", escape(clsx3(styles().pluginNameAddMore, {
+        active: showMarketplace()
+      }), true), false), escape(createComponent(Show, {
+        get when() {
+          return showMarketplace();
+        },
+        get fallback() {
+          return createComponent(For, {
+            get each() {
+              return activePlugins();
+            },
+            children: (pluginId) => ssr(_tmpl$34, `${escape(PLUGIN_CONTAINER_ID, true)}-${escape(pluginId, true)}`, ssrAttribute("class", escape(styles().pluginsTabContent, true), false))
+          });
+        },
+        get children() {
+          return createComponent(PluginMarketplace, {});
+        }
+      })));
+    }
+  });
 };
 function useHeadChanges(onChange, opts = {}) {
   const {
@@ -1337,12 +3059,12 @@ function useHeadChanges(onChange, opts = {}) {
 }
 
 // src/tabs/seo-tab.tsx
-var _tmpl$7 = ["<div", ' style="', '"><div', ' style="', '">', " Preview</div>", "<div", ">", "</div><div", ">", "</div><div", ">", "</div></div>"];
-var _tmpl$25 = ["<img", ' alt="Preview"', ">"];
-var _tmpl$34 = ["<div", ' style="', '">No Image</div>'];
-var _tmpl$43 = ["<div", ">", "</div>"];
-var _tmpl$52 = ["<div>", "", "</div>"];
-var _tmpl$62 = ["<div", "><strong>Missing tags for ", ":</strong><ul", ">", "</ul></div>"];
+var _tmpl$18 = ["<div", ' style="', '"><div', ' style="', '">', " Preview</div>", "<div", ">", "</div><div", ">", "</div><div", ">", "</div></div>"];
+var _tmpl$29 = ["<img", ' alt="Preview"', ">"];
+var _tmpl$35 = ["<div", ' style="', '">No Image</div>'];
+var _tmpl$44 = ["<div", ">", "</div>"];
+var _tmpl$53 = ["<div>", "", "</div>"];
+var _tmpl$63 = ["<div", "><strong>Missing tags for ", ":</strong><ul", ">", "</ul></div>"];
 var _tmpl$72 = ["<li", ">", "</li>"];
 var SOCIALS = [
   {
@@ -1468,7 +3190,7 @@ var SOCIALS = [
 ];
 function SocialPreview(props) {
   const styles = useStyles();
-  return ssr(_tmpl$7, ssrAttribute("class", escape(styles().seoPreviewCard, true), false), "border-color:" + escape(props.color, true), ssrAttribute("class", escape(styles().seoPreviewHeader, true), false), "color:" + escape(props.color, true), escape(props.network), props.meta.image ? ssr(_tmpl$25, ssrAttribute("src", escape(props.meta.image, true), false), ssrAttribute("class", escape(styles().seoPreviewImage, true), false)) : ssr(_tmpl$34, ssrAttribute("class", escape(styles().seoPreviewImage, true), false), "background:#222;color:#888;display:flex;align-items:center;justify-content:center;min-height:80px;width:100%"), ssrAttribute("class", escape(styles().seoPreviewTitle, true), false), escape(props.meta.title) || "No Title", ssrAttribute("class", escape(styles().seoPreviewDesc, true), false), escape(props.meta.description) || "No Description", ssrAttribute("class", escape(styles().seoPreviewUrl, true), false), escape(props.meta.url) || escape(window.location.href));
+  return ssr(_tmpl$18, ssrAttribute("class", escape(styles().seoPreviewCard, true), false), "border-color:" + escape(props.color, true), ssrAttribute("class", escape(styles().seoPreviewHeader, true), false), "color:" + escape(props.color, true), escape(props.network), props.meta.image ? ssr(_tmpl$29, ssrAttribute("src", escape(props.meta.image, true), false), ssrAttribute("class", escape(styles().seoPreviewImage, true), false)) : ssr(_tmpl$35, ssrAttribute("class", escape(styles().seoPreviewImage, true), false), "background:#222;color:#888;display:flex;align-items:center;justify-content:center;min-height:80px;width:100%"), ssrAttribute("class", escape(styles().seoPreviewTitle, true), false), escape(props.meta.title) || "No Title", ssrAttribute("class", escape(styles().seoPreviewDesc, true), false), escape(props.meta.description) || "No Description", ssrAttribute("class", escape(styles().seoPreviewUrl, true), false), escape(props.meta.url) || escape(window.location.href));
 }
 var SeoTab = () => {
   const [reports, setReports] = createSignal(analyzeHead());
@@ -1513,13 +3235,13 @@ var SeoTab = () => {
             }
           }), createComponent(SectionDescription, {
             children: "See how your current page will look when shared on popular social networks. The tool checks for essential meta tags and highlights any that are missing."
-          }), ssr(_tmpl$43, ssrAttribute("class", escape(styles().seoPreviewSection, true), false), escape(createComponent(For, {
+          }), ssr(_tmpl$44, ssrAttribute("class", escape(styles().seoPreviewSection, true), false), escape(createComponent(For, {
             get each() {
               return reports();
             },
             children: (report, i) => {
               const social = SOCIALS[i()];
-              return ssr(_tmpl$52, escape(createComponent(SocialPreview, {
+              return ssr(_tmpl$53, escape(createComponent(SocialPreview, {
                 get meta() {
                   return report.found;
                 },
@@ -1529,7 +3251,7 @@ var SeoTab = () => {
                 get network() {
                   return social.network;
                 }
-              })), report.missing.length > 0 ? escape(ssr(_tmpl$62, ssrAttribute("class", escape(styles().seoMissingTagsSection, true), false), escape(social?.network), ssrAttribute("class", escape(styles().seoMissingTagsList, true), false), escape(createComponent(For, {
+              })), report.missing.length > 0 ? escape(ssr(_tmpl$63, ssrAttribute("class", escape(styles().seoMissingTagsSection, true), false), escape(social?.network), ssrAttribute("class", escape(styles().seoMissingTagsList, true), false), escape(createComponent(For, {
                 get each() {
                   return report.missing;
                 },
@@ -1562,9 +3284,9 @@ var tabs = [{
 }];
 
 // src/components/tabs.tsx
-var _tmpl$8 = ["<div", ">", "", "</div>"];
-var _tmpl$26 = ['<button type="button"', ">", "</button>"];
-var _tmpl$35 = ['<div style="', '"><button type="button"', ">", '</button><button type="button"', ">", "</button></div>"];
+var _tmpl$19 = ["<div", ">", "", "</div>"];
+var _tmpl$210 = ['<button type="button"', ">", "</button>"];
+var _tmpl$36 = ['<div style="', '"><button type="button"', ">", '</button><button type="button"', ">", "</button></div>"];
 var Tabs = (props) => {
   const styles = useStyles();
   const {
@@ -1575,25 +3297,161 @@ var Tabs = (props) => {
   const {
     hoverUtils
   } = useDrawContext();
-  return ssr(_tmpl$8, ssrAttribute("class", escape(styles().tabContainer, true), false), escape(createComponent(For, {
+  return ssr(_tmpl$19, ssrAttribute("class", escape(styles().tabContainer, true), false), escape(createComponent(For, {
     each: tabs,
-    children: (tab) => ssr(_tmpl$26, ssrAttribute("class", escape(clsx3(styles().tab, {
+    children: (tab) => ssr(_tmpl$210, ssrAttribute("class", escape(clsx3(styles().tab, {
       active: state().activeTab === tab.id
     }), true), false), escape(tab.icon()))
-  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$35, "margin-top:auto", ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
+  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$36, "margin-top:auto", ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
 };
-var _tmpl$9 = ["<div", ">", "</div>"];
+var _tmpl$20 = ["<div", ">", "</div>"];
 var TabContent = () => {
   const {
     state
   } = useDevtoolsState();
   const styles = useStyles();
   const component = createMemo(() => tabs.find((t) => t.id === state().activeTab)?.component || null);
-  return ssr(_tmpl$9, ssrAttribute("class", escape(styles().tabContent, true), false), escape(component()?.()));
+  return ssr(_tmpl$20, ssrAttribute("class", escape(styles().tabContent, true), false), escape(component()?.()));
+};
+var _tmpl$21 = ['<div style="', '">', "</div>"];
+var _tmpl$211 = ['<div style="', '"></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 [ssr(_tmpl$21, ssrStyle({
+    ...fileNameStyles(),
+    "pointer-events": "none"
+  }), escape(highlightState.dataSource)), ssr(_tmpl$211, ssrStyle({
+    ...currentElementBoxStyles(),
+    "pointer-events": "none"
+  }))];
 };
 
 // src/devtools.tsx
-var _tmpl$10 = ["<div", ">", "</div>"];
+var _tmpl$30 = ["<div", ">", "", "</div>"];
 function DevTools() {
   const {
     settings
@@ -1677,27 +3535,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();
@@ -1711,7 +3548,7 @@ function DevTools() {
           return (pip().pipWindow ?? window).document.body;
         },
         get children() {
-          return ssr(_tmpl$10, ssrAttribute("data-testid", escape(TANSTACK_DEVTOOLS, true), false), escape(createComponent(Show, {
+          return ssr(_tmpl$30, ssrAttribute("data-testid", escape(TANSTACK_DEVTOOLS, true), false), escape(createComponent(Show, {
             get when() {
               return pip().pipWindow !== null ? true : settings().requireUrlFlag ? window.location.search.includes(settings().urlFlag) : true;
             },
@@ -1737,7 +3574,7 @@ function DevTools() {
                 }
               })];
             }
-          })));
+          })), escape(createComponent(SourceInspector, {})));
         }
       });
     }