@tanstack/pacer-devtools 1.4.0 → 1.5.0

package/README.md

@@ -103,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-BwHXH_1Y.js → components-BwcTEJfm.js}

@@ -1091,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;
@@ -1110,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();

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

@@ -976,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",
@@ -996,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();

package/dist/index.d.ts

@@ -1,9 +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-BwHXH_1Y.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,6 +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-BwHXH_1Y.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-BXAd-LGS.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-BXAd-LGS.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.4.0",
+  "version": "1.5.0",
   "description": "Devtools for Pacer.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -61,28 +61,27 @@
   },
   "sideEffects": false,
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "files": [
-    "dist/",
-    "src"
+    "dist"
   ],
   "peerDependencies": {
     "@tanstack/pacer": ">=0.16.4"
   },
   "dependencies": {
-    "@tanstack/devtools-ui": "0.6.0",
-    "@tanstack/devtools-utils": "^0.6.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.21",
+    "dayjs": "^1.11.23",
     "goober": "^2.1.19",
-    "solid-js": "^1.9.14"
+    "solid-js": "^1.9.15"
   },
   "devDependencies": {
     "rolldown-plugin-solid": "^0.2.1",
-    "tsdown": "^0.22.14",
+    "tsdown": "^0.23.0",
     "vite-plugin-solid": "^2.11.14"
   },
   "scripts": {
@@ -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
-}

package/src/components/ActionButtons.tsx

@@ -1,170 +0,0 @@
-import { emitChange } from '@tanstack/pacer'
-import { shallow, useSelector } from '@tanstack/solid-store'
-import { useStyles } from '../styles/use-styles'
-import {
-  getPacerUtilStoreState,
-  isPacerUtilTanStackStore,
-} from '../utils/read-pacer-store-state'
-import type { PacerEventName } from '@tanstack/pacer'
-
-type ActionButtonsProps = {
-  instance: any
-  utilName: string
-}
-
-export function ActionButtons(props: ActionButtonsProps) {
-  const styles = useStyles()
-  const utilInstance = props.instance
-  const store = utilInstance?.store
-
-  const stateAccessor = isPacerUtilTanStackStore(store)
-    ? useSelector(
-        store as never,
-        (s: unknown) =>
-          s !== null && s !== undefined && typeof s === 'object'
-            ? (s as Record<string, unknown>)
-            : {},
-        { compare: shallow },
-      )
-    : () => getPacerUtilStoreState(utilInstance) as Record<string, unknown>
-
-  const getState = () => stateAccessor()
-
-  const hasPending = () => {
-    const u = getState()
-    return 'isPending' in u
-  }
-  const isPending = () => {
-    const u = getState()
-    return 'isPending' in u ? !!u.isPending : false
-  }
-  const isEmptyFlag = () => {
-    const u = getState()
-    return 'isEmpty' in u ? !!u.isEmpty : false
-  }
-
-  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 = () => {
-    const u = getState()
-    return 'isRunning' in u ? !!u.isRunning : true
-  }
-
-  if (!hasPending() && !hasFlush && !hasCancel && !hasReset && !hasClear) {
-    return (
-      <div class={styles().sectionEmpty}>
-        No actions available for this util
-      </div>
-    )
-  }
-
-  const emitName = `d-${props.utilName}` as PacerEventName
-  const utilNameLower = props.utilName.toLowerCase()
-
-  return (
-    <div class={styles().actionsRow}>
-      {hasPending() && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            const next = !isPending()
-            utilInstance.store.setState((prev: any) => ({
-              ...prev,
-              isPending: next,
-            }))
-            emitChange(emitName, utilInstance)
-          }}
-        >
-          <span class={styles().actionDotBlue} />
-          {isPending() ? 'Restore Pending' : 'Trigger Pending'}
-        </button>
-      )}
-      {hasFlush && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            utilInstance.flush()
-            emitChange(emitName, utilInstance)
-          }}
-          disabled={
-            (utilNameLower.includes('debouncer') && !isPending()) ||
-            (utilNameLower.includes('throttler') && !isPending()) ||
-            (utilNameLower.includes('batcher') && isEmptyFlag()) ||
-            (utilNameLower.includes('queuer') && isEmptyFlag())
-          }
-        >
-          <span class={styles().actionDotGreen} />
-          Flush
-        </button>
-      )}
-      {hasCancel && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            utilInstance.cancel()
-            emitChange(emitName, utilInstance)
-          }}
-          disabled={
-            (utilNameLower.includes('debouncer') && !isPending()) ||
-            (utilNameLower.includes('throttler') && !isPending()) ||
-            (utilNameLower.includes('batcher') && isEmptyFlag()) ||
-            (utilNameLower.includes('queuer') && isEmptyFlag())
-          }
-        >
-          <span class={styles().actionDotRed} />
-          Cancel
-        </button>
-      )}
-      {hasReset && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            utilInstance.reset()
-            emitChange(emitName, utilInstance)
-          }}
-        >
-          <span class={styles().actionDotYellow} />
-          Reset
-        </button>
-      )}
-      {hasClear && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            utilInstance.clear()
-            emitChange(emitName, utilInstance)
-          }}
-          disabled={
-            (utilNameLower.includes('batcher') && isEmptyFlag()) ||
-            (utilNameLower.includes('queuer') && isEmptyFlag())
-          }
-        >
-          <span class={styles().actionDotOrange} />
-          Clear
-        </button>
-      )}
-      {hasStartStop && (
-        <button
-          class={styles().actionButton}
-          onMouseDown={() => {
-            if (isRunning()) {
-              utilInstance.stop()
-            } else {
-              utilInstance.start()
-            }
-            emitChange(emitName, utilInstance)
-          }}
-        >
-          <span class={styles().actionDotPurple} />
-          {isRunning() ? 'Stop' : 'Start'}
-        </button>
-      )}
-    </div>
-  )
-}

