@tanstack/devtools 0.4.3 → 0.4.4

package/dist/cjs/devtools.cjs

@@ -127,6 +127,27 @@ function DevTools() {
       });
     }
   });
+  solidJs.createEffect(() => {
+    const openSourceHandler = (e) => {
+      const isShiftHeld = e.shiftKey;
+      const isCtrlHeld = e.ctrlKey || e.metaKey;
+      if (!isShiftHeld || !isCtrlHeld) return;
+      if (e.target instanceof HTMLElement) {
+        const dataSource = e.target.getAttribute("data-tsd-source");
+        window.getSelection()?.removeAllRanges();
+        if (dataSource) {
+          e.preventDefault();
+          e.stopPropagation();
+          fetch(`http://localhost:__TSD_PORT__/__tsd/open-source?source=${dataSource}`).catch(() => {
+          });
+        }
+      }
+    };
+    window.addEventListener("click", openSourceHandler);
+    solidJs.onCleanup(() => {
+      window.removeEventListener("click", openSourceHandler);
+    });
+  });
   return (() => {
     var _el$ = _tmpl$();
     web.use(setRootEl, _el$);

package/dist/cjs/devtools.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.cjs","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":"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"}
+{"version":3,"file":"devtools.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["import { Show, createEffect, createSignal, onCleanup } 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  createEffect(() => {\n    // this will only work with the Vite plugin\n    const openSourceHandler = (e: Event) => {\n      const isShiftHeld = (e as KeyboardEvent).shiftKey\n      const isCtrlHeld =\n        (e as KeyboardEvent).ctrlKey || (e as KeyboardEvent).metaKey\n      if (!isShiftHeld || !isCtrlHeld) return\n\n      if (e.target instanceof HTMLElement) {\n        const dataSource = e.target.getAttribute('data-tsd-source')\n        window.getSelection()?.removeAllRanges()\n        if (dataSource) {\n          e.preventDefault()\n          e.stopPropagation()\n          fetch(\n            `http://localhost:__TSD_PORT__/__tsd/open-source?source=${dataSource}`,\n          ).catch(() => {})\n        }\n      }\n    }\n    window.addEventListener('click', openSourceHandler)\n    onCleanup(() => {\n      window.removeEventListener('click', openSourceHandler)\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","openSourceHandler","isShiftHeld","shiftKey","isCtrlHeld","ctrlKey","metaKey","target","HTMLElement","dataSource","getAttribute","getSelection","removeAllRanges","preventDefault","stopPropagation","fetch","catch","onCleanup","_el$","_tmpl$","_$use","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","_$createComponent","Show","when","_$memo","requireUrlFlag","location","search","urlFlag","children","Trigger","MainPanel","ContentPanel","ref","Tabs","TabContent"],"mappings":"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"}

package/dist/cjs/tabs/settings-tab.cjs

@@ -28,7 +28,7 @@ const SettingsTab = () => {
     });
   };
   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$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;
+    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$0 = _el$8.nextSibling, _el$1 = _el$0.nextSibling, _el$11 = _el$7.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling, _el$15 = _el$14.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$11.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;
     web.insert(_el$6, web.createComponent(devtoolsUi.Checkbox, {
       label: "Default open",
       description: "Automatically open the devtools panel when the page loads",
@@ -49,7 +49,7 @@ const SettingsTab = () => {
         return settings().hideUntilHover;
       }
     }), null);
-    web.insert(_el$11, web.createComponent(devtoolsUi.Checkbox, {
+    web.insert(_el$1, web.createComponent(devtoolsUi.Checkbox, {
       label: "Require URL Flag",
       description: "Only show devtools when a specific URL parameter is present",
       get checked() {
@@ -59,13 +59,13 @@ const SettingsTab = () => {
         requireUrlFlag: checked
       })
     }), null);
-    web.insert(_el$11, web.createComponent(solidJs.Show, {
+    web.insert(_el$1, web.createComponent(solidJs.Show, {
       get when() {
         return settings().requireUrlFlag;
       },
       get children() {
-        var _el$12 = _tmpl$();
-        web.insert(_el$12, web.createComponent(devtoolsUi.Input, {
+        var _el$10 = _tmpl$();
+        web.insert(_el$10, web.createComponent(devtoolsUi.Input, {
           label: "URL flag",
           description: "Enter the URL parameter name (e.g., 'debug' for ?debug=true)",
           placeholder: "debug",
@@ -76,11 +76,11 @@ const SettingsTab = () => {
             urlFlag: e
           })
         }));
-        web.effect(() => web.className(_el$12, styles().conditionalSetting));
-        return _el$12;
+        web.effect(() => web.className(_el$10, styles().conditionalSetting));
+        return _el$10;
       }
     }), null);
-    web.insert(_el$18, web.createComponent(solidJs.Show, {
+    web.insert(_el$16, web.createComponent(solidJs.Show, {
       keyed: true,
       get when() {
         return hotkey();
@@ -125,7 +125,7 @@ const SettingsTab = () => {
         })];
       }
     }));
-    web.insert(_el$17, web.createComponent(devtoolsUi.Input, {
+    web.insert(_el$15, web.createComponent(devtoolsUi.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",
@@ -148,9 +148,9 @@ const SettingsTab = () => {
           openHotkey: [...hotkey().filter((key) => ["Shift", "Meta", "Alt", "Ctrl"].includes(key)), ...modifiers2]
         });
       }
-    }), _el$19);
-    web.insert(_el$17, () => hotkey().join(" + "), null);
-    web.insert(_el$25, web.createComponent(devtoolsUi.Select, {
+    }), _el$17);
+    web.insert(_el$15, () => hotkey().join(" + "), null);
+    web.insert(_el$23, web.createComponent(devtoolsUi.Select, {
       label: "Trigger Position",
       options: [{
         label: "Bottom Right",
@@ -178,7 +178,7 @@ const SettingsTab = () => {
         position: value
       })
     }), null);
-    web.insert(_el$25, web.createComponent(devtoolsUi.Select, {
+    web.insert(_el$23, web.createComponent(devtoolsUi.Select, {
       label: "Panel Position",
       get value() {
         return settings().panelLocation;
@@ -195,7 +195,7 @@ const SettingsTab = () => {
       })
     }), null);
     web.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().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;
+      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$0 = styles().sectionDescription, _v$1 = styles().settingsGroup, _v$10 = styles().settingsSection, _v$11 = styles().sectionTitle, _v$12 = styles().sectionIcon, _v$13 = styles().sectionDescription, _v$14 = styles().settingsGroup, _v$15 = styles().settingsModifiers, _v$16 = styles().settingsSection, _v$17 = styles().sectionTitle, _v$18 = styles().sectionIcon, _v$19 = styles().sectionDescription, _v$20 = styles().settingsGroup, _v$21 = styles().settingRow;
       _v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
       _v$3 !== _p$.a && web.className(_el$3, _p$.a = _v$3);
@@ -205,20 +205,20 @@ const SettingsTab = () => {
       _v$7 !== _p$.s && web.className(_el$7, _p$.s = _v$7);
       _v$8 !== _p$.h && web.className(_el$8, _p$.h = _v$8);
       _v$9 !== _p$.r && web.setAttribute(_el$9, "class", _p$.r = _v$9);
-      _v$10 !== _p$.d && web.className(_el$10, _p$.d = _v$10);
-      _v$11 !== _p$.l && web.className(_el$11, _p$.l = _v$11);
-      _v$12 !== _p$.u && web.className(_el$13, _p$.u = _v$12);
-      _v$13 !== _p$.c && web.className(_el$14, _p$.c = _v$13);
-      _v$14 !== _p$.w && web.setAttribute(_el$15, "class", _p$.w = _v$14);
-      _v$15 !== _p$.m && web.className(_el$16, _p$.m = _v$15);
-      _v$16 !== _p$.f && web.className(_el$17, _p$.f = _v$16);
-      _v$17 !== _p$.y && web.className(_el$18, _p$.y = _v$17);
-      _v$18 !== _p$.g && web.className(_el$20, _p$.g = _v$18);
-      _v$19 !== _p$.p && web.className(_el$21, _p$.p = _v$19);
-      _v$20 !== _p$.b && web.setAttribute(_el$22, "class", _p$.b = _v$20);
-      _v$21 !== _p$.T && web.className(_el$23, _p$.T = _v$21);
-      _v$22 !== _p$.A && web.className(_el$24, _p$.A = _v$22);
-      _v$23 !== _p$.O && web.className(_el$25, _p$.O = _v$23);
+      _v$0 !== _p$.d && web.className(_el$0, _p$.d = _v$0);
+      _v$1 !== _p$.l && web.className(_el$1, _p$.l = _v$1);
+      _v$10 !== _p$.u && web.className(_el$11, _p$.u = _v$10);
+      _v$11 !== _p$.c && web.className(_el$12, _p$.c = _v$11);
+      _v$12 !== _p$.w && web.setAttribute(_el$13, "class", _p$.w = _v$12);
+      _v$13 !== _p$.m && web.className(_el$14, _p$.m = _v$13);
+      _v$14 !== _p$.f && web.className(_el$15, _p$.f = _v$14);
+      _v$15 !== _p$.y && web.className(_el$16, _p$.y = _v$15);
+      _v$16 !== _p$.g && web.className(_el$18, _p$.g = _v$16);
+      _v$17 !== _p$.p && web.className(_el$19, _p$.p = _v$17);
+      _v$18 !== _p$.b && web.setAttribute(_el$20, "class", _p$.b = _v$18);
+      _v$19 !== _p$.T && web.className(_el$21, _p$.T = _v$19);
+      _v$20 !== _p$.A && web.className(_el$22, _p$.A = _v$20);
+      _v$21 !== _p$.O && web.className(_el$23, _p$.O = _v$21);
       return _p$;
     }, {
       e: void 0,

package/dist/cjs/tabs/settings-tab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"settings-tab.cjs","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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"}
+{"version":3,"file":"settings-tab.cjs","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$0","_el$1","_el$11","_el$12","_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$10","_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$0","_v$1","_v$10","_v$11","_v$12","_v$13","_v$14","_v$15","settingsModifiers","_v$16","_v$17","_v$18","_v$19","_v$20","_v$21","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/devtools.js

@@ -1,5 +1,5 @@
 import { template, use, setAttribute, insert, createComponent, memo } from "solid-js/web";
-import { createSignal, createEffect, Show } from "solid-js";
+import { createSignal, createEffect, onCleanup, Show } from "solid-js";
 import { createShortcut } from "@solid-primitives/keyboard";
 import { useDevtoolsSettings, useHeight, usePersistOpen } from "./context/use-devtools-context.js";
 import { useDisableTabbing } from "./hooks/use-disable-tabbing.js";
@@ -126,6 +126,27 @@ function DevTools() {
       });
     }
   });
+  createEffect(() => {
+    const openSourceHandler = (e) => {
+      const isShiftHeld = e.shiftKey;
+      const isCtrlHeld = e.ctrlKey || e.metaKey;
+      if (!isShiftHeld || !isCtrlHeld) return;
+      if (e.target instanceof HTMLElement) {
+        const dataSource = e.target.getAttribute("data-tsd-source");
+        window.getSelection()?.removeAllRanges();
+        if (dataSource) {
+          e.preventDefault();
+          e.stopPropagation();
+          fetch(`http://localhost:__TSD_PORT__/__tsd/open-source?source=${dataSource}`).catch(() => {
+          });
+        }
+      }
+    };
+    window.addEventListener("click", openSourceHandler);
+    onCleanup(() => {
+      window.removeEventListener("click", openSourceHandler);
+    });
+  });
   return (() => {
     var _el$ = _tmpl$();
     use(setRootEl, _el$);

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'\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":"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"}
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["import { Show, createEffect, createSignal, onCleanup } 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  createEffect(() => {\n    // this will only work with the Vite plugin\n    const openSourceHandler = (e: Event) => {\n      const isShiftHeld = (e as KeyboardEvent).shiftKey\n      const isCtrlHeld =\n        (e as KeyboardEvent).ctrlKey || (e as KeyboardEvent).metaKey\n      if (!isShiftHeld || !isCtrlHeld) return\n\n      if (e.target instanceof HTMLElement) {\n        const dataSource = e.target.getAttribute('data-tsd-source')\n        window.getSelection()?.removeAllRanges()\n        if (dataSource) {\n          e.preventDefault()\n          e.stopPropagation()\n          fetch(\n            `http://localhost:__TSD_PORT__/__tsd/open-source?source=${dataSource}`,\n          ).catch(() => {})\n        }\n      }\n    }\n    window.addEventListener('click', openSourceHandler)\n    onCleanup(() => {\n      window.removeEventListener('click', openSourceHandler)\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","openSourceHandler","isShiftHeld","shiftKey","isCtrlHeld","ctrlKey","metaKey","target","HTMLElement","dataSource","getAttribute","getSelection","removeAllRanges","preventDefault","stopPropagation","fetch","catch","onCleanup","_el$","_tmpl$","_$use","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","_$createComponent","Show","when","_$memo","requireUrlFlag","location","search","urlFlag","children","Trigger","MainPanel","ContentPanel","ref","Tabs","TabContent"],"mappings":"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"}

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

@@ -26,7 +26,7 @@ const SettingsTab = () => {
     });
   };
   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$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;
+    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$0 = _el$8.nextSibling, _el$1 = _el$0.nextSibling, _el$11 = _el$7.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling, _el$15 = _el$14.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$11.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;
     insert(_el$6, createComponent(Checkbox, {
       label: "Default open",
       description: "Automatically open the devtools panel when the page loads",
@@ -47,7 +47,7 @@ const SettingsTab = () => {
         return settings().hideUntilHover;
       }
     }), null);
-    insert(_el$11, createComponent(Checkbox, {
+    insert(_el$1, createComponent(Checkbox, {
       label: "Require URL Flag",
       description: "Only show devtools when a specific URL parameter is present",
       get checked() {
@@ -57,13 +57,13 @@ const SettingsTab = () => {
         requireUrlFlag: checked
       })
     }), null);
-    insert(_el$11, createComponent(Show, {
+    insert(_el$1, createComponent(Show, {
       get when() {
         return settings().requireUrlFlag;
       },
       get children() {
-        var _el$12 = _tmpl$();
-        insert(_el$12, createComponent(Input, {
+        var _el$10 = _tmpl$();
+        insert(_el$10, createComponent(Input, {
           label: "URL flag",
           description: "Enter the URL parameter name (e.g., 'debug' for ?debug=true)",
           placeholder: "debug",
@@ -74,11 +74,11 @@ const SettingsTab = () => {
             urlFlag: e
           })
         }));
-        effect(() => className(_el$12, styles().conditionalSetting));
-        return _el$12;
+        effect(() => className(_el$10, styles().conditionalSetting));
+        return _el$10;
       }
     }), null);
-    insert(_el$18, createComponent(Show, {
+    insert(_el$16, createComponent(Show, {
       keyed: true,
       get when() {
         return hotkey();
@@ -123,7 +123,7 @@ const SettingsTab = () => {
         })];
       }
     }));
-    insert(_el$17, createComponent(Input, {
+    insert(_el$15, 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",
@@ -146,9 +146,9 @@ const SettingsTab = () => {
           openHotkey: [...hotkey().filter((key) => ["Shift", "Meta", "Alt", "Ctrl"].includes(key)), ...modifiers2]
         });
       }
-    }), _el$19);
-    insert(_el$17, () => hotkey().join(" + "), null);
-    insert(_el$25, createComponent(Select, {
+    }), _el$17);
+    insert(_el$15, () => hotkey().join(" + "), null);
+    insert(_el$23, createComponent(Select, {
       label: "Trigger Position",
       options: [{
         label: "Bottom Right",
@@ -176,7 +176,7 @@ const SettingsTab = () => {
         position: value
       })
     }), null);
-    insert(_el$25, createComponent(Select, {
+    insert(_el$23, createComponent(Select, {
       label: "Panel Position",
       get value() {
         return settings().panelLocation;
@@ -193,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().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;
+      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$0 = styles().sectionDescription, _v$1 = styles().settingsGroup, _v$10 = styles().settingsSection, _v$11 = styles().sectionTitle, _v$12 = styles().sectionIcon, _v$13 = styles().sectionDescription, _v$14 = styles().settingsGroup, _v$15 = styles().settingsModifiers, _v$16 = styles().settingsSection, _v$17 = styles().sectionTitle, _v$18 = styles().sectionIcon, _v$19 = styles().sectionDescription, _v$20 = styles().settingsGroup, _v$21 = 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);
@@ -203,20 +203,20 @@ const SettingsTab = () => {
       _v$7 !== _p$.s && className(_el$7, _p$.s = _v$7);
       _v$8 !== _p$.h && className(_el$8, _p$.h = _v$8);
       _v$9 !== _p$.r && setAttribute(_el$9, "class", _p$.r = _v$9);
-      _v$10 !== _p$.d && className(_el$10, _p$.d = _v$10);
-      _v$11 !== _p$.l && className(_el$11, _p$.l = _v$11);
-      _v$12 !== _p$.u && className(_el$13, _p$.u = _v$12);
-      _v$13 !== _p$.c && className(_el$14, _p$.c = _v$13);
-      _v$14 !== _p$.w && setAttribute(_el$15, "class", _p$.w = _v$14);
-      _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$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);
+      _v$0 !== _p$.d && className(_el$0, _p$.d = _v$0);
+      _v$1 !== _p$.l && className(_el$1, _p$.l = _v$1);
+      _v$10 !== _p$.u && className(_el$11, _p$.u = _v$10);
+      _v$11 !== _p$.c && className(_el$12, _p$.c = _v$11);
+      _v$12 !== _p$.w && setAttribute(_el$13, "class", _p$.w = _v$12);
+      _v$13 !== _p$.m && className(_el$14, _p$.m = _v$13);
+      _v$14 !== _p$.f && className(_el$15, _p$.f = _v$14);
+      _v$15 !== _p$.y && className(_el$16, _p$.y = _v$15);
+      _v$16 !== _p$.g && className(_el$18, _p$.g = _v$16);
+      _v$17 !== _p$.p && className(_el$19, _p$.p = _v$17);
+      _v$18 !== _p$.b && setAttribute(_el$20, "class", _p$.b = _v$18);
+      _v$19 !== _p$.T && className(_el$21, _p$.T = _v$19);
+      _v$20 !== _p$.A && className(_el$22, _p$.A = _v$20);
+      _v$21 !== _p$.O && className(_el$23, _p$.O = _v$21);
       return _p$;
     }, {
       e: void 0,

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, 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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"}
+{"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$0","_el$1","_el$11","_el$12","_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$10","_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$0","_v$1","_v$10","_v$11","_v$12","_v$13","_v$14","_v$15","settingsModifiers","_v$16","_v$17","_v$18","_v$19","_v$20","_v$21","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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -47,8 +47,8 @@
     "clsx": "^2.1.1",
     "goober": "^2.1.16",
     "solid-js": "^1.9.7",
-    "@tanstack/devtools-event-bus": "0.2.2",
-    "@tanstack/devtools-ui": "0.3.1"
+    "@tanstack/devtools-ui": "0.3.1",
+    "@tanstack/devtools-event-bus": "0.2.2"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"

package/src/devtools.tsx

@@ -1,4 +1,4 @@
-import { Show, createEffect, createSignal } from 'solid-js'
+import { Show, createEffect, createSignal, onCleanup } from 'solid-js'
 import { createShortcut } from '@solid-primitives/keyboard'
 import {
   useDevtoolsSettings,
@@ -151,6 +151,32 @@ export default function DevTools() {
     }
   })
 
+  createEffect(() => {
+    // this will only work with the Vite plugin
+    const openSourceHandler = (e: Event) => {
+      const isShiftHeld = (e as KeyboardEvent).shiftKey
+      const isCtrlHeld =
+        (e as KeyboardEvent).ctrlKey || (e as KeyboardEvent).metaKey
+      if (!isShiftHeld || !isCtrlHeld) return
+
+      if (e.target instanceof HTMLElement) {
+        const dataSource = e.target.getAttribute('data-tsd-source')
+        window.getSelection()?.removeAllRanges()
+        if (dataSource) {
+          e.preventDefault()
+          e.stopPropagation()
+          fetch(
+            `http://localhost:__TSD_PORT__/__tsd/open-source?source=${dataSource}`,
+          ).catch(() => {})
+        }
+      }
+    }
+    window.addEventListener('click', openSourceHandler)
+    onCleanup(() => {
+      window.removeEventListener('click', openSourceHandler)
+    })
+  })
+
   return (
     <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>
       <Show