@tanstack/devtools-ui 0.3.5 → 0.4.1

package/dist/esm/components/tree.d.ts

@@ -1,5 +1,7 @@
-export declare function JsonTree(props: {
-    value: any;
+import { CollapsiblePaths } from '../utils/deep-keys.js';
+export declare function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {
+    value: TData;
     copyable?: boolean;
     defaultExpansionDepth?: number;
+    collapsePaths?: Array<TName>;
 }): import("solid-js").JSX.Element;

package/dist/esm/components/tree.js

@@ -16,131 +16,163 @@ function JsonTree(props) {
     depth: 0,
     get defaultExpansionDepth() {
       return props.defaultExpansionDepth ?? 1;
+    },
+    path: "",
+    get collapsePaths() {
+      return props.collapsePaths;
     }
   });
 }
 function JsonValue(props) {
-  const {
-    value,
-    keyName,
-    isRoot = false,
-    isLastKey,
-    copyable,
-    defaultExpansionDepth,
-    depth
-  } = props;
   const styles = useStyles();
   return (() => {
     var _el$ = _tmpl$();
     insert(_el$, (() => {
-      var _c$ = memo(() => !!(keyName && typeof value !== "object" && !Array.isArray(value)));
+      var _c$ = memo(() => !!(props.keyName && typeof props.value !== "object" && !Array.isArray(props.value)));
       return () => _c$() && (() => {
         var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling;
         _el$5.nextSibling;
-        insert(_el$2, keyName, _el$5);
+        insert(_el$2, () => props.keyName, _el$5);
         effect(() => className(_el$2, styles().tree.valueKey));
         return _el$2;
       })();
     })(), null);
     insert(_el$, () => {
-      if (typeof value === "string") {
+      if (typeof props.value === "string") {
         return (() => {
           var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild, _el$9 = _el$7.nextSibling;
           _el$9.nextSibling;
-          insert(_el$6, value, _el$9);
+          insert(_el$6, () => props.value, _el$9);
           effect(() => className(_el$6, styles().tree.valueString));
           return _el$6;
         })();
       }
-      if (typeof value === "number") {
+      if (typeof props.value === "number") {
         return (() => {
           var _el$0 = _tmpl$();
-          insert(_el$0, value);
+          insert(_el$0, () => props.value);
           effect(() => className(_el$0, styles().tree.valueNumber));
           return _el$0;
         })();
       }
-      if (typeof value === "boolean") {
+      if (typeof props.value === "boolean") {
         return (() => {
           var _el$1 = _tmpl$();
-          insert(_el$1, () => String(value));
+          insert(_el$1, () => String(props.value));
           effect(() => className(_el$1, styles().tree.valueBoolean));
           return _el$1;
         })();
       }
-      if (value === null) {
+      if (props.value === null) {
         return (() => {
           var _el$10 = _tmpl$4();
           effect(() => className(_el$10, styles().tree.valueNull));
           return _el$10;
         })();
       }
-      if (value === void 0) {
+      if (props.value === void 0) {
         return (() => {
           var _el$11 = _tmpl$5();
           effect(() => className(_el$11, styles().tree.valueNull));
           return _el$11;
         })();
       }
-      if (typeof value === "function") {
+      if (typeof props.value === "function") {
         return (() => {
           var _el$12 = _tmpl$();
-          insert(_el$12, () => String(value));
+          insert(_el$12, () => String(props.value));
           effect(() => className(_el$12, styles().tree.valueFunction));
           return _el$12;
         })();
       }
-      if (Array.isArray(value)) {
+      if (Array.isArray(props.value)) {
         return createComponent(ArrayValue, {
-          defaultExpansionDepth,
-          depth,
-          copyable,
-          keyName,
-          value
+          get defaultExpansionDepth() {
+            return props.defaultExpansionDepth;
+          },
+          get depth() {
+            return props.depth;
+          },
+          get copyable() {
+            return props.copyable;
+          },
+          get keyName() {
+            return props.keyName;
+          },
+          get value() {
+            return props.value;
+          },
+          get collapsePaths() {
+            return props.collapsePaths;
+          },
+          get path() {
+            return props.path;
+          }
         });
       }
-      if (typeof value === "object") {
+      if (typeof props.value === "object") {
         return createComponent(ObjectValue, {
-          defaultExpansionDepth,
-          depth,
-          copyable,
-          keyName,
-          value
+          get defaultExpansionDepth() {
+            return props.defaultExpansionDepth;
+          },
+          get depth() {
+            return props.depth;
+          },
+          get copyable() {
+            return props.copyable;
+          },
+          get keyName() {
+            return props.keyName;
+          },
+          get value() {
+            return props.value;
+          },
+          get collapsePaths() {
+            return props.collapsePaths;
+          },
+          get path() {
+            return props.path;
+          }
         });
       }
       return _tmpl$();
     }, null);
-    insert(_el$, copyable && (() => {
-      var _el$14 = _tmpl$6();
-      insert(_el$14, createComponent(CopyButton, {
-        value
-      }));
-      effect(() => className(_el$14, clsx(styles().tree.actions, "actions")));
-      return _el$14;
+    insert(_el$, (() => {
+      var _c$2 = memo(() => !!props.copyable);
+      return () => _c$2() && (() => {
+        var _el$14 = _tmpl$6();
+        insert(_el$14, createComponent(CopyButton, {
+          get value() {
+            return props.value;
+          }
+        }));
+        effect(() => className(_el$14, clsx(styles().tree.actions, "actions")));
+        return _el$14;
+      })();
     })(), null);
-    insert(_el$, isLastKey || isRoot ? "" : _tmpl$7(), null);
-    effect(() => className(_el$, styles().tree.valueContainer(isRoot)));
+    insert(_el$, (() => {
+      var _c$3 = memo(() => !!(props.isLastKey || props.isRoot));
+      return () => _c$3() ? "" : _tmpl$7();
+    })(), null);
+    effect(() => className(_el$, styles().tree.valueContainer(props.isRoot ?? false)));
     return _el$;
   })();
 }
-const ArrayValue = ({
-  value,
-  keyName,
-  copyable,
-  defaultExpansionDepth,
-  depth
-}) => {
+const ArrayValue = (props) => {
   const styles = useStyles();
-  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth);
-  if (value.length === 0) {
+  const [expanded, setExpanded] = createSignal(props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path));
+  if (props.value.length === 0) {
     return (() => {
       var _el$16 = _tmpl$8(), _el$17 = _el$16.firstChild;
-      insert(_el$16, keyName && (() => {
-        var _el$18 = _tmpl$2(), _el$19 = _el$18.firstChild, _el$21 = _el$19.nextSibling;
-        _el$21.nextSibling;
-        insert(_el$18, keyName, _el$21);
-        effect(() => className(_el$18, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$18;
+      insert(_el$16, (() => {
+        var _c$4 = memo(() => !!props.keyName);
+        return () => _c$4() && (() => {
+          var _el$18 = _tmpl$2(), _el$19 = _el$18.firstChild, _el$21 = _el$19.nextSibling;
+          _el$21.nextSibling;
+          insert(_el$18, () => props.keyName, _el$21);
+          effect(() => className(_el$18, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+          return _el$18;
+        })();
       })(), _el$17);
       effect((_p$) => {
         var _v$ = styles().tree.expanderContainer, _v$2 = styles().tree.valueBraces;
@@ -162,25 +194,28 @@ const ArrayValue = ({
         return expanded();
       }
     }), _el$23);
-    insert(_el$22, keyName && (() => {
-      var _el$27 = _tmpl$1(), _el$28 = _el$27.firstChild, _el$33 = _el$28.nextSibling, _el$29 = _el$33.nextSibling, _el$31 = _el$29.nextSibling, _el$32 = _el$31.firstChild;
-      _el$27.$$click = (e) => {
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-        setExpanded(!expanded());
-      };
-      insert(_el$27, keyName, _el$33);
-      insert(_el$31, () => value.length, _el$32);
-      effect((_p$) => {
-        var _v$6 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$7 = styles().tree.info;
-        _v$6 !== _p$.e && className(_el$27, _p$.e = _v$6);
-        _v$7 !== _p$.t && className(_el$31, _p$.t = _v$7);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0
-      });
-      return _el$27;
+    insert(_el$22, (() => {
+      var _c$5 = memo(() => !!props.keyName);
+      return () => _c$5() && (() => {
+        var _el$27 = _tmpl$1(), _el$28 = _el$27.firstChild, _el$33 = _el$28.nextSibling, _el$29 = _el$33.nextSibling, _el$31 = _el$29.nextSibling, _el$32 = _el$31.firstChild;
+        _el$27.$$click = (e) => {
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          setExpanded(!expanded());
+        };
+        insert(_el$27, () => props.keyName, _el$33);
+        insert(_el$31, () => props.value.length, _el$32);
+        effect((_p$) => {
+          var _v$6 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$7 = styles().tree.info;
+          _v$6 !== _p$.e && className(_el$27, _p$.e = _v$6);
+          _v$7 !== _p$.t && className(_el$31, _p$.t = _v$7);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$27;
+      })();
     })(), _el$23);
     insert(_el$22, createComponent(Show, {
       get when() {
@@ -189,19 +224,33 @@ const ArrayValue = ({
       get children() {
         var _el$24 = _tmpl$();
         insert(_el$24, createComponent(For, {
-          each: value,
+          get each() {
+            return props.value;
+          },
           children: (item, i) => {
-            const isLastKey = i() === value.length - 1;
+            const isLastKey = i() === props.value.length - 1;
             return createComponent(JsonValue, {
-              copyable,
+              get copyable() {
+                return props.copyable;
+              },
               value: item,
               isLastKey,
-              defaultExpansionDepth,
-              depth: depth + 1
+              get defaultExpansionDepth() {
+                return props.defaultExpansionDepth;
+              },
+              get depth() {
+                return props.depth + 1;
+              },
+              get collapsePaths() {
+                return props.collapsePaths;
+              },
+              get path() {
+                return memo(() => !!props.path)() ? `${props.path}[${i()}]` : `[${i()}]`;
+              }
             });
           }
         }));
-        effect(() => className(_el$24, styles().tree.expandedLine(Boolean(keyName))));
+        effect(() => className(_el$24, styles().tree.expandedLine(Boolean(props.keyName))));
         return _el$24;
       }
     }), _el$26);
@@ -234,26 +283,23 @@ const ArrayValue = ({
     return _el$22;
   })();
 };
-const ObjectValue = ({
-  value,
-  keyName,
-  copyable,
-  defaultExpansionDepth,
-  depth
-}) => {
+const ObjectValue = (props) => {
   const styles = useStyles();
-  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth);
-  const keys = Object.keys(value);
+  const [expanded, setExpanded] = createSignal(props.depth <= props.defaultExpansionDepth && !props.collapsePaths?.includes(props.path));
+  const keys = Object.keys(props.value);
   const lastKeyName = keys[keys.length - 1];
   if (keys.length === 0) {
     return (() => {
       var _el$34 = _tmpl$10(), _el$35 = _el$34.firstChild;
-      insert(_el$34, keyName && (() => {
-        var _el$36 = _tmpl$2(), _el$37 = _el$36.firstChild, _el$39 = _el$37.nextSibling;
-        _el$39.nextSibling;
-        insert(_el$36, keyName, _el$39);
-        effect(() => className(_el$36, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$36;
+      insert(_el$34, (() => {
+        var _c$6 = memo(() => !!props.keyName);
+        return () => _c$6() && (() => {
+          var _el$36 = _tmpl$2(), _el$37 = _el$36.firstChild, _el$39 = _el$37.nextSibling;
+          _el$39.nextSibling;
+          insert(_el$36, () => props.keyName, _el$39);
+          effect(() => className(_el$36, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+          return _el$36;
+        })();
       })(), _el$35);
       effect((_p$) => {
         var _v$8 = styles().tree.expanderContainer, _v$9 = styles().tree.valueBraces;
@@ -269,31 +315,37 @@ const ObjectValue = ({
   }
   return (() => {
     var _el$40 = _tmpl$11(), _el$41 = _el$40.firstChild, _el$44 = _el$41.nextSibling;
-    insert(_el$40, keyName && createComponent(Expander, {
-      onClick: () => setExpanded(!expanded()),
-      get expanded() {
-        return expanded();
-      }
-    }), _el$41);
-    insert(_el$40, keyName && (() => {
-      var _el$45 = _tmpl$1(), _el$46 = _el$45.firstChild, _el$51 = _el$46.nextSibling, _el$47 = _el$51.nextSibling, _el$49 = _el$47.nextSibling, _el$50 = _el$49.firstChild;
-      _el$45.$$click = (e) => {
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-        setExpanded(!expanded());
-      };
-      insert(_el$45, keyName, _el$51);
-      insert(_el$49, () => keys.length, _el$50);
-      effect((_p$) => {
-        var _v$11 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$12 = styles().tree.info;
-        _v$11 !== _p$.e && className(_el$45, _p$.e = _v$11);
-        _v$12 !== _p$.t && className(_el$49, _p$.t = _v$12);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0
+    insert(_el$40, (() => {
+      var _c$7 = memo(() => !!props.keyName);
+      return () => _c$7() && createComponent(Expander, {
+        onClick: () => setExpanded(!expanded()),
+        get expanded() {
+          return expanded();
+        }
       });
-      return _el$45;
+    })(), _el$41);
+    insert(_el$40, (() => {
+      var _c$8 = memo(() => !!props.keyName);
+      return () => _c$8() && (() => {
+        var _el$45 = _tmpl$1(), _el$46 = _el$45.firstChild, _el$51 = _el$46.nextSibling, _el$47 = _el$51.nextSibling, _el$49 = _el$47.nextSibling, _el$50 = _el$49.firstChild;
+        _el$45.$$click = (e) => {
+          e.stopPropagation();
+          e.stopImmediatePropagation();
+          setExpanded(!expanded());
+        };
+        insert(_el$45, () => props.keyName, _el$51);
+        insert(_el$49, () => keys.length, _el$50);
+        effect((_p$) => {
+          var _v$11 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$12 = styles().tree.info;
+          _v$11 !== _p$.e && className(_el$45, _p$.e = _v$11);
+          _v$12 !== _p$.t && className(_el$49, _p$.t = _v$12);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$45;
+      })();
     })(), _el$41);
     insert(_el$40, createComponent(Show, {
       get when() {
@@ -305,16 +357,28 @@ const ObjectValue = ({
           each: keys,
           children: (k) => createComponent(JsonValue, {
             get value() {
-              return value[k];
+              return props.value[k];
             },
             keyName: k,
             isLastKey: lastKeyName === k,
-            copyable,
-            defaultExpansionDepth,
-            depth: depth + 1
+            get copyable() {
+              return props.copyable;
+            },
+            get defaultExpansionDepth() {
+              return props.defaultExpansionDepth;
+            },
+            get depth() {
+              return props.depth + 1;
+            },
+            get collapsePaths() {
+              return props.collapsePaths;
+            },
+            get path() {
+              return `${props.path}${props.path ? "." : ""}${k}`;
+            }
           })
         }));
-        effect(() => className(_el$42, styles().tree.expandedLine(Boolean(keyName))));
+        effect(() => className(_el$42, styles().tree.expandedLine(Boolean(props.keyName))));
         return _el$42;
       }
     }), _el$44);

package/dist/esm/components/tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { css, useStyles } from '../styles/use-styles'\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\n\nexport function JsonTree(props: {\n  value: any\n  copyable?: boolean\n  defaultExpansionDepth?: number\n}) {\n  return (\n    <JsonValue\n      isRoot\n      value={props.value}\n      copyable={props.copyable}\n      depth={0}\n      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}\n    />\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n  defaultExpansionDepth: number\n  depth: number\n}) {\n  const {\n    value,\n    keyName,\n    isRoot = false,\n    isLastKey,\n    copyable,\n    defaultExpansionDepth,\n    depth,\n  } = props\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(isRoot)}>\n      {keyName && typeof value !== 'object' && !Array.isArray(value) && (\n        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>\n      )}\n      {(() => {\n        if (typeof value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>\n          )\n        }\n        if (typeof value === 'number') {\n          return <span class={styles().tree.valueNumber}>{value}</span>\n        }\n        if (typeof value === 'boolean') {\n          return <span class={styles().tree.valueBoolean}>{String(value)}</span>\n        }\n        if (value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n        if (value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n        if (typeof value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>{String(value)}</span>\n          )\n        }\n        if (Array.isArray(value)) {\n          return (\n            <ArrayValue\n              defaultExpansionDepth={defaultExpansionDepth}\n              depth={depth}\n              copyable={copyable}\n              keyName={keyName}\n              value={value}\n            />\n          )\n        }\n        if (typeof value === 'object') {\n          return (\n            <ObjectValue\n              defaultExpansionDepth={defaultExpansionDepth}\n              depth={depth}\n              copyable={copyable}\n              keyName={keyName}\n              value={value}\n            />\n          )\n        }\n        return <span />\n      })()}\n      {copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={value} />\n        </div>\n      )}\n      {isLastKey || isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = ({\n  value,\n  keyName,\n  copyable,\n  defaultExpansionDepth,\n  depth,\n}: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n  defaultExpansionDepth: number\n  depth: number\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)\n\n  if (value.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{keyName}&quot;:{' '}\n          </span>\n        )}\n        <span class={styles().tree.valueBraces}>[]</span>\n      </span>\n    )\n  }\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander\n        onClick={() => setExpanded(!expanded())}\n        expanded={expanded()}\n      />\n      {keyName && (\n        <span\n          onclick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{value.length} items</span>\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>[</span>\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={value}>\n            {(item, i) => {\n              const isLastKey = i() === value.length - 1\n              return (\n                <JsonValue\n                  copyable={copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                  defaultExpansionDepth={defaultExpansionDepth}\n                  depth={depth + 1}\n                />\n              )\n            }}\n          </For>\n        </span>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>]</span>\n    </span>\n  )\n}\n\nconst ObjectValue = ({\n  value,\n  keyName,\n  copyable,\n  defaultExpansionDepth,\n  depth,\n}: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n  defaultExpansionDepth: number\n  depth: number\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)\n  const keys = Object.keys(value)\n  const lastKeyName = keys[keys.length - 1]\n\n  if (keys.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{keyName}&quot;:{' '}\n          </span>\n        )}\n        <span class={styles().tree.valueBraces}>{'{}'}</span>\n      </span>\n    )\n  }\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {keyName && (\n        <Expander\n          onClick={() => setExpanded(!expanded())}\n          expanded={expanded()}\n        />\n      )}\n      {keyName && (\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={copyable}\n                  defaultExpansionDepth={defaultExpansionDepth}\n                  depth={depth + 1}\n                />\n              </>\n            )}\n          </For>\n        </span>\n      </Show>\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\n\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nconst CopyButton = (props: { value: unknown }) => {\n  const styles = useStyles()\n  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')\n\n  return (\n    <button\n      class={styles().tree.actionButton}\n      title=\"Copy object to clipboard\"\n      aria-label={`${\n        copyState() === 'NoCopy'\n          ? 'Copy object to clipboard'\n          : copyState() === 'SuccessCopy'\n            ? 'Object copied to clipboard'\n            : 'Error copying object to clipboard'\n      }`}\n      onClick={\n        copyState() === 'NoCopy'\n          ? () => {\n              navigator.clipboard\n                .writeText(JSON.stringify(props.value, null, 2))\n                .then(\n                  () => {\n                    setCopyState('SuccessCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                  (err) => {\n                    console.error('Failed to copy: ', err)\n                    setCopyState('ErrorCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                )\n            }\n          : undefined\n      }\n    >\n      <Switch>\n        <Match when={copyState() === 'NoCopy'}>\n          <Copier />\n        </Match>\n        <Match when={copyState() === 'SuccessCopy'}>\n          <CopiedCopier theme={'dark'} />\n        </Match>\n        <Match when={copyState() === 'ErrorCopy'}>\n          <ErrorCopier />\n        </Match>\n      </Switch>\n    </button>\n  )\n}\n\nconst Expander = (props: { expanded: boolean; onClick: () => void }) => {\n  const styles = useStyles()\n  return (\n    <span\n      onClick={props.onClick}\n      class={clsx(\n        styles().tree.expander,\n        css`\n          transform: rotate(${props.expanded ? 90 : 0}deg);\n        `,\n        props.expanded &&\n          css`\n            & svg {\n              top: -1px;\n            }\n          `,\n      )}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 12L10 8L6 4\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","depth","defaultExpansionDepth","keyName","isLastKey","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","Array","isArray","_el$2","_tmpl$2","_el$3","firstChild","_el$5","nextSibling","_$effect","_$className","tree","valueKey","_el$6","_tmpl$3","_el$7","_el$9","valueString","_el$0","valueNumber","_el$1","String","valueBoolean","_el$10","_tmpl$4","valueNull","undefined","_el$11","_tmpl$5","_el$12","valueFunction","ArrayValue","ObjectValue","_el$14","_tmpl$6","CopyButton","clsx","actions","_tmpl$7","valueContainer","expanded","setExpanded","createSignal","length","_el$16","_tmpl$8","_el$17","_el$18","_el$19","_el$21","collapsible","_p$","_v$","expanderContainer","_v$2","valueBraces","e","t","_el$22","_tmpl$0","_el$23","_el$26","Expander","onClick","_el$27","_tmpl$1","_el$28","_el$33","_el$29","_el$31","_el$32","$$click","stopPropagation","stopImmediatePropagation","_v$6","_v$7","info","Show","when","children","_el$24","For","each","item","i","expandedLine","Boolean","_el$25","_tmpl$9","_v$3","_v$4","_v$5","a","keys","Object","lastKeyName","_el$34","_tmpl$10","_el$35","_el$36","_el$37","_el$39","_v$8","_v$9","_el$40","_tmpl$11","_el$41","_el$44","_el$45","_el$46","_el$51","_el$47","_el$49","_el$50","_v$11","_v$12","_el$42","k","_el$43","_v$0","_v$1","_v$10","copyState","setCopyState","_el$52","_tmpl$12","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","Switch","Match","Copier","CopiedCopier","theme","ErrorCopier","_v$13","actionButton","_v$14","_$setAttribute","_el$53","_tmpl$13","expander","css","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"tree.js","sources":["../../../src/components/tree.tsx"],"sourcesContent":["import { For, Match, Show, Switch, createSignal } from 'solid-js'\nimport clsx from 'clsx'\nimport { css, useStyles } from '../styles/use-styles'\nimport { CopiedCopier, Copier, ErrorCopier } from './icons'\nimport type { CollapsiblePaths } from '../utils/deep-keys'\n\nexport function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {\n  value: TData\n  copyable?: boolean\n  defaultExpansionDepth?: number\n  collapsePaths?: Array<TName>\n}) {\n  return (\n    <JsonValue\n      isRoot\n      value={props.value}\n      copyable={props.copyable}\n      depth={0}\n      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}\n      path=\"\"\n      collapsePaths={props.collapsePaths}\n    />\n  )\n}\n\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n\n  defaultExpansionDepth: number\n  depth: number\n\n  collapsePaths?: Array<string>\n  path: string\n}) {\n  const styles = useStyles()\n\n  return (\n    <span class={styles().tree.valueContainer(props.isRoot ?? false)}>\n      {props.keyName &&\n        typeof props.value !== 'object' &&\n        !Array.isArray(props.value) && (\n          <span class={styles().tree.valueKey}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n      {(() => {\n        if (typeof props.value === 'string') {\n          return (\n            <span class={styles().tree.valueString}>\n              &quot;{props.value}&quot;\n            </span>\n          )\n        }\n        if (typeof props.value === 'number') {\n          return <span class={styles().tree.valueNumber}>{props.value}</span>\n        }\n        if (typeof props.value === 'boolean') {\n          return (\n            <span class={styles().tree.valueBoolean}>\n              {String(props.value)}\n            </span>\n          )\n        }\n        if (props.value === null) {\n          return <span class={styles().tree.valueNull}>null</span>\n        }\n        if (props.value === undefined) {\n          return <span class={styles().tree.valueNull}>undefined</span>\n        }\n        if (typeof props.value === 'function') {\n          return (\n            <span class={styles().tree.valueFunction}>\n              {String(props.value)}\n            </span>\n          )\n        }\n        if (Array.isArray(props.value)) {\n          return (\n            <ArrayValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n            />\n          )\n        }\n        if (typeof props.value === 'object') {\n          return (\n            <ObjectValue\n              defaultExpansionDepth={props.defaultExpansionDepth}\n              depth={props.depth}\n              copyable={props.copyable}\n              keyName={props.keyName}\n              value={props.value}\n              collapsePaths={props.collapsePaths}\n              path={props.path}\n            />\n          )\n        }\n        return <span />\n      })()}\n      {props.copyable && (\n        <div class={clsx(styles().tree.actions, 'actions')}>\n          <CopyButton value={props.value} />\n        </div>\n      )}\n      {props.isLastKey || props.isRoot ? '' : <span>,</span>}\n    </span>\n  )\n}\n\nconst ArrayValue = (props: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  if (props.value.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>[]</span>\n      </span>\n    )\n  }\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander\n        onClick={() => setExpanded(!expanded())}\n        expanded={expanded()}\n      />\n\n      {props.keyName && (\n        <span\n          onclick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{props.value.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>[</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={props.value}>\n            {(item, i) => {\n              const isLastKey = i() === props.value.length - 1\n              return (\n                <JsonValue\n                  copyable={props.copyable}\n                  value={item}\n                  isLastKey={isLastKey}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}\n                />\n              )\n            }}\n          </For>\n        </span>\n      </Show>\n\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n      <span class={styles().tree.valueBraces}>]</span>\n    </span>\n  )\n}\n\nconst ObjectValue = (props: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n  defaultExpansionDepth: number\n  depth: number\n  collapsePaths?: Array<string>\n  path: string\n}) => {\n  const styles = useStyles()\n\n  const [expanded, setExpanded] = createSignal(\n    props.depth <= props.defaultExpansionDepth &&\n      !props.collapsePaths?.includes(props.path),\n  )\n\n  const keys = Object.keys(props.value)\n  const lastKeyName = keys[keys.length - 1]\n\n  if (keys.length === 0) {\n    return (\n      <span class={styles().tree.expanderContainer}>\n        {props.keyName && (\n          <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>\n            &quot;{props.keyName}&quot;:{' '}\n          </span>\n        )}\n\n        <span class={styles().tree.valueBraces}>{'{}'}</span>\n      </span>\n    )\n  }\n\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {props.keyName && (\n        <Expander\n          onClick={() => setExpanded(!expanded())}\n          expanded={expanded()}\n        />\n      )}\n\n      {props.keyName && (\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          &quot;{props.keyName}&quot;:{' '}\n          <span class={styles().tree.info}>{keys.length} items</span>\n        </span>\n      )}\n\n      <span class={styles().tree.valueBraces}>{'{'}</span>\n\n      <Show when={expanded()}>\n        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>\n          <For each={keys}>\n            {(k) => (\n              <>\n                <JsonValue\n                  value={props.value[k]}\n                  keyName={k}\n                  isLastKey={lastKeyName === k}\n                  copyable={props.copyable}\n                  defaultExpansionDepth={props.defaultExpansionDepth}\n                  depth={props.depth + 1}\n                  collapsePaths={props.collapsePaths}\n                  path={`${props.path}${props.path ? '.' : ''}${k}`}\n                />\n              </>\n            )}\n          </For>\n        </span>\n      </Show>\n\n      <Show when={!expanded()}>\n        <span\n          onClick={(e) => {\n            e.stopPropagation()\n            e.stopImmediatePropagation()\n            setExpanded(!expanded())\n          }}\n          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}\n        >\n          {`...`}\n        </span>\n      </Show>\n\n      <span class={styles().tree.valueBraces}>{'}'}</span>\n    </span>\n  )\n}\n\ntype CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'\n\nconst CopyButton = (props: { value: unknown }) => {\n  const styles = useStyles()\n  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')\n\n  return (\n    <button\n      class={styles().tree.actionButton}\n      title=\"Copy object to clipboard\"\n      aria-label={`${\n        copyState() === 'NoCopy'\n          ? 'Copy object to clipboard'\n          : copyState() === 'SuccessCopy'\n            ? 'Object copied to clipboard'\n            : 'Error copying object to clipboard'\n      }`}\n      onClick={\n        copyState() === 'NoCopy'\n          ? () => {\n              navigator.clipboard\n                .writeText(JSON.stringify(props.value, null, 2))\n                .then(\n                  () => {\n                    setCopyState('SuccessCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                  (err) => {\n                    console.error('Failed to copy: ', err)\n                    setCopyState('ErrorCopy')\n                    setTimeout(() => {\n                      setCopyState('NoCopy')\n                    }, 1500)\n                  },\n                )\n            }\n          : undefined\n      }\n    >\n      <Switch>\n        <Match when={copyState() === 'NoCopy'}>\n          <Copier />\n        </Match>\n        <Match when={copyState() === 'SuccessCopy'}>\n          <CopiedCopier theme={'dark'} />\n        </Match>\n        <Match when={copyState() === 'ErrorCopy'}>\n          <ErrorCopier />\n        </Match>\n      </Switch>\n    </button>\n  )\n}\n\nconst Expander = (props: { expanded: boolean; onClick: () => void }) => {\n  const styles = useStyles()\n  return (\n    <span\n      onClick={props.onClick}\n      class={clsx(\n        styles().tree.expander,\n        css`\n          transform: rotate(${props.expanded ? 90 : 0}deg);\n        `,\n        props.expanded &&\n          css`\n            & svg {\n              top: -1px;\n            }\n          `,\n      )}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 12L10 8L6 4\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </span>\n  )\n}\n"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","depth","defaultExpansionDepth","path","collapsePaths","styles","useStyles","_el$","_tmpl$","_$insert","_c$","_$memo","keyName","Array","isArray","_el$2","_tmpl$2","_el$3","firstChild","_el$5","nextSibling","_$effect","_$className","tree","valueKey","_el$6","_tmpl$3","_el$7","_el$9","valueString","_el$0","valueNumber","_el$1","String","valueBoolean","_el$10","_tmpl$4","valueNull","undefined","_el$11","_tmpl$5","_el$12","valueFunction","ArrayValue","ObjectValue","_c$2","_el$14","_tmpl$6","CopyButton","clsx","actions","_c$3","isLastKey","_tmpl$7","valueContainer","expanded","setExpanded","createSignal","includes","length","_el$16","_tmpl$8","_el$17","_c$4","_el$18","_el$19","_el$21","collapsible","_p$","_v$","expanderContainer","_v$2","valueBraces","e","t","_el$22","_tmpl$0","_el$23","_el$26","Expander","onClick","_c$5","_el$27","_tmpl$1","_el$28","_el$33","_el$29","_el$31","_el$32","$$click","stopPropagation","stopImmediatePropagation","_v$6","_v$7","info","Show","when","children","_el$24","For","each","item","i","expandedLine","Boolean","_el$25","_tmpl$9","_v$3","_v$4","_v$5","a","keys","Object","lastKeyName","_el$34","_tmpl$10","_el$35","_c$6","_el$36","_el$37","_el$39","_v$8","_v$9","_el$40","_tmpl$11","_el$41","_el$44","_c$7","_c$8","_el$45","_el$46","_el$51","_el$47","_el$49","_el$50","_v$11","_v$12","_el$42","k","_el$43","_v$0","_v$1","_v$10","copyState","setCopyState","_el$52","_tmpl$12","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","Switch","Match","Copier","CopiedCopier","theme","ErrorCopier","_v$13","actionButton","_v$14","_$setAttribute","_el$53","_tmpl$13","expander","css","_$delegateEvents"],"mappings":"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"}

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

@@ -51,6 +51,7 @@ const stylesFactory = (theme = "dark") => {
   const { colors, font, size, alpha, border } = tokens;
   const { fontFamily } = font;
   const t = (light, dark) => theme === "light" ? light : dark;
+  const wrapperSize = 320;
   return {
     logo: css`
       cursor: pointer;
@@ -69,7 +70,7 @@ const stylesFactory = (theme = "dark") => {
     `,
     selectWrapper: css`
       width: 100%;
-      max-width: 300px;
+      max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
@@ -120,7 +121,7 @@ const stylesFactory = (theme = "dark") => {
     `,
     inputWrapper: css`
       width: 100%;
-      max-width: 300px;
+      max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
@@ -143,6 +144,7 @@ const stylesFactory = (theme = "dark") => {
     `,
     input: css`
       appearance: none;
+      box-sizing: border-box;
       width: 100%;
       padding: 0.75rem;
       border-radius: 0.5rem;

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

@@ -1 +1 @@
-{"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '../components/theme'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\nimport type { Theme } from '../components/theme'\n\nconst buttonVariantColors: Record<\n  ButtonVariant,\n  { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n  primary: {\n    bg: tokens.colors.purple[500],\n    hover: tokens.colors.purple[600],\n    active: tokens.colors.purple[700],\n    text: '#fff',\n    border: tokens.colors.purple[500],\n  },\n  secondary: {\n    bg: tokens.colors.gray[800],\n    hover: tokens.colors.gray[700],\n    active: tokens.colors.gray[600],\n    text: tokens.colors.gray[100],\n    border: tokens.colors.gray[700],\n  },\n  info: {\n    bg: tokens.colors.blue[500],\n    hover: tokens.colors.blue[600],\n    active: tokens.colors.blue[700],\n    text: '#fff',\n    border: tokens.colors.blue[500],\n  },\n  warning: {\n    bg: tokens.colors.yellow[500],\n    hover: tokens.colors.yellow[600],\n    active: tokens.colors.yellow[700],\n    text: '#fff',\n    border: tokens.colors.yellow[500],\n  },\n  danger: {\n    bg: tokens.colors.red[500],\n    hover: tokens.colors.red[600],\n    active: tokens.colors.red[700],\n    text: '#fff',\n    border: tokens.colors.red[500],\n  },\n  success: {\n    bg: tokens.colors.green[500],\n    hover: tokens.colors.green[600],\n    active: tokens.colors.green[700],\n    text: '#fff',\n    border: tokens.colors.green[500],\n  },\n}\nexport const css = goober.css\nconst stylesFactory = (theme: Theme = 'dark') => {\n  const { colors, font, size, alpha, border } = tokens\n  const { fontFamily } = font\n\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  return {\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\n    `,\n\n    selectWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    selectContainer: css`\n      width: 100%;\n    `,\n    selectLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    select: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem 3rem 0.75rem 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n      font-size: 0.875rem;\n      transition: all 0.2s ease;\n      cursor: pointer;\n\n      /* Custom arrow */\n      background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n      background-repeat: no-repeat;\n      background-position: right 0.75rem center;\n      background-size: 1.25rem;\n\n      &:hover {\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: 300px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    inputContainer: css`\n      width: 100%;\n    `,\n    inputLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    input: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.2s ease;\n\n      &::placeholder {\n        color: ${t(colors.gray[400], colors.gray[500])};\n      }\n\n      &:hover {\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${t(colors.purple[500], colors.purple[400])};\n        box-shadow: 0 0 0 3px\n          ${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};\n      }\n    `,\n    checkboxWrapper: css`\n      display: flex;\n      align-items: flex-start;\n      gap: 0.75rem;\n      cursor: pointer;\n      user-select: none;\n      padding: 0.5rem;\n      border-radius: 0.5rem;\n      transition: background-color 0.2s ease;\n\n      &:hover {\n        background-color: ${t(colors.gray[100], colors.darkGray[800])};\n      }\n    `,\n    checkboxContainer: css`\n      width: 100%;\n    `,\n    checkboxLabelContainer: css`\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      flex: 1;\n    `,\n    checkbox: css`\n      appearance: none;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid ${t(colors.gray[300], colors.gray[700])};\n      border-radius: 0.375rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      display: grid;\n      place-items: center;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${t(colors.purple[500], colors.purple[400])};\n      }\n\n      &:checked {\n        background-color: ${t(colors.purple[500], colors.purple[700])};\n        border-color: ${t(colors.purple[500], colors.purple[700])};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid ${t('#fff', colors.gray[100])};\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${t(colors.gray[900], colors.gray[100])};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1.4;\n      text-align: left;\n    `,\n    checkboxDescription: css`\n      color: ${t(colors.gray[500], colors.gray[400])};\n      font-size: 0.8rem;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    button: {\n      base: css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-family: ${tokens.font.fontFamily.sans};\n        font-size: 0.8rem;\n        font-weight: 500;\n        border-radius: 0.2rem;\n        padding: 0.2rem 0.6rem;\n        cursor: pointer;\n        transition:\n          background 0.2s,\n          color 0.2s,\n          border 0.2s,\n          box-shadow 0.2s;\n        outline: none;\n        border-width: 1px;\n        border-style: solid;\n      `,\n      variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n        const v = buttonVariantColors[variant]\n        if (ghost) {\n          return css`\n            background: transparent;\n            color: ${t(v.bg, v.bg)};\n            border-color: transparent;\n            &:hover {\n              background: ${t(colors.purple[100], colors.darkGray[700])};\n            }\n            &:active {\n              background: ${t(colors.purple[200], colors.darkGray[800])};\n            }\n          `\n        }\n        if (outline) {\n          return css`\n            background: transparent;\n            color: ${t(v.bg, v.bg)};\n            border-color: ${t(v.bg, v.bg)};\n            &:hover {\n              background: ${t(colors.purple[100], colors.darkGray[700])};\n              border-color: ${t(v.hover, v.hover)};\n            }\n            &:active {\n              background: ${t(colors.purple[200], colors.darkGray[800])};\n              border-color: ${t(v.active, v.active)};\n            }\n          `\n        }\n        // Default solid button\n        return css`\n          background: ${t(v.bg, v.bg)};\n          color: ${t(v.text, v.text)};\n          border-color: ${t(v.border, v.border)};\n          &:hover {\n            background: ${t(v.hover, v.hover)};\n            border-color: ${t(v.hover, v.hover)};\n          }\n          &:active {\n            background: ${t(v.active, v.active)};\n            border-color: ${t(v.active, v.active)};\n          }\n        `\n      },\n    },\n    tag: {\n      dot: (color: keyof typeof tokens.colors) => css`\n        width: ${tokens.size[1.5]};\n        height: ${tokens.size[1.5]};\n        border-radius: ${tokens.border.radius.full};\n        background-color: ${t(\n          tokens.colors[color][500],\n          tokens.colors[color][500],\n        )};\n      `,\n      base: css`\n        display: flex;\n        gap: ${tokens.size[1.5]};\n        box-sizing: border-box;\n        height: ${tokens.size[6.5]};\n        background: ${t(colors.gray[50], colors.darkGray[500])};\n        color: ${t(colors.gray[700], colors.gray[300])};\n        border-radius: ${tokens.border.radius.sm};\n        font-size: ${font.size.sm};\n        padding: ${tokens.size[1]};\n        padding-left: ${tokens.size[1.5]};\n        align-items: center;\n        font-weight: ${font.weight.medium};\n        border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n        user-select: none;\n        position: relative;\n        &:focus-visible {\n          outline-offset: 2px;\n          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n        }\n      `,\n      label: css`\n        font-size: ${font.size.xs};\n      `,\n      count: css`\n        font-size: ${font.size.xs};\n        padding: 0 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t(colors.gray[500], colors.gray[400])};\n        background-color: ${t(colors.gray[200], colors.darkGray[300])};\n        border-radius: 2px;\n        font-variant-numeric: tabular-nums;\n        height: ${tokens.size[4.5]};\n      `,\n    },\n    tree: {\n      info: css`\n        color: ${t(colors.gray[500], colors.gray[500])};\n        font-size: ${font.size.xs};\n        margin-right: ${size[1]};\n      `,\n      actionButton: css`\n        background-color: transparent;\n        color: ${t(colors.gray[500], colors.gray[500])};\n        border: none;\n        display: inline-flex;\n        padding: 0px;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        width: ${size[3]};\n        height: ${size[3]};\n        position: relative;\n        z-index: 1;\n\n        &:hover svg {\n          color: ${t(colors.gray[600], colors.gray[400])};\n        }\n\n        &:focus-visible {\n          border-radius: ${border.radius.xs};\n          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n          outline-offset: 2px;\n        }\n      `,\n      expanderContainer: css`\n        position: relative;\n      `,\n      expander: css`\n        position: absolute;\n        cursor: pointer;\n        left: -16px;\n        top: 3px;\n        & path {\n          stroke: ${t(colors.blue[400], colors.blue[300])};\n        }\n        & svg {\n          width: ${size[3]};\n          height: ${size[3]};\n        }\n\n        display: inline-flex;\n        align-items: center;\n        transition: all 0.1s ease;\n      `,\n      expandedLine: (hasBorder: boolean) => css`\n        display: block;\n        padding-left: 0.75rem;\n        margin-left: -0.7rem;\n        ${hasBorder\n          ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`\n          : ''}\n      `,\n      collapsible: css`\n        cursor: pointer;\n        transition: all 0.2s ease;\n        &:hover {\n          background-color: ${t(colors.gray[100], colors.darkGray[700])};\n          border-radius: ${tokens.border.radius.sm};\n          padding: 0 ${tokens.size[1]};\n        }\n      `,\n      actions: css`\n        display: inline-flex;\n        margin-left: ${size[2]};\n        gap: ${size[2]};\n        align-items: center;\n        & svg {\n          height: 12px;\n          width: 12px;\n        }\n      `,\n      valueCollapsed: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n      `,\n      valueFunction: css`\n        color: ${t(colors.cyan[500], colors.cyan[400])};\n      `,\n      valueString: css`\n        color: ${t(colors.green[500], colors.green[400])};\n      `,\n      valueNumber: css`\n        color: ${t(colors.yellow[500], colors.yellow[400])};\n      `,\n      valueBoolean: css`\n        color: ${t(colors.pink[500], colors.pink[400])};\n      `,\n      valueNull: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-style: italic;\n      `,\n      valueKey: css`\n        color: ${t(colors.blue[400], colors.blue[300])};\n      `,\n      valueBraces: css`\n        color: ${colors.gray[500]};\n      `,\n      valueContainer: (isRoot: boolean) => css`\n        display: block;\n        margin-left: ${isRoot ? '0' : '1rem'};\n\n        &:not(:hover) .actions {\n          display: none;\n        }\n\n        &:hover .actions {\n          display: inline-flex;\n        }\n      `,\n    },\n    header: {\n      row: css`\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: ${tokens.size[2]} ${tokens.size[2.5]};\n        gap: ${tokens.size[2.5]};\n        border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;\n        align-items: center;\n      `,\n      logoAndToggleContainer: css`\n        display: flex;\n        gap: ${tokens.size[3]};\n        align-items: center;\n        & > button {\n          padding: 0;\n          background: transparent;\n          border: none;\n          display: flex;\n          gap: ${size[0.5]};\n          flex-direction: column;\n        }\n      `,\n      logo: css`\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        background-color: transparent;\n        border: none;\n        gap: ${tokens.size[0.5]};\n        padding: 0px;\n        &:hover {\n          opacity: 0.7;\n        }\n        &:focus-visible {\n          outline-offset: 4px;\n          border-radius: ${border.radius.xs};\n          outline: 2px solid ${colors.blue[800]};\n        }\n      `,\n      tanstackLogo: css`\n        font-size: ${font.size.md};\n        font-weight: ${font.weight.bold};\n        line-height: ${font.lineHeight.xs};\n        white-space: nowrap;\n        color: ${t(colors.gray[700], colors.gray[300])};\n      `,\n      flavorLogo: (flavorLight: string, flavorDark: string) => css`\n        font-weight: ${font.weight.semibold};\n        font-size: ${font.size.xs};\n        background: linear-gradient(to right, ${t(flavorLight, flavorDark)});\n        background-clip: text;\n        -webkit-background-clip: text;\n        line-height: 1;\n        -webkit-text-fill-color: transparent;\n        white-space: nowrap;\n      `,\n    },\n    section: {\n      main: css`\n        margin-bottom: 2rem;\n        padding: 1.5rem;\n        background-color: ${t(colors.gray[50], colors.darkGray[800])};\n        border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n        border-radius: 0.75rem;\n        box-shadow: ${t(\n          '0 1px 3px rgba(0,0,0,0.06)',\n          '0 1px 3px rgba(0,0,0,0.18)',\n        )};\n      `,\n      title: css`\n        font-size: 1.125rem;\n        font-weight: 600;\n        color: ${t(colors.gray[900], colors.gray[100])};\n        margin: 0 0 1rem 0;\n        padding-bottom: 0.5rem;\n        border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        text-align: left;\n      `,\n      icon: css`\n        height: 20px;\n        width: 20px;\n        & > svg {\n          height: 100%;\n          width: 100%;\n        }\n        color: ${t(colors.purple[500], colors.purple[400])};\n      `,\n      description: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-size: 0.875rem;\n        margin: 0 0 1.5rem 0;\n        line-height: 1.5;\n        text-align: left;\n      `,\n    },\n    mainPanel: {\n      panel: (withPadding: boolean) => css`\n        padding: ${withPadding ? tokens.size[4] : 0};\n        background: ${t(colors.gray[50], colors.darkGray[700])};\n        overflow-y: auto;\n        height: 100%;\n      `,\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"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-styles.js","sources":["../../../src/styles/use-styles.ts"],"sourcesContent":["import * as goober from 'goober'\nimport { createEffect, createSignal } from 'solid-js'\nimport { useTheme } from '../components/theme'\nimport { tokens } from './tokens'\nimport type { ButtonVariant } from '../components/button'\nimport type { Theme } from '../components/theme'\n\nconst buttonVariantColors: Record<\n  ButtonVariant,\n  { bg: string; hover: string; active: string; text: string; border: string }\n> = {\n  primary: {\n    bg: tokens.colors.purple[500],\n    hover: tokens.colors.purple[600],\n    active: tokens.colors.purple[700],\n    text: '#fff',\n    border: tokens.colors.purple[500],\n  },\n  secondary: {\n    bg: tokens.colors.gray[800],\n    hover: tokens.colors.gray[700],\n    active: tokens.colors.gray[600],\n    text: tokens.colors.gray[100],\n    border: tokens.colors.gray[700],\n  },\n  info: {\n    bg: tokens.colors.blue[500],\n    hover: tokens.colors.blue[600],\n    active: tokens.colors.blue[700],\n    text: '#fff',\n    border: tokens.colors.blue[500],\n  },\n  warning: {\n    bg: tokens.colors.yellow[500],\n    hover: tokens.colors.yellow[600],\n    active: tokens.colors.yellow[700],\n    text: '#fff',\n    border: tokens.colors.yellow[500],\n  },\n  danger: {\n    bg: tokens.colors.red[500],\n    hover: tokens.colors.red[600],\n    active: tokens.colors.red[700],\n    text: '#fff',\n    border: tokens.colors.red[500],\n  },\n  success: {\n    bg: tokens.colors.green[500],\n    hover: tokens.colors.green[600],\n    active: tokens.colors.green[700],\n    text: '#fff',\n    border: tokens.colors.green[500],\n  },\n}\nexport const css = goober.css\nconst stylesFactory = (theme: Theme = 'dark') => {\n  const { colors, font, size, alpha, border } = tokens\n  const { fontFamily } = font\n\n  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)\n\n  const wrapperSize = 320\n\n  return {\n    logo: css`\n      cursor: pointer;\n      display: flex;\n      flex-direction: column;\n      background-color: transparent;\n      border: none;\n      width: ${size[12]};\n      height: ${size[12]};\n      font-family: ${fontFamily.sans};\n      gap: ${tokens.size[0.5]};\n      padding: 0px;\n      &:hover {\n        opacity: 0.7;\n      }\n    `,\n\n    selectWrapper: css`\n      width: 100%;\n      max-width: ${wrapperSize}px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    selectContainer: css`\n      width: 100%;\n    `,\n    selectLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    selectDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    select: css`\n      appearance: none;\n      width: 100%;\n      padding: 0.75rem 3rem 0.75rem 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n      font-size: 0.875rem;\n      transition: all 0.2s ease;\n      cursor: pointer;\n\n      /* Custom arrow */\n      background-image: url(\"data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>\");\n      background-repeat: no-repeat;\n      background-position: right 0.75rem center;\n      background-size: 1.25rem;\n\n      &:hover {\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${colors.purple[400]};\n        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};\n      }\n    `,\n    inputWrapper: css`\n      width: 100%;\n      max-width: ${wrapperSize}px;\n      display: flex;\n      flex-direction: column;\n      gap: 0.375rem;\n    `,\n    inputContainer: css`\n      width: 100%;\n    `,\n    inputLabel: css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${t(colors.gray[900], colors.gray[100])};\n      text-align: left;\n    `,\n    inputDescription: css`\n      font-size: 0.8rem;\n      color: ${t(colors.gray[500], colors.gray[400])};\n      margin: 0;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    input: css`\n      appearance: none;\n      box-sizing: border-box;\n      width: 100%;\n      padding: 0.75rem;\n      border-radius: 0.5rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      color: ${t(colors.gray[900], colors.gray[100])};\n      border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n      font-size: 0.875rem;\n      font-family: ${fontFamily.mono};\n      transition: all 0.2s ease;\n\n      &::placeholder {\n        color: ${t(colors.gray[400], colors.gray[500])};\n      }\n\n      &:hover {\n        border-color: ${t(colors.gray[400], colors.gray[600])};\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${t(colors.purple[500], colors.purple[400])};\n        box-shadow: 0 0 0 3px\n          ${t(colors.purple[100] + alpha[20], colors.purple[400] + alpha[20])};\n      }\n    `,\n    checkboxWrapper: css`\n      display: flex;\n      align-items: flex-start;\n      gap: 0.75rem;\n      cursor: pointer;\n      user-select: none;\n      padding: 0.5rem;\n      border-radius: 0.5rem;\n      transition: background-color 0.2s ease;\n\n      &:hover {\n        background-color: ${t(colors.gray[100], colors.darkGray[800])};\n      }\n    `,\n    checkboxContainer: css`\n      width: 100%;\n    `,\n    checkboxLabelContainer: css`\n      display: flex;\n      flex-direction: column;\n      gap: 0.25rem;\n      flex: 1;\n    `,\n    checkbox: css`\n      appearance: none;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid ${t(colors.gray[300], colors.gray[700])};\n      border-radius: 0.375rem;\n      background-color: ${t(colors.gray[50], colors.darkGray[800])};\n      display: grid;\n      place-items: center;\n      transition: all 0.2s ease;\n      flex-shrink: 0;\n      margin-top: 0.125rem;\n\n      &:hover {\n        border-color: ${t(colors.purple[500], colors.purple[400])};\n      }\n\n      &:checked {\n        background-color: ${t(colors.purple[500], colors.purple[700])};\n        border-color: ${t(colors.purple[500], colors.purple[700])};\n      }\n\n      &:checked::after {\n        content: '';\n        width: 0.4rem;\n        height: 0.6rem;\n        border: solid ${t('#fff', colors.gray[100])};\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n        margin-top: -3px;\n      }\n    `,\n    checkboxLabel: css`\n      color: ${t(colors.gray[900], colors.gray[100])};\n      font-size: 0.875rem;\n      font-weight: 500;\n      line-height: 1.4;\n      text-align: left;\n    `,\n    checkboxDescription: css`\n      color: ${t(colors.gray[500], colors.gray[400])};\n      font-size: 0.8rem;\n      line-height: 1.3;\n      text-align: left;\n    `,\n    button: {\n      base: css`\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        font-family: ${tokens.font.fontFamily.sans};\n        font-size: 0.8rem;\n        font-weight: 500;\n        border-radius: 0.2rem;\n        padding: 0.2rem 0.6rem;\n        cursor: pointer;\n        transition:\n          background 0.2s,\n          color 0.2s,\n          border 0.2s,\n          box-shadow 0.2s;\n        outline: none;\n        border-width: 1px;\n        border-style: solid;\n      `,\n      variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {\n        const v = buttonVariantColors[variant]\n        if (ghost) {\n          return css`\n            background: transparent;\n            color: ${t(v.bg, v.bg)};\n            border-color: transparent;\n            &:hover {\n              background: ${t(colors.purple[100], colors.darkGray[700])};\n            }\n            &:active {\n              background: ${t(colors.purple[200], colors.darkGray[800])};\n            }\n          `\n        }\n        if (outline) {\n          return css`\n            background: transparent;\n            color: ${t(v.bg, v.bg)};\n            border-color: ${t(v.bg, v.bg)};\n            &:hover {\n              background: ${t(colors.purple[100], colors.darkGray[700])};\n              border-color: ${t(v.hover, v.hover)};\n            }\n            &:active {\n              background: ${t(colors.purple[200], colors.darkGray[800])};\n              border-color: ${t(v.active, v.active)};\n            }\n          `\n        }\n        // Default solid button\n        return css`\n          background: ${t(v.bg, v.bg)};\n          color: ${t(v.text, v.text)};\n          border-color: ${t(v.border, v.border)};\n          &:hover {\n            background: ${t(v.hover, v.hover)};\n            border-color: ${t(v.hover, v.hover)};\n          }\n          &:active {\n            background: ${t(v.active, v.active)};\n            border-color: ${t(v.active, v.active)};\n          }\n        `\n      },\n    },\n    tag: {\n      dot: (color: keyof typeof tokens.colors) => css`\n        width: ${tokens.size[1.5]};\n        height: ${tokens.size[1.5]};\n        border-radius: ${tokens.border.radius.full};\n        background-color: ${t(\n          tokens.colors[color][500],\n          tokens.colors[color][500],\n        )};\n      `,\n      base: css`\n        display: flex;\n        gap: ${tokens.size[1.5]};\n        box-sizing: border-box;\n        height: ${tokens.size[6.5]};\n        background: ${t(colors.gray[50], colors.darkGray[500])};\n        color: ${t(colors.gray[700], colors.gray[300])};\n        border-radius: ${tokens.border.radius.sm};\n        font-size: ${font.size.sm};\n        padding: ${tokens.size[1]};\n        padding-left: ${tokens.size[1.5]};\n        align-items: center;\n        font-weight: ${font.weight.medium};\n        border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};\n        user-select: none;\n        position: relative;\n        &:focus-visible {\n          outline-offset: 2px;\n          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n        }\n      `,\n      label: css`\n        font-size: ${font.size.xs};\n      `,\n      count: css`\n        font-size: ${font.size.xs};\n        padding: 0 5px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: ${t(colors.gray[500], colors.gray[400])};\n        background-color: ${t(colors.gray[200], colors.darkGray[300])};\n        border-radius: 2px;\n        font-variant-numeric: tabular-nums;\n        height: ${tokens.size[4.5]};\n      `,\n    },\n    tree: {\n      info: css`\n        color: ${t(colors.gray[500], colors.gray[500])};\n        font-size: ${font.size.xs};\n        margin-right: ${size[1]};\n      `,\n      actionButton: css`\n        background-color: transparent;\n        color: ${t(colors.gray[500], colors.gray[500])};\n        border: none;\n        display: inline-flex;\n        padding: 0px;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        width: ${size[3]};\n        height: ${size[3]};\n        position: relative;\n        z-index: 1;\n\n        &:hover svg {\n          color: ${t(colors.gray[600], colors.gray[400])};\n        }\n\n        &:focus-visible {\n          border-radius: ${border.radius.xs};\n          outline: 2px solid ${t(colors.blue[700], colors.blue[800])};\n          outline-offset: 2px;\n        }\n      `,\n      expanderContainer: css`\n        position: relative;\n      `,\n      expander: css`\n        position: absolute;\n        cursor: pointer;\n        left: -16px;\n        top: 3px;\n        & path {\n          stroke: ${t(colors.blue[400], colors.blue[300])};\n        }\n        & svg {\n          width: ${size[3]};\n          height: ${size[3]};\n        }\n\n        display: inline-flex;\n        align-items: center;\n        transition: all 0.1s ease;\n      `,\n      expandedLine: (hasBorder: boolean) => css`\n        display: block;\n        padding-left: 0.75rem;\n        margin-left: -0.7rem;\n        ${hasBorder\n          ? `border-left: 1px solid ${t(colors.blue[400], colors.blue[300])};`\n          : ''}\n      `,\n      collapsible: css`\n        cursor: pointer;\n        transition: all 0.2s ease;\n        &:hover {\n          background-color: ${t(colors.gray[100], colors.darkGray[700])};\n          border-radius: ${tokens.border.radius.sm};\n          padding: 0 ${tokens.size[1]};\n        }\n      `,\n      actions: css`\n        display: inline-flex;\n        margin-left: ${size[2]};\n        gap: ${size[2]};\n        align-items: center;\n        & svg {\n          height: 12px;\n          width: 12px;\n        }\n      `,\n      valueCollapsed: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n      `,\n      valueFunction: css`\n        color: ${t(colors.cyan[500], colors.cyan[400])};\n      `,\n      valueString: css`\n        color: ${t(colors.green[500], colors.green[400])};\n      `,\n      valueNumber: css`\n        color: ${t(colors.yellow[500], colors.yellow[400])};\n      `,\n      valueBoolean: css`\n        color: ${t(colors.pink[500], colors.pink[400])};\n      `,\n      valueNull: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-style: italic;\n      `,\n      valueKey: css`\n        color: ${t(colors.blue[400], colors.blue[300])};\n      `,\n      valueBraces: css`\n        color: ${colors.gray[500]};\n      `,\n      valueContainer: (isRoot: boolean) => css`\n        display: block;\n        margin-left: ${isRoot ? '0' : '1rem'};\n\n        &:not(:hover) .actions {\n          display: none;\n        }\n\n        &:hover .actions {\n          display: inline-flex;\n        }\n      `,\n    },\n    header: {\n      row: css`\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: ${tokens.size[2]} ${tokens.size[2.5]};\n        gap: ${tokens.size[2.5]};\n        border-bottom: ${t(colors.gray[300], colors.darkGray[500])} 1px solid;\n        align-items: center;\n      `,\n      logoAndToggleContainer: css`\n        display: flex;\n        gap: ${tokens.size[3]};\n        align-items: center;\n        & > button {\n          padding: 0;\n          background: transparent;\n          border: none;\n          display: flex;\n          gap: ${size[0.5]};\n          flex-direction: column;\n        }\n      `,\n      logo: css`\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        background-color: transparent;\n        border: none;\n        gap: ${tokens.size[0.5]};\n        padding: 0px;\n        &:hover {\n          opacity: 0.7;\n        }\n        &:focus-visible {\n          outline-offset: 4px;\n          border-radius: ${border.radius.xs};\n          outline: 2px solid ${colors.blue[800]};\n        }\n      `,\n      tanstackLogo: css`\n        font-size: ${font.size.md};\n        font-weight: ${font.weight.bold};\n        line-height: ${font.lineHeight.xs};\n        white-space: nowrap;\n        color: ${t(colors.gray[700], colors.gray[300])};\n      `,\n      flavorLogo: (flavorLight: string, flavorDark: string) => css`\n        font-weight: ${font.weight.semibold};\n        font-size: ${font.size.xs};\n        background: linear-gradient(to right, ${t(flavorLight, flavorDark)});\n        background-clip: text;\n        -webkit-background-clip: text;\n        line-height: 1;\n        -webkit-text-fill-color: transparent;\n        white-space: nowrap;\n      `,\n    },\n    section: {\n      main: css`\n        margin-bottom: 2rem;\n        padding: 1.5rem;\n        background-color: ${t(colors.gray[50], colors.darkGray[800])};\n        border: 1px solid ${t(colors.gray[300], colors.gray[700])};\n        border-radius: 0.75rem;\n        box-shadow: ${t(\n          '0 1px 3px rgba(0,0,0,0.06)',\n          '0 1px 3px rgba(0,0,0,0.18)',\n        )};\n      `,\n      title: css`\n        font-size: 1.125rem;\n        font-weight: 600;\n        color: ${t(colors.gray[900], colors.gray[100])};\n        margin: 0 0 1rem 0;\n        padding-bottom: 0.5rem;\n        border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        text-align: left;\n      `,\n      icon: css`\n        height: 20px;\n        width: 20px;\n        & > svg {\n          height: 100%;\n          width: 100%;\n        }\n        color: ${t(colors.purple[500], colors.purple[400])};\n      `,\n      description: css`\n        color: ${t(colors.gray[500], colors.gray[400])};\n        font-size: 0.875rem;\n        margin: 0 0 1.5rem 0;\n        line-height: 1.5;\n        text-align: left;\n      `,\n    },\n    mainPanel: {\n      panel: (withPadding: boolean) => css`\n        padding: ${withPadding ? tokens.size[4] : 0};\n        background: ${t(colors.gray[50], colors.darkGray[700])};\n        overflow-y: auto;\n        height: 100%;\n      `,\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"],"names":[],"mappings":"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"}

package/dist/esm/utils/deep-keys.d.ts

@@ -0,0 +1,5 @@
+type CollapsibleKeys<T, TPrefix extends string = ''> = T extends ReadonlyArray<infer U> ? (TPrefix extends '' ? '' : TPrefix) | CollapsibleKeys<U, `${TPrefix}[${number}]`> : T extends object ? (TPrefix extends '' ? '' : TPrefix) | {
+    [K in Extract<keyof T, string>]: CollapsibleKeys<T[K], TPrefix extends '' ? `${K}` : `${TPrefix}.${K}`>;
+}[Extract<keyof T, string>] : never;
+export type CollapsiblePaths<T> = CollapsibleKeys<T> extends string ? CollapsibleKeys<T> : never;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-ui",
-  "version": "0.3.5",
+  "version": "0.4.1",
   "description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -46,13 +46,13 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "goober": "^2.1.16",
-    "solid-js": "^1.9.7"
+    "solid-js": "^1.9.9"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.7"
   },
   "devDependencies": {
-    "vite-plugin-solid": "^2.11.6"
+    "vite-plugin-solid": "^2.11.8"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/components/tree.tsx

@@ -2,11 +2,13 @@ import { For, Match, Show, Switch, createSignal } from 'solid-js'
 import clsx from 'clsx'
 import { css, useStyles } from '../styles/use-styles'
 import { CopiedCopier, Copier, ErrorCopier } from './icons'
+import type { CollapsiblePaths } from '../utils/deep-keys'
 
-export function JsonTree(props: {
-  value: any
+export function JsonTree<TData, TName extends CollapsiblePaths<TData>>(props: {
+  value: TData
   copyable?: boolean
   defaultExpansionDepth?: number
+  collapsePaths?: Array<TName>
 }) {
   return (
     <JsonValue
@@ -15,6 +17,8 @@ export function JsonTree(props: {
       copyable={props.copyable}
       depth={0}
       defaultExpansionDepth={props.defaultExpansionDepth ?? 1}
+      path=""
+      collapsePaths={props.collapsePaths}
     />
   )
 }
@@ -25,106 +29,118 @@ function JsonValue(props: {
   isRoot?: boolean
   isLastKey?: boolean
   copyable?: boolean
+
   defaultExpansionDepth: number
   depth: number
+
+  collapsePaths?: Array<string>
+  path: string
 }) {
-  const {
-    value,
-    keyName,
-    isRoot = false,
-    isLastKey,
-    copyable,
-    defaultExpansionDepth,
-    depth,
-  } = props
   const styles = useStyles()
 
   return (
-    <span class={styles().tree.valueContainer(isRoot)}>
-      {keyName && typeof value !== 'object' && !Array.isArray(value) && (
-        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>
-      )}
+    <span class={styles().tree.valueContainer(props.isRoot ?? false)}>
+      {props.keyName &&
+        typeof props.value !== 'object' &&
+        !Array.isArray(props.value) && (
+          <span class={styles().tree.valueKey}>
+            &quot;{props.keyName}&quot;:{' '}
+          </span>
+        )}
       {(() => {
-        if (typeof value === 'string') {
+        if (typeof props.value === 'string') {
           return (
-            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>
+            <span class={styles().tree.valueString}>
+              &quot;{props.value}&quot;
+            </span>
           )
         }
-        if (typeof value === 'number') {
-          return <span class={styles().tree.valueNumber}>{value}</span>
+        if (typeof props.value === 'number') {
+          return <span class={styles().tree.valueNumber}>{props.value}</span>
         }
-        if (typeof value === 'boolean') {
-          return <span class={styles().tree.valueBoolean}>{String(value)}</span>
+        if (typeof props.value === 'boolean') {
+          return (
+            <span class={styles().tree.valueBoolean}>
+              {String(props.value)}
+            </span>
+          )
         }
-        if (value === null) {
+        if (props.value === null) {
           return <span class={styles().tree.valueNull}>null</span>
         }
-        if (value === undefined) {
+        if (props.value === undefined) {
           return <span class={styles().tree.valueNull}>undefined</span>
         }
-        if (typeof value === 'function') {
+        if (typeof props.value === 'function') {
           return (
-            <span class={styles().tree.valueFunction}>{String(value)}</span>
+            <span class={styles().tree.valueFunction}>
+              {String(props.value)}
+            </span>
           )
         }
-        if (Array.isArray(value)) {
+        if (Array.isArray(props.value)) {
           return (
             <ArrayValue
-              defaultExpansionDepth={defaultExpansionDepth}
-              depth={depth}
-              copyable={copyable}
-              keyName={keyName}
-              value={value}
+              defaultExpansionDepth={props.defaultExpansionDepth}
+              depth={props.depth}
+              copyable={props.copyable}
+              keyName={props.keyName}
+              value={props.value}
+              collapsePaths={props.collapsePaths}
+              path={props.path}
             />
           )
         }
-        if (typeof value === 'object') {
+        if (typeof props.value === 'object') {
           return (
             <ObjectValue
-              defaultExpansionDepth={defaultExpansionDepth}
-              depth={depth}
-              copyable={copyable}
-              keyName={keyName}
-              value={value}
+              defaultExpansionDepth={props.defaultExpansionDepth}
+              depth={props.depth}
+              copyable={props.copyable}
+              keyName={props.keyName}
+              value={props.value}
+              collapsePaths={props.collapsePaths}
+              path={props.path}
             />
           )
         }
         return <span />
       })()}
-      {copyable && (
+      {props.copyable && (
         <div class={clsx(styles().tree.actions, 'actions')}>
-          <CopyButton value={value} />
+          <CopyButton value={props.value} />
         </div>
       )}
-      {isLastKey || isRoot ? '' : <span>,</span>}
+      {props.isLastKey || props.isRoot ? '' : <span>,</span>}
     </span>
   )
 }
 
-const ArrayValue = ({
-  value,
-  keyName,
-  copyable,
-  defaultExpansionDepth,
-  depth,
-}: {
+const ArrayValue = (props: {
   value: Array<any>
   copyable?: boolean
   keyName?: string
   defaultExpansionDepth: number
   depth: number
+  collapsePaths?: Array<string>
+  path: string
 }) => {
   const styles = useStyles()
-  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)
 
-  if (value.length === 0) {
+  const [expanded, setExpanded] = createSignal(
+    props.depth <= props.defaultExpansionDepth &&
+      !props.collapsePaths?.includes(props.path),
+  )
+
+  if (props.value.length === 0) {
     return (
       <span class={styles().tree.expanderContainer}>
-        {keyName && (
+        {props.keyName && (
           <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
-            &quot;{keyName}&quot;:{' '}
+            &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
+
         <span class={styles().tree.valueBraces}>[]</span>
       </span>
     )
@@ -135,7 +151,8 @@ const ArrayValue = ({
         onClick={() => setExpanded(!expanded())}
         expanded={expanded()}
       />
-      {keyName && (
+
+      {props.keyName && (
         <span
           onclick={(e) => {
             e.stopPropagation()
@@ -144,29 +161,34 @@ const ArrayValue = ({
           }}
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
-          &quot;{keyName}&quot;:{' '}
-          <span class={styles().tree.info}>{value.length} items</span>
+          &quot;{props.keyName}&quot;:{' '}
+          <span class={styles().tree.info}>{props.value.length} items</span>
         </span>
       )}
+
       <span class={styles().tree.valueBraces}>[</span>
+
       <Show when={expanded()}>
-        <span class={styles().tree.expandedLine(Boolean(keyName))}>
-          <For each={value}>
+        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>
+          <For each={props.value}>
             {(item, i) => {
-              const isLastKey = i() === value.length - 1
+              const isLastKey = i() === props.value.length - 1
               return (
                 <JsonValue
-                  copyable={copyable}
+                  copyable={props.copyable}
                   value={item}
                   isLastKey={isLastKey}
-                  defaultExpansionDepth={defaultExpansionDepth}
-                  depth={depth + 1}
+                  defaultExpansionDepth={props.defaultExpansionDepth}
+                  depth={props.depth + 1}
+                  collapsePaths={props.collapsePaths}
+                  path={props.path ? `${props.path}[${i()}]` : `[${i()}]`}
                 />
               )
             }}
           </For>
         </span>
       </Show>
+
       <Show when={!expanded()}>
         <span
           onClick={(e) => {
@@ -184,45 +206,49 @@ const ArrayValue = ({
   )
 }
 
-const ObjectValue = ({
-  value,
-  keyName,
-  copyable,
-  defaultExpansionDepth,
-  depth,
-}: {
+const ObjectValue = (props: {
   value: Record<string, any>
   keyName?: string
   copyable?: boolean
   defaultExpansionDepth: number
   depth: number
+  collapsePaths?: Array<string>
+  path: string
 }) => {
   const styles = useStyles()
-  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth)
-  const keys = Object.keys(value)
+
+  const [expanded, setExpanded] = createSignal(
+    props.depth <= props.defaultExpansionDepth &&
+      !props.collapsePaths?.includes(props.path),
+  )
+
+  const keys = Object.keys(props.value)
   const lastKeyName = keys[keys.length - 1]
 
   if (keys.length === 0) {
     return (
       <span class={styles().tree.expanderContainer}>
-        {keyName && (
+        {props.keyName && (
           <span class={clsx(styles().tree.valueKey, styles().tree.collapsible)}>
-            &quot;{keyName}&quot;:{' '}
+            &quot;{props.keyName}&quot;:{' '}
           </span>
         )}
+
         <span class={styles().tree.valueBraces}>{'{}'}</span>
       </span>
     )
   }
+
   return (
     <span class={styles().tree.expanderContainer}>
-      {keyName && (
+      {props.keyName && (
         <Expander
           onClick={() => setExpanded(!expanded())}
           expanded={expanded()}
         />
       )}
-      {keyName && (
+
+      {props.keyName && (
         <span
           onClick={(e) => {
             e.stopPropagation()
@@ -231,29 +257,34 @@ const ObjectValue = ({
           }}
           class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
         >
-          &quot;{keyName}&quot;:{' '}
+          &quot;{props.keyName}&quot;:{' '}
           <span class={styles().tree.info}>{keys.length} items</span>
         </span>
       )}
+
       <span class={styles().tree.valueBraces}>{'{'}</span>
+
       <Show when={expanded()}>
-        <span class={styles().tree.expandedLine(Boolean(keyName))}>
+        <span class={styles().tree.expandedLine(Boolean(props.keyName))}>
           <For each={keys}>
             {(k) => (
               <>
                 <JsonValue
-                  value={value[k]}
+                  value={props.value[k]}
                   keyName={k}
                   isLastKey={lastKeyName === k}
-                  copyable={copyable}
-                  defaultExpansionDepth={defaultExpansionDepth}
-                  depth={depth + 1}
+                  copyable={props.copyable}
+                  defaultExpansionDepth={props.defaultExpansionDepth}
+                  depth={props.depth + 1}
+                  collapsePaths={props.collapsePaths}
+                  path={`${props.path}${props.path ? '.' : ''}${k}`}
                 />
               </>
             )}
           </For>
         </span>
       </Show>
+
       <Show when={!expanded()}>
         <span
           onClick={(e) => {
@@ -266,6 +297,7 @@ const ObjectValue = ({
           {`...`}
         </span>
       </Show>
+
       <span class={styles().tree.valueBraces}>{'}'}</span>
     </span>
   )

package/src/styles/use-styles.ts

@@ -59,6 +59,8 @@ const stylesFactory = (theme: Theme = 'dark') => {
 
   const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
+  const wrapperSize = 320
+
   return {
     logo: css`
       cursor: pointer;
@@ -78,7 +80,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
 
     selectWrapper: css`
       width: 100%;
-      max-width: 300px;
+      max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
@@ -129,7 +131,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
     `,
     inputWrapper: css`
       width: 100%;
-      max-width: 300px;
+      max-width: ${wrapperSize}px;
       display: flex;
       flex-direction: column;
       gap: 0.375rem;
@@ -152,6 +154,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
     `,
     input: css`
       appearance: none;
+      box-sizing: border-box;
       width: 100%;
       padding: 0.75rem;
       border-radius: 0.5rem;

package/src/utils/deep-keys.ts

@@ -0,0 +1,18 @@
+type CollapsibleKeys<T, TPrefix extends string = ''> =
+  T extends ReadonlyArray<infer U>
+    ?
+        | (TPrefix extends '' ? '' : TPrefix)
+        | CollapsibleKeys<U, `${TPrefix}[${number}]`>
+    : T extends object
+      ?
+          | (TPrefix extends '' ? '' : TPrefix)
+          | {
+              [K in Extract<keyof T, string>]: CollapsibleKeys<
+                T[K],
+                TPrefix extends '' ? `${K}` : `${TPrefix}.${K}`
+              >
+            }[Extract<keyof T, string>]
+      : never
+
+export type CollapsiblePaths<T> =
+  CollapsibleKeys<T> extends string ? CollapsibleKeys<T> : never