@qwik.dev/devtools 0.3.0-beta.3 → 2.0.0-beta.45

package/dist/ui/packages/devtools/ui/src/components/InfoBanner/InfoBanner.qwik.mjs

@@ -1,25 +1,12 @@
-import { componentQrl, inlinedQrl, _jsxSorted, _fnSignal, Slot } from "@qwik.dev/core";
 import { IconInfoCircle } from "../Icons/Icons.qwik.mjs";
-const _hf0 = (p0) => [
-  "border-border bg-card-item-bg flex items-center gap-3 rounded-xl border p-4",
-  p0.class
-];
-const InfoBanner = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  return /* @__PURE__ */ _jsxSorted("div", {
-    class: _fnSignal(_hf0, [
-      props
-    ])
-  }, null, [
-    /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "text-accent shrink-0 text-lg"
-    }, /* @__PURE__ */ _jsxSorted(IconInfoCircle, null, {
-      class: "h-5 w-5"
-    }, null, 3, "6O_0"), 1, null),
-    /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "text-sm"
-    }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "6O_1"), 1, null)
-  ], 1, "6O_2");
+import { Slot, _fnSignal, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => ["border-border bg-card-item-bg flex items-center gap-3 rounded-xl border p-4", p0.class];
+var _hf0_str = "[\"border-border bg-card-item-bg flex items-center gap-3 rounded-xl border p-4\",p0.class]";
+/**
+* Informational banner with an icon and message content. Used for contextual hints (e.g. "Vite
+* plugin detected").
+*/
+var InfoBanner = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
+	return /*#__PURE__*/ _jsxSorted("div", { class: _fnSignal(_hf0, [props], _hf0_str) }, null, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-accent shrink-0 text-lg" }, /*#__PURE__*/ _jsxSorted(IconInfoCircle, null, { class: "h-5 w-5" }, null, 3, "gG_0"), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-sm" }, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "gG_1"), 1, null)], 1, "gG_2");
 }, "InfoBanner_component_hsC2DF6XeOg"));
-export {
-  InfoBanner
-};
+export { InfoBanner };

package/dist/ui/packages/devtools/ui/src/components/Tab/Tab.qwik.mjs

@@ -1,21 +1,13 @@
-import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp, Slot } from "@qwik.dev/core";
-const Tab = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  const isActive = _rawProps.state.activeTab === _rawProps.id;
-  return /* @__PURE__ */ _jsxSorted("button", {
-    class: [
-      "relative flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-300 ease-out select-none",
-      isActive ? "bg-primary/15 text-primary cursor-pointer" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground cursor-pointer"
-    ],
-    "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, _rawProps2) => {
-      _rawProps2.state.activeTab = _rawProps2.id;
-    }, "Tab_component_button_q_e_click_mLGAiGoqTr0").m(),
-    "q:p": _rawProps,
-    style: isActive ? {
-      boxShadow: "inset 3px 0 0 0 var(--color-primary)"
-    } : {},
-    title: _wrapProp(_rawProps, "title")
-  }, null, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "5U_0"), 4, "5U_1");
+import { Slot, _captures, _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var Tab = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const isActive = _rawProps.state.activeTab === _rawProps.id;
+	return /*#__PURE__*/ _jsxSorted("button", {
+		class: ["relative flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-300 ease-out select-none", isActive ? "bg-primary/15 text-primary cursor-pointer" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground cursor-pointer"],
+		style: isActive ? { boxShadow: "inset 3px 0 0 0 var(--color-primary)" } : {},
+		title: _wrapProp(_rawProps, "title")
+	}, { "q-e:click": /*#__PURE__*/ inlinedQrl(() => {
+		const _rawProps = _captures[0];
+		_rawProps.state.activeTab = _rawProps.id;
+	}, "Tab_component_button_q_e_click_mLGAiGoqTr0", [_rawProps]) }, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "Cp_0"), 1, "Cp_1");
 }, "Tab_component_HsfA1eSoy4c"));
-export {
-  Tab
-};
+export { Tab };

