@tanstack/devtools 0.8.2 → 0.9.0

package/dist/devtools/{GGWR254Q.js → LWN3DL7E.js}

@@ -1,4 +1,4 @@
-import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter, MAX_ACTIVE_PLUGINS } from '../chunk/G64KXXVZ.js';
+import { usePiPWindow, TANSTACK_DEVTOOLS, keyboardModifiers, getAllPermutations, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, MAX_ACTIVE_PLUGINS, uppercaseFirstLetter } from '../chunk/YGJWPK3G.js';
 import { delegateEvents, createComponent, Portal, template, use, setAttribute, insert, memo, effect, className, addEventListener, style, classList } from 'solid-js/web';
 import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
 import { createShortcut, useKeyDownList } from '@solid-primitives/keyboard';
@@ -174,6 +174,46 @@ var useDisableTabbing = (isOpen) => {
   });
 };
 
+// src/utils/hotkey.ts
+var normalizeHotkey = (keys) => {
+  if (!keys.includes("CtrlOrMeta")) {
+    return [keys];
+  }
+  return [
+    keys.map((key) => key === "CtrlOrMeta" ? "Control" : key),
+    keys.map((key) => key === "CtrlOrMeta" ? "Meta" : key)
+  ];
+};
+var getHotkeyPermutations = (hotkey) => {
+  const normalizedHotkeys = normalizeHotkey(hotkey);
+  return normalizedHotkeys.flatMap((normalizedHotkey) => {
+    const modifiers = normalizedHotkey.filter(
+      (key) => keyboardModifiers.includes(key)
+    );
+    const nonModifiers = normalizedHotkey.filter(
+      (key) => !keyboardModifiers.includes(key)
+    );
+    if (modifiers.length === 0) {
+      return [nonModifiers];
+    }
+    const allModifierCombinations = getAllPermutations(modifiers);
+    return allModifierCombinations.map((combo) => [...combo, ...nonModifiers]);
+  });
+};
+var isHotkeyCombinationPressed = (keys, hotkey) => {
+  const permutations = getHotkeyPermutations(hotkey);
+  const pressedKeys = keys.map((key) => key.toUpperCase());
+  return permutations.some(
+    (combo) => (
+      // every key in the combo must be pressed
+      combo.every((key) => pressedKeys.includes(String(key).toUpperCase())) && // and no extra keys beyond the combo
+      pressedKeys.every(
+        (key) => combo.map((k) => String(k).toUpperCase()).includes(key)
+      )
+    )
+  );
+};
+
 // src/styles/tokens.ts
 var tokens = {
   colors: {
@@ -904,6 +944,11 @@ var stylesFactory = (theme) => {
       display: flex;
       gap: 0.5rem;
     `,
+    settingsStack: css2`
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    `,
     // No Plugins Fallback Styles
     noPluginsFallback: css2`
       display: flex;
@@ -1911,29 +1956,99 @@ var ContentPanel = (props) => {
   })();
 };
 delegateEvents(["mousedown"]);
-var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<div><div></div>Final shortcut is: `);
-var _tmpl$32 = /* @__PURE__ */ template(`<div><div>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div><h4></h4><div></div>Final shortcut is: `);
+var MODIFIER_DISPLAY_NAMES = {
+  Shift: "Shift",
+  Alt: "Alt",
+  Meta: "Meta",
+  Control: "Control",
+  CtrlOrMeta: "Ctrl Or Meta"
+};
+var HotkeyConfig = (props) => {
+  const styles = useStyles();
+  const toggleModifier = (modifier) => {
+    if (props.hotkey.includes(modifier)) {
+      props.onHotkeyChange(props.hotkey.filter((key) => key !== modifier));
+    } else {
+      const existingModifiers = props.hotkey.filter((key) => props.modifiers.includes(key));
+      const otherKeys = props.hotkey.filter((key) => !props.modifiers.includes(key));
+      props.onHotkeyChange([...existingModifiers, modifier, ...otherKeys]);
+    }
+  };
+  const getNonModifierValue = () => {
+    return props.hotkey.filter((key) => !props.modifiers.includes(key)).join("+");
+  };
+  const handleKeyInput = (input) => {
+    const makeModifierArray = (key) => {
+      if (key.length === 1) return [uppercaseFirstLetter(key)];
+      const modifiersArray = [];
+      for (const character of key) {
+        const newLetter = uppercaseFirstLetter(character);
+        if (!modifiersArray.includes(newLetter)) modifiersArray.push(newLetter);
+      }
+      return modifiersArray;
+    };
+    const hotkeyModifiers = props.hotkey.filter((key) => props.modifiers.includes(key));
+    const newKeys = input.split("+").flatMap((key) => makeModifierArray(key)).filter(Boolean);
+    props.onHotkeyChange([...hotkeyModifiers, ...newKeys]);
+  };
+  const getDisplayHotkey = () => {
+    return props.hotkey.join(" + ");
+  };
+  return (() => {
+    var _el$ = _tmpl$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+    _el$2.style.setProperty("margin", "0");
+    insert(_el$2, () => props.description);
+    insert(_el$3, createComponent(Show, {
+      keyed: true,
+      get when() {
+        return props.hotkey;
+      },
+      get children() {
+        return props.modifiers.map((modifier) => createComponent(Button, {
+          variant: "success",
+          onclick: () => toggleModifier(modifier),
+          get outline() {
+            return !props.hotkey.includes(modifier);
+          },
+          get children() {
+            return MODIFIER_DISPLAY_NAMES[modifier] || modifier;
+          }
+        }));
+      }
+    }));
+    insert(_el$, createComponent(Input, {
+      description: "Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above",
+      placeholder: "a",
+      get value() {
+        return getNonModifierValue();
+      },
+      onChange: handleKeyInput
+    }), _el$4);
+    insert(_el$, getDisplayHotkey, null);
+    effect((_p$) => {
+      var _v$ = styles().settingsGroup, _v$2 = styles().settingsModifiers;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+
+// src/tabs/settings-tab.tsx
+var _tmpl$7 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<div><div>`);
 var SettingsTab = () => {
   const {
     setSettings,
     settings
   } = useDevtoolsSettings();
   const styles = useStyles();
-  const hotkey = createMemo(() => settings().openHotkey);
-  const modifiers = ["Control", "Alt", "Meta", "Shift"];
-  const changeHotkey = (newHotkey) => () => {
-    if (hotkey().includes(newHotkey)) {
-      return setSettings({
-        openHotkey: hotkey().filter((key) => key !== newHotkey)
-      });
-    }
-    const existingModifiers = hotkey().filter((key) => modifiers.includes(key));
-    const otherModifiers = hotkey().filter((key) => !modifiers.includes(key));
-    setSettings({
-      openHotkey: [...existingModifiers, newHotkey, ...otherModifiers]
-    });
-  };
+  const modifiers = ["CtrlOrMeta", "Alt", "Shift"];
   return createComponent(MainPanel$1, {
     withPadding: true,
     get children() {
@@ -1950,7 +2065,7 @@ var SettingsTab = () => {
           }), createComponent(SectionDescription, {
             children: "Configure general behavior of the devtools panel."
           }), (() => {
-            var _el$ = _tmpl$6();
+            var _el$ = _tmpl$7();
             insert(_el$, createComponent(Checkbox, {
               label: "Default open",
               description: "Automatically open the devtools panel when the page loads",
@@ -2015,7 +2130,7 @@ var SettingsTab = () => {
           }), createComponent(SectionDescription, {
             children: "Control when devtools are available based on URL parameters."
           }), (() => {
-            var _el$2 = _tmpl$6();
+            var _el$2 = _tmpl$7();
             insert(_el$2, createComponent(Checkbox, {
               label: "Require URL Flag",
               description: "Only show devtools when a specific URL parameter is present",
@@ -2031,7 +2146,7 @@ var SettingsTab = () => {
                 return settings().requireUrlFlag;
               },
               get children() {
-                var _el$3 = _tmpl$6();
+                var _el$3 = _tmpl$7();
                 insert(_el$3, createComponent(Input, {
                   label: "URL flag",
                   description: "Enter the URL parameter name (e.g., 'debug' for ?debug=true)",
@@ -2064,85 +2179,30 @@ var SettingsTab = () => {
           }), createComponent(SectionDescription, {
             children: "Customize keyboard shortcuts for quick access."
           }), (() => {
-            var _el$4 = _tmpl$22(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
-            insert(_el$5, createComponent(Show, {
-              keyed: true,
-              get when() {
-                return hotkey();
+            var _el$4 = _tmpl$7();
+            insert(_el$4, createComponent(HotkeyConfig, {
+              title: "Open/Close Devtools",
+              description: "Hotkey to open/close devtools",
+              get hotkey() {
+                return settings().openHotkey;
               },
-              get children() {
-                return [createComponent(Button, {
-                  variant: "success",
-                  get onclick() {
-                    return changeHotkey("Shift");
-                  },
-                  get outline() {
-                    return !hotkey().includes("Shift");
-                  },
-                  children: "Shift"
-                }), createComponent(Button, {
-                  variant: "success",
-                  get onclick() {
-                    return changeHotkey("Alt");
-                  },
-                  get outline() {
-                    return !hotkey().includes("Alt");
-                  },
-                  children: "Alt"
-                }), createComponent(Button, {
-                  variant: "success",
-                  get onclick() {
-                    return changeHotkey("Meta");
-                  },
-                  get outline() {
-                    return !hotkey().includes("Meta");
-                  },
-                  children: "Meta"
-                }), createComponent(Button, {
-                  variant: "success",
-                  get onclick() {
-                    return changeHotkey("Control");
-                  },
-                  get outline() {
-                    return !hotkey().includes("Control");
-                  },
-                  children: "Control"
-                })];
-              }
-            }));
-            insert(_el$4, createComponent(Input, {
-              label: "Hotkey to open/close devtools",
-              description: "Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above",
-              placeholder: "a",
-              get value() {
-                return hotkey().filter((key) => !["Shift", "Meta", "Alt", "Ctrl"].includes(key)).join("+");
+              modifiers,
+              onHotkeyChange: (hotkey) => setSettings({
+                openHotkey: hotkey
+              })
+            }), null);
+            insert(_el$4, createComponent(HotkeyConfig, {
+              title: "Source Inspector",
+              description: "Hotkey to open source inspector",
+              get hotkey() {
+                return settings().inspectHotkey;
               },
-              onChange: (e) => {
-                const makeModifierArray = (key) => {
-                  if (key.length === 1) return [uppercaseFirstLetter(key)];
-                  const modifiers3 = [];
-                  for (const character of key) {
-                    const newLetter = uppercaseFirstLetter(character);
-                    if (!modifiers3.includes(newLetter)) modifiers3.push(newLetter);
-                  }
-                  return modifiers3;
-                };
-                const modifiers2 = e.split("+").flatMap((key) => makeModifierArray(key)).filter(Boolean);
-                return setSettings({
-                  openHotkey: [...hotkey().filter((key) => ["Shift", "Meta", "Alt", "Ctrl"].includes(key)), ...modifiers2]
-                });
-              }
-            }), _el$6);
-            insert(_el$4, () => hotkey().join(" + "), null);
-            effect((_p$) => {
-              var _v$ = styles().settingsGroup, _v$2 = styles().settingsModifiers;
-              _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
-              _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
-              return _p$;
-            }, {
-              e: void 0,
-              t: void 0
-            });
+              modifiers,
+              onHotkeyChange: (hotkey) => setSettings({
+                inspectHotkey: hotkey
+              })
+            }), null);
+            effect(() => className(_el$4, styles().settingsStack));
             return _el$4;
           })()];
         }
@@ -2159,8 +2219,8 @@ var SettingsTab = () => {
           }), createComponent(SectionDescription, {
             children: "Adjust the position of the trigger button and devtools panel."
           }), (() => {
-            var _el$7 = _tmpl$32(), _el$8 = _el$7.firstChild;
-            insert(_el$8, createComponent(Select, {
+            var _el$5 = _tmpl$22(), _el$6 = _el$5.firstChild;
+            insert(_el$6, createComponent(Select, {
               label: "Trigger Position",
               options: [{
                 label: "Bottom Right",
@@ -2188,7 +2248,7 @@ var SettingsTab = () => {
                 position: value
               })
             }), null);
-            insert(_el$8, createComponent(Select, {
+            insert(_el$6, createComponent(Select, {
               label: "Panel Position",
               get value() {
                 return settings().panelLocation;
@@ -2205,15 +2265,15 @@ var SettingsTab = () => {
               })
             }), null);
             effect((_p$) => {
-              var _v$3 = styles().settingsGroup, _v$4 = styles().settingRow;
-              _v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
-              _v$4 !== _p$.t && className(_el$8, _p$.t = _v$4);
+              var _v$ = styles().settingsGroup, _v$2 = styles().settingRow;
+              _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
+              _v$2 !== _p$.t && className(_el$6, _p$.t = _v$2);
               return _p$;
             }, {
               e: void 0,
               t: void 0
             });
-            return _el$7;
+            return _el$5;
           })()];
         }
       })];
@@ -2297,14 +2357,14 @@ var getBadgeText = (card) => {
 };
 
 // src/tabs/marketplace/plugin-card.tsx
-var _tmpl$7 = /* @__PURE__ */ template(`<div>New`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div>New`);
 var _tmpl$23 = /* @__PURE__ */ template(`<img>`);
-var _tmpl$33 = /* @__PURE__ */ template(`<span>\u2713 v<!> \u2022 Min v`);
+var _tmpl$32 = /* @__PURE__ */ template(`<span>\u2713 v<!> \u2022 Min v`);
 var _tmpl$42 = /* @__PURE__ */ template(`<p>`);
 var _tmpl$52 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer">Documentation `);
 var _tmpl$62 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$72 = /* @__PURE__ */ template(`<div><span></span><div></div><div><h3></h3><p></p><p>`);
-var _tmpl$8 = /* @__PURE__ */ template(`<span>\u26A0\uFE0F v<!> \u2022 Requires v<!>+`);
+var _tmpl$82 = /* @__PURE__ */ template(`<span>\u26A0\uFE0F v<!> \u2022 Requires v<!>+`);
 var _tmpl$9 = /* @__PURE__ */ template(`<span>`);
 var _tmpl$0 = /* @__PURE__ */ template(`<span>Installing...`);
 var _tmpl$1 = /* @__PURE__ */ template(`<span>Installed!`);
@@ -2321,7 +2381,7 @@ var PluginCardComponent = (props) => {
         return card.metadata?.isNew;
       },
       get children() {
-        var _el$2 = _tmpl$7();
+        var _el$2 = _tmpl$8();
         effect(() => className(_el$2, styles().pluginMarketplaceNewBanner));
         return _el$2;
       }
@@ -2365,7 +2425,7 @@ var PluginCardComponent = (props) => {
           },
           get fallback() {
             return (() => {
-              var _el$16 = _tmpl$8(), _el$17 = _el$16.firstChild, _el$20 = _el$17.nextSibling, _el$18 = _el$20.nextSibling, _el$21 = _el$18.nextSibling; _el$21.nextSibling;
+              var _el$16 = _tmpl$82(), _el$17 = _el$16.firstChild, _el$20 = _el$17.nextSibling, _el$18 = _el$20.nextSibling, _el$21 = _el$18.nextSibling; _el$21.nextSibling;
               insert(_el$16, () => card.versionInfo?.current, _el$20);
               insert(_el$16, () => card.versionInfo?.required, _el$21);
               effect(() => className(_el$16, styles().pluginMarketplaceCardVersionUnsatisfied));
@@ -2373,7 +2433,7 @@ var PluginCardComponent = (props) => {
             })();
           },
           get children() {
-            var _el$1 = _tmpl$33(), _el$10 = _el$1.firstChild, _el$12 = _el$10.nextSibling; _el$12.nextSibling;
+            var _el$1 = _tmpl$32(), _el$10 = _el$1.firstChild, _el$12 = _el$10.nextSibling; _el$12.nextSibling;
             insert(_el$1, () => card.versionInfo?.current, _el$12);
             insert(_el$1, () => card.versionInfo?.required, null);
             effect(() => className(_el$1, styles().pluginMarketplaceCardVersionSatisfied));
@@ -2528,7 +2588,7 @@ var PluginCardComponent = (props) => {
 // src/tabs/marketplace/plugin-section.tsx
 var _tmpl$10 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=currentColor><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z">`);
 var _tmpl$24 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><rect x=2 y=4 width=20 height=16 rx=2></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7">`);
-var _tmpl$34 = /* @__PURE__ */ template(`<div><div><h4><span></span>Want to be featured here?</h4><p>If you've built a plugin for TanStack Devtools and would like to showcase it in the featured section, we'd love to hear from you! Reach out to us to discuss partnership opportunities.</p><a href="mailto:partners+devtools@tanstack.com?subject=Featured%20Plugin%20Partnership%20Inquiry"><span></span>Contact Us`);
+var _tmpl$33 = /* @__PURE__ */ template(`<div><div><h4><span></span>Want to be featured here?</h4><p>If you've built a plugin for TanStack Devtools and would like to showcase it in the featured section, we'd love to hear from you! Reach out to us to discuss partnership opportunities.</p><a href="mailto:partners+devtools@tanstack.com?subject=Featured%20Plugin%20Partnership%20Inquiry"><span></span>Contact Us`);
 var _tmpl$43 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$53 = /* @__PURE__ */ template(`<div><div><div><div></div><h3>`);
 var StarIcon = () => _tmpl$10();
@@ -2550,7 +2610,7 @@ var PluginSectionComponent = (props) => {
             return props.section.id === "featured";
           },
           get children() {
-            var _el$8 = _tmpl$34(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$0.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.firstChild;
+            var _el$8 = _tmpl$33(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$0.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.firstChild;
             insert(_el$1, createComponent(StarIcon, {}));
             insert(_el$12, createComponent(MailIcon, {}));
             effect((_p$) => {
@@ -3381,7 +3441,7 @@ var PluginMarketplace = () => {
 // src/tabs/plugins-tab.tsx
 var _tmpl$15 = /* @__PURE__ */ template(`<div><div><div><div></div><div><h3>Add More`);
 var _tmpl$27 = /* @__PURE__ */ template(`<div><h3>`);
-var _tmpl$35 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<div>`);
 var PluginsTab = () => {
   const {
     plugins,
@@ -3478,7 +3538,7 @@ var PluginsTab = () => {
               return activePlugins();
             },
             children: (pluginId) => (() => {
-              var _el$8 = _tmpl$35();
+              var _el$8 = _tmpl$34();
               use((el) => {
                 setPluginRefs((prev) => {
                   const updated = new Map(prev);
@@ -3584,7 +3644,7 @@ function useHeadChanges(onChange, opts = {}) {
 // src/tabs/seo-tab.tsx
 var _tmpl$16 = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`);
 var _tmpl$28 = /* @__PURE__ */ template(`<img alt=Preview>`);
-var _tmpl$36 = /* @__PURE__ */ template(`<div>No Image`);
+var _tmpl$35 = /* @__PURE__ */ template(`<div>No Image`);
 var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$54 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`);
 var _tmpl$63 = /* @__PURE__ */ template(`<li>`);
@@ -3730,7 +3790,7 @@ function SocialPreview(props) {
         });
         return _el$7;
       })() : (() => {
-        var _el$8 = _tmpl$36();
+        var _el$8 = _tmpl$35();
         _el$8.style.setProperty("background", "#222");
         _el$8.style.setProperty("color", "#888");
         _el$8.style.setProperty("display", "flex");
@@ -3893,7 +3953,7 @@ var tabs = [{
 // src/components/tabs.tsx
 var _tmpl$17 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$29 = /* @__PURE__ */ template(`<button type=button>`);
-var _tmpl$37 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
 var Tabs = (props) => {
   const styles = useStyles();
   const {
@@ -3932,7 +3992,7 @@ var Tabs = (props) => {
     insert(_el$, (() => {
       var _c$ = memo(() => pipWindow().pipWindow !== null);
       return () => _c$() ? null : (() => {
-        var _el$3 = _tmpl$37(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+        var _el$3 = _tmpl$36(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
         _el$3.style.setProperty("margin-top", "auto");
         _el$4.$$click = handleDetachment;
         insert(_el$4, createComponent(PiP, {}));
@@ -3971,6 +4031,9 @@ var TabContent = () => {
 };
 var _tmpl$19 = /* @__PURE__ */ template(`<div>`);
 var SourceInspector = () => {
+  const {
+    settings
+  } = useDevtoolsSettings();
   const highlightStateInit = () => ({
     element: null,
     bounding: {
@@ -3999,11 +4062,7 @@ var SourceInspector = () => {
   });
   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);
+    return isHotkeyCombinationPressed(downList(), settings().inspectHotkey);
   });
   createEffect(() => {
     if (!isHighlightingKeysHeld()) {
@@ -4239,11 +4298,8 @@ function DevTools() {
     }
   });
   createEffect(() => {
-    const modifiers = settings().openHotkey.filter((key) => keyboardModifiers.includes(key));
-    const nonModifiers = settings().openHotkey.filter((key) => !keyboardModifiers.includes(key));
-    const allModifierCombinations = getAllPermutations(modifiers);
-    for (const combination of allModifierCombinations) {
-      const permutation = [...combination, ...nonModifiers];
+    const permutations = getHotkeyPermutations(settings().openHotkey);
+    for (const permutation of permutations) {
       createShortcut(permutation, () => {
         toggleOpen();
       });

package/dist/index.d.ts

@@ -23,8 +23,9 @@ declare const tabs: readonly [{
 }];
 type TabName = (typeof tabs)[number]['id'];
 
-type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
+type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift' | 'CtrlOrMeta';
 type KeyboardKey = ModifierKey | (string & {});
+
 type TriggerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right';
 type TriggerProps = {
     theme: 'light' | 'dark';
@@ -53,9 +54,14 @@ type DevtoolsStore = {
         panelLocation: 'top' | 'bottom';
         /**
          * The hotkey to open the dev tools
-         * @default "shift+a"
+         * @default ["Shift", "A"]
          */
         openHotkey: Array<KeyboardKey>;
+        /**
+         * The hotkey to open the source inspector
+         * @default ["Shift", "CtrlOrMeta"]
+         */
+        inspectHotkey: Array<KeyboardKey>;
         /**
          * Whether to require the URL flag to open the dev tools
          * @default false

package/dist/index.js

@@ -1,5 +1,5 @@
-import { initialState, DevtoolsProvider, PiPProvider } from './chunk/G64KXXVZ.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/G64KXXVZ.js';
+import { initialState, DevtoolsProvider, PiPProvider } from './chunk/YGJWPK3G.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/YGJWPK3G.js';
 import { render, createComponent, Portal } from 'solid-js/web';
 import { lazy } from 'solid-js';
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
@@ -30,7 +30,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/GGWR254Q.js'));
+      this.#Component = lazy(() => import('./devtools/LWN3DL7E.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/dist/server.js

@@ -1,5 +1,5 @@
-import { initialState } from './chunk/G64KXXVZ.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/G64KXXVZ.js';
+import { initialState } from './chunk/YGJWPK3G.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/YGJWPK3G.js';
 import 'solid-js/web';
 import 'solid-js';
 import '@tanstack/devtools-event-bus/client';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -55,8 +55,8 @@
     "clsx": "^2.1.1",
     "goober": "^2.1.16",
     "solid-js": "^1.9.9",
-    "@tanstack/devtools-client": "0.0.4",
     "@tanstack/devtools-event-bus": "0.3.3",
+    "@tanstack/devtools-client": "0.0.4",
     "@tanstack/devtools-ui": "0.4.4"
   },
   "peerDependencies": {

package/src/components/source-inspector.tsx

@@ -4,7 +4,11 @@ import { createElementSize } from '@solid-primitives/resize-observer'
 import { useKeyDownList } from '@solid-primitives/keyboard'
 import { createEventListener } from '@solid-primitives/event-listener'
 
+import { useDevtoolsSettings } from '../context/use-devtools-context'
+import { isHotkeyCombinationPressed } from '../utils/hotkey'
+
 export const SourceInspector = () => {
+  const { settings } = useDevtoolsSettings()
   const highlightStateInit = () => ({
     element: null as HTMLElement | null,
     bounding: { width: 0, height: 0, left: 0, top: 0 },
@@ -25,12 +29,9 @@ export const SourceInspector = () => {
   })
 
   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)
+    return isHotkeyCombinationPressed(downList(), settings().inspectHotkey)
   })
 
   createEffect(() => {

package/src/context/devtools-store.ts

@@ -1,13 +1,15 @@
 import type { TabName } from '../tabs'
 import type { TanStackDevtoolsPlugin } from './devtools-context'
 
-type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'
+type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift' | 'CtrlOrMeta'
 type KeyboardKey = ModifierKey | (string & {})
+export type { ModifierKey, KeyboardKey }
 export const keyboardModifiers: Array<ModifierKey> = [
   'Alt',
   'Control',
   'Meta',
   'Shift',
+  'CtrlOrMeta',
 ]
 
 type TriggerPosition =
@@ -47,9 +49,14 @@ export type DevtoolsStore = {
     panelLocation: 'top' | 'bottom'
     /**
      * The hotkey to open the dev tools
-     * @default "shift+a"
+     * @default ["Shift", "A"]
      */
     openHotkey: Array<KeyboardKey>
+    /**
+     * The hotkey to open the source inspector
+     * @default ["Shift", "CtrlOrMeta"]
+     */
+    inspectHotkey: Array<KeyboardKey>
     /**
      * Whether to require the URL flag to open the dev tools
      * @default false
@@ -93,6 +100,7 @@ export const initialState: DevtoolsStore = {
     position: 'bottom-right',
     panelLocation: 'bottom',
     openHotkey: ['Shift', 'A'],
+    inspectHotkey: ['Shift', 'CtrlOrMeta'],
     requireUrlFlag: false,
     urlFlag: 'tanstack-devtools',
     theme: