@tanstack/devtools 0.6.18 → 0.6.20

package/dist/chunk/{SFOE7G6Y.js → XFQ6P775.js}

@@ -63,7 +63,8 @@ var initialState = {
     requireUrlFlag: false,
     urlFlag: "tanstack-devtools",
     theme: typeof window !== "undefined" && typeof window.matchMedia !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
-    triggerImage: ""
+    triggerImage: "",
+    triggerHidden: false
   },
   state: {
     activeTab: "plugins",
@@ -201,7 +202,7 @@ var generatePluginId = (plugin, index) => {
 function getStateFromLocalStorage(plugins) {
   const existingStateString = getStorageItem(TANSTACK_DEVTOOLS_STATE);
   const existingState = tryParseJson(existingStateString);
-  const pluginIds = [];
+  const pluginIds = plugins?.map((plugin, i) => generatePluginId(plugin, i)) || [];
   if (existingState?.activePlugins) {
     const originalLength = existingState.activePlugins.length;
     existingState.activePlugins = existingState.activePlugins.filter((id) => pluginIds.includes(id));
@@ -212,7 +213,7 @@ function getStateFromLocalStorage(plugins) {
   return existingState;
 }
 var getExistingStateFromStorage = (config, plugins) => {
-  const existingState = getStateFromLocalStorage();
+  const existingState = getStateFromLocalStorage(plugins);
   const settings = getSettings();
   const state = {
     ...initialState,

package/dist/dev.js

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

package/dist/devtools/{LMV5GWDT.js → 6XAY2RKM.js}

@@ -1,4 +1,4 @@
-import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/SFOE7G6Y.js';
+import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/XFQ6P775.js';
 import { delegateEvents, createComponent, Portal, template, use, setAttribute, insert, memo, effect, className, addEventListener } from 'solid-js/web';
 import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
 import { createShortcut } from '@solid-primitives/keyboard';
@@ -476,8 +476,8 @@ var stylesFactory = (theme) => {
       padding: 0;
       margin: 0 auto;
       background: ${t(colors.white, colors.darkGray[700])};
-      border-radius: 12px;
-      box-shadow: 0 2px 16px ${t("rgba(0, 0, 0, 0.04)", "rgba(0, 0, 0, 0.08)")};
+      border-radius: 8px;
+      box-shadow: none;
       overflow-y: auto;
       height: 100%;
       display: flex;
@@ -489,16 +489,16 @@ var stylesFactory = (theme) => {
     seoTabTitle: css2`
       font-size: 1.25rem;
       font-weight: 600;
-      color: ${t(colors.purple[500], colors.purple[400])};
+      color: ${t(colors.gray[900], colors.gray[100])};
       margin: 0;
       padding: 1rem 1.5rem 0.5rem 1.5rem;
       text-align: left;
-      border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
     `,
     seoTabSection: css2`
       padding: 1.5rem;
-      background: ${t(colors.gray[100], colors.gray[800])};
-      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      background: ${t(colors.gray[50], colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
@@ -517,12 +517,12 @@ var stylesFactory = (theme) => {
       padding-bottom: 0.5rem;
     `,
     seoPreviewCard: css2`
-      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
       border-radius: 8px;
       padding: 12px 10px;
       background: ${t(colors.white, colors.darkGray[900])};
       margin-bottom: 0;
-      box-shadow: 0 1px 4px ${t("rgba(0,0,0,0.02)", "rgba(0,0,0,0.04)")};
+      box-shadow: 0 1px 3px ${t("rgba(0,0,0,0.05)", "rgba(0,0,0,0.1)")};
       display: flex;
       flex-direction: column;
       align-items: flex-start;
@@ -532,10 +532,10 @@ var stylesFactory = (theme) => {
       gap: 4px;
     `,
     seoPreviewHeader: css2`
-      font-size: 1rem;
-      font-weight: 500;
-      margin-bottom: 6px;
-      color: ${t(colors.purple[500], colors.purple[400])};
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-bottom: 0;
+      color: ${t(colors.gray[700], colors.gray[300])};
     `,
     seoPreviewImage: css2`
       max-width: 100%;
@@ -543,28 +543,29 @@ var stylesFactory = (theme) => {
       margin-bottom: 6px;
       box-shadow: 0 1px 2px ${t("rgba(0,0,0,0.03)", "rgba(0,0,0,0.06)")};
       height: 160px;
+      object-fit: cover;
     `,
     seoPreviewTitle: css2`
-      font-size: 1rem;
+      font-size: 0.9rem;
       font-weight: 600;
-      margin-bottom: 2px;
+      margin-bottom: 4px;
       color: ${t(colors.gray[900], colors.gray[100])};
     `,
     seoPreviewDesc: css2`
-      color: ${t(colors.gray[700], colors.gray[300])};
-      margin-bottom: 2px;
-      font-size: 0.95rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin-bottom: 4px;
+      font-size: 0.8rem;
     `,
     seoPreviewUrl: css2`
       color: ${t(colors.gray[500], colors.gray[500])};
-      font-size: 0.9rem;
-      margin-bottom: 2px;
+      font-size: 0.75rem;
+      margin-bottom: 0;
       word-break: break-all;
     `,
     seoMissingTagsSection: css2`
       margin-top: 4px;
-      font-size: 0.95rem;
-      color: ${t(colors.red[400], colors.red[400])};
+      font-size: 0.875rem;
+      color: ${t(colors.red[500], colors.red[400])};
     `,
     seoMissingTagsList: css2`
       margin: 4px 0 0 0;
@@ -572,22 +573,23 @@ var stylesFactory = (theme) => {
       list-style: none;
       display: flex;
       flex-wrap: wrap;
-      gap: 6px;
+      gap: 4px;
       max-width: 240px;
     `,
     seoMissingTag: css2`
       background: ${t(colors.red[100], colors.red[500] + "22")};
       color: ${t(colors.red[700], colors.red[500])};
-      border-radius: 4px;
-      padding: 1px 6px;
-      font-size: 0.9rem;
+      border-radius: 3px;
+      padding: 2px 6px;
+      font-size: 0.75rem;
       font-weight: 500;
     `,
     seoAllTagsFound: css2`
       color: ${t(colors.green[700], colors.green[500])};
       font-weight: 500;
-      margin-left: 6px;
-      font-size: 0.95rem;
+      margin-left: 0;
+      padding: 0 10px 8px 10px;
+      font-size: 0.875rem;
     `,
     devtoolsPanelContainer: (panelLocation, isDetached) => css2`
       direction: ltr;
@@ -599,7 +601,7 @@ var stylesFactory = (theme) => {
       z-index: 99999;
       width: 100%;
       ${isDetached ? "" : "max-height: 90%;"}
-      border-top: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-top: 1px solid ${t(colors.gray[200], colors.gray[800])};
       transform-origin: top;
     `,
     devtoolsPanelContainerVisibility: (isOpen) => {
@@ -652,7 +654,7 @@ var stylesFactory = (theme) => {
       user-select: none;
       z-index: 100000;
       &:hover {
-        background-color: ${t(colors.purple[700], colors.purple[400])};
+        background-color: ${t(colors.gray[400], colors.gray[500])};
       }
     `,
     mainCloseBtn: css2`
@@ -731,9 +733,9 @@ var stylesFactory = (theme) => {
       align-items: center;
       justify-content: flex-start;
       height: 100%;
-      background-color: ${t(colors.gray[100], colors.darkGray[800])};
-      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
-      box-shadow: 0 1px 0 ${t(colors.gray[200], colors.gray[700])};
+      background-color: ${t(colors.gray[50], colors.darkGray[900])};
+      border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
+      box-shadow: none;
       position: relative;
       width: ${size[10]};
     `,
@@ -746,24 +748,24 @@ var stylesFactory = (theme) => {
       cursor: pointer;
       font-size: ${fontSize.sm};
       font-family: ${fontFamily.sans};
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${t(colors.gray[600], colors.gray[400])};
       background-color: transparent;
       border: none;
-      transition: all 0.2s ease-in-out;
+      transition: all 0.15s ease;
       border-left: 2px solid transparent;
       &:hover:not(.close):not(.active):not(.detach) {
-        background-color: ${t(colors.gray[200], colors.gray[700])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
-        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
       }
       &.active {
-        background-color: ${t(colors.purple[200], colors.purple[500])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
-        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
       }
       &.detach {
         &:hover {
-          background-color: ${t(colors.gray[200], colors.gray[700])};
+          background-color: ${t(colors.gray[100], colors.gray[800])};
         }
         &:hover {
           color: ${t(colors.green[700], colors.green[500])};
@@ -772,7 +774,7 @@ var stylesFactory = (theme) => {
       &.close {
         margin-top: auto;
         &:hover {
-          background-color: ${t(colors.gray[200], colors.gray[700])};
+          background-color: ${t(colors.gray[100], colors.gray[800])};
         }
         &:hover {
           color: ${t(colors.red[700], colors.red[500])};
@@ -803,13 +805,13 @@ var stylesFactory = (theme) => {
     pluginsTabDraw: (isExpanded) => css2`
       width: ${isExpanded ? size[48] : 0};
       height: 100%;
-      background-color: ${t(colors.white, colors.darkGray[800])};
-      box-shadow: 0 1px 0 ${colors.gray[700]};
-      ${isExpanded ? `border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};` : ""}
+      background-color: ${t(colors.white, colors.darkGray[900])};
+      box-shadow: none;
+      ${isExpanded ? `border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};` : ""}
     `,
     pluginsTabDrawExpanded: css2`
       width: ${size[48]};
-      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
     `,
     pluginsTabDrawTransition: (mSeconds) => {
       return css2`
@@ -829,38 +831,48 @@ var stylesFactory = (theme) => {
     pluginName: css2`
       font-size: ${fontSize.xs};
       font-family: ${fontFamily.sans};
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${t(colors.gray[600], colors.gray[400])};
       padding: ${size[2]};
       cursor: pointer;
       text-align: center;
-      transition: all 0.2s ease-in-out;
+      transition: all 0.15s ease;
+      border-left: 2px solid transparent;
+
       &:hover {
-        background-color: ${t(colors.gray[200], colors.gray[700])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
         padding: ${size[2]};
       }
       &.active {
-        background-color: ${t(colors.purple[200], colors.purple[500])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
+      }
+      &.active:hover {
+        background-color: ${t(colors.gray[200], colors.gray[700])};
       }
     `,
     pluginsTabContent: css2`
       width: 100%;
       height: 100%;
       overflow-y: auto;
+
+      &:not(:last-child) {
+        border-right: 5px solid ${t(colors.purple[200], colors.purple[800])};
+      }
     `,
     settingsGroup: css2`
       display: flex;
       flex-direction: column;
-      gap: 1rem;
+      gap: 0.75rem;
     `,
     conditionalSetting: css2`
       margin-left: 1.5rem;
       padding-left: 1rem;
-      border-left: 2px solid ${t(colors.purple[600], colors.purple[400])};
-      background-color: ${t(colors.gray[100], colors.darkGray[800])};
-      padding: 1rem;
-      border-radius: 0.5rem;
+      border-left: 2px solid ${t(colors.gray[300], colors.gray[600])};
+      background-color: ${t(colors.gray[50], colors.darkGray[900])};
+      padding: 0.75rem;
+      border-radius: 0.375rem;
       margin-top: 0.5rem;
     `,
     settingRow: css2`
@@ -904,13 +916,18 @@ var Trigger = ({
   const buttonStyle = createMemo(() => {
     return clsx3(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover));
   });
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-    _el$.$$click = () => setIsOpen(!isOpen());
-    setAttribute(_el$2, "src", image || tanstack_logo_default);
-    effect(() => className(_el$, buttonStyle()));
-    return _el$;
-  })();
+  return createComponent(Show, {
+    get when() {
+      return !settings().triggerHidden;
+    },
+    get children() {
+      var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+      _el$.$$click = () => setIsOpen(!isOpen());
+      setAttribute(_el$2, "src", image || tanstack_logo_default);
+      effect(() => className(_el$, buttonStyle()));
+      return _el$;
+    }
+  });
 };
 delegateEvents(["click"]);
 var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
@@ -1029,6 +1046,16 @@ var SettingsTab = () => {
                 return settings().hideUntilHover;
               }
             }), null);
+            insert(_el$, createComponent(Checkbox, {
+              label: "Completely hide trigger",
+              description: "Completely removes the trigger from the DOM (you can still open it with the hotkey)",
+              onChange: () => setSettings({
+                triggerHidden: !settings().triggerHidden
+              }),
+              get checked() {
+                return settings().triggerHidden;
+              }
+            }), null);
             insert(_el$, createComponent(Input, {
               label: "Trigger Image",
               description: "Specify the URL of the image to use for the trigger",

package/dist/devtools/{QEKPWHXZ.js → YM72BEIK.js}

@@ -1,4 +1,4 @@
-import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/SFOE7G6Y.js';
+import { usePiPWindow, keyboardModifiers, getAllPermutations, TANSTACK_DEVTOOLS, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, uppercaseFirstLetter } from '../chunk/XFQ6P775.js';
 import { createComponent, Portal, ssr, ssrAttribute, escape } from 'solid-js/web';
 import { createContext, createSignal, createEffect, onCleanup, Show, createMemo, For, useContext, onMount } from 'solid-js';
 import { createShortcut } from '@solid-primitives/keyboard';
@@ -476,8 +476,8 @@ var stylesFactory = (theme) => {
       padding: 0;
       margin: 0 auto;
       background: ${t(colors.white, colors.darkGray[700])};
-      border-radius: 12px;
-      box-shadow: 0 2px 16px ${t("rgba(0, 0, 0, 0.04)", "rgba(0, 0, 0, 0.08)")};
+      border-radius: 8px;
+      box-shadow: none;
       overflow-y: auto;
       height: 100%;
       display: flex;
@@ -489,16 +489,16 @@ var stylesFactory = (theme) => {
     seoTabTitle: css2`
       font-size: 1.25rem;
       font-weight: 600;
-      color: ${t(colors.purple[500], colors.purple[400])};
+      color: ${t(colors.gray[900], colors.gray[100])};
       margin: 0;
       padding: 1rem 1.5rem 0.5rem 1.5rem;
       text-align: left;
-      border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
     `,
     seoTabSection: css2`
       padding: 1.5rem;
-      background: ${t(colors.gray[100], colors.gray[800])};
-      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      background: ${t(colors.gray[50], colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
@@ -517,12 +517,12 @@ var stylesFactory = (theme) => {
       padding-bottom: 0.5rem;
     `,
     seoPreviewCard: css2`
-      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
       border-radius: 8px;
       padding: 12px 10px;
       background: ${t(colors.white, colors.darkGray[900])};
       margin-bottom: 0;
-      box-shadow: 0 1px 4px ${t("rgba(0,0,0,0.02)", "rgba(0,0,0,0.04)")};
+      box-shadow: 0 1px 3px ${t("rgba(0,0,0,0.05)", "rgba(0,0,0,0.1)")};
       display: flex;
       flex-direction: column;
       align-items: flex-start;
@@ -532,10 +532,10 @@ var stylesFactory = (theme) => {
       gap: 4px;
     `,
     seoPreviewHeader: css2`
-      font-size: 1rem;
-      font-weight: 500;
-      margin-bottom: 6px;
-      color: ${t(colors.purple[500], colors.purple[400])};
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-bottom: 0;
+      color: ${t(colors.gray[700], colors.gray[300])};
     `,
     seoPreviewImage: css2`
       max-width: 100%;
@@ -543,28 +543,29 @@ var stylesFactory = (theme) => {
       margin-bottom: 6px;
       box-shadow: 0 1px 2px ${t("rgba(0,0,0,0.03)", "rgba(0,0,0,0.06)")};
       height: 160px;
+      object-fit: cover;
     `,
     seoPreviewTitle: css2`
-      font-size: 1rem;
+      font-size: 0.9rem;
       font-weight: 600;
-      margin-bottom: 2px;
+      margin-bottom: 4px;
       color: ${t(colors.gray[900], colors.gray[100])};
     `,
     seoPreviewDesc: css2`
-      color: ${t(colors.gray[700], colors.gray[300])};
-      margin-bottom: 2px;
-      font-size: 0.95rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin-bottom: 4px;
+      font-size: 0.8rem;
     `,
     seoPreviewUrl: css2`
       color: ${t(colors.gray[500], colors.gray[500])};
-      font-size: 0.9rem;
-      margin-bottom: 2px;
+      font-size: 0.75rem;
+      margin-bottom: 0;
       word-break: break-all;
     `,
     seoMissingTagsSection: css2`
       margin-top: 4px;
-      font-size: 0.95rem;
-      color: ${t(colors.red[400], colors.red[400])};
+      font-size: 0.875rem;
+      color: ${t(colors.red[500], colors.red[400])};
     `,
     seoMissingTagsList: css2`
       margin: 4px 0 0 0;
@@ -572,22 +573,23 @@ var stylesFactory = (theme) => {
       list-style: none;
       display: flex;
       flex-wrap: wrap;
-      gap: 6px;
+      gap: 4px;
       max-width: 240px;
     `,
     seoMissingTag: css2`
       background: ${t(colors.red[100], colors.red[500] + "22")};
       color: ${t(colors.red[700], colors.red[500])};
-      border-radius: 4px;
-      padding: 1px 6px;
-      font-size: 0.9rem;
+      border-radius: 3px;
+      padding: 2px 6px;
+      font-size: 0.75rem;
       font-weight: 500;
     `,
     seoAllTagsFound: css2`
       color: ${t(colors.green[700], colors.green[500])};
       font-weight: 500;
-      margin-left: 6px;
-      font-size: 0.95rem;
+      margin-left: 0;
+      padding: 0 10px 8px 10px;
+      font-size: 0.875rem;
     `,
     devtoolsPanelContainer: (panelLocation, isDetached) => css2`
       direction: ltr;
@@ -599,7 +601,7 @@ var stylesFactory = (theme) => {
       z-index: 99999;
       width: 100%;
       ${isDetached ? "" : "max-height: 90%;"}
-      border-top: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-top: 1px solid ${t(colors.gray[200], colors.gray[800])};
       transform-origin: top;
     `,
     devtoolsPanelContainerVisibility: (isOpen) => {
@@ -652,7 +654,7 @@ var stylesFactory = (theme) => {
       user-select: none;
       z-index: 100000;
       &:hover {
-        background-color: ${t(colors.purple[700], colors.purple[400])};
+        background-color: ${t(colors.gray[400], colors.gray[500])};
       }
     `,
     mainCloseBtn: css2`
@@ -731,9 +733,9 @@ var stylesFactory = (theme) => {
       align-items: center;
       justify-content: flex-start;
       height: 100%;
-      background-color: ${t(colors.gray[100], colors.darkGray[800])};
-      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
-      box-shadow: 0 1px 0 ${t(colors.gray[200], colors.gray[700])};
+      background-color: ${t(colors.gray[50], colors.darkGray[900])};
+      border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
+      box-shadow: none;
       position: relative;
       width: ${size[10]};
     `,
@@ -746,24 +748,24 @@ var stylesFactory = (theme) => {
       cursor: pointer;
       font-size: ${fontSize.sm};
       font-family: ${fontFamily.sans};
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${t(colors.gray[600], colors.gray[400])};
       background-color: transparent;
       border: none;
-      transition: all 0.2s ease-in-out;
+      transition: all 0.15s ease;
       border-left: 2px solid transparent;
       &:hover:not(.close):not(.active):not(.detach) {
-        background-color: ${t(colors.gray[200], colors.gray[700])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
-        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
       }
       &.active {
-        background-color: ${t(colors.purple[200], colors.purple[500])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
-        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
       }
       &.detach {
         &:hover {
-          background-color: ${t(colors.gray[200], colors.gray[700])};
+          background-color: ${t(colors.gray[100], colors.gray[800])};
         }
         &:hover {
           color: ${t(colors.green[700], colors.green[500])};
@@ -772,7 +774,7 @@ var stylesFactory = (theme) => {
       &.close {
         margin-top: auto;
         &:hover {
-          background-color: ${t(colors.gray[200], colors.gray[700])};
+          background-color: ${t(colors.gray[100], colors.gray[800])};
         }
         &:hover {
           color: ${t(colors.red[700], colors.red[500])};
@@ -803,13 +805,13 @@ var stylesFactory = (theme) => {
     pluginsTabDraw: (isExpanded) => css2`
       width: ${isExpanded ? size[48] : 0};
       height: 100%;
-      background-color: ${t(colors.white, colors.darkGray[800])};
-      box-shadow: 0 1px 0 ${colors.gray[700]};
-      ${isExpanded ? `border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};` : ""}
+      background-color: ${t(colors.white, colors.darkGray[900])};
+      box-shadow: none;
+      ${isExpanded ? `border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};` : ""}
     `,
     pluginsTabDrawExpanded: css2`
       width: ${size[48]};
-      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
     `,
     pluginsTabDrawTransition: (mSeconds) => {
       return css2`
@@ -829,38 +831,48 @@ var stylesFactory = (theme) => {
     pluginName: css2`
       font-size: ${fontSize.xs};
       font-family: ${fontFamily.sans};
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${t(colors.gray[600], colors.gray[400])};
       padding: ${size[2]};
       cursor: pointer;
       text-align: center;
-      transition: all 0.2s ease-in-out;
+      transition: all 0.15s ease;
+      border-left: 2px solid transparent;
+
       &:hover {
-        background-color: ${t(colors.gray[200], colors.gray[700])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
         padding: ${size[2]};
       }
       &.active {
-        background-color: ${t(colors.purple[200], colors.purple[500])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
+      }
+      &.active:hover {
+        background-color: ${t(colors.gray[200], colors.gray[700])};
       }
     `,
     pluginsTabContent: css2`
       width: 100%;
       height: 100%;
       overflow-y: auto;
+
+      &:not(:last-child) {
+        border-right: 5px solid ${t(colors.purple[200], colors.purple[800])};
+      }
     `,
     settingsGroup: css2`
       display: flex;
       flex-direction: column;
-      gap: 1rem;
+      gap: 0.75rem;
     `,
     conditionalSetting: css2`
       margin-left: 1.5rem;
       padding-left: 1rem;
-      border-left: 2px solid ${t(colors.purple[600], colors.purple[400])};
-      background-color: ${t(colors.gray[100], colors.darkGray[800])};
-      padding: 1rem;
-      border-radius: 0.5rem;
+      border-left: 2px solid ${t(colors.gray[300], colors.gray[600])};
+      background-color: ${t(colors.gray[50], colors.darkGray[900])};
+      padding: 0.75rem;
+      border-radius: 0.375rem;
       margin-top: 0.5rem;
     `,
     settingRow: css2`
@@ -904,7 +916,14 @@ var Trigger = ({
   const buttonStyle = createMemo(() => {
     return clsx3(styles().mainCloseBtn, styles().mainCloseBtnPosition(settings().position), styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover));
   });
-  return ssr(_tmpl$, ssrAttribute("class", escape(buttonStyle(), true), false), ssrAttribute("src", escape(image, true) || escape(tanstack_logo_default, true), false));
+  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));
+    }
+  });
 };
 var _tmpl$2 = ["<div", ' style="', '"', ">", "</div>"];
 var MainPanel = (props) => {
@@ -932,7 +951,7 @@ var ContentPanel = (props) => {
   } = 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));
 };
-var _tmpl$4 = ["<div", ">", "", "", "", "</div>"];
+var _tmpl$4 = ["<div", ">", "", "", "", "", "</div>"];
 var _tmpl$23 = ["<div", ">", "</div>"];
 var _tmpl$32 = ["<div", ">", "", "</div>"];
 var _tmpl$42 = ["<div", "><div", ">", "</div>", "Final shortcut is: ", "</div>"];
@@ -990,6 +1009,15 @@ var SettingsTab = () => {
             get checked() {
               return settings().hideUntilHover;
             }
+          })), escape(createComponent(Checkbox, {
+            label: "Completely hide trigger",
+            description: "Completely removes the trigger from the DOM (you can still open it with the hotkey)",
+            onChange: () => setSettings({
+              triggerHidden: !settings().triggerHidden
+            }),
+            get checked() {
+              return settings().triggerHidden;
+            }
           })), escape(createComponent(Input, {
             label: "Trigger Image",
             description: "Specify the URL of the image to use for the trigger",

package/dist/index.d.ts

@@ -73,6 +73,10 @@ type DevtoolsStore = {
          * @default TanStackLogo
          */
         triggerImage: string;
+        /**
+         * Whether the trigger should be completely hidden or not (you can still open with the hotkey)
+         */
+        triggerHidden?: boolean;
     };
     state: {
         activeTab: TabName;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { initialState, DevtoolsProvider, PiPProvider } from './chunk/SFOE7G6Y.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/SFOE7G6Y.js';
+import { initialState, DevtoolsProvider, PiPProvider } from './chunk/XFQ6P775.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XFQ6P775.js';
 import { render, createComponent, Portal } from 'solid-js/web';
 import { lazy } from 'solid-js';
 import { ClientEventBus } from '@tanstack/devtools-event-bus/client';
@@ -29,7 +29,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/LMV5GWDT.js'));
+      this.#Component = lazy(() => import('./devtools/6XAY2RKM.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/SFOE7G6Y.js';
-export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/SFOE7G6Y.js';
+import { initialState } from './chunk/XFQ6P775.js';
+export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './chunk/XFQ6P775.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.18",
+  "version": "0.6.20",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "goober": "^2.1.16",
     "solid-js": "^1.9.9",
     "@tanstack/devtools-event-bus": "0.3.2",
-    "@tanstack/devtools-ui": "0.4.1"
+    "@tanstack/devtools-ui": "0.4.2"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"

package/src/components/trigger.tsx

@@ -1,4 +1,4 @@
-import { createMemo } from 'solid-js'
+import { Show, createMemo } from 'solid-js'
 import clsx from 'clsx'
 import { useDevtoolsSettings } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
@@ -24,13 +24,15 @@ export const Trigger = ({
     )
   })
   return (
-    <button
-      type="button"
-      aria-label="Open TanStack Devtools"
-      class={buttonStyle()}
-      onClick={() => setIsOpen(!isOpen())}
-    >
-      <img src={image || TanStackLogo} alt="TanStack Devtools" />
-    </button>
+    <Show when={!settings().triggerHidden}>
+      <button
+        type="button"
+        aria-label="Open TanStack Devtools"
+        class={buttonStyle()}
+        onClick={() => setIsOpen(!isOpen())}
+      >
+        <img src={image || TanStackLogo} alt="TanStack Devtools" />
+      </button>
+    </Show>
   )
 }

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

@@ -7,7 +7,7 @@ describe('getStateFromLocalStorage', () => {
     localStorage.clear()
   })
   it('should return undefined when no data in localStorage', () => {
-    const state = getStateFromLocalStorage()
+    const state = getStateFromLocalStorage(undefined)
     expect(state).toEqual(undefined)
   })
   it('should return parsed state from localStorage and not remove valid plugins', () => {
@@ -53,7 +53,7 @@ describe('getStateFromLocalStorage', () => {
   })
   it('should handle invalid JSON in localStorage gracefully', () => {
     localStorage.setItem(TANSTACK_DEVTOOLS_STATE, 'invalid json')
-    const state = getStateFromLocalStorage()
+    const state = getStateFromLocalStorage(undefined)
     expect(state).toEqual(undefined)
   })
 })

package/src/context/devtools-context.tsx

@@ -100,13 +100,14 @@ const generatePluginId = (plugin: TanStackDevtoolsPlugin, index: number) => {
 }
 
 export function getStateFromLocalStorage(
-  plugins?: Array<TanStackDevtoolsPlugin>,
+  plugins: Array<TanStackDevtoolsPlugin> | undefined,
 ) {
   const existingStateString = getStorageItem(TANSTACK_DEVTOOLS_STATE)
   const existingState =
     tryParseJson<DevtoolsStore['state']>(existingStateString)
   const pluginIds =
     plugins?.map((plugin, i) => generatePluginId(plugin, i)) || []
+
   if (existingState?.activePlugins) {
     const originalLength = existingState.activePlugins.length
     // Filter out any active plugins that are no longer available
@@ -127,7 +128,7 @@ const getExistingStateFromStorage = (
   config?: TanStackDevtoolsConfig,
   plugins?: Array<TanStackDevtoolsPlugin>,
 ) => {
-  const existingState = getStateFromLocalStorage()
+  const existingState = getStateFromLocalStorage(plugins)
   const settings = getSettings()
 
   const state: DevtoolsStore = {

package/src/context/devtools-store.ts

@@ -66,6 +66,10 @@ export type DevtoolsStore = {
      * @default TanStackLogo
      */
     triggerImage: string
+    /**
+     * Whether the trigger should be completely hidden or not (you can still open with the hotkey)
+     */
+    triggerHidden?: boolean
   }
   state: {
     activeTab: TabName
@@ -92,6 +96,7 @@ export const initialState: DevtoolsStore = {
         ? 'dark'
         : 'light',
     triggerImage: '',
+    triggerHidden: false,
   },
   state: {
     activeTab: 'plugins',

package/src/styles/use-styles.ts

@@ -20,8 +20,8 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       padding: 0;
       margin: 0 auto;
       background: ${t(colors.white, colors.darkGray[700])};
-      border-radius: 12px;
-      box-shadow: 0 2px 16px ${t('rgba(0, 0, 0, 0.04)', 'rgba(0, 0, 0, 0.08)')};
+      border-radius: 8px;
+      box-shadow: none;
       overflow-y: auto;
       height: 100%;
       display: flex;
@@ -33,16 +33,16 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     seoTabTitle: css`
       font-size: 1.25rem;
       font-weight: 600;
-      color: ${t(colors.purple[500], colors.purple[400])};
+      color: ${t(colors.gray[900], colors.gray[100])};
       margin: 0;
       padding: 1rem 1.5rem 0.5rem 1.5rem;
       text-align: left;
-      border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
     `,
     seoTabSection: css`
       padding: 1.5rem;
-      background: ${t(colors.gray[100], colors.gray[800])};
-      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      background: ${t(colors.gray[50], colors.darkGray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
@@ -61,12 +61,12 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       padding-bottom: 0.5rem;
     `,
     seoPreviewCard: css`
-      border: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
       border-radius: 8px;
       padding: 12px 10px;
       background: ${t(colors.white, colors.darkGray[900])};
       margin-bottom: 0;
-      box-shadow: 0 1px 4px ${t('rgba(0,0,0,0.02)', 'rgba(0,0,0,0.04)')};
+      box-shadow: 0 1px 3px ${t('rgba(0,0,0,0.05)', 'rgba(0,0,0,0.1)')};
       display: flex;
       flex-direction: column;
       align-items: flex-start;
@@ -76,10 +76,10 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       gap: 4px;
     `,
     seoPreviewHeader: css`
-      font-size: 1rem;
-      font-weight: 500;
-      margin-bottom: 6px;
-      color: ${t(colors.purple[500], colors.purple[400])};
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-bottom: 0;
+      color: ${t(colors.gray[700], colors.gray[300])};
     `,
     seoPreviewImage: css`
       max-width: 100%;
@@ -87,28 +87,29 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       margin-bottom: 6px;
       box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.03)', 'rgba(0,0,0,0.06)')};
       height: 160px;
+      object-fit: cover;
     `,
     seoPreviewTitle: css`
-      font-size: 1rem;
+      font-size: 0.9rem;
       font-weight: 600;
-      margin-bottom: 2px;
+      margin-bottom: 4px;
       color: ${t(colors.gray[900], colors.gray[100])};
     `,
     seoPreviewDesc: css`
-      color: ${t(colors.gray[700], colors.gray[300])};
-      margin-bottom: 2px;
-      font-size: 0.95rem;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      margin-bottom: 4px;
+      font-size: 0.8rem;
     `,
     seoPreviewUrl: css`
       color: ${t(colors.gray[500], colors.gray[500])};
-      font-size: 0.9rem;
-      margin-bottom: 2px;
+      font-size: 0.75rem;
+      margin-bottom: 0;
       word-break: break-all;
     `,
     seoMissingTagsSection: css`
       margin-top: 4px;
-      font-size: 0.95rem;
-      color: ${t(colors.red[400], colors.red[400])};
+      font-size: 0.875rem;
+      color: ${t(colors.red[500], colors.red[400])};
     `,
     seoMissingTagsList: css`
       margin: 4px 0 0 0;
@@ -116,22 +117,23 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       list-style: none;
       display: flex;
       flex-wrap: wrap;
-      gap: 6px;
+      gap: 4px;
       max-width: 240px;
     `,
     seoMissingTag: css`
       background: ${t(colors.red[100], colors.red[500] + '22')};
       color: ${t(colors.red[700], colors.red[500])};
-      border-radius: 4px;
-      padding: 1px 6px;
-      font-size: 0.9rem;
+      border-radius: 3px;
+      padding: 2px 6px;
+      font-size: 0.75rem;
       font-weight: 500;
     `,
     seoAllTagsFound: css`
       color: ${t(colors.green[700], colors.green[500])};
       font-weight: 500;
-      margin-left: 6px;
-      font-size: 0.95rem;
+      margin-left: 0;
+      padding: 0 10px 8px 10px;
+      font-size: 0.875rem;
     `,
     devtoolsPanelContainer: (
       panelLocation: TanStackDevtoolsConfig['panelLocation'],
@@ -146,7 +148,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       z-index: 99999;
       width: 100%;
       ${isDetached ? '' : 'max-height: 90%;'}
-      border-top: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-top: 1px solid ${t(colors.gray[200], colors.gray[800])};
       transform-origin: top;
     `,
     devtoolsPanelContainerVisibility: (isOpen: boolean) => {
@@ -204,7 +206,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       user-select: none;
       z-index: 100000;
       &:hover {
-        background-color: ${t(colors.purple[700], colors.purple[400])};
+        background-color: ${t(colors.gray[400], colors.gray[500])};
       }
     `,
 
@@ -294,9 +296,9 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       align-items: center;
       justify-content: flex-start;
       height: 100%;
-      background-color: ${t(colors.gray[100], colors.darkGray[800])};
-      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
-      box-shadow: 0 1px 0 ${t(colors.gray[200], colors.gray[700])};
+      background-color: ${t(colors.gray[50], colors.darkGray[900])};
+      border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
+      box-shadow: none;
       position: relative;
       width: ${size[10]};
     `,
@@ -310,24 +312,24 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       cursor: pointer;
       font-size: ${fontSize.sm};
       font-family: ${fontFamily.sans};
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${t(colors.gray[600], colors.gray[400])};
       background-color: transparent;
       border: none;
-      transition: all 0.2s ease-in-out;
+      transition: all 0.15s ease;
       border-left: 2px solid transparent;
       &:hover:not(.close):not(.active):not(.detach) {
-        background-color: ${t(colors.gray[200], colors.gray[700])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
-        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
       }
       &.active {
-        background-color: ${t(colors.purple[200], colors.purple[500])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
-        border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
       }
       &.detach {
         &:hover {
-          background-color: ${t(colors.gray[200], colors.gray[700])};
+          background-color: ${t(colors.gray[100], colors.gray[800])};
         }
         &:hover {
           color: ${t(colors.green[700], colors.green[500])};
@@ -336,7 +338,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       &.close {
         margin-top: auto;
         &:hover {
-          background-color: ${t(colors.gray[200], colors.gray[700])};
+          background-color: ${t(colors.gray[100], colors.gray[800])};
         }
         &:hover {
           color: ${t(colors.red[700], colors.red[500])};
@@ -368,15 +370,15 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     pluginsTabDraw: (isExpanded: boolean) => css`
       width: ${isExpanded ? size[48] : 0};
       height: 100%;
-      background-color: ${t(colors.white, colors.darkGray[800])};
-      box-shadow: 0 1px 0 ${colors.gray[700]};
+      background-color: ${t(colors.white, colors.darkGray[900])};
+      box-shadow: none;
       ${isExpanded
-        ? `border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};`
+        ? `border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};`
         : ''}
     `,
     pluginsTabDrawExpanded: css`
       width: ${size[48]};
-      border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
+      border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
     `,
     pluginsTabDrawTransition: (mSeconds: number) => {
       return css`
@@ -399,39 +401,49 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     pluginName: css`
       font-size: ${fontSize.xs};
       font-family: ${fontFamily.sans};
-      color: ${t(colors.gray[700], colors.gray[300])};
+      color: ${t(colors.gray[600], colors.gray[400])};
       padding: ${size[2]};
       cursor: pointer;
       text-align: center;
-      transition: all 0.2s ease-in-out;
+      transition: all 0.15s ease;
+      border-left: 2px solid transparent;
+
       &:hover {
-        background-color: ${t(colors.gray[200], colors.gray[700])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
         padding: ${size[2]};
       }
       &.active {
-        background-color: ${t(colors.purple[200], colors.purple[500])};
+        background-color: ${t(colors.gray[100], colors.gray[800])};
         color: ${t(colors.gray[900], colors.gray[100])};
+        border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
+      }
+      &.active:hover {
+        background-color: ${t(colors.gray[200], colors.gray[700])};
       }
     `,
     pluginsTabContent: css`
       width: 100%;
       height: 100%;
       overflow-y: auto;
+
+      &:not(:last-child) {
+        border-right: 5px solid ${t(colors.purple[200], colors.purple[800])};
+      }
     `,
 
     settingsGroup: css`
       display: flex;
       flex-direction: column;
-      gap: 1rem;
+      gap: 0.75rem;
     `,
     conditionalSetting: css`
       margin-left: 1.5rem;
       padding-left: 1rem;
-      border-left: 2px solid ${t(colors.purple[600], colors.purple[400])};
-      background-color: ${t(colors.gray[100], colors.darkGray[800])};
-      padding: 1rem;
-      border-radius: 0.5rem;
+      border-left: 2px solid ${t(colors.gray[300], colors.gray[600])};
+      background-color: ${t(colors.gray[50], colors.darkGray[900])};
+      padding: 0.75rem;
+      border-radius: 0.375rem;
       margin-top: 0.5rem;
     `,
     settingRow: css`

package/src/tabs/settings-tab.tsx

@@ -71,6 +71,14 @@ export const SettingsTab = () => {
             }
             checked={settings().hideUntilHover}
           />
+          <Checkbox
+            label="Completely hide trigger"
+            description="Completely removes the trigger from the DOM (you can still open it with the hotkey)"
+            onChange={() =>
+              setSettings({ triggerHidden: !settings().triggerHidden })
+            }
+            checked={settings().triggerHidden}
+          />
           <Input
             label="Trigger Image"
             description="Specify the URL of the image to use for the trigger"