@qwik.dev/devtools 0.2.0 → 0.2.1

package/dist/ui/lib-types/kit/src/types.d.ts

@@ -11,6 +11,7 @@ export interface ServerFunctions {
     getComponents: () => Promise<Component[]>;
     getRoutes: () => any;
     getQwikPackages: () => Promise<[string, string][]>;
+    getAllDependencies: () => Promise<any[]>;
     installPackage: (packageName: string, isDev?: boolean) => Promise<{
         success: boolean;
         error?: string;

package/dist/ui/lib-types/ui/src/components/ThemeToggle/{ThemeToggle.d.ts → QwikThemeToggle.d.ts}

@@ -1,5 +1,5 @@
 type ThemeName = 'dark' | 'light' | 'auto';
 export declare const getTheme: () => ThemeName;
 export declare const setTheme: (theme: ThemeName) => void;
-export declare const ThemeToggle: import("@qwik.dev/core").Component<unknown>;
+export declare const QwikThemeToggle: import("@qwik.dev/core").Component<unknown>;
 export {};

package/dist/ui/lib-types/ui/src/features/CodeBreack/CodeBreack.d.ts

@@ -0,0 +1 @@
+export declare const CodeBreack: import("@qwik.dev/core").Component<unknown>;

package/dist/ui/lib-types/ui/src/features/CodeBreack/HtmlParser.d.ts

@@ -0,0 +1 @@
+export declare const HtmlParser: import("@qwik.dev/core").Component<unknown>;

package/dist/ui/lib-types/ui/src/features/CodeBreack/StateParser.d.ts

@@ -0,0 +1 @@
+export declare const StateParser: import("@qwik.dev/core").Component<unknown>;

package/dist/ui/lib-types/ui/src/features/Packages/Packages.d.ts

@@ -1 +1,6 @@
-export declare const Packages: import("@qwik.dev/core").Component<unknown>;
+import { State } from '../../types/state';
+interface PackagesProps {
+    state: State;
+}
+export declare const Packages: import("@qwik.dev/core").Component<PackagesProps>;
+export {};

package/dist/ui/lib-types/ui/src/features/Packages/components/DependencyCard/DependencyCard.d.ts

@@ -0,0 +1,4 @@
+import { Package } from '../../types';
+export declare const DependencyCard: import("@qwik.dev/core").Component<{
+    pkg: Package;
+}>;

package/dist/ui/lib-types/ui/src/features/Packages/components/DependencyCard/index.d.ts

@@ -0,0 +1 @@
+export { DependencyCard } from './DependencyCard';

package/dist/ui/lib-types/ui/src/features/Packages/components/PackageIcon/PackageIcon.d.ts

@@ -0,0 +1,6 @@
+interface PackageIconProps {
+    packageName: string;
+    iconUrl?: string | null;
+}
+export declare const PackageIcon: import("@qwik.dev/core").Component<PackageIconProps>;
+export {};

package/dist/ui/lib-types/ui/src/features/Packages/components/PackageIcon/index.d.ts

@@ -0,0 +1 @@
+export { PackageIcon } from './PackageIcon';

package/dist/ui/lib-types/ui/src/features/Packages/types.d.ts

@@ -2,4 +2,15 @@ export interface Package {
     name: string;
     version: string;
     description: string;
+    author?: {
+        name: string;
+        email?: string;
+        url?: string;
+    };
+    authorAvatar?: string;
+    packageAvatar?: string;
+    homepage?: string;
+    repository?: string;
+    npmUrl?: string;
+    iconUrl?: string | null;
 }

package/dist/ui/lib-types/ui/src/features/RenderTree/data.d.ts

@@ -1,4 +1,9 @@
 import { ParsedStructure } from '@devtools/kit';
+declare global {
+    interface Window {
+        QWIK_DEVTOOLS_GLOBAL_STATE?: Record<string, ParsedStructure[]>;
+    }
+}
 export declare const findInnerHook: (allSeq: Record<any, any>[]) => Record<any, any>[];
 export declare const getQwikState: (qrl: string) => ParsedStructure[];
 export declare const returnQrlData: (seqs: Record<any, any>) => any;

package/dist/ui/lib-types/ui/src/types/state.d.ts

@@ -1,6 +1,6 @@
 import { AssetInfo, NpmInfo, RoutesInfo, Component } from '@devtools/kit';
 import { NoSerialize, Signal } from '@qwik.dev/core';
-export type TabName = 'overview' | 'packages' | 'routes' | 'state' | 'assets' | 'components' | 'inspect' | 'renderTree';
+export type TabName = 'overview' | 'packages' | 'routes' | 'state' | 'assets' | 'components' | 'inspect' | 'renderTree' | 'codeBreack';
 export interface State {
     isOpen: Signal<boolean>;
     activeTab: TabName;
@@ -8,4 +8,6 @@ export interface State {
     assets: AssetInfo[];
     components: Component[];
     routes: NoSerialize<RoutesInfo[]>;
+    allDependencies: any[];
+    isLoadingDependencies: boolean;
 }

package/dist/ui/node_modules/.pnpm/{@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__ → @qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0}/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs

@@ -29,6 +29,22 @@ const HiMegaphoneMini = (props) => /* @__PURE__ */ _jsxS("svg", {
   width: "1em",
   xmlns: "http://www.w3.org/2000/svg"
 }, 0, "AV_0");
+const HiCodeBracketSolid = (props) => /* @__PURE__ */ _jsxS("svg", {
+  ...props,
+  children: /* @__PURE__ */ _jsxQ("path", null, {
+    "clip-rule": "evenodd",
+    d: "M14.447 3.027a.75.75 0 01.527.92l-4.5 16.5a.75.75 0 01-1.448-.394l4.5-16.5a.75.75 0 01.921-.526zM16.72 6.22a.75.75 0 011.06 0l5.25 5.25a.75.75 0 010 1.06l-5.25 5.25a.75.75 0 11-1.06-1.06L21.44 12l-4.72-4.72a.75.75 0 010-1.06zm-9.44 0a.75.75 0 010 1.06L2.56 12l4.72 4.72a.75.75 0 11-1.06 1.06L.97 12.53a.75.75 0 010-1.06l5.25-5.25a.75.75 0 011.06 0z",
+    "fill-rule": "evenodd"
+  }, null, 3, null)
+}, {
+  "aria-hidden": "true",
+  "data-qwikest-icon": true,
+  fill: "currentColor",
+  height: "1em",
+  viewBox: "0 0 24 24",
+  width: "1em",
+  xmlns: "http://www.w3.org/2000/svg"
+}, 0, "C8_0");
 const HiBoltOutline = (props) => /* @__PURE__ */ _jsxS("svg", {
   ...props,
   children: /* @__PURE__ */ _jsxQ("path", null, {
@@ -122,6 +138,7 @@ const HiSunOutline = (props) => /* @__PURE__ */ _jsxS("svg", {
 export {
   HiBoltOutline,
   HiChevronUpMini,
+  HiCodeBracketSolid,
   HiCubeOutline,
   HiMegaphoneMini,
   HiMoonOutline,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwik.dev/devtools",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "main": "./dist/plugin/index.mjs",
   "description": "Qwik devtools package",
@@ -12,8 +12,11 @@
     },
     "./ui": {
       "import": "./dist/ui/index.qwik.mjs",
-      "require": "./dist/ui/index.qwik.cjs",
-      "types": "./dist/ui/lib-types/index.d.ts"
+      "types": "./dist/ui/lib-types/ui/src/index.d.ts",
+      "style": "./dist/ui/style.css"
+    },
+    "./style": {
+      "import": "./dist/ui/theme.css"
     }
   },
   "files": [
@@ -21,9 +24,12 @@
     "README.md"
   ],
   "peerDependencies": {
-    "@qwik.dev/core": "2.0.0-beta.9",
-    "@qwik.dev/router": "2.0.0-beta.9",
-    "vite": "7.1.3"
+    "@qwik.dev/core": "2.0.0-beta.11",
+    "@qwik.dev/router": "2.0.0-beta.11",
+    "vite": "7.1.3",
+    "@tailwindcss/postcss": "^4.1.14",
+    "@tailwindcss/vite": "^4.1.14",
+    "tailwindcss": "^4.1.14"
   },
   "dependencies": {
     "@qwikest/icons": "^0.0.13",

package/dist/ui/_virtual/_commonjsHelpers.qwik.cjs

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/dist/ui/_virtual/index.qwik.cjs

@@ -1,6 +0,0 @@
-"use strict";
-const _commonjsHelpers = require("./_commonjsHelpers.qwik.cjs");
-const index = require("../node_modules/.pnpm/brace-expansion@2.0.1/node_modules/brace-expansion/index.qwik.cjs");
-var braceExpansionExports = index.__require();
-const expand = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(braceExpansionExports);
-module.exports = expand;

package/dist/ui/components/DevtoolsButton/DevtoolsButton.qwik.cjs

@@ -1,104 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const DevtoolsButton = core.component$(({ state }) => {
-  const position = core.useSignal({
-    x: 16,
-    y: 16
-  });
-  const isDragging = core.useSignal(false);
-  const elementRef = core.useSignal();
-  const startMousePos = core.useSignal({
-    x: 0,
-    y: 0
-  });
-  const startElementPos = core.useSignal({
-    x: 0,
-    y: 0
-  });
-  const isMoved = core.useSignal(false);
-  const handleMouseMove = core.$((event) => {
-    if (!isDragging.value) return;
-    const deltaX = event.clientX - startMousePos.value.x;
-    const deltaY = event.clientY - startMousePos.value.y;
-    if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {
-      isMoved.value = true;
-    }
-    let newX = startElementPos.value.x - deltaX;
-    let newY = startElementPos.value.y - deltaY;
-    newX = Math.max(0, newX);
-    newY = Math.max(0, newY);
-    position.value = {
-      x: newX,
-      y: newY
-    };
-  });
-  const handleMouseUp = core.$(() => {
-    if (isDragging.value) {
-      isDragging.value = false;
-    }
-    if (!isMoved.value) {
-      state.isOpen.value = !state.isOpen.value;
-    }
-  });
-  const handleMouseDown = core.$((event) => {
-    if (event.button !== 0) return;
-    if (!elementRef.value) return;
-    event.preventDefault();
-    startMousePos.value = {
-      x: event.clientX,
-      y: event.clientY
-    };
-    const computedStyle = window.getComputedStyle(elementRef.value);
-    const currentRight = parseFloat(computedStyle.right) || 0;
-    const currentBottom = parseFloat(computedStyle.bottom) || 0;
-    startElementPos.value = {
-      x: currentRight,
-      y: currentBottom
-    };
-    position.value = {
-      x: currentRight,
-      y: currentBottom
-    };
-    isDragging.value = true;
-    isMoved.value = false;
-  });
-  core.useTask$(({ track, cleanup }) => {
-    track(() => isDragging.value);
-    if (isDragging.value && typeof window !== "undefined") {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-      cleanup(() => {
-        window.removeEventListener("mousemove", handleMouseMove);
-        window.removeEventListener("mouseup", handleMouseUp);
-      });
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ref: elementRef,
-    class: {
-      "fixed flex h-9 w-9 origin-center select-none items-center justify-center rounded-lg border border-border bg-background backdrop-blur-md": true,
-      "border-accent/50 bg-background/95 shadow-accent/35 rotate-90 shadow-lg": state.isOpen.value && !isDragging.value,
-      "cursor-grab": !isDragging.value,
-      "cursor-grabbing": isDragging.value,
-      "transition-all duration-300 ease-in-out": !isDragging.value
-    },
-    style: {
-      bottom: `${position.value.y}px`,
-      right: `${position.value.x}px`,
-      userSelect: isDragging.value ? "none" : void 0,
-      transition: isDragging.value ? "none" : void 0
-    },
-    onMouseDown$: handleMouseDown,
-    children: /* @__PURE__ */ jsxRuntime.jsx("img", {
-      width: 20,
-      height: 20,
-      src: "https://qwik.dev/logos/qwik-logo.svg",
-      alt: "Qwik Logo",
-      draggable: false,
-      class: "pointer-events-none h-5 w-5 opacity-90 drop-shadow-md"
-    })
-  });
-});
-exports.DevtoolsButton = DevtoolsButton;

package/dist/ui/components/DevtoolsContainer/DevtoolsContainer.qwik.cjs

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const DevtoolsContainer = core.component$(() => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    class: "fixed bottom-0 right-0 z-[9999] font-sans",
-    "q:slot": "content",
-    children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
-  });
-});
-exports.DevtoolsContainer = DevtoolsContainer;

package/dist/ui/components/DevtoolsPanel/DevtoolsPanel.qwik.cjs

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const DevtoolsPanel = core.component$(({ state }) => {
-  const panelRef = core.useSignal();
-  core.useTask$(({ cleanup }) => {
-    const handleKeyPress = (e) => {
-      if (e.key === "`" && e.metaKey) {
-        state.isOpen.value = !state.isOpen.value;
-      }
-      if (e.key === "Escape" && state.isOpen.value) {
-        state.isOpen.value = false;
-      }
-    };
-    const handleClickOutside = (e) => {
-      if (state.isOpen.value && panelRef.value && !panelRef.value.parentElement?.contains(e.target)) {
-        state.isOpen.value = !state.isOpen.value;
-      }
-    };
-    if (!core.isBrowser) return;
-    window.addEventListener("keydown", handleKeyPress);
-    window.addEventListener("mousedown", handleClickOutside);
-    cleanup(() => {
-      window.removeEventListener("keydown", handleKeyPress);
-      window.removeEventListener("mousedown", handleClickOutside);
-    });
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ref: panelRef,
-    class: "fixed bottom-6 right-6 flex h-[calc(100vh-3rem)] w-[calc(100vw-3rem)] translate-y-0 transform overflow-hidden rounded-lg border-2 border-border bg-background text-foreground backdrop-blur-lg transition-transform duration-300 ease-in-out",
-    children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
-  });
-});
-exports.DevtoolsPanel = DevtoolsPanel;

package/dist/ui/components/Tab/Tab.qwik.cjs

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const Tab = core.component$(({ state, id, title }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("button", {
-    onClick$: () => state.activeTab = id,
-    title,
-    class: {
-      "flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200": true,
-      "bg-foreground/5 hover:bg-foreground/10 text-muted-foreground hover:bg-primary-hover hover:text-foreground": state.activeTab !== id,
-      "shadow-accent/35 bg-accent text-white shadow-lg": state.activeTab === id
-    },
-    children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {})
-  });
-});
-exports.Tab = Tab;

package/dist/ui/components/TabContent/TabContent.qwik.cjs

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const TabContent = core.component$(() => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: "flex h-full w-full flex-col space-y-6",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: "flex items-center justify-between border-b border-border pb-4",
-        children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {
-          name: "title"
-        })
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {
-        name: "content"
-      })
-    ]
-  });
-});
-exports.TabContent = TabContent;

