@tanstack/pacer-devtools 1.3.0 → 1.4.0

package/README.md

@@ -1,5 +1,19 @@
 <div align="center">
-  <img src="./media/header_pacer.png" >
+  <picture>
+    <source
+      media="(prefers-color-scheme: dark)"
+      srcset="https://tanstack.com/api/readme/pacer.png?theme=dark"
+    />
+    <source
+      media="(prefers-color-scheme: light)"
+      srcset="https://tanstack.com/api/readme/pacer.png"
+    />
+    <img
+      src="https://tanstack.com/api/readme/pacer.png"
+      alt="TanStack Pacer"
+      width="900"
+    />
+  </picture>
 </div>
 
 <br />
@@ -29,8 +43,9 @@
 </div>
 
 <div align="center">
-  
+
 ### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
 </div>
 
 # TanStack Pacer

package/dist/{components-BcUR7gcX.js → components-BXAd-LGS.js}

@@ -1,5 +1,5 @@
 import { createComponent, escape, ssr, ssrAttribute, ssrStyle, ssrStyleProperty } from "solid-js/web";
-import { Header, HeaderLogo, JsonTree, MainPanel, ThemeContextProvider, useTheme } from "@tanstack/devtools-ui";
+import { Header, HeaderLogo, JsonTree, MainPanel, ThemeContextProvider, createTheme } from "@tanstack/devtools-ui";
 import { createStore, produce } from "solid-js/store";
 import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, onMount, useContext } from "solid-js";
 import { getPacerDevtoolsInstance, pacerEventClient } from "@tanstack/pacer/event-client";
