@tanstack/devtools 0.10.3 → 0.10.5

package/dist/dev.js

@@ -30,7 +30,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/RZMDLR3T.js'));
+      this.#Component = lazy(() => import('./devtools/WI3NLQMI.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/dist/devtools/{OJR76FMH.js → 7YOCA5XE.js}

@@ -516,6 +516,69 @@ var tokens = {
 
 // src/styles/use-styles.ts
 var mSecondsToCssSeconds = (mSeconds) => `${(mSeconds / 1e3).toFixed(2)}s`;
+var fadeIn = goober.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+var slideInRight = goober.keyframes`
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+`;
+var slideUp = goober.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+var statusFadeIn = goober.keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+var iconPop = goober.keyframes`
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+`;
+var spin = goober.keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var sparkle = goober.keyframes`
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.1) rotate(10deg);
+  }
+`;
 var stylesFactory = (theme) => {
   const { colors, font, size, border } = tokens;
   const { fontFamily, size: fontSize } = font;
@@ -1111,18 +1174,7 @@ var stylesFactory = (theme) => {
       "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);
-        }
-      }
+      animation: ${fadeIn} 0.3s ease;
     `,
     pluginMarketplaceHeader: css2`
       margin-bottom: 2rem;
@@ -1268,16 +1320,7 @@ var stylesFactory = (theme) => {
       z-index: 1000;
       display: flex;
       flex-direction: column;
-      animation: slideInRight 0.3s ease;
-
-      @keyframes slideInRight {
-        from {
-          transform: translateX(100%);
-        }
-        to {
-          transform: translateX(0);
-        }
-      }
+      animation: ${slideInRight} 0.3s ease;
     `,
     pluginMarketplaceSettingsPanelHeader: css2`
       display: flex;
@@ -1318,18 +1361,7 @@ var stylesFactory = (theme) => {
       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);
-        }
-      }
+      animation: ${slideUp} 0.4s ease;
     `,
     pluginMarketplaceCard: css2`
       background: ${t(colors.white, colors.darkGray[800])};
@@ -1517,33 +1549,12 @@ var stylesFactory = (theme) => {
       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;
-        }
-      }
+      animation: ${statusFadeIn} 0.3s ease;
 
       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);
-        }
+        animation: ${iconPop} 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
       }
     `,
     pluginMarketplaceCardSpinner: css2`
@@ -1552,13 +1563,7 @@ var stylesFactory = (theme) => {
       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);
-        }
-      }
+      animation: ${spin} 0.8s linear infinite;
     `,
     pluginMarketplaceCardStatusText: css2`
       font-size: 0.875rem;
@@ -1575,7 +1580,7 @@ var stylesFactory = (theme) => {
       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;
+      animation: ${fadeIn} 0.3s ease;
     `,
     pluginMarketplaceEmptyText: css2`
       font-size: 0.95rem;
@@ -1783,19 +1788,7 @@ var stylesFactory = (theme) => {
         &::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);
+          animation: ${sparkle} 2s ease-in-out infinite;
         }
       }
 
@@ -1808,7 +1801,7 @@ var stylesFactory = (theme) => {
         border-left-color: ${t(colors.blue[500], colors.blue[400])};
 
         h3::before {
-          animation: sparkle 0.5s ease-in-out infinite;
+          animation: ${sparkle} 0.5s ease-in-out infinite;
         }
       }
 
