@tanstack/devtools-ui 0.3.4 → 0.3.5

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

@@ -1,4 +1,5 @@
 export declare function JsonTree(props: {
     value: any;
     copyable?: boolean;
+    defaultExpansionDepth?: number;
 }): import("solid-js").JSX.Element;

package/dist/esm/components/tree.js

@@ -3,7 +3,7 @@ import { createSignal, Show, For, Switch, Match } from "solid-js";
 import clsx from "clsx";
 import { useStyles, css } from "../styles/use-styles.js";
 import { Copier, CopiedCopier, ErrorCopier } from "./icons.js";
-var _tmpl$ = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`), _tmpl$2 = /* @__PURE__ */ template(`<span><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>`), _tmpl$3 = /* @__PURE__ */ template(`<span>`), _tmpl$4 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: `), _tmpl$5 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;`), _tmpl$6 = /* @__PURE__ */ template(`<span>null`), _tmpl$7 = /* @__PURE__ */ template(`<span>undefined`), _tmpl$8 = /* @__PURE__ */ template(`<div>`), _tmpl$9 = /* @__PURE__ */ template(`<span>,`), _tmpl$0 = /* @__PURE__ */ template(`<span>...`), _tmpl$1 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$10 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: <span> items`), _tmpl$11 = /* @__PURE__ */ template(`<span><span>{</span><span>}`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`), _tmpl$2 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: `), _tmpl$3 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;`), _tmpl$4 = /* @__PURE__ */ template(`<span>null`), _tmpl$5 = /* @__PURE__ */ template(`<span>undefined`), _tmpl$6 = /* @__PURE__ */ template(`<div>`), _tmpl$7 = /* @__PURE__ */ template(`<span>,`), _tmpl$8 = /* @__PURE__ */ template(`<span><span>[]`), _tmpl$9 = /* @__PURE__ */ template(`<span>...`), _tmpl$0 = /* @__PURE__ */ template(`<span><span>[</span><span>]`), _tmpl$1 = /* @__PURE__ */ template(`<span>&quot;<!>&quot;: <span> items`), _tmpl$10 = /* @__PURE__ */ template(`<span><span>{}`), _tmpl$11 = /* @__PURE__ */ template(`<span><span>{</span><span>}`), _tmpl$12 = /* @__PURE__ */ template(`<button title="Copy object to clipboard">`), _tmpl$13 = /* @__PURE__ */ template(`<span><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>`);
 function JsonTree(props) {
   return createComponent(JsonValue, {
     isRoot: true,
@@ -12,153 +12,88 @@ function JsonTree(props) {
     },
     get copyable() {
       return props.copyable;
+    },
+    depth: 0,
+    get defaultExpansionDepth() {
+      return props.defaultExpansionDepth ?? 1;
     }
   });
 }
-const CopyButton = (props) => {
-  const styles = useStyles();
-  const [copyState, setCopyState] = createSignal("NoCopy");
-  return (() => {
-    var _el$ = _tmpl$();
-    addEventListener(_el$, "click", 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);
-      });
-    } : void 0, true);
-    insert(_el$, createComponent(Switch, {
-      get children() {
-        return [createComponent(Match, {
-          get when() {
-            return copyState() === "NoCopy";
-          },
-          get children() {
-            return createComponent(Copier, {});
-          }
-        }), createComponent(Match, {
-          get when() {
-            return copyState() === "SuccessCopy";
-          },
-          get children() {
-            return createComponent(CopiedCopier, {
-              theme: "dark"
-            });
-          }
-        }), createComponent(Match, {
-          get when() {
-            return copyState() === "ErrorCopy";
-          },
-          get children() {
-            return createComponent(ErrorCopier, {});
-          }
-        })];
-      }
-    }));
-    effect((_p$) => {
-      var _v$ = styles().tree.actionButton, _v$2 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$;
-  })();
-};
-const Expander = (props) => {
-  const styles = useStyles();
-  return (() => {
-    var _el$2 = _tmpl$2();
-    effect(() => className(_el$2, clsx(styles().tree.expander, css`
-          transform: rotate(${props.expanded ? 90 : 0}deg);
-        `, props.expanded && css`
-            & svg {
-              top: -1px;
-            }
-          `)));
-    return _el$2;
-  })();
-};
 function JsonValue(props) {
   const {
     value,
     keyName,
     isRoot = false,
     isLastKey,
-    copyable
+    copyable,
+    defaultExpansionDepth,
+    depth
   } = props;
   const styles = useStyles();
   return (() => {
-    var _el$3 = _tmpl$3();
-    insert(_el$3, (() => {
+    var _el$ = _tmpl$();
+    insert(_el$, (() => {
       var _c$ = memo(() => !!(keyName && typeof value !== "object" && !Array.isArray(value)));
       return () => _c$() && (() => {
-        var _el$4 = _tmpl$4(), _el$5 = _el$4.firstChild, _el$7 = _el$5.nextSibling;
-        _el$7.nextSibling;
-        insert(_el$4, keyName, _el$7);
-        effect(() => className(_el$4, styles().tree.valueKey));
-        return _el$4;
+        var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling;
+        _el$5.nextSibling;
+        insert(_el$2, keyName, _el$5);
+        effect(() => className(_el$2, styles().tree.valueKey));
+        return _el$2;
       })();
     })(), null);
-    insert(_el$3, () => {
+    insert(_el$, () => {
       if (typeof value === "string") {
         return (() => {
-          var _el$8 = _tmpl$5(), _el$9 = _el$8.firstChild, _el$1 = _el$9.nextSibling;
-          _el$1.nextSibling;
-          insert(_el$8, value, _el$1);
-          effect(() => className(_el$8, styles().tree.valueString));
-          return _el$8;
+          var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild, _el$9 = _el$7.nextSibling;
+          _el$9.nextSibling;
+          insert(_el$6, value, _el$9);
+          effect(() => className(_el$6, styles().tree.valueString));
+          return _el$6;
         })();
       }
       if (typeof value === "number") {
         return (() => {
-          var _el$10 = _tmpl$3();
-          insert(_el$10, value);
-          effect(() => className(_el$10, styles().tree.valueNumber));
-          return _el$10;
+          var _el$0 = _tmpl$();
+          insert(_el$0, value);
+          effect(() => className(_el$0, styles().tree.valueNumber));
+          return _el$0;
         })();
       }
       if (typeof value === "boolean") {
         return (() => {
-          var _el$11 = _tmpl$3();
-          insert(_el$11, () => String(value));
-          effect(() => className(_el$11, styles().tree.valueBoolean));
-          return _el$11;
+          var _el$1 = _tmpl$();
+          insert(_el$1, () => String(value));
+          effect(() => className(_el$1, styles().tree.valueBoolean));
+          return _el$1;
         })();
       }
       if (value === null) {
         return (() => {
-          var _el$12 = _tmpl$6();
-          effect(() => className(_el$12, styles().tree.valueNull));
-          return _el$12;
+          var _el$10 = _tmpl$4();
+          effect(() => className(_el$10, styles().tree.valueNull));
+          return _el$10;
         })();
       }
       if (value === void 0) {
         return (() => {
-          var _el$13 = _tmpl$7();
-          effect(() => className(_el$13, styles().tree.valueNull));
-          return _el$13;
+          var _el$11 = _tmpl$5();
+          effect(() => className(_el$11, styles().tree.valueNull));
+          return _el$11;
         })();
       }
       if (typeof value === "function") {
         return (() => {
-          var _el$14 = _tmpl$3();
-          insert(_el$14, () => String(value));
-          effect(() => className(_el$14, styles().tree.valueFunction));
-          return _el$14;
+          var _el$12 = _tmpl$();
+          insert(_el$12, () => String(value));
+          effect(() => className(_el$12, styles().tree.valueFunction));
+          return _el$12;
         })();
       }
       if (Array.isArray(value)) {
         return createComponent(ArrayValue, {
+          defaultExpansionDepth,
+          depth,
           copyable,
           keyName,
           value
@@ -166,153 +101,207 @@ function JsonValue(props) {
       }
       if (typeof value === "object") {
         return createComponent(ObjectValue, {
+          defaultExpansionDepth,
+          depth,
           copyable,
           keyName,
           value
         });
       }
-      return _tmpl$3();
+      return _tmpl$();
     }, null);
-    insert(_el$3, copyable && (() => {
-      var _el$16 = _tmpl$8();
-      insert(_el$16, createComponent(CopyButton, {
+    insert(_el$, copyable && (() => {
+      var _el$14 = _tmpl$6();
+      insert(_el$14, createComponent(CopyButton, {
         value
       }));
-      effect(() => className(_el$16, clsx(styles().tree.actions, "actions")));
-      return _el$16;
+      effect(() => className(_el$14, clsx(styles().tree.actions, "actions")));
+      return _el$14;
     })(), null);
-    insert(_el$3, isLastKey || isRoot ? "" : _tmpl$9(), null);
-    effect(() => className(_el$3, styles().tree.valueContainer(isRoot)));
-    return _el$3;
+    insert(_el$, isLastKey || isRoot ? "" : _tmpl$7(), null);
+    effect(() => className(_el$, styles().tree.valueContainer(isRoot)));
+    return _el$;
   })();
 }
 const ArrayValue = ({
   value,
   keyName,
-  copyable
+  copyable,
+  defaultExpansionDepth,
+  depth
 }) => {
   const styles = useStyles();
-  const [expanded, setExpanded] = createSignal(true);
+  const [expanded, setExpanded] = createSignal(depth <= defaultExpansionDepth);
+  if (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;
+      })(), _el$17);
+      effect((_p$) => {
+        var _v$ = styles().tree.expanderContainer, _v$2 = styles().tree.valueBraces;
+        _v$ !== _p$.e && className(_el$16, _p$.e = _v$);
+        _v$2 !== _p$.t && className(_el$17, _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$16;
+    })();
+  }
   return (() => {
-    var _el$18 = _tmpl$1(), _el$19 = _el$18.firstChild, _el$22 = _el$19.nextSibling;
-    insert(_el$18, createComponent(Expander, {
+    var _el$22 = _tmpl$0(), _el$23 = _el$22.firstChild, _el$26 = _el$23.nextSibling;
+    insert(_el$22, createComponent(Expander, {
+      onClick: () => setExpanded(!expanded()),
       get expanded() {
         return expanded();
       }
-    }), _el$19);
-    insert(_el$18, keyName && (() => {
-      var _el$23 = _tmpl$10(), _el$24 = _el$23.firstChild, _el$29 = _el$24.nextSibling, _el$25 = _el$29.nextSibling, _el$27 = _el$25.nextSibling, _el$28 = _el$27.firstChild;
-      _el$23.$$click = (e) => {
+    }), _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$23, keyName, _el$29);
-      insert(_el$27, () => value.length, _el$28);
+      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$23, _p$.e = _v$6);
-        _v$7 !== _p$.t && className(_el$27, _p$.t = _v$7);
+        _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$23;
-    })(), _el$19);
-    insert(_el$18, createComponent(Show, {
+      return _el$27;
+    })(), _el$23);
+    insert(_el$22, createComponent(Show, {
       get when() {
         return expanded();
       },
       get children() {
-        var _el$20 = _tmpl$3();
-        insert(_el$20, createComponent(For, {
+        var _el$24 = _tmpl$();
+        insert(_el$24, createComponent(For, {
           each: value,
           children: (item, i) => {
             const isLastKey = i() === value.length - 1;
             return createComponent(JsonValue, {
               copyable,
               value: item,
-              isLastKey
+              isLastKey,
+              defaultExpansionDepth,
+              depth: depth + 1
             });
           }
         }));
-        effect(() => className(_el$20, styles().tree.expandedLine(Boolean(keyName))));
-        return _el$20;
+        effect(() => className(_el$24, styles().tree.expandedLine(Boolean(keyName))));
+        return _el$24;
       }
-    }), _el$22);
-    insert(_el$18, createComponent(Show, {
+    }), _el$26);
+    insert(_el$22, createComponent(Show, {
       get when() {
         return !expanded();
       },
       get children() {
-        var _el$21 = _tmpl$0();
-        _el$21.$$click = (e) => {
+        var _el$25 = _tmpl$9();
+        _el$25.$$click = (e) => {
           e.stopPropagation();
           e.stopImmediatePropagation();
           setExpanded(!expanded());
         };
-        effect(() => className(_el$21, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$21;
+        effect(() => className(_el$25, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+        return _el$25;
       }
-    }), _el$22);
+    }), _el$26);
     effect((_p$) => {
       var _v$3 = styles().tree.expanderContainer, _v$4 = styles().tree.valueBraces, _v$5 = styles().tree.valueBraces;
-      _v$3 !== _p$.e && className(_el$18, _p$.e = _v$3);
-      _v$4 !== _p$.t && className(_el$19, _p$.t = _v$4);
-      _v$5 !== _p$.a && className(_el$22, _p$.a = _v$5);
+      _v$3 !== _p$.e && className(_el$22, _p$.e = _v$3);
+      _v$4 !== _p$.t && className(_el$23, _p$.t = _v$4);
+      _v$5 !== _p$.a && className(_el$26, _p$.a = _v$5);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
-    return _el$18;
+    return _el$22;
   })();
 };
 const ObjectValue = ({
   value,
   keyName,
-  copyable
+  copyable,
+  defaultExpansionDepth,
+  depth
 }) => {
   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 (() => {
+      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;
+      })(), _el$35);
+      effect((_p$) => {
+        var _v$8 = styles().tree.expanderContainer, _v$9 = styles().tree.valueBraces;
+        _v$8 !== _p$.e && className(_el$34, _p$.e = _v$8);
+        _v$9 !== _p$.t && className(_el$35, _p$.t = _v$9);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$34;
+    })();
+  }
   return (() => {
-    var _el$30 = _tmpl$11(), _el$31 = _el$30.firstChild, _el$34 = _el$31.nextSibling;
-    insert(_el$30, keyName && createComponent(Expander, {
+    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$31);
-    insert(_el$30, keyName && (() => {
-      var _el$35 = _tmpl$10(), _el$36 = _el$35.firstChild, _el$41 = _el$36.nextSibling, _el$37 = _el$41.nextSibling, _el$39 = _el$37.nextSibling, _el$40 = _el$39.firstChild;
-      _el$35.$$click = (e) => {
+    }), _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$35, keyName, _el$41);
-      insert(_el$39, () => keys.length, _el$40);
+      insert(_el$45, keyName, _el$51);
+      insert(_el$49, () => keys.length, _el$50);
       effect((_p$) => {
-        var _v$1 = clsx(styles().tree.valueKey, styles().tree.collapsible), _v$10 = styles().tree.info;
-        _v$1 !== _p$.e && className(_el$35, _p$.e = _v$1);
-        _v$10 !== _p$.t && className(_el$39, _p$.t = _v$10);
+        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$35;
-    })(), _el$31);
-    insert(_el$30, createComponent(Show, {
+      return _el$45;
+    })(), _el$41);
+    insert(_el$40, createComponent(Show, {
       get when() {
         return expanded();
       },
       get children() {
-        var _el$32 = _tmpl$3();
-        insert(_el$32, createComponent(For, {
+        var _el$42 = _tmpl$();
+        insert(_el$42, createComponent(For, {
           each: keys,
           children: (k) => createComponent(JsonValue, {
             get value() {
@@ -320,40 +309,116 @@ const ObjectValue = ({
             },
             keyName: k,
             isLastKey: lastKeyName === k,
-            copyable
+            copyable,
+            defaultExpansionDepth,
+            depth: depth + 1
           })
         }));
-        effect(() => className(_el$32, styles().tree.expandedLine(Boolean(keyName))));
-        return _el$32;
+        effect(() => className(_el$42, styles().tree.expandedLine(Boolean(keyName))));
+        return _el$42;
       }
-    }), _el$34);
-    insert(_el$30, createComponent(Show, {
+    }), _el$44);
+    insert(_el$40, createComponent(Show, {
       get when() {
         return !expanded();
       },
       get children() {
-        var _el$33 = _tmpl$0();
-        _el$33.$$click = (e) => {
+        var _el$43 = _tmpl$9();
+        _el$43.$$click = (e) => {
           e.stopPropagation();
           e.stopImmediatePropagation();
           setExpanded(!expanded());
         };
-        effect(() => className(_el$33, clsx(styles().tree.valueKey, styles().tree.collapsible)));
-        return _el$33;
+        effect(() => className(_el$43, clsx(styles().tree.valueKey, styles().tree.collapsible)));
+        return _el$43;
       }
-    }), _el$34);
+    }), _el$44);
     effect((_p$) => {
-      var _v$8 = styles().tree.expanderContainer, _v$9 = styles().tree.valueBraces, _v$0 = styles().tree.valueBraces;
-      _v$8 !== _p$.e && className(_el$30, _p$.e = _v$8);
-      _v$9 !== _p$.t && className(_el$31, _p$.t = _v$9);
-      _v$0 !== _p$.a && className(_el$34, _p$.a = _v$0);
+      var _v$0 = styles().tree.expanderContainer, _v$1 = styles().tree.valueBraces, _v$10 = styles().tree.valueBraces;
+      _v$0 !== _p$.e && className(_el$40, _p$.e = _v$0);
+      _v$1 !== _p$.t && className(_el$41, _p$.t = _v$1);
+      _v$10 !== _p$.a && className(_el$44, _p$.a = _v$10);
       return _p$;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
     });
-    return _el$30;
+    return _el$40;
+  })();
+};
+const CopyButton = (props) => {
+  const styles = useStyles();
+  const [copyState, setCopyState] = createSignal("NoCopy");
+  return (() => {
+    var _el$52 = _tmpl$12();
+    addEventListener(_el$52, "click", 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);
+      });
+    } : void 0, true);
+    insert(_el$52, createComponent(Switch, {
+      get children() {
+        return [createComponent(Match, {
+          get when() {
+            return copyState() === "NoCopy";
+          },
+          get children() {
+            return createComponent(Copier, {});
+          }
+        }), createComponent(Match, {
+          get when() {
+            return copyState() === "SuccessCopy";
+          },
+          get children() {
+            return createComponent(CopiedCopier, {
+              theme: "dark"
+            });
+          }
+        }), createComponent(Match, {
+          get when() {
+            return copyState() === "ErrorCopy";
+          },
+          get children() {
+            return createComponent(ErrorCopier, {});
+          }
+        })];
+      }
+    }));
+    effect((_p$) => {
+      var _v$13 = styles().tree.actionButton, _v$14 = `${copyState() === "NoCopy" ? "Copy object to clipboard" : copyState() === "SuccessCopy" ? "Object copied to clipboard" : "Error copying object to clipboard"}`;
+      _v$13 !== _p$.e && className(_el$52, _p$.e = _v$13);
+      _v$14 !== _p$.t && setAttribute(_el$52, "aria-label", _p$.t = _v$14);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$52;
+  })();
+};
+const Expander = (props) => {
+  const styles = useStyles();
+  return (() => {
+    var _el$53 = _tmpl$13();
+    addEventListener(_el$53, "click", props.onClick, true);
+    effect(() => className(_el$53, clsx(styles().tree.expander, css`
+          transform: rotate(${props.expanded ? 90 : 0}deg);
+        `, props.expanded && css`
+            & svg {
+              top: -1px;
+            }
+          `)));
+    return _el$53;
   })();
 };
 delegateEvents(["click"]);

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: { value: any; copyable?: boolean }) {\n  return <JsonValue isRoot value={props.value} copyable={props.copyable} />\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 }) => {\n  const styles = useStyles()\n  return (\n    <span\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\nfunction JsonValue(props: {\n  value: any\n  keyName?: string\n  isRoot?: boolean\n  isLastKey?: boolean\n  copyable?: boolean\n}) {\n  const { value, keyName, isRoot = false, isLastKey, copyable } = 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 copyable={copyable} keyName={keyName} value={value} />\n          )\n        }\n        if (typeof value === 'object') {\n          return (\n            <ObjectValue copyable={copyable} keyName={keyName} value={value} />\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}: {\n  value: Array<any>\n  copyable?: boolean\n  keyName?: string\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  return (\n    <span class={styles().tree.expanderContainer}>\n      <Expander expanded={expanded()} />\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                />\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}: {\n  value: Record<string, any>\n  keyName?: string\n  copyable?: boolean\n}) => {\n  const styles = useStyles()\n  const [expanded, setExpanded] = createSignal(true)\n  const keys = Object.keys(value)\n  const lastKeyName = keys[keys.length - 1]\n\n  return (\n    <span class={styles().tree.expanderContainer}>\n      {keyName && <Expander expanded={expanded()} />}\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                />\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"],"names":["JsonTree","props","_$createComponent","JsonValue","isRoot","value","copyable","CopyButton","styles","useStyles","copyState","setCopyState","createSignal","_el$","_tmpl$","_$addEventListener","navigator","clipboard","writeText","JSON","stringify","then","setTimeout","err","console","error","undefined","_$insert","Switch","children","Match","when","Copier","CopiedCopier","theme","ErrorCopier","_$effect","_p$","_v$","tree","actionButton","_v$2","e","_$className","t","_$setAttribute","Expander","_el$2","_tmpl$2","clsx","expander","css","expanded","keyName","isLastKey","_el$3","_tmpl$3","_c$","_$memo","Array","isArray","_el$4","_tmpl$4","_el$5","firstChild","_el$7","nextSibling","valueKey","_el$8","_tmpl$5","_el$9","_el$1","valueString","_el$10","valueNumber","_el$11","String","valueBoolean","_el$12","_tmpl$6","valueNull","_el$13","_tmpl$7","_el$14","valueFunction","ArrayValue","ObjectValue","_el$16","_tmpl$8","actions","_tmpl$9","valueContainer","setExpanded","_el$18","_tmpl$1","_el$19","_el$22","_el$23","_tmpl$10","_el$24","_el$29","_el$25","_el$27","_el$28","$$click","stopPropagation","stopImmediatePropagation","length","_v$6","collapsible","_v$7","info","Show","_el$20","For","each","item","i","expandedLine","Boolean","_el$21","_tmpl$0","_v$3","expanderContainer","_v$4","valueBraces","_v$5","a","keys","Object","lastKeyName","_el$30","_tmpl$11","_el$31","_el$34","_el$35","_el$36","_el$41","_el$37","_el$39","_el$40","_v$1","_v$10","_el$32","k","_el$33","_v$8","_v$9","_v$0","_$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'\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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"}

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

@@ -383,6 +383,7 @@ const stylesFactory = (theme = "dark") => {
       `,
       expander: css`
         position: absolute;
+        cursor: pointer;
         left: -16px;
         top: 3px;
         & path {

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        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  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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-ui",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/components/tree.tsx

@@ -3,97 +3,19 @@ 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} />
-}
-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()
+export function JsonTree(props: {
+  value: any
+  copyable?: boolean
+  defaultExpansionDepth?: number
+}) {
   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>
+    <JsonValue
+      isRoot
+      value={props.value}
+      copyable={props.copyable}
+      depth={0}
+      defaultExpansionDepth={props.defaultExpansionDepth ?? 1}
+    />
   )
 }
 
@@ -103,8 +25,18 @@ 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 +69,24 @@ 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 +105,36 @@ 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 +159,8 @@ const ArrayValue = ({
                   copyable={copyable}
                   value={item}
                   isLastKey={isLastKey}
+                  defaultExpansionDepth={defaultExpansionDepth}
+                  depth={depth + 1}
                 />
               )
             }}
@@ -222,19 +188,40 @@ 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 +246,8 @@ const ObjectValue = ({
                   keyName={k}
                   isLastKey={lastKeyName === k}
                   copyable={copyable}
+                  defaultExpansionDepth={defaultExpansionDepth}
+                  depth={depth + 1}
                 />
               </>
             )}
@@ -281,3 +270,95 @@ 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>
+  )
+}

package/src/styles/use-styles.ts

@@ -393,6 +393,7 @@ const stylesFactory = (theme: Theme = 'dark') => {
       `,
       expander: css`
         position: absolute;
+        cursor: pointer;
         left: -16px;
         top: 3px;
         & path {