@qwik.dev/devtools 0.1.1 → 0.2.0

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

@@ -0,0 +1,6 @@
+"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/_virtual/index.qwik.mjs

@@ -0,0 +1,7 @@
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.qwik.mjs";
+import { __require as requireBraceExpansion } from "../node_modules/.pnpm/brace-expansion@2.0.1/node_modules/brace-expansion/index.qwik.mjs";
+var braceExpansionExports = requireBraceExpansion();
+const expand = /* @__PURE__ */ getDefaultExportFromCjs(braceExpansionExports);
+export {
+  expand as default
+};

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

@@ -3,18 +3,101 @@ 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 bottom-4 right-4 flex h-9 w-9 origin-center cursor-pointer items-center justify-center rounded-lg border border-white/10 bg-zinc-900 backdrop-blur-md transition-all duration-300 ease-in-out": true,
-      "rotate-90 border-emerald-500/50 bg-zinc-900/95 shadow-lg shadow-emerald-500/35": state.isOpen
+      "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
     },
-    onClick$: () => state.isOpen = !state.isOpen,
+    onMouseDown$: handleMouseDown,
     children: /* @__PURE__ */ jsxRuntime.jsx("img", {
       width: 20,
       height: 20,
       src: "https://qwik.dev/logos/qwik-logo.svg",
       alt: "Qwik Logo",
-      class: "h-5 w-5 opacity-90 drop-shadow-md transition-all duration-300 ease-in-out hover:scale-110 hover:opacity-100"
+      draggable: false,
+      class: "pointer-events-none h-5 w-5 opacity-90 drop-shadow-md"
     })
   });
 });

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

@@ -1,18 +1,101 @@
 import { jsx } from "@qwik.dev/core/jsx-runtime";