@@ -3472,7 +3465,7 @@ var Tabs = (props) => {
     children: (tab) => ssr(_tmpl$210, ssrAttribute("class", escape(clsx3(styles().tab, {
       active: state().activeTab === tab.id
     }), true), false), escape(tab.icon()))
-  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$37, "margin-top:auto", ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
+  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$37, "margin-top:auto;width:100%", ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
 };
 var _tmpl$20 = ["<div", ">", "</div>"];
 var TabContent = () => {
@@ -3714,9 +3707,19 @@ function DevTools() {
     }
   });
   createEffect(() => {
+    const isEditableTarget = (element) => {
+      if (!element || !(element instanceof HTMLElement)) return false;
+      if (element.isContentEditable) return true;
+      const tagName = element.tagName;
+      if (tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT") {
+        return true;
+      }
+      return element.getAttribute("role") === "textbox";
+    };
     const permutations = getHotkeyPermutations(settings().openHotkey);
     for (const permutation of permutations) {
       createShortcut(permutation, () => {
+        if (isEditableTarget(document.activeElement)) return;
         toggleOpen();
       });
     }

package/dist/devtools/{RZMDLR3T.js → WI3NLQMI.js}

@@ -516,6 +516,69 @@ var tokens = {
 
 // src/styles/use-styles.ts
 var mSecondsToCssSeconds = (mSeconds) => `${(mSeconds / 1e3).toFixed(2)}s`;
+var fadeIn = goober.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+var slideInRight = goober.keyframes`
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+`;
+var slideUp = goober.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+var statusFadeIn = goober.keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+var iconPop = goober.keyframes`
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+`;
+var spin = goober.keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var sparkle = goober.keyframes`
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.1) rotate(10deg);
+  }
+`;
 var stylesFactory = (theme) => {
   const { colors, font, size, border } = tokens;
   const { fontFamily, size: fontSize } = font;
@@ -1111,18 +1174,7 @@ var stylesFactory = (theme) => {
       "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);
-        }
-      }
+      animation: ${fadeIn} 0.3s ease;
     `,
     pluginMarketplaceHeader: css2`
       margin-bottom: 2rem;
@@ -1268,16 +1320,7 @@ var stylesFactory = (theme) => {
       z-index: 1000;
       display: flex;
       flex-direction: column;
-      animation: slideInRight 0.3s ease;
-
-      @keyframes slideInRight {
-        from {
-          transform: translateX(100%);
-        }
-        to {
-          transform: translateX(0);
-        }
-      }
+      animation: ${slideInRight} 0.3s ease;
     `,
     pluginMarketplaceSettingsPanelHeader: css2`
       display: flex;
@@ -1318,18 +1361,7 @@ var stylesFactory = (theme) => {
       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);
-        }
-      }
+      animation: ${slideUp} 0.4s ease;
     `,
     pluginMarketplaceCard: css2`
       background: ${t(colors.white, colors.darkGray[800])};
@@ -1517,33 +1549,12 @@ var stylesFactory = (theme) => {
       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;
-        }
-      }
+      animation: ${statusFadeIn} 0.3s ease;
 
       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);
-        }
+        animation: ${iconPop} 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
       }
     `,
     pluginMarketplaceCardSpinner: css2`
@@ -1552,13 +1563,7 @@ var stylesFactory = (theme) => {
       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);
-        }
-      }
+      animation: ${spin} 0.8s linear infinite;
     `,
     pluginMarketplaceCardStatusText: css2`
       font-size: 0.875rem;
@@ -1575,7 +1580,7 @@ var stylesFactory = (theme) => {
       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;
+      animation: ${fadeIn} 0.3s ease;
     `,
     pluginMarketplaceEmptyText: css2`
       font-size: 0.95rem;
@@ -1783,19 +1788,7 @@ var stylesFactory = (theme) => {
         &::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);
+          animation: ${sparkle} 2s ease-in-out infinite;
         }
       }
 
@@ -1808,7 +1801,7 @@ var stylesFactory = (theme) => {
         border-left-color: ${t(colors.blue[500], colors.blue[400])};
 
         h3::before {
-          animation: sparkle 0.5s ease-in-out infinite;
+          animation: ${sparkle} 0.5s ease-in-out infinite;
         }
       }
 