package/dist/ui/packages/devtools/ui/src/components/TabContent/TabContent.qwik.mjs

@@ -1,21 +1,8 @@
-import { componentQrl, inlinedQrl, _jsxSorted, Slot } from "@qwik.dev/core";
-const TabContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
-  return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "animate-slide-up-fade flex h-full w-full flex-col space-y-8",
-    style: "animation-duration: 0.3s; animation-fill-mode: both; animation-delay: 0.1s;"
-  }, [
-    /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "border-glass-border flex items-center justify-between border-b px-2 pb-4"
-    }, /* @__PURE__ */ _jsxSorted(Slot, null, {
-      name: "title"
-    }, null, 3, "lX_0"), 1, null),
-    /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "custom-scrollbar flex-1 overflow-y-auto px-2 pb-8"
-    }, /* @__PURE__ */ _jsxSorted(Slot, null, {
-      name: "content"
-    }, null, 3, "lX_1"), 1, null)
-  ], 1, "lX_2");
+import { Slot, _jsxSorted, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var TabContent = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
+	return /*#__PURE__*/ _jsxSorted("div", null, {
+		class: "animate-slide-up-fade flex h-full w-full flex-col space-y-8",
+		style: "animation-duration: 0.3s; animation-fill-mode: both; animation-delay: 0.1s;"
+	}, [/*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border flex items-center justify-between border-b px-2 pb-4" }, /*#__PURE__*/ _jsxSorted(Slot, null, { name: "title" }, null, 3, "B0_0"), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "custom-scrollbar flex-1 overflow-y-auto px-2 pb-8" }, /*#__PURE__*/ _jsxSorted(Slot, null, { name: "content" }, null, 3, "B0_1"), 1, null)], 1, "B0_2");
 }, "TabContent_component_QKBLQC1st04"));
-export {
-  TabContent
-};
+export { TabContent };

package/dist/ui/packages/devtools/ui/src/components/TabTitle/TabTitle.qwik.mjs

@@ -1,9 +1,5 @@
-import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp } from "@qwik.dev/core";
-const TabTitle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  return /* @__PURE__ */ _jsxSorted("h3", null, {
-    class: "from-foreground to-muted-foreground bg-gradient-to-br bg-clip-text text-2xl font-bold tracking-tight text-transparent"
-  }, _wrapProp(_rawProps, "title"), 1, "B3_0");
+import { _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var TabTitle = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	return /*#__PURE__*/ _jsxSorted("h3", null, { class: "from-foreground to-muted-foreground bg-gradient-to-br bg-clip-text text-2xl font-bold tracking-tight text-transparent" }, _wrapProp(_rawProps, "title"), 1, "xs_0");
 }, "TabTitle_component_FETeCscYgXU"));
-export {
-  TabTitle
-};
+export { TabTitle };

package/dist/ui/packages/devtools/ui/src/components/ThemeToggle/QwikThemeToggle.qwik.mjs

@@ -1,58 +1,36 @@
-import { componentQrl, inlinedQrl, eventQrl, _jsxSorted, isServer } from "@qwik.dev/core";
-import { Fragment } from "@qwik.dev/core/jsx-runtime";
+import { IconMoonOutline, IconSparkles, IconSunOutline } from "../Icons/Icons.qwik.mjs";
 import { themeStorageKey } from "../router-head/theme-script.qwik.mjs";
-import { IconSunOutline, IconMoonOutline, IconSparkles } from "../Icons/Icons.qwik.mjs";
 /* empty css                      */
