@tanstack/pacer-devtools 0.14.0 → 1.0.1

package/dist/{esm/styles → styles}/use-styles.js

@@ -1,49 +1,27 @@
-import * as goober from "goober";
-import { createSignal } from "solid-js";
 import { tokens } from "./tokens.js";
-const stylesFactory = () => {
-  const { colors, font, size, alpha, border } = tokens;
-  const { fontFamily, size: fontSize } = font;
-  const css = goober.css;
-  return {
-    devtoolsPanel: css`
-      background: ${colors.darkGray[900]};
-      color: ${colors.gray[100]};
-      font-family: ${fontFamily.sans};
-      font-size: ${fontSize.sm};
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    `,
-    stickyHeader: css`
-      position: sticky;
-      top: 0;
-      z-index: 10;
-      background: ${colors.darkGray[900]};
-      padding: ${size[2]};
-      font-size: ${fontSize.lg};
-      font-weight: ${font.weight.bold};
-      color: #84cc16;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-      border-bottom: 1px solid ${colors.darkGray[700]};
-      box-shadow: 0 2px 8px 0 ${colors.black + alpha[40]};
-      flex-shrink: 0;
-    `,
-    mainContainer: css`
+import { createEffect, createSignal } from "solid-js";
+import { useTheme } from "@tanstack/devtools-ui";
+import * as goober from "goober";
+
+//#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`
+		dragHandle: css`
       width: 8px;
-      background: ${colors.darkGray[600]};
+      background: ${t(colors.gray[300], colors.darkGray[600])};
       cursor: col-resize;
       position: relative;
       transition: all 0.2s ease;
@@ -53,12 +31,12 @@ const stylesFactory = () => {
       border-radius: 2px;
 
       &:hover {
-        background: ${colors.blue[500]};
+        background: ${t(colors.blue[600], colors.blue[500])};
         margin: 0 ${size[1]};
       }
 
       &.dragging {
-        background: ${colors.blue[600]};
+        background: ${t(colors.blue[700], colors.blue[600])};
         margin: 0 ${size[1]};
       }
 
@@ -70,169 +48,170 @@ const stylesFactory = () => {
         transform: translate(-50%, -50%);
         width: 2px;
         height: 20px;
-        background: ${colors.darkGray[400]};
+        background: ${t(colors.gray[400], colors.darkGray[400])};
         border-radius: 1px;
         pointer-events: none;
       }
 
       &:hover::after,
       &.dragging::after {
-        background: ${colors.blue[300]};
+        background: ${t(colors.blue[500], colors.blue[300])};
       }
     `,
-    leftPanel: css`
-      background: ${colors.darkGray[800]};
+		leftPanel: css`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
       border-radius: ${border.radius.lg};
-      border: 1px solid ${colors.darkGray[700]};
+      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: ${colors.darkGray[800]};
+		rightPanel: css`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
       border-radius: ${border.radius.lg};
-      border: 1px solid ${colors.darkGray[700]};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
       display: flex;
       flex-direction: column;
       overflow: hidden;
       min-height: 0;
       flex: 1;
     `,
-    panelHeader: css`
+		panelHeader: css`
       font-size: ${fontSize.md};
       font-weight: ${font.weight.bold};
-      color: ${colors.blue[400]};
+      color: ${t(colors.blue[700], colors.blue[400])};
       padding: ${size[2]};
-      border-bottom: 1px solid ${colors.darkGray[700]};
-      background: ${colors.darkGray[800]};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
+      background: ${t(colors.gray[100], colors.darkGray[800])};
       flex-shrink: 0;
     `,
-    utilList: css`
+		utilList: css`
       flex: 1;
       overflow-y: auto;
       padding: ${size[1]};
       min-height: 0;
     `,
-    utilGroup: css`
+		utilGroup: css`
       margin-bottom: ${size[2]};
     `,
-    utilGroupHeader: css`
+		utilGroupHeader: css`
       font-size: ${fontSize.xs};
       font-weight: ${font.weight.semibold};
-      color: ${colors.gray[400]};
+      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: ${colors.darkGray[700]};
+      background: ${t(colors.gray[200], colors.darkGray[700])};
       border-radius: ${border.radius.md};
     `,
-    utilRow: css`
+		utilRow: css`
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: ${size[2]};
       margin-bottom: ${size[1]};
-      background: ${colors.darkGray[700]};
+      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: ${colors.darkGray[600]};
-        border-color: ${colors.darkGray[500]};
+        background: ${t(colors.gray[300], colors.darkGray[600])};
+        border-color: ${t(colors.gray[400], colors.darkGray[500])};
       }
     `,
-    utilRowSelected: css`
-      background: ${colors.blue[900] + alpha[20]};
-      border-color: ${colors.blue[500]};
-      box-shadow: 0 0 0 1px ${colors.blue[500] + alpha[30]};
+		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`
+		utilKey: css`
       font-family: ${fontFamily.mono};
       font-size: ${fontSize.xs};
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     `,
-    utilStatus: css`
+		utilStatus: css`
       font-size: ${fontSize.xs};
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[600], colors.gray[400])};
       text-transform: uppercase;
       letter-spacing: 0.05em;
       padding: ${size[1]} ${size[1]};
-      background: ${colors.darkGray[600]};
+      background: ${t(colors.gray[300], colors.darkGray[600])};
       border-radius: ${border.radius.sm};
       margin-left: ${size[1]};
     `,
-    stateDetails: css`
+		stateDetails: css`
       flex: 1;
       overflow-y: auto;
       padding: ${size[2]};
       min-height: 0;
     `,
-    stateHeader: css`
+		stateHeader: css`
       margin-bottom: ${size[2]};
       padding-bottom: ${size[2]};
-      border-bottom: 1px solid ${colors.darkGray[700]};
+      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
     `,
-    stateTitle: css`
+		stateTitle: css`
       font-size: ${fontSize.md};
       font-weight: ${font.weight.bold};
-      color: ${colors.blue[400]};
+      color: ${t(colors.blue[700], colors.blue[400])};
       margin-bottom: ${size[1]};
     `,
-    stateKey: css`
+		stateKey: css`
       font-family: ${fontFamily.mono};
       font-size: ${fontSize.xs};
-      color: ${colors.gray[400]};
+      color: ${t(colors.gray[600], colors.gray[400])};
       word-break: break-all;
     `,
-    stateContent: css`
-      background: ${colors.darkGray[700]};
+		stateContent: css`
+      background: ${t(colors.gray[100], colors.darkGray[700])};
       border-radius: ${border.radius.md};
       padding: ${size[2]};
-      border: 1px solid ${colors.darkGray[600]};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
     `,
-    detailsGrid: css`
+		detailsGrid: css`
       display: grid;
       grid-template-columns: 1fr;
       gap: ${size[2]};
       align-items: start;
     `,
-    detailSection: css`
-      background: ${colors.darkGray[700]};
-      border: 1px solid ${colors.darkGray[600]};
+		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`
+		detailSectionHeader: css`
       font-size: ${fontSize.sm};
       font-weight: ${font.weight.bold};
-      color: ${colors.gray[200]};
+      color: ${t(colors.gray[800], colors.gray[200])};
       margin-bottom: ${size[1]};
       text-transform: uppercase;
       letter-spacing: 0.04em;
     `,
-    actionsRow: css`
+		actionsRow: css`
       display: flex;
       flex-wrap: wrap;
       gap: ${size[2]};
     `,
-    actionButton: css`
+		actionButton: css`
       display: inline-flex;
       align-items: center;
       gap: ${size[1]};
       padding: ${size[1]} ${size[2]};
       border-radius: ${border.radius.md};
-      border: 1px solid ${colors.darkGray[500]};
-      background: ${colors.darkGray[600]};
-      color: ${colors.gray[100]};
+      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;
@@ -240,141 +219,146 @@ const stylesFactory = () => {
         background 0.15s,
         border-color 0.15s;
       &:hover {
-        background: ${colors.darkGray[500]};
-        border-color: ${colors.darkGray[400]};
+        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: ${colors.darkGray[600]};
-          border-color: ${colors.darkGray[500]};
+          background: ${t(colors.gray[200], colors.darkGray[600])};
+          border-color: ${t(colors.gray[300], colors.darkGray[500])};
         }
       }
     `,
-    actionDotBlue: css`
+		actionDotBlue: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.blue[400]};
     `,
-    actionDotGreen: css`
+		actionDotGreen: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.green[400]};
     `,
-    actionDotRed: css`
+		actionDotRed: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.red[400]};
     `,
-    actionDotYellow: css`
+		actionDotYellow: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.yellow[400]};
     `,
-    actionDotOrange: css`
+		actionDotOrange: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.pink[400]};
     `,
-    actionDotPurple: css`
+		actionDotPurple: css`
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: ${colors.purple[400]};
     `,
-    infoGrid: css`
+		infoGrid: css`
       display: grid;
       grid-template-columns: auto 1fr;
       gap: ${size[1]};
       row-gap: ${size[1]};
       align-items: center;
     `,
-    infoLabel: css`
-      color: ${colors.gray[400]};
+		infoLabel: css`
+      color: ${t(colors.gray[600], colors.gray[400])};
       font-size: ${fontSize.xs};
       text-transform: uppercase;
       letter-spacing: 0.05em;
     `,
-    infoValueMono: css`
+		infoValueMono: css`
       font-family: ${fontFamily.mono};
       font-size: ${fontSize.xs};
-      color: ${colors.gray[100]};
+      color: ${t(colors.gray[900], colors.gray[100])};
       word-break: break-all;
     `,
-    noSelection: css`
+		noSelection: css`
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      color: ${colors.gray[500]};
+      color: ${t(colors.gray[500], colors.gray[500])};
       font-style: italic;
       text-align: center;
       padding: ${size[4]};
     `,
-    // Keep existing styles for backward compatibility
-    sectionContainer: css`
+		sectionContainer: css`
       display: flex;
       flex-wrap: wrap;
       gap: ${size[4]};
     `,
-    section: css`
-      background: ${colors.darkGray[800]};
+		section: css`
+      background: ${t(colors.gray[100], colors.darkGray[800])};
       border-radius: ${border.radius.lg};
-      box-shadow: ${tokens.shadow.md(colors.black + alpha[80])};
+      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 ${colors.darkGray[700]};
+      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
       min-width: 0;
       max-width: 33%;
       max-height: fit-content;
     `,
-    sectionHeader: css`
+		sectionHeader: css`
       font-size: ${fontSize.lg};
       font-weight: ${font.weight.bold};
       margin-bottom: ${size[2]};
-      color: ${colors.blue[400]};
+      color: ${t(colors.blue[600], colors.blue[400])};
       letter-spacing: 0.01em;
       display: flex;
       align-items: center;
       gap: ${size[2]};
     `,
-    sectionEmpty: css`
-      color: ${colors.gray[500]};
+		sectionEmpty: css`
+      color: ${t(colors.gray[500], colors.gray[500])};
       font-size: ${fontSize.sm};
       font-style: italic;
       margin: ${size[2]} 0;
     `,
-    instanceList: css`
+		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: ${colors.darkGray[700]};
+		instanceCard: css`
+      background: ${t(colors.gray[200], colors.darkGray[700])};
       border-radius: ${border.radius.md};
       padding: ${size[3]};
-      border: 1px solid ${colors.darkGray[600]};
+      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};
       font-size: ${fontSize.sm};
-      color: ${colors.gray[100]};
+      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 [_styles] = createSignal(stylesFactory());
-  return _styles;
+	const { theme } = useTheme();
+	const [styles, setStyles] = createSignal(stylesFactory(theme()));
+	createEffect(() => {
+		setStyles(stylesFactory(theme()));
+	});
+	return styles;
 }
-export {
-  useStyles
-};
-//# sourceMappingURL=use-styles.js.map
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=use-styles.js.map

package/dist/styles/use-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-styles.js","names":[],"sources":["../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '@tanstack/devtools-ui'\nimport { tokens } from './tokens'\n\nconst stylesFactory = (theme: 'light' | 'dark') => {\n  const { colors, font, size, alpha, border } = tokens\n  const { fontFamily, size: fontSize } = font\n  const css = goober.css\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  return {\n    mainContainer: css`\n      display: flex;\n      flex: 1;\n      min-height: 0;\n      overflow: hidden;\n      padding: ${size[2]};\n      padding-top: 0;\n      margin-top: ${size[2]};\n    `,\n    dragHandle: css`\n      width: 8px;\n      background: ${t(colors.gray[300], colors.darkGray[600])};\n      cursor: col-resize;\n      position: relative;\n      transition: all 0.2s ease;\n      user-select: none;\n      pointer-events: all;\n      margin: 0 ${size[1]};\n      border-radius: 2px;\n\n      &:hover {\n        background: ${t(colors.blue[600], colors.blue[500])};\n        margin: 0 ${size[1]};\n      }\n\n      &.dragging {\n        background: ${t(colors.blue[700], colors.blue[600])};\n        margin: 0 ${size[1]};\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 2px;\n        height: 20px;\n        background: ${t(colors.gray[400], colors.darkGray[400])};\n        border-radius: 1px;\n        pointer-events: none;\n      }\n\n      &:hover::after,\n      &.dragging::after {\n        background: ${t(colors.blue[500], colors.blue[300])};\n      }\n    `,\n    leftPanel: css`\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      border-radius: ${border.radius.lg};\n      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      min-height: 0;\n      flex-shrink: 0;\n    `,\n    rightPanel: css`\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      border-radius: ${border.radius.lg};\n      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      min-height: 0;\n      flex: 1;\n    `,\n    panelHeader: css`\n      font-size: ${fontSize.md};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.blue[700], colors.blue[400])};\n      padding: ${size[2]};\n      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      flex-shrink: 0;\n    `,\n    utilList: css`\n      flex: 1;\n      overflow-y: auto;\n      padding: ${size[1]};\n      min-height: 0;\n    `,\n    utilGroup: css`\n      margin-bottom: ${size[2]};\n    `,\n    utilGroupHeader: css`\n      font-size: ${fontSize.xs};\n      font-weight: ${font.weight.semibold};\n      color: ${t(colors.gray[600], colors.gray[400])};\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin-bottom: ${size[1]};\n      padding: ${size[1]} ${size[2]};\n      background: ${t(colors.gray[200], colors.darkGray[700])};\n      border-radius: ${border.radius.md};\n    `,\n    utilRow: css`\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: ${size[2]};\n      margin-bottom: ${size[1]};\n      background: ${t(colors.gray[200], colors.darkGray[700])};\n      border-radius: ${border.radius.md};\n      cursor: pointer;\n      transition: all 0.2s ease;\n      border: 1px solid transparent;\n\n      &:hover {\n        background: ${t(colors.gray[300], colors.darkGray[600])};\n        border-color: ${t(colors.gray[400], colors.darkGray[500])};\n      }\n    `,\n    utilRowSelected: css`\n      background: ${t(colors.blue[100], colors.blue[900] + alpha[20])};\n      border-color: ${t(colors.blue[600], colors.blue[500])};\n      box-shadow: 0 0 0 1px\n        ${t(colors.blue[600] + alpha[30], colors.blue[500] + alpha[30])};\n    `,\n    utilKey: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `,\n    utilStatus: css`\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[600], colors.gray[400])};\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      padding: ${size[1]} ${size[1]};\n      background: ${t(colors.gray[300], colors.darkGray[600])};\n      border-radius: ${border.radius.sm};\n      margin-left: ${size[1]};\n    `,\n    stateDetails: css`\n      flex: 1;\n      overflow-y: auto;\n      padding: ${size[2]};\n      min-height: 0;\n    `,\n    stateHeader: css`\n      margin-bottom: ${size[2]};\n      padding-bottom: ${size[2]};\n      border-bottom: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n    `,\n    stateTitle: css`\n      font-size: ${fontSize.md};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.blue[700], colors.blue[400])};\n      margin-bottom: ${size[1]};\n    `,\n    stateKey: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[600], colors.gray[400])};\n      word-break: break-all;\n    `,\n    stateContent: css`\n      background: ${t(colors.gray[100], colors.darkGray[700])};\n      border-radius: ${border.radius.md};\n      padding: ${size[2]};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n    `,\n    detailsGrid: css`\n      display: grid;\n      grid-template-columns: 1fr;\n      gap: ${size[2]};\n      align-items: start;\n    `,\n    detailSection: css`\n      background: ${t(colors.white, colors.darkGray[700])};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n      border-radius: ${border.radius.md};\n      padding: ${size[2]};\n    `,\n    detailSectionHeader: css`\n      font-size: ${fontSize.sm};\n      font-weight: ${font.weight.bold};\n      color: ${t(colors.gray[800], colors.gray[200])};\n      margin-bottom: ${size[1]};\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    `,\n    actionsRow: css`\n      display: flex;\n      flex-wrap: wrap;\n      gap: ${size[2]};\n    `,\n    actionButton: css`\n      display: inline-flex;\n      align-items: center;\n      gap: ${size[1]};\n      padding: ${size[1]} ${size[2]};\n      border-radius: ${border.radius.md};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[500])};\n      background: ${t(colors.gray[200], colors.darkGray[600])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      font-size: ${fontSize.xs};\n      cursor: pointer;\n      user-select: none;\n      transition:\n        background 0.15s,\n        border-color 0.15s;\n      &:hover {\n        background: ${t(colors.gray[300], colors.darkGray[500])};\n        border-color: ${t(colors.gray[400], colors.darkGray[400])};\n      }\n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        &:hover {\n          background: ${t(colors.gray[200], colors.darkGray[600])};\n          border-color: ${t(colors.gray[300], colors.darkGray[500])};\n        }\n      }\n    `,\n    actionDotBlue: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.blue[400]};\n    `,\n    actionDotGreen: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.green[400]};\n    `,\n    actionDotRed: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.red[400]};\n    `,\n    actionDotYellow: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.yellow[400]};\n    `,\n    actionDotOrange: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.pink[400]};\n    `,\n    actionDotPurple: css`\n      width: 6px;\n      height: 6px;\n      border-radius: 9999px;\n      background: ${colors.purple[400]};\n    `,\n    infoGrid: css`\n      display: grid;\n      grid-template-columns: auto 1fr;\n      gap: ${size[1]};\n      row-gap: ${size[1]};\n      align-items: center;\n    `,\n    infoLabel: css`\n      color: ${t(colors.gray[600], colors.gray[400])};\n      font-size: ${fontSize.xs};\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    `,\n    infoValueMono: css`\n      font-family: ${fontFamily.mono};\n      font-size: ${fontSize.xs};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      word-break: break-all;\n    `,\n    noSelection: css`\n      flex: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ${t(colors.gray[500], colors.gray[500])};\n      font-style: italic;\n      text-align: center;\n      padding: ${size[4]};\n    `,\n    // Keep existing styles for backward compatibility\n    sectionContainer: css`\n      display: flex;\n      flex-wrap: wrap;\n      gap: ${size[4]};\n    `,\n    section: css`\n      background: ${t(colors.gray[100], colors.darkGray[800])};\n      border-radius: ${border.radius.lg};\n      box-shadow: ${tokens.shadow.md(\n        t(colors.gray[400] + alpha[80], colors.black + alpha[80]),\n      )};\n      padding: ${size[4]};\n      margin-bottom: ${size[4]};\n      border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};\n      min-width: 0;\n      max-width: 33%;\n      max-height: fit-content;\n    `,\n    sectionHeader: css`\n      font-size: ${fontSize.lg};\n      font-weight: ${font.weight.bold};\n      margin-bottom: ${size[2]};\n      color: ${t(colors.blue[600], colors.blue[400])};\n      letter-spacing: 0.01em;\n      display: flex;\n      align-items: center;\n      gap: ${size[2]};\n    `,\n    sectionEmpty: css`\n      color: ${t(colors.gray[500], colors.gray[500])};\n      font-size: ${fontSize.sm};\n      font-style: italic;\n      margin: ${size[2]} 0;\n    `,\n    instanceList: css`\n      display: flex;\n      flex-direction: column;\n      gap: ${size[2]};\n      background: ${t(colors.gray[200], colors.darkGray[700])};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n    `,\n    instanceCard: css`\n      background: ${t(colors.gray[200], colors.darkGray[700])};\n      border-radius: ${border.radius.md};\n      padding: ${size[3]};\n      border: 1px solid ${t(colors.gray[300], colors.darkGray[600])};\n      font-size: ${fontSize.sm};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      font-family: ${fontFamily.mono};\n      overflow-x: auto;\n      transition:\n        box-shadow 0.3s,\n        background 0.3s;\n    `,\n  }\n}\n\nexport function useStyles() {\n  const { theme } = useTheme()\n  const [styles, setStyles] = createSignal(stylesFactory(theme()))\n  createEffect(() => {\n    setStyles(stylesFactory(theme()))\n  })\n  return styles\n}\n"],"mappings":"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"}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@tanstack/pacer-devtools",
-  "version": "0.14.0",
+  "version": "1.0.1",
   "description": "Devtools for Pacer.",
   "author": "Tanner Linsley",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/TanStack/pacer.git",