@@ -416,6 +416,10 @@ const stylesFactory = (theme) => {
 	const css = goober.css;
 	const t = (light, dark) => theme === "light" ? light : dark;
 	return {
+		/**
+		* Fills the devtools-utils portal div (height: 100%) and is a flex parent so MainPanel
+		* gets a real flex height budget (not just height: 100% without a flex chain).
+		*/
 		shellRoot: css`
       display: flex;
       flex-direction: column;
@@ -425,6 +429,7 @@ const stylesFactory = (theme) => {
       min-height: 0;
       overflow: hidden;
     `,
+		/** Overrides devtools-ui MainPanel overflow-y: auto so inner columns own scrolling */
 		mainPanelShell: css`
       display: flex;
       flex-direction: column;
@@ -773,7 +778,7 @@ const stylesFactory = (theme) => {
 	};
 };
 function useStyles() {
-	const { theme } = useTheme();
+	const { theme } = createTheme();
 	const [styles, setStyles] = createSignal(stylesFactory(theme()));
 	createEffect(() => {
 		setStyles(stylesFactory(theme()));
@@ -840,13 +845,15 @@ var _tmpl$$4 = [
 	"<div",
 	">",
 	"</div>"
-], _tmpl$2$3 = [
+];
+var _tmpl$2$3 = [
 	"<div",
 	"><div",
 	">",
 	"</div>",
 	"</div>"
-], _tmpl$3$2 = [
+];
+var _tmpl$3$2 = [
 	"<div",
 	"><div",
 	">",
@@ -895,7 +902,8 @@ function getPacerUtilStoreState(instance) {
 }
 //#endregion
 //#region src/components/ActionButtons.tsx
-var _tmpl$$3 = ["<div", ">No actions available for this util</div>"], _tmpl$2$2 = [
+var _tmpl$$3 = ["<div", ">No actions available for this util</div>"];
+var _tmpl$2$2 = [
 	"<div",
 	">",
 	"",
@@ -904,26 +912,31 @@ var _tmpl$$3 = ["<div", ">No actions available for this util</div>"], _tmpl$2$2
 	"",
 	"",
 	"</div>"
-], _tmpl$3$1 = [
+];
+var _tmpl$3$1 = [
 	"<button",
 	"><span",
 	"></span>",
 	"</button>"
-], _tmpl$4 = [
+];
+var _tmpl$4 = [
 	"<button",
 	"",
 	"><span",
 	"></span>Flush</button>"
-], _tmpl$5 = [
+];
+var _tmpl$5 = [
 	"<button",
 	"",
 	"><span",
 	"></span>Cancel</button>"
-], _tmpl$6 = [
+];
+var _tmpl$6 = [
 	"<button",
 	"><span",
 	"></span>Reset</button>"
-], _tmpl$7 = [
+];
+var _tmpl$7 = [
 	"<button",
 	"",
 	"><span",
@@ -1068,7 +1081,9 @@ var _tmpl$$1 = [
 	"<div",
 	">",
 	"</div>"
-], _tmpl$2$1 = ["<div", ">Select a util from the left panel to view its state</div>"], _tmpl$3 = [
+];
+var _tmpl$2$1 = ["<div", ">Select a util from the left panel to view its state</div>"];
+var _tmpl$3 = [
 	"<div",
 	"><div",
 	"><div",
@@ -1122,7 +1137,8 @@ var _tmpl$ = [
 	"\"><div",
 	">Details</div>",
 	"</div></div>"
-], _tmpl$2 = [
+];
+var _tmpl$2 = [
 	"<div",
 	" style=\"",
 	"\">",
@@ -1166,7 +1182,8 @@ function Shell() {
 		if (!isDragging()) return;
 		e.preventDefault();
 		const deltaX = e.clientX - dragStartX;
-		setLeftPanelWidth(Math.max(150, Math.min(800, dragStartWidth + deltaX)));
+		const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX));
+		setLeftPanelWidth(newWidth);
 	};
 	const handleMouseUp = () => {
 		setIsDragging(false);

package/dist/{components-D9C86C9O.js → components-BwHXH_1Y.js}

@@ -1,5 +1,5 @@
 import { className, createComponent, delegateEvents, effect, insert, memo, setStyleProperty, style, template, use } from "solid-js/web";
-import { Header, HeaderLogo, JsonTree, MainPanel, ThemeContextProvider, useTheme } from "@tanstack/devtools-ui";
+import { Header, HeaderLogo, JsonTree, MainPanel, ThemeContextProvider, createTheme } from "@tanstack/devtools-ui";
 import { createStore, produce } from "solid-js/store";
 import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, onMount, useContext } from "solid-js";
 import { getPacerDevtoolsInstance, pacerEventClient } from "@tanstack/pacer/event-client";
@@ -417,6 +417,10 @@ const stylesFactory = (theme) => {
 	const css = goober.css;
 	const t = (light, dark) => theme === "light" ? light : dark;
 	return {
+		/**
+		* Fills the devtools-utils portal div (height: 100%) and is a flex parent so MainPanel
+		* gets a real flex height budget (not just height: 100% without a flex chain).
+		*/
 		shellRoot: css`
       display: flex;
       flex-direction: column;
@@ -426,6 +430,7 @@ const stylesFactory = (theme) => {
       min-height: 0;
       overflow: hidden;
     `,
+		/** Overrides devtools-ui MainPanel overflow-y: auto so inner columns own scrolling */
 		mainPanelShell: css`
       display: flex;
       flex-direction: column;
@@ -774,7 +779,7 @@ const stylesFactory = (theme) => {
 	};
 };
 function useStyles() {
-	const { theme } = useTheme();
+	const { theme } = createTheme();
 	const [styles, setStyles] = createSignal(stylesFactory(theme()));
 	createEffect(() => {
 		setStyles(stylesFactory(theme()));
@@ -837,7 +842,9 @@ const UTIL_GROUPS = [
 ];
 //#endregion
 //#region src/components/UtilList.tsx
-var _tmpl$$4 = /* @__PURE__ */ template(`<div>`), _tmpl$2$3 = /* @__PURE__ */ template(`<div><div>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div><div></div><div>`);
+var _tmpl$$4 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$3 = /*#__PURE__*/ template(`<div><div>`);
+var _tmpl$3$2 = /*#__PURE__*/ template(`<div><div></div><div>`);
 function UtilList(props) {
 	const styles = useStyles();
 	return (() => {
@@ -916,7 +923,13 @@ function getPacerUtilStoreState(instance) {
 }
 //#endregion
 //#region src/components/ActionButtons.tsx
-var _tmpl$$3 = /* @__PURE__ */ template(`<div>No actions available for this util`), _tmpl$2$2 = /* @__PURE__ */ template(`<div>`), _tmpl$3$1 = /* @__PURE__ */ template(`<button><span>`), _tmpl$4 = /* @__PURE__ */ template(`<button><span></span>Flush`), _tmpl$5 = /* @__PURE__ */ template(`<button><span></span>Cancel`), _tmpl$6 = /* @__PURE__ */ template(`<button><span></span>Reset`), _tmpl$7 = /* @__PURE__ */ template(`<button><span></span>Clear`);
+var _tmpl$$3 = /*#__PURE__*/ template(`<div>No actions available for this util`);
+var _tmpl$2$2 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$3$1 = /*#__PURE__*/ template(`<button><span>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<button><span></span>Flush`);
+var _tmpl$5 = /*#__PURE__*/ template(`<button><span></span>Cancel`);
+var _tmpl$6 = /*#__PURE__*/ template(`<button><span></span>Reset`);
+var _tmpl$7 = /*#__PURE__*/ template(`<button><span></span>Clear`);
 function ActionButtons(props) {
 	const styles = useStyles();
 	const utilInstance = props.instance;
@@ -1079,7 +1092,7 @@ function ActionButtons(props) {
 delegateEvents(["mousedown"]);
 //#endregion
 //#region src/components/StateHeader.tsx
-var _tmpl$$2 = /* @__PURE__ */ template(`<div><div></div><div style=display:flex;align-items:center;gap:16px><div><div>Key</div><div></div><div>Last Updated</div><div> (<!>)</div></div><div style=margin-left:auto;font-weight:bold>% reduction`);
+var _tmpl$$2 = /*#__PURE__*/ template(`<div><div></div><div style=display:flex;align-items:center;gap:16px><div><div>Key</div><div></div><div>Last Updated</div><div> (<!>)</div></div><div style=margin-left:auto;font-weight:bold>% reduction`);
 dayjs.extend(relativeTime);
 function reductionFromState(entry, state) {
 	if (!state) return 0;
@@ -1193,7 +1206,9 @@ function UtilStateJsonTree(props) {
 }
 //#endregion
 //#region src/components/DetailsPanel.tsx
-var _tmpl$$1 = /* @__PURE__ */ template(`<div>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div>Select a util from the left panel to view its state`), _tmpl$3 = /* @__PURE__ */ template(`<div><div><div>Actions</div></div><div><div>State</div><div></div></div><div><div>Options</div><div>`);
+var _tmpl$$1 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2$1 = /*#__PURE__*/ template(`<div>Select a util from the left panel to view its state`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div><div><div>Actions</div></div><div><div>State</div><div></div></div><div><div>Options</div><div>`);
 function DetailsPanel(props) {
 	const styles = useStyles();
 	return (() => {
@@ -1260,7 +1275,8 @@ function DetailsPanel(props) {
 }
 //#endregion
 //#region src/components/Shell.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div><div style=min-width:150px;max-width:800px></div><div></div><div style=flex:1><div>Details`), _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$ = /*#__PURE__*/ template(`<div><div style=min-width:150px;max-width:800px></div><div></div><div style=flex:1><div>Details`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
 function readResizeObserverBlockSize(entry) {
 	const [box] = entry.borderBoxSize;
 	if (box !== void 0) return box.blockSize;
@@ -1308,7 +1324,8 @@ function Shell() {
 		if (!isDragging()) return;
 		e.preventDefault();
 		const deltaX = e.clientX - dragStartX;
-		setLeftPanelWidth(Math.max(150, Math.min(800, dragStartWidth + deltaX)));
+		const newWidth = Math.max(150, Math.min(800, dragStartWidth + deltaX));
+		setLeftPanelWidth(newWidth);
 	};
 	const handleMouseUp = () => {
 		setIsDragging(false);

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import { ClassType } from "@tanstack/devtools-utils/solid";
-
 //#region src/core.d.ts
 interface PacerDevtoolsInit {}
 declare const PacerDevtoolsCore$1: ClassType;

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { constructCoreClass } from "@tanstack/devtools-utils/solid";
 //#region src/core.tsx
-const coreClasses = constructCoreClass(() => import("./components-D9C86C9O.js"));
+const coreClasses = constructCoreClass(() => import("./components-BwHXH_1Y.js"));
 const PacerDevtoolsCore$1 = coreClasses[0];
 const PacerDevtoolsCoreNoOp = coreClasses[1];
 //#endregion

package/dist/production/index.d.ts

@@ -1,5 +1,4 @@
 import { ClassType } from "@tanstack/devtools-utils/solid";
-
 //#region src/core.d.ts
 interface PacerDevtoolsInit {}
 declare const PacerDevtoolsCore: ClassType;

package/dist/production/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { constructCoreClass } from "@tanstack/devtools-utils/solid";
 //#region src/core.tsx
-const coreClasses = constructCoreClass(() => import("../components-D9C86C9O.js"));
+const coreClasses = constructCoreClass(() => import("../components-BwHXH_1Y.js"));
 const PacerDevtoolsCore = coreClasses[0];
 coreClasses[1];
 //#endregion

package/dist/production/server.js

@@ -1,7 +1,7 @@
 "use client";
 import { constructCoreClass } from "@tanstack/devtools-utils/solid";
 //#region src/core.tsx
-const coreClasses = constructCoreClass(() => import("../components-BcUR7gcX.js"));
+const coreClasses = constructCoreClass(() => import("../components-BXAd-LGS.js"));
 const PacerDevtoolsCore = coreClasses[0];
 coreClasses[1];
 //#endregion

package/dist/server.js

@@ -1,7 +1,7 @@
 "use client";
 import { constructCoreClass } from "@tanstack/devtools-utils/solid";
 //#region src/core.tsx
-const coreClasses = constructCoreClass(() => import("./components-BcUR7gcX.js"));
+const coreClasses = constructCoreClass(() => import("./components-BXAd-LGS.js"));
 const PacerDevtoolsCore$1 = coreClasses[0];
 const PacerDevtoolsCoreNoOp = coreClasses[1];
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/pacer-devtools",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Devtools for Pacer.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -71,19 +71,19 @@
     "@tanstack/pacer": ">=0.16.4"
   },
   "dependencies": {
-    "@tanstack/devtools-ui": "0.5.1",
-    "@tanstack/devtools-utils": "^0.4.0",
-    "@tanstack/solid-store": "^0.11.0",
+    "@tanstack/devtools-ui": "0.6.0",
+    "@tanstack/devtools-utils": "^0.6.0",
+    "@tanstack/solid-store": "^0.11.1",
     "clsx": "^2.1.1",
     "csstype": "^3.2.3",
-    "dayjs": "^1.11.20",
-    "goober": "^2.1.18",
-    "solid-js": "^1.9.12"
+    "dayjs": "^1.11.21",
+    "goober": "^2.1.19",
+    "solid-js": "^1.9.14"
   },
   "devDependencies": {
     "rolldown-plugin-solid": "^0.2.1",
-    "tsdown": "^0.21.9",
-    "vite-plugin-solid": "^2.11.12"
+    "tsdown": "^0.22.14",
+    "vite-plugin-solid": "^2.11.14"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/styles/use-styles.ts

@@ -1,6 +1,6 @@
 import * as goober from 'goober'
 import { createEffect, createSignal } from 'solid-js'
-import { useTheme } from '@tanstack/devtools-ui'
+import { createTheme } from '@tanstack/devtools-ui'
 import { tokens } from './tokens'
 
 const stylesFactory = (theme: 'light' | 'dark') => {
@@ -376,7 +376,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
 }
 
 export function useStyles() {
-  const { theme } = useTheme()
+  const { theme } = createTheme()
   const [styles, setStyles] = createSignal(stylesFactory(theme()))
   createEffect(() => {
     setStyles(stylesFactory(theme()))