@tanstack/devtools 0.0.0 → 0.1.0

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 { Setter } from 'solid-js'\nimport type { JSX } from 'solid-js/jsx-runtime'\n\nexport interface TanStackDevtoolsPlugin {\n  name: string | ((el: HTMLHeadingElement) => void)\n  id?: string\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":";;;;;;;;AAmBO,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,9 @@
 import { DevtoolsStore } from './devtools-store.cjs';
 import { Setter } from 'solid-js';
 import { JSX } from 'solid-js/jsx-runtime';
-export interface DevtoolsPlugin {
+export interface TanStackDevtoolsPlugin {
     name: string | ((el: HTMLHeadingElement) => void);
-    id: string;
+    id?: string;
     render: (el: HTMLDivElement) => void;
 }
 export declare const DevtoolsContext: import('solid-js').Context<{
@@ -12,9 +12,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  config?: Partial<TanStackDevtoolsConfig>\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":";;;;;;;AAcO,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,12 @@
-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 {
+    config?: Partial<TanStackDevtoolsConfig>;
+    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$;
   })();
 }

package/dist/cjs/devtools.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["import { createEffect, createSignal } from 'solid-js'\nimport { createShortcut } from '@solid-primitives/keyboard'\nimport {\n  useDevtoolsSettings,\n  useHeight,\n  usePersistOpen,\n} from './context/use-devtools-context'\nimport { useDisableTabbing } from './hooks/use-disable-tabbing'\nimport { TANSTACK_DEVTOOLS } from './utils/storage'\nimport { Trigger } from './components/trigger'\nimport { MainPanel } from './components/main-panel'\nimport { ContentPanel } from './components/content-panel'\nimport { Tabs } from './components/tabs'\nimport { TabContent } from './components/tab-content'\n\nexport default function DevTools() {\n  const { settings } = useDevtoolsSettings()\n  const { setHeight } = useHeight()\n  const { persistOpen, setPersistOpen } = usePersistOpen()\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n  const [isOpen, setIsOpen] = createSignal(\n    settings().defaultOpen || persistOpen(),\n  )\n  let panelRef: HTMLDivElement | undefined = undefined\n  const [isResizing, setIsResizing] = createSignal(false)\n  const toggleOpen = () => {\n    const open = isOpen()\n    setIsOpen(!open)\n    setPersistOpen(!open)\n  }\n\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\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight = 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        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  createShortcut(settings().openHotkey, () => {\n    toggleOpen()\n  })\n  return (\n    <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>\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    </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","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","unsub","removeEventListener","addEventListener","createEffect","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","e","key","useDisableTabbing","el","fontSize","getComputedStyle","setProperty","openHotkey","_el$","_tmpl$","_$use","TANSTACK_DEVTOOLS","_$createComponent","Trigger","MainPanel","children","ContentPanel","ref","Tabs","TabContent"],"mappings":"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"}
+{"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'\n\nexport default function DevTools() {\n  const { settings } = useDevtoolsSettings()\n  const { setHeight } = useHeight()\n  const { persistOpen, setPersistOpen } = usePersistOpen()\n  const [rootEl, setRootEl] = createSignal<HTMLDivElement>()\n  const [isOpen, setIsOpen] = createSignal(\n    settings().defaultOpen || persistOpen(),\n  )\n  let panelRef: HTMLDivElement | undefined = undefined\n  const [isResizing, setIsResizing] = createSignal(false)\n  const toggleOpen = () => {\n    const open = isOpen()\n    setIsOpen(!open)\n    setPersistOpen(!open)\n  }\n  createEffect(() => {})\n  // Used to resize the panel\n  const handleDragStart = (\n    panelElement: HTMLDivElement | undefined,\n    startEvent: MouseEvent,\n  ) => {\n    if (startEvent.button !== 0) return // Only allow left click for drag\n    if (!panelElement) return\n    setIsResizing(true)\n\n    const dragInfo = {\n      originalHeight: panelElement.getBoundingClientRect().height,\n      pageY: startEvent.pageY,\n    }\n\n    const run = (moveEvent: MouseEvent) => {\n      const delta = dragInfo.pageY - moveEvent.pageY\n      const newHeight =\n        settings().panelLocation === 'bottom'\n          ? dragInfo.originalHeight + delta\n          : dragInfo.originalHeight - delta\n\n      setHeight(newHeight)\n\n      if (newHeight < 70) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      setIsResizing(false)\n      document.removeEventListener('mousemove', run)\n      document.removeEventListener('mouseUp', unsub)\n    }\n\n    document.addEventListener('mousemove', run)\n    document.addEventListener('mouseup', unsub)\n  }\n\n  // Handle resizing and padding adjustments\n  createEffect(() => {\n    if (isOpen()) {\n      const previousValue = rootEl()?.parentElement?.style.paddingBottom\n\n      const run = () => {\n        if (!panelRef) return\n        const containerHeight = panelRef.getBoundingClientRect().height\n        if (rootEl()?.parentElement) {\n          setRootEl((prev) => {\n            if (prev?.parentElement) {\n              prev.parentElement.style.paddingBottom = `${containerHeight}px`\n            }\n            return prev\n          })\n        }\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          if (rootEl()?.parentElement && typeof previousValue === 'string') {\n            setRootEl((prev) => {\n              prev!.parentElement!.style.paddingBottom = previousValue\n              return prev\n            })\n          }\n        }\n      }\n    } else {\n      // Reset padding when devtools are closed\n      if (rootEl()?.parentElement) {\n        setRootEl((prev) => {\n          if (prev?.parentElement) {\n            prev.parentElement.removeAttribute('style')\n          }\n          return prev\n        })\n      }\n    }\n    return\n  })\n  createEffect(() => {\n    window.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape' && isOpen()) {\n        toggleOpen()\n      }\n    })\n  })\n  useDisableTabbing(isOpen)\n  createEffect(() => {\n    if (rootEl()) {\n      const el = rootEl()\n      const fontSize = getComputedStyle(el!).fontSize\n      el?.style.setProperty('--tsrd-font-size', fontSize)\n    }\n  })\n  createEffect(() => {\n    createShortcut(settings().openHotkey, () => {\n      toggleOpen()\n    })\n  })\n\n  createEffect(() => {})\n  return (\n    <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>\n      <Show\n        when={\n          settings().requireUrlFlag\n            ? window.location.search.includes(settings().urlFlag)\n            : true\n        }\n      >\n        <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />\n        <MainPanel isResizing={isResizing} isOpen={isOpen}>\n          <ContentPanel\n            ref={(ref) => (panelRef = ref)}\n            handleDragStart={(e) => handleDragStart(panelRef, e)}\n          >\n            <Tabs toggleOpen={toggleOpen} />\n            <TabContent />\n          </ContentPanel>\n        </MainPanel>\n      </Show>\n    </div>\n  )\n}\n"],"names":["DevTools","settings","useDevtoolsSettings","setHeight","useHeight","persistOpen","setPersistOpen","usePersistOpen","rootEl","setRootEl","createSignal","isOpen","setIsOpen","defaultOpen","panelRef","undefined","isResizing","setIsResizing","toggleOpen","open","createEffect","handleDragStart","panelElement","startEvent","button","dragInfo","originalHeight","getBoundingClientRect","height","pageY","run","moveEvent","delta","newHeight","panelLocation","unsub","document","removeEventListener","addEventListener","previousValue","parentElement","style","paddingBottom","containerHeight","prev","window","removeAttribute","e","key","useDisableTabbing","el","fontSize","getComputedStyle","setProperty","createShortcut","openHotkey","_el$","_tmpl$","_$use","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","_$createComponent","Show","when","_$memo","requireUrlFlag","location","search","includes","urlFlag","children","Trigger","MainPanel","ContentPanel","ref","Tabs","TabContent"],"mappings":"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"}

