From 46793306058ab6d1dc11c32f7162c8c0ca966483 Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Wed, 17 Sep 2025 17:32:26 +0200
Subject: [PATCH 1/3] feat: add expansion depth to json tree

---
 .changeset/silent-beds-create.md              |   5 +
 packages/devtools-ui/src/components/tree.tsx  | 232 ++++++++++--------
 packages/devtools-ui/src/styles/use-styles.ts |  13 +-
 3 files changed, 146 insertions(+), 104 deletions(-)
 create mode 100644 .changeset/silent-beds-create.md

diff --git a/.changeset/silent-beds-create.md b/.changeset/silent-beds-create.md
new file mode 100644
index 00000000..b583e2b7
--- /dev/null
+++ b/.changeset/silent-beds-create.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools-ui': patch
+---
+
+Improvements to the json tree component, now supports expansion length config
diff --git a/packages/devtools-ui/src/components/tree.tsx b/packages/devtools-ui/src/components/tree.tsx
index b8a4e0d6..3e31113e 100644
--- a/packages/devtools-ui/src/components/tree.tsx
+++ b/packages/devtools-ui/src/components/tree.tsx
@@ -3,99 +3,10 @@ import clsx from 'clsx'
 import { css, useStyles } from '../styles/use-styles'
 import { CopiedCopier, Copier, ErrorCopier } from './icons'
 
