@tanstack/pacer-devtools 1.3.1 → 1.5.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
@@ -88,10 +103,10 @@ A lightweight timing and scheduling library for debouncing, throttling, rate lim
 > [!NOTE]
 > You may know **TanStack Pacer** by our adapter names, too!
 >
-> - [**React Pacer**](https://tanstack.com/pacer/latest/docs/framework/react/react-pacer)
-> - [**Preact Pacer**](https://tanstack.com/pacer/latest/docs/framework/preact/preact-pacer)
-> - [**Solid Pacer**](https://tanstack.com/pacer/latest/docs/framework/solid/solid-pacer)
-> - [**Angular Pacer**](https://tanstack.com/pacer/latest/docs/framework/angular/angular-pacer)
+> - [**React Pacer**](https://tanstack.com/pacer/latest/docs/framework/react)
+> - [**Preact Pacer**](https://tanstack.com/pacer/latest/docs/framework/preact)
+> - [**Solid Pacer**](https://tanstack.com/pacer/latest/docs/framework/solid)
+> - [**Angular Pacer**](https://tanstack.com/pacer/latest/docs/framework/angular)
 > - Svelte Pacer - needs a contributor!
 > - Vue Pacer - needs a contributor!
 

package/dist/{components-hqYwCNDx.js → components-BwcTEJfm.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";
@@ -779,7 +779,7 @@ const stylesFactory = (theme) => {
 	};
 };
 function useStyles() {
-	const { theme } = useTheme();
+	const { theme } = createTheme();
 	const [styles, setStyles] = createSignal(stylesFactory(theme()));
 	createEffect(() => {
 		setStyles(stylesFactory(theme()));
@@ -842,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 (() => {
@@ -921,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;
@@ -1083,16 +1091,20 @@ 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`);
-dayjs.extend(relativeTime);
+//#region src/utils/reduction-from-state.ts
+/**
+* Calculates the percentage of requests saved by a Pacer utility.
+* Async batch totals include both successful and failed items because both
+* outcomes contribute to the completed execution count.
+*/
 function reductionFromState(entry, state) {
 	if (!state) return 0;
-	const completedExecutions = entry.type.toLowerCase().includes("async") ? Number(state.settleCount) || 0 : Number(state.executionCount) || 0;
+	const isAsync = entry.type.toLowerCase().includes("async");
+	const completedExecutions = isAsync ? Number(state.settleCount ?? state.settledCount) || 0 : Number(state.executionCount) || 0;
 	if (entry.type.toLowerCase().includes("batcher")) {
-		const totalItemsProcessed = Number(state.totalItemsProcessed) || 0;
-		if (totalItemsProcessed === 0) return 0;
-		return Math.round((totalItemsProcessed - completedExecutions) / totalItemsProcessed * 100);
+		const totalItems = (Number(state.totalItemsProcessed) || 0) + (isAsync ? Number(state.totalItemsFailed) || 0 : 0);
+		if (totalItems === 0) return 0;
+		return Math.round((totalItems - completedExecutions) / totalItems * 100);
 	}
 	let requestCount = 0;
 	if (state.maybeExecuteCount !== void 0) requestCount = Number(state.maybeExecuteCount) || 0;
@@ -1102,6 +1114,10 @@ function reductionFromState(entry, state) {
 	const reduction = requestCount - completedExecutions;
 	return Math.round(reduction / requestCount * 100);
 }
+//#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`);
+dayjs.extend(relativeTime);
 function StateHeaderInner(props) {
 	const key = props.entry.instance.key;
 	const updatedAt = () => props.utilState().lastUpdatedByKey[key] ?? Date.now();
@@ -1198,7 +1214,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 (() => {
@@ -1265,7 +1283,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;
@@ -1313,7 +1332,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-DZv7GBzY.js → components-D6zc5Wjw.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";
@@ -778,7 +778,7 @@ const stylesFactory = (theme) => {
 	};
 };
 function useStyles() {
-	const { theme } = useTheme();
+	const { theme } = createTheme();
 	const [styles, setStyles] = createSignal(stylesFactory(theme()));
 	createEffect(() => {
 		setStyles(stylesFactory(theme()));
@@ -845,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",
 	">",
@@ -900,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",
 	">",
 	"",
@@ -909,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",
@@ -968,6 +976,30 @@ function ActionButtons(props) {
 	return ssr(_tmpl$2$2, ssrAttribute("class", escape(styles().actionsRow, true), false), hasPending() && ssr(_tmpl$3$1, ssrAttribute("class", escape(styles().actionButton, true), false), ssrAttribute("class", escape(styles().actionDotBlue, true), false), isPending() ? "Restore Pending" : "Trigger Pending"), hasFlush && ssr(_tmpl$4, ssrAttribute("class", escape(styles().actionButton, true), false), ssrAttribute("disabled", utilNameLower.includes("debouncer") && !isPending() || utilNameLower.includes("throttler") && !isPending() || utilNameLower.includes("batcher") && isEmptyFlag() || utilNameLower.includes("queuer") && isEmptyFlag(), true), ssrAttribute("class", escape(styles().actionDotGreen, true), false)), hasCancel && ssr(_tmpl$5, ssrAttribute("class", escape(styles().actionButton, true), false), ssrAttribute("disabled", utilNameLower.includes("debouncer") && !isPending() || utilNameLower.includes("throttler") && !isPending() || utilNameLower.includes("batcher") && isEmptyFlag() || utilNameLower.includes("queuer") && isEmptyFlag(), true), ssrAttribute("class", escape(styles().actionDotRed, true), false)), hasReset && ssr(_tmpl$6, ssrAttribute("class", escape(styles().actionButton, true), false), ssrAttribute("class", escape(styles().actionDotYellow, true), false)), hasClear && ssr(_tmpl$7, ssrAttribute("class", escape(styles().actionButton, true), false), ssrAttribute("disabled", utilNameLower.includes("batcher") && isEmptyFlag() || utilNameLower.includes("queuer") && isEmptyFlag(), true), ssrAttribute("class", escape(styles().actionDotOrange, true), false)), hasStartStop && ssr(_tmpl$3$1, ssrAttribute("class", escape(styles().actionButton, true), false), ssrAttribute("class", escape(styles().actionDotPurple, true), false), isRunning() ? "Stop" : "Start"));
 }
 //#endregion
+//#region src/utils/reduction-from-state.ts
+/**
+* Calculates the percentage of requests saved by a Pacer utility.
+* Async batch totals include both successful and failed items because both
+* outcomes contribute to the completed execution count.
+*/
+function reductionFromState(entry, state) {
+	if (!state) return 0;
+	const isAsync = entry.type.toLowerCase().includes("async");
+	const completedExecutions = isAsync ? Number(state.settleCount ?? state.settledCount) || 0 : Number(state.executionCount) || 0;
+	if (entry.type.toLowerCase().includes("batcher")) {
+		const totalItems = (Number(state.totalItemsProcessed) || 0) + (isAsync ? Number(state.totalItemsFailed) || 0 : 0);
+		if (totalItems === 0) return 0;
+		return Math.round((totalItems - completedExecutions) / totalItems * 100);
+	}
+	let requestCount = 0;
+	if (state.maybeExecuteCount !== void 0) requestCount = Number(state.maybeExecuteCount) || 0;
+	else if (state.addItemCount !== void 0) requestCount = Number(state.addItemCount) || 0;
+	else return 0;
+	if (requestCount === 0) return 0;
+	const reduction = requestCount - completedExecutions;
+	return Math.round(reduction / requestCount * 100);
+}
+//#endregion
 //#region src/components/StateHeader.tsx
 var _tmpl$$2 = [
 	"<div",
@@ -988,22 +1020,6 @@ var _tmpl$$2 = [
 	"% reduction</div></div></div>"
 ];
 dayjs.extend(relativeTime);
-function reductionFromState(entry, state) {
-	if (!state) return 0;
-	const completedExecutions = entry.type.toLowerCase().includes("async") ? Number(state.settleCount) || 0 : Number(state.executionCount) || 0;
-	if (entry.type.toLowerCase().includes("batcher")) {
-		const totalItemsProcessed = Number(state.totalItemsProcessed) || 0;
-		if (totalItemsProcessed === 0) return 0;
-		return Math.round((totalItemsProcessed - completedExecutions) / totalItemsProcessed * 100);
-	}
-	let requestCount = 0;
-	if (state.maybeExecuteCount !== void 0) requestCount = Number(state.maybeExecuteCount) || 0;
-	else if (state.addItemCount !== void 0) requestCount = Number(state.addItemCount) || 0;
-	else return 0;
-	if (requestCount === 0) return 0;
-	const reduction = requestCount - completedExecutions;
-	return Math.round(reduction / requestCount * 100);
-}
 function StateHeaderInner(props) {
 	const key = props.entry.instance.key;
 	const updatedAt = () => props.utilState().lastUpdatedByKey[key] ?? Date.now();
@@ -1073,7 +1089,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",
@@ -1127,7 +1145,8 @@ var _tmpl$ = [
 	"\"><div",
 	">Details</div>",
 	"</div></div>"
-], _tmpl$2 = [
+];
+var _tmpl$2 = [
 	"<div",
 	" style=\"",
 	"\">",
@@ -1171,7 +1190,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,10 +1,12 @@
 import { ClassType } from "@tanstack/devtools-utils/solid";
-
-//#region src/core.d.ts
+declare namespace core_d_exports {
+  export { PacerDevtoolsCore$1 as PacerDevtoolsCore, PacerDevtoolsCoreNoOp, PacerDevtoolsInit };
+}
 interface PacerDevtoolsInit {}
 declare const PacerDevtoolsCore$1: ClassType;
+declare const PacerDevtoolsCoreNoOp: ClassType;
 //#endregion
 //#region src/index.d.ts
-declare const PacerDevtoolsCore: typeof PacerDevtoolsCore$1;
+export declare const PacerDevtoolsCore: typeof PacerDevtoolsCore$1;
 //#endregion
-export { PacerDevtoolsCore, type PacerDevtoolsInit };
+export type { PacerDevtoolsInit };

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-hqYwCNDx.js"));
+const coreClasses = constructCoreClass(() => import("./components-BwcTEJfm.js"));
 const PacerDevtoolsCore$1 = coreClasses[0];
 const PacerDevtoolsCoreNoOp = coreClasses[1];
 //#endregion

package/dist/production/index.d.ts

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

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-hqYwCNDx.js"));
+const coreClasses = constructCoreClass(() => import("../components-BwcTEJfm.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-DZv7GBzY.js"));
+const coreClasses = constructCoreClass(() => import("../components-D6zc5Wjw.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-DZv7GBzY.js"));
+const coreClasses = constructCoreClass(() => import("./components-D6zc5Wjw.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.1",
+  "version": "1.5.0",
   "description": "Devtools for Pacer.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -61,29 +61,28 @@
   },
   "sideEffects": false,
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "files": [
-    "dist/",
-    "src"
+    "dist"
   ],
   "peerDependencies": {
     "@tanstack/pacer": ">=0.16.4"
   },
   "dependencies": {
-    "@tanstack/devtools-ui": "0.5.2",
-    "@tanstack/devtools-utils": "^0.5.0",
-    "@tanstack/solid-store": "^0.11.0",
+    "@tanstack/devtools-ui": "0.7.1",
+    "@tanstack/devtools-utils": "^0.7.0",
+    "@tanstack/solid-store": "^0.11.1",
     "clsx": "^2.1.1",
     "csstype": "^3.2.3",
-    "dayjs": "^1.11.20",
+    "dayjs": "^1.11.23",
     "goober": "^2.1.19",
-    "solid-js": "^1.9.12"
+    "solid-js": "^1.9.15"
   },
   "devDependencies": {
     "rolldown-plugin-solid": "^0.2.1",
-    "tsdown": "^0.22.0",
-    "vite-plugin-solid": "^2.11.12"
+    "tsdown": "^0.23.0",
+    "vite-plugin-solid": "^2.11.14"
   },
   "scripts": {
     "clean": "premove ./build ./dist",
@@ -92,6 +91,7 @@
     "test:lib": "vitest",
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
-    "build": "tsdown"
+    "build": "tsdown",
+    "test:build": "publint --strict && node ../../scripts/verify-package.ts"
   }
 }

package/src/PacerContextProvider.tsx

@@ -1,172 +0,0 @@
-import { createStore, produce } from 'solid-js/store'
-import { createContext, createEffect, onCleanup, useContext } from 'solid-js'
-import {
-  getPacerDevtoolsInstance,
-  pacerEventClient,
-} from '@tanstack/pacer/event-client'
-import type {
-  AsyncBatcher,
-  AsyncDebouncer,
-  AsyncQueuer,
-  AsyncRateLimiter,
-  AsyncThrottler,
-  Batcher,
-  Debouncer,
-  PacerEventName,
-  Queuer,
-  RateLimiter,
-  Throttler,
-} from '@tanstack/pacer'
-
-interface PacerDevtoolsContextType {
-  asyncBatchers: Array<AsyncBatcher<any>>
-  asyncDebouncers: Array<AsyncDebouncer<any>>
-  asyncQueuers: Array<AsyncQueuer<any>>
-  asyncRateLimiters: Array<AsyncRateLimiter<any>>
-  asyncThrottlers: Array<AsyncThrottler<any>>
-  batchers: Array<Batcher<any>>
-  debouncers: Array<Debouncer<any>>
-  queuers: Array<Queuer<any>>
-  rateLimiters: Array<RateLimiter<any>>
-  throttlers: Array<Throttler<any>>
-  lastUpdatedByKey: Record<string, number>
-}
-
-const initialPacerDevtoolsStore = {
-  asyncBatchers: [],
-  asyncDebouncers: [],
-  asyncQueuers: [],
-  asyncRateLimiters: [],
-  asyncThrottlers: [],
-  batchers: [],
-  debouncers: [],
-  queuers: [],
-  rateLimiters: [],
-  throttlers: [],
-  lastUpdatedByKey: {},
-}
-
-const PacerDevtoolsContext = createContext<
-  [
-    PacerDevtoolsContextType,
-    (newState: Partial<PacerDevtoolsContextType>) => void,
-  ]
->([initialPacerDevtoolsStore, () => {}])
-
-type UtilListKey = Exclude<keyof PacerDevtoolsContextType, 'lastUpdatedByKey'>
-
-/**
- * Match TanStack Form devtools: subscribe with {@link pacerEventClient.on} per
- * event suffix so the same `pacer:${suffix}` channel the library emits on is
- * observed. `onAllPluginEvents` only sees `tanstack-devtools-global`, which is
- * not always relayed the same way by the shell.
- *
- * `d-*` suffixes are used when the devtools panel pushes state back (see
- * ActionButtons); those must update the panel store too.
- */
-const PACER_DEVTOOLS_UTIL_EVENTS: Array<{
-  listKey: UtilListKey
-  suffixes: ReadonlyArray<PacerEventName>
-}> = [
-  {
-    listKey: 'asyncBatchers',
-    suffixes: ['AsyncBatcher', 'd-AsyncBatcher'],
-  },
-  {
-    listKey: 'asyncDebouncers',
-    suffixes: ['AsyncDebouncer', 'd-AsyncDebouncer'],
-  },
-  {
-    listKey: 'asyncQueuers',
-    suffixes: ['AsyncQueuer', 'd-AsyncQueuer'],
-  },
-  {
-    listKey: 'asyncRateLimiters',
-    suffixes: ['AsyncRateLimiter', 'd-AsyncRateLimiter'],
-  },
-  {
-    listKey: 'asyncThrottlers',
-    suffixes: ['AsyncThrottler', 'd-AsyncThrottler'],
-  },
-  {
-    listKey: 'batchers',
-    suffixes: ['Batcher', 'd-Batcher'],
-  },
-  {
-    listKey: 'debouncers',
-    suffixes: ['Debouncer', 'd-Debouncer'],
-  },
-  {
-    listKey: 'queuers',
-    suffixes: ['Queuer', 'd-Queuer'],
-  },
-  {
-    listKey: 'rateLimiters',
-    suffixes: ['RateLimiter', 'd-RateLimiter'],
-  },
-  {
-    listKey: 'throttlers',
-    suffixes: ['Throttler', 'd-Throttler'],
-  },
-]
-
-export function PacerContextProvider(props: { children: any }) {
-  const [store, setStore] = createStore<PacerDevtoolsContextType>(
-    initialPacerDevtoolsStore,
-  )
-
-  createEffect(() => {
-    const cleanups: Array<() => void> = []
-
-    for (const { listKey, suffixes } of PACER_DEVTOOLS_UTIL_EVENTS) {
-      for (const suffix of suffixes) {
-        cleanups.push(
-          pacerEventClient.on(suffix, (e) => {
-            const payload = e.payload
-            const key = payload.key
-            if (!key) return
-
-            const instance = getPacerDevtoolsInstance(key)
-            if (!instance || typeof instance !== 'object') return
-
-            setStore(
-              produce((draft) => {
-                const list = draft[listKey] as Array<{ key: string }>
-                const index = list.findIndex((item) => item.key === key)
-                const inst = instance as { key: string }
-                if (index !== -1) {
-                  list[index] = inst as (typeof list)[number]
-                } else {
-                  list.push(inst as (typeof list)[number])
-                }
-                draft.lastUpdatedByKey[key] = Date.now()
-              }),
-            )
-          }),
-        )
-      }
-    }
-
-    onCleanup(() => {
-      for (const cleanup of cleanups) {
-        cleanup()
-      }
-    })
-  })
-  return (
-    <PacerDevtoolsContext.Provider value={[store, setStore]}>
-      {props.children}
-    </PacerDevtoolsContext.Provider>
-  )
-}
-
-const usePacerDevtoolsContext = () => {
-  const context = useContext(PacerDevtoolsContext)
-
-  return context
-}
-
-export const usePacerDevtoolsState = () => {
-  const [state] = usePacerDevtoolsContext()
-  return state
-}