@tanstack/devtools 0.0.0 → 0.1.1

package/dist/cjs/components/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.cjs","sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { For } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { tabs } from '../tabs'\n\ninterface TabsProps {\n  toggleOpen: () => void\n}\n\nexport const Tabs = (props: TabsProps) => {\n  const styles = useStyles()\n  const { state, setState } = useDevtoolsState()\n\n  return (\n    <div class={styles().tabContainer}>\n      <For each={tabs}>\n        {(tab) => (\n          <button\n            type=\"button\"\n            onClick={() => setState({ activeTab: tab.id })}\n            class={clsx(styles().tab, { active: state().activeTab === tab.id })}\n          >\n            {tab.icon}\n          </button>\n        )}\n      </For>\n      <button\n        type=\"button\"\n        class={clsx(styles().tab, 'close')}\n        onClick={() => props.toggleOpen()}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\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=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </button>\n    </div>\n  )\n}\n"],"names":["Tabs","props","styles","useStyles","state","setState","useDevtoolsState","_el$","_tmpl$","_el$2","firstChild","_$createComponent","For","each","tabs","children","tab","_el$3","_tmpl$2","$$click","activeTab","id","icon","_$effect","_$className","clsx","active","toggleOpen","_p$","_v$","tabContainer","_v$2","e","t","undefined","_$delegateEvents"],"mappings":";;;;;;;;;AAUaA,MAAAA,OAAOA,CAACC,UAAqB;AACxC,QAAMC,SAASC,UAAAA,UAAU;AACnB,QAAA;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,MAAaC,oCAAiB;AAE7C,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG;AAAAH,eAAAA,MAAAI,oBAEKC,aAAG;AAAA,MAACC,MAAMC,MAAAA;AAAAA,MAAIC,UACXC,UAAG,MAAA;AAAA,YAAAC,QAAAC,QAAA;AAAAC,cAAAA,UAGQ,MAAMd,SAAS;AAAA,UAAEe,WAAWJ,IAAIK;AAAAA,QAAAA,CAAI;AAACJ,YAAAA,OAAAA,OAG7CD,MAAAA,IAAIM,IAAI;AAAAC,YAAAA,OAAAC,MAAAA,IAAAA,UAAAP,OAFFQ,KAAKvB,SAASc,KAAK;AAAA,UAAEU,QAAQtB,MAAAA,EAAQgB,cAAcJ,IAAIK;AAAAA,QAAI,CAAA,CAAC,CAAA;AAAAJ,eAAAA;AAAAA,MAAA,GAAA;AAAA,IAItE,CAAA,GAAAR,KAAA;AAAAU,UAAAA,UAKQ,MAAMlB,MAAM0B,WAAW;AAACJ,QAAAA,OAAAK,CAAA,QAAA;AAAAC,UAAAA,MAfzB3B,OAAS4B,EAAAA,cAAYC,OActBN,KAAKvB,OAAAA,EAASc,KAAK,OAAO;AAACa,cAAAD,IAAAI,KAAAR,IAAAA,UAAAjB,MAAAqB,IAAAI,IAAAH,GAAA;AAAAE,eAAAH,IAAAK,KAAAT,IAAAA,UAAAf,OAAAmB,IAAAK,IAAAF,IAAA;AAAAH,aAAAA;AAAAA,IAAAA,GAAA;AAAA,MAAAI,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA3B,WAAAA;AAAAA,EAAAA,GAAA;AAoB1C;AAAC4B,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}
+{"version":3,"file":"tabs.cjs","sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { For } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { tabs } from '../tabs'\n\ninterface TabsProps {\n  toggleOpen: () => void\n}\n\nexport const Tabs = (props: TabsProps) => {\n  const styles = useStyles()\n  const { state, setState } = useDevtoolsState()\n\n  return (\n    <div class={styles().tabContainer}>\n      <For each={tabs}>\n        {(tab) => (\n          <button\n            type=\"button\"\n            onClick={() => setState({ activeTab: tab.id })}\n            class={clsx(styles().tab, { active: state().activeTab === tab.id })}\n          >\n            {tab.icon}\n          </button>\n        )}\n      </For>\n      <button\n        type=\"button\"\n        class={clsx(styles().tab, 'close')}\n        onClick={() => props.toggleOpen()}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\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=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </button>\n    </div>\n  )\n}\n"],"names":["Tabs","props","styles","useStyles","state","setState","useDevtoolsState","_el$","_tmpl$","_el$2","firstChild","_$insert","_$createComponent","For","each","tabs","children","tab","_el$3","_tmpl$2","$$click","activeTab","id","icon","_$effect","_$className","clsx","active","toggleOpen","_p$","_v$","tabContainer","_v$2","e","t","undefined","_$delegateEvents"],"mappings":";;;;;;;;;AAUO,MAAMA,OAAOA,CAACC,UAAqB;AACxC,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,EAAAA,IAAaC,oCAAAA;AAE5B,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG;AAAAC,eAAAJ,MAAAK,IAAAA,gBAEKC,aAAG;AAAA,MAACC,MAAMC,MAAAA;AAAAA,MAAIC,UACXC,UAAG,MAAA;AAAA,YAAAC,QAAAC,QAAAA;AAAAD,cAAAE,UAGQ,MAAMf,SAAS;AAAA,UAAEgB,WAAWJ,IAAIK;AAAAA,QAAAA,CAAI;AAACX,YAAAA,OAAAO,OAAA,MAG7CD,IAAIM,IAAI;AAAAC,YAAAA,OAAA,MAAAC,IAAAA,UAAAP,OAFFQ,KAAKxB,OAAAA,EAASe,KAAK;AAAA,UAAEU,QAAQvB,MAAAA,EAAQiB,cAAcJ,IAAIK;AAAAA,QAAAA,CAAI,CAAC,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IAAA,CAItE,GAAAT,KAAA;AAAAA,UAAAW,UAKQ,MAAMnB,MAAM2B,WAAAA;AAAYJ,QAAAA,OAAAK,CAAAA,QAAA;AAAA,UAAAC,MAfzB5B,SAAS6B,cAAYC,OActBN,KAAKxB,OAAAA,EAASe,KAAK,OAAO;AAACa,cAAAD,IAAAI,KAAAR,IAAAA,UAAAlB,MAAAsB,IAAAI,IAAAH,GAAA;AAAAE,eAAAH,IAAAK,KAAAT,IAAAA,UAAAhB,OAAAoB,IAAAK,IAAAF,IAAA;AAAA,aAAAH;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAE;AAAAA,MAAAD,GAAAC;AAAAA,IAAAA,CAAA;AAAA,WAAA5B;AAAAA,EAAA,GAAA;AAoB1C;AAAC6B,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

package/dist/cjs/components/trigger.cjs

@@ -16,7 +16,7 @@ const Trigger = ({
   } = useDevtoolsContext.useDevtoolsSettings();
   const styles = useStyles.useStyles();
   const buttonStyle = solidJs.createMemo(() => {
-    return clsx(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen()));
+    return clsx(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover));
   });
   return (() => {
     var _el$ = _tmpl$();

package/dist/cjs/components/trigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"trigger.cjs","sources":["../../../src/components/trigger.tsx"],"sourcesContent":["import { createMemo } from 'solid-js'\nimport clsx from 'clsx'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TanStackLogo } from './logo'\nimport type { Accessor } from 'solid-js'\n\nexport const Trigger = ({\n  isOpen,\n  setIsOpen,\n}: {\n  isOpen: Accessor<boolean>\n  setIsOpen: (isOpen: boolean) => void\n}) => {\n  const { settings } = useDevtoolsSettings()\n  const styles = useStyles()\n  const buttonStyle = createMemo(() => {\n    return clsx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(settings().position),\n      styles().mainCloseBtnAnimation(isOpen()),\n    )\n  })\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Open TanStack Devtools\"\n      class={buttonStyle()}\n      onClick={() => setIsOpen(!isOpen())}\n    >\n      <TanStackLogo />\n    </button>\n  )\n}\n"],"names":["Trigger","isOpen","setIsOpen","settings","useDevtoolsSettings","styles","useStyles","buttonStyle","createMemo","clsx","mainCloseBtn","mainCloseBtnPosition","position","mainCloseBtnAnimation","_el$","_tmpl$","$$click","_$insert","_$createComponent","TanStackLogo","_$effect","_$className","_$delegateEvents"],"mappings":";;;;;;;;;AAOO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAIF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAaC,uCAAoB;AACzC,QAAMC,SAASC,UAAAA,UAAU;AACnBC,QAAAA,cAAcC,QAAAA,WAAW,MAAM;AACnC,WAAOC,KACLJ,OAAO,EAAEK,cACTL,SAASM,qBAAqBR,SAAAA,EAAWS,QAAQ,GACjDP,OAAO,EAAEQ,sBAAsBZ,OAAQ,CAAA,CACzC;AAAA,EAAA,CACD;AACD,UAAA,MAAA;AAAA,QAAAa,OAAAC,OAAA;AAAAD,SAAAE,UAKa,MAAMd,UAAU,CAACD,QAAQ;AAACgB,QAAAA,OAAAH,MAAAI,IAAAA,gBAElCC,KAAY,cAAA,CAAA,CAAA,CAAA;AAAAC,QAAAA,aAAAC,IAAAA,UAAAP,MAHNP,YAAa,CAAA,CAAA;AAAAO,WAAAA;AAAAA,EAAAA,GAAA;AAM1B;AAACQ,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}
+{"version":3,"file":"trigger.cjs","sources":["../../../src/components/trigger.tsx"],"sourcesContent":["import { createMemo } from 'solid-js'\nimport clsx from 'clsx'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TanStackLogo } from './logo'\nimport type { Accessor } from 'solid-js'\n\nexport const Trigger = ({\n  isOpen,\n  setIsOpen,\n}: {\n  isOpen: Accessor<boolean>\n  setIsOpen: (isOpen: boolean) => void\n}) => {\n  const { settings } = useDevtoolsSettings()\n  const styles = useStyles()\n  const buttonStyle = createMemo(() => {\n    return clsx(\n      styles().mainCloseBtn,\n      styles().mainCloseBtnPosition(settings().position),\n      styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover),\n    )\n  })\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Open TanStack Devtools\"\n      class={buttonStyle()}\n      onClick={() => setIsOpen(!isOpen())}\n    >\n      <TanStackLogo />\n    </button>\n  )\n}\n"],"names":["Trigger","isOpen","setIsOpen","settings","useDevtoolsSettings","styles","useStyles","buttonStyle","createMemo","clsx","mainCloseBtn","mainCloseBtnPosition","position","mainCloseBtnAnimation","hideUntilHover","_el$","_tmpl$","$$click","_$insert","_$createComponent","TanStackLogo","_$effect","_$className","_$delegateEvents"],"mappings":";;;;;;;;;AAOO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAIF,MAAM;AACJ,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,uCAAAA;AACrB,QAAMC,SAASC,UAAAA,UAAAA;AACf,QAAMC,cAAcC,QAAAA,WAAW,MAAM;AACnC,WAAOC,KACLJ,SAASK,cACTL,OAAAA,EAASM,qBAAqBR,SAAAA,EAAWS,QAAQ,GACjDP,OAAAA,EAASQ,sBAAsBZ,OAAAA,GAAUE,SAAAA,EAAWW,cAAc,CACpE;AAAA,EACF,CAAC;AACD,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAD,SAAAE,UAKa,MAAMf,UAAU,CAACD,QAAQ;AAACiB,QAAAA,OAAAH,MAAAI,IAAAA,gBAElCC,KAAAA,cAAY,CAAA,CAAA,CAAA;AAAAC,QAAAA,aAAAC,IAAAA,UAAAP,MAHNR,YAAAA,CAAa,CAAA;AAAA,WAAAQ;AAAAA,EAAA,GAAA;AAM1B;AAACQ,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}

package/dist/cjs/constants.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const PLUGIN_CONTAINER_ID = "plugin-container";
+const PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";
+exports.PLUGIN_CONTAINER_ID = PLUGIN_CONTAINER_ID;
+exports.PLUGIN_TITLE_CONTAINER_ID = PLUGIN_TITLE_CONTAINER_ID;
+//# sourceMappingURL=constants.cjs.map

package/dist/cjs/constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.cjs","sources":["../../src/constants.ts"],"sourcesContent":["export const PLUGIN_CONTAINER_ID = 'plugin-container'\nexport const PLUGIN_TITLE_CONTAINER_ID = 'plugin-title-container'\n"],"names":[],"mappings":";;AAAO,MAAM,sBAAsB;AAC5B,MAAM,4BAA4B;;;"}

package/dist/cjs/constants.d.cts

@@ -0,0 +1,2 @@
+export declare const PLUGIN_CONTAINER_ID = "plugin-container";
+export declare const PLUGIN_TITLE_CONTAINER_ID = "plugin-title-container";

package/dist/cjs/context/devtools-context.cjs

@@ -14,12 +14,27 @@ const getSettings = () => {
     ...settings
   };
 };
+const generatePluginId = (plugin, index) => {
+  if (plugin.id) {
+    return plugin.id;
+  }
+  if (typeof plugin.name === "string") {
+    return plugin.name.toLowerCase().replace(" ", "-");
+  }
+  return index.toString();
+};
 const getExistingStateFromStorage = (config, plugins) => {
   const existingState = storage.getStorageItem(storage.TANSTACK_DEVTOOLS_STATE);
   const settings = getSettings();
   const state = {
     ...devtoolsStore.initialState,
-    plugins: plugins || [],
+    plugins: plugins?.map((plugin, i) => {
+      const id = generatePluginId(plugin, i);
+      return {
+        ...plugin,
+        id
+      };
+    }) || [],
     state: {
       ...devtoolsStore.initialState.state,
       ...existingState ? JSON.parse(existingState) : {}

package/dist/cjs/context/devtools-context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"devtools-context.cjs","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n  TANSTACK_DEVTOOLS_SETTINGS,\n  TANSTACK_DEVTOOLS_STATE,\n  getStorageItem,\n  setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { Setter } from 'solid-js'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport interface DevtoolsPlugin {\n  name: string | ((el: HTMLHeadingElement) => void)\n  id: string\n  render: (el: HTMLDivElement) => void\n}\n\nexport const DevtoolsContext = createContext<{\n  store: DevtoolsStore\n  setStore: Setter<DevtoolsStore>\n}>()\n\ninterface ContextProps {\n  children: JSX.Element\n  plugins?: Array<DevtoolsPlugin>\n  config?: DevtoolsSettings\n}\n\nconst getSettings = () => {\n  const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)\n  const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)\n  return {\n    ...settings,\n  }\n}\n\nconst getExistingStateFromStorage = (\n  config?: DevtoolsSettings,\n  plugins?: Array<DevtoolsPlugin>,\n) => {\n  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)\n  const settings = getSettings()\n\n  const state: DevtoolsStore = {\n    ...initialState,\n    plugins: plugins || [],\n    state: {\n      ...initialState.state,\n      ...(existingState ? JSON.parse(existingState) : {}),\n    },\n    settings: {\n      ...initialState.settings,\n      ...config,\n      ...settings,\n    },\n  }\n  return state\n}\n\nexport type DevtoolsSettings = DevtoolsStore['settings']\n\nexport const DevtoolsProvider = (props: ContextProps) => {\n  const [store, setStore] = createStore(\n    getExistingStateFromStorage(props.config, props.plugins),\n  )\n\n  const value = {\n    store,\n    setStore: (\n      updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,\n    ) => {\n      const newState = updater(store)\n      const { settings, state: internalState } = newState\n      // Store user settings for dev tools into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))\n      // Store general state into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))\n      setStore((prev) => ({\n        ...prev,\n        ...newState,\n      }))\n    },\n  }\n\n  return (\n    <DevtoolsContext.Provider value={value}>\n      {props.children}\n    </DevtoolsContext.Provider>\n  )\n}\n"],"names":["DevtoolsContext","createContext","getSettings","settingsString","getStorageItem","TANSTACK_DEVTOOLS_SETTINGS","settings","tryParseJson","getExistingStateFromStorage","config","plugins","existingState","TANSTACK_DEVTOOLS_STATE","state","initialState","JSON","parse","DevtoolsProvider","props","store","setStore","createStore","value","updater","newState","internalState","setStorageItem","stringify","prev","_$createComponent","Provider","children"],"mappings":";;;;;;;;AAoBO,MAAMA,kBAAkBC,QAG5B,cAAA;AAQH,MAAMC,cAAcA,MAAM;AAClBC,QAAAA,iBAAiBC,uBAAeC,kCAA0B;AAC1DC,QAAAA,WAAWC,sBAAwCJ,cAAc;AAChE,SAAA;AAAA,IACL,GAAGG;AAAAA,EACL;AACF;AAEA,MAAME,8BAA8BA,CAClCC,QACAC,YACG;AACGC,QAAAA,gBAAgBP,uBAAeQ,+BAAuB;AAC5D,QAAMN,WAAWJ,YAAY;AAE7B,QAAMW,QAAuB;AAAA,IAC3B,GAAGC,cAAAA;AAAAA,IACHJ,SAASA,WAAW,CAAE;AAAA,IACtBG,OAAO;AAAA,MACL,GAAGC,cAAaD,aAAAA;AAAAA,MAChB,GAAIF,gBAAgBI,KAAKC,MAAML,aAAa,IAAI,CAAA;AAAA,IAClD;AAAA,IACAL,UAAU;AAAA,MACR,GAAGQ,cAAaR,aAAAA;AAAAA,MAChB,GAAGG;AAAAA,MACH,GAAGH;AAAAA,IAAAA;AAAAA,EAEP;AACOO,SAAAA;AACT;AAIaI,MAAAA,mBAAmBA,CAACC,UAAwB;AACjD,QAAA,CAACC,SAAOC,QAAQ,IAAIC,MAAAA,YACxBb,4BAA4BU,MAAMT,QAAQS,MAAMR,OAAO,CACzD;AAEA,QAAMY,QAAQ;AAAA,IAAA,OACZH;AAAAA,IACAC,UAAUA,CACRG,YACG;AACGC,YAAAA,WAAWD,QAAQJ,OAAK;AACxB,YAAA;AAAA,QAAEb;AAAAA,QAAUO,OAAOY;AAAAA,MAAAA,IAAkBD;AAE3CE,cAAAA,eAAerB,QAAAA,4BAA4BU,KAAKY,UAAUrB,QAAQ,CAAC;AAEnEoB,cAAAA,eAAed,QAAAA,yBAAyBG,KAAKY,UAAUF,aAAa,CAAC;AACrEL,eAAUQ,CAAU,UAAA;AAAA,QAClB,GAAGA;AAAAA,QACH,GAAGJ;AAAAA,MAAAA,EACH;AAAA,IAAA;AAAA,EAEN;AAEAK,SAAAA,IAAAA,gBACG7B,gBAAgB8B,UAAQ;AAAA,IAACR;AAAAA,IAAY,IAAAS,WAAA;AAAA,aACnCb,MAAMa;AAAAA,IAAAA;AAAAA,EAAQ,CAAA;AAGrB;;;"}
+{"version":3,"file":"devtools-context.cjs","sources":["../../../src/context/devtools-context.tsx"],"sourcesContent":["import { createContext } from 'solid-js'\nimport { createStore } from 'solid-js/store'\nimport { tryParseJson } from '../utils/sanitize'\nimport {\n  TANSTACK_DEVTOOLS_SETTINGS,\n  TANSTACK_DEVTOOLS_STATE,\n  getStorageItem,\n  setStorageItem,\n} from '../utils/storage'\nimport { initialState } from './devtools-store'\nimport type { DevtoolsStore } from './devtools-store'\nimport type { JSX, Setter } from 'solid-js'\n\nexport interface TanStackDevtoolsPlugin {\n  /**\n   * Name to be displayed in the devtools UI.\n   * If a string, it will be used as the plugin name.\n   * If a function, it will be called with the mount element.\n   *\n   * Example:\n   * ```ts\n   *   {\n   *     // If a string, it will be used as the plugin name\n   *     name: \"Your Plugin\",\n   *     render: () => {}\n   *   }\n   * ```\n   * or\n   *\n   * ```ts\n   *   {\n   *     // If a function, it will be called with the mount element\n   *     name: (el) => {\n   *       el.innerText = \"Your Plugin Name\"\n   *       // Your name logic here\n   *     },\n   *     render: () => {}\n   *   }\n   * ```\n   */\n  name: string | ((el: HTMLHeadingElement) => void)\n  /**\n   * Unique identifier for the plugin.\n   * If not provided, it will be generated based on the name.\n   */\n  id?: string\n  /**\n   * Render the plugin UI by using the provided element. This function will be called\n   * when the plugin tab is clicked and expected to be mounted.\n   * @param el The mount element for the plugin.\n   * @returns void\n   *\n   * Example:\n   * ```ts\n   *   render: (el) => {\n   *     el.innerHTML = \"<h1>Your Plugin</h1>\"\n   *   }\n   * ```\n   */\n  render: (el: HTMLDivElement) => void\n}\nexport const DevtoolsContext = createContext<{\n  store: DevtoolsStore\n  setStore: Setter<DevtoolsStore>\n}>()\n\ninterface ContextProps {\n  children: JSX.Element\n  plugins?: Array<TanStackDevtoolsPlugin>\n  config?: TanStackDevtoolsConfig\n}\n\nconst getSettings = () => {\n  const settingsString = getStorageItem(TANSTACK_DEVTOOLS_SETTINGS)\n  const settings = tryParseJson<DevtoolsStore['settings']>(settingsString)\n  return {\n    ...settings,\n  }\n}\n\nconst generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {\n  // if set by user, return the plugin id\n  if (plugin.id) {\n    return plugin.id\n  }\n  if (typeof plugin.name === 'string') {\n    // if name is a string, use it to generate an id\n    return plugin.name.toLowerCase().replace(' ', '-')\n  }\n  // Name is JSX? return the index as a string\n  return index.toString()\n}\n\nconst getExistingStateFromStorage = (\n  config?: TanStackDevtoolsConfig,\n  plugins?: Array<TanStackDevtoolsPlugin>,\n) => {\n  const existingState = getStorageItem(TANSTACK_DEVTOOLS_STATE)\n  const settings = getSettings()\n\n  const state: DevtoolsStore = {\n    ...initialState,\n    plugins:\n      plugins?.map((plugin, i) => {\n        const id = generatePluginId(plugin, i)\n        return {\n          ...plugin,\n          id,\n        }\n      }) || [],\n    state: {\n      ...initialState.state,\n      ...(existingState ? JSON.parse(existingState) : {}),\n    },\n    settings: {\n      ...initialState.settings,\n      ...config,\n      ...settings,\n    },\n  }\n  return state\n}\n\nexport type TanStackDevtoolsConfig = DevtoolsStore['settings']\n\nexport const DevtoolsProvider = (props: ContextProps) => {\n  const [store, setStore] = createStore(\n    getExistingStateFromStorage(props.config, props.plugins),\n  )\n\n  const value = {\n    store,\n    setStore: (\n      updater: (prev: DevtoolsStore) => DevtoolsStore | Partial<DevtoolsStore>,\n    ) => {\n      const newState = updater(store)\n      const { settings, state: internalState } = newState\n      // Store user settings for dev tools into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_SETTINGS, JSON.stringify(settings))\n      // Store general state into local storage\n      setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(internalState))\n      setStore((prev) => ({\n        ...prev,\n        ...newState,\n      }))\n    },\n  }\n\n  return (\n    <DevtoolsContext.Provider value={value}>\n      {props.children}\n    </DevtoolsContext.Provider>\n  )\n}\n"],"names":["DevtoolsContext","createContext","getSettings","settingsString","getStorageItem","TANSTACK_DEVTOOLS_SETTINGS","settings","tryParseJson","generatePluginId","plugin","index","id","name","toLowerCase","replace","toString","getExistingStateFromStorage","config","plugins","existingState","TANSTACK_DEVTOOLS_STATE","state","initialState","map","i","JSON","parse","DevtoolsProvider","props","store","setStore","createStore","value","updater","newState","internalState","setStorageItem","stringify","prev","_$createComponent","Provider","children"],"mappings":";;;;;;;;AA6DO,MAAMA,kBAAkBC,QAAAA,cAAAA;AAW/B,MAAMC,cAAcA,MAAM;AACxB,QAAMC,iBAAiBC,QAAAA,eAAeC,kCAA0B;AAChE,QAAMC,WAAWC,SAAAA,aAAwCJ,cAAc;AACvE,SAAO;AAAA,IACL,GAAGG;AAAAA,EAAAA;AAEP;AAEA,MAAME,mBAAmBA,CAACC,QAAgCC,UAAkB;AAE1E,MAAID,OAAOE,IAAI;AACb,WAAOF,OAAOE;AAAAA,EAChB;AACA,MAAI,OAAOF,OAAOG,SAAS,UAAU;AAEnC,WAAOH,OAAOG,KAAKC,YAAAA,EAAcC,QAAQ,KAAK,GAAG;AAAA,EACnD;AAEA,SAAOJ,MAAMK,SAAAA;AACf;AAEA,MAAMC,8BAA8BA,CAClCC,QACAC,YACG;AACH,QAAMC,gBAAgBf,QAAAA,eAAegB,+BAAuB;AAC5D,QAAMd,WAAWJ,YAAAA;AAEjB,QAAMmB,QAAuB;AAAA,IAC3B,GAAGC,cAAAA;AAAAA,IACHJ,SACEA,SAASK,IAAI,CAACd,QAAQe,MAAM;AAC1B,YAAMb,KAAKH,iBAAiBC,QAAQe,CAAC;AACrC,aAAO;AAAA,QACL,GAAGf;AAAAA,QACHE;AAAAA,MAAAA;AAAAA,IAEJ,CAAC,KAAK,CAAA;AAAA,IACRU,OAAO;AAAA,MACL,GAAGC,cAAAA,aAAaD;AAAAA,MAChB,GAAIF,gBAAgBM,KAAKC,MAAMP,aAAa,IAAI,CAAA;AAAA,IAAC;AAAA,IAEnDb,UAAU;AAAA,MACR,GAAGgB,cAAAA,aAAahB;AAAAA,MAChB,GAAGW;AAAAA,MACH,GAAGX;AAAAA,IAAAA;AAAAA,EACL;AAEF,SAAOe;AACT;AAIO,MAAMM,mBAAmBA,CAACC,UAAwB;AACvD,QAAM,CAACC,SAAOC,QAAQ,IAAIC,MAAAA,YACxBf,4BAA4BY,MAAMX,QAAQW,MAAMV,OAAO,CACzD;AAEA,QAAMc,QAAQ;AAAA,IAAA,OACZH;AAAAA,IACAC,UAAUA,CACRG,YACG;AACH,YAAMC,WAAWD,QAAQJ,OAAK;AAC9B,YAAM;AAAA,QAAEvB;AAAAA,QAAUe,OAAOc;AAAAA,MAAAA,IAAkBD;AAE3CE,cAAAA,eAAe/B,QAAAA,4BAA4BoB,KAAKY,UAAU/B,QAAQ,CAAC;AAEnE8B,cAAAA,eAAehB,QAAAA,yBAAyBK,KAAKY,UAAUF,aAAa,CAAC;AACrEL,eAAUQ,CAAAA,UAAU;AAAA,QAClB,GAAGA;AAAAA,QACH,GAAGJ;AAAAA,MAAAA,EACH;AAAA,IACJ;AAAA,EAAA;AAGF,SAAAK,IAAAA,gBACGvC,gBAAgBwC,UAAQ;AAAA,IAACR;AAAAA,IAAY,IAAAS,WAAA;AAAA,aACnCb,MAAMa;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB;;;"}

package/dist/cjs/context/devtools-context.d.cts

@@ -1,9 +1,51 @@
 import { DevtoolsStore } from './devtools-store.cjs';
-import { Setter } from 'solid-js';
-import { JSX } from 'solid-js/jsx-runtime';
-export interface DevtoolsPlugin {
+import { JSX, Setter } from 'solid-js';
+export interface TanStackDevtoolsPlugin {
+    /**
+     * Name to be displayed in the devtools UI.
+     * If a string, it will be used as the plugin name.
+     * If a function, it will be called with the mount element.
+     *
+     * Example:
+     * ```ts
+     *   {
+     *     // If a string, it will be used as the plugin name
+     *     name: "Your Plugin",
+     *     render: () => {}
+     *   }
+     * ```
+     * or
+     *
+     * ```ts
+     *   {
+     *     // If a function, it will be called with the mount element
+     *     name: (el) => {
+     *       el.innerText = "Your Plugin Name"
+     *       // Your name logic here
+     *     },
+     *     render: () => {}
+     *   }
+     * ```
+     */
     name: string | ((el: HTMLHeadingElement) => void);
-    id: string;
+    /**
+     * Unique identifier for the plugin.
+     * If not provided, it will be generated based on the name.
+     */
+    id?: string;
+    /**
+     * Render the plugin UI by using the provided element. This function will be called
+     * when the plugin tab is clicked and expected to be mounted.
+     * @param el The mount element for the plugin.
+     * @returns void
+     *
+     * Example:
+     * ```ts
+     *   render: (el) => {
+     *     el.innerHTML = "<h1>Your Plugin</h1>"
+     *   }
+     * ```
+     */
     render: (el: HTMLDivElement) => void;
 }
 export declare const DevtoolsContext: import('solid-js').Context<{
@@ -12,9 +54,9 @@ export declare const DevtoolsContext: import('solid-js').Context<{
 } | undefined>;
 interface ContextProps {
     children: JSX.Element;
-    plugins?: Array<DevtoolsPlugin>;
-    config?: DevtoolsSettings;
+    plugins?: Array<TanStackDevtoolsPlugin>;
+    config?: TanStackDevtoolsConfig;
 }
-export type DevtoolsSettings = DevtoolsStore['settings'];
+export type TanStackDevtoolsConfig = DevtoolsStore['settings'];
 export declare const DevtoolsProvider: (props: ContextProps) => JSX.Element;
 export {};

package/dist/cjs/context/devtools-store.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"devtools-store.cjs","sources":["../../../src/context/devtools-store.ts"],"sourcesContent":["import type { TabName } from '../tabs'\nimport type { DevtoolsPlugin } from './devtools-context'\n\ntype ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'\ntype KeyboardKey = ModifierKey | (string & {})\n\ntype TriggerPosition =\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'middle-left'\n  | 'middle-right'\n\nexport type DevtoolsStore = {\n  settings: {\n    /**\n     * Whether the dev tools should be open by default\n     * @default false\n     */\n    defaultOpen: boolean\n    /**\n     * Whether the dev tools trigger should be hidden until the user hovers over it\n     * @default false\n     */\n    hideUntilHover: boolean\n    /**\n     * The position of the trigger button\n     * @default \"bottom-right\"\n     */\n    position: TriggerPosition\n\n    /**\n     * The location of the panel once it is open\n     * @default \"bottom\"\n     */\n    panelLocation: 'top' | 'bottom'\n    /**\n     * The hotkey to open the dev tools\n     * @default \"shift+a\"\n     */\n    openHotkey: Array<KeyboardKey>\n    /**\n     * Whether to require the URL flag to open the dev tools\n     * @default false\n     */\n    requireUrlFlag: boolean\n    /**\n     * The URL flag to open the dev tools, used in conjunction with requireUrlFlag (if set to true)\n     * @default \"tanstack-devtools\"\n     */\n    urlFlag: string\n  }\n  state: {\n    activeTab: TabName\n    height: number\n    activePlugin?: DevtoolsPlugin | undefined\n    persistOpen: boolean\n  }\n  plugins?: Array<DevtoolsPlugin>\n}\n\nexport const initialState: DevtoolsStore = {\n  settings: {\n    defaultOpen: false,\n    hideUntilHover: false,\n    position: 'bottom-right',\n    panelLocation: 'bottom',\n    openHotkey: ['Shift', 'A'],\n    requireUrlFlag: false,\n    urlFlag: 'tanstack-devtools',\n  },\n  state: {\n    activeTab: 'plugins',\n    height: 400,\n    activePlugin: undefined,\n    persistOpen: false,\n  },\n}\n"],"names":[],"mappings":";;AA8DO,MAAM,eAA8B;AAAA,EACzC,UAAU;AAAA,IACR,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA,IACf,YAAY,CAAC,SAAS,GAAG;AAAA,IACzB,gBAAgB;AAAA,IAChB,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAEjB;;"}
+{"version":3,"file":"devtools-store.cjs","sources":["../../../src/context/devtools-store.ts"],"sourcesContent":["import type { TabName } from '../tabs'\nimport type { TanStackDevtoolsPlugin } from './devtools-context'\n\ntype ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift'\ntype KeyboardKey = ModifierKey | (string & {})\n\ntype TriggerPosition =\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'middle-left'\n  | 'middle-right'\n\nexport type DevtoolsStore = {\n  settings: {\n    /**\n     * Whether the dev tools should be open by default\n     * @default false\n     */\n    defaultOpen: boolean\n    /**\n     * Whether the dev tools trigger should be hidden until the user hovers over it\n     * @default false\n     */\n    hideUntilHover: boolean\n    /**\n     * The position of the trigger button\n     * @default \"bottom-right\"\n     */\n    position: TriggerPosition\n\n    /**\n     * The location of the panel once it is open\n     * @default \"bottom\"\n     */\n    panelLocation: 'top' | 'bottom'\n    /**\n     * The hotkey to open the dev tools\n     * @default \"shift+a\"\n     */\n    openHotkey: Array<KeyboardKey>\n    /**\n     * Whether to require the URL flag to open the dev tools\n     * @default false\n     */\n    requireUrlFlag: boolean\n    /**\n     * The URL flag to open the dev tools, used in conjunction with requireUrlFlag (if set to true)\n     * @default \"tanstack-devtools\"\n     */\n    urlFlag: string\n  }\n  state: {\n    activeTab: TabName\n    height: number\n    activePlugin?: string | undefined\n    persistOpen: boolean\n  }\n  plugins?: Array<TanStackDevtoolsPlugin>\n}\n\nexport const initialState: DevtoolsStore = {\n  settings: {\n    defaultOpen: false,\n    hideUntilHover: false,\n    position: 'bottom-right',\n    panelLocation: 'bottom',\n    openHotkey: ['Shift', 'A'],\n    requireUrlFlag: false,\n    urlFlag: 'tanstack-devtools',\n  },\n  state: {\n    activeTab: 'plugins',\n    height: 400,\n    activePlugin: undefined,\n    persistOpen: false,\n  },\n}\n"],"names":[],"mappings":";;AA8DO,MAAM,eAA8B;AAAA,EACzC,UAAU;AAAA,IACR,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA,IACf,YAAY,CAAC,SAAS,GAAG;AAAA,IACzB,gBAAgB;AAAA,IAChB,SAAS;AAAA,EAAA;AAAA,EAEX,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAEjB;;"}

package/dist/cjs/context/devtools-store.d.cts

@@ -1,5 +1,5 @@
 import { TabName } from '../tabs.cjs';
-import { DevtoolsPlugin } from './devtools-context.cjs';
+import { TanStackDevtoolsPlugin } from './devtools-context.cjs';
 type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
 type KeyboardKey = ModifierKey | (string & {});
 type TriggerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right';
@@ -44,10 +44,10 @@ export type DevtoolsStore = {
     state: {
         activeTab: TabName;
         height: number;
-        activePlugin?: DevtoolsPlugin | undefined;
+        activePlugin?: string | undefined;
         persistOpen: boolean;
     };
-    plugins?: Array<DevtoolsPlugin>;
+    plugins?: Array<TanStackDevtoolsPlugin>;
 };
 export declare const initialState: DevtoolsStore;
 export {};

package/dist/cjs/context/use-devtools-context.cjs

@@ -15,12 +15,12 @@ const usePlugins = () => {
   const { store, setStore } = useDevtoolsContext();
   const plugins = solidJs.createMemo(() => store.plugins);
   const activePlugin = solidJs.createMemo(() => store.state.activePlugin);
-  const setActivePlugin = (plugin) => {
+  const setActivePlugin = (pluginId) => {
     setStore((prev) => ({
       ...prev,
       state: {
         ...prev.state,
-        activePlugin: plugin
+        activePlugin: pluginId
       }
     }));
   };

package/dist/cjs/context/use-devtools-context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-devtools-context.cjs","sources":["../../../src/context/use-devtools-context.ts"],"sourcesContent":["import { createMemo, useContext } from 'solid-js'\nimport { DevtoolsContext } from './devtools-context.jsx'\nimport type { DevtoolsPlugin } from './devtools-context.jsx'\n/* import type { DevtoolsPlugin } from './devtools-context' */\nimport type { DevtoolsStore } from './devtools-store.js'\n\n/**\n * Returns an object containing the current state and setState function of the ShellContext.\n * Throws an error if used outside of a ShellContextProvider.\n */\nconst useDevtoolsContext = () => {\n  const context = useContext(DevtoolsContext)\n  if (context === undefined) {\n    throw new Error(\n      'useDevtoolsShellContext must be used within a ShellContextProvider',\n    )\n  }\n  return context\n}\n\nexport const usePlugins = () => {\n  const { store, setStore } = useDevtoolsContext()\n\n  const plugins = createMemo(() => store.plugins)\n  const activePlugin = createMemo(() => store.state.activePlugin)\n\n  const setActivePlugin = (plugin: DevtoolsPlugin) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        activePlugin: plugin,\n      },\n    }))\n  }\n\n  return { plugins, setActivePlugin, activePlugin }\n}\n\nexport const useDevtoolsState = () => {\n  const { store, setStore } = useDevtoolsContext()\n  const state = createMemo(() => store.state)\n  const setState = (newState: Partial<DevtoolsStore['state']>) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        ...newState,\n      },\n    }))\n  }\n  return { state, setState }\n}\n\nexport const useDevtoolsSettings = () => {\n  const { store, setStore } = useDevtoolsContext()\n\n  const settings = createMemo(() => store.settings)\n\n  const setSettings = (newSettings: Partial<DevtoolsStore['settings']>) => {\n    setStore((prev) => ({\n      ...prev,\n      settings: {\n        ...prev.settings,\n        ...newSettings,\n      },\n    }))\n  }\n\n  return { setSettings, settings }\n}\n\nexport const usePersistOpen = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const persistOpen = createMemo(() => state().persistOpen)\n\n  const setPersistOpen = (value: boolean) => {\n    setState({ persistOpen: value })\n  }\n\n  return { persistOpen, setPersistOpen }\n}\n\nexport const useHeight = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const height = createMemo(() => state().height)\n\n  const setHeight = (newHeight: number) => {\n    setState({ height: newHeight })\n  }\n\n  return { height, setHeight }\n}\n"],"names":["useContext","DevtoolsContext","createMemo"],"mappings":";;;;AAUA,MAAM,qBAAqB,MAAM;AACzB,QAAA,UAAUA,mBAAWC,+BAAe;AAC1C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EAAA;AAEK,SAAA;AACT;AAEO,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB;AAE/C,QAAM,UAAUC,QAAAA,WAAW,MAAM,MAAM,OAAO;AAC9C,QAAM,eAAeA,QAAA,WAAW,MAAM,MAAM,MAAM,YAAY;AAExD,QAAA,kBAAkB,CAAC,WAA2B;AAClD,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,cAAc;AAAA,MAAA;AAAA,IAChB,EACA;AAAA,EACJ;AAEO,SAAA,EAAE,SAAS,iBAAiB,aAAa;AAClD;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB;AAC/C,QAAM,QAAQA,QAAAA,WAAW,MAAM,MAAM,KAAK;AACpC,QAAA,WAAW,CAAC,aAA8C;AAC9D,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AACO,SAAA,EAAE,OAAO,SAAS;AAC3B;AAEO,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB;AAE/C,QAAM,WAAWA,QAAAA,WAAW,MAAM,MAAM,QAAQ;AAE1C,QAAA,cAAc,CAAC,gBAAoD;AACvE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,UAAU;AAAA,QACR,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AAEO,SAAA,EAAE,aAAa,SAAS;AACjC;AAEO,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,OAAO,SAAS,IAAI,iBAAiB;AAE7C,QAAM,cAAcA,QAAA,WAAW,MAAM,MAAA,EAAQ,WAAW;AAElD,QAAA,iBAAiB,CAAC,UAAmB;AAChC,aAAA,EAAE,aAAa,OAAO;AAAA,EACjC;AAEO,SAAA,EAAE,aAAa,eAAe;AACvC;AAEO,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,OAAO,SAAS,IAAI,iBAAiB;AAE7C,QAAM,SAASA,QAAA,WAAW,MAAM,MAAA,EAAQ,MAAM;AAExC,QAAA,YAAY,CAAC,cAAsB;AAC9B,aAAA,EAAE,QAAQ,WAAW;AAAA,EAChC;AAEO,SAAA,EAAE,QAAQ,UAAU;AAC7B;;;;;;"}
+{"version":3,"file":"use-devtools-context.cjs","sources":["../../../src/context/use-devtools-context.ts"],"sourcesContent":["import { createMemo, useContext } from 'solid-js'\nimport { DevtoolsContext } from './devtools-context.jsx'\n/* import type { DevtoolsPlugin } from './devtools-context' */\nimport type { DevtoolsStore } from './devtools-store.js'\n\n/**\n * Returns an object containing the current state and setState function of the ShellContext.\n * Throws an error if used outside of a ShellContextProvider.\n */\nconst useDevtoolsContext = () => {\n  const context = useContext(DevtoolsContext)\n  if (context === undefined) {\n    throw new Error(\n      'useDevtoolsShellContext must be used within a ShellContextProvider',\n    )\n  }\n  return context\n}\n\nexport const usePlugins = () => {\n  const { store, setStore } = useDevtoolsContext()\n\n  const plugins = createMemo(() => store.plugins)\n  const activePlugin = createMemo(() => store.state.activePlugin)\n\n  const setActivePlugin = (pluginId: string) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        activePlugin: pluginId,\n      },\n    }))\n  }\n\n  return { plugins, setActivePlugin, activePlugin }\n}\n\nexport const useDevtoolsState = () => {\n  const { store, setStore } = useDevtoolsContext()\n  const state = createMemo(() => store.state)\n  const setState = (newState: Partial<DevtoolsStore['state']>) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        ...newState,\n      },\n    }))\n  }\n  return { state, setState }\n}\n\nexport const useDevtoolsSettings = () => {\n  const { store, setStore } = useDevtoolsContext()\n\n  const settings = createMemo(() => store.settings)\n\n  const setSettings = (newSettings: Partial<DevtoolsStore['settings']>) => {\n    setStore((prev) => ({\n      ...prev,\n      settings: {\n        ...prev.settings,\n        ...newSettings,\n      },\n    }))\n  }\n\n  return { setSettings, settings }\n}\n\nexport const usePersistOpen = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const persistOpen = createMemo(() => state().persistOpen)\n\n  const setPersistOpen = (value: boolean) => {\n    setState({ persistOpen: value })\n  }\n\n  return { persistOpen, setPersistOpen }\n}\n\nexport const useHeight = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const height = createMemo(() => state().height)\n\n  const setHeight = (newHeight: number) => {\n    setState({ height: newHeight })\n  }\n\n  return { height, setHeight }\n}\n"],"names":["useContext","DevtoolsContext","createMemo"],"mappings":";;;;AASA,MAAM,qBAAqB,MAAM;AAC/B,QAAM,UAAUA,QAAAA,WAAWC,+BAAe;AAC1C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEO,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAE5B,QAAM,UAAUC,QAAAA,WAAW,MAAM,MAAM,OAAO;AAC9C,QAAM,eAAeA,QAAAA,WAAW,MAAM,MAAM,MAAM,YAAY;AAE9D,QAAM,kBAAkB,CAAC,aAAqB;AAC5C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,cAAc;AAAA,MAAA;AAAA,IAChB,EACA;AAAA,EACJ;AAEA,SAAO,EAAE,SAAS,iBAAiB,aAAA;AACrC;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAC5B,QAAM,QAAQA,QAAAA,WAAW,MAAM,MAAM,KAAK;AAC1C,QAAM,WAAW,CAAC,aAA8C;AAC9D,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AACA,SAAO,EAAE,OAAO,SAAA;AAClB;AAEO,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAE5B,QAAM,WAAWA,QAAAA,WAAW,MAAM,MAAM,QAAQ;AAEhD,QAAM,cAAc,CAAC,gBAAoD;AACvE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,UAAU;AAAA,QACR,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AAEA,SAAO,EAAE,aAAa,SAAA;AACxB;AAEO,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,cAAcA,QAAAA,WAAW,MAAM,MAAA,EAAQ,WAAW;AAExD,QAAM,iBAAiB,CAAC,UAAmB;AACzC,aAAS,EAAE,aAAa,OAAO;AAAA,EACjC;AAEA,SAAO,EAAE,aAAa,eAAA;AACxB;AAEO,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,SAASA,QAAAA,WAAW,MAAM,MAAA,EAAQ,MAAM;AAE9C,QAAM,YAAY,CAAC,cAAsB;AACvC,aAAS,EAAE,QAAQ,WAAW;AAAA,EAChC;AAEA,SAAO,EAAE,QAAQ,UAAA;AACnB;;;;;;"}