-export function JsonTree(props: { value: any; copyable?: boolean }) {
-  return <JsonValue isRoot value={props.value} copyable={props.copyable} />
+export function JsonTree(props: { value: any; copyable?: boolean, defaultExpansionDepth?: number }) {
+  return <JsonValue isRoot value={props.value} copyable={props.copyable} depth={0} defaultExpansionDepth={props.defaultExpansionDepth ?? 1} />
 }
-type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
-
-const CopyButton = (props: { value: unknown }) => {
-  const styles = useStyles()
-  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
 
-  return (
-    <button
-      class={styles().tree.actionButton}
-      title="Copy object to clipboard"
-      aria-label={`${
-        copyState() === 'NoCopy'
-          ? 'Copy object to clipboard'
-          : copyState() === 'SuccessCopy'
-            ? 'Object copied to clipboard'
-            : 'Error copying object to clipboard'
-      }`}
-      onClick={
-        copyState() === 'NoCopy'
-          ? () => {
-              navigator.clipboard
-                .writeText(JSON.stringify(props.value, null, 2))
-                .then(
-                  () => {
-                    setCopyState('SuccessCopy')
-                    setTimeout(() => {
-                      setCopyState('NoCopy')
-                    }, 1500)
-                  },
-                  (err) => {
-                    console.error('Failed to copy: ', err)
-                    setCopyState('ErrorCopy')
-                    setTimeout(() => {
-                      setCopyState('NoCopy')
-                    }, 1500)
-                  },
-                )
-            }
-          : undefined
-      }
-    >
-      <Switch>
-        <Match when={copyState() === 'NoCopy'}>
-          <Copier />
-        </Match>
-        <Match when={copyState() === 'SuccessCopy'}>
-          <CopiedCopier theme={'dark'} />
-        </Match>
-        <Match when={copyState() === 'ErrorCopy'}>
-          <ErrorCopier />
-        </Match>
-      </Switch>
-    </button>
-  )
-}
-
-const Expander = (props: { expanded: boolean }) => {
-  const styles = useStyles()
-  return (
-    <span
-      class={clsx(
-        styles().tree.expander,
-        css`
-          transform: rotate(${props.expanded ? 90 : 0}deg);
-        `,
-        props.expanded &&
-          css`
-            & svg {
-              top: -1px;
-            }
-          `,
-      )}
-    >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 12L10 8L6 4"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </span>
-  )
-}
 
 function JsonValue(props: {
   value: any
@@ -103,8 +14,10 @@ function JsonValue(props: {
   isRoot?: boolean
   isLastKey?: boolean
   copyable?: boolean
+  defaultExpansionDepth: number
+  depth: number
 }) {
-  const { value, keyName, isRoot = false, isLastKey, copyable } = props
+  const { value, keyName, isRoot = false, isLastKey, copyable, defaultExpansionDepth, depth } = props
   const styles = useStyles()
 
   return (
@@ -137,12 +50,12 @@ function JsonValue(props: {
         }
         if (Array.isArray(value)) {
           return (
-            <ArrayValue copyable={copyable} keyName={keyName} value={value} />
+            <ArrayValue defaultExpansionDepth={defaultExpansionDepth} depth={depth} copyable={copyable} keyName={keyName} value={value} />
           )
         }
         if (typeof value === 'object') {
           return (
-            <ObjectValue copyable={copyable} keyName={keyName} value={value} />
+            <ObjectValue defaultExpansionDepth={defaultExpansionDepth} depth={depth} copyable={copyable} keyName={keyName} value={value} />
           )
         }
         return <span />
@@ -161,16 +74,32 @@ const ArrayValue = ({
   value,
   keyName,
   copyable,
+  defaultExpansionDepth,
+  depth
 }: {
   value: Array<any>
   copyable?: boolean
   keyName?: string
+  defaultExpansionDepth: number
+  depth: number
 }) => {
   const styles = useStyles()
-  const [expanded, setExpanded] = createSignal(true)
+  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)
+
+  if (value.length === 0) {
+    return (<span class={styles().tree.expanderContainer}>
+      {keyName && <span
+
+        class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
+      >
+        &quot;{keyName}&quot;:{' '}
+      </span>}
+      <span class={styles().tree.valueBraces}>[]</span>
+    </span>)
+  }
   return (
     <span class={styles().tree.expanderContainer}>
-      <Expander expanded={expanded()} />
+      <Expander onClick={() => setExpanded(!expanded())} expanded={expanded()} />
       {keyName && (
         <span
           onclick={(e) => {
@@ -195,6 +124,8 @@ const ArrayValue = ({
                   copyable={copyable}
                   value={item}
                   isLastKey={isLastKey}
+                  defaultExpansionDepth={defaultExpansionDepth}
+                  depth={depth + 1}
                 />
               )
             }}
@@ -222,19 +153,31 @@ const ObjectValue = ({
   value,
   keyName,
   copyable,
+  defaultExpansionDepth,
+  depth
 }: {
   value: Record<string, any>
   keyName?: string
   copyable?: boolean
+  defaultExpansionDepth: number
+  depth: number
 }) => {
   const styles = useStyles()
-  const [expanded, setExpanded] = createSignal(true)
+  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)
   const keys = Object.keys(value)
   const lastKeyName = keys[keys.length - 1]
 
+  if (keys.length === 0) {
+    return (<span class={styles().tree.expanderContainer}>
+      {keyName && <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
+        &quot;{keyName}&quot;:{' '}
+      </span>}
+      <span class={styles().tree.valueBraces}>{"{}"}</span>
+    </span>)
+  }
   return (
     <span class={styles().tree.expanderContainer}>
-      {keyName && <Expander expanded={expanded()} />}
+      {keyName && <Expander onClick={() => setExpanded(!expanded())} expanded={expanded()} />}
       {keyName && (
         <span
           onClick={(e) => {
@@ -259,6 +202,8 @@ const ObjectValue = ({
                   keyName={k}
                   isLastKey={lastKeyName === k}
                   copyable={copyable}
+                  defaultExpansionDepth={defaultExpansionDepth}
+                  depth={depth + 1}
                 />
               </>
             )}
@@ -281,3 +226,94 @@ const ObjectValue = ({
     </span>
   )
 }
+
+type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
+
+const CopyButton = (props: { value: unknown }) => {
+  const styles = useStyles()
+  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
+
+  return (
+    <button
+      class={styles().tree.actionButton}
+      title="Copy object to clipboard"
+      aria-label={`${copyState() === 'NoCopy'
+        ? 'Copy object to clipboard'
+        : copyState() === 'SuccessCopy'
+          ? 'Object copied to clipboard'
+          : 'Error copying object to clipboard'
+        }`}
+      onClick={
+        copyState() === 'NoCopy'
+          ? () => {
+            navigator.clipboard
+              .writeText(JSON.stringify(props.value, null, 2))
+              .then(
+                () => {
+                  setCopyState('SuccessCopy')
+                  setTimeout(() => {
+                    setCopyState('NoCopy')
+                  }, 1500)
+                },
+                (err) => {
+                  console.error('Failed to copy: ', err)
+                  setCopyState('ErrorCopy')
+                  setTimeout(() => {
+                    setCopyState('NoCopy')
+                  }, 1500)
+                },
+              )
+          }
+          : undefined
+      }
+    >
+      <Switch>
+        <Match when={copyState() === 'NoCopy'}>
+          <Copier />
+        </Match>
+        <Match when={copyState() === 'SuccessCopy'}>
+          <CopiedCopier theme={'dark'} />
+        </Match>
+        <Match when={copyState() === 'ErrorCopy'}>
+          <ErrorCopier />
+        </Match>
+      </Switch>
+    </button>
+  )
+}
+
+const Expander = (props: { expanded: boolean, onClick: () => void }) => {
+  const styles = useStyles()
+  return (
+    <span
+      onClick={props.onClick}
+      class={clsx(
+        styles().tree.expander,
+        css`
+          transform: rotate(${props.expanded ? 90 : 0}deg);
+        `,
+        props.expanded &&
+        css`
+            & svg {
+              top: -1px;
+            }
+          `,
+      )}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6 12L10 8L6 4"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+  )
+}
\ No newline at end of file
diff --git a/packages/devtools-ui/src/styles/use-styles.ts b/packages/devtools-ui/src/styles/use-styles.ts
index 9155a379..48435118 100644
--- a/packages/devtools-ui/src/styles/use-styles.ts
+++ b/packages/devtools-ui/src/styles/use-styles.ts
@@ -317,9 +317,9 @@ const stylesFactory = (theme: Theme = 'dark') => {
         height: ${tokens.size[1.5]};
         border-radius: ${tokens.border.radius.full};
         background-color: ${t(
-          tokens.colors[color][500],
-          tokens.colors[color][500],
-        )};
+        tokens.colors[color][500],
+        tokens.colors[color][500],
+      )};
       `,
       base: css`
         display: flex;
@@ -393,6 +393,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
       `,
       expander: css`
         position: absolute;
+        cursor: pointer;
         left: -16px;
         top: 3px;
         & path {
@@ -538,9 +539,9 @@ const stylesFactory = (theme: Theme = 'dark') => {
         border: 1px solid ${t(colors.gray[300], colors.gray[700])};
         border-radius: 0.75rem;
         box-shadow: ${t(
-          '0 1px 3px rgba(0,0,0,0.06)',
-          '0 1px 3px rgba(0,0,0,0.18)',
-        )};
+        '0 1px 3px rgba(0,0,0,0.06)',
+        '0 1px 3px rgba(0,0,0,0.18)',
+      )};
       `,
       title: css`
         font-size: 1.125rem;

From 67d5ff1a1777bde4ddfdc65d77f5c67690f71ac8 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 17 Sep 2025 15:34:34 +0000
Subject: [PATCH 2/3] ci: apply automated fixes

---
 packages/devtools-ui/src/components/tree.tsx  | 149 ++++++++++++------
 packages/devtools-ui/src/styles/use-styles.ts |  12 +-
 2 files changed, 103 insertions(+), 58 deletions(-)

diff --git a/packages/devtools-ui/src/components/tree.tsx b/packages/devtools-ui/src/components/tree.tsx
index 3e31113e..546d8842 100644
--- a/packages/devtools-ui/src/components/tree.tsx
+++ b/packages/devtools-ui/src/components/tree.tsx
@@ -3,11 +3,22 @@ import clsx from 'clsx'
 import { css, useStyles } from '../styles/use-styles'
 import { CopiedCopier, Copier, ErrorCopier } from './icons'
 
-export function JsonTree(props: { value: any; copyable?: boolean, defaultExpansionDepth?: number }) {
-  return <JsonValue isRoot value={props.value} copyable={props.copyable} depth={0} defaultExpansionDepth={props.defaultExpansionDepth ?? 1} />
+export function JsonTree(props: {
+  value: any
+  copyable?: boolean
+  defaultExpansionDepth?: number
+}) {
+  return (
+    <JsonValue
+      isRoot
+      value={props.value}
+      copyable={props.copyable}
+      depth={0}
+      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}
+    />
+  )
 }
 
-
 function JsonValue(props: {
   value: any
   keyName?: string
@@ -17,7 +28,15 @@ function JsonValue(props: {
   defaultExpansionDepth: number
   depth: number
 }) {
-  const { value, keyName, isRoot = false, isLastKey, copyable, defaultExpansionDepth, depth } = props
+  const {
+    value,
+    keyName,
+    isRoot = false,
+    isLastKey,
+    copyable,
+    defaultExpansionDepth,
+    depth,
+  } = props
   const styles = useStyles()
 
   return (
@@ -50,12 +69,24 @@ function JsonValue(props: {
         }
         if (Array.isArray(value)) {
           return (
-            <ArrayValue defaultExpansionDepth={defaultExpansionDepth} depth={depth} copyable={copyable} keyName={keyName} value={value} />
+            <ArrayValue
+              defaultExpansionDepth={defaultExpansionDepth}
+              depth={depth}
+              copyable={copyable}
+              keyName={keyName}
+              value={value}
+            />
           )
         }
         if (typeof value === 'object') {
           return (
-            <ObjectValue defaultExpansionDepth={defaultExpansionDepth} depth={depth} copyable={copyable} keyName={keyName} value={value} />
+            <ObjectValue
+              defaultExpansionDepth={defaultExpansionDepth}
+              depth={depth}
+              copyable={copyable}
+              keyName={keyName}
+              value={value}
+            />
           )
         }
         return <span />
@@ -75,7 +106,7 @@ const ArrayValue = ({
   keyName,
   copyable,
   defaultExpansionDepth,
-  depth
+  depth,
 }: {
   value: Array<any>
   copyable?: boolean
@@ -87,19 +118,23 @@ const ArrayValue = ({
   const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)
 
   if (value.length === 0) {
-    return (<span class={styles().tree.expanderContainer}>
-      {keyName && <span
-
-        class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
-      >
-        &quot;{keyName}&quot;:{' '}
-      </span>}
-      <span class={styles().tree.valueBraces}>[]</span>
-    </span>)
+    return (
+      <span class={styles().tree.expanderContainer}>
+        {keyName && (
+          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
+            &quot;{keyName}&quot;:{' '}
+          </span>
+        )}
+        <span class={styles().tree.valueBraces}>[]</span>
+      </span>
+    )
   }
   return (
     <span class={styles().tree.expanderContainer}>
-      <Expander onClick={() => setExpanded(!expanded())} expanded={expanded()} />
+      <Expander
+        onClick={() => setExpanded(!expanded())}
+        expanded={expanded()}
+      />
       {keyName && (
         <span
           onclick={(e) => {
@@ -154,7 +189,7 @@ const ObjectValue = ({
   keyName,
   copyable,
   defaultExpansionDepth,
-  depth
+  depth,
 }: {
   value: Record<string, any>
   keyName?: string
@@ -168,16 +203,25 @@ const ObjectValue = ({
   const lastKeyName = keys[keys.length - 1]
 
   if (keys.length === 0) {
-    return (<span class={styles().tree.expanderContainer}>
-      {keyName && <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
-        &quot;{keyName}&quot;:{' '}
-      </span>}
-      <span class={styles().tree.valueBraces}>{"{}"}</span>
-    </span>)
+    return (
+      <span class={styles().tree.expanderContainer}>
+        {keyName && (
+          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
+            &quot;{keyName}&quot;:{' '}
+          </span>
+        )}
+        <span class={styles().tree.valueBraces}>{'{}'}</span>
+      </span>
+    )
   }
   return (
     <span class={styles().tree.expanderContainer}>
-      {keyName && <Expander onClick={() => setExpanded(!expanded())} expanded={expanded()} />}
+      {keyName && (
+        <Expander
+          onClick={() => setExpanded(!expanded())}
+          expanded={expanded()}
+        />
+      )}
       {keyName && (
         <span
           onClick={(e) => {
@@ -237,33 +281,34 @@ const CopyButton = (props: { value: unknown }) => {
     <button
       class={styles().tree.actionButton}
       title="Copy object to clipboard"
-      aria-label={`${copyState() === 'NoCopy'
-        ? 'Copy object to clipboard'
-        : copyState() === 'SuccessCopy'
-          ? 'Object copied to clipboard'
-          : 'Error copying object to clipboard'
-        }`}
+      aria-label={`${
+        copyState() === 'NoCopy'
+          ? 'Copy object to clipboard'
+          : copyState() === 'SuccessCopy'
+            ? 'Object copied to clipboard'
+            : 'Error copying object to clipboard'
+      }`}
       onClick={
         copyState() === 'NoCopy'
           ? () => {
-            navigator.clipboard
-              .writeText(JSON.stringify(props.value, null, 2))
-              .then(
-                () => {
-                  setCopyState('SuccessCopy')
-                  setTimeout(() => {
-                    setCopyState('NoCopy')
-                  }, 1500)
-                },
-                (err) => {
-                  console.error('Failed to copy: ', err)
-                  setCopyState('ErrorCopy')
-                  setTimeout(() => {
-                    setCopyState('NoCopy')
-                  }, 1500)
-                },
-              )
-          }
+              navigator.clipboard
+                .writeText(JSON.stringify(props.value, null, 2))
+                .then(
+                  () => {
+                    setCopyState('SuccessCopy')
+                    setTimeout(() => {
+                      setCopyState('NoCopy')
+                    }, 1500)
+                  },
+                  (err) => {
+                    console.error('Failed to copy: ', err)
+                    setCopyState('ErrorCopy')
+                    setTimeout(() => {
+                      setCopyState('NoCopy')
+                    }, 1500)
+                  },
+                )
+            }
           : undefined
       }
     >
@@ -282,7 +327,7 @@ const CopyButton = (props: { value: unknown }) => {
   )
 }
 
-const Expander = (props: { expanded: boolean, onClick: () => void }) => {
+const Expander = (props: { expanded: boolean; onClick: () => void }) => {
   const styles = useStyles()
   return (
     <span
@@ -293,7 +338,7 @@ const Expander = (props: { expanded: boolean, onClick: () => void }) => {
           transform: rotate(${props.expanded ? 90 : 0}deg);
         `,
         props.expanded &&
-        css`
+          css`
             & svg {
               top: -1px;
             }
@@ -316,4 +361,4 @@ const Expander = (props: { expanded: boolean, onClick: () => void }) => {
       </svg>
     </span>
   )
-}
\ No newline at end of file
+}
diff --git a/packages/devtools-ui/src/styles/use-styles.ts b/packages/devtools-ui/src/styles/use-styles.ts
index 48435118..ef309351 100644
--- a/packages/devtools-ui/src/styles/use-styles.ts
+++ b/packages/devtools-ui/src/styles/use-styles.ts
@@ -317,9 +317,9 @@ const stylesFactory = (theme: Theme = 'dark') => {
         height: ${tokens.size[1.5]};
         border-radius: ${tokens.border.radius.full};
         background-color: ${t(
-        tokens.colors[color][500],
-        tokens.colors[color][500],
-      )};
+          tokens.colors[color][500],
+          tokens.colors[color][500],
+        )};
       `,
       base: css`
         display: flex;
@@ -539,9 +539,9 @@ const stylesFactory = (theme: Theme = 'dark') => {
         border: 1px solid ${t(colors.gray[300], colors.gray[700])};
         border-radius: 0.75rem;
         box-shadow: ${t(
-        '0 1px 3px rgba(0,0,0,0.06)',
-        '0 1px 3px rgba(0,0,0,0.18)',
-      )};
+          '0 1px 3px rgba(0,0,0,0.06)',
+          '0 1px 3px rgba(0,0,0,0.18)',
+        )};
       `,
       title: css`
         font-size: 1.125rem;

From 21e409216550677cad60ef8a999ccdcc693eae25 Mon Sep 17 00:00:00 2001
From: Alem Tuzlak <t.zlak@hotmail.com>
Date: Wed, 17 Sep 2025 17:42:13 +0200
Subject: [PATCH 3/3] additional changeset

---
 .changeset/tricky-cloths-joke.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/tricky-cloths-joke.md

diff --git a/.changeset/tricky-cloths-joke.md b/.changeset/tricky-cloths-joke.md
new file mode 100644
index 00000000..0ec6cdd8
--- /dev/null
+++ b/.changeset/tricky-cloths-joke.md
@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools': patch
+'@tanstack/devtools-vite': patch
+---
+
+improve open-source by using location origin