@tanstack/pacer-devtools 1.1.3 → 1.1.5

package/dist/components-DDmnxkL2.js

@@ -0,0 +1,1315 @@
+import { className, createComponent, delegateEvents, effect, insert, memo, setStyleProperty, template } from "solid-js/web";
+import { Header, HeaderLogo, JsonTree, MainPanel, ThemeContextProvider, useTheme } from "@tanstack/devtools-ui";
+import { createStore } from "solid-js/store";
+import { For, createContext, createEffect, createMemo, createSignal, onCleanup, onMount, useContext } from "solid-js";
+import { pacerEventClient } from "@tanstack/pacer/event-client";
+import * as goober from "goober";
+import { useStore } from "@tanstack/solid-store";
+import clsx from "clsx";
+import { pacerEventClient as pacerEventClient$1 } from "@tanstack/pacer";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime.js";
+//#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
+//#region src/styles/tokens.ts
+const tokens = {
+	colors: {
+		inherit: "inherit",
+		current: "currentColor",
+		transparent: "transparent",
+		black: "#000000",
+		white: "#ffffff",
+		neutral: {
+			50: "#f9fafb",
+			100: "#f2f4f7",
+			200: "#eaecf0",
+			300: "#d0d5dd",
+			400: "#98a2b3",
+			500: "#667085",
+			600: "#475467",
+			700: "#344054",
+			800: "#1d2939",
+			900: "#101828"
+		},
+		darkGray: {
+			50: "#525c7a",
+			100: "#49536e",
+			200: "#414962",
+			300: "#394056",
+			400: "#313749",
+			500: "#292e3d",
+			600: "#212530",
+			700: "#191c24",
+			800: "#111318",
+			900: "#0b0d10"
+		},
+		gray: {
+			50: "#f9fafb",
+			100: "#f2f4f7",
+			200: "#eaecf0",
+			300: "#d0d5dd",
+			400: "#98a2b3",
+			500: "#667085",
+			600: "#475467",
+			700: "#344054",
+			800: "#1d2939",
+			900: "#101828"
+		},
+		blue: {
+			25: "#F5FAFF",
+			50: "#EFF8FF",
+			100: "#D1E9FF",
+			200: "#B2DDFF",
+			300: "#84CAFF",
+			400: "#53B1FD",
+			500: "#2E90FA",
+			600: "#1570EF",
+			700: "#175CD3",
+			800: "#1849A9",
+			900: "#194185"
+		},
+		green: {
+			25: "#F6FEF9",
+			50: "#ECFDF3",
+			100: "#D1FADF",
+			200: "#A6F4C5",
+			300: "#6CE9A6",
+			400: "#32D583",
+			500: "#12B76A",
+			600: "#039855",
+			700: "#027A48",
+			800: "#05603A",
+			900: "#054F31"
+		},
+		red: {
+			50: "#fef2f2",
+			100: "#fee2e2",
+			200: "#fecaca",
+			300: "#fca5a5",
+			400: "#f87171",
+			500: "#ef4444",
+			600: "#dc2626",
+			700: "#b91c1c",
+			800: "#991b1b",
+			900: "#7f1d1d",
+			950: "#450a0a"
+		},
+		yellow: {
+			25: "#FFFCF5",
+			50: "#FFFAEB",
+			100: "#FEF0C7",
+			200: "#FEDF89",
+			300: "#FEC84B",
+			400: "#FDB022",
+			500: "#F79009",
+			600: "#DC6803",
+			700: "#B54708",
+			800: "#93370D",
+			900: "#7A2E0E"
+		},
+		purple: {
+			25: "#FAFAFF",
+			50: "#F4F3FF",
+			100: "#EBE9FE",
+			200: "#D9D6FE",
+			300: "#BDB4FE",
+			400: "#9B8AFB",
+			500: "#7A5AF8",
+			600: "#6938EF",
+			700: "#5925DC",
+			800: "#4A1FB8",
+			900: "#3E1C96"
+		},
+		teal: {
+			25: "#F6FEFC",
+			50: "#F0FDF9",
+			100: "#CCFBEF",
+			200: "#99F6E0",
+			300: "#5FE9D0",
+			400: "#2ED3B7",
+			500: "#15B79E",
+			600: "#0E9384",
+			700: "#107569",
+			800: "#125D56",
+			900: "#134E48"
+		},
+		pink: {
+			25: "#fdf2f8",
+			50: "#fce7f3",
+			100: "#fbcfe8",
+			200: "#f9a8d4",
+			300: "#f472b6",
+			400: "#ec4899",
+			500: "#db2777",
+			600: "#be185d",
+			700: "#9d174d",
+			800: "#831843",
+			900: "#500724"
+		},
+		cyan: {
+			25: "#ecfeff",
+			50: "#cffafe",
+			100: "#a5f3fc",
+			200: "#67e8f9",
+			300: "#22d3ee",
+			400: "#06b6d4",
+			500: "#0891b2",
+			600: "#0e7490",
+			700: "#155e75",
+			800: "#164e63",
+			900: "#083344"
+		}
+	},
+	alpha: {
+		100: "ff",
+		90: "e5",
+		80: "cc",
+		70: "b3",
+		60: "99",
+		50: "80",
+		40: "66",
+		30: "4d",
+		20: "33",
+		10: "1a",
+		0: "00"
+	},
+	font: {
+		size: {
+			"2xs": "calc(var(--tsrd-font-size) * 0.625)",
+			xs: "calc(var(--tsrd-font-size) * 0.75)",
+			sm: "calc(var(--tsrd-font-size) * 0.875)",
+			md: "var(--tsrd-font-size)",
+			lg: "calc(var(--tsrd-font-size) * 1.125)",
+			xl: "calc(var(--tsrd-font-size) * 1.25)",
+			"2xl": "calc(var(--tsrd-font-size) * 1.5)",
+			"3xl": "calc(var(--tsrd-font-size) * 1.875)",
+			"4xl": "calc(var(--tsrd-font-size) * 2.25)",
+			"5xl": "calc(var(--tsrd-font-size) * 3)",
+			"6xl": "calc(var(--tsrd-font-size) * 3.75)",
+			"7xl": "calc(var(--tsrd-font-size) * 4.5)",
+			"8xl": "calc(var(--tsrd-font-size) * 6)",
+			"9xl": "calc(var(--tsrd-font-size) * 8)"
+		},
+		lineHeight: {
+			"3xs": "calc(var(--tsrd-font-size) * 0.75)",
+			"2xs": "calc(var(--tsrd-font-size) * 0.875)",
+			xs: "calc(var(--tsrd-font-size) * 1)",
+			sm: "calc(var(--tsrd-font-size) * 1.25)",
+			md: "calc(var(--tsrd-font-size) * 1.5)",
+			lg: "calc(var(--tsrd-font-size) * 1.75)",
+			xl: "calc(var(--tsrd-font-size) * 2)",
+			"2xl": "calc(var(--tsrd-font-size) * 2.25)",
+			"3xl": "calc(var(--tsrd-font-size) * 2.5)",
+			"4xl": "calc(var(--tsrd-font-size) * 2.75)",
+			"5xl": "calc(var(--tsrd-font-size) * 3)",
+			"6xl": "calc(var(--tsrd-font-size) * 3.25)",
+			"7xl": "calc(var(--tsrd-font-size) * 3.5)",
+			"8xl": "calc(var(--tsrd-font-size) * 3.75)",
+			"9xl": "calc(var(--tsrd-font-size) * 4)"
+		},
+		weight: {
+			thin: "100",
+			extralight: "200",
+			light: "300",
+			normal: "400",
+			medium: "500",
+			semibold: "600",
+			bold: "700",
+			extrabold: "800",
+			black: "900"
+		},
+		fontFamily: {
+			sans: "ui-sans-serif, Inter, system-ui, sans-serif, sans-serif",
+			mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
+		}
+	},
+	breakpoints: {
+		xs: "320px",
+		sm: "640px",
+		md: "768px",
+		lg: "1024px",
+		xl: "1280px",
+		"2xl": "1536px"
+	},
+	border: { radius: {
+		none: "0px",
+		xs: "calc(var(--tsrd-font-size) * 0.125)",
+		sm: "calc(var(--tsrd-font-size) * 0.25)",
+		md: "calc(var(--tsrd-font-size) * 0.375)",
+		lg: "calc(var(--tsrd-font-size) * 0.5)",
+		xl: "calc(var(--tsrd-font-size) * 0.75)",
+		"2xl": "calc(var(--tsrd-font-size) * 1)",
+		"3xl": "calc(var(--tsrd-font-size) * 1.5)",
+		full: "9999px"
+	} },
+	size: {
+		0: "0px",
+		.25: "calc(var(--tsrd-font-size) * 0.0625)",
+		.5: "calc(var(--tsrd-font-size) * 0.125)",
+		1: "calc(var(--tsrd-font-size) * 0.25)",
+		1.5: "calc(var(--tsrd-font-size) * 0.375)",
+		2: "calc(var(--tsrd-font-size) * 0.5)",
+		2.5: "calc(var(--tsrd-font-size) * 0.625)",
+		3: "calc(var(--tsrd-font-size) * 0.75)",
+		3.5: "calc(var(--tsrd-font-size) * 0.875)",
+		4: "calc(var(--tsrd-font-size) * 1)",
+		4.5: "calc(var(--tsrd-font-size) * 1.125)",
+		5: "calc(var(--tsrd-font-size) * 1.25)",
+		5.5: "calc(var(--tsrd-font-size) * 1.375)",
+		6: "calc(var(--tsrd-font-size) * 1.5)",
+		6.5: "calc(var(--tsrd-font-size) * 1.625)",
+		7: "calc(var(--tsrd-font-size) * 1.75)",
+		8: "calc(var(--tsrd-font-size) * 2)",
+		9: "calc(var(--tsrd-font-size) * 2.25)",
+		10: "calc(var(--tsrd-font-size) * 2.5)",
+		11: "calc(var(--tsrd-font-size) * 2.75)",
+		12: "calc(var(--tsrd-font-size) * 3)",
+		14: "calc(var(--tsrd-font-size) * 3.5)",
+		16: "calc(var(--tsrd-font-size) * 4)",
+		20: "calc(var(--tsrd-font-size) * 5)",
+		24: "calc(var(--tsrd-font-size) * 6)",
+		28: "calc(var(--tsrd-font-size) * 7)",
+		32: "calc(var(--tsrd-font-size) * 8)",
+		36: "calc(var(--tsrd-font-size) * 9)",
+		40: "calc(var(--tsrd-font-size) * 10)",
+		44: "calc(var(--tsrd-font-size) * 11)",
+		48: "calc(var(--tsrd-font-size) * 12)",
+		52: "calc(var(--tsrd-font-size) * 13)",
+		56: "calc(var(--tsrd-font-size) * 14)",
+		60: "calc(var(--tsrd-font-size) * 15)",
+		64: "calc(var(--tsrd-font-size) * 16)",
+		72: "calc(var(--tsrd-font-size) * 18)",
+		80: "calc(var(--tsrd-font-size) * 20)",
+		96: "calc(var(--tsrd-font-size) * 24)"
+	},
+	shadow: {
+		xs: (_ = "rgb(0 0 0 / 0.1)") => `0 1px 2px 0 rgb(0 0 0 / 0.05)`,
+		sm: (color = "rgb(0 0 0 / 0.1)") => `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}`,
+		md: (color = "rgb(0 0 0 / 0.1)") => `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}`,
+		lg: (color = "rgb(0 0 0 / 0.1)") => `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}`,
+		xl: (color = "rgb(0 0 0 / 0.1)") => `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}`,
+		"2xl": (color = "rgb(0 0 0 / 0.25)") => `0 25px 50px -12px ${color}`,
+		inner: (color = "rgb(0 0 0 / 0.05)") => `inset 0 2px 4px 0 ${color}`,
+		none: () => `none`
+	},
+	zIndices: {
+		hide: -1,
+		auto: "auto",
+		base: 0,
+		docked: 10,
+		dropdown: 1e3,
+		sticky: 1100,
+		banner: 1200,
+		overlay: 1300,
+		modal: 1400,
+		popover: 1500,
+		skipLink: 1600,
+		toast: 1700,
+		tooltip: 1800
+	}
+};
+//#endregion
+//#region src/styles/use-styles.ts
+const stylesFactory = (theme) => {
+	const { colors, font, size, alpha, border } = tokens;
+	const { fontFamily, size: fontSize } = font;
+	const css = goober.css;
+	const t = (light, dark) => theme === "light" ? light : dark;
+	return {
+		mainContainer: css`
+      display: flex;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+      padding: ${size[2]};
+      padding-top: 0;
+      margin-top: ${size[2]};
+    `,
+		dragHandle: css`
+      width: 8px;
+      background: ${t(colors.gray[300], colors.darkGray[600])};
+      cursor: col-resize;
+      position: relative;
+      transition: all 0.2s ease;
+      user-select: none;
+      pointer-events: all;
+      margin: 0 ${size[1]};
+      border-radius: 2px;
+
+      &:hover {
+        background: ${t(colors.blue[600], colors.blue[500])};
+        margin: 0 ${size[1]};
+      }
+
+      &.dragging {
+        background: ${t(colors.blue[700], colors.blue[600])};
+        margin: 0 ${size[1]};
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 2px;
+        height: 20px;
+        background: ${t(colors.gray[400], colors.darkGray[400])};
+        border-radius: 1px;
+        pointer-events: none;
+      }
+
+      &:hover::after,
+      &.dragging::after {
+        background: ${t(colors.blue[500], colors.blue[300])};
+      }
+    `,
+		leftPanel: css`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      border-radius: ${border.radius.lg};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      min-height: 0;
+      flex-shrink: 0;
+    `,
+		rightPanel: css`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      border-radius: ${border.radius.lg};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      min-height: 0;
+      flex: 1;
+    `,
+		panelHeader: css`
+      font-size: ${fontSize.md};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.blue[700], colors.blue[400])};
+      padding: ${size[2]};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      flex-shrink: 0;
+    `,
+		utilList: css`
+      flex: 1;
+      overflow-y: auto;
+      padding: ${size[1]};
+      min-height: 0;
+    `,
+		utilGroup: css`
+      margin-bottom: ${size[2]};
+    `,
+		utilGroupHeader: css`
+      font-size: ${fontSize.xs};
+      font-weight: ${font.weight.semibold};
+      color: ${t(colors.gray[600], colors.gray[400])};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: ${size[1]};
+      padding: ${size[1]} ${size[2]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border-radius: ${border.radius.md};
+    `,
+		utilRow: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: ${size[2]};
+      margin-bottom: ${size[1]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border-radius: ${border.radius.md};
+      cursor: pointer;
+      transition: all 0.2s ease;
+      border: 1px solid transparent;
+
+      &:hover {
+        background: ${t(colors.gray[300], colors.darkGray[600])};
+        border-color: ${t(colors.gray[400], colors.darkGray[500])};
+      }
+    `,
+		utilRowSelected: css`
+      background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};
+      border-color: ${t(colors.blue[600], colors.blue[500])};
+      box-shadow: 0 0 0 1px
+        ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};
+    `,
+		utilKey: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `,
+		utilStatus: css`
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[600], colors.gray[400])};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      padding: ${size[1]} ${size[1]};
+      background: ${t(colors.gray[300], colors.darkGray[600])};
+      border-radius: ${border.radius.sm};
+      margin-left: ${size[1]};
+    `,
+		stateDetails: css`
+      flex: 1;
+      overflow-y: auto;
+      padding: ${size[2]};
+      min-height: 0;
+    `,
+		stateHeader: css`
+      margin-bottom: ${size[2]};
+      padding-bottom: ${size[2]};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+    `,
+		stateTitle: css`
+      font-size: ${fontSize.md};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.blue[700], colors.blue[400])};
+      margin-bottom: ${size[1]};
+    `,
+		stateKey: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[600], colors.gray[400])};
+      word-break: break-all;
+    `,
+		stateContent: css`
+      background: ${t(colors.gray[100], colors.darkGray[700])};
+      border-radius: ${border.radius.md};
+      padding: ${size[2]};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+    `,
+		detailsGrid: css`
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: ${size[2]};
+      align-items: start;
+    `,
+		detailSection: css`
+      background: ${t(colors.white, colors.darkGray[700])};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+      border-radius: ${border.radius.md};
+      padding: ${size[2]};
+    `,
+		detailSectionHeader: css`
+      font-size: ${fontSize.sm};
+      font-weight: ${font.weight.bold};
+      color: ${t(colors.gray[800], colors.gray[200])};
+      margin-bottom: ${size[1]};
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    `,
+		actionsRow: css`
+      display: flex;
+      flex-wrap: wrap;
+      gap: ${size[2]};
+    `,
+		actionButton: css`
+      display: inline-flex;
+      align-items: center;
+      gap: ${size[1]};
+      padding: ${size[1]} ${size[2]};
+      border-radius: ${border.radius.md};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};
+      background: ${t(colors.gray[200], colors.darkGray[600])};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      font-size: ${fontSize.xs};
+      cursor: pointer;
+      user-select: none;
+      transition:
+        background 0.15s,
+        border-color 0.15s;
+      &:hover {
+        background: ${t(colors.gray[300], colors.darkGray[500])};
+        border-color: ${t(colors.gray[400], colors.darkGray[400])};
+      }
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        &:hover {
+          background: ${t(colors.gray[200], colors.darkGray[600])};
+          border-color: ${t(colors.gray[300], colors.darkGray[500])};
+        }
+      }
+    `,
+		actionDotBlue: css`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.blue[400]};
+    `,
+		actionDotGreen: css`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.green[400]};
+    `,
+		actionDotRed: css`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.red[400]};
+    `,
+		actionDotYellow: css`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.yellow[400]};
+    `,
+		actionDotOrange: css`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.pink[400]};
+    `,
+		actionDotPurple: css`
+      width: 6px;
+      height: 6px;
+      border-radius: 9999px;
+      background: ${colors.purple[400]};
+    `,
+		infoGrid: css`
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: ${size[1]};
+      row-gap: ${size[1]};
+      align-items: center;
+    `,
+		infoLabel: css`
+      color: ${t(colors.gray[600], colors.gray[400])};
+      font-size: ${fontSize.xs};
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    `,
+		infoValueMono: css`
+      font-family: ${fontFamily.mono};
+      font-size: ${fontSize.xs};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      word-break: break-all;
+    `,
+		noSelection: css`
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${t(colors.gray[500], colors.gray[500])};
+      font-style: italic;
+      text-align: center;
+      padding: ${size[4]};
+    `,
+		sectionContainer: css`
+      display: flex;
+      flex-wrap: wrap;
+      gap: ${size[4]};
+    `,
+		section: css`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
+      border-radius: ${border.radius.lg};
+      box-shadow: ${tokens.shadow.md(t(colors.gray[400] + alpha[80], colors.black + alpha[80]))};
+      padding: ${size[4]};
+      margin-bottom: ${size[4]};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      min-width: 0;
+      max-width: 33%;
+      max-height: fit-content;
+    `,
+		sectionHeader: css`
+      font-size: ${fontSize.lg};
+      font-weight: ${font.weight.bold};
+      margin-bottom: ${size[2]};
+      color: ${t(colors.blue[600], colors.blue[400])};
+      letter-spacing: 0.01em;
+      display: flex;
+      align-items: center;
+      gap: ${size[2]};
+    `,
+		sectionEmpty: css`
+      color: ${t(colors.gray[500], colors.gray[500])};
+      font-size: ${fontSize.sm};
+      font-style: italic;
+      margin: ${size[2]} 0;
+    `,
+		instanceList: css`
+      display: flex;
+      flex-direction: column;
+      gap: ${size[2]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+    `,
+		instanceCard: css`
+      background: ${t(colors.gray[200], colors.darkGray[700])};
+      border-radius: ${border.radius.md};
+      padding: ${size[3]};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
+      font-size: ${fontSize.sm};
+      color: ${t(colors.gray[900], colors.gray[100])};
+      font-family: ${fontFamily.mono};
+      overflow-x: auto;
+      transition:
+        box-shadow 0.3s,
+        background 0.3s;
+    `
+	};
+};
+function useStyles() {
+	const { theme } = useTheme();
+	const [styles, setStyles] = createSignal(stylesFactory(theme()));
+	createEffect(() => {
+		setStyles(stylesFactory(theme()));
+	});
+	return styles;
+}
+//#endregion
+//#region src/components/util-groups.ts
+const UTIL_GROUPS = [
+	{
+		key: "debouncers",
+		label: "Debouncers",
+		displayName: "Debouncer"
+	},
+	{
+		key: "throttlers",
+		label: "Throttlers",
+		displayName: "Throttler"
+	},
+	{
+		key: "batchers",
+		label: "Batchers",
+		displayName: "Batcher"
+	},
+	{
+		key: "queuers",
+		label: "Queuers",
+		displayName: "Queuer"
+	},
+	{
+		key: "rateLimiters",
+		label: "Rate Limiters",
+		displayName: "Rate Limiter"
+	},
+	{
+		key: "asyncDebouncers",
+		label: "Async Debouncers",
+		displayName: "Async Debouncer"
+	},
+	{
+		key: "asyncThrottlers",
+		label: "Async Throttlers",
+		displayName: "Async Throttler"
+	},
+	{
+		key: "asyncBatchers",
+		label: "Async Batchers",
+		displayName: "Async Batcher"
+	},
+	{
+		key: "asyncQueuers",
+		label: "Async Queuers",
+		displayName: "Async Queuer"
+	},
+	{
+		key: "asyncRateLimiters",
+		label: "Async Rate Limiters",
+		displayName: "Async Rate Limiter"
+	}
+];
+//#endregion
+//#region src/components/UtilList.tsx
+var _tmpl$$4 = /* @__PURE__ */ template(`<div>`), _tmpl$2$2 = /* @__PURE__ */ template(`<div><div>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div><div></div><div>`);
+function UtilList(props) {
+	const styles = useStyles();
+	return (() => {
+		var _el$ = _tmpl$$4();
+		insert(_el$, createComponent(For, {
+			each: UTIL_GROUPS,
+			children: (group) => memo(() => memo(() => props.utilState()[group.key].length > 0)() && (() => {
+				var _el$2 = _tmpl$2$2(), _el$3 = _el$2.firstChild;
+				insert(_el$3, () => group.label);
+				insert(_el$2, createComponent(For, {
+					get each() {
+						return props.utilState()[group.key];
+					},
+					children: (instance) => {
+						const status = (() => {
+							try {
+								const statusAccessor = useStore(instance.store, (s) => s.status);
+								return () => statusAccessor() ?? "unknown";
+							} catch {
+								return () => "unknown";
+							}
+						})();
+						return (() => {
+							var _el$4 = _tmpl$3$2(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+							_el$4.$$click = () => props.setSelectedKey(instance.key ?? null);
+							insert(_el$5, () => instance.key);
+							insert(_el$6, status);
+							effect((_p$) => {
+								var _v$3 = clsx(styles().utilRow, props.selectedKey() === instance.key && styles().utilRowSelected), _v$4 = styles().utilKey, _v$5 = styles().utilStatus;
+								_v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
+								_v$4 !== _p$.t && className(_el$5, _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$4;
+						})();
+					}
+				}), null);
+				effect((_p$) => {
+					var _v$ = styles().utilGroup, _v$2 = styles().utilGroupHeader;
+					_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+					_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$2;
+			})())
+		}));
+		effect(() => className(_el$, styles().utilList));
+		return _el$;
+	})();
+}
+delegateEvents(["click"]);
+//#endregion
+//#region src/components/ActionButtons.tsx
+var _tmpl$$3 = /* @__PURE__ */ template(`<div>No actions available for this util`), _tmpl$2$1 = /* @__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`);
+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$$3();
+		effect(() => className(_el$, styles().sectionEmpty));
+		return _el$;
+	})();
+	const emitName = `d-${props.utilName}`;
+	return (() => {
+		var _el$2 = _tmpl$2$1();
+		insert(_el$2, hasPending && (() => {
+			var _el$3 = _tmpl$3$1(), _el$4 = _el$3.firstChild;
+			_el$3.$$mousedown = () => {
+				const next = !isPending;
+				utilInstance.store.setState((prev) => ({
+					...prev,
+					isPending: next
+				}));
+				pacerEventClient$1.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$1.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$1.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$1.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$1.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$1(), _el$12 = _el$11.firstChild;
+			_el$11.$$mousedown = () => {
+				if (isRunning) utilInstance.stop();
+				else utilInstance.start();
+				pacerEventClient$1.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
+//#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 StateHeader(props) {
+	const styles = useStyles();
+	const [now, setNow] = createSignal(Date.now());
+	onMount(() => {
+		const interval = setInterval(() => {
+			setNow(Date.now());
+		}, 1e3);
+		onCleanup(() => {
+			clearInterval(interval);
+		});
+	});
+	const entry = props.selectedInstance();
+	if (!entry) return null;
+	const key = entry.instance.key;
+	const updatedAt = props.utilState().lastUpdatedByKey[key] ?? Date.now();
+	const getRelativeTime = () => {
+		const diffMs = now() - updatedAt;
+		const diffSeconds = Math.floor(diffMs / 1e3);
+		if (diffSeconds < 60) return `${diffSeconds} second${diffSeconds !== 1 ? "s" : ""} ago`;
+		return dayjs(updatedAt).fromNow();
+	};
+	const getReductionPercentage = () => {
+		const state = entry.instance.store?.state || entry.instance.state;
+		if (!state) return 0;
+		const completedExecutions = entry.type.toLowerCase().includes("async") ? state.settleCount || 0 : state.executionCount || 0;
+		if (entry.type.toLowerCase().includes("batcher")) {
+			const totalItemsProcessed = state.totalItemsProcessed || 0;
+			if (totalItemsProcessed === 0) return 0;
+			return Math.round((totalItemsProcessed - completedExecutions) / totalItemsProcessed * 100);
+		}
+		let requestCount = 0;
+		if (state.maybeExecuteCount !== void 0) requestCount = state.maybeExecuteCount;
+		else if (state.addItemCount !== void 0) requestCount = state.addItemCount;
+		else return 0;
+		if (requestCount === 0) return 0;
+		const reduction = requestCount - completedExecutions;
+		return Math.round(reduction / requestCount * 100);
+	};
+	const reductionPercentage = getReductionPercentage();
+	return (() => {
+		var _el$ = _tmpl$$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$1 = _el$9.nextSibling;
+		_el$1.nextSibling;
+		var _el$10 = _el$4.nextSibling, _el$11 = _el$10.firstChild;
+		insert(_el$2, () => entry.type);
+		insert(_el$6, key);
+		insert(_el$8, () => new Date(updatedAt).toLocaleTimeString(), _el$9);
+		insert(_el$8, getRelativeTime, _el$1);
+		insert(_el$10, reductionPercentage, _el$11);
+		effect((_p$) => {
+			var _v$ = styles().stateHeader, _v$2 = styles().stateTitle, _v$3 = styles().infoGrid, _v$4 = styles().infoLabel, _v$5 = styles().infoValueMono, _v$6 = styles().infoLabel, _v$7 = styles().infoValueMono, _v$8 = styles().infoValueMono;
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+			_v$3 !== _p$.a && className(_el$4, _p$.a = _v$3);
+			_v$4 !== _p$.o && className(_el$5, _p$.o = _v$4);
+			_v$5 !== _p$.i && className(_el$6, _p$.i = _v$5);
+			_v$6 !== _p$.n && className(_el$7, _p$.n = _v$6);
+			_v$7 !== _p$.s && className(_el$8, _p$.s = _v$7);
+			_v$8 !== _p$.h && className(_el$10, _p$.h = _v$8);
+			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
+		});
+		return _el$;
+	})();
+}
+//#endregion
+//#region src/components/DetailsPanel.tsx
+var _tmpl$$1 = /* @__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$$1();
+		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
+//#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`);
+function Shell() {
+	const styles = useStyles();
+	const state = usePacerDevtoolsState();
+	const utilState = () => state;
+	const [selectedKey, setSelectedKey] = createSignal(null);
+	const [leftPanelWidth, setLeftPanelWidth] = createSignal(300);
+	const [isDragging, setIsDragging] = createSignal(false);
+	const selectedInstance = createMemo(() => {
+		const key = selectedKey();
+		if (!key) return null;
+		for (const group of UTIL_GROUPS) {
+			const instance = utilState()[group.key].find((inst) => inst.key === key);
+			if (instance) return {
+				instance,
+				type: group.displayName
+			};
+		}
+		return null;
+	});
+	let dragStartX = 0;
+	let dragStartWidth = 0;
+	const handleMouseDown = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setIsDragging(true);
+		document.body.style.cursor = "col-resize";
+		document.body.style.userSelect = "none";
+		dragStartX = e.clientX;
+		dragStartWidth = leftPanelWidth();
+	};
+	const handleMouseMove = (e) => {
+		if (!isDragging()) return;
+		e.preventDefault();
+		const deltaX = e.clientX - dragStartX;
+		setLeftPanelWidth(Math.max(150, Math.min(800, dragStartWidth + deltaX)));
+	};
+	const handleMouseUp = () => {
+		setIsDragging(false);
+		document.body.style.cursor = "";
+		document.body.style.userSelect = "";
+	};
+	onMount(() => {
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+	});
+	onCleanup(() => {
+		document.removeEventListener("mousemove", handleMouseMove);
+		document.removeEventListener("mouseup", handleMouseUp);
+	});
+	return createComponent(MainPanel, { get children() {
+		return [createComponent(Header, { get children() {
+			return createComponent(HeaderLogo, {
+				flavor: {
+					light: "#84cc16",
+					dark: "#84cc16"
+				},
+				children: "TanStack Pacer"
+			});
+		} }), (() => {
+			var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild;
+			insert(_el$2, createComponent(UtilList, {
+				selectedKey,
+				setSelectedKey,
+				utilState
+			}));
+			_el$3.$$mousedown = handleMouseDown;
+			insert(_el$4, createComponent(DetailsPanel, {
+				selectedInstance,
+				utilState
+			}), null);
+			effect((_p$) => {
+				var _v$ = styles().mainContainer, _v$2 = styles().leftPanel, _v$3 = `${leftPanelWidth()}px`, _v$4 = `${styles().dragHandle} ${isDragging() ? "dragging" : ""}`, _v$5 = styles().rightPanel, _v$6 = styles().panelHeader;
+				_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+				_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+				_v$3 !== _p$.a && setStyleProperty(_el$2, "width", _p$.a = _v$3);
+				_v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+				_v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
+				_v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
+				return _p$;
+			}, {
+				e: void 0,
+				t: void 0,
+				a: void 0,
+				o: void 0,
+				i: void 0,
+				n: void 0
+			});
+			return _el$;
+		})()];
+	} });
+}
+delegateEvents(["mousedown"]);
+//#endregion
+//#region src/components/index.tsx
+function PacerDevtools(props) {
+	return createComponent(ThemeContextProvider, {
+		get theme() {
+			return props.theme;
+		},
+		get children() {
+			return createComponent(PacerContextProvider, { get children() {
+				return createComponent(Shell, {});
+			} });
+		}
+	});
+}
+//#endregion
+export { PacerDevtools as default };