@tanstack/devtools 0.10.8 → 0.10.10

package/dist/dev.js

@@ -30,7 +30,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/BX2FS55Z.js'));
+      this.#Component = lazy(() => import('./devtools/LF5QLUHI.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/dist/devtools/{BX2FS55Z.js → LF5QLUHI.js}

@@ -1,5 +1,5 @@
 import { usePiPWindow, TANSTACK_DEVTOOLS, keyboardModifiers, getAllPermutations, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, MAX_ACTIVE_PLUGINS, uppercaseFirstLetter } from '../chunk/ULTYUGME.js';
-import { delegateEvents, createComponent, Portal, template, use, setAttribute, insert, memo, effect, className, addEventListener, style, classList } from 'solid-js/web';
+import { delegateEvents, createComponent, Portal, use, setAttribute, insert, memo, effect, className, setStyleProperty, addEventListener, style, template, classList } from 'solid-js/web';
 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, Select, Input, Button, ChevronDownIcon, CloseIcon, SearchIcon, SettingsIcon, PackageIcon, ExternalLinkIcon, CheckCircleIcon, XCircleIcon } from '@tanstack/devtools-ui';
@@ -1917,8 +1917,8 @@ var MainPanel = (props) => {
     }));
     effect((_p$) => {
       var _v$ = pip().pipWindow ? "100vh" : height() + "px", _v$2 = pip().pipWindow ? "100vh" : height() + "px", _v$3 = clsx3(styles().devtoolsPanelContainer(settings().panelLocation, Boolean(pip().pipWindow)), styles().devtoolsPanelContainerAnimation(props.isOpen(), height(), settings().panelLocation), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing));
-      _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("height", _v$) : _el$.style.removeProperty("height"));
-      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("--tsd-main-panel-height", _v$2) : _el$.style.removeProperty("--tsd-main-panel-height"));
+      _v$ !== _p$.e && setStyleProperty(_el$, "height", _p$.e = _v$);
+      _v$2 !== _p$.t && setStyleProperty(_el$, "--tsd-main-panel-height", _p$.t = _v$2);
       _v$3 !== _p$.a && className(_el$, _p$.a = _v$3);
       return _p$;
     }, {
@@ -1954,7 +1954,7 @@ var ContentPanel = (props) => {
   })();
 };
 delegateEvents(["mousedown"]);