-const getTheme = () => {
-  if (isServer) {
-    return "auto";
-  }
-  let theme;
-  try {
-    theme = localStorage.getItem(themeStorageKey);
-  } catch {
-  }
-  return theme || "auto";
+import { _jsxSorted, componentQrl, eventQrl, inlinedQrl, isServer } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+var getTheme = () => {
+	if (isServer) return "auto";
+	let theme;
+	try {
+		theme = localStorage.getItem(themeStorageKey);
+	} catch {}
+	return theme || "auto";
 };
-const setTheme = (theme) => {
-  if (theme === "auto") {
-    document.firstElementChild?.removeAttribute("data-theme");
-  } else {
-    document.firstElementChild?.setAttribute("data-theme", theme);
-  }
-  localStorage.setItem(themeStorageKey, theme);
+var setTheme = (theme) => {
+	if (theme === "auto") document.firstElementChild?.removeAttribute("data-theme");
+	else document.firstElementChild?.setAttribute("data-theme", theme);
+	localStorage.setItem(themeStorageKey, theme);
 };
-const QwikThemeToggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
-  const onClick$ = eventQrl(/* @__PURE__ */ inlinedQrl(() => {
-    let currentTheme = getTheme();
-    if (currentTheme === "dark") {
-      currentTheme = "light";
-    } else if (currentTheme === "light") {
-      currentTheme = "auto";
-    } else if (currentTheme === "auto") {
-      currentTheme = "dark";
-    }
-    setTheme(currentTheme);
-  }, "QwikThemeToggle_component_onClick_event_mPgLgEB0unU"));
-  return /* @__PURE__ */ _jsxSorted(Fragment, null, null, /* @__PURE__ */ _jsxSorted("button", null, {
-    "q-e:click": onClick$,
-    class: "bg-background text-foreground group relative flex h-8 w-8 items-center justify-center rounded-md hover:opacity-60"
-  }, /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "absolute inset-0 grid place-items-center transition-transform duration-200 ease-out group-hover:scale-110 group-active:scale-75"
-  }, [
-    /* @__PURE__ */ _jsxSorted(IconSunOutline, null, {
-      class: "themeIcon light col-start-1 row-start-1"
-    }, null, 3, "cO_0"),
-    /* @__PURE__ */ _jsxSorted(IconMoonOutline, null, {
-      class: "themeIcon dark col-start-1 row-start-1"
-    }, null, 3, "cO_1"),
-    /* @__PURE__ */ _jsxSorted(IconSparkles, null, {
-      class: "themeIcon auto col-start-1 row-start-1"
-    }, null, 3, "cO_2")
-  ], 1, null), 1, null), 1, "cO_3");
+var QwikThemeToggle = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
+	const onClick$ = eventQrl(/*#__PURE__*/ inlinedQrl(() => {
+		let currentTheme = getTheme();
+		if (currentTheme === "dark") currentTheme = "light";
+		else if (currentTheme === "light") currentTheme = "auto";
+		else if (currentTheme === "auto") currentTheme = "dark";
+		setTheme(currentTheme);
+	}, "QwikThemeToggle_component_onClick_event_mPgLgEB0unU"));
+	return /*#__PURE__*/ _jsxSorted(Fragment, null, null, /*#__PURE__*/ _jsxSorted("button", null, {
+		"q-e:click": onClick$,
+		class: "bg-background text-foreground group relative flex h-8 w-8 items-center justify-center rounded-md hover:opacity-60"
+	}, /*#__PURE__*/ _jsxSorted("div", null, { class: "absolute inset-0 grid place-items-center transition-transform duration-200 ease-out group-hover:scale-110 group-active:scale-75" }, [
+		/*#__PURE__*/ _jsxSorted(IconSunOutline, null, { class: "themeIcon light col-start-1 row-start-1" }, null, 3, "vb_0"),
+		/*#__PURE__*/ _jsxSorted(IconMoonOutline, null, { class: "themeIcon dark col-start-1 row-start-1" }, null, 3, "vb_1"),
+		/*#__PURE__*/ _jsxSorted(IconSparkles, null, { class: "themeIcon auto col-start-1 row-start-1" }, null, 3, "vb_2")
+	], 1, null), 1, null), 1, "vb_3");
 }, "QwikThemeToggle_component_7eADANc7QaI"));
-export {
-  QwikThemeToggle,
-  getTheme,
-  setTheme
-};
+export { QwikThemeToggle, getTheme, setTheme };

package/dist/ui/packages/devtools/ui/src/components/ThemeToggle/theme-script.qwik.mjs

