@tanstack/devtools 0.4.2 → 0.4.3

package/dist/esm/devtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import { Show, createEffect, createSignal } from 'solid-js'\nimport { createShortcut } from '@solid-primitives/keyboard'\nimport {\n  useDevtoolsSettings,\n  useHeight,\n  usePersistOpen,\n} from './context/use-devtools-context'\nimport { useDisableTabbing } from './hooks/use-disable-tabbing'\nimport { TANSTACK_DEVTOOLS } from './utils/storage'\nimport { Trigger } from './components/trigger'\nimport { MainPanel } from './components/main-panel'\nimport { ContentPanel } from './components/content-panel'\nimport { Tabs } from './components/tabs'\nimport { TabContent } from './components/tab-content'\n\nexport default function DevTools() {\n  const { settings } = useDevtoolsSettings()\n  const { setHeight } = useHeight()\n  const { persistOpen, setPersistOpen } = usePersistOpen()\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n  const [isOpen, setIsOpen] = createSignal(\n    settings().defaultOpen || persistOpen(),\n  )\n  let panelRef: HTMLDivElement | undefined = undefined\n  const [isResizing, setIsResizing] = createSignal(false)\n  const toggleOpen = () => {\n    const open = isOpen()\n    setIsOpen(!open)\n    setPersistOpen(!open)\n  }\n  createEffect(() => {})\n  // Used to resize the panel\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: MouseEvent,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n    if (!panelElement) return\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement.getBoundingClientRect().height,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight =\n        settings().panelLocation === 'bottom'\n          ? dragInfo.originalHeight + delta\n          : dragInfo.originalHeight - delta\n\n      setHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  // Handle resizing and padding adjustments\n  createEffect(() => {\n    if (isOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        if (!panelRef) return\n        const containerHeight = panelRef.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    } else {\n      // Reset padding when devtools are closed\n      if (rootEl()?.parentElement) {\n        setRootEl((prev) => {\n          if (prev?.parentElement) {\n            prev.parentElement.removeAttribute('style')\n          }\n          return prev\n        })\n      }\n    }\n    return\n  })\n  createEffect(() => {\n    window.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape' && isOpen()) {\n        toggleOpen()\n      }\n    })\n  })\n  useDisableTabbing(isOpen)\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n  createEffect(() => {\n    createShortcut(settings().openHotkey, () => {\n      toggleOpen()\n    })\n  })\n\n  createEffect(() => {})\n  return (\n    <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>\n      <Show\n        when={\n          settings().requireUrlFlag\n            ? window.location.search.includes(settings().urlFlag)\n            : true\n        }\n      >\n        <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />\n        <MainPanel isResizing={isResizing} isOpen={isOpen}>\n          <ContentPanel\n            ref={(ref) => (panelRef = ref)}\n            handleDragStart={(e) => handleDragStart(panelRef, e)}\n          >\n            <Tabs toggleOpen={toggleOpen} />\n            <TabContent />\n          </ContentPanel>\n        </MainPanel>\n      </Show>\n    </div>\n  )\n}\n"],"names":["DevTools","settings","useDevtoolsSettings","setHeight","useHeight","persistOpen","setPersistOpen","usePersistOpen","rootEl","setRootEl","createSignal","isOpen","setIsOpen","defaultOpen","panelRef","undefined","isResizing","setIsResizing","toggleOpen","open","createEffect","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","panelLocation","unsub","document","removeEventListener","addEventListener","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","e","key","useDisableTabbing","el","fontSize","getComputedStyle","setProperty","createShortcut","openHotkey","_el$","_tmpl$","_$use","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","_$createComponent","Show","when","_$memo","requireUrlFlag","location","search","includes","urlFlag","children","Trigger","MainPanel","ContentPanel","ref","Tabs","TabContent"],"mappings":"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"}
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import { Show, createEffect, createSignal } from 'solid-js'\nimport { createShortcut } from '@solid-primitives/keyboard'\nimport {\n  useDevtoolsSettings,\n  useHeight,\n  usePersistOpen,\n} from './context/use-devtools-context'\nimport { useDisableTabbing } from './hooks/use-disable-tabbing'\nimport { TANSTACK_DEVTOOLS } from './utils/storage'\nimport { Trigger } from './components/trigger'\nimport { MainPanel } from './components/main-panel'\nimport { ContentPanel } from './components/content-panel'\nimport { Tabs } from './components/tabs'\nimport { TabContent } from './components/tab-content'\nimport { keyboardModifiers } from './context/devtools-store'\nimport { getAllPermutations } from './utils/sanitize'\n\nexport default function DevTools() {\n  const { settings } = useDevtoolsSettings()\n  const { setHeight } = useHeight()\n  const { persistOpen, setPersistOpen } = usePersistOpen()\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n  const [isOpen, setIsOpen] = createSignal(\n    settings().defaultOpen || persistOpen(),\n  )\n  let panelRef: HTMLDivElement | undefined = undefined\n  const [isResizing, setIsResizing] = createSignal(false)\n  const toggleOpen = () => {\n    const open = isOpen()\n    setIsOpen(!open)\n    setPersistOpen(!open)\n  }\n  createEffect(() => {})\n  // Used to resize the panel\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: MouseEvent,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n    if (!panelElement) return\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement.getBoundingClientRect().height,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight =\n        settings().panelLocation === 'bottom'\n          ? dragInfo.originalHeight + delta\n          : dragInfo.originalHeight - delta\n\n      setHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  // Handle resizing and padding adjustments\n  createEffect(() => {\n    if (isOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        if (!panelRef) return\n        const containerHeight = panelRef.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    } else {\n      // Reset padding when devtools are closed\n      if (rootEl()?.parentElement) {\n        setRootEl((prev) => {\n          if (prev?.parentElement) {\n            prev.parentElement.removeAttribute('style')\n          }\n          return prev\n        })\n      }\n    }\n    return\n  })\n  createEffect(() => {\n    window.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape' && isOpen()) {\n        toggleOpen()\n      }\n    })\n  })\n  useDisableTabbing(isOpen)\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n  createEffect(() => {\n    // we create all combinations of modifiers\n    const modifiers = settings().openHotkey.filter((key) =>\n      keyboardModifiers.includes(key as any),\n    )\n    const nonModifiers = settings().openHotkey.filter(\n      (key) => !keyboardModifiers.includes(key as any),\n    )\n\n    const allModifierCombinations = getAllPermutations(modifiers)\n\n    for (const combination of allModifierCombinations) {\n      const permutation = [...combination, ...nonModifiers]\n      createShortcut(permutation, () => {\n        toggleOpen()\n      })\n    }\n  })\n\n  return (\n    <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>\n      <Show\n        when={\n          settings().requireUrlFlag\n            ? window.location.search.includes(settings().urlFlag)\n            : true\n        }\n      >\n        <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />\n        <MainPanel isResizing={isResizing} isOpen={isOpen}>\n          <ContentPanel\n            ref={(ref) => (panelRef = ref)}\n            handleDragStart={(e) => handleDragStart(panelRef, e)}\n          >\n            <Tabs toggleOpen={toggleOpen} />\n            <TabContent />\n          </ContentPanel>\n        </MainPanel>\n      </Show>\n    </div>\n  )\n}\n"],"names":["DevTools","settings","useDevtoolsSettings","setHeight","useHeight","persistOpen","setPersistOpen","usePersistOpen","rootEl","setRootEl","createSignal","isOpen","setIsOpen","defaultOpen","panelRef","undefined","isResizing","setIsResizing","toggleOpen","open","createEffect","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","panelLocation","unsub","document","removeEventListener","addEventListener","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","e","key","useDisableTabbing","el","fontSize","getComputedStyle","setProperty","modifiers","openHotkey","filter","keyboardModifiers","includes","nonModifiers","allModifierCombinations","getAllPermutations","combination","permutation","createShortcut","_el$","_tmpl$","_$use","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","_$createComponent","Show","when","_$memo","requireUrlFlag","location","search","urlFlag","children","Trigger","MainPanel","ContentPanel","ref","Tabs","TabContent"],"mappings":";;;;;;;;;;;;;;AAiBA,SAAwBA,WAAW;AACjC,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,oBAAAA;AACrB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAcC,UAAAA;AACtB,QAAM;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,EAAAA,IAAmBC,eAAAA;AACxC,QAAM,CAACC,QAAQC,SAAS,IAAIC,aAAAA;AAC5B,QAAM,CAACC,QAAQC,SAAS,IAAIF,aAC1BT,WAAWY,eAAeR,aAC5B;AACA,MAAIS,WAAuCC;AAC3C,QAAM,CAACC,YAAYC,aAAa,IAAIP,aAAa,KAAK;AACtD,QAAMQ,aAAaA,MAAM;AACvB,UAAMC,OAAOR,OAAAA;AACbC,cAAU,CAACO,IAAI;AACfb,mBAAe,CAACa,IAAI;AAAA,EACtB;AACAC,eAAa,MAAM;AAAA,EAAC,CAAC;AAErB,QAAMC,kBAAkBA,CACtBC,cACAC,eACG;AACH,QAAIA,WAAWC,WAAW,EAAG;AAC7B,QAAI,CAACF,aAAc;AACnBL,kBAAc,IAAI;AAElB,UAAMQ,WAAW;AAAA,MACfC,gBAAgBJ,aAAaK,sBAAAA,EAAwBC;AAAAA,MACrDC,OAAON,WAAWM;AAAAA,IAAAA;AAGpB,UAAMC,MAAMA,CAACC,cAA0B;AACrC,YAAMC,QAAQP,SAASI,QAAQE,UAAUF;AACzC,YAAMI,YACJhC,WAAWiC,kBAAkB,WACzBT,SAASC,iBAAiBM,QAC1BP,SAASC,iBAAiBM;AAEhC7B,gBAAU8B,SAAS;AAEnB,UAAIA,YAAY,IAAI;AAClBrB,kBAAU,KAAK;AAAA,MACjB,OAAO;AACLA,kBAAU,IAAI;AAAA,MAChB;AAAA,IACF;AAEA,UAAMuB,QAAQA,MAAM;AAClBlB,oBAAc,KAAK;AACnBmB,eAASC,oBAAoB,aAAaP,GAAG;AAC7CM,eAASC,oBAAoB,WAAWF,KAAK;AAAA,IAC/C;AAEAC,aAASE,iBAAiB,aAAaR,GAAG;AAC1CM,aAASE,iBAAiB,WAAWH,KAAK;AAAA,EAC5C;AAGAf,eAAa,MAAM;AACjB,QAAIT,UAAU;AACZ,YAAM4B,gBAAgB/B,OAAAA,GAAUgC,eAAeC,MAAMC;AAErD,YAAMZ,MAAMA,MAAM;AAChB,YAAI,CAAChB,SAAU;AACf,cAAM6B,kBAAkB7B,SAASa,sBAAAA,EAAwBC;AACzD,YAAIpB,OAAAA,GAAUgC,eAAe;AAC3B/B,oBAAWmC,CAAAA,SAAS;AAClB,gBAAIA,MAAMJ,eAAe;AACvBI,mBAAKJ,cAAcC,MAAMC,gBAAgB,GAAGC,eAAe;AAAA,YAC7D;AACA,mBAAOC;AAAAA,UACT,CAAC;AAAA,QACH;AAAA,MACF;AAEAd,UAAAA;AAEA,UAAI,OAAOe,WAAW,aAAa;AACjCA,eAAOP,iBAAiB,UAAUR,GAAG;AAErC,eAAO,MAAM;AACXe,iBAAOR,oBAAoB,UAAUP,GAAG;AACxC,cAAItB,OAAAA,GAAUgC,iBAAiB,OAAOD,kBAAkB,UAAU;AAChE9B,sBAAWmC,CAAAA,SAAS;AAClBA,mBAAMJ,cAAeC,MAAMC,gBAAgBH;AAC3C,qBAAOK;AAAAA,YACT,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MACF;AAAA,IACF,OAAO;AAEL,UAAIpC,OAAAA,GAAUgC,eAAe;AAC3B/B,kBAAWmC,CAAAA,SAAS;AAClB,cAAIA,MAAMJ,eAAe;AACvBI,iBAAKJ,cAAcM,gBAAgB,OAAO;AAAA,UAC5C;AACA,iBAAOF;AAAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AACA;AAAA,EACF,CAAC;AACDxB,eAAa,MAAM;AACjByB,WAAOP,iBAAiB,WAAYS,CAAAA,MAAM;AACxC,UAAIA,EAAEC,QAAQ,YAAYrC,OAAAA,GAAU;AAClCO,mBAAAA;AAAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACD+B,oBAAkBtC,MAAM;AACxBS,eAAa,MAAM;AACjB,QAAIZ,UAAU;AACZ,YAAM0C,KAAK1C,OAAAA;AACX,YAAM2C,WAAWC,iBAAiBF,EAAG,EAAEC;AACvCD,UAAIT,MAAMY,YAAY,oBAAoBF,QAAQ;AAAA,IACpD;AAAA,EACF,CAAC;AACD/B,eAAa,MAAM;AAEjB,UAAMkC,YAAYrD,WAAWsD,WAAWC,OAAQR,CAAAA,QAC9CS,kBAAkBC,SAASV,GAAU,CACvC;AACA,UAAMW,eAAe1D,WAAWsD,WAAWC,OACxCR,SAAQ,CAACS,kBAAkBC,SAASV,GAAU,CACjD;AAEA,UAAMY,0BAA0BC,mBAAmBP,SAAS;AAE5D,eAAWQ,eAAeF,yBAAyB;AACjD,YAAMG,cAAc,CAAC,GAAGD,aAAa,GAAGH,YAAY;AACpDK,qBAAeD,aAAa,MAAM;AAChC7C,mBAAAA;AAAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,UAAA,MAAA;AAAA,QAAA+C,OAAAC,OAAAA;AAAAC,QACY1D,WAASwD,IAAA;AAAAG,iBAAAH,MAAA,eAAeI,iBAAiB;AAAAC,WAAAL,MAAAM,gBAChDC,MAAI;AAAA,MAAA,IACHC,OAAI;AAAA,eACFC,aAAAzE,SAAAA,EAAW0E,cAAc,EAAA,IACrB9B,OAAO+B,SAASC,OAAOnB,SAASzD,SAAAA,EAAW6E,OAAO,IAClD;AAAA,MAAI;AAAA,MAAA,IAAAC,WAAA;AAAA,eAAA,CAAAR,gBAGTS,SAAO;AAAA,UAACrE;AAAAA,UAAgBC,WAAWM;AAAAA,QAAAA,CAAU,GAAAqD,gBAC7CU,WAAS;AAAA,UAACjE;AAAAA,UAAwBL;AAAAA,UAAc,IAAAoE,WAAA;AAAA,mBAAAR,gBAC9CW,cAAY;AAAA,cAAAC,KACLA,SAASrE,WAAWqE;AAAAA,cAC1B9D,iBAAkB0B,CAAAA,MAAM1B,gBAAgBP,UAAUiC,CAAC;AAAA,cAAC,IAAAgC,WAAA;AAAA,uBAAA,CAAAR,gBAEnDa,MAAI;AAAA,kBAAClE;AAAAA,gBAAAA,CAAsB,GAAAqD,gBAC3Bc,YAAU,CAAA,CAAA,CAAA;AAAA,cAAA;AAAA,YAAA,CAAA;AAAA,UAAA;AAAA,QAAA,CAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,CAAA;AAAA,WAAApB;AAAAA,EAAA,GAAA;AAMvB;"}

package/dist/esm/styles/use-styles.d.ts

@@ -25,4 +25,5 @@ export declare function useStyles(): Accessor<{
     settingsGroup: string;
     conditionalSetting: string;
     settingRow: string;
+    settingsModifiers: string;
 }>;

package/dist/esm/styles/use-styles.js

@@ -292,6 +292,10 @@ const stylesFactory = () => {
       @media (max-width: 768px) {
         grid-template-columns: 1fr;
       }
+    `,
+    settingsModifiers: css`
+      display: flex;
+      gap: 0.5rem;
     `
   };
 };

package/dist/esm/styles/use-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { TanStackDevtoolsConfig } from '../context/devtools-context'\nimport type { Accessor } from 'solid-js'\n\nconst stylesFactory = () => {\n  const { colors, font, size, alpha, border } = tokens\n  const { fontFamily, size: fontSize } = font\n  const css = goober.css\n\n  return {\n    devtoolsPanelContainer: (\n      panelLocation: TanStackDevtoolsConfig['panelLocation'],\n    ) => css`\n      direction: ltr;\n      position: fixed;\n      overflow-y: hidden;\n      overflow-x: hidden;\n      ${panelLocation}: 0;\n      right: 0;\n      z-index: 99999;\n      width: 100%;\n\n      max-height: 90%;\n      border-top: 1px solid ${colors.gray[700]};\n      transform-origin: top;\n    `,\n    devtoolsPanelContainerVisibility: (isOpen: boolean) => {\n      return css`\n        visibility: ${isOpen ? 'visible' : 'hidden'};\n        height: ${isOpen ? 'auto' : '0'};\n      `\n    },\n    devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => {\n      if (isResizing()) {\n        return css`\n          transition: none;\n        `\n      }\n\n      return css`\n        transition: all 0.4s ease;\n      `\n    },\n    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {\n      if (isOpen) {\n        return css`\n          pointer-events: auto;\n          transform: translateY(0);\n        `\n      }\n      return css`\n        pointer-events: none;\n        transform: translateY(${height}px);\n      `\n    },\n    devtoolsPanel: css`\n      display: flex;\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.sans};\n      background-color: ${colors.darkGray[700]};\n      color: ${colors.gray[300]};\n      width: w-screen;\n      flex-direction: row;\n      overflow-x: hidden;\n      overflow-y: hidden;\n      height: 100%;\n    `,\n    dragHandle: (panelLocation: TanStackDevtoolsConfig['panelLocation']) => css`\n      position: absolute;\n      left: 0;\n      ${panelLocation === 'bottom' ? 'top' : 'bottom'}: 0;\n      width: 100%;\n      height: 4px;\n      cursor: row-resize;\n      user-select: none;\n      z-index: 100000;\n      &:hover {\n        background-color: ${colors.purple[400]}${alpha[90]};\n      }\n    `,\n\n    mainCloseBtn: css`\n      background: transparent;\n      position: fixed;\n      z-index: 99999;\n      display: inline-flex;\n      width: fit-content;\n      cursor: pointer;\n      appearance: none;\n      border: 0;\n      align-items: center;\n      padding: 0;\n      font-size: ${font.size.xs};\n      cursor: pointer;\n      transition: all 0.25s ease-out;\n      &:hide-until-hover {\n        opacity: 0;\n        pointer-events: none;\n        visibility: hidden;\n      }\n      &:hide-until-hover:hover {\n        opacity: 1;\n        pointer-events: auto;\n        visibility: visible;\n      }\n      &:focus-visible {\n        outline-offset: 2px;\n        border-radius: ${border.radius.full};\n        outline: 2px solid ${colors.blue[800]};\n      }\n    `,\n    mainCloseBtnPosition: (position: TanStackDevtoolsConfig['position']) => {\n      const base = css`\n        ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}\n        ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}\n        ${position === 'middle-left'\n          ? `top: 50%; left: ${size[2]}; transform: translateY(-50%);`\n          : ''}\n        ${position === 'middle-right'\n          ? `top: 50%; right: ${size[2]}; transform: translateY(-50%);`\n          : ''}\n        ${position === 'bottom-left'\n          ? `bottom: ${size[2]}; left: ${size[2]};`\n          : ''}\n        ${position === 'bottom-right'\n          ? `bottom: ${size[2]}; right: ${size[2]};`\n          : ''}\n      `\n      return base\n    },\n    mainCloseBtnAnimation: (isOpen: boolean, hideUntilHover: boolean) => {\n      if (!isOpen) {\n        return hideUntilHover\n          ? css`\n              opacity: 0;\n\n              &:hover {\n                opacity: 1;\n                pointer-events: auto;\n                visibility: visible;\n              }\n            `\n          : css`\n              opacity: 1;\n              pointer-events: auto;\n              visibility: visible;\n            `\n      }\n      return css`\n        opacity: 0;\n        pointer-events: none;\n        visibility: hidden;\n      `\n    },\n    tabContainer: css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: flex-start;\n      height: 100%;\n      background-color: ${colors.darkGray[800]};\n      border-right: 1px solid ${colors.gray[700]};\n      box-shadow: 0 1px 0 ${colors.gray[700]};\n      position: relative;\n      width: ${size[10]};\n    `,\n\n    tab: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: ${size[10]};\n      cursor: pointer;\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.sans};\n      color: ${colors.gray[300]};\n      background-color: transparent;\n      border: none;\n      transition: all 0.2s ease-in-out;\n      border-left: 2px solid transparent;\n      &:hover:not(.close):not(.active) {\n        background-color: ${colors.gray[700]};\n        color: ${colors.gray[100]};\n        border-left: 2px solid ${colors.purple[500]};\n      }\n      &.active {\n        background-color: ${colors.purple[500]};\n        color: ${colors.gray[100]};\n        border-left: 2px solid ${colors.purple[500]};\n      }\n      &.close {\n        margin-top: auto;\n        &:hover {\n          background-color: ${colors.gray[700]};\n        }\n        &:hover {\n          color: ${colors.red[500]};\n        }\n      }\n\n      &.disabled {\n        cursor: not-allowed;\n        opacity: 0.2;\n        pointer-events: none;\n      }\n      &.disabled:hover {\n        background-color: transparent;\n        color: ${colors.gray[300]};\n      }\n    `,\n    tabContent: css`\n      transition: all 0.2s ease-in-out;\n      width: 100%;\n      height: 100%;\n    `,\n    pluginsTabPanel: css`\n      display: flex;\n      flex-direction: row;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    `,\n    pluginsTabSidebar: css`\n      width: ${size[48]};\n      background-color: ${colors.darkGray[800]};\n      border-right: 1px solid ${colors.gray[700]};\n      box-shadow: 0 1px 0 ${colors.gray[700]};\n      overflow-y: auto;\n    `,\n    pluginName: css`\n      font-size: ${fontSize.xs};\n      font-family: ${fontFamily.sans};\n      color: ${colors.gray[300]};\n      padding: ${size[2]};\n      cursor: pointer;\n      text-align: center;\n      transition: all 0.2s ease-in-out;\n      &:hover {\n        background-color: ${colors.gray[700]};\n        color: ${colors.gray[100]};\n        padding: ${size[2]};\n      }\n      &.active {\n        background-color: ${colors.purple[500]};\n        color: ${colors.gray[100]};\n      }\n    `,\n    pluginsTabContent: css`\n      width: 100%;\n      height: 100%;\n      overflow-y: auto;\n    `,\n\n    settingsContainer: css`\n      padding: 1.5rem;\n      height: 100%;\n      overflow-y: auto;\n      background-color: ${colors.darkGray[700]};\n    `,\n    settingsSection: css`\n      margin-bottom: 2rem;\n      padding: 1.5rem;\n      background-color: ${colors.darkGray[800]};\n      border: 1px solid ${colors.gray[700]};\n      border-radius: 0.75rem;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    `,\n    sectionTitle: css`\n      font-size: 1.125rem;\n      font-weight: 600;\n      color: ${colors.gray[100]};\n      margin: 0 0 1rem 0;\n      padding-bottom: 0.5rem;\n      border-bottom: 1px solid ${colors.gray[700]};\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      text-align: left;\n    `,\n    sectionIcon: css`\n      color: ${colors.purple[400]};\n    `,\n    sectionDescription: css`\n      color: ${colors.gray[400]};\n      font-size: 0.875rem;\n      margin: 0 0 1.5rem 0;\n      line-height: 1.5;\n      text-align: left;\n    `,\n    settingsGroup: css`\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    `,\n    conditionalSetting: css`\n      margin-left: 1.5rem;\n      padding-left: 1rem;\n      border-left: 2px solid ${colors.purple[400]};\n      background-color: ${colors.darkGray[800]};\n      padding: 1rem;\n      border-radius: 0.5rem;\n      margin-top: 0.5rem;\n    `,\n    settingRow: css`\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 1rem;\n\n      @media (max-width: 768px) {\n        grid-template-columns: 1fr;\n      }\n    `,\n  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createSignal } from 'solid-js'\nimport { tokens } from './tokens'\nimport type { TanStackDevtoolsConfig } from '../context/devtools-context'\nimport type { Accessor } from 'solid-js'\n\nconst stylesFactory = () => {\n  const { colors, font, size, alpha, border } = tokens\n  const { fontFamily, size: fontSize } = font\n  const css = goober.css\n\n  return {\n    devtoolsPanelContainer: (\n      panelLocation: TanStackDevtoolsConfig['panelLocation'],\n    ) => css`\n      direction: ltr;\n      position: fixed;\n      overflow-y: hidden;\n      overflow-x: hidden;\n      ${panelLocation}: 0;\n      right: 0;\n      z-index: 99999;\n      width: 100%;\n\n      max-height: 90%;\n      border-top: 1px solid ${colors.gray[700]};\n      transform-origin: top;\n    `,\n    devtoolsPanelContainerVisibility: (isOpen: boolean) => {\n      return css`\n        visibility: ${isOpen ? 'visible' : 'hidden'};\n        height: ${isOpen ? 'auto' : '0'};\n      `\n    },\n    devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => {\n      if (isResizing()) {\n        return css`\n          transition: none;\n        `\n      }\n\n      return css`\n        transition: all 0.4s ease;\n      `\n    },\n    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {\n      if (isOpen) {\n        return css`\n          pointer-events: auto;\n          transform: translateY(0);\n        `\n      }\n      return css`\n        pointer-events: none;\n        transform: translateY(${height}px);\n      `\n    },\n    devtoolsPanel: css`\n      display: flex;\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.sans};\n      background-color: ${colors.darkGray[700]};\n      color: ${colors.gray[300]};\n      width: w-screen;\n      flex-direction: row;\n      overflow-x: hidden;\n      overflow-y: hidden;\n      height: 100%;\n    `,\n    dragHandle: (panelLocation: TanStackDevtoolsConfig['panelLocation']) => css`\n      position: absolute;\n      left: 0;\n      ${panelLocation === 'bottom' ? 'top' : 'bottom'}: 0;\n      width: 100%;\n      height: 4px;\n      cursor: row-resize;\n      user-select: none;\n      z-index: 100000;\n      &:hover {\n        background-color: ${colors.purple[400]}${alpha[90]};\n      }\n    `,\n\n    mainCloseBtn: css`\n      background: transparent;\n      position: fixed;\n      z-index: 99999;\n      display: inline-flex;\n      width: fit-content;\n      cursor: pointer;\n      appearance: none;\n      border: 0;\n      align-items: center;\n      padding: 0;\n      font-size: ${font.size.xs};\n      cursor: pointer;\n      transition: all 0.25s ease-out;\n      &:hide-until-hover {\n        opacity: 0;\n        pointer-events: none;\n        visibility: hidden;\n      }\n      &:hide-until-hover:hover {\n        opacity: 1;\n        pointer-events: auto;\n        visibility: visible;\n      }\n      &:focus-visible {\n        outline-offset: 2px;\n        border-radius: ${border.radius.full};\n        outline: 2px solid ${colors.blue[800]};\n      }\n    `,\n    mainCloseBtnPosition: (position: TanStackDevtoolsConfig['position']) => {\n      const base = css`\n        ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}\n        ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}\n        ${position === 'middle-left'\n          ? `top: 50%; left: ${size[2]}; transform: translateY(-50%);`\n          : ''}\n        ${position === 'middle-right'\n          ? `top: 50%; right: ${size[2]}; transform: translateY(-50%);`\n          : ''}\n        ${position === 'bottom-left'\n          ? `bottom: ${size[2]}; left: ${size[2]};`\n          : ''}\n        ${position === 'bottom-right'\n          ? `bottom: ${size[2]}; right: ${size[2]};`\n          : ''}\n      `\n      return base\n    },\n    mainCloseBtnAnimation: (isOpen: boolean, hideUntilHover: boolean) => {\n      if (!isOpen) {\n        return hideUntilHover\n          ? css`\n              opacity: 0;\n\n              &:hover {\n                opacity: 1;\n                pointer-events: auto;\n                visibility: visible;\n              }\n            `\n          : css`\n              opacity: 1;\n              pointer-events: auto;\n              visibility: visible;\n            `\n      }\n      return css`\n        opacity: 0;\n        pointer-events: none;\n        visibility: hidden;\n      `\n    },\n    tabContainer: css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: flex-start;\n      height: 100%;\n      background-color: ${colors.darkGray[800]};\n      border-right: 1px solid ${colors.gray[700]};\n      box-shadow: 0 1px 0 ${colors.gray[700]};\n      position: relative;\n      width: ${size[10]};\n    `,\n\n    tab: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: ${size[10]};\n      cursor: pointer;\n      font-size: ${fontSize.sm};\n      font-family: ${fontFamily.sans};\n      color: ${colors.gray[300]};\n      background-color: transparent;\n      border: none;\n      transition: all 0.2s ease-in-out;\n      border-left: 2px solid transparent;\n      &:hover:not(.close):not(.active) {\n        background-color: ${colors.gray[700]};\n        color: ${colors.gray[100]};\n        border-left: 2px solid ${colors.purple[500]};\n      }\n      &.active {\n        background-color: ${colors.purple[500]};\n        color: ${colors.gray[100]};\n        border-left: 2px solid ${colors.purple[500]};\n      }\n      &.close {\n        margin-top: auto;\n        &:hover {\n          background-color: ${colors.gray[700]};\n        }\n        &:hover {\n          color: ${colors.red[500]};\n        }\n      }\n\n      &.disabled {\n        cursor: not-allowed;\n        opacity: 0.2;\n        pointer-events: none;\n      }\n      &.disabled:hover {\n        background-color: transparent;\n        color: ${colors.gray[300]};\n      }\n    `,\n    tabContent: css`\n      transition: all 0.2s ease-in-out;\n      width: 100%;\n      height: 100%;\n    `,\n    pluginsTabPanel: css`\n      display: flex;\n      flex-direction: row;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    `,\n    pluginsTabSidebar: css`\n      width: ${size[48]};\n      background-color: ${colors.darkGray[800]};\n      border-right: 1px solid ${colors.gray[700]};\n      box-shadow: 0 1px 0 ${colors.gray[700]};\n      overflow-y: auto;\n    `,\n    pluginName: css`\n      font-size: ${fontSize.xs};\n      font-family: ${fontFamily.sans};\n      color: ${colors.gray[300]};\n      padding: ${size[2]};\n      cursor: pointer;\n      text-align: center;\n      transition: all 0.2s ease-in-out;\n      &:hover {\n        background-color: ${colors.gray[700]};\n        color: ${colors.gray[100]};\n        padding: ${size[2]};\n      }\n      &.active {\n        background-color: ${colors.purple[500]};\n        color: ${colors.gray[100]};\n      }\n    `,\n    pluginsTabContent: css`\n      width: 100%;\n      height: 100%;\n      overflow-y: auto;\n    `,\n\n    settingsContainer: css`\n      padding: 1.5rem;\n      height: 100%;\n      overflow-y: auto;\n      background-color: ${colors.darkGray[700]};\n    `,\n    settingsSection: css`\n      margin-bottom: 2rem;\n      padding: 1.5rem;\n      background-color: ${colors.darkGray[800]};\n      border: 1px solid ${colors.gray[700]};\n      border-radius: 0.75rem;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    `,\n    sectionTitle: css`\n      font-size: 1.125rem;\n      font-weight: 600;\n      color: ${colors.gray[100]};\n      margin: 0 0 1rem 0;\n      padding-bottom: 0.5rem;\n      border-bottom: 1px solid ${colors.gray[700]};\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      text-align: left;\n    `,\n    sectionIcon: css`\n      color: ${colors.purple[400]};\n    `,\n    sectionDescription: css`\n      color: ${colors.gray[400]};\n      font-size: 0.875rem;\n      margin: 0 0 1.5rem 0;\n      line-height: 1.5;\n      text-align: left;\n    `,\n    settingsGroup: css`\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    `,\n    conditionalSetting: css`\n      margin-left: 1.5rem;\n      padding-left: 1rem;\n      border-left: 2px solid ${colors.purple[400]};\n      background-color: ${colors.darkGray[800]};\n      padding: 1rem;\n      border-radius: 0.5rem;\n      margin-top: 0.5rem;\n    `,\n    settingRow: css`\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 1rem;\n\n      @media (max-width: 768px) {\n        grid-template-columns: 1fr;\n      }\n    `,\n    settingsModifiers: css`\n      display: flex;\n      gap: 0.5rem;\n    `,\n  }\n}\n\nexport function useStyles() {\n  const [_styles] = createSignal(stylesFactory())\n  return _styles\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/tabs/settings-tab.js

@@ -1,18 +1,32 @@
 import { template, insert, createComponent, effect, className, setAttribute } from "solid-js/web";
-import { Show } from "solid-js";
-import { Checkbox, Input, Select } from "@tanstack/devtools-ui";
+import { createMemo, Show } from "solid-js";
+import { Checkbox, Input, Button, Select } from "@tanstack/devtools-ui";
 import { useDevtoolsSettings } from "../context/use-devtools-context.js";
 import { uppercaseFirstLetter } from "../utils/sanitize.js";
 import { useStyles } from "../styles/use-styles.js";
-var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx=12 cy=12 r=3></circle></svg>General</h3><p>Configure general behavior of the devtools panel.</p><div></div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9 17H7A5 5 0 0 1 7 7h2"></path><path d="M15 7h2a5 5 0 1 1 0 10h-2"></path><line x1=8 x2=16 y1=12 y2=12></line></svg>URL Configuration</h3><p>Control when devtools are available based on URL parameters.</p><div></div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M10 8h.01"></path><path d="M12 12h.01"></path><path d="M14 8h.01"></path><path d="M16 12h.01"></path><path d="M18 8h.01"></path><path d="M6 8h.01"></path><path d="M7 16h10"></path><path d="M8 12h.01"></path><rect width=20 height=16 x=2 y=4 rx=2></rect></svg>Keyboard</h3><p>Customize keyboard shortcuts for quick access.</p><div></div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx=12 cy=10 r=3></circle></svg>Position</h3><p>Adjust the position of the trigger button and devtools panel.</p><div><div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx=12 cy=12 r=3></circle></svg>General</h3><p>Configure general behavior of the devtools panel.</p><div></div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9 17H7A5 5 0 0 1 7 7h2"></path><path d="M15 7h2a5 5 0 1 1 0 10h-2"></path><line x1=8 x2=16 y1=12 y2=12></line></svg>URL Configuration</h3><p>Control when devtools are available based on URL parameters.</p><div></div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M10 8h.01"></path><path d="M12 12h.01"></path><path d="M14 8h.01"></path><path d="M16 12h.01"></path><path d="M18 8h.01"></path><path d="M6 8h.01"></path><path d="M7 16h10"></path><path d="M8 12h.01"></path><rect width=20 height=16 x=2 y=4 rx=2></rect></svg>Keyboard</h3><p>Customize keyboard shortcuts for quick access.</p><div><div></div>Final shortcut is: </div></div><div><h3><svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx=12 cy=10 r=3></circle></svg>Position</h3><p>Adjust the position of the trigger button and devtools panel.</p><div><div>`);
 const 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]