package/src/components/DetailsPanel.tsx

@@ -1,62 +0,0 @@
-import { JsonTree } from '@tanstack/devtools-ui'
-import { useStyles } from '../styles/use-styles'
-import { ActionButtons } from './ActionButtons'
-import { StateHeader } from './StateHeader'
-import { UtilStateJsonTree } from './UtilStateJsonTree'
-
-type DetailsPanelProps = {
-  selectedInstance: () => { instance: any; type: string } | null
-  utilState: () => { lastUpdatedByKey: Record<string, number> }
-}
-
-export function DetailsPanel(props: DetailsPanelProps) {
-  const styles = useStyles()
-
-  return (
-    <div class={styles().stateDetails}>
-      {(() => {
-        const entry = props.selectedInstance()
-        if (!entry) {
-          return (
-            <div class={styles().noSelection}>
-              Select a util from the left panel to view its state
-            </div>
-          )
-        }
-
-        return (
-          <>
-            <StateHeader
-              selectedInstance={props.selectedInstance}
-              utilState={props.utilState}
-            />
-
-            <div class={styles().detailsGrid}>
-              <div class={styles().detailSection}>
-                <div class={styles().detailSectionHeader}>Actions</div>
-                <ActionButtons
-                  instance={entry.instance}
-                  utilName={entry.type}
-                />
-              </div>
-
-              <div class={styles().detailSection}>
-                <div class={styles().detailSectionHeader}>State</div>
-                <div class={styles().stateContent}>
-                  <UtilStateJsonTree instance={entry.instance} />
-                </div>
-              </div>
-
-              <div class={styles().detailSection}>
-                <div class={styles().detailSectionHeader}>Options</div>
-                <div class={styles().stateContent}>
-                  <JsonTree value={entry.instance.options as unknown} />
-                </div>
-              </div>
-            </div>
-          </>
-        )
-      })()}
-    </div>
-  )
-}