-    "directory": "packages/pacer"
+    "url": "git+https://github.com/TanStack/pacer.git",
+    "directory": "packages/pacer-devtools"
   },
   "homepage": "https://tanstack.com/pacer",
   "funding": {
@@ -23,30 +23,12 @@
     "pacer"
   ],
   "type": "module",
-  "types": "dist/esm/index.d.ts",
-  "main": "dist/cjs/index.cjs",
-  "module": "dist/esm/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.cts",
-        "default": "./dist/cjs/index.cjs"
-      }
-    },
-    "./production": {
-      "import": {
-        "types": "./dist/esm/production.d.ts",
-        "default": "./dist/esm/production.js"
-      },
-      "require": {
-        "types": "./dist/cjs/production.d.cts",
-        "default": "./dist/cjs/production.cjs"
-      }
-    },
+    ".": "./dist/index.js",
+    "./production": "./dist/production.js",
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -58,18 +40,19 @@
     "src"
   ],
   "peerDependencies": {
-    "@tanstack/pacer": ">=0.14.0"
+    "@tanstack/pacer": ">=0.16.4"
   },
   "dependencies": {
-    "@tanstack/devtools-ui": "^0.3.1",
-    "@tanstack/solid-store": "^0.7.3",
+    "@tanstack/devtools-ui": "^0.4.4",
+    "@tanstack/devtools-utils": "^0.0.9",
+    "@tanstack/solid-store": "^0.8.0",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.13",
-    "goober": "^2.1.16",
-    "solid-js": "^1.9.9"
+    "dayjs": "^1.11.19",
+    "goober": "^2.1.18",
+    "solid-js": "^1.9.10"
   },
   "devDependencies": {
-    "vite-plugin-solid": "^2.11.8"
+    "vite-plugin-solid": "^2.11.10"
   },
   "scripts": {
     "clean": "premove ./build ./dist",
@@ -78,7 +61,6 @@
     "test:lib": "vitest",
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
-    "test:build": "publint --strict",
-    "build": "vite build"
+    "build": "tsdown"
   }
 }