package/dist/cjs/hooks/use-disable-tabbing.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-disable-tabbing.cjs","sources":["../../../src/hooks/use-disable-tabbing.ts"],"sourcesContent":["import { createEffect } from 'solid-js'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\n\nconst recursivelyChangeTabIndex = (\n  node: Element | HTMLElement,\n  remove = true,\n) => {\n  if (remove) {\n    node.setAttribute('tabIndex', '-1')\n  } else {\n    node.removeAttribute('tabIndex')\n  }\n  for (const child of node.children) {\n    recursivelyChangeTabIndex(child, remove)\n  }\n}\n/**\n * @param isOpen A function that returns whether the devtools are open or not.\n * This is used to disable tabbing over the main devtools container while\n * the devtools are closed.\n */\nexport const useDisableTabbing = (isOpen: () => boolean) => {\n  createEffect(() => {\n    const el = document.getElementById(TANSTACK_DEVTOOLS)\n    if (!el) return\n    recursivelyChangeTabIndex(el, !isOpen())\n  })\n}\n"],"names":["createEffect","TANSTACK_DEVTOOLS"],"mappings":";;;;AAGA,MAAM,4BAA4B,CAChC,MACA,SAAS,SACN;AACH,MAAI,QAAQ;AACL,SAAA,aAAa,YAAY,IAAI;AAAA,EAAA,OAC7B;AACL,SAAK,gBAAgB,UAAU;AAAA,EAAA;AAEtB,aAAA,SAAS,KAAK,UAAU;AACjC,8BAA0B,OAAO,MAAM;AAAA,EAAA;AAE3C;AAMa,MAAA,oBAAoB,CAAC,WAA0B;AAC1DA,UAAAA,aAAa,MAAM;AACX,UAAA,KAAK,SAAS,eAAeC,yBAAiB;AACpD,QAAI,CAAC,GAAI;AACiB,8BAAA,IAAI,CAAC,QAAQ;AAAA,EAAA,CACxC;AACH;;"}
+{"version":3,"file":"use-disable-tabbing.cjs","sources":["../../../src/hooks/use-disable-tabbing.ts"],"sourcesContent":["import { createEffect } from 'solid-js'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\n\nconst recursivelyChangeTabIndex = (\n  node: Element | HTMLElement,\n  remove = true,\n) => {\n  if (remove) {\n    node.setAttribute('tabIndex', '-1')\n  } else {\n    node.removeAttribute('tabIndex')\n  }\n  for (const child of node.children) {\n    recursivelyChangeTabIndex(child, remove)\n  }\n}\n/**\n * @param isOpen A function that returns whether the devtools are open or not.\n * This is used to disable tabbing over the main devtools container while\n * the devtools are closed.\n */\nexport const useDisableTabbing = (isOpen: () => boolean) => {\n  createEffect(() => {\n    const el = document.getElementById(TANSTACK_DEVTOOLS)\n    if (!el) return\n    recursivelyChangeTabIndex(el, !isOpen())\n  })\n}\n"],"names":["createEffect","TANSTACK_DEVTOOLS"],"mappings":";;;;AAGA,MAAM,4BAA4B,CAChC,MACA,SAAS,SACN;AACH,MAAI,QAAQ;AACV,SAAK,aAAa,YAAY,IAAI;AAAA,EACpC,OAAO;AACL,SAAK,gBAAgB,UAAU;AAAA,EACjC;AACA,aAAW,SAAS,KAAK,UAAU;AACjC,8BAA0B,OAAO,MAAM;AAAA,EACzC;AACF;AAMO,MAAM,oBAAoB,CAAC,WAA0B;AAC1DA,UAAAA,aAAa,MAAM;AACjB,UAAM,KAAK,SAAS,eAAeC,yBAAiB;AACpD,QAAI,CAAC,GAAI;AACT,8BAA0B,IAAI,CAAC,QAAQ;AAAA,EACzC,CAAC;AACH;;"}

package/dist/cjs/index.cjs

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const constants = require("./constants.cjs");
 const core = require("./core.cjs");
-exports.TanStackRouterDevtoolsCore = core.TanStackRouterDevtoolsCore;
+exports.PLUGIN_CONTAINER_ID = constants.PLUGIN_CONTAINER_ID;
+exports.PLUGIN_TITLE_CONTAINER_ID = constants.PLUGIN_TITLE_CONTAINER_ID;
+exports.TanStackDevtoolsCore = core.TanStackDevtoolsCore;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/cjs/index.d.cts

@@ -1,3 +1,4 @@
-export { TanStackRouterDevtoolsCore } from './core.cjs';
-export type { DevtoolsOptions } from './core.cjs';
-export type { DevtoolsPlugin } from './context/devtools-context.cjs';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './constants.cjs';
+export { TanStackDevtoolsCore } from './core.cjs';
+export type { TanStackDevtoolsInit } from './core.cjs';
+export type { TanStackDevtoolsPlugin, TanStackDevtoolsConfig, } from './context/devtools-context.cjs';