-var _tmpl$6 = /* @__PURE__ */ template(`<div><h4></h4><div></div>Final shortcut is: `);
+var _tmpl$6 = /* @__PURE__ */ template(`<div><h4 style=margin:0></h4><div></div>Final shortcut is: `);
 var MODIFIER_DISPLAY_NAMES = {
   Shift: "Shift",
   Alt: "Alt",
@@ -1995,7 +1995,6 @@ var HotkeyConfig = (props) => {
   };
   return (() => {
     var _el$ = _tmpl$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
-    _el$2.style.setProperty("margin", "0");
     insert(_el$2, () => props.description);
     insert(_el$3, createComponent(Show, {
       keyed: true,
@@ -2361,7 +2360,7 @@ var _tmpl$32 = /* @__PURE__ */ template(`<span>\u2713 v<!> \u2022 Min v`);
 var _tmpl$42 = /* @__PURE__ */ template(`<p>`);
 var _tmpl$52 = /* @__PURE__ */ template(`<a target=_blank rel="noopener noreferrer">Documentation `);
 var _tmpl$62 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$72 = /* @__PURE__ */ template(`<div><span></span><div></div><div><h3></h3><p></p><p>`);
+var _tmpl$72 = /* @__PURE__ */ template(`<div style=position:relative><span></span><div></div><div><h3></h3><p></p><p>`);
 var _tmpl$82 = /* @__PURE__ */ template(`<span>\u26A0\uFE0F v<!> \u2022 Requires v<!>+`);
 var _tmpl$9 = /* @__PURE__ */ template(`<span>`);
 var _tmpl$0 = /* @__PURE__ */ template(`<span>Installing...`);
@@ -2373,7 +2372,6 @@ var PluginCardComponent = (props) => {
   } = props;
   return (() => {
     var _el$ = _tmpl$72(), _el$3 = _el$.firstChild, _el$4 = _el$3.nextSibling, _el$6 = _el$4.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling;
-    _el$.style.setProperty("position", "relative");
     insert(_el$, createComponent(Show, {
       get when() {
         return card.metadata?.isNew;
@@ -2410,7 +2408,10 @@ var PluginCardComponent = (props) => {
     }));
     insert(_el$7, () => card.metadata?.title || card.devtoolsPackage);
     insert(_el$8, () => card.devtoolsPackage);
-    insert(_el$9, () => card.actionType === "requires-package" ? `Requires ${card.requiredPackageName}` : card.actionType === "wrong-framework" ? `For different framework projects` : card.actionType === "already-installed" ? `Active in your devtools` : card.actionType === "version-mismatch" ? card.versionInfo?.reason || "Version incompatible" : card.metadata?.description || `For ${card.requiredPackageName}`);
+    insert(_el$9, (() => {
+      var _c$ = memo(() => card.actionType === "requires-package");
+      return () => _c$() ? `Requires ${card.requiredPackageName}` : memo(() => card.actionType === "wrong-framework")() ? `For different framework projects` : memo(() => card.actionType === "already-installed")() ? `Active in your devtools` : memo(() => card.actionType === "version-mismatch")() ? card.versionInfo?.reason || "Version incompatible" : card.metadata?.description || `For ${card.requiredPackageName}`;
+    })());
     insert(_el$6, createComponent(Show, {
       get when() {
         return card.versionInfo;
@@ -2463,7 +2464,7 @@ var PluginCardComponent = (props) => {
     }), null);
     insert(_el$6, createComponent(Show, {
       get when() {
-        return card.metadata?.tags && card.metadata.tags.length > 0;
+        return memo(() => !!card.metadata?.tags)() && card.metadata.tags.length > 0;
       },
       get children() {
         var _el$15 = _tmpl$62();
@@ -2752,13 +2753,11 @@ var TagFilters = (props) => {
 delegateEvents(["click"]);
 
 // src/tabs/marketplace/marketplace-header.tsx
-var _tmpl$13 = /* @__PURE__ */ template(`<div><div><h2>Plugin Marketplace</h2><div><div><input type=text placeholder="Search plugins..."></div><button></button></div></div><p>Discover and install devtools for TanStack Query, Router, Form, and Pacer`);
+var _tmpl$13 = /* @__PURE__ */ template(`<div><div><h2>Plugin Marketplace</h2><div style=display:flex;align-items:center><div><input type=text placeholder="Search plugins..."></div><button></button></div></div><p>Discover and install devtools for TanStack Query, Router, Form, and Pacer`);
 var MarketplaceHeader = (props) => {
   const styles = useStyles();
   return (() => {
     var _el$ = _tmpl$13(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$2.nextSibling;
-    _el$4.style.setProperty("display", "flex");
-    _el$4.style.setProperty("align-items", "center");
     insert(_el$5, createComponent(SearchIcon, {}), _el$6);
     _el$6.$$input = (e) => props.onSearchInput(e.currentTarget.value);
     addEventListener(_el$7, "click", props.onSettingsClick, true);
@@ -3642,7 +3641,7 @@ function useHeadChanges(onChange, opts = {}) {
 // src/tabs/seo-tab.tsx
 var _tmpl$16 = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`);
 var _tmpl$28 = /* @__PURE__ */ template(`<img alt=Preview>`);
-var _tmpl$35 = /* @__PURE__ */ template(`<div>No Image`);
+var _tmpl$35 = /* @__PURE__ */ template(`<div style=background:#222;color:#888;display:flex;align-items:center;justify-content:center;min-height:80px;width:100%>No Image`);
 var _tmpl$44 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$54 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`);
 var _tmpl$63 = /* @__PURE__ */ template(`<li>`);
@@ -3789,13 +3788,6 @@ function SocialPreview(props) {
         return _el$7;
       })() : (() => {
         var _el$8 = _tmpl$35();
-        _el$8.style.setProperty("background", "#222");
-        _el$8.style.setProperty("color", "#888");
-        _el$8.style.setProperty("display", "flex");
-        _el$8.style.setProperty("align-items", "center");
-        _el$8.style.setProperty("justify-content", "center");
-        _el$8.style.setProperty("min-height", "80px");
-        _el$8.style.setProperty("width", "100%");
         effect(() => className(_el$8, styles().seoPreviewImage));
         return _el$8;
       })();
@@ -3806,9 +3798,9 @@ function SocialPreview(props) {
     effect((_p$) => {
       var _v$ = styles().seoPreviewCard, _v$2 = props.color, _v$3 = styles().seoPreviewHeader, _v$4 = props.color, _v$5 = styles().seoPreviewTitle, _v$6 = styles().seoPreviewDesc, _v$7 = styles().seoPreviewUrl;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("border-color", _v$2) : _el$.style.removeProperty("border-color"));
+      _v$2 !== _p$.t && setStyleProperty(_el$, "border-color", _p$.t = _v$2);
       _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
-      _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$2.style.setProperty("color", _v$4) : _el$2.style.removeProperty("color"));
+      _v$4 !== _p$.o && setStyleProperty(_el$2, "color", _p$.o = _v$4);
       _v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
       _v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
       _v$7 !== _p$.s && className(_el$6, _p$.s = _v$7);
@@ -3951,7 +3943,7 @@ var tabs = [{
 // src/components/tabs.tsx
 var _tmpl$17 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$29 = /* @__PURE__ */ template(`<button type=button>`);
-var _tmpl$36 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<div style=margin-top:auto;width:100%><button type=button></button><button type=button>`);
 var Tabs = (props) => {
   const styles = useStyles();
   const {
@@ -3991,8 +3983,6 @@ var Tabs = (props) => {
       var _c$ = memo(() => pipWindow().pipWindow !== null);
       return () => _c$() ? null : (() => {
         var _el$3 = _tmpl$36(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
-        _el$3.style.setProperty("margin-top", "auto");
-        _el$3.style.setProperty("width", "100%");
         _el$4.$$click = handleDetachment;
         insert(_el$4, createComponent(PiP, {}));
         _el$5.$$click = () => props.toggleOpen();
@@ -4028,7 +4018,7 @@ var TabContent = () => {
     return _el$;
   })();
 };
-var _tmpl$19 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$19 = /* @__PURE__ */ template(`<div style=pointer-events:none>`);
 var SourceInspector = () => {
   const {
     settings
@@ -4161,15 +4151,13 @@ var SourceInspector = () => {
     use(setNameTagRef, _el$);
     insert(_el$, () => highlightState.dataSource);
     effect((_$p) => style(_el$, {
-      ...fileNameStyles(),
-      "pointer-events": "none"
+      ...fileNameStyles()
     }, _$p));
     return _el$;
   })(), (() => {
     var _el$2 = _tmpl$19();
     effect((_$p) => style(_el$2, {
-      ...currentElementBoxStyles(),
-      "pointer-events": "none"
+      ...currentElementBoxStyles()
     }, _$p));
     return _el$2;
   })()];

package/dist/devtools/{Y264CKBD.js → V5A7RKHW.js}

@@ -1,5 +1,5 @@
 import { usePiPWindow, TANSTACK_DEVTOOLS, keyboardModifiers, getAllPermutations, DevtoolsContext, PLUGIN_TITLE_CONTAINER_ID, PLUGIN_CONTAINER_ID, MAX_ACTIVE_PLUGINS, uppercaseFirstLetter } from '../chunk/ULTYUGME.js';
-import { createComponent, Portal, ssr, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
+import { createComponent, Portal, ssr, ssrAttribute, escape, ssrStyleProperty, ssrStyle } from 'solid-js/web';
 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, Select, Input, Button, ChevronDownIcon, CloseIcon, SearchIcon, SettingsIcon, PackageIcon, ExternalLinkIcon, CheckCircleIcon, XCircleIcon } from '@tanstack/devtools-ui';
@@ -1895,7 +1895,7 @@ var MainPanel = (props) => {
     settings
   } = useDevtoolsSettings();
   const pip = usePiPWindow();
-  return ssr(_tmpl$4, ssrAttribute("id", escape(TANSTACK_DEVTOOLS, true), false), "height:" + (pip().pipWindow ? "100vh" : escape(height(), true) + "px") + (";--tsd-main-panel-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), ssrStyleProperty("height:", pip().pipWindow ? "100vh" : escape(height(), true) + "px") + ssrStyleProperty(";--tsd-main-panel-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;
@@ -1950,7 +1950,7 @@ var HotkeyConfig = (props) => {
   const getDisplayHotkey = () => {
     return props.hotkey.join(" + ");
   };
-  return ssr(_tmpl$6, ssrAttribute("class", escape(styles().settingsGroup, true), false), "margin:0", escape(props.description), ssrAttribute("class", escape(styles().settingsModifiers, true), false), escape(createComponent(Show, {
+  return ssr(_tmpl$6, ssrAttribute("class", escape(styles().settingsGroup, true), false), ssrStyleProperty("margin:", 0), escape(props.description), ssrAttribute("class", escape(styles().settingsModifiers, true), false), escape(createComponent(Show, {
     keyed: true,
     get when() {
       return props.hotkey;
@@ -2278,7 +2278,7 @@ var PluginCardComponent = (props) => {
   const {
     card
   } = props;
-  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, {
+  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) : ""}`, ssrStyleProperty("position:", "relative"), escape(createComponent(Show, {
     get when() {
       return card.metadata?.isNew;
     },
@@ -2457,7 +2457,7 @@ var TagFilters = (props) => {
 var _tmpl$15 = ["<div", "><div", "><h2", '>Plugin Marketplace</h2><div style="', '"><div', ">", '<input type="text"', ' placeholder="Search plugins..."', "></div><button", ">", "</button></div></div><p", ">Discover and install devtools for TanStack Query, Router, Form, and Pacer</p>", "</div>"];
 var MarketplaceHeader = (props) => {
   const styles = useStyles();
-  return ssr(_tmpl$15, ssrAttribute("class", escape(styles().pluginMarketplaceHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceTitleRow, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceTitle, true), false), "display:flex;align-items:center", ssrAttribute("class", escape(styles().pluginMarketplaceSearchWrapper, true), false), escape(createComponent(SearchIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSearch, true), false), ssrAttribute("value", escape(props.searchInput(), true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSettingsButton, true), false), escape(createComponent(SettingsIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceDescription, true), false), escape(createComponent(TagFilters, {
+  return ssr(_tmpl$15, ssrAttribute("class", escape(styles().pluginMarketplaceHeader, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceTitleRow, true), false), ssrAttribute("class", escape(styles().pluginMarketplaceTitle, true), false), ssrStyleProperty("display:", "flex") + ssrStyleProperty(";align-items:", "center"), ssrAttribute("class", escape(styles().pluginMarketplaceSearchWrapper, true), false), escape(createComponent(SearchIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceSearch, true), false), ssrAttribute("value", escape(props.searchInput(), true), false), ssrAttribute("class", escape(styles().pluginMarketplaceSettingsButton, true), false), escape(createComponent(SettingsIcon, {})), ssrAttribute("class", escape(styles().pluginMarketplaceDescription, true), false), escape(createComponent(TagFilters, {
     get tags() {
       return props.tags;
     },
@@ -3356,7 +3356,7 @@ var SOCIALS = [
 ];
 function SocialPreview(props) {
   const styles = useStyles();
-  return ssr(_tmpl$18, ssrAttribute("class", escape(styles().seoPreviewCard, true), false), "border-color:" + escape(props.color, true), ssrAttribute("class", escape(styles().seoPreviewHeader, true), false), "color:" + escape(props.color, true), escape(props.network), props.meta.image ? ssr(_tmpl$29, ssrAttribute("src", escape(props.meta.image, true), false), ssrAttribute("class", escape(styles().seoPreviewImage, true), false)) : ssr(_tmpl$36, ssrAttribute("class", escape(styles().seoPreviewImage, true), false), "background:#222;color:#888;display:flex;align-items:center;justify-content:center;min-height:80px;width:100%"), ssrAttribute("class", escape(styles().seoPreviewTitle, true), false), escape(props.meta.title) || "No Title", ssrAttribute("class", escape(styles().seoPreviewDesc, true), false), escape(props.meta.description) || "No Description", ssrAttribute("class", escape(styles().seoPreviewUrl, true), false), escape(props.meta.url) || escape(window.location.href));
+  return ssr(_tmpl$18, ssrAttribute("class", escape(styles().seoPreviewCard, true), false), ssrStyleProperty("border-color:", escape(props.color, true)), ssrAttribute("class", escape(styles().seoPreviewHeader, true), false), ssrStyleProperty("color:", escape(props.color, true)), escape(props.network), props.meta.image ? ssr(_tmpl$29, ssrAttribute("src", escape(props.meta.image, true), false), ssrAttribute("class", escape(styles().seoPreviewImage, true), false)) : ssr(_tmpl$36, ssrAttribute("class", escape(styles().seoPreviewImage, true), false), ssrStyleProperty("background:", "#222") + ssrStyleProperty(";color:", "#888") + ssrStyleProperty(";display:", "flex") + ssrStyleProperty(";align-items:", "center") + ssrStyleProperty(";justify-content:", "center") + ssrStyleProperty(";min-height:", "80px") + ssrStyleProperty(";width:", "100%")), ssrAttribute("class", escape(styles().seoPreviewTitle, true), false), escape(props.meta.title) || "No Title", ssrAttribute("class", escape(styles().seoPreviewDesc, true), false), escape(props.meta.description) || "No Description", ssrAttribute("class", escape(styles().seoPreviewUrl, true), false), escape(props.meta.url) || escape(window.location.href));
 }
 var SeoTab = () => {
   const [reports, setReports] = createSignal(analyzeHead());
@@ -3468,7 +3468,7 @@ var Tabs = (props) => {
     children: (tab) => ssr(_tmpl$210, ssrAttribute("class", escape(clsx3(styles().tab, {
       active: state().activeTab === tab.id
     }), true), false), escape(tab.icon()))
-  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$37, "margin-top:auto;width:100%", ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
+  })), pipWindow().pipWindow !== null ? escape(null) : ssr(_tmpl$37, ssrStyleProperty("margin-top:", "auto") + ssrStyleProperty(";width:", "100%"), ssrAttribute("class", escape(clsx3(styles().tab, "detach"), true), false), escape(createComponent(PiP, {})), ssrAttribute("class", escape(clsx3(styles().tab, "close"), true), false), escape(createComponent(X, {}))));
 };
 var _tmpl$20 = ["<div", ">", "</div>"];
 var TabContent = () => {

package/dist/index.js

@@ -30,7 +30,7 @@ var TanStackDevtoolsCore = class {
     const mountTo = el;
     const dispose = render(() => {
       const _self$ = this;
-      this.#Component = lazy(() => import('./devtools/BX2FS55Z.js'));
+      this.#Component = lazy(() => import('./devtools/LF5QLUHI.js'));
       const Devtools = this.#Component;
       this.#eventBus = new ClientEventBus(this.#eventBusConfig);
       this.#eventBus.start();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.10.8",
+  "version": "0.10.10",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -55,9 +55,9 @@
     "clsx": "^2.1.1",
     "goober": "^2.1.16",
     "solid-js": "^1.9.9",
-    "@tanstack/devtools-client": "0.0.5",
+    "@tanstack/devtools-client": "0.0.6",
     "@tanstack/devtools-event-bus": "0.4.1",
-    "@tanstack/devtools-ui": "0.4.4"
+    "@tanstack/devtools-ui": "0.5.0"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"