@tanstack/devtools 0.8.2 → 0.9.1

package/dist/chunk/{G64KXXVZ.js → YGJWPK3G.js}

@@ -6,33 +6,6 @@ import { createStore } from 'solid-js/store';
 var PLUGIN_CONTAINER_ID = "plugin-container";
 var PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";
 
-// src/utils/sanitize.ts
-var tryParseJson = (json) => {
-  if (!json) return void 0;
-  try {
-    return JSON.parse(json);
-  } catch (_e) {
-    return void 0;
-  }
-};
-var uppercaseFirstLetter = (value) => value.charAt(0).toUpperCase() + value.slice(1);
-var getAllPermutations = (arr) => {
-  const res = [];
-  function permutate(arr2, start) {
-    if (start === arr2.length - 1) {
-      res.push([...arr2]);
-      return;
-    }
-    for (let i = start; i < arr2.length; i++) {
-      [arr2[start], arr2[i]] = [arr2[i], arr2[start]];
-      permutate(arr2, start + 1);
-      [arr2[start], arr2[i]] = [arr2[i], arr2[start]];
-    }
-  }
-  permutate(arr, 0);
-  return res;
-};
-
 // src/utils/storage.ts
 var getStorageItem = (key) => localStorage.getItem(key);
 var setStorageItem = (key, value) => {
@@ -45,34 +18,6 @@ var setStorageItem = (key, value) => {
 var TANSTACK_DEVTOOLS = "tanstack_devtools";
 var TANSTACK_DEVTOOLS_STATE = "tanstack_devtools_state";
 var TANSTACK_DEVTOOLS_SETTINGS = "tanstack_devtools_settings";
-
-// src/context/devtools-store.ts
-var keyboardModifiers = [
-  "Alt",
-  "Control",
-  "Meta",
-  "Shift"
-];
-var initialState = {
-  settings: {
-    defaultOpen: false,
-    hideUntilHover: false,
-    position: "bottom-right",
-    panelLocation: "bottom",
-    openHotkey: ["Shift", "A"],
-    requireUrlFlag: false,
-    urlFlag: "tanstack-devtools",
-    theme: typeof window !== "undefined" && typeof window.matchMedia !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
-    triggerHidden: false,
-    customTrigger: void 0
-  },
-  state: {
-    activeTab: "plugins",
-    height: 400,
-    activePlugins: [],
-    persistOpen: false
-  }
-};
 var PiPContext = createContext(void 0);
 var PiPProvider = (props) => {
   const [pipWindow, setPipWindow] = createSignal(null);
@@ -186,6 +131,63 @@ var usePiPWindow = () => {
 // src/utils/constants.ts
 var MAX_ACTIVE_PLUGINS = 3;
 
+// src/utils/sanitize.ts
+var tryParseJson = (json) => {
+  if (!json) return void 0;
+  try {
+    return JSON.parse(json);
+  } catch (_e) {
+    return void 0;
+  }
+};
+var uppercaseFirstLetter = (value) => value.charAt(0).toUpperCase() + value.slice(1);
+var getAllPermutations = (arr) => {
+  const res = [];
+  function permutate(arr2, start) {
+    if (start === arr2.length - 1) {
+      res.push([...arr2]);
+      return;
+    }
+    for (let i = start; i < arr2.length; i++) {
+      [arr2[start], arr2[i]] = [arr2[i], arr2[start]];
+      permutate(arr2, start + 1);
+      [arr2[start], arr2[i]] = [arr2[i], arr2[start]];
+    }
+  }
+  permutate(arr, 0);
+  return res;
+};
+
+// src/context/devtools-store.ts
+var keyboardModifiers = [
+  "Alt",
+  "Control",
+  "Meta",
+  "Shift",
+  "CtrlOrMeta"
+];
+var initialState = {
+  settings: {
+    defaultOpen: false,
+    hideUntilHover: false,
+    position: "bottom-right",
+    panelLocation: "bottom",
+    openHotkey: ["Shift", "A"],
+    inspectHotkey: ["Shift", "CtrlOrMeta"],
+    requireUrlFlag: false,
+    urlFlag: "tanstack-devtools",
+    theme: typeof window !== "undefined" && typeof window.matchMedia !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
+    triggerHidden: false,
+    customTrigger: void 0
+  },
+  state: {
+    activeTab: "plugins",
+    height: 400,
+    activePlugins: [],
+    persistOpen: false
+  }
+};
+
 // src/utils/get-default-active-plugins.ts
 function getDefaultActivePlugins(plugins) {
   if (plugins.length === 0) {

package/dist/dev.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/devtools/{I7ZVYS6Q.js → CMWGZDSU.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 { createComponent, Portal, ssr, ssrAttribute, escape, ssrStyle } 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;
@@ -1870,31 +1915,84 @@ var ContentPanel = (props) => {
   } = useDevtoolsSettings();
   return ssr(_tmpl$5, ssrAttribute("class", escape(styles().devtoolsPanel, true), false), props.handleDragStart ? ssr(_tmpl$22, ssrAttribute("class", escape(styles().dragHandle(settings().panelLocation), true), false)) : escape(null), escape(props.children));
 };
-var _tmpl$6 = ["<div", ">", "", "", "", "</div>"];
+var _tmpl$6 = ["<div", '><h4 style="', '">', "</h4><div", ">", "</div>", "Final shortcut is: ", "</div>"];
+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 ssr(_tmpl$6, ssrAttribute("class", escape(styles().settingsGroup, true), false), "margin:0", escape(props.description), ssrAttribute("class", escape(styles().settingsModifiers, true), false), escape(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;
+        }
+      }));
+    }
+  })), escape(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
+  })), escape(getDisplayHotkey()));
+};
+
+// src/tabs/settings-tab.tsx
+var _tmpl$7 = ["<div", ">", "", "", "", "</div>"];
 var _tmpl$23 = ["<div", ">", "</div>"];
 var _tmpl$32 = ["<div", ">", "", "</div>"];
