@tanstack/devtools 0.0.0 → 0.1.1

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

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

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

@@ -1 +1,2 @@
 export declare const tryParseJson: <T>(json: string | null) => T | undefined;
+export declare const uppercaseFirstLetter: (value: string) => string;

package/dist/esm/utils/sanitize.js

@@ -6,7 +6,9 @@ const tryParseJson = (json) => {
     return void 0;
   }
 };
+const uppercaseFirstLetter = (value) => value.charAt(0).toUpperCase() + value.slice(1);
 export {
-  tryParseJson
+  tryParseJson,
+  uppercaseFirstLetter
 };
 //# sourceMappingURL=sanitize.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sanitize.js","sources":["../../../src/utils/sanitize.ts"],"sourcesContent":["export const tryParseJson = <T>(json: string | null): T | undefined => {\n  if (!json) return undefined\n  try {\n    return JSON.parse(json)\n  } catch (_e) {\n    return undefined\n  }\n}\n"],"names":[],"mappings":"AAAa,MAAA,eAAe,CAAI,SAAuC;AACjE,MAAA,CAAC,KAAa,QAAA;AACd,MAAA;AACK,WAAA,KAAK,MAAM,IAAI;AAAA,WACf,IAAI;AACJ,WAAA;AAAA,EAAA;AAEX;"}