@@ -1,17 +1,13 @@
-import { _jsxSorted } from "@qwik.dev/core";
 import { themeStorageKey } from "../router-head/theme-script.qwik.mjs";
-const ThemeScript = () => {
-  const themeScript = `
+import { _jsxSorted } from "@qwik.dev/core";
+var ThemeScript = () => {
+	const themeScript = `
         try {
           const getItem = localStorage.getItem('${themeStorageKey}')
           if(getItem === 'light' || getItem === 'dark'){
               document.firstElementChild.setAttribute('data-theme', getItem);
           }
         } catch (err) { }`;
-  return /* @__PURE__ */ _jsxSorted("script", {
-    dangerouslySetInnerHTML: themeScript
-  }, null, null, 3, "sD_0");
-};
-export {
-  ThemeScript
+	return /*#__PURE__*/ _jsxSorted("script", { dangerouslySetInnerHTML: themeScript }, null, null, 3, "C4_0");
 };
+export { ThemeScript };

package/dist/ui/packages/devtools/ui/src/components/Tree/Tree.qwik.mjs

@@ -1,234 +1,161 @@
-import { componentQrl, inlinedQrl, useSignal, useVisibleTaskQrl, _captures, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
-import { Fragment } from "@qwik.dev/core/jsx-runtime";
 import { IconChevronUpMini } from "../Icons/Icons.qwik.mjs";
-const _hf0 = (p0) => p0.level + 1;
-const _hf1 = (p0, p1) => p0 ? {
-  boxShadow: "inset 2px 0 0 0 var(--color-primary)",
-  paddingLeft: `${p1.level * p1.gap}px`
-} : {
-  paddingLeft: `${p1.level * p1.gap}px`
-};
-const _hf2 = (p0) => p0.node.id;
-const _hf3 = (p0) => p0.node.name || p0.node.label || "";
-const _hf4 = (p0) => p0.node.label || p0.node.name;
-const _hf5 = (p0) => p0.isHover !== false;
-const _hf6 = (p0) => p0.gap ?? 20;
-const _hf7 = (p0) => p0.expandLevel ?? 2;
-const _hf8 = (p0) => p0.animate ?? true;
-const DISPLAY_PROPS = [
-  "q:id",
-  "q:key"
-];
+import { _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useSignal, useVisibleTaskQrl } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+var _hf0 = (p0) => p0.level + 1;
+var _hf0_str = "p0.level+1";
+var _hf1 = (p0, p1) => p0 ? {
+	boxShadow: "inset 2px 0 0 0 var(--color-primary)",
+	paddingLeft: `${p1.level * p1.gap}px`
+} : { paddingLeft: `${p1.level * p1.gap}px` };
+var _hf1_str = "p0?{boxShadow:\"inset 2px 0 0 0 var(--color-primary)\",paddingLeft:`${p1.level * p1.gap}px`}:{paddingLeft:`${p1.level * p1.gap}px`}";
+var _hf2 = (p0) => p0.node.id;
+var _hf2_str = "p0.node.id";
+var _hf3 = (p0) => p0.node.name || p0.node.label || "";
+var _hf3_str = "p0.node.name||p0.node.label||\"\"";
+var _hf4 = (p0) => p0.node.label || p0.node.name;
+var _hf4_str = "p0.node.label||p0.node.name";
+var _hf5 = (p0) => p0.isHover !== false;
+var _hf5_str = "p0.isHover!==false";
+var _hf6 = (p0) => p0.gap ?? 20;
+var _hf6_str = "p0.gap??20";
+var _hf7 = (p0) => p0.expandLevel ?? 2;
+var _hf7_str = "p0.expandLevel??2";
+var _hf8 = (p0) => p0.animate ?? true;
+var _hf8_str = "p0.animate??true";
+/** Prop keys that should be rendered next to the element name in the tree. */
+var DISPLAY_PROPS = ["q:id", "q:key"];
+/**
+* Build a compact attribute string from a node's props. Only displays the keys listed in
+* `DISPLAY_PROPS`.
+*/
 function formatDisplayProps(props) {
-  let result = "";
-  for (const key of DISPLAY_PROPS) {
-    const value = props[key];
-    if (value != null) {
-      result += `${key}="${String(value)}" `;
-    }
-  }
-  return result;
+	let result = "";
+	for (const key of DISPLAY_PROPS) {
+		const value = props[key];
+		if (value != null) result += `${key}="${String(value)}" `;
+	}
+	return result;
 }
+/** Collects the ids from the root down to the first node whose name or label matches. */
 function findIdPathByName(nodes, name) {
-  for (const node of nodes) {
-    if (node.name === name || node.label === name) {
-      return [
-        node.id
-      ];
-    }
-    const childPath = node.children?.length ? findIdPathByName(node.children, name) : null;
-    if (childPath) {
-      return [
-        node.id,
-        ...childPath
-      ];
-    }
-  }
-  return null;
+	for (const node of nodes) {
+		if (node.name === name || node.label === name) return [node.id];
+		const childPath = node.children?.length ? findIdPathByName(node.children, name) : null;
+		if (childPath) return [node.id, ...childPath];
+	}
+	return null;
 }
-const TreeNodeComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const hasChildren = (props.node.children?.length ?? 0) > 0;
-  const override = props.expanded[props.node.id];
-  const childrenVisible = override !== void 0 ? override : props.level < props.expandLevel;
-  const handleNodeClick = /* @__PURE__ */ inlinedQrl(() => {
-    const childrenVisible2 = _captures[0], hasChildren2 = _captures[1], props2 = _captures[2];
-    props2.onNodeClick(props2.node);
-    if (hasChildren2) {
-      props2.onToggle(props2.node.id, childrenVisible2);
-    }
-  }, "TreeNodeComponent_component_handleNodeClick_hFhWIIdgPGE", [
-    childrenVisible,
-    hasChildren,
-    props
-  ]);
-  const isActive = props.isHover && props.node.id === props.activeNodeId;
-  const duration = props.animationDuration ?? 200;
-  const showChildren = hasChildren && childrenVisible;
-  const renderChildren = props.node.children?.map((child) => /* @__PURE__ */ _jsxSorted(TreeNodeComponent, {
-    node: child
-  }, {
-    isHover: _wrapProp(props, "isHover"),
-    gap: _wrapProp(props, "gap"),
-    expandLevel: _wrapProp(props, "expandLevel"),
-    level: _fnSignal(_hf0, [
-      props
-    ]),
-    activeNodeId: _wrapProp(props, "activeNodeId"),
-    expanded: _wrapProp(props, "expanded"),
-    onToggle: _wrapProp(props, "onToggle"),
-    onNodeClick: _wrapProp(props, "onNodeClick"),
-    renderNode: _wrapProp(props, "renderNode"),
-    animate: _wrapProp(props, "animate"),
-    animationDuration: _wrapProp(props, "animationDuration")
-  }, null, 3, child.id));
-  return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "w-full"
-  }, [
-    /* @__PURE__ */ _jsxSorted("div", {
-      class: [
-        "flex w-full cursor-pointer items-center rounded-lg px-1 py-0.5 transition-colors duration-150",
-        isActive ? "bg-primary/10 text-primary" : "hover:bg-card-item-hover-bg"
-      ],
-      "data-node-id": _fnSignal(_hf2, [
-        props
-      ]),
-      "data-node-name": _fnSignal(_hf3, [
-        props
-      ]),
-      style: _fnSignal(_hf1, [
-        isActive,
-        props
-      ])
-    }, {
-      "q-e:click": handleNodeClick
-    }, /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "inline-flex items-center px-2 py-1"
-    }, [
-      hasChildren ? /* @__PURE__ */ _jsxSorted(IconChevronUpMini, {
-        class: `text-muted-foreground mr-2 h-4 w-4 shrink-0 transition-transform duration-200 ${childrenVisible ? "rotate-180" : "rotate-90"}`
-      }, null, null, 3, "gW_0") : /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "mr-2 w-4 shrink-0"
-      }, null, 3, "gW_1"),
-      /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "cursor-pointer font-mono text-sm whitespace-nowrap"
-      }, props.renderNode ? /* @__PURE__ */ _jsxSorted(Fragment, null, null, props.renderNode(props.node), 1, "gW_2") : /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
-        /* @__PURE__ */ _jsxSorted("span", null, {
-          class: "text-foreground/50"
-        }, "<", 3, null),
-        /* @__PURE__ */ _jsxSorted("span", null, {
-          class: "text-primary/80"
-        }, _fnSignal(_hf4, [
-          props
-        ]), 1, null),
-        /* @__PURE__ */ _jsxSorted("span", null, {
-          class: "text-muted-foreground"
-        }, [
-          ` ${formatDisplayProps(props.node.props ?? {})}`,
-          ">"
-        ], 1, null)
-      ], 1, "gW_3"), 1, null)
-    ], 1, null), 1, null),
-    hasChildren && (props.animate ? /* @__PURE__ */ _jsxSorted("div", {
-      style: {
-        maxHeight: showChildren ? "1000px" : "0px",
-        opacity: showChildren ? "1" : "0",
-        transition: `max-height ${duration}ms ease-in-out, opacity ${duration}ms ease-in-out`
-      }
-    }, {
-      class: "overflow-hidden"
-    }, renderChildren, 1, "gW_4") : showChildren && /* @__PURE__ */ _jsxSorted(Fragment, null, null, renderChildren, 1, "gW_5"))
-  ], 1, "gW_6");
+var TreeNodeComponent = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
+	const hasChildren = (props.node.children?.length ?? 0) > 0;
+	const override = props.expanded[props.node.id];
+	const childrenVisible = override !== void 0 ? override : props.level < props.expandLevel;
+	const handleNodeClick = /*#__PURE__*/ inlinedQrl(() => {
+		const childrenVisible = _captures[0], hasChildren = _captures[1], props = _captures[2];
+		props.onNodeClick(props.node);
+		if (hasChildren) props.onToggle(props.node.id, childrenVisible);
+	}, "TreeNodeComponent_component_handleNodeClick_hFhWIIdgPGE", [
+		childrenVisible,
+		hasChildren,
+		props
+	]);
+	const isActive = props.isHover && props.node.id === props.activeNodeId;
+	const duration = props.animationDuration ?? 200;
+	const showChildren = hasChildren && childrenVisible;
+	const renderChildren = props.node.children?.map((child) => /*#__PURE__*/ _jsxSorted(TreeNodeComponent, { node: child }, {
+		isHover: _wrapProp(props, "isHover"),
+		gap: _wrapProp(props, "gap"),
+		expandLevel: _wrapProp(props, "expandLevel"),
+		level: _fnSignal(_hf0, [props], _hf0_str),
+		activeNodeId: _wrapProp(props, "activeNodeId"),
+		expanded: _wrapProp(props, "expanded"),
+		onToggle: _wrapProp(props, "onToggle"),
+		onNodeClick: _wrapProp(props, "onNodeClick"),
+		renderNode: _wrapProp(props, "renderNode"),
+		animate: _wrapProp(props, "animate"),
+		animationDuration: _wrapProp(props, "animationDuration")
+	}, null, 3, child.id));
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "w-full" }, [/*#__PURE__*/ _jsxSorted("div", {
+		class: ["flex w-full cursor-pointer items-center rounded-lg px-1 py-0.5 transition-colors duration-150", isActive ? "bg-primary/10 text-primary" : "hover:bg-card-item-hover-bg"],
+		"data-node-id": _fnSignal(_hf2, [props], _hf2_str),
+		"data-node-name": _fnSignal(_hf3, [props], _hf3_str),
+		style: _fnSignal(_hf1, [isActive, props], _hf1_str)
+	}, { "q-e:click": handleNodeClick }, /*#__PURE__*/ _jsxSorted("div", null, { class: "inline-flex items-center px-2 py-1" }, [hasChildren ? /*#__PURE__*/ _jsxSorted(IconChevronUpMini, { class: `text-muted-foreground mr-2 h-4 w-4 shrink-0 transition-transform duration-200 ${childrenVisible ? "rotate-180" : "rotate-90"}` }, null, null, 3, "aD_0") : /*#__PURE__*/ _jsxSorted("div", null, { class: "mr-2 w-4 shrink-0" }, null, 3, "aD_1"), /*#__PURE__*/ _jsxSorted("div", null, { class: "cursor-pointer font-mono text-sm whitespace-nowrap" }, props.renderNode ? /*#__PURE__*/ _jsxSorted(Fragment, null, null, props.renderNode(props.node), 1, "aD_2") : /*#__PURE__*/ _jsxSorted(Fragment, null, null, [
+		/*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground/50" }, "<", 3, null),
+		/*#__PURE__*/ _jsxSorted("span", null, { class: "text-primary/80" }, _fnSignal(_hf4, [props], _hf4_str), 1, null),
+		/*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground" }, [` ${formatDisplayProps(props.node.props ?? {})}`, ">"], 1, null)
+	], 1, "aD_3"), 1, null)], 1, null), 1, null), hasChildren && (props.animate ? /*#__PURE__*/ _jsxSorted("div", { style: {
+		maxHeight: showChildren ? "1000px" : "0px",
+		opacity: showChildren ? "1" : "0",
+		transition: `max-height ${duration}ms ease-in-out, opacity ${duration}ms ease-in-out`
+	} }, { class: "overflow-hidden" }, renderChildren, 1, "aD_4") : showChildren && /*#__PURE__*/ _jsxSorted(Fragment, null, null, renderChildren, 1, "aD_5"))], 1, "aD_6");
 }, "TreeNodeComponent_component_uTw0NGLeAGw"));
-const Tree = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
-  const ref = useSignal();
-  const activeNodeId = useSignal("");
-  const expanded = useSignal({});
-  const setActiveNode = /* @__PURE__ */ inlinedQrl((node) => {
-    const activeNodeId2 = _captures[0], props2 = _captures[1], ref2 = _captures[2];
-    if (ref2.value) {
-      ref2.value.scrollLeft = ref2.value.scrollWidth;
-    }
-    activeNodeId2.value = node.id;
-    props2.onNodeClick?.(node);
-  }, "Tree_component_setActiveNode_sXOxeM0G0DU", [
-    activeNodeId,
-    props,
-    ref
-  ]);
-  const toggleNode = /* @__PURE__ */ inlinedQrl((id, childrenVisible) => {
-    const expanded2 = _captures[0];
-    expanded2.value = {
-      ...expanded2.value,
-      [id]: !childrenVisible
-    };
-  }, "Tree_component_toggleNode_QxlcpIF5TKQ", [
-    expanded
-  ]);
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
-    const activeNodeId2 = _captures[0], expanded2 = _captures[1], props2 = _captures[2], ref2 = _captures[3];
-    const name = track(() => props2.revealNode?.value);
-    const nodes = track(() => props2.data.value);
-    if (!name) {
-      return;
-    }
-    const path = findIdPathByName(nodes, name);
-    if (!path) {
-      return;
-    }
-    const nextExpanded = {
-      ...expanded2.value
-    };
-    for (const id of path) {
-      nextExpanded[id] = true;
-    }
-    expanded2.value = nextExpanded;
-    const targetId = path[path.length - 1];
-    activeNodeId2.value = targetId;
-    const container = ref2.value;
-    if (container) {
-      const scrollDelay = props2.animate ?? true ? (props2.animationDuration ?? 200) + 50 : 0;
-      setTimeout(() => {
-        container.querySelector(`[data-node-id="${targetId}"]`)?.scrollIntoView({
-          block: "center",
-          behavior: "smooth"
-        });
-      }, scrollDelay);
-    }
-    props2.onRevealed$?.();
-  }, "Tree_component_useVisibleTask_Awi233OdHLg", [
-    activeNodeId,
-    expanded,
-    props,
-    ref
-  ]));
-  return /* @__PURE__ */ _jsxSorted("div", {
-    ref
-  }, {
-    class: "h-full w-full overflow-x-auto overflow-y-auto"
-  }, props.data.value.map((rootNode) => /* @__PURE__ */ _jsxSorted(TreeNodeComponent, {
-    node: rootNode
-  }, {
-    isHover: _fnSignal(_hf5, [
-      props
-    ]),
-    gap: _fnSignal(_hf6, [
-      props
-    ]),
-    level: 0,
-    expandLevel: _fnSignal(_hf7, [
-      props
-    ]),
-    activeNodeId: _wrapProp(activeNodeId),
-    expanded: _wrapProp(expanded),
-    onToggle: toggleNode,
-    onNodeClick: setActiveNode,
-    renderNode: _wrapProp(props, "renderNode"),
-    animate: _fnSignal(_hf8, [
-      props
-    ]),
-    animationDuration: _wrapProp(props, "animationDuration")
-  }, null, 3, rootNode.id)), 1, "gW_7");
+var Tree = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
+	const ref = useSignal();
+	const activeNodeId = useSignal("");
+	const expanded = useSignal({});
+	const setActiveNode = /*#__PURE__*/ inlinedQrl((node) => {
+		const activeNodeId = _captures[0], props = _captures[1], ref = _captures[2];
+		if (ref.value) ref.value.scrollLeft = ref.value.scrollWidth;
+		activeNodeId.value = node.id;
+		props.onNodeClick?.(node);
+	}, "Tree_component_setActiveNode_sXOxeM0G0DU", [
+		activeNodeId,
+		props,
+		ref
+	]);
+	const toggleNode = /*#__PURE__*/ inlinedQrl((id, childrenVisible) => {
+		const expanded = _captures[0];
+		expanded.value = {
+			...expanded.value,
+			[id]: !childrenVisible
+		};
+	}, "Tree_component_toggleNode_QxlcpIF5TKQ", [expanded]);
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(({ track }) => {
+		const activeNodeId = _captures[0], expanded = _captures[1], props = _captures[2], ref = _captures[3];
+		const name = track(() => props.revealNode?.value);
+		const nodes = track(() => props.data.value);
+		if (!name) return;
+		const path = findIdPathByName(nodes, name);
+		if (!path) return;
+		const nextExpanded = { ...expanded.value };
+		for (const id of path) nextExpanded[id] = true;
+		expanded.value = nextExpanded;
+		const targetId = path[path.length - 1];
+		activeNodeId.value = targetId;
+		const container = ref.value;
+		if (container) {
+			const scrollDelay = props.animate ?? true ? (props.animationDuration ?? 200) + 50 : 0;
+			setTimeout(() => {
+				container.querySelector(`[data-node-id="${targetId}"]`)?.scrollIntoView({
+					block: "center",
+					behavior: "smooth"
+				});
+			}, scrollDelay);
+		}
+		props.onRevealed$?.();
+	}, "Tree_component_useVisibleTask_Awi233OdHLg", [
+		activeNodeId,
+		expanded,
+		props,
+		ref
+	]));
+	return /*#__PURE__*/ _jsxSorted("div", null, {
+		class: "h-full w-full overflow-x-auto overflow-y-auto",
+		ref
+	}, props.data.value.map((rootNode) => /*#__PURE__*/ _jsxSorted(TreeNodeComponent, {
+		animate: _fnSignal(_hf8, [props], _hf8_str),
+		expandLevel: _fnSignal(_hf7, [props], _hf7_str),
+		gap: _fnSignal(_hf6, [props], _hf6_str),
+		isHover: _fnSignal(_hf5, [props], _hf5_str),
+		node: rootNode,
+		onNodeClick: setActiveNode,
+		onToggle: toggleNode
+	}, {
+		level: 0,
+		activeNodeId: _wrapProp(activeNodeId),
+		expanded: _wrapProp(expanded),
+		renderNode: _wrapProp(props, "renderNode"),
+		animationDuration: _wrapProp(props, "animationDuration")
+	}, null, 3, rootNode.id)), 1, "aD_7");
 }, "Tree_component_mMuREZC0V3M"));
-export {
-  Tree
-};
+export { Tree };