package/src/components/DetailsPanel.tsx

@@ -42,14 +42,14 @@ export function DetailsPanel(props: DetailsPanelProps) {
               <div class={styles().detailSection}>
                 <div class={styles().detailSectionHeader}>State</div>
                 <div class={styles().stateContent}>
-                  <JsonTree value={entry.instance.store?.state} />
+                  <JsonTree value={entry.instance.store?.state as unknown} />
                 </div>
               </div>
 
               <div class={styles().detailSection}>
                 <div class={styles().detailSectionHeader}>Options</div>
                 <div class={styles().stateContent}>
-                  <JsonTree value={entry.instance.options} />
+                  <JsonTree value={entry.instance.options as unknown} />
                 </div>
               </div>
             </div>

package/src/components/Shell.tsx

@@ -1,4 +1,5 @@
 import { createMemo, createSignal, onCleanup, onMount } from 'solid-js'
+import { Header, HeaderLogo, MainPanel } from '@tanstack/devtools-ui'
 import { useStyles } from '../styles/use-styles'
 import { usePacerDevtoolsState } from '../PacerContextProvider'
 import { UTIL_GROUPS } from './util-groups'
@@ -65,8 +66,12 @@ export function Shell() {
   })
 
   return (
-    <div class={styles().devtoolsPanel}>
-      <div class={styles().stickyHeader}>TanStack Pacer</div>
+    <MainPanel>
+      <Header>
+        <HeaderLogo flavor={{ light: '#84cc16', dark: '#84cc16' }}>
+          TanStack Pacer
+        </HeaderLogo>
+      </Header>
 
       <div class={styles().mainContainer}>
         <div
@@ -97,6 +102,6 @@ export function Shell() {
           />
         </div>
       </div>
-    </div>
+    </MainPanel>
   )
 }