+{"version":3,"file":"sanitize.js","sources":["../../../src/utils/sanitize.ts"],"sourcesContent":["export const tryParseJson = <T>(json: string | null): T | undefined => {\n  if (!json) return undefined\n  try {\n    return JSON.parse(json)\n  } catch (_e) {\n    return undefined\n  }\n}\n\nexport const uppercaseFirstLetter = (value: string) =>\n  value.charAt(0).toUpperCase() + value.slice(1)\n"],"names":[],"mappings":"AAAO,MAAM,eAAe,CAAI,SAAuC;AACrE,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,IAAI;AACX,WAAO;AAAA,EACT;AACF;AAEO,MAAM,uBAAuB,CAAC,UACnC,MAAM,OAAO,CAAC,EAAE,YAAA,IAAgB,MAAM,MAAM,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"storage.js","sources":["../../../src/utils/storage.ts"],"sourcesContent":["export const getStorageItem = (key: string) => localStorage.getItem(key)\nexport const setStorageItem = (key: string, value: string) => {\n  try {\n    localStorage.setItem(key, value)\n  } catch (_e) {\n    return\n  }\n}\n\nexport const TANSTACK_DEVTOOLS = 'tanstack_devtools'\nexport const TANSTACK_DEVTOOLS_STATE = 'tanstack_devtools_state'\nexport const TANSTACK_DEVTOOLS_SETTINGS = 'tanstack_devtools_settings'\n"],"names":[],"mappings":"AAAO,MAAM,iBAAiB,CAAC,QAAgB,aAAa,QAAQ,GAAG;AAC1D,MAAA,iBAAiB,CAAC,KAAa,UAAkB;AACxD,MAAA;AACW,iBAAA,QAAQ,KAAK,KAAK;AAAA,WACxB,IAAI;AACX;AAAA,EAAA;AAEJ;AAEO,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;AAChC,MAAM,6BAA6B;"}
+{"version":3,"file":"storage.js","sources":["../../../src/utils/storage.ts"],"sourcesContent":["export const getStorageItem = (key: string) => localStorage.getItem(key)\nexport const setStorageItem = (key: string, value: string) => {\n  try {\n    localStorage.setItem(key, value)\n  } catch (_e) {\n    return\n  }\n}\n\nexport const TANSTACK_DEVTOOLS = 'tanstack_devtools'\nexport const TANSTACK_DEVTOOLS_STATE = 'tanstack_devtools_state'\nexport const TANSTACK_DEVTOOLS_SETTINGS = 'tanstack_devtools_settings'\n"],"names":[],"mappings":"AAAO,MAAM,iBAAiB,CAAC,QAAgB,aAAa,QAAQ,GAAG;AAChE,MAAM,iBAAiB,CAAC,KAAa,UAAkB;AAC5D,MAAI;AACF,iBAAa,QAAQ,KAAK,KAAK;AAAA,EACjC,SAAS,IAAI;AACX;AAAA,EACF;AACF;AAEO,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;AAChC,MAAM,6BAA6B;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.0.0",
-  "description": "Headless UI for creating advanced custom devtools, autocomplete, and dropdown components.",
+  "version": "0.1.1",
+  "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
   "repository": {
@@ -15,12 +15,7 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "keywords": [
-    "devtools",
-    "autocomplete",
-    "dropdown",
-    "menu",
-    "headless-ui",
-    "nested"
+    "devtools"
   ],
   "type": "module",
   "types": "dist/esm/index.d.ts",
@@ -51,7 +46,10 @@
     "@solid-primitives/keyboard": "^1.2.8",
     "clsx": "^2.1.1",
     "goober": "^2.1.16",
-    "solid-js": "^1.9.5"
+    "solid-js": "^1.9.7"
+  },
+  "peerDependencies": {
+    "solid-js": ">=1.9.7"
   },
   "devDependencies": {
     "vite-plugin-solid": "^2.11.6"

package/src/components/checkbox.tsx

@@ -0,0 +1,43 @@
+import { createSignal } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+
+interface CheckboxProps {
+  label?: string
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  description?: string
+}
+
+export function Checkbox(props: CheckboxProps) {
+  const styles = useStyles()
+  const [isChecked, setIsChecked] = createSignal(props.checked || false)
+
+  const handleChange = (e: Event) => {
+    const checked = (e.target as HTMLInputElement).checked
+    setIsChecked(checked)
+    props.onChange?.(checked)
+  }
+
+  return (
+    <div class={styles().checkboxContainer}>
+      <label class={styles().checkboxWrapper}>
+        <input
+          type="checkbox"
+          checked={isChecked()}
+          class={styles().checkbox}
+          onInput={handleChange}
+        />
+        <div class={styles().checkboxLabelContainer}>
+          {props.label && (
+            <span class={styles().checkboxLabel}>{props.label}</span>
+          )}
+          {props.description && (
+            <span class={styles().checkboxDescription}>
+              {props.description}
+            </span>
+          )}
+        </div>
+      </label>
+    </div>
+  )
+}

package/src/components/content-panel.tsx

@@ -1,3 +1,4 @@
+import { useDevtoolsSettings } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js/jsx-runtime'
 
@@ -7,11 +8,12 @@ export const ContentPanel = (props: {
   handleDragStart?: (e: any) => void
 }) => {
   const styles = useStyles()
+  const { settings } = useDevtoolsSettings()
   return (
     <div ref={props.ref} class={styles().devtoolsPanel}>
       {props.handleDragStart ? (
         <div
-          class={styles().dragHandle}
+          class={styles().dragHandle(settings().panelLocation)}
           onMouseDown={props.handleDragStart}
         ></div>
       ) : null}

package/src/components/input.tsx

@@ -0,0 +1,42 @@
+import { createSignal } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+
+interface InputProps {
+  label?: string
+  type?: 'text' | 'number' | 'password' | 'email'
+  value?: string
+  placeholder?: string
+  onChange?: (value: string) => void
+  description?: string
+}
+
+export function Input(props: InputProps) {
+  const styles = useStyles()
+  const [val, setVal] = createSignal(props.value || '')
+
+  const handleChange = (e: Event) => {
+    const value = (e.target as HTMLInputElement).value
+    setVal((prev) => (prev !== value ? value : prev))
+    props.onChange?.(value)
+  }
+
+  return (
+    <div class={styles().inputContainer}>
+      <div class={styles().inputWrapper}>
+        {props.label && (
+          <label class={styles().inputLabel}>{props.label}</label>
+        )}
+        {props.description && (
+          <p class={styles().inputDescription}>{props.description}</p>
+        )}
+        <input
+          type={props.type || 'text'}
+          class={styles().input}
+          value={val()}
+          placeholder={props.placeholder}
+          onInput={handleChange}
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/main-panel.tsx

@@ -1,9 +1,8 @@
 import clsx from 'clsx'
-import { useHeight } from '../context/use-devtools-context'
+import { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { TANSTACK_DEVTOOLS } from '../utils/storage'
-import type { JSX } from 'solid-js/jsx-runtime'
-import type { Accessor } from 'solid-js'
+import type { Accessor, JSX } from 'solid-js'
 
 export const MainPanel = (props: {
   isOpen: Accessor<boolean>
@@ -12,6 +11,7 @@ export const MainPanel = (props: {
 }) => {
   const styles = useStyles()
   const { height } = useHeight()
+  const { settings } = useDevtoolsSettings()
   return (
     <div
       id={TANSTACK_DEVTOOLS}
@@ -19,7 +19,7 @@ export const MainPanel = (props: {
         height: height() + 'px',
       }}
       class={clsx(
-        styles().devtoolsPanelContainer,
+        styles().devtoolsPanelContainer(settings().panelLocation),
         styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),
         styles().devtoolsPanelContainerVisibility(props.isOpen()),
         styles().devtoolsPanelContainerResizing(props.isResizing),

package/src/components/select.tsx

@@ -0,0 +1,50 @@
+import { createSignal } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+
+interface SelectOption<T extends string | number> {
+  value: T
+  label: string
+}
+
+interface SelectProps<T extends string | number> {
+  label?: string
+  options: Array<SelectOption<T>>
+  value?: T
+  onChange?: (value: T) => void
+  description?: string
+}
+
+export function Select<T extends string | number>(props: SelectProps<T>) {
+  const styles = useStyles()
+  const [selected, setSelected] = createSignal(
+    props.value || props.options[0]?.value,
+  )
+
+  const handleChange = (e: Event) => {
+    const value = (e.target as HTMLSelectElement).value as T
+    setSelected((prev) => (prev !== value ? value : prev))
+    props.onChange?.(value)
+  }
+
+  return (
+    <div class={styles().selectContainer}>
+      <div class={styles().selectWrapper}>
+        {props.label && (
+          <label class={styles().selectLabel}>{props.label}</label>
+        )}
+        {props.description && (
+          <p class={styles().selectDescription}>{props.description}</p>
+        )}
+        <select
+          class={styles().select}
+          value={selected()}
+          onInput={handleChange}
+        >
+          {props.options.map((opt) => (
+            <option value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      </div>
+    </div>
+  )
+}

package/src/components/trigger.tsx

@@ -18,7 +18,7 @@ export const Trigger = ({
     return clsx(
       styles().mainCloseBtn,
       styles().mainCloseBtnPosition(settings().position),
-      styles().mainCloseBtnAnimation(isOpen()),
+      styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover),
     )
   })
   return (

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const PLUGIN_CONTAINER_ID = 'plugin-container'
+export const PLUGIN_TITLE_CONTAINER_ID = 'plugin-title-container'

package/src/context/devtools-context.tsx

@@ -9,15 +9,56 @@ import {
 } from '../utils/storage'
 import { initialState } from './devtools-store'
 import type { DevtoolsStore } from './devtools-store'
-import type { Setter } from 'solid-js'
-import type { JSX } from 'solid-js/jsx-runtime'
+import type { JSX, Setter } from 'solid-js'
 
-export interface DevtoolsPlugin {
+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 const DevtoolsContext = createContext<{
   store: DevtoolsStore
   setStore: Setter<DevtoolsStore>
@@ -25,8 +66,8 @@ export const DevtoolsContext = createContext<{
 
 interface ContextProps {
   children: JSX.Element
-  plugins?: Array<DevtoolsPlugin>
-  config?: DevtoolsSettings
+  plugins?: Array<TanStackDevtoolsPlugin>
+  config?: TanStackDevtoolsConfig
 }
 
 const getSettings = () => {
@@ -37,16 +78,36 @@ const getSettings = () => {
   }
 }
 
+const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {
+  // if set by user, return the plugin id
+  if (plugin.id) {
+    return plugin.id
+  }
+  if (typeof plugin.name === 'string') {
+    // if name is a string, use it to generate an id
+    return plugin.name.toLowerCase().replace(' ', '-')
+  }
+  // Name is JSX? return the index as a string
+  return index.toString()
+}
+
 const getExistingStateFromStorage = (
-  config?: DevtoolsSettings,
-  plugins?: Array<DevtoolsPlugin>,
+  config?: TanStackDevtoolsConfig,
+  plugins?: Array<TanStackDevtoolsPlugin>,
 ) => {
   const existingState = getStorageItem(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: {
       ...initialState.state,
       ...(existingState ? JSON.parse(existingState) : {}),
@@ -60,7 +121,7 @@ const getExistingStateFromStorage = (
   return state
 }
 
-export type DevtoolsSettings = DevtoolsStore['settings']
+export type TanStackDevtoolsConfig = DevtoolsStore['settings']
 
 export const DevtoolsProvider = (props: ContextProps) => {
   const [store, setStore] = createStore(

package/src/context/devtools-store.ts

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

package/src/context/use-devtools-context.ts

@@ -1,6 +1,5 @@
 import { createMemo, useContext } from 'solid-js'
 import { DevtoolsContext } from './devtools-context.jsx'
-import type { DevtoolsPlugin } from './devtools-context.jsx'
 /* import type { DevtoolsPlugin } from './devtools-context' */
 import type { DevtoolsStore } from './devtools-store.js'
 
@@ -24,12 +23,12 @@ export const usePlugins = () => {
   const plugins = createMemo(() => store.plugins)
   const activePlugin = createMemo(() => store.state.activePlugin)
 
-  const setActivePlugin = (plugin: DevtoolsPlugin) => {
+  const setActivePlugin = (pluginId: string) => {
     setStore((prev) => ({
       ...prev,
       state: {
         ...prev.state,
-        activePlugin: plugin,
+        activePlugin: pluginId,
       },
     }))
   }

package/src/core.tsx

@@ -3,29 +3,53 @@ import { Portal, render } from 'solid-js/web'
 import { DevtoolsProvider } from './context/devtools-context'
 import { initialState } from './context/devtools-store'
 import type {
-  DevtoolsPlugin,
-  DevtoolsSettings,
+  TanStackDevtoolsConfig,
+  TanStackDevtoolsPlugin,
 } from './context/devtools-context'
 
-export interface DevtoolsOptions {
-  options?: Partial<DevtoolsSettings>
-  plugins?: Array<DevtoolsPlugin>
+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>
 }
 
-class TanStackDevtoolsCore {
-  #options: DevtoolsSettings = {
+export class TanStackDevtoolsCore {
+  #config: TanStackDevtoolsConfig = {
     ...initialState.settings,
   }
-  #plugins: Array<DevtoolsPlugin> = []
+  #plugins: Array<TanStackDevtoolsPlugin> = []
   #isMounted = false
   #dispose?: () => void
   #Component: any
 
-  constructor(config: DevtoolsOptions) {
-    this.#plugins = config.plugins || []
-    this.#options = {
-      ...this.#options,
-      ...config.options,
+  constructor(init: TanStackDevtoolsInit) {
+    this.#plugins = init.plugins || []
+    this.#config = {
+      ...this.#config,
+      ...init.config,
     }
   }
 
@@ -40,7 +64,7 @@ class TanStackDevtoolsCore {
       const Devtools = this.#Component
 
       return (
-        <DevtoolsProvider plugins={this.#plugins} config={this.#options}>
+        <DevtoolsProvider plugins={this.#plugins} config={this.#config}>
           <Portal mount={mountTo}>
             <Devtools />
           </Portal>
@@ -60,12 +84,10 @@ class TanStackDevtoolsCore {
     this.#isMounted = false
   }
 
-  setOptions(options: Partial<DevtoolsOptions>) {
-    this.#options = {
-      ...this.#options,
-      ...options,
+  setConfig(config: Partial<TanStackDevtoolsInit>) {
+    this.#config = {
+      ...this.#config,
+      ...config,
     }
   }
 }
-
-export { TanStackDevtoolsCore as TanStackRouterDevtoolsCore }

package/src/devtools.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal } from 'solid-js'
+import { Show, createEffect, createSignal } from 'solid-js'
 import { createShortcut } from '@solid-primitives/keyboard'
 import {
   useDevtoolsSettings,
@@ -28,24 +28,27 @@ export default function DevTools() {
     setIsOpen(!open)
     setPersistOpen(!open)
   }
-
+  createEffect(() => {})
   // Used to resize the panel
   const handleDragStart = (
     panelElement: HTMLDivElement | undefined,
     startEvent: MouseEvent,
   ) => {
     if (startEvent.button !== 0) return // Only allow left click for drag
-
+    if (!panelElement) return
     setIsResizing(true)
 
     const dragInfo = {
-      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
+      originalHeight: panelElement.getBoundingClientRect().height,
       pageY: startEvent.pageY,
     }
 
     const run = (moveEvent: MouseEvent) => {
       const delta = dragInfo.pageY - moveEvent.pageY
-      const newHeight = dragInfo.originalHeight + delta
+      const newHeight =
+        settings().panelLocation === 'bottom'
+          ? dragInfo.originalHeight + delta
+          : dragInfo.originalHeight - delta
 
       setHeight(newHeight)
 
@@ -72,7 +75,8 @@ export default function DevTools() {
       const previousValue = rootEl()?.parentElement?.style.paddingBottom
 
       const run = () => {
-        const containerHeight = panelRef!.getBoundingClientRect().height
+        if (!panelRef) return
+        const containerHeight = panelRef.getBoundingClientRect().height
         if (rootEl()?.parentElement) {
           setRootEl((prev) => {
             if (prev?.parentElement) {
@@ -126,21 +130,33 @@ export default function DevTools() {
       el?.style.setProperty('--tsrd-font-size', fontSize)
     }
   })
-  createShortcut(settings().openHotkey, () => {
-    toggleOpen()
+  createEffect(() => {
+    createShortcut(settings().openHotkey, () => {
+      toggleOpen()
+    })
   })
+
+  createEffect(() => {})
   return (
     <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>
-      <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />
-      <MainPanel isResizing={isResizing} isOpen={isOpen}>
-        <ContentPanel
-          ref={(ref) => (panelRef = ref)}
-          handleDragStart={(e) => handleDragStart(panelRef, e)}
-        >
-          <Tabs toggleOpen={toggleOpen} />
-          <TabContent />
-        </ContentPanel>
-      </MainPanel>
+      <Show
+        when={
+          settings().requireUrlFlag
+            ? window.location.search.includes(settings().urlFlag)
+            : true
+        }
+      >
+        <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />
+        <MainPanel isResizing={isResizing} isOpen={isOpen}>
+          <ContentPanel
+            ref={(ref) => (panelRef = ref)}
+            handleDragStart={(e) => handleDragStart(panelRef, e)}
+          >
+            <Tabs toggleOpen={toggleOpen} />
+            <TabContent />
+          </ContentPanel>
+        </MainPanel>
+      </Show>
     </div>
   )
 }