@tanstack/devtools 0.6.24 → 0.8.0

package/dist/devtools/{OBIHU6L6.js → RHZRAMXS.js}

@@ -1,12 +1,12 @@
-import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/XF4JFOLU.js';
+import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter, MAX_ACTIVE_PLUGINS } from '../chunk/G64KXXVZ.js';
 import { createComponent, Portal, ssr, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
-import { createContext, createSignal, createEffect, Show, createMemo, For, useContext, onCleanup, onMount } from 'solid-js';
+import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
 import { createShortcut, useKeyDownList } from '@solid-primitives/keyboard';
-import { ThemeContextProvider, MainPanel as MainPanel$1, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Input, Select, Button, ChevronDownIcon, CloseIcon, SearchIcon, SettingsIcon, PackageIcon, ExternalLinkIcon, CheckCircleIcon, XCircleIcon } from '@tanstack/devtools-ui';
+import { ThemeContextProvider, MainPanel as MainPanel$1, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Select, Input, Button, ChevronDownIcon, CloseIcon, SearchIcon, SettingsIcon, PackageIcon, ExternalLinkIcon, CheckCircleIcon, XCircleIcon } from '@tanstack/devtools-ui';
+import { devtoolsEventClient } from '@tanstack/devtools-client';
 import clsx3 from 'clsx';
 import * as goober from 'goober';
 import { PiP, X, List, PageSearch, Cogs, SettingsCog, Link, Keyboard, GeoTag, SocialBubble } from '@tanstack/devtools-ui/icons';
-import { devtoolsEventClient } from '@tanstack/devtools-client';
 import { createStore } from 'solid-js/store';
 import { createElementSize } from '@solid-primitives/resize-observer';
 import { createEventListener } from '@solid-primitives/event-listener';
@@ -94,7 +94,7 @@ var usePlugins = () => {
     setStore((prev) => {
       const isActive = prev.state.activePlugins.includes(pluginId);
       const updatedPlugins = isActive ? prev.state.activePlugins.filter((id) => id !== pluginId) : [...prev.state.activePlugins, pluginId];
-      if (updatedPlugins.length > 3) return prev;
+      if (updatedPlugins.length > MAX_ACTIVE_PLUGINS) return prev;
       return {
         ...prev,
         state: {
@@ -1798,29 +1798,47 @@ function useStyles() {
 var tanstack_logo_default = "data:image/png;base64,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";
 
 // src/components/trigger.tsx
-var _tmpl$ = ['<button type="button" aria-label="Open TanStack Devtools"', "><img", ' alt="TanStack Devtools"></button>'];
-var Trigger = ({
-  isOpen,
-  setIsOpen,
-  image = tanstack_logo_default
-}) => {
+var _tmpl$ = "<div></div>";
+var _tmpl$2 = ['<button type="button" aria-label="Open TanStack Devtools"', ">", "</button>"];
+var _tmpl$3 = ["<img", ' alt="TanStack Devtools">'];
+var Trigger = (props) => {
   const {
     settings
   } = useDevtoolsSettings();
+  const [containerRef, setContainerRef] = createSignal();
   const styles = useStyles();
   const buttonStyle = createMemo(() => {
-    return clsx3(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover));
+    return clsx3(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(props.isOpen(), settings().hideUntilHover));
+  });
+  createEffect(() => {
+    const triggerComponent = settings().customTrigger;
+    const el = containerRef();
+    if (triggerComponent && el) {
+      triggerComponent(el, {
+        theme: settings().theme
+      });
+    }
   });
   return createComponent(Show, {
     get when() {
       return !settings().triggerHidden;
     },
     get children() {
-      return ssr(_tmpl$, ssrAttribute("class", escape(buttonStyle(), true), false), ssrAttribute("src", escape(image, true) || escape(tanstack_logo_default, true), false));
+      return ssr(_tmpl$2, ssrAttribute("class", escape(buttonStyle(), true), false), escape(createComponent(Show, {
+        get when() {
+          return settings().customTrigger;
+        },
+        get fallback() {
+          return ssr(_tmpl$3, ssrAttribute("src", escape(tanstack_logo_default, true), false));
+        },
+        get children() {
+          return ssr(_tmpl$);
+        }
+      })));
     }
   });
 };
-var _tmpl$2 = ["<div", ' style="', '"', ">", "</div>"];
+var _tmpl$4 = ["<div", ' style="', '"', ">", "</div>"];
 var MainPanel = (props) => {
   const styles = useStyles();
   const {
@@ -1830,27 +1848,27 @@ var MainPanel = (props) => {
     settings
   } = useDevtoolsSettings();
   const pip = usePiPWindow();
-  return ssr(_tmpl$2, ssrAttribute("id", escape(TANSTACK_DEVTOOLS, true), false), "height:" + (pip().pipWindow ? "100vh" : escape(height(), true) + "px"), ssrAttribute("class", escape(clsx3(styles().devtoolsPanelContainer(settings().panelLocation, Boolean(pip().pipWindow)), styles().devtoolsPanelContainerAnimation(props.isOpen(), height(), settings().panelLocation), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing)), true), false), escape(createComponent(DrawClientProvider, {
+  return ssr(_tmpl$4, ssrAttribute("id", escape(TANSTACK_DEVTOOLS, true), false), "height:" + (pip().pipWindow ? "100vh" : escape(height(), true) + "px"), ssrAttribute("class", escape(clsx3(styles().devtoolsPanelContainer(settings().panelLocation, Boolean(pip().pipWindow)), styles().devtoolsPanelContainerAnimation(props.isOpen(), height(), settings().panelLocation), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing)), true), false), escape(createComponent(DrawClientProvider, {
     animationMs: 400,
     get children() {
       return props.children;
     }
   })));
 };
-var _tmpl$3 = ["<div", ">", "", "</div>"];
+var _tmpl$5 = ["<div", ">", "", "</div>"];
 var _tmpl$22 = ["<div", "></div>"];
 var ContentPanel = (props) => {
   const styles = useStyles();
   const {
     settings
   } = useDevtoolsSettings();
-  return ssr(_tmpl$3, ssrAttribute("class", escape(styles().devtoolsPanel, true), false), props.handleDragStart ? ssr(_tmpl$22, ssrAttribute("class", escape(styles().dragHandle(settings().panelLocation), true), false)) : escape(null), escape(props.children));
+  return ssr(_tmpl$5, ssrAttribute("class", escape(styles().devtoolsPanel, true), false), props.handleDragStart ? ssr(_tmpl$22, ssrAttribute("class", escape(styles().dragHandle(settings().panelLocation), true), false)) : escape(null), escape(props.children));
 };
-var _tmpl$4 = ["<div", ">", "", "", "", "", "</div>"];
+var _tmpl$6 = ["<div", ">", "", "", "", "</div>"];
 var _tmpl$23 = ["<div", ">", "</div>"];
 var _tmpl$32 = ["<div", ">", "", "</div>"];
 var _tmpl$42 = ["<div", "><div", ">", "</div>", "Final shortcut is: ", "</div>"];
-var _tmpl$5 = ["<div", "><div", ">", "", "</div></div>"];
+var _tmpl$52 = ["<div", "><div", ">", "", "</div></div>"];
 var SettingsTab = () => {
   const {
     setSettings,
@@ -1886,7 +1904,7 @@ var SettingsTab = () => {
             }
           }), createComponent(SectionDescription, {
             children: "Configure general behavior of the devtools panel."
-          }), ssr(_tmpl$4, ssrAttribute("class", escape(styles().settingsGroup, true), false), escape(createComponent(Checkbox, {
+          }), ssr(_tmpl$6, ssrAttribute("class", escape(styles().settingsGroup, true), false), escape(createComponent(Checkbox, {
             label: "Default open",
             description: "Automatically open the devtools panel when the page loads",
             onChange: () => setSettings({
@@ -1913,16 +1931,6 @@ var SettingsTab = () => {
             get checked() {
               return settings().triggerHidden;
             }
-          })), escape(createComponent(Input, {
-            label: "Trigger Image",
-            description: "Specify the URL of the image to use for the trigger",
-            get value() {
-              return settings().triggerImage;
-            },
-            placeholder: "Default TanStack Logo",
-            onChange: (value) => setSettings({
-              triggerImage: value
-            })
           })), escape(createComponent(Select, {
             label: "Theme",
             description: "Choose the theme for the devtools panel",
@@ -2073,7 +2081,7 @@ var SettingsTab = () => {
             }
           }), createComponent(SectionDescription, {
             children: "Adjust the position of the trigger button and devtools panel."
-          }), ssr(_tmpl$5, ssrAttribute("class", escape(styles().settingsGroup, true), false), ssrAttribute("class", escape(styles().settingRow, true), false), escape(createComponent(Select, {
+          }), ssr(_tmpl$52, ssrAttribute("class", escape(styles().settingsGroup, true), false), ssrAttribute("class", escape(styles().settingRow, true), false), escape(createComponent(Select, {
             label: "Trigger Position",
             options: [{
               label: "Bottom Right",
@@ -2198,13 +2206,13 @@ var getBadgeText = (card) => {
 };
 
 // src/tabs/marketplace/plugin-card.tsx
-var _tmpl$6 = ["<div", ">New</div>"];
+var _tmpl$7 = ["<div", ">New</div>"];
 var _tmpl$24 = ["<img", ">"];
 var _tmpl$33 = ["<span", ">\u2713 v", " \u2022 Min v", "</span>"];
 var _tmpl$43 = ["<p", ">", "</p>"];
-var _tmpl$52 = ["<a", ' target="_blank" rel="noopener noreferrer"', ">Documentation ", "</a>"];
+var _tmpl$53 = ["<a", ' target="_blank" rel="noopener noreferrer"', ">Documentation ", "</a>"];
 var _tmpl$62 = ["<div", ">", "</div>"];
-var _tmpl$7 = ['<div class="', '" style="', '">', "<span", ">", '</span><div class="', '">', "</div><div", "><h3", ">", "</h3><p", ">", "</p><p", ">", "</p>", "", "", "</div>", "</div>"];
+var _tmpl$72 = ['<div class="', '" style="', '">', "<span", ">", '</span><div class="', '">', "</div><div", "><h3", ">", "</h3><p", ">", "</p><p", ">", "</p>", "", "", "</div>", "</div>"];
 var _tmpl$8 = ["<span", ">\u26A0\uFE0F v", " \u2022 Requires v", "+</span>"];
 var _tmpl$9 = ["<span", ">", "</span>"];
 var _tmpl$0 = ["<div", "></div>"];
@@ -2216,12 +2224,12 @@ var PluginCardComponent = (props) => {
   const {
     card
   } = props;
-  return ssr(_tmpl$7, `${escape(styles().pluginMarketplaceCard, true) || ""} ${!card.isCurrentFramework && card.actionType !== "already-installed" ? escape(escape(styles().pluginMarketplaceCardDisabled, true), true) : ""} ${!!card.metadata?.featured && card.actionType !== "already-installed" ? escape(escape(styles().pluginMarketplaceCardFeatured, true), true) : ""} ${card.actionType === "already-installed" ? escape(escape(styles().pluginMarketplaceCardActive, true), true) : ""}`, "position:relative", escape(createComponent(Show, {
+  return ssr(_tmpl$72, `${escape(styles().pluginMarketplaceCard, true) || ""} ${!card.isCurrentFramework && card.actionType !== "already-installed" ? escape(escape(styles().pluginMarketplaceCardDisabled, true), true) : ""} ${!!card.metadata?.featured && card.actionType !== "already-installed" ? escape(escape(styles().pluginMarketplaceCardFeatured, true), true) : ""} ${card.actionType === "already-installed" ? escape(escape(styles().pluginMarketplaceCardActive, true), true) : ""}`, "position:relative", escape(createComponent(Show, {
     get when() {
       return card.metadata?.isNew;
     },
     get children() {
-      return ssr(_tmpl$6, ssrAttribute("class", escape(styles().pluginMarketplaceNewBanner, true), false));
+      return ssr(_tmpl$7, ssrAttribute("class", escape(styles().pluginMarketplaceNewBanner, true), false));
     }
   })), ssrAttribute("class", escape(getBadgeClass(card, styles), true), false), escape(getBadgeText(card)), `${escape(styles().pluginMarketplaceCardIcon, true) || ""} ${!!card.metadata?.logoUrl ? "custom-logo" : ""}`, escape(createComponent(Show, {
     get when() {
@@ -2255,7 +2263,7 @@ var PluginCardComponent = (props) => {
       return card.metadata?.docsUrl;
     },
     get children() {
-      return ssr(_tmpl$52, ssrAttribute("href", escape(card.metadata?.docsUrl, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceCardDocsLink, true), false), escape(createComponent(ExternalLinkIcon, {})));
+      return ssr(_tmpl$53, ssrAttribute("href", escape(card.metadata?.docsUrl, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceCardDocsLink, true), false), escape(createComponent(ExternalLinkIcon, {})));
     }
   })), escape(createComponent(Show, {
     get when() {
@@ -2322,12 +2330,12 @@ var _tmpl$12 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill
 var _tmpl$25 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>';
 var _tmpl$34 = ["<div", "><div", "><h4", "><span", ">", "</span>Want to be featured here?</h4><p", `>If you've built a plugin for TanStack Devtools and would like to showcase it in the featured section, we'd love to hear from you! Reach out to us to discuss partnership opportunities.</p><a href="mailto:partners+devtools@tanstack.com?subject=Featured%20Plugin%20Partnership%20Inquiry"`, "><span", ">", "</span>Contact Us</a></div></div>"];
 var _tmpl$44 = ["<div", ">", "</div>"];
-var _tmpl$53 = ["<div", "><div", "><div", '><div class="', '">', "</div><h3", ">", "</h3></div></div>", "</div>"];
+var _tmpl$54 = ["<div", "><div", "><div", '><div class="', '">', "</div><h3", ">", "</h3></div></div>", "</div>"];
 var StarIcon = () => ssr(_tmpl$12);
 var MailIcon = () => ssr(_tmpl$25);
 var PluginSectionComponent = (props) => {
   const styles = useStyles();
-  return ssr(_tmpl$53, ssrAttribute("class", escape(styles().pluginMarketplaceSection, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeaderLeft, true), false), `${escape(styles().pluginMarketplaceSectionChevron, true) || ""} ${props.isCollapsed() ? escape(escape(styles().pluginMarketplaceSectionChevronCollapsed, true), true) : ""}`, escape(createComponent(ChevronDownIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSectionTitle, true), false), escape(props.section.displayName), escape(createComponent(Show, {
+  return ssr(_tmpl$54, ssrAttribute("class", escape(styles().pluginMarketplaceSection, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSectionHeaderLeft, true), false), `${escape(styles().pluginMarketplaceSectionChevron, true) || ""} ${props.isCollapsed() ? escape(escape(styles().pluginMarketplaceSectionChevronCollapsed, true), true) : ""}`, escape(createComponent(ChevronDownIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSectionTitle, true), false), escape(props.section.displayName), escape(createComponent(Show, {
     get when() {
       return !props.isCollapsed();
     },
@@ -3167,9 +3175,9 @@ var _tmpl$18 = ["<div", ' style="', '"><div', ' style="', '">', " Preview</div>"
 var _tmpl$29 = ["<img", ' alt="Preview"', ">"];
 var _tmpl$36 = ["<div", ' style="', '">No Image</div>'];
 var _tmpl$45 = ["<div", ">", "</div>"];
-var _tmpl$54 = ["<div>", "", "</div>"];
+var _tmpl$55 = ["<div>", "", "</div>"];
 var _tmpl$63 = ["<div", "><strong>Missing tags for ", ":</strong><ul", ">", "</ul></div>"];
-var _tmpl$72 = ["<li", ">", "</li>"];
+var _tmpl$73 = ["<li", ">", "</li>"];
 var SOCIALS = [
   {
     network: "Facebook",
@@ -3345,7 +3353,7 @@ var SeoTab = () => {
             },
             children: (report, i) => {
               const social = SOCIALS[i()];
-              return ssr(_tmpl$54, escape(createComponent(SocialPreview, {
+              return ssr(_tmpl$55, escape(createComponent(SocialPreview, {
                 get meta() {
                   return report.found;
                 },
@@ -3359,7 +3367,7 @@ var SeoTab = () => {
                 get each() {
                   return report.missing;
                 },
-                children: (tag) => ssr(_tmpl$72, ssrAttribute("class", escape(styles().seoMissingTag, true), false), escape(tag))
+                children: (tag) => ssr(_tmpl$73, ssrAttribute("class", escape(styles().seoMissingTag, true), false), escape(tag))
               })))) : escape(null));
             }
           })))];
@@ -3577,9 +3585,27 @@ function DevTools() {
       return;
     }
     const open = isOpen();
-    setIsOpen(!open);
-    setPersistOpen(!open);
+    const newState = !open;
+    setIsOpen(newState);
+    setPersistOpen(newState);
+    devtoolsEventClient.emit("trigger-toggled", {
+      isOpen: newState
+    });
   };
+  createEffect(() => {
+    const unsubscribe = devtoolsEventClient.on("trigger-toggled", (event) => {
+      if (pip().pipWindow) {
+        return;
+      }
+      const payload = event.payload;
+      const shouldBeOpen = payload.isOpen;
+      if (shouldBeOpen !== isOpen()) {
+        setIsOpen(shouldBeOpen);
+        setPersistOpen(shouldBeOpen);
+      }
+    });
+    onCleanup(unsubscribe);
+  });
   const handleDragStart = (panelElement, startEvent) => {
     if (startEvent.button !== 0) return;
     return;
@@ -3659,10 +3685,7 @@ function DevTools() {
             get children() {
               return [createComponent(Trigger, {
                 isOpen,
-                setIsOpen: toggleOpen,
-                get image() {
-                  return settings().triggerImage;
-                }
+                setIsOpen: toggleOpen
               }), createComponent(MainPanel, {
                 isResizing,
                 isOpen,

package/dist/index.d.ts

@@ -26,6 +26,9 @@ type TabName = (typeof tabs)[number]['id'];
 type ModifierKey = 'Alt' | 'Control' | 'Meta' | 'Shift';
 type KeyboardKey = ModifierKey | (string & {});
 type TriggerPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right';
+type TriggerProps = {
+    theme: 'light' | 'dark';
+};
 type DevtoolsStore = {
     settings: {
         /**
@@ -68,15 +71,16 @@ type DevtoolsStore = {
          * @default "dark"
          */
         theme: 'light' | 'dark';
-        /**
-         * The image used for the dev tools trigger
-         * @default TanStackLogo
-         */
-        triggerImage: string;
         /**
          * Whether the trigger should be completely hidden or not (you can still open with the hotkey)
          */
         triggerHidden?: boolean;
+        /**
+         * An optional custom function to render the dev tools trigger component.
+         * If provided, it replaces the default trigger button.
+         * @default undefined
+         */
+        customTrigger?: (el: HTMLElement, props: TriggerProps) => void;
     };
     state: {
         activeTab: TabName;
@@ -120,6 +124,12 @@ interface TanStackDevtoolsPlugin {
      * If not provided, it will be generated based on the name.
      */
     id?: string;
+    /**
+     * Whether the plugin should be open by default when there are no active plugins.
+     * If true, this plugin will be added to activePlugins on initial load when activePlugins is empty.
+     * @default false
+     */
+    defaultOpen?: boolean;
     /**
      * 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.

package/dist/index.js

@@ -1,5 +1,5 @@
-import { initialState, DevtoolsProvider, PiPProvider } from './chunk/XF4JFOLU.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XF4JFOLU.js';
+import { initialState, DevtoolsProvider, PiPProvider } from './chunk/G64KXXVZ.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/G64KXXVZ.js';
 import { render, createComponent, Portal } from 'solid-js/web';
 import { lazy } from 'solid-js';
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
@@ -30,7 +30,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/UUNAZSBD.js'));
+      this.#Component = lazy(() => import('./devtools/MYTOQ6G4.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/dist/server.js

@@ -1,5 +1,5 @@
-import { initialState } from './chunk/XF4JFOLU.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XF4JFOLU.js';
+import { initialState } from './chunk/G64KXXVZ.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/G64KXXVZ.js';
 import 'solid-js/web';
 import 'solid-js';
 import '@tanstack/devtools-event-bus/client';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.6.24",
+  "version": "0.8.0",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -55,7 +55,7 @@
     "clsx": "^2.1.1",
     "goober": "^2.1.16",
     "solid-js": "^1.9.9",
-    "@tanstack/devtools-client": "0.0.3",
+    "@tanstack/devtools-client": "0.0.4",
     "@tanstack/devtools-event-bus": "0.3.3",
     "@tanstack/devtools-ui": "0.4.4"
   },

package/src/components/trigger.tsx

@@ -1,37 +1,49 @@
-import { Show, createMemo } from 'solid-js'
+import { Show, createEffect, createMemo, createSignal } from 'solid-js'
 import clsx from 'clsx'
 import { useDevtoolsSettings } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import TanStackLogo from './tanstack-logo.png'
 import type { Accessor } from 'solid-js'
 
-export const Trigger = ({
-  isOpen,
-  setIsOpen,
-  image = TanStackLogo,
-}: {
+export const Trigger = (props: {
   isOpen: Accessor<boolean>
   setIsOpen: (isOpen: boolean) => void
-  image: string
 }) => {
   const { settings } = useDevtoolsSettings()
+  const [containerRef, setContainerRef] = createSignal<HTMLElement>()
   const styles = useStyles()
   const buttonStyle = createMemo(() => {
     return clsx(
       styles().mainCloseBtn,
       styles().mainCloseBtnPosition(settings().position),
-      styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover),
+      styles().mainCloseBtnAnimation(props.isOpen(), settings().hideUntilHover),
     )
   })
+
+  createEffect(() => {
+    const triggerComponent = settings().customTrigger
+    const el = containerRef()
+    if (triggerComponent && el) {
+      triggerComponent(el, {
+        theme: settings().theme,
+      })
+    }
+  })
+
   return (
     <Show when={!settings().triggerHidden}>
       <button
         type="button"
         aria-label="Open TanStack Devtools"
         class={buttonStyle()}
-        onClick={() => setIsOpen(!isOpen())}
+        onClick={() => props.setIsOpen(!props.isOpen())}
       >
-        <img src={image || TanStackLogo} alt="TanStack Devtools" />
+        <Show
+          when={settings().customTrigger}
+          fallback={<img src={TanStackLogo} alt="TanStack Devtools" />}
+        >
+          <div ref={setContainerRef} />
+        </Show>
       </button>
     </Show>
   )