@@ -3996,6 +3989,7 @@ var Tabs = (props) => {
       return () => _c$() ? null : (() => {
         var _el$3 = _tmpl$36(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
         _el$3.style.setProperty("margin-top", "auto");
+        _el$3.style.setProperty("width", "100%");
         _el$4.$$click = handleDetachment;
         insert(_el$4, createComponent(PiP, {}));
         _el$5.$$click = () => props.toggleOpen();
@@ -4300,9 +4294,19 @@ function DevTools() {
     }
   });
   createEffect(() => {
+    const isEditableTarget = (element) => {
+      if (!element || !(element instanceof HTMLElement)) return false;
+      if (element.isContentEditable) return true;
+      const tagName = element.tagName;
+      if (tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT") {
+        return true;
+      }
+      return element.getAttribute("role") === "textbox";
+    };
     const permutations = getHotkeyPermutations(settings().openHotkey);
     for (const permutation of permutations) {
       createShortcut(permutation, () => {
+        if (isEditableTarget(document.activeElement)) return;
         toggleOpen();
       });
     }

package/dist/index.js

@@ -30,7 +30,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/RZMDLR3T.js'));
+      this.#Component = lazy(() => import('./devtools/WI3NLQMI.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/components/tabs.tsx

@@ -45,6 +45,7 @@ export const Tabs = (props: TabsProps) => {
         <div
           style={{
             'margin-top': 'auto',
+            width: '100%',
           }}
         >
           <button

package/src/devtools.tsx

@@ -165,10 +165,25 @@ export default function DevTools() {
     }
   })
   createEffect(() => {
+    const isEditableTarget = (element: Element | null) => {
+      if (!element || !(element instanceof HTMLElement)) return false
+      if (element.isContentEditable) return true
+      const tagName = element.tagName
+      if (
+        tagName === 'INPUT' ||
+        tagName === 'TEXTAREA' ||
+        tagName === 'SELECT'
+      ) {
+        return true
+      }
+      return element.getAttribute('role') === 'textbox'
+    }
+
     const permutations = getHotkeyPermutations(settings().openHotkey)
 
     for (const permutation of permutations) {
       createShortcut(permutation, () => {
+        if (isEditableTarget(document.activeElement)) return
         toggleOpen()
       })
     }

package/src/styles/use-styles.ts

@@ -9,6 +9,76 @@ import type { DevtoolsStore } from '../context/devtools-store'
 const mSecondsToCssSeconds = (mSeconds: number) =>
   `${(mSeconds / 1000).toFixed(2)}s`
 
+const fadeIn = goober.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`
+
+const slideInRight = goober.keyframes`
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+`
+
+const slideUp = goober.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`
+
+const statusFadeIn = goober.keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`
+
+const iconPop = goober.keyframes`
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+`
+
+const spin = goober.keyframes`
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+const sparkle = goober.keyframes`
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(1.1) rotate(10deg);
+  }
+`
+
 const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
   const { colors, font, size, border } = tokens
   const { fontFamily, size: fontSize } = font
@@ -635,18 +705,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
         '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);
-        }
-      }
+      animation: ${fadeIn} 0.3s ease;
     `,
     pluginMarketplaceHeader: css`
       margin-bottom: 2rem;
@@ -792,16 +851,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       z-index: 1000;
       display: flex;
       flex-direction: column;
-      animation: slideInRight 0.3s ease;
-
-      @keyframes slideInRight {
-        from {
-          transform: translateX(100%);
-        }
-        to {
-          transform: translateX(0);
-        }
-      }
+      animation: ${slideInRight} 0.3s ease;
     `,
     pluginMarketplaceSettingsPanelHeader: css`
       display: flex;
@@ -842,18 +892,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       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);
-        }
-      }
+      animation: ${slideUp} 0.4s ease;
     `,
     pluginMarketplaceCard: css`
       background: ${t(colors.white, colors.darkGray[800])};
@@ -1041,33 +1080,12 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       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;
-        }
-      }
+      animation: ${statusFadeIn} 0.3s ease;
 
       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);
-        }
+        animation: ${iconPop} 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
       }
     `,
     pluginMarketplaceCardSpinner: css`
@@ -1076,13 +1094,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       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);
-        }
-      }
+      animation: ${spin} 0.8s linear infinite;
     `,
     pluginMarketplaceCardStatusText: css`
       font-size: 0.875rem;
@@ -1099,7 +1111,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       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;
+      animation: ${fadeIn} 0.3s ease;
     `,
     pluginMarketplaceEmptyText: css`
       font-size: 0.95rem;
@@ -1311,19 +1323,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
         &::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);
+          animation: ${sparkle} 2s ease-in-out infinite;
         }
       }
 
@@ -1336,7 +1336,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
         border-left-color: ${t(colors.blue[500], colors.blue[400])};
 
         h3::before {
-          animation: sparkle 0.5s ease-in-out infinite;
+          animation: ${sparkle} 0.5s ease-in-out infinite;
         }
       }