package/dist/cjs/context/use-devtools-context.d.cts

@@ -1,15 +1,14 @@
-import { DevtoolsPlugin } from './devtools-context.jsx';
 import { DevtoolsStore } from './devtools-store.js';
 export declare const usePlugins: () => {
-    plugins: import('solid-js').Accessor<DevtoolsPlugin[] | undefined>;
-    setActivePlugin: (plugin: DevtoolsPlugin) => void;
-    activePlugin: import('solid-js').Accessor<DevtoolsPlugin | undefined>;
+    plugins: import('solid-js').Accessor<import('./devtools-context.jsx').TanStackDevtoolsPlugin[] | undefined>;
+    setActivePlugin: (pluginId: string) => void;
+    activePlugin: import('solid-js').Accessor<string | undefined>;
 };
 export declare const useDevtoolsState: () => {
     state: import('solid-js').Accessor<{
         activeTab: import('../tabs/index.jsx').TabName;
         height: number;
-        activePlugin?: DevtoolsPlugin | undefined;
+        activePlugin?: string | undefined;
         persistOpen: boolean;
     }>;
     setState: (newState: Partial<DevtoolsStore["state"]>) => void;

package/dist/cjs/core.cjs

@@ -1,12 +1,4 @@
 "use strict";
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var _options, _plugins, _isMounted, _dispose, _Component;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const solidJs = require("solid-js");
@@ -14,35 +6,35 @@ const devtoolsContext = require("./context/devtools-context.cjs");
 const devtoolsStore = require("./context/devtools-store.cjs");
 const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
 class TanStackDevtoolsCore {
-  constructor(config) {
-    __privateAdd(this, _options, {
-      ...devtoolsStore.initialState.settings
-    });
-    __privateAdd(this, _plugins, []);
-    __privateAdd(this, _isMounted, false);
-    __privateAdd(this, _dispose);
-    __privateAdd(this, _Component);
-    __privateSet(this, _plugins, config.plugins || []);
-    __privateSet(this, _options, {
-      ...__privateGet(this, _options),
-      ...config.options
-    });
+  #config = {
+    ...devtoolsStore.initialState.settings
+  };
+  #plugins = [];
+  #isMounted = false;
+  #dispose;
+  #Component;
+  constructor(init) {
+    this.#plugins = init.plugins || [];
+    this.#config = {
+      ...this.#config,
+      ...init.config
+    };
   }
   mount(el) {
-    if (__privateGet(this, _isMounted)) {
+    if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
     }
     const mountTo = el;
     const dispose = web.render(() => {
       const _self$ = this;
-      __privateSet(this, _Component, solidJs.lazy(() => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./devtools.cjs")))));
-      const Devtools = __privateGet(this, _Component);
+      this.#Component = solidJs.lazy(() => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./devtools.cjs"))));
+      const Devtools = this.#Component;
       return web.createComponent(devtoolsContext.DevtoolsProvider, {
         get plugins() {
-          return __privateGet(_self$, _plugins);
+          return _self$.#plugins;
         },
         get config() {
-          return __privateGet(_self$, _options);
+          return _self$.#config;
         },
         get children() {
           return web.createComponent(web.Portal, {
@@ -54,28 +46,22 @@ class TanStackDevtoolsCore {
         }
       });
     }, mountTo);
-    __privateSet(this, _isMounted, true);
-    __privateSet(this, _dispose, dispose);
+    this.#isMounted = true;
+    this.#dispose = dispose;
   }
   unmount() {
-    var _a;
-    if (!__privateGet(this, _isMounted)) {
+    if (!this.#isMounted) {
       throw new Error("Devtools is not mounted");
     }
-    (_a = __privateGet(this, _dispose)) == null ? void 0 : _a.call(this);
-    __privateSet(this, _isMounted, false);
+    this.#dispose?.();
+    this.#isMounted = false;
   }
-  setOptions(options) {
-    __privateSet(this, _options, {
-      ...__privateGet(this, _options),
-      ...options
-    });
+  setConfig(config) {
+    this.#config = {
+      ...this.#config,
+      ...config
+    };
   }
 }
-_options = new WeakMap();
-_plugins = new WeakMap();
-_isMounted = new WeakMap();
-_dispose = new WeakMap();
-_Component = new WeakMap();
-exports.TanStackRouterDevtoolsCore = TanStackDevtoolsCore;
+exports.TanStackDevtoolsCore = TanStackDevtoolsCore;
 //# sourceMappingURL=core.cjs.map

package/dist/cjs/core.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"core.cjs","sources":["../../src/core.tsx"],"sourcesContent":["import { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport { DevtoolsProvider } from './context/devtools-context'\nimport { initialState } from './context/devtools-store'\nimport type {\n  DevtoolsPlugin,\n  DevtoolsSettings,\n} from './context/devtools-context'\n\nexport interface DevtoolsOptions {\n  options?: Partial<DevtoolsSettings>\n  plugins?: Array<DevtoolsPlugin>\n}\n\nclass TanStackDevtoolsCore {\n  #options: DevtoolsSettings = {\n    ...initialState.settings,\n  }\n  #plugins: Array<DevtoolsPlugin> = []\n  #isMounted = false\n  #dispose?: () => void\n  #Component: any\n\n  constructor(config: DevtoolsOptions) {\n    this.#plugins = config.plugins || []\n    this.#options = {\n      ...this.#options,\n      ...config.options,\n    }\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n    const mountTo = el\n    const dispose = render(() => {\n      this.#Component = lazy(() => import('./devtools'))\n\n      const Devtools = this.#Component\n\n      return (\n        <DevtoolsProvider plugins={this.#plugins} config={this.#options}>\n          <Portal mount={mountTo}>\n            <Devtools />\n          </Portal>\n        </DevtoolsProvider>\n      )\n    }, mountTo)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setOptions(options: Partial<DevtoolsOptions>) {\n    this.#options = {\n      ...this.#options,\n      ...options,\n    }\n  }\n}\n\nexport { TanStackDevtoolsCore as TanStackRouterDevtoolsCore }\n"],"names":["TanStackDevtoolsCore","constructor","config","initialState","settings","plugins","options","mount","el","Error","mountTo","dispose","render","_self$","lazy","Devtools","_$createComponent","DevtoolsProvider","children","Portal","unmount","setOptions"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAMA,qBAAqB;AAAA,EASzBC,YAAYC,QAAyB;AARrC,iCAA6B;AAAA,MAC3B,GAAGC,2BAAaC;AAAAA,IAClB;AACA,iCAAkC,CAAE;AACpC,mCAAa;AACb;AACA;AAGO,uBAAA,UAAWF,OAAOG,WAAW,CAAE;AACpC,uBAAK,UAAW;AAAA,MACd,GAAG,mBAAK;AAAA,MACR,GAAGH,OAAOI;AAAAA,IACZ;AAAA,EAAA;AAAA,EAGFC,MAA6BC,IAAO;AAClC,QAAI,mBAAK,aAAY;AACb,YAAA,IAAIC,MAAM,6BAA6B;AAAA,IAAA;AAE/C,UAAMC,UAAUF;AACVG,UAAAA,UAAUC,IAAAA,OAAO,MAAM;AAAA,YAAAC,SAAA;AAC3B,yBAAK,YAAaC,QAAAA,KAAK,MAAM,QAAA,QAAA,EAAA,KAAA,MAAA,6CAAA,QAAO,gBAAY,CAAA,CAAA,CAAC;AAEjD,YAAMC,WAAW,mBAAK;AAEtB,aAAAC,IAAAA,gBACGC,gBAAAA,kBAAgB;AAAA,QAAA,IAACZ,UAAO;AAAA,iBAAEQ,qBAAK;AAAA,QAAQ;AAAA,QAAA,IAAEX,SAAM;AAAA,iBAAEW,qBAAK;AAAA,QAAQ;AAAA,QAAA,IAAAK,WAAA;AAAA,iBAAAF,IAAAA,gBAC5DG,IAAAA,QAAM;AAAA,YAACZ,OAAOG;AAAAA,YAAO,IAAAQ,WAAA;AAAAF,qBAAAA,IAAAA,gBACnBD,UAAQ,EAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,OAIdL,OAAO;AAEV,uBAAK,YAAa;AAClB,uBAAK,UAAWC;AAAAA,EAAAA;AAAAA,EAGlBS,UAAU;;AACJ,QAAA,CAAC,mBAAK,aAAY;AACd,YAAA,IAAIX,MAAM,yBAAyB;AAAA,IAAA;AAE3C,6BAAK,cAAL;AACA,uBAAK,YAAa;AAAA,EAAA;AAAA,EAGpBY,WAAWf,SAAmC;AAC5C,uBAAK,UAAW;AAAA,MACd,GAAG,mBAAK;AAAA,MACR,GAAGA;AAAAA,IACL;AAAA,EAAA;AAEJ;AArDE;AAGA;AACA;AACA;AACA;;"}
+{"version":3,"file":"core.cjs","sources":["../../src/core.tsx"],"sourcesContent":["import { lazy } from 'solid-js'\nimport { Portal, render } from 'solid-js/web'\nimport { DevtoolsProvider } from './context/devtools-context'\nimport { initialState } from './context/devtools-store'\nimport type {\n  TanStackDevtoolsConfig,\n  TanStackDevtoolsPlugin,\n} from './context/devtools-context'\n\nexport interface TanStackDevtoolsInit {\n  /**\n   * Configuration for the devtools shell. These configuration options are used to set the\n   * initial state of the devtools when it is started for the first time. Afterwards,\n   * the settings are persisted in local storage and changed through the settings panel.\n   */\n  config?: Partial<TanStackDevtoolsConfig>\n  /**\n   * Array of plugins to be used in the devtools.\n   * Each plugin has a `render` function that gives you the dom node to mount into\n   *\n   * Example:\n   * ```ts\n   *  const devtools = new TanStackDevtoolsCore({\n   *    plugins: [\n   *      {\n   *        id: \"your-plugin-id\",\n   *        name: \"Your Plugin\",\n   *        render: (el) => {\n   *          // Your render logic here\n   *        },\n   *      },\n   *    ],\n   *  })\n   * ```\n   */\n  plugins?: Array<TanStackDevtoolsPlugin>\n}\n\nexport class TanStackDevtoolsCore {\n  #config: TanStackDevtoolsConfig = {\n    ...initialState.settings,\n  }\n  #plugins: Array<TanStackDevtoolsPlugin> = []\n  #isMounted = false\n  #dispose?: () => void\n  #Component: any\n\n  constructor(init: TanStackDevtoolsInit) {\n    this.#plugins = init.plugins || []\n    this.#config = {\n      ...this.#config,\n      ...init.config,\n    }\n  }\n\n  mount<T extends HTMLElement>(el: T) {\n    if (this.#isMounted) {\n      throw new Error('Devtools is already mounted')\n    }\n    const mountTo = el\n    const dispose = render(() => {\n      this.#Component = lazy(() => import('./devtools'))\n\n      const Devtools = this.#Component\n\n      return (\n        <DevtoolsProvider plugins={this.#plugins} config={this.#config}>\n          <Portal mount={mountTo}>\n            <Devtools />\n          </Portal>\n        </DevtoolsProvider>\n      )\n    }, mountTo)\n\n    this.#isMounted = true\n    this.#dispose = dispose\n  }\n\n  unmount() {\n    if (!this.#isMounted) {\n      throw new Error('Devtools is not mounted')\n    }\n    this.#dispose?.()\n    this.#isMounted = false\n  }\n\n  setConfig(config: Partial<TanStackDevtoolsInit>) {\n    this.#config = {\n      ...this.#config,\n      ...config,\n    }\n  }\n}\n"],"names":["TanStackDevtoolsCore","initialState","settings","constructor","init","plugins","config","mount","el","Error","mountTo","dispose","render","_self$","lazy","Devtools","_$createComponent","DevtoolsProvider","children","Portal","unmount","setConfig"],"mappings":";;;;;;;AAsCO,MAAMA,qBAAqB;AAAA,EAChC,UAAkC;AAAA,IAChC,GAAGC,2BAAaC;AAAAA,EAAAA;AAAAA,EAElB,WAA0C,CAAA;AAAA,EAC1C,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EAEAC,YAAYC,MAA4B;AACtC,SAAK,WAAWA,KAAKC,WAAW,CAAA;AAChC,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGD,KAAKE;AAAAA,IAAAA;AAAAA,EAEZ;AAAA,EAEAC,MAA6BC,IAAO;AAClC,QAAI,KAAK,YAAY;AACnB,YAAM,IAAIC,MAAM,6BAA6B;AAAA,IAC/C;AACA,UAAMC,UAAUF;AAChB,UAAMG,UAAUC,IAAAA,OAAO,MAAM;AAAA,YAAAC,SAAA;AAC3B,WAAK,aAAaC,QAAAA,KAAK,MAAM,QAAA,QAAA,EAAA,KAAA,MAAA,6CAAA,QAAO,gBAAY,CAAA,CAAA,CAAC;AAEjD,YAAMC,WAAW,KAAK;AAEtB,aAAAC,IAAAA,gBACGC,gBAAAA,kBAAgB;AAAA,QAAA,IAACZ,UAAO;AAAA,iBAAEQ,OAAK;AAAA,QAAQ;AAAA,QAAA,IAAEP,SAAM;AAAA,iBAAEO,OAAK;AAAA,QAAO;AAAA,QAAA,IAAAK,WAAA;AAAA,iBAAAF,IAAAA,gBAC3DG,IAAAA,QAAM;AAAA,YAACZ,OAAOG;AAAAA,YAAO,IAAAQ,WAAA;AAAA,qBAAAF,IAAAA,gBACnBD,UAAQ,EAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAIjB,GAAGL,OAAO;AAEV,SAAK,aAAa;AAClB,SAAK,WAAWC;AAAAA,EAClB;AAAA,EAEAS,UAAU;AACR,QAAI,CAAC,KAAK,YAAY;AACpB,YAAM,IAAIX,MAAM,yBAAyB;AAAA,IAC3C;AACA,SAAK,WAAA;AACL,SAAK,aAAa;AAAA,EACpB;AAAA,EAEAY,UAAUf,QAAuC;AAC/C,SAAK,UAAU;AAAA,MACb,GAAG,KAAK;AAAA,MACR,GAAGA;AAAAA,IAAAA;AAAAA,EAEP;AACF;;"}

package/dist/cjs/core.d.cts

@@ -1,13 +1,36 @@
-import { DevtoolsPlugin, DevtoolsSettings } from './context/devtools-context.cjs';
-export interface DevtoolsOptions {
-    options?: Partial<DevtoolsSettings>;
-    plugins?: Array<DevtoolsPlugin>;
+import { TanStackDevtoolsConfig, TanStackDevtoolsPlugin } from './context/devtools-context.cjs';
+export interface TanStackDevtoolsInit {
+    /**
+     * Configuration for the devtools shell. These configuration options are used to set the
+     * initial state of the devtools when it is started for the first time. Afterwards,
+     * the settings are persisted in local storage and changed through the settings panel.
+     */
+    config?: Partial<TanStackDevtoolsConfig>;
+    /**
+     * Array of plugins to be used in the devtools.
+     * Each plugin has a `render` function that gives you the dom node to mount into
+     *
+     * Example:
+     * ```ts
+     *  const devtools = new TanStackDevtoolsCore({
+     *    plugins: [
+     *      {
+     *        id: "your-plugin-id",
+     *        name: "Your Plugin",
+     *        render: (el) => {
+     *          // Your render logic here
+     *        },
+     *      },
+     *    ],
+     *  })
+     * ```
+     */
+    plugins?: Array<TanStackDevtoolsPlugin>;
 }
-declare class TanStackDevtoolsCore {
+export declare class TanStackDevtoolsCore {
     #private;
-    constructor(config: DevtoolsOptions);
+    constructor(init: TanStackDevtoolsInit);
     mount<T extends HTMLElement>(el: T): void;
     unmount(): void;
-    setOptions(options: Partial<DevtoolsOptions>): void;
+    setConfig(config: Partial<TanStackDevtoolsInit>): void;
 }
-export { TanStackDevtoolsCore as TanStackRouterDevtoolsCore };

package/dist/cjs/devtools.cjs

@@ -31,16 +31,19 @@ function DevTools() {
     setIsOpen(!open);
     setPersistOpen(!open);
   };
+  solidJs.createEffect(() => {
+  });
   const handleDragStart = (panelElement, startEvent) => {
     if (startEvent.button !== 0) return;
+    if (!panelElement) return;
     setIsResizing(true);
     const dragInfo = {
-      originalHeight: (panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) ?? 0,
+      originalHeight: panelElement.getBoundingClientRect().height,
       pageY: startEvent.pageY
     };
     const run = (moveEvent) => {
       const delta = dragInfo.pageY - moveEvent.pageY;
-      const newHeight = dragInfo.originalHeight + delta;
+      const newHeight = settings().panelLocation === "bottom" ? dragInfo.originalHeight + delta : dragInfo.originalHeight - delta;
       setHeight(newHeight);
       if (newHeight < 70) {
         setIsOpen(false);
@@ -57,15 +60,14 @@ function DevTools() {
     document.addEventListener("mouseup", unsub);
   };
   solidJs.createEffect(() => {
-    var _a, _b, _c;
     if (isOpen()) {
-      const previousValue = (_b = (_a = rootEl()) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style.paddingBottom;
+      const previousValue = rootEl()?.parentElement?.style.paddingBottom;
       const run = () => {
-        var _a2;
+        if (!panelRef) return;
         const containerHeight = panelRef.getBoundingClientRect().height;
-        if ((_a2 = rootEl()) == null ? void 0 : _a2.parentElement) {
+        if (rootEl()?.parentElement) {
           setRootEl((prev) => {
-            if (prev == null ? void 0 : prev.parentElement) {
+            if (prev?.parentElement) {
               prev.parentElement.style.paddingBottom = `${containerHeight}px`;
             }
             return prev;
@@ -76,9 +78,8 @@ function DevTools() {
       if (typeof window !== "undefined") {
         window.addEventListener("resize", run);
         return () => {
-          var _a2;
           window.removeEventListener("resize", run);
-          if (((_a2 = rootEl()) == null ? void 0 : _a2.parentElement) && typeof previousValue === "string") {
+          if (rootEl()?.parentElement && typeof previousValue === "string") {
             setRootEl((prev) => {
               prev.parentElement.style.paddingBottom = previousValue;
               return prev;
@@ -87,9 +88,9 @@ function DevTools() {
         };
       }
     } else {
-      if ((_c = rootEl()) == null ? void 0 : _c.parentElement) {
+      if (rootEl()?.parentElement) {
         setRootEl((prev) => {
-          if (prev == null ? void 0 : prev.parentElement) {
+          if (prev?.parentElement) {
             prev.parentElement.removeAttribute("style");
           }
           return prev;
@@ -110,35 +111,45 @@ function DevTools() {
     if (rootEl()) {
       const el = rootEl();
       const fontSize = getComputedStyle(el).fontSize;
-      el == null ? void 0 : el.style.setProperty("--tsrd-font-size", fontSize);
+      el?.style.setProperty("--tsrd-font-size", fontSize);
     }
   });
-  keyboard.createShortcut(settings().openHotkey, () => {
-    toggleOpen();
+  solidJs.createEffect(() => {
+    keyboard.createShortcut(settings().openHotkey, () => {
+      toggleOpen();
+    });
+  });
+  solidJs.createEffect(() => {
   });
   return (() => {
     var _el$ = _tmpl$();
     web.use(setRootEl, _el$);
     web.setAttribute(_el$, "data-testid", storage.TANSTACK_DEVTOOLS);
-    web.insert(_el$, web.createComponent(trigger.Trigger, {
-      isOpen,
-      setIsOpen: toggleOpen
-    }), null);
-    web.insert(_el$, web.createComponent(mainPanel.MainPanel, {
-      isResizing,
-      isOpen,
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return web.memo(() => !!settings().requireUrlFlag)() ? window.location.search.includes(settings().urlFlag) : true;
+      },
       get children() {
-        return web.createComponent(contentPanel.ContentPanel, {
-          ref: (ref) => panelRef = ref,
-          handleDragStart: (e) => handleDragStart(panelRef, e),
+        return [web.createComponent(trigger.Trigger, {
+          isOpen,
+          setIsOpen: toggleOpen
+        }), web.createComponent(mainPanel.MainPanel, {
+          isResizing,
+          isOpen,
           get children() {
-            return [web.createComponent(tabs.Tabs, {
-              toggleOpen
-            }), web.createComponent(tabContent.TabContent, {})];
+            return web.createComponent(contentPanel.ContentPanel, {
+              ref: (ref) => panelRef = ref,
+              handleDragStart: (e) => handleDragStart(panelRef, e),
+              get children() {
+                return [web.createComponent(tabs.Tabs, {
+                  toggleOpen
+                }), web.createComponent(tabContent.TabContent, {})];
+              }
+            });
           }
-        });
+        })];
       }
-    }), null);
+    }));
     return _el$;
   })();
 }