+    });
+  };
   return (() => {
-    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$2.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$8.nextSibling, _el$11 = _el$10.nextSibling, _el$13 = _el$7.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.nextSibling, _el$18 = _el$13.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$19.nextSibling, _el$22 = _el$21.nextSibling, _el$23 = _el$22.firstChild;
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$2.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$10 = _el$8.nextSibling, _el$11 = _el$10.nextSibling, _el$13 = _el$7.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.nextSibling, _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$13.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$21.firstChild, _el$23 = _el$21.nextSibling, _el$24 = _el$23.nextSibling, _el$25 = _el$24.firstChild;
     insert(_el$6, createComponent(Checkbox, {
       label: "Default open",
       description: "Automatically open the devtools panel when the page loads",
@@ -64,18 +78,77 @@ const SettingsTab = () => {
         return _el$12;
       }
     }), null);
+    insert(_el$18, createComponent(Show, {
+      keyed: true,
+      get when() {
+        return hotkey();
+      },
+      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$17, createComponent(Input, {
       label: "Hotkey to open/close devtools",
-      description: "Use '+' to combine keys (e.g., 'Ctrl+Shift+D' or 'Alt+D')",
-      placeholder: "Ctrl+Shift+D",
+      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 settings().openHotkey.join("+");
+        return hotkey().filter((key) => !["Shift", "Meta", "Alt", "Ctrl"].includes(key)).join("+");
       },
-      onChange: (e) => setSettings({
-        openHotkey: e.split("+").map((key) => uppercaseFirstLetter(key)).filter(Boolean)
-      })
-    }));
-    insert(_el$23, createComponent(Select, {
+      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);
+        console.log(e, modifiers2);
+        return setSettings({
+          openHotkey: [...hotkey().filter((key) => ["Shift", "Meta", "Alt", "Ctrl"].includes(key)), ...modifiers2]
+        });
+      }
+    }), _el$19);
+    insert(_el$17, () => hotkey().join(" + "), null);
+    insert(_el$25, createComponent(Select, {
       label: "Trigger Position",
       options: [{
         label: "Bottom Right",
@@ -103,7 +176,7 @@ const SettingsTab = () => {
         position: value
       })
     }), null);
-    insert(_el$23, createComponent(Select, {
+    insert(_el$25, createComponent(Select, {
       label: "Panel Position",
       get value() {
         return settings().panelLocation;
@@ -120,7 +193,7 @@ const SettingsTab = () => {
       })
     }), null);
     effect((_p$) => {
-      var _v$ = styles().settingsContainer, _v$2 = styles().settingsSection, _v$3 = styles().sectionTitle, _v$4 = styles().sectionIcon, _v$5 = styles().sectionDescription, _v$6 = styles().settingsGroup, _v$7 = styles().settingsSection, _v$8 = styles().sectionTitle, _v$9 = styles().sectionIcon, _v$10 = styles().sectionDescription, _v$11 = styles().settingsGroup, _v$12 = styles().settingsSection, _v$13 = styles().sectionTitle, _v$14 = styles().sectionIcon, _v$15 = styles().sectionDescription, _v$16 = styles().settingsGroup, _v$17 = styles().settingsSection, _v$18 = styles().sectionTitle, _v$19 = styles().sectionIcon, _v$20 = styles().sectionDescription, _v$21 = styles().settingsGroup, _v$22 = styles().settingRow;
+      var _v$ = styles().settingsContainer, _v$2 = styles().settingsSection, _v$3 = styles().sectionTitle, _v$4 = styles().sectionIcon, _v$5 = styles().sectionDescription, _v$6 = styles().settingsGroup, _v$7 = styles().settingsSection, _v$8 = styles().sectionTitle, _v$9 = styles().sectionIcon, _v$10 = styles().sectionDescription, _v$11 = styles().settingsGroup, _v$12 = styles().settingsSection, _v$13 = styles().sectionTitle, _v$14 = styles().sectionIcon, _v$15 = styles().sectionDescription, _v$16 = styles().settingsGroup, _v$17 = styles().settingsModifiers, _v$18 = styles().settingsSection, _v$19 = styles().sectionTitle, _v$20 = styles().sectionIcon, _v$21 = styles().sectionDescription, _v$22 = styles().settingsGroup, _v$23 = styles().settingRow;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
       _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
@@ -138,11 +211,12 @@ const SettingsTab = () => {
       _v$15 !== _p$.m && className(_el$16, _p$.m = _v$15);
       _v$16 !== _p$.f && className(_el$17, _p$.f = _v$16);
       _v$17 !== _p$.y && className(_el$18, _p$.y = _v$17);
-      _v$18 !== _p$.g && className(_el$19, _p$.g = _v$18);
-      _v$19 !== _p$.p && setAttribute(_el$20, "class", _p$.p = _v$19);
-      _v$20 !== _p$.b && className(_el$21, _p$.b = _v$20);
-      _v$21 !== _p$.T && className(_el$22, _p$.T = _v$21);
-      _v$22 !== _p$.A && className(_el$23, _p$.A = _v$22);
+      _v$18 !== _p$.g && className(_el$20, _p$.g = _v$18);
+      _v$19 !== _p$.p && className(_el$21, _p$.p = _v$19);
+      _v$20 !== _p$.b && setAttribute(_el$22, "class", _p$.b = _v$20);
+      _v$21 !== _p$.T && className(_el$23, _p$.T = _v$21);
+      _v$22 !== _p$.A && className(_el$24, _p$.A = _v$22);
+      _v$23 !== _p$.O && className(_el$25, _p$.O = _v$23);
       return _p$;
     }, {
       e: void 0,
@@ -166,7 +240,8 @@ const SettingsTab = () => {
       p: void 0,
       b: void 0,
       T: void 0,
-      A: void 0
+      A: void 0,
+      O: void 0
     });
     return _el$;
   })();

package/dist/esm/tabs/settings-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show } from 'solid-js'\nimport { Checkbox, Input, Select } from '@tanstack/devtools-ui'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { useStyles } from '../styles/use-styles'\n\nexport const SettingsTab = () => {\n  const { setSettings, settings } = useDevtoolsSettings()\n  const styles = useStyles()\n\n  return (\n    <div class={styles().settingsContainer}>\n      {/* General Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class={styles().sectionIcon}\n          >\n            <path d=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\" />\n            <circle cx=\"12\" cy=\"12\" r=\"3\" />\n          </svg>\n          General\n        </h3>\n        <p class={styles().sectionDescription}>\n          Configure general behavior of the devtools panel.\n        </p>\n        <div class={styles().settingsGroup}>\n          <Checkbox\n            label=\"Default open\"\n            description=\"Automatically open the devtools panel when the page loads\"\n            onChange={() =>\n              setSettings({ defaultOpen: !settings().defaultOpen })\n            }\n            checked={settings().defaultOpen}\n          />\n          <Checkbox\n            label=\"Hide trigger until hovered\"\n            description=\"Keep the devtools trigger button hidden until you hover over its area\"\n            onChange={() =>\n              setSettings({ hideUntilHover: !settings().hideUntilHover })\n            }\n            checked={settings().hideUntilHover}\n          />\n        </div>\n      </div>\n\n      {/* URL Flag Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M9 17H7A5 5 0 0 1 7 7h2\" />\n            <path d=\"M15 7h2a5 5 0 1 1 0 10h-2\" />\n            <line x1=\"8\" x2=\"16\" y1=\"12\" y2=\"12\" />\n          </svg>\n          URL Configuration\n        </h3>\n        <p class={styles().sectionDescription}>\n          Control when devtools are available based on URL parameters.\n        </p>\n        <div class={styles().settingsGroup}>\n          <Checkbox\n            label=\"Require URL Flag\"\n            description=\"Only show devtools when a specific URL parameter is present\"\n            checked={settings().requireUrlFlag}\n            onChange={(checked) =>\n              setSettings({\n                requireUrlFlag: checked,\n              })\n            }\n          />\n          <Show when={settings().requireUrlFlag}>\n            <div class={styles().conditionalSetting}>\n              <Input\n                label=\"URL flag\"\n                description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n                placeholder=\"debug\"\n                value={settings().urlFlag}\n                onChange={(e) =>\n                  setSettings({\n                    urlFlag: e,\n                  })\n                }\n              />\n            </div>\n          </Show>\n        </div>\n      </div>\n\n      {/* Keyboard Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M10 8h.01\" />\n            <path d=\"M12 12h.01\" />\n            <path d=\"M14 8h.01\" />\n            <path d=\"M16 12h.01\" />\n            <path d=\"M18 8h.01\" />\n            <path d=\"M6 8h.01\" />\n            <path d=\"M7 16h10\" />\n            <path d=\"M8 12h.01\" />\n            <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n          </svg>\n          Keyboard\n        </h3>\n        <p class={styles().sectionDescription}>\n          Customize keyboard shortcuts for quick access.\n        </p>\n        <div class={styles().settingsGroup}>\n          <Input\n            label=\"Hotkey to open/close devtools\"\n            description=\"Use '+' to combine keys (e.g., 'Ctrl+Shift+D' or 'Alt+D')\"\n            placeholder=\"Ctrl+Shift+D\"\n            value={settings().openHotkey.join('+')}\n            onChange={(e) =>\n              setSettings({\n                openHotkey: e\n                  .split('+')\n                  .map((key) => uppercaseFirstLetter(key))\n                  .filter(Boolean),\n              })\n            }\n          />\n        </div>\n      </div>\n\n      {/* Position Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\" />\n            <circle cx=\"12\" cy=\"10\" r=\"3\" />\n          </svg>\n          Position\n        </h3>\n        <p class={styles().sectionDescription}>\n          Adjust the position of the trigger button and devtools panel.\n        </p>\n        <div class={styles().settingsGroup}>\n          <div class={styles().settingRow}>\n            <Select\n              label=\"Trigger Position\"\n              options={[\n                { label: 'Bottom Right', value: 'bottom-right' },\n                { label: 'Bottom Left', value: 'bottom-left' },\n                { label: 'Top Right', value: 'top-right' },\n                { label: 'Top Left', value: 'top-left' },\n                { label: 'Middle Right', value: 'middle-right' },\n                { label: 'Middle Left', value: 'middle-left' },\n              ]}\n              value={settings().position}\n              onChange={(value) =>\n                setSettings({\n                  position: value,\n                })\n              }\n            />\n            <Select\n              label=\"Panel Position\"\n              value={settings().panelLocation}\n              options={[\n                { label: 'Top', value: 'top' },\n                { label: 'Bottom', value: 'bottom' },\n              ]}\n              onChange={(value) =>\n                setSettings({\n                  panelLocation: value,\n                })\n              }\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$10","_el$11","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_$insert","_$createComponent","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","requireUrlFlag","Show","when","children","_el$12","_tmpl$","Input","placeholder","value","urlFlag","e","_$effect","_$className","conditionalSetting","openHotkey","join","split","map","key","uppercaseFirstLetter","filter","Boolean","Select","options","position","panelLocation","_p$","_v$","settingsContainer","_v$2","settingsSection","_v$3","sectionTitle","_v$4","sectionIcon","_v$5","sectionDescription","_v$6","settingsGroup","_v$7","_v$8","_v$9","_v$10","_v$11","_v$12","_v$13","_v$14","_v$15","_v$16","_v$17","_v$18","_v$19","_v$20","_v$21","_v$22","settingRow","t","a","o","_$setAttribute","i","n","s","h","r","d","l","u","c","w","m","f","y","g","p","b","T","A","undefined"],"mappings":"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"}
+{"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show, createMemo } from 'solid-js'\nimport { Button, Checkbox, Input, Select } from '@tanstack/devtools-ui'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { useStyles } from '../styles/use-styles'\nimport type { ModifierKey } from '@solid-primitives/keyboard'\n\nexport const SettingsTab = () => {\n  const { setSettings, settings } = useDevtoolsSettings()\n  const styles = useStyles()\n  const hotkey = createMemo(() => settings().openHotkey)\n  const modifiers: Array<ModifierKey> = ['Control', 'Alt', 'Meta', 'Shift']\n  const changeHotkey = (newHotkey: ModifierKey) => () => {\n    if (hotkey().includes(newHotkey)) {\n      return setSettings({\n        openHotkey: hotkey().filter((key) => key !== newHotkey),\n      })\n    }\n    const existingModifiers = hotkey().filter((key) =>\n      modifiers.includes(key as any),\n    )\n    const otherModifiers = hotkey().filter(\n      (key) => !modifiers.includes(key as any),\n    )\n    setSettings({\n      openHotkey: [...existingModifiers, newHotkey, ...otherModifiers],\n    })\n  }\n  return (\n    <div class={styles().settingsContainer}>\n      {/* General Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            class={styles().sectionIcon}\n          >\n            <path d=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\" />\n            <circle cx=\"12\" cy=\"12\" r=\"3\" />\n          </svg>\n          General\n        </h3>\n        <p class={styles().sectionDescription}>\n          Configure general behavior of the devtools panel.\n        </p>\n        <div class={styles().settingsGroup}>\n          <Checkbox\n            label=\"Default open\"\n            description=\"Automatically open the devtools panel when the page loads\"\n            onChange={() =>\n              setSettings({ defaultOpen: !settings().defaultOpen })\n            }\n            checked={settings().defaultOpen}\n          />\n          <Checkbox\n            label=\"Hide trigger until hovered\"\n            description=\"Keep the devtools trigger button hidden until you hover over its area\"\n            onChange={() =>\n              setSettings({ hideUntilHover: !settings().hideUntilHover })\n            }\n            checked={settings().hideUntilHover}\n          />\n        </div>\n      </div>\n\n      {/* URL Flag Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M9 17H7A5 5 0 0 1 7 7h2\" />\n            <path d=\"M15 7h2a5 5 0 1 1 0 10h-2\" />\n            <line x1=\"8\" x2=\"16\" y1=\"12\" y2=\"12\" />\n          </svg>\n          URL Configuration\n        </h3>\n        <p class={styles().sectionDescription}>\n          Control when devtools are available based on URL parameters.\n        </p>\n        <div class={styles().settingsGroup}>\n          <Checkbox\n            label=\"Require URL Flag\"\n            description=\"Only show devtools when a specific URL parameter is present\"\n            checked={settings().requireUrlFlag}\n            onChange={(checked) =>\n              setSettings({\n                requireUrlFlag: checked,\n              })\n            }\n          />\n          <Show when={settings().requireUrlFlag}>\n            <div class={styles().conditionalSetting}>\n              <Input\n                label=\"URL flag\"\n                description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n                placeholder=\"debug\"\n                value={settings().urlFlag}\n                onChange={(e) =>\n                  setSettings({\n                    urlFlag: e,\n                  })\n                }\n              />\n            </div>\n          </Show>\n        </div>\n      </div>\n\n      {/* Keyboard Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M10 8h.01\" />\n            <path d=\"M12 12h.01\" />\n            <path d=\"M14 8h.01\" />\n            <path d=\"M16 12h.01\" />\n            <path d=\"M18 8h.01\" />\n            <path d=\"M6 8h.01\" />\n            <path d=\"M7 16h10\" />\n            <path d=\"M8 12h.01\" />\n            <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n          </svg>\n          Keyboard\n        </h3>\n        <p class={styles().sectionDescription}>\n          Customize keyboard shortcuts for quick access.\n        </p>\n        <div class={styles().settingsGroup}>\n          <div class={styles().settingsModifiers}>\n            <Show keyed when={hotkey()}>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Shift')}\n                outline={!hotkey().includes('Shift')}\n              >\n                Shift\n              </Button>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Alt')}\n                outline={!hotkey().includes('Alt')}\n              >\n                Alt\n              </Button>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Meta')}\n                outline={!hotkey().includes('Meta')}\n              >\n                Meta\n              </Button>\n              <Button\n                variant=\"success\"\n                onclick={changeHotkey('Control')}\n                outline={!hotkey().includes('Control')}\n              >\n                Control\n              </Button>\n            </Show>\n          </div>\n          <Input\n            label=\"Hotkey to open/close devtools\"\n            description=\"Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above\"\n            placeholder=\"a\"\n            value={hotkey()\n              .filter((key) => !['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key))\n              .join('+')}\n            onChange={(e) => {\n              const makeModifierArray = (key: string) => {\n                if (key.length === 1) return [uppercaseFirstLetter(key)]\n                const modifiers: Array<string> = []\n                for (const character of key) {\n                  const newLetter = uppercaseFirstLetter(character)\n                  if (!modifiers.includes(newLetter)) modifiers.push(newLetter)\n                }\n                return modifiers\n              }\n              const modifiers = e\n                .split('+')\n                .flatMap((key) => makeModifierArray(key))\n                .filter(Boolean)\n              console.log(e, modifiers)\n              return setSettings({\n                openHotkey: [\n                  ...hotkey().filter((key) =>\n                    ['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key),\n                  ),\n                  ...modifiers,\n                ],\n              })\n            }}\n          />\n          Final shortcut is: {hotkey().join(' + ')}\n        </div>\n      </div>\n\n      {/* Position Settings */}\n      <div class={styles().settingsSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"20\"\n            height=\"20\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\" />\n            <circle cx=\"12\" cy=\"10\" r=\"3\" />\n          </svg>\n          Position\n        </h3>\n        <p class={styles().sectionDescription}>\n          Adjust the position of the trigger button and devtools panel.\n        </p>\n        <div class={styles().settingsGroup}>\n          <div class={styles().settingRow}>\n            <Select\n              label=\"Trigger Position\"\n              options={[\n                { label: 'Bottom Right', value: 'bottom-right' },\n                { label: 'Bottom Left', value: 'bottom-left' },\n                { label: 'Top Right', value: 'top-right' },\n                { label: 'Top Left', value: 'top-left' },\n                { label: 'Middle Right', value: 'middle-right' },\n                { label: 'Middle Left', value: 'middle-left' },\n              ]}\n              value={settings().position}\n              onChange={(value) =>\n                setSettings({\n                  position: value,\n                })\n              }\n            />\n            <Select\n              label=\"Panel Position\"\n              value={settings().panelLocation}\n              options={[\n                { label: 'Top', value: 'top' },\n                { label: 'Bottom', value: 'bottom' },\n              ]}\n              onChange={(value) =>\n                setSettings({\n                  panelLocation: value,\n                })\n              }\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","hotkey","createMemo","openHotkey","modifiers","changeHotkey","newHotkey","includes","filter","key","existingModifiers","otherModifiers","_el$","_tmpl$2","_el$2","firstChild","_el$3","_el$4","_el$5","nextSibling","_el$6","_el$7","_el$8","_el$9","_el$10","_el$11","_el$13","_el$14","_el$15","_el$16","_el$17","_el$18","_el$19","_el$20","_el$21","_el$22","_el$23","_el$24","_el$25","_$insert","_$createComponent","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","requireUrlFlag","Show","when","children","_el$12","_tmpl$","Input","placeholder","value","urlFlag","e","_$effect","_$className","conditionalSetting","keyed","Button","variant","onclick","outline","join","makeModifierArray","length","uppercaseFirstLetter","character","newLetter","push","split","flatMap","Boolean","console","log","Select","options","position","panelLocation","_p$","_v$","settingsContainer","_v$2","settingsSection","_v$3","sectionTitle","_v$4","sectionIcon","_v$5","sectionDescription","_v$6","settingsGroup","_v$7","_v$8","_v$9","_v$10","_v$11","_v$12","_v$13","_v$14","_v$15","_v$16","_v$17","settingsModifiers","_v$18","_v$19","_v$20","_v$21","_v$22","_v$23","settingRow","t","a","o","_$setAttribute","i","n","s","h","r","d","l","u","c","w","m","f","y","g","p","b","T","A","O","undefined"],"mappings":"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"}

package/dist/esm/utils/sanitize.d.ts

@@ -1,2 +1,3 @@
 export declare const tryParseJson: <T>(json: string | null) => T | undefined;
 export declare const uppercaseFirstLetter: (value: string) => string;
+export declare const getAllPermutations: <T extends any>(arr: Array<T>) => T[][];

package/dist/esm/utils/sanitize.js

@@ -7,7 +7,24 @@ const tryParseJson = (json) => {
   }
 };
 const uppercaseFirstLetter = (value) => value.charAt(0).toUpperCase() + value.slice(1);
+const 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;
+};
 export {
+  getAllPermutations,
   tryParseJson,
   uppercaseFirstLetter
 };

package/dist/esm/utils/sanitize.js.map

@@ -1 +1 @@
-{"version":3,"file":"sanitize.js","sources":["../../../src/utils/sanitize.ts"],"sourcesContent":["export const tryParseJson = <T>(json: string | null): T | undefined => {\n  if (!json) return undefined\n  try {\n    return JSON.parse(json)\n  } catch (_e) {\n    return undefined\n  }\n}\n\nexport const uppercaseFirstLetter = (value: string) =>\n  value.charAt(0).toUpperCase() + value.slice(1)\n"],"names":[],"mappings":"AAAO,MAAM,eAAe,CAAI,SAAuC;AACrE,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,IAAI;AACX,WAAO;AAAA,EACT;AACF;AAEO,MAAM,uBAAuB,CAAC,UACnC,MAAM,OAAO,CAAC,EAAE,YAAA,IAAgB,MAAM,MAAM,CAAC;"}
+{"version":3,"file":"sanitize.js","sources":["../../../src/utils/sanitize.ts"],"sourcesContent":["export const tryParseJson = <T>(json: string | null): T | undefined => {\n  if (!json) return undefined\n  try {\n    return JSON.parse(json)\n  } catch (_e) {\n    return undefined\n  }\n}\n\nexport const uppercaseFirstLetter = (value: string) =>\n  value.charAt(0).toUpperCase() + value.slice(1)\n\nexport const getAllPermutations = <T extends any>(arr: Array<T>) => {\n  const res: Array<Array<T>> = []\n\n  function permutate(arr: Array<T>, start: number) {\n    if (start === arr.length - 1) {\n      res.push([...arr] as any)\n      return\n    }\n    for (let i = start; i < arr.length; i++) {\n      ;[arr[start], arr[i]] = [arr[i]!, arr[start]!]\n      permutate(arr, start + 1)\n      ;[arr[start], arr[i]] = [arr[i]!, arr[start]]\n    }\n  }\n  permutate(arr, 0)\n\n  return res\n}\n"],"names":["arr"],"mappings":"AAAO,MAAM,eAAe,CAAI,SAAuC;AACrE,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,IAAI;AACX,WAAO;AAAA,EACT;AACF;AAEO,MAAM,uBAAuB,CAAC,UACnC,MAAM,OAAO,CAAC,EAAE,YAAA,IAAgB,MAAM,MAAM,CAAC;AAExC,MAAM,qBAAqB,CAAgB,QAAkB;AAClE,QAAM,MAAuB,CAAA;AAE7B,WAAS,UAAUA,MAAe,OAAe;AAC/C,QAAI,UAAUA,KAAI,SAAS,GAAG;AAC5B,UAAI,KAAK,CAAC,GAAGA,IAAG,CAAQ;AACxB;AAAA,IACF;AACA,aAAS,IAAI,OAAO,IAAIA,KAAI,QAAQ,KAAK;AACtC,OAACA,KAAI,KAAK,GAAGA,KAAI,CAAC,CAAC,IAAI,CAACA,KAAI,CAAC,GAAIA,KAAI,KAAK,CAAE;AAC7C,gBAAUA,MAAK,QAAQ,CAAC;AACvB,OAACA,KAAI,KAAK,GAAGA,KAAI,CAAC,CAAC,IAAI,CAACA,KAAI,CAAC,GAAIA,KAAI,KAAK,CAAC;AAAA,IAC9C;AAAA,EACF;AACA,YAAU,KAAK,CAAC;AAEhB,SAAO;AACT;"}

package/package.json

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

package/src/context/devtools-store.ts

@@ -3,6 +3,12 @@ import type { TanStackDevtoolsPlugin } from './devtools-context'
 
 type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'
 type KeyboardKey = ModifierKey | (string & {})
+export const keyboardModifiers: Array<ModifierKey> = [
+  'Alt',
+  'Control',
+  'Meta',
+  'Shift',
+]
 
 type TriggerPosition =
   | 'top-left'

package/src/devtools.tsx

@@ -12,6 +12,8 @@ import { MainPanel } from './components/main-panel'
 import { ContentPanel } from './components/content-panel'
 import { Tabs } from './components/tabs'
 import { TabContent } from './components/tab-content'
+import { keyboardModifiers } from './context/devtools-store'
+import { getAllPermutations } from './utils/sanitize'
 
 export default function DevTools() {
   const { settings } = useDevtoolsSettings()
@@ -131,12 +133,24 @@ export default function DevTools() {
     }
   })
   createEffect(() => {
-    createShortcut(settings().openHotkey, () => {
-      toggleOpen()
-    })
+    // we create all combinations of modifiers
+    const modifiers = settings().openHotkey.filter((key) =>
+      keyboardModifiers.includes(key as any),
+    )
+    const nonModifiers = settings().openHotkey.filter(
+      (key) => !keyboardModifiers.includes(key as any),
+    )
+
+    const allModifierCombinations = getAllPermutations(modifiers)
+
+    for (const combination of allModifierCombinations) {
+      const permutation = [...combination, ...nonModifiers]
+      createShortcut(permutation, () => {
+        toggleOpen()
+      })
+    }
   })
 
-  createEffect(() => {})
   return (
     <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>
       <Show

package/src/styles/use-styles.ts

@@ -313,6 +313,10 @@ const stylesFactory = () => {
         grid-template-columns: 1fr;
       }
     `,
+    settingsModifiers: css`
+      display: flex;
+      gap: 0.5rem;
+    `,
   }
 }