-import { component$ } from "@qwik.dev/core";
+import { component$, useSignal, $, useTask$ } from "@qwik.dev/core";
 const DevtoolsButton = component$(({ state }) => {
+  const position = useSignal({
+    x: 16,
+    y: 16
+  });
+  const isDragging = useSignal(false);
+  const elementRef = useSignal();
+  const startMousePos = useSignal({
+    x: 0,
+    y: 0
+  });
+  const startElementPos = useSignal({
+    x: 0,
+    y: 0
+  });
+  const isMoved = useSignal(false);
+  const handleMouseMove = $((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 = $(() => {
+    if (isDragging.value) {
+      isDragging.value = false;
+    }
+    if (!isMoved.value) {
+      state.isOpen.value = !state.isOpen.value;
+    }
+  });
+  const handleMouseDown = $((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;
+  });
+  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__ */ jsx("div", {
+    ref: elementRef,
     class: {
-      "fixed bottom-4 right-4 flex h-9 w-9 origin-center cursor-pointer items-center justify-center rounded-lg border border-white/10 bg-zinc-900 backdrop-blur-md transition-all duration-300 ease-in-out": true,
-      "rotate-90 border-emerald-500/50 bg-zinc-900/95 shadow-lg shadow-emerald-500/35": state.isOpen
+      "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
     },
-    onClick$: () => state.isOpen = !state.isOpen,
+    onMouseDown$: handleMouseDown,
     children: /* @__PURE__ */ jsx("img", {
       width: 20,
       height: 20,
       src: "https://qwik.dev/logos/qwik-logo.svg",
       alt: "Qwik Logo",
-      class: "h-5 w-5 opacity-90 drop-shadow-md transition-all duration-300 ease-in-out hover:scale-110 hover:opacity-100"
+      draggable: false,
+      class: "pointer-events-none h-5 w-5 opacity-90 drop-shadow-md"
     })
   });
 });

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

@@ -7,17 +7,18 @@ const DevtoolsPanel = core.component$(({ state }) => {
   core.useTask$(({ cleanup }) => {
     const handleKeyPress = (e) => {
       if (e.key === "`" && e.metaKey) {
-        state.isOpen = !state.isOpen;
+        state.isOpen.value = !state.isOpen.value;
       }
-      if (e.key === "Escape" && state.isOpen) {
-        state.isOpen = false;
+      if (e.key === "Escape" && state.isOpen.value) {
+        state.isOpen.value = false;
       }
     };
     const handleClickOutside = (e) => {
-      if (state.isOpen && panelRef.value && !panelRef.value.contains(e.target)) {
-        state.isOpen = false;
+      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(() => {
@@ -27,7 +28,7 @@ const DevtoolsPanel = core.component$(({ state }) => {
   });
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref: panelRef,
-    class: "fixed bottom-8 right-6 flex h-[50vh] w-full translate-y-0 transform overflow-hidden rounded-lg border-2 border-white/10 bg-zinc-900 text-white backdrop-blur-lg transition-transform duration-300 ease-in-out md:w-3/5",
+    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, {})
   });
 });

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

@@ -1,21 +1,22 @@
 import { jsx } from "@qwik.dev/core/jsx-runtime";
-import { component$, useSignal, useTask$, Slot } from "@qwik.dev/core";
+import { component$, useSignal, useTask$, isBrowser, Slot } from "@qwik.dev/core";
 const DevtoolsPanel = component$(({ state }) => {
   const panelRef = useSignal();
   useTask$(({ cleanup }) => {
     const handleKeyPress = (e) => {
       if (e.key === "`" && e.metaKey) {
-        state.isOpen = !state.isOpen;
+        state.isOpen.value = !state.isOpen.value;
       }
-      if (e.key === "Escape" && state.isOpen) {
-        state.isOpen = false;
+      if (e.key === "Escape" && state.isOpen.value) {
+        state.isOpen.value = false;
       }
     };
     const handleClickOutside = (e) => {
-      if (state.isOpen && panelRef.value && !panelRef.value.contains(e.target)) {
-        state.isOpen = false;
+      if (state.isOpen.value && panelRef.value && !panelRef.value.parentElement?.contains(e.target)) {
+        state.isOpen.value = !state.isOpen.value;
       }
     };
+    if (!isBrowser) return;
     window.addEventListener("keydown", handleKeyPress);
     window.addEventListener("mousedown", handleClickOutside);
     cleanup(() => {
@@ -25,7 +26,7 @@ const DevtoolsPanel = component$(({ state }) => {
   });
   return /* @__PURE__ */ jsx("div", {
     ref: panelRef,
-    class: "fixed bottom-8 right-6 flex h-[50vh] w-full translate-y-0 transform overflow-hidden rounded-lg border-2 border-white/10 bg-zinc-900 text-white backdrop-blur-lg transition-transform duration-300 ease-in-out md:w-3/5",
+    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__ */ jsx(Slot, {})
   });
 });

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

@@ -8,8 +8,8 @@ const Tab = core.component$(({ state, id, title }) => {
     title,
     class: {
       "flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200": true,
-      "bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white": state.activeTab !== id,
-      "bg-emerald-500 text-white shadow-lg shadow-emerald-500/35": state.activeTab === id
+      "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, {})
   });

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

@@ -6,8 +6,8 @@ const Tab = component$(({ state, id, title }) => {
     title,
     class: {
       "flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200": true,
-      "bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white": state.activeTab !== id,
-      "bg-emerald-500 text-white shadow-lg shadow-emerald-500/35": state.activeTab === id
+      "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__ */ jsx(Slot, {})
   });

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

@@ -4,10 +4,10 @@ const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
 const core = require("@qwik.dev/core");
 const TabContent = core.component$(() => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: "space-y-6",
+    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-zinc-700 pb-4",
+        class: "flex items-center justify-between border-b border-border pb-4",
         children: /* @__PURE__ */ jsxRuntime.jsx(core.Slot, {
           name: "title"
         })

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

@@ -2,10 +2,10 @@ import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$, Slot } from "@qwik.dev/core";
 const TabContent = component$(() => {
   return /* @__PURE__ */ jsxs("div", {
-    class: "space-y-6",
+    class: "flex h-full w-full flex-col space-y-6",
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: "flex items-center justify-between border-b border-zinc-700 pb-4",
+        class: "flex items-center justify-between border-b border-border pb-4",
         children: /* @__PURE__ */ jsx(Slot, {
           name: "title"
         })

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

@@ -0,0 +1,64 @@
+"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/ThemeToggle.qwik.mjs

@@ -0,0 +1,64 @@
+import { jsx, Fragment, jsxs } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, event$, isServer } from "@qwik.dev/core";
+import { themeStorageKey } from "../router-head/theme-script.qwik.mjs";
+import { HiSunOutline, HiMoonOutline } from "../../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.mjs";
+import { BsBrilliance } from "../../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.mjs";
+import themeTogglecss from "./themToggle.css.qwik.mjs";
+const 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);
+};
+const ThemeToggle = component$(() => {
+  useStyles$(themeTogglecss);
+  const onClick$ = 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__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ 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__ */ 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__ */ jsx(HiSunOutline, {
+            class: "themeIcon light col-start-1 row-start-1"
+          }),
+          /* @__PURE__ */ jsx(HiMoonOutline, {
+            class: "themeIcon dark col-start-1 row-start-1"
+          }),
+          /* @__PURE__ */ jsx(BsBrilliance, {
+            class: "themeIcon auto col-start-1 row-start-1"
+          })
+        ]
+      })
+    })
+  });
+});
+export {
+  ThemeToggle,
+  getTheme,
+  setTheme
+};

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

@@ -0,0 +1,3 @@
+"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/themToggle.css.qwik.mjs

@@ -0,0 +1,4 @@
+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";
+export {
+  themeTogglecss as default
+};

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

@@ -0,0 +1,17 @@
+"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/ThemeToggle/theme-script.qwik.mjs

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

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

@@ -0,0 +1,126 @@
+"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;