-var _tmpl$42 = ["<div", "><div", ">", "</div>", "Final shortcut is: ", "</div>"];
-var _tmpl$52 = ["<div", "><div", ">", "", "</div></div>"];
+var _tmpl$42 = ["<div", "><div", ">", "", "</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() {
@@ -1910,7 +2008,7 @@ var SettingsTab = () => {
             }
           }), createComponent(SectionDescription, {
             children: "Configure general behavior of the devtools panel."
-          }), ssr(_tmpl$6, ssrAttribute("class", escape(styles().settingsGroup, true), false), escape(createComponent(Checkbox, {
+          }), ssr(_tmpl$7, ssrAttribute("class", escape(styles().settingsGroup, true), false), escape(createComponent(Checkbox, {
             label: "Default open",
             description: "Automatically open the devtools panel when the page loads",
             onChange: () => setSettings({
@@ -2007,73 +2105,27 @@ var SettingsTab = () => {
             }
           }), createComponent(SectionDescription, {
             children: "Customize keyboard shortcuts for quick access."
-          }), ssr(_tmpl$42, ssrAttribute("class", escape(styles().settingsGroup, true), false), ssrAttribute("class", escape(styles().settingsModifiers, true), false), escape(createComponent(Show, {
-            keyed: true,
-            get when() {
-              return hotkey();
+          }), ssr(_tmpl$32, ssrAttribute("class", escape(styles().settingsStack, true), false), escape(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"
-              })];
-            }
-          })), escape(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
+            })
+          })), escape(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]
-              });
-            }
-          })), escape(hotkey().join(" + ")))];
+            modifiers,
+            onHotkeyChange: (hotkey) => setSettings({
+              inspectHotkey: hotkey
+            })
+          })))];
         }
       }), createComponent(Section, {
         get children() {
@@ -2087,7 +2139,7 @@ var SettingsTab = () => {
             }
           }), createComponent(SectionDescription, {
             children: "Adjust the position of the trigger button and devtools panel."
-          }), ssr(_tmpl$52, ssrAttribute("class", escape(styles().settingsGroup, true), false), ssrAttribute("class", escape(styles().settingRow, true), false), escape(createComponent(Select, {
+          }), ssr(_tmpl$42, ssrAttribute("class", escape(styles().settingsGroup, true), false), ssrAttribute("class", escape(styles().settingRow, true), false), escape(createComponent(Select, {
             label: "Trigger Position",
             options: [{
               label: "Bottom Right",
@@ -2212,14 +2264,14 @@ var getBadgeText = (card) => {
 };
 
 // src/tabs/marketplace/plugin-card.tsx
-var _tmpl$7 = ["<div", ">New</div>"];
+var _tmpl$8 = ["<div", ">New</div>"];
 var _tmpl$24 = ["<img", ">"];
 var _tmpl$33 = ["<span", ">\u2713 v", " \u2022 Min v", "</span>"];
 var _tmpl$43 = ["<p", ">", "</p>"];
-var _tmpl$53 = ["<a", ' target="_blank" rel="noopener noreferrer"', ">Documentation ", "</a>"];
+var _tmpl$52 = ["<a", ' target="_blank" rel="noopener noreferrer"', ">Documentation ", "</a>"];
 var _tmpl$62 = ["<div", ">", "</div>"];
 var _tmpl$72 = ['<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$82 = ["<span", ">\u26A0\uFE0F v", " \u2022 Requires v", "+</span>"];
 var _tmpl$9 = ["<span", ">", "</span>"];
 var _tmpl$0 = ["<div", "></div>"];
 var _tmpl$1 = ["<span", ">Installing...</span>"];
@@ -2235,7 +2287,7 @@ var PluginCardComponent = (props) => {
       return card.metadata?.isNew;
     },
     get children() {
-      return ssr(_tmpl$7, ssrAttribute("class", escape(styles().pluginMarketplaceNewBanner, true), false));
+      return ssr(_tmpl$8, 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() {
@@ -2257,7 +2309,7 @@ var PluginCardComponent = (props) => {
           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));
+          return ssr(_tmpl$82, 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));
@@ -2269,7 +2321,7 @@ var PluginCardComponent = (props) => {
       return card.metadata?.docsUrl;
     },
     get children() {
-      return ssr(_tmpl$53, ssrAttribute("href", escape(card.metadata?.docsUrl, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceCardDocsLink, true), false), escape(createComponent(ExternalLinkIcon, {})));
+      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() {
@@ -2336,12 +2388,12 @@ var _tmpl$12 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill
 var _tmpl$25 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>';
 var _tmpl$34 = ["<div", "><div", "><h4", "><span", ">", "</span>Want to be featured here?</h4><p", `>If you've built a plugin for TanStack Devtools and would like to showcase it in the featured section, we'd love to hear from you! Reach out to us to discuss partnership opportunities.</p><a href="mailto:partners+devtools@tanstack.com?subject=Featured%20Plugin%20Partnership%20Inquiry"`, "><span", ">", "</span>Contact Us</a></div></div>"];
 var _tmpl$44 = ["<div", ">", "</div>"];
-var _tmpl$54 = ["<div", "><div", "><div", '><div class="', '">', "</div><h3", ">", "</h3></div></div>", "</div>"];
+var _tmpl$53 = ["<div", "><div", "><div", '><div class="', '">', "</div><h3", ">", "</h3></div></div>", "</div>"];
 var StarIcon = () => ssr(_tmpl$12);
 var MailIcon = () => ssr(_tmpl$25);
 var PluginSectionComponent = (props) => {
   const styles = useStyles();
-  return ssr(_tmpl$54, ssrAttribute("class", escape(styles().pluginMarketplaceSection, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeaderLeft, true), false), `${escape(styles().pluginMarketplaceSectionChevron, true) || ""} ${props.isCollapsed() ? escape(escape(styles().pluginMarketplaceSectionChevronCollapsed, true), true) : ""}`, escape(createComponent(ChevronDownIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSectionTitle, true), false), escape(props.section.displayName), escape(createComponent(Show, {
+  return ssr(_tmpl$53, ssrAttribute("class", escape(styles().pluginMarketplaceSection, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeaderLeft, true), false), `${escape(styles().pluginMarketplaceSectionChevron, true) || ""} ${props.isCollapsed() ? escape(escape(styles().pluginMarketplaceSectionChevronCollapsed, true), true) : ""}`, escape(createComponent(ChevronDownIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSectionTitle, true), false), escape(props.section.displayName), escape(createComponent(Show, {
     get when() {
       return !props.isCollapsed();
     },
@@ -3181,7 +3233,7 @@ var _tmpl$18 = ["<div", ' style="', '"><div', ' style="', '">', " Preview</div>"
 var _tmpl$29 = ["<img", ' alt="Preview"', ">"];
 var _tmpl$36 = ["<div", ' style="', '">No Image</div>'];
 var _tmpl$45 = ["<div", ">", "</div>"];
-var _tmpl$55 = ["<div>", "", "</div>"];
+var _tmpl$54 = ["<div>", "", "</div>"];
 var _tmpl$63 = ["<div", "><strong>Missing tags for ", ":</strong><ul", ">", "</ul></div>"];
 var _tmpl$73 = ["<li", ">", "</li>"];
 var SOCIALS = [
@@ -3359,7 +3411,7 @@ var SeoTab = () => {
             },
             children: (report, i) => {
               const social = SOCIALS[i()];
-              return ssr(_tmpl$55, escape(createComponent(SocialPreview, {
+              return ssr(_tmpl$54, escape(createComponent(SocialPreview, {
                 get meta() {
                   return report.found;
                 },
@@ -3434,6 +3486,9 @@ var TabContent = () => {
 var _tmpl$21 = ['<div style="', '">', "</div>"];
 var _tmpl$211 = ['<div style="', '"></div>'];
 var SourceInspector = () => {
+  const {
+    settings
+  } = useDevtoolsSettings();
   const highlightStateInit = () => ({
     element: null,
     bounding: {
@@ -3462,11 +3517,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()) {
@@ -3663,11 +3714,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();
       });