@tanstack/pacer-devtools 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,165 @@
+<div align="center">
+  <img src="./media/header_pacer.png" >
+</div>
+
+<br />
+
+<div align="center">
+	<a href="https://www.npmjs.com/package/@tanstack/pacer" target="\_parent">
+	  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/pacer.svg" alt="npm downloads" />
+	</a>
+- <a href="https://github.com/TanStack/pacer" target="\_parent">
+	  <img alt="" src="https://img.shields.io/github/stars/TanStack/pacer.svg?style=social&label=Star" alt="GitHub stars" />
+	</a>
+	<a href="https://bundlephobia.com/result?p=@tanstack/react-pacer@latest" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-pacer@latest" alt="Bundle size" />
+</a>
+</div>
+
+<div align="center">
+<a href="#badge">
+  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+</a>
+	<a href="#badge">
+		<img src="https://img.shields.io/github/v/release/tanstack/pacer" alt="Release"/>
+	</a>
+	<a href="https://twitter.com/tan_stack">
+		<img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/>
+	</a>
+</div>
+
+<div align="center">
+  
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+</div>
+
+# TanStack Pacer
+
+A lightweight timing and scheduling library for debouncing, throttling, rate limiting, queuing, and batching.
+
+> [!NOTE]
+> TanStack Pacer is currently mostly a client-side only library, but it is being designed to be able to potentially be used on the server-side as well.
+
+- **Debouncing**
+  - Delay execution until after a period of inactivity for when you only care about the last execution in a sequence.
+  - Synchronous or Asynchronous Debounce utilities with promise support and error handling
+  - Control of leading, trailing, and enabled options
+- **Throttling**
+  - Smoothly limit the rate at which a function can fire
+  - Synchronous or Asynchronous Throttle utilities with promise support and error handling
+  - Control of leading, trailing, and enabled options.
+- **Rate Limiting**
+  - Limit the rate at which a function can fire over a period of time
+  - Synchronous or Asynchronous Rate Limiting utilities with promise support and error handling
+  - Fixed or Sliding Window variations of Rate Limiting
+- **Queuing**
+  - Queue functions to be executed in a specific order
+  - Choose from FIFO, LIFO, and Priority queue implementations
+  - Control processing speed with configurable wait times or concurrency limits
+  - Manage queue execution with start/stop capabilities
+  - Expire items from the queue after a configurable duration
+- **Batching**
+  - Chunk up multiple operations into larger batches to reduce total back-and-forth operations
+  - Batch by time period, batch size, whichever comes first, or a custom condition to trigger batch executions
+- **Async or Sync Variations**
+  - Choose between synchronous and asynchronous versions of each utility
+  - Optional error, success, and settled handling for async variations
+  - Retry and Abort support for async variations
+- **State Management**
+  - Uses TanStack Store under the hood for state management with fine-grained reactivity
+  - Easily integrate with your own state management library of choice
+  - Persist state to local or session storage for some utilities like rate limiting and queuing
+- **Convenient Hooks**
+  - Reduce boilerplate code with pre-built hooks like `useDebouncedCallback`, `useThrottledValue`, and `useQueuedState`, and more.
+  - Multiple layers of abstraction to choose from depending on your use case.
+  - Works with each framework's default state management solutions, or with whatever custom state management library that you prefer.
+- **Type Safety**
+  - Full type safety with TypeScript that makes sure that your functions will always be called with the correct arguments
+  - Generics for flexible and reusable utilities
+- **Framework Adapters**
+  - React, Solid, and more
+- **Tree Shaking**
+  - We, of course, get tree-shaking right for your applications by default, but we also provide extra deep imports for each utility, making it easier to embed these utilities into your libraries without increasing the bundle-phobia reports of your library.
+
+### <a href="https://tanstack.com/pacer">Read the docs →</b></a>
+
+<br />
+
+> [!NOTE]
+> You may know **TanSack 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 - needs a contributor!
+> - Svelte Pacer - needs a contributor!
+> - Vue Pacer - needs a contributor!
+
+## Get Involved
+
+- We welcome issues and pull requests!
+- Participate in [GitHub discussions](https://github.com/TanStack/pacer/discussions)
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
+- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+
+## Partners
+
+<table align="center">
+  <tr>
+    <td>
+      <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS" >
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" />
+          <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
+        </picture>
+      </a>
+    </td>
+    <td>
+      <a href="https://www.cloudflare.com?utm_source=tanstack">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" />
+          <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" />
+          <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
+        </picture>
+      </a>
+    </td>
+    <td>
+      <a href="https://www.unkey.com/?utm_source=tanstack">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="./media/unkey_dark.svg" height="60" />
+          <source media="(prefers-color-scheme: light)" srcset="./media/unkey_logo.svg" height="60" />
+          <img src="./media/unkey_logo.svg" height="60" alt="Unkey"/>
+        </picture>
+      </a>
+    </td>
+  </tr>
+</table>
+
+<div align="center">
+<img src="./media/partner_logo.svg" alt="Pacer & you?" height="65">
+<p>
+We're looking for TanStack Pacer Partners to join our mission! Partner with us to push the boundaries of TanStack Pacer and build amazing things together.
+</p>
+<a href="mailto:partners@tanstack.com?subject=TanStack Pacer Partnership"><b>LET'S CHAT</b></a>
+</div>
+
+</div>
+
+## Explore the TanStack Ecosystem
+
+- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
+- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
+- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
+- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
+- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
+- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
+- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
+- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
+- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
+- <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
+- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
+
+… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>
+
+<!-- USE THE FORCE LUKE -->

package/dist/PacerContextProvider.js

@@ -0,0 +1,142 @@
+import { createContext, createEffect, onCleanup, useContext } from "solid-js";
+import { createComponent } from "solid-js/web";
+import { createStore } from "solid-js/store";
+import { pacerEventClient } from "@tanstack/pacer/event-client";
+
+//#region src/PacerContextProvider.tsx
+const initialPacerDevtoolsStore = {
+	asyncBatchers: [],
+	asyncDebouncers: [],
+	asyncQueuers: [],
+	asyncRateLimiters: [],
+	asyncThrottlers: [],
+	batchers: [],
+	debouncers: [],
+	queuers: [],
+	rateLimiters: [],
+	throttlers: [],
+	lastUpdatedByKey: {}
+};
+const PacerDevtoolsContext = createContext([initialPacerDevtoolsStore, () => {}]);
+const updateOrAddToArray = (oldArray, newItem) => {
+	const index = oldArray.findIndex((item) => item.key === newItem.key);
+	if (index !== -1) return oldArray.map((item, i) => i === index ? newItem : item);
+	return [...oldArray, newItem];
+};
+function PacerContextProvider(props) {
+	const [store, setStore] = createStore(initialPacerDevtoolsStore);
+	createEffect(() => {
+		onCleanup(pacerEventClient.onAllPluginEvents((_e) => {
+			const e = _e;
+			switch (e.type) {
+				case "pacer:AsyncBatcher":
+					setStore({
+						asyncBatchers: updateOrAddToArray(store.asyncBatchers, e.payload),
+						lastUpdatedByKey: {
+							...store.lastUpdatedByKey,
+							[e.payload.key]: Date.now()
+						}
+					});
+					break;
+				case "pacer:AsyncDebouncer":
+					setStore({
+						asyncDebouncers: updateOrAddToArray(store.asyncDebouncers, e.payload),
+						lastUpdatedByKey: {
+							...store.lastUpdatedByKey,
+							[e.payload.key]: Date.now()
+						}
+					});
+					break;
+				case "pacer:AsyncQueuer":
+					setStore({
+						asyncQueuers: updateOrAddToArray(store.asyncQueuers, e.payload),
+						lastUpdatedByKey: {
+							...store.lastUpdatedByKey,
+							[e.payload.key]: Date.now()
+						}
+					});
+					break;
+				case "pacer:AsyncRateLimiter":
+					setStore({
+						asyncRateLimiters: updateOrAddToArray(store.asyncRateLimiters, e.payload),
+						lastUpdatedByKey: {
+							...store.lastUpdatedByKey,
+							[e.payload.key]: Date.now()
+						}
+					});
+					break;
+				case "pacer:AsyncThrottler":
+					setStore({
+						asyncThrottlers: updateOrAddToArray(store.asyncThrottlers, e.payload),
+						lastUpdatedByKey: {
+							...store.lastUpdatedByKey,
+							[e.payload.key]: Date.now()
+						}
+					});
+					break;
+				case "pacer:Batcher":
+					setStore({
+						batchers: updateOrAddToArray(store.batchers, e.payload),
+						lastUpdatedByKey: {
+							...store.lastUpdatedByKey,
+							[e.payload.key]: Date.now()
+						}
+					});
+					break;
+				case "pacer:Debouncer":
+					setStore({
+						debouncers: updateOrAddToArray(store.debouncers, e.payload),
+						lastUpdatedByKey: {
+							...store.lastUpdatedByKey,
+							[e.payload.key]: Date.now()
+						}
+					});
+					break;
+				case "pacer:Queuer":
+					setStore({
+						queuers: updateOrAddToArray(store.queuers, e.payload),
+						lastUpdatedByKey: {
+							...store.lastUpdatedByKey,
+							[e.payload.key]: Date.now()
+						}
+					});
+					break;
+				case "pacer:RateLimiter":
+					setStore({
+						rateLimiters: updateOrAddToArray(store.rateLimiters, e.payload),
+						lastUpdatedByKey: {
+							...store.lastUpdatedByKey,
+							[e.payload.key]: Date.now()
+						}
+					});
+					break;
+				case "pacer:Throttler":
+					setStore({
+						throttlers: updateOrAddToArray(store.throttlers, e.payload),
+						lastUpdatedByKey: {
+							...store.lastUpdatedByKey,
+							[e.payload.key]: Date.now()
+						}
+					});
+					break;
+			}
+		}));
+	});
+	return createComponent(PacerDevtoolsContext.Provider, {
+		value: [store, setStore],
+		get children() {
+			return props.children;
+		}
+	});
+}
+const usePacerDevtoolsContext = () => {
+	return useContext(PacerDevtoolsContext);
+};
+const usePacerDevtoolsState = () => {
+	const [state] = usePacerDevtoolsContext();
+	return state;
+};
+
+//#endregion
+export { PacerContextProvider, usePacerDevtoolsState };
+//# sourceMappingURL=PacerContextProvider.js.map

package/dist/PacerContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PacerContextProvider.js","names":["createStore","createContext","createEffect","onCleanup","useContext","pacerEventClient","AsyncBatcher","AsyncDebouncer","AsyncQueuer","AsyncRateLimiter","AsyncThrottler","Batcher","Debouncer","Queuer","RateLimiter","Throttler","PacerDevtoolsContextType","asyncBatchers","Array","asyncDebouncers","asyncQueuers","asyncRateLimiters","asyncThrottlers","batchers","debouncers","queuers","rateLimiters","throttlers","lastUpdatedByKey","Record","initialPacerDevtoolsStore","PacerDevtoolsContext","newState","Partial","updateOrAddToArray","key","oldArray","T","newItem","index","findIndex","item","map","i","PacerContextProvider","props","children","store","setStore","cleanup","onAllPluginEvents","_e","e","type","payload","Date","now","_$createComponent","Provider","value","usePacerDevtoolsContext","context","usePacerDevtoolsState","state"],"sources":["../src/PacerContextProvider.tsx"],"sourcesContent":["import { createStore } from 'solid-js/store'\nimport { createContext, createEffect, onCleanup, useContext } from 'solid-js'\nimport { pacerEventClient } from '@tanstack/pacer/event-client'\nimport type {\n  AsyncBatcher,\n  AsyncDebouncer,\n  AsyncQueuer,\n  AsyncRateLimiter,\n  AsyncThrottler,\n  Batcher,\n  Debouncer,\n  Queuer,\n  RateLimiter,\n  Throttler,\n} from '@tanstack/pacer'\n\ninterface PacerDevtoolsContextType {\n  asyncBatchers: Array<AsyncBatcher<any>>\n  asyncDebouncers: Array<AsyncDebouncer<any>>\n  asyncQueuers: Array<AsyncQueuer<any>>\n  asyncRateLimiters: Array<AsyncRateLimiter<any>>\n  asyncThrottlers: Array<AsyncThrottler<any>>\n  batchers: Array<Batcher<any>>\n  debouncers: Array<Debouncer<any>>\n  queuers: Array<Queuer<any>>\n  rateLimiters: Array<RateLimiter<any>>\n  throttlers: Array<Throttler<any>>\n  lastUpdatedByKey: Record<string, number>\n}\n\nconst initialPacerDevtoolsStore = {\n  asyncBatchers: [],\n  asyncDebouncers: [],\n  asyncQueuers: [],\n  asyncRateLimiters: [],\n  asyncThrottlers: [],\n  batchers: [],\n  debouncers: [],\n  queuers: [],\n  rateLimiters: [],\n  throttlers: [],\n  lastUpdatedByKey: {},\n}\n\nconst PacerDevtoolsContext = createContext<\n  [\n    PacerDevtoolsContextType,\n    (newState: Partial<PacerDevtoolsContextType>) => void,\n  ]\n>([initialPacerDevtoolsStore, () => {}])\n\nconst updateOrAddToArray = <T extends { key: string }>(\n  oldArray: Array<T>,\n  newItem: T,\n) => {\n  const index = oldArray.findIndex((item) => item.key === newItem.key)\n  if (index !== -1) {\n    // Update existing item\n    return oldArray.map((item, i) => (i === index ? newItem : item))\n  }\n  // Add new item\n  return [...oldArray, newItem]\n}\n\nexport function PacerContextProvider(props: { children: any }) {\n  const [store, setStore] = createStore<PacerDevtoolsContextType>(\n    initialPacerDevtoolsStore,\n  )\n\n  createEffect(() => {\n    const cleanup = pacerEventClient.onAllPluginEvents((_e) => {\n      const e = _e as unknown as { type: string; payload: any }\n      switch (e.type) {\n        case 'pacer:AsyncBatcher': {\n          setStore({\n            asyncBatchers: updateOrAddToArray(store.asyncBatchers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:AsyncDebouncer': {\n          setStore({\n            asyncDebouncers: updateOrAddToArray(\n              store.asyncDebouncers,\n              e.payload,\n            ),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:AsyncQueuer': {\n          setStore({\n            asyncQueuers: updateOrAddToArray(store.asyncQueuers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:AsyncRateLimiter': {\n          setStore({\n            asyncRateLimiters: updateOrAddToArray(\n              store.asyncRateLimiters,\n              e.payload,\n            ),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:AsyncThrottler': {\n          setStore({\n            asyncThrottlers: updateOrAddToArray(\n              store.asyncThrottlers,\n              e.payload,\n            ),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:Batcher': {\n          setStore({\n            batchers: updateOrAddToArray(store.batchers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:Debouncer': {\n          setStore({\n            debouncers: updateOrAddToArray(store.debouncers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:Queuer': {\n          setStore({\n            queuers: updateOrAddToArray(store.queuers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:RateLimiter': {\n          setStore({\n            rateLimiters: updateOrAddToArray(store.rateLimiters, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n        case 'pacer:Throttler': {\n          setStore({\n            throttlers: updateOrAddToArray(store.throttlers, e.payload),\n            lastUpdatedByKey: {\n              ...store.lastUpdatedByKey,\n              [e.payload.key]: Date.now(),\n            },\n          })\n          break\n        }\n      }\n    })\n    onCleanup(cleanup)\n  })\n  return (\n    <PacerDevtoolsContext.Provider value={[store, setStore]}>\n      {props.children}\n    </PacerDevtoolsContext.Provider>\n  )\n}\n\nconst usePacerDevtoolsContext = () => {\n  const context = useContext(PacerDevtoolsContext)\n\n  return context\n}\n\nexport const usePacerDevtoolsState = () => {\n  const [state] = usePacerDevtoolsContext()\n  return state\n}\n"],"mappings":"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"}

package/dist/PacerDevtools.js

@@ -0,0 +1,14 @@
+import { PacerContextProvider } from "./PacerContextProvider.js";
+import { Shell } from "./components/Shell.js";
+import { createComponent } from "solid-js/web";
+
+//#region src/PacerDevtools.tsx
+function PacerDevtools() {
+	return createComponent(PacerContextProvider, { get children() {
+		return createComponent(Shell, {});
+	} });
+}
+
+//#endregion
+export { PacerDevtools as default };
+//# sourceMappingURL=PacerDevtools.js.map

package/dist/PacerDevtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PacerDevtools.js","names":["PacerContextProvider","Shell","PacerDevtools","_$createComponent","children"],"sources":["../src/PacerDevtools.tsx"],"sourcesContent":["import { PacerContextProvider } from './PacerContextProvider'\nimport { Shell } from './components/Shell'\n\nexport default function PacerDevtools() {\n  return (\n    <PacerContextProvider>\n      <Shell />\n    </PacerContextProvider>\n  )\n}\n"],"mappings":";;;;;AAGA,SAAwBE,gBAAgB;AACtC,QAAAC,gBACGH,sBAAoB,EAAA,IAAAI,WAAA;AAAA,SAAAD,gBAClBF,OAAK,EAAA,CAAA;IAAA,CAAA"}

package/dist/components/ActionButtons.js

@@ -0,0 +1,154 @@
+import { useStyles } from "../styles/use-styles.js";
+import { className, delegateEvents, effect, insert, template } from "solid-js/web";
+import { pacerEventClient } from "@tanstack/pacer";
+
+//#region src/components/ActionButtons.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>No actions available for this util`), _tmpl$2 = /* @__PURE__ */ template(`<div>`), _tmpl$3 = /* @__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`);
+function ActionButtons(props) {
+	const styles = useStyles();
+	const utilInstance = props.instance;
+	const utilState = utilInstance?.store?.state;
+	const hasPending = utilState && "isPending" in utilState;
+	const hasEmpty = utilState && "isEmpty" in utilState;
+	const isPending = hasPending ? !!utilState.isPending : false;
+	const isEmpty = hasEmpty ? utilState.isEmpty : void 0;
+	const hasFlush = typeof utilInstance.flush === "function";
+	const hasCancel = typeof utilInstance.cancel === "function";
+	const hasReset = typeof utilInstance.reset === "function";
+	const hasClear = typeof utilInstance.clear === "function";
+	const hasStart = typeof utilInstance.start === "function";
+	const hasStop = typeof utilInstance.stop === "function";
+	const hasStartStop = hasStart && hasStop;
+	const isRunning = utilState?.isRunning ?? true;
+	if (!hasPending && !hasFlush && !hasCancel && !hasReset && !hasClear) return (() => {
+		var _el$ = _tmpl$();
+		effect(() => className(_el$, styles().sectionEmpty));
+		return _el$;
+	})();
+	const emitName = `d-${props.utilName}`;
+	return (() => {
+		var _el$2 = _tmpl$2();
+		insert(_el$2, hasPending && (() => {
+			var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild;
+			_el$3.$$mousedown = () => {
+				const next = !isPending;
+				utilInstance.store.setState((prev) => ({
+					...prev,
+					isPending: next
+				}));
+				pacerEventClient.emit(emitName, utilInstance);
+			};
+			insert(_el$3, isPending ? "Restore Pending" : "Trigger Pending", null);
+			effect((_p$) => {
+				var _v$ = styles().actionButton, _v$2 = styles().actionDotBlue;
+				_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+				_v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0
+			});
+			return _el$3;
+		})(), null);
+		insert(_el$2, hasFlush && (() => {
+			var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild;
+			_el$5.$$mousedown = () => {
+				utilInstance.flush();
+				pacerEventClient.emit(emitName, utilInstance);
+			};
+			effect((_p$) => {
+				var _v$3 = styles().actionButton, _v$4 = props.utilName.toLowerCase().includes("debouncer") && !isPending || props.utilName.toLowerCase().includes("throttler") && !isPending || props.utilName.toLowerCase().includes("batcher") && isEmpty || props.utilName.toLowerCase().includes("queuer") && isEmpty, _v$5 = styles().actionDotGreen;
+				_v$3 !== _p$.e && className(_el$5, _p$.e = _v$3);
+				_v$4 !== _p$.t && (_el$5.disabled = _p$.t = _v$4);
+				_v$5 !== _p$.a && className(_el$6, _p$.a = _v$5);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			});
+			return _el$5;
+		})(), null);
+		insert(_el$2, hasCancel && (() => {
+			var _el$7 = _tmpl$5(), _el$8 = _el$7.firstChild;
+			_el$7.$$mousedown = () => {
+				utilInstance.cancel();
+				pacerEventClient.emit(emitName, utilInstance);
+			};
+			effect((_p$) => {
+				var _v$6 = styles().actionButton, _v$7 = props.utilName.toLowerCase().includes("debouncer") && !isPending || props.utilName.toLowerCase().includes("throttler") && !isPending || props.utilName.toLowerCase().includes("batcher") && isEmpty || props.utilName.toLowerCase().includes("queuer") && isEmpty, _v$8 = styles().actionDotRed;
+				_v$6 !== _p$.e && className(_el$7, _p$.e = _v$6);
+				_v$7 !== _p$.t && (_el$7.disabled = _p$.t = _v$7);
+				_v$8 !== _p$.a && className(_el$8, _p$.a = _v$8);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			});
+			return _el$7;
+		})(), null);
+		insert(_el$2, hasReset && (() => {
+			var _el$9 = _tmpl$6(), _el$0 = _el$9.firstChild;
+			_el$9.$$mousedown = () => {
+				utilInstance.reset();
+				pacerEventClient.emit(emitName, utilInstance);
+			};
+			effect((_p$) => {
+				var _v$9 = styles().actionButton, _v$0 = styles().actionDotYellow;
+				_v$9 !== _p$.e && className(_el$9, _p$.e = _v$9);
+				_v$0 !== _p$.t && className(_el$0, _p$.t = _v$0);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0
+			});
+			return _el$9;
+		})(), null);
+		insert(_el$2, hasClear && (() => {
+			var _el$1 = _tmpl$7(), _el$10 = _el$1.firstChild;
+			_el$1.$$mousedown = () => {
+				utilInstance.clear();
+				pacerEventClient.emit(emitName, utilInstance);
+			};
+			effect((_p$) => {
+				var _v$1 = styles().actionButton, _v$10 = props.utilName.toLowerCase().includes("batcher") && isEmpty || props.utilName.toLowerCase().includes("queuer") && isEmpty, _v$11 = styles().actionDotOrange;
+				_v$1 !== _p$.e && className(_el$1, _p$.e = _v$1);
+				_v$10 !== _p$.t && (_el$1.disabled = _p$.t = _v$10);
+				_v$11 !== _p$.a && className(_el$10, _p$.a = _v$11);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0
+			});
+			return _el$1;
+		})(), null);
+		insert(_el$2, hasStartStop && (() => {
+			var _el$11 = _tmpl$3(), _el$12 = _el$11.firstChild;
+			_el$11.$$mousedown = () => {
+				if (isRunning) utilInstance.stop();
+				else utilInstance.start();
+				pacerEventClient.emit(emitName, utilInstance);
+			};
+			insert(_el$11, isRunning ? "Stop" : "Start", null);
+			effect((_p$) => {
+				var _v$12 = styles().actionButton, _v$13 = styles().actionDotPurple;
+				_v$12 !== _p$.e && className(_el$11, _p$.e = _v$12);
+				_v$13 !== _p$.t && className(_el$12, _p$.t = _v$13);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0
+			});
+			return _el$11;
+		})(), null);
+		effect(() => className(_el$2, styles().actionsRow));
+		return _el$2;
+	})();
+}
+delegateEvents(["mousedown"]);
+
+//#endregion
+export { ActionButtons };
+//# sourceMappingURL=ActionButtons.js.map

package/dist/components/ActionButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtons.js","names":["pacerEventClient","useStyles","PacerEventName","ActionButtonsProps","instance","utilName","ActionButtons","props","styles","utilInstance","utilState","store","state","hasPending","hasEmpty","isPending","isEmpty","undefined","hasFlush","flush","hasCancel","cancel","hasReset","reset","hasClear","clear","hasStart","start","hasStop","stop","hasStartStop","isRunning","_el$","_tmpl$","_$effect","_$className","sectionEmpty","emitName","_el$2","_tmpl$2","_$insert","_el$3","_tmpl$3","_el$4","firstChild","$$mousedown","next","setState","prev","emit","_p$","_v$","actionButton","_v$2","actionDotBlue","e","t","_el$5","_tmpl$4","_el$6","_v$3","_v$4","toLowerCase","includes","_v$5","actionDotGreen","disabled","a","_el$7","_tmpl$5","_el$8","_v$6","_v$7","_v$8","actionDotRed","_el$9","_tmpl$6","_el$0","_v$9","_v$0","actionDotYellow","_el$1","_tmpl$7","_el$10","_v$1","_v$10","_v$11","actionDotOrange","_el$11","_el$12","_v$12","_v$13","actionDotPurple","actionsRow","_$delegateEvents"],"sources":["../../src/components/ActionButtons.tsx"],"sourcesContent":["import { pacerEventClient } from '@tanstack/pacer'\nimport { useStyles } from '../styles/use-styles'\nimport type { PacerEventName } from '@tanstack/pacer'\n\ntype ActionButtonsProps = {\n  instance: any\n  utilName: string\n}\n\nexport function ActionButtons(props: ActionButtonsProps) {\n  const styles = useStyles()\n  const utilInstance = props.instance\n  const utilState = utilInstance?.store?.state\n  const hasPending = utilState && 'isPending' in utilState\n  const hasEmpty = utilState && 'isEmpty' in utilState\n  const isPending = hasPending ? !!utilState.isPending : false\n  const isEmpty = hasEmpty ? utilState.isEmpty : undefined\n\n  const hasFlush = typeof utilInstance.flush === 'function'\n  const hasCancel = typeof utilInstance.cancel === 'function'\n  const hasReset = typeof utilInstance.reset === 'function'\n  const hasClear = typeof utilInstance.clear === 'function'\n  const hasStart = typeof utilInstance.start === 'function'\n  const hasStop = typeof utilInstance.stop === 'function'\n  const hasStartStop = hasStart && hasStop\n\n  const isRunning = utilState?.isRunning ?? true\n\n  if (!hasPending && !hasFlush && !hasCancel && !hasReset && !hasClear) {\n    return (\n      <div class={styles().sectionEmpty}>\n        No actions available for this util\n      </div>\n    )\n  }\n\n  const emitName = `d-${props.utilName}` as PacerEventName\n\n  return (\n    <div class={styles().actionsRow}>\n      {hasPending && (\n        <button\n          class={styles().actionButton}\n          onMouseDown={() => {\n            const next = !isPending\n            utilInstance.store.setState((prev: any) => ({\n              ...prev,\n              isPending: next,\n            }))\n            pacerEventClient.emit(emitName, utilInstance)\n          }}\n        >\n          <span class={styles().actionDotBlue} />\n          {isPending ? 'Restore Pending' : 'Trigger Pending'}\n        </button>\n      )}\n      {hasFlush && (\n        <button\n          class={styles().actionButton}\n          onMouseDown={() => {\n            utilInstance.flush()\n            pacerEventClient.emit(emitName, utilInstance)\n          }}\n          disabled={\n            (props.utilName.toLowerCase().includes('debouncer') &&\n              !isPending) ||\n            (props.utilName.toLowerCase().includes('throttler') &&\n              !isPending) ||\n            (props.utilName.toLowerCase().includes('batcher') && isEmpty) ||\n            (props.utilName.toLowerCase().includes('queuer') && isEmpty)\n          }\n        >\n          <span class={styles().actionDotGreen} />\n          Flush\n        </button>\n      )}\n      {hasCancel && (\n        <button\n          class={styles().actionButton}\n          onMouseDown={() => {\n            utilInstance.cancel()\n            pacerEventClient.emit(emitName, utilInstance)\n          }}\n          disabled={\n            (props.utilName.toLowerCase().includes('debouncer') &&\n              !isPending) ||\n            (props.utilName.toLowerCase().includes('throttler') &&\n              !isPending) ||\n            (props.utilName.toLowerCase().includes('batcher') && isEmpty) ||\n            (props.utilName.toLowerCase().includes('queuer') && isEmpty)\n          }\n        >\n          <span class={styles().actionDotRed} />\n          Cancel\n        </button>\n      )}\n      {hasReset && (\n        <button\n          class={styles().actionButton}\n          onMouseDown={() => {\n            utilInstance.reset()\n            pacerEventClient.emit(emitName, utilInstance)\n          }}\n        >\n          <span class={styles().actionDotYellow} />\n          Reset\n        </button>\n      )}\n      {hasClear && (\n        <button\n          class={styles().actionButton}\n          onMouseDown={() => {\n            utilInstance.clear()\n            pacerEventClient.emit(emitName, utilInstance)\n          }}\n          disabled={\n            (props.utilName.toLowerCase().includes('batcher') && isEmpty) ||\n            (props.utilName.toLowerCase().includes('queuer') && isEmpty)\n          }\n        >\n          <span class={styles().actionDotOrange} />\n          Clear\n        </button>\n      )}\n      {hasStartStop && (\n        <button\n          class={styles().actionButton}\n          onMouseDown={() => {\n            if (isRunning) {\n              utilInstance.stop()\n            } else {\n              utilInstance.start()\n            }\n            pacerEventClient.emit(emitName, utilInstance)\n          }}\n        >\n          <span class={styles().actionDotPurple} />\n          {isRunning ? 'Stop' : 'Start'}\n        </button>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/DetailsPanel.js

@@ -0,0 +1,76 @@
+import { useStyles } from "../styles/use-styles.js";
+import { ActionButtons } from "./ActionButtons.js";
+import { StateHeader } from "./StateHeader.js";
+import { className, createComponent, effect, insert, template } from "solid-js/web";
+import { JsonTree } from "@tanstack/devtools-ui";
+
+//#region src/components/DetailsPanel.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__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>`);
+function DetailsPanel(props) {
+	const styles = useStyles();
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, () => {
+			const entry = props.selectedInstance();
+			if (!entry) return (() => {
+				var _el$2 = _tmpl$2();
+				effect(() => className(_el$2, styles().noSelection));
+				return _el$2;
+			})();
+			return [createComponent(StateHeader, {
+				get selectedInstance() {
+					return props.selectedInstance;
+				},
+				get utilState() {
+					return props.utilState;
+				}
+			}), (() => {
+				var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$6.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling;
+				insert(_el$4, createComponent(ActionButtons, {
+					get instance() {
+						return entry.instance;
+					},
+					get utilName() {
+						return entry.type;
+					}
+				}), null);
+				insert(_el$8, createComponent(JsonTree, { get value() {
+					return entry.instance.store?.state;
+				} }));
+				insert(_el$1, createComponent(JsonTree, { get value() {
+					return entry.instance.options;
+				} }));
+				effect((_p$) => {
+					var _v$ = styles().detailsGrid, _v$2 = styles().detailSection, _v$3 = styles().detailSectionHeader, _v$4 = styles().detailSection, _v$5 = styles().detailSectionHeader, _v$6 = styles().stateContent, _v$7 = styles().detailSection, _v$8 = styles().detailSectionHeader, _v$9 = styles().stateContent;
+					_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+					_v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+					_v$3 !== _p$.a && className(_el$5, _p$.a = _v$3);
+					_v$4 !== _p$.o && className(_el$6, _p$.o = _v$4);
+					_v$5 !== _p$.i && className(_el$7, _p$.i = _v$5);
+					_v$6 !== _p$.n && className(_el$8, _p$.n = _v$6);
+					_v$7 !== _p$.s && className(_el$9, _p$.s = _v$7);
+					_v$8 !== _p$.h && className(_el$0, _p$.h = _v$8);
+					_v$9 !== _p$.r && className(_el$1, _p$.r = _v$9);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0,
+					a: void 0,
+					o: void 0,
+					i: void 0,
+					n: void 0,
+					s: void 0,
+					h: void 0,
+					r: void 0
+				});
+				return _el$3;
+			})()];
+		});
+		effect(() => className(_el$, styles().stateDetails));
+		return _el$;
+	})();
+}
+
+//#endregion
+export { DetailsPanel };
+//# sourceMappingURL=DetailsPanel.js.map

package/dist/components/DetailsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsPanel.js","names":["JsonTree","useStyles","ActionButtons","StateHeader","DetailsPanelProps","selectedInstance","instance","type","utilState","lastUpdatedByKey","Record","DetailsPanel","props","styles","_el$","_tmpl$","_$insert","entry","_el$2","_tmpl$2","_$effect","_$className","noSelection","_$createComponent","_el$3","_tmpl$3","_el$4","firstChild","_el$5","_el$6","nextSibling","_el$7","_el$8","_el$9","_el$0","_el$1","utilName","value","store","state","options","_p$","_v$","detailsGrid","_v$2","detailSection","_v$3","detailSectionHeader","_v$4","_v$5","_v$6","stateContent","_v$7","_v$8","_v$9","e","t","a","o","i","n","s","h","r","undefined","stateDetails"],"sources":["../../src/components/DetailsPanel.tsx"],"sourcesContent":["import { JsonTree } from '@tanstack/devtools-ui'\nimport { useStyles } from '../styles/use-styles'\nimport { ActionButtons } from './ActionButtons'\nimport { StateHeader } from './StateHeader'\n\ntype DetailsPanelProps = {\n  selectedInstance: () => { instance: any; type: string } | null\n  utilState: () => { lastUpdatedByKey: Record<string, number> }\n}\n\nexport function DetailsPanel(props: DetailsPanelProps) {\n  const styles = useStyles()\n\n  return (\n    <div class={styles().stateDetails}>\n      {(() => {\n        const entry = props.selectedInstance()\n        if (!entry) {\n          return (\n            <div class={styles().noSelection}>\n              Select a util from the left panel to view its state\n            </div>\n          )\n        }\n\n        return (\n          <>\n            <StateHeader\n              selectedInstance={props.selectedInstance}\n              utilState={props.utilState}\n            />\n\n            <div class={styles().detailsGrid}>\n              <div class={styles().detailSection}>\n                <div class={styles().detailSectionHeader}>Actions</div>\n                <ActionButtons\n                  instance={entry.instance}\n                  utilName={entry.type}\n                />\n              </div>\n\n              <div class={styles().detailSection}>\n                <div class={styles().detailSectionHeader}>State</div>\n                <div class={styles().stateContent}>\n                  <JsonTree value={entry.instance.store?.state as unknown} />\n                </div>\n              </div>\n\n              <div class={styles().detailSection}>\n                <div class={styles().detailSectionHeader}>Options</div>\n                <div class={styles().stateContent}>\n                  <JsonTree value={entry.instance.options as unknown} />\n                </div>\n              </div>\n            </div>\n          </>\n        )\n      })()}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAUA,SAAgBW,aAAaC,OAA0B;CACrD,MAAMC,SAASZ,WAAW;AAE1B,eAAA;EAAA,IAAAa,OAAAC,QAAA;AAAAC,SAAAF,YAEY;GACN,MAAMG,QAAQL,MAAMP,kBAAkB;AACtC,OAAI,CAACY,MACH,eAAA;IAAA,IAAAC,QAAAC,SAAA;AAAAC,iBAAAC,UAAAH,OACcL,QAAQ,CAACS,YAAW,CAAA;AAAA,WAAAJ;OAAA;AAMpC,UAAA,CAAAK,gBAEKpB,aAAW;IAAA,IACVE,mBAAgB;AAAA,YAAEO,MAAMP;;IAAgB,IACxCG,YAAS;AAAA,YAAEI,MAAMJ;;IAAS,CAAA,SAAA;IAAA,IAAAgB,QAAAC,SAAA,EAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC,YAAAE,QAAAH,MAAAI,aAAAC,QAAAF,MAAAF,YAAAK,QAAAD,MAAAD,aAAAG,QAAAJ,MAAAC,aAAAI,QAAAD,MAAAN,YAAAQ,QAAAD,MAAAJ;AAAAd,WAAAU,OAAAH,gBAMvBrB,eAAa;KAAA,IACZI,WAAQ;AAAA,aAAEW,MAAMX;;KAAQ,IACxB8B,WAAQ;AAAA,aAAEnB,MAAMV;;KAAI,CAAA,EAAA,KAAA;AAAAS,WAAAgB,OAAAT,gBAOnBvB,UAAQ,EAAA,IAACqC,QAAK;AAAA,YAAEpB,MAAMX,SAASgC,OAAOC;OAAgB,CAAA,CAAA;AAAAvB,WAAAmB,OAAAZ,gBAOtDvB,UAAQ,EAAA,IAACqC,QAAK;AAAA,YAAEpB,MAAMX,SAASkC;OAAkB,CAAA,CAAA;AAAApB,YAAAqB,QAAA;KAAA,IAAAC,MAnB5C7B,QAAQ,CAAC8B,aAAWC,OAClB/B,QAAQ,CAACgC,eAAaC,OACpBjC,QAAQ,CAACkC,qBAAmBC,OAO9BnC,QAAQ,CAACgC,eAAaI,OACpBpC,QAAQ,CAACkC,qBAAmBG,OAC5BrC,QAAQ,CAACsC,cAAYC,OAKvBvC,QAAQ,CAACgC,eAAaQ,OACpBxC,QAAQ,CAACkC,qBAAmBO,OAC5BzC,QAAQ,CAACsC;AAAYT,aAAAD,IAAAc,KAAAlC,UAAAG,OAAAiB,IAAAc,IAAAb,IAAA;AAAAE,cAAAH,IAAAe,KAAAnC,UAAAK,OAAAe,IAAAe,IAAAZ,KAAA;AAAAE,cAAAL,IAAAgB,KAAApC,UAAAO,OAAAa,IAAAgB,IAAAX,KAAA;AAAAE,cAAAP,IAAAiB,KAAArC,UAAAQ,OAAAY,IAAAiB,IAAAV,KAAA;AAAAC,cAAAR,IAAAkB,KAAAtC,UAAAU,OAAAU,IAAAkB,IAAAV,KAAA;AAAAC,cAAAT,IAAAmB,KAAAvC,UAAAW,OAAAS,IAAAmB,IAAAV,KAAA;AAAAE,cAAAX,IAAAoB,KAAAxC,UAAAY,OAAAQ,IAAAoB,IAAAT,KAAA;AAAAC,cAAAZ,IAAAqB,KAAAzC,UAAAa,OAAAO,IAAAqB,IAAAT,KAAA;AAAAC,cAAAb,IAAAsB,KAAA1C,UAAAc,OAAAM,IAAAsB,IAAAT,KAAA;AAAA,YAAAb;OAAA;KAAAc,GAAAS;KAAAR,GAAAQ;KAAAP,GAAAO;KAAAN,GAAAM;KAAAL,GAAAK;KAAAJ,GAAAI;KAAAH,GAAAG;KAAAF,GAAAE;KAAAD,GAAAC;KAAA,CAAA;AAAA,WAAAxC;OAAA,CAAA;IAO1C;AAAAJ,eAAAC,UAAAP,MA3CSD,QAAQ,CAACoD,aAAY,CAAA;AAAA,SAAAnD;KAAA"}