package/dist/ui/components/TabTitle/TabTitle.qwik.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const TabTitle = core.component$(({ title }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("h3", {
-    class: "text-xl font-semibold",
-    children: title
-  });
-});
-exports.TabTitle = TabTitle;

package/dist/ui/components/ThemeToggle/ThemeToggle.qwik.cjs

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const themeScript = require("../router-head/theme-script.qwik.cjs");
-const hi_qwik = require("../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.cjs");
-const bs_qwik = require("../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/bs.qwik.qwik.cjs");
-const themToggle = require("./themToggle.css.qwik.cjs");
-const getTheme = () => {
-  if (core.isServer) {
-    return "auto";
-  }
-  let theme;
-  try {
-    theme = localStorage.getItem(themeScript.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(themeScript.themeStorageKey, theme);
-};
-const ThemeToggle = core.component$(() => {
-  core.useStyles$(themToggle);
-  const onClick$ = core.event$(() => {
-    let currentTheme = getTheme();
-    if (currentTheme === "dark") {
-      currentTheme = "light";
-    } else if (currentTheme === "light") {
-      currentTheme = "auto";
-    } else {
-      currentTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "light" : "dark";
-    }
-    setTheme(currentTheme);
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /* @__PURE__ */ jsxRuntime.jsx("button", {
-      onClick$,
-      class: "group relative flex h-8 w-8 items-center justify-center rounded-md bg-background text-foreground hover:opacity-60",
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: "absolute inset-0 grid place-items-center transition-transform duration-200 ease-out group-hover:scale-110 group-active:scale-75",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiSunOutline, {
-            class: "themeIcon light col-start-1 row-start-1"
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiMoonOutline, {
-            class: "themeIcon dark col-start-1 row-start-1"
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx(bs_qwik.BsBrilliance, {
-            class: "themeIcon auto col-start-1 row-start-1"
-          })
-        ]
-      })
-    })
-  });
-});
-exports.ThemeToggle = ThemeToggle;
-exports.getTheme = getTheme;
-exports.setTheme = setTheme;

package/dist/ui/components/ThemeToggle/themToggle.css.qwik.cjs

@@ -1,3 +0,0 @@
-"use strict";
-const themeTogglecss = ".themeIcon {\n  opacity: 0;\n  transition: opacity 400ms ease-in-out;\n}\n\nhtml[data-theme='light'] .themeIcon.light,\nhtml[data-theme='dark'] .themeIcon.dark,\nhtml:not([data-theme]) .themeIcon.auto {\n  opacity: 1;\n}\n";
-module.exports = themeTogglecss;

package/dist/ui/components/ThemeToggle/theme-script.qwik.cjs

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const themeScript = require("../router-head/theme-script.qwik.cjs");
-const ThemeScript = () => {
-  const themeScript$1 = `
-        try {
-          const getItem = localStorage.getItem('${themeScript.themeStorageKey}')
-          if(getItem === 'light' || getItem === 'dark'){
-              document.firstElementChild.setAttribute('data-theme', getItem);
-          }
-        } catch (err) { }`;
-  return /* @__PURE__ */ jsxRuntime.jsx("script", {
-    dangerouslySetInnerHTML: themeScript$1
-  });
-};
-exports.ThemeScript = ThemeScript;

package/dist/ui/components/Tree/Tree.qwik.cjs

@@ -1,126 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
-const core = require("@qwik.dev/core");
-const hi_qwik = require("../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.cjs");
-const TreeNodeComponent = core.component$((props) => {
-  const isExpanded = core.useSignal(props.expandLevel <= props.level);
-  const hasChildren = props.node.children && props.node.children.length > 0;
-  const handleNodeClick = core.$(() => {
-    props.onNodeClick(props.node);
-    if (hasChildren) {
-      isExpanded.value = !isExpanded.value;
-    }
-  });
-  const iterateProps = (porps) => {
-    const displayProp = [
-      "q:id",
-      "q:key"
-    ];
-    return displayProp.reduce((totalStr, prop) => {
-      if (porps[prop]) {
-        totalStr += `${prop}="${porps[prop]}" `;
-      }
-      return totalStr;
-    }, "");
-  };
-  const isActive = props.isHover ? props.node.id === props.activeNodeId : false;
-  const duration = props.animationDuration ?? 200;
-  const shouldShowChildren = hasChildren && !isExpanded.value;
-  const renderChildren = props.node.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(TreeNodeComponent, {
-    isHover: props.isHover,
-    node: child,
-    gap: props.gap,
-    expandLevel: props.expandLevel,
-    level: props.level + 1,
-    activeNodeId: props.activeNodeId,
-    onNodeClick: props.onNodeClick,
-    renderNode: props.renderNode,
-    animate: props.animate,
-    animationDuration: props.animationDuration
-  }, child.id));
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: "w-full",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        style: {
-          paddingLeft: `${props.level * props.gap}px`
-        },
-        class: `flex w-full cursor-pointer items-center p-1 ${isActive ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 border border-emerald-300 dark:border-emerald-700/40 font-semibold" : ""}`,
-        onClick$: handleNodeClick,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          class: `inline-flex items-center rounded-md  px-2 py-1`,
-          children: [
-            hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(hi_qwik.HiChevronUpMini, {
-              class: `mr-2 h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform duration-200 ${isExpanded.value ? "rotate-90" : "rotate-180"}`
-            }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
-              class: "mr-2 w-4 flex-shrink-0"
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", {
-              class: "cursor-pointer whitespace-nowrap text-sm",
-              children: props.renderNode ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-                children: props.renderNode(props.node)
-              }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", {
-                    class: "text-foreground/70",
-                    children: "<"
-                  }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", {
-                    class: "text-violet-400 dark:text-violet-300",
-                    children: props.node.label || props.node.name
-                  }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", {
-                    class: "text-muted-foreground",
-                    children: [
-                      ` ${iterateProps(props.node.props || {})}`,
-                      ">"
-                    ]
-                  })
-                ]
-              })
-            })
-          ]
-        })
-      }),
-      hasChildren ? props.animate ? /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: `overflow-hidden transition-all ease-in-out`,
-        style: {
-          maxHeight: shouldShowChildren ? "1000px" : "0px",
-          opacity: shouldShowChildren ? "1" : "0",
-          transition: `max-height ${duration}ms ease-in-out, opacity ${duration}ms ease-in-out`
-        },
-        children: renderChildren
-      }) : shouldShowChildren && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: renderChildren
-      }) : null
-    ]
-  });
-});
-const Tree = core.component$((props) => {
-  const ref = core.useSignal();
-  const store = props.data;
-  const activeNodeId = core.useSignal("");
-  const setActiveNode = core.$((node) => {
-    ref.value.scrollLeft = ref.value.scrollWidth;
-    activeNodeId.value = node.id;
-    props.onNodeClick && props.onNodeClick(node);
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    class: "h-full w-full overflow-x-auto overflow-y-auto",
-    ref,
-    children: store.value.map((rootNode) => /* @__PURE__ */ jsxRuntime.jsx(TreeNodeComponent, {
-      isHover: props.isHover === false ? false : true,
-      gap: props.gap || 20,
-      node: rootNode,
-      level: 0,
-      expandLevel: props.expandLevel ?? 2,
-      activeNodeId: activeNodeId.value,
-      onNodeClick: setActiveNode,
-      renderNode: props.renderNode,
-      animate: props.animate ?? true,
-      animationDuration: props.animationDuration
-    }, rootNode.id))
-  });
-});
-exports.Tree = Tree;