@qwik.dev/devtools 0.1.0 → 0.1.2

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const client = require("../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/client.qwik.cjs");
+var clientExports = client.__require();
+exports.clientExports = clientExports;

package/dist/ui/_virtual/client.qwik.mjs

@@ -0,0 +1,5 @@
+import { __require as requireClient } from "../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/client.qwik.mjs";
+var clientExports = requireClient();
+export {
+  clientExports as c
+};

package/dist/ui/_virtual/client.qwik2.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var client = {};
+exports.__exports = client;

package/dist/ui/_virtual/client.qwik2.mjs

@@ -0,0 +1,4 @@
+var client = {};
+export {
+  client as __exports
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const index = require("../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/index.qwik.cjs");
+var reactDomExports = index.__require();
+exports.reactDomExports = reactDomExports;

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

@@ -0,0 +1,5 @@
+import { __require as requireReactDom } from "../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/index.qwik.mjs";
+var reactDomExports = requireReactDom();
+export {
+  reactDomExports as r
+};

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const _commonjsHelpers = require("./_commonjsHelpers.qwik.cjs");
+const index = require("../node_modules/.pnpm/react@18.2.0/node_modules/react/index.qwik.cjs");
+var reactExports = index.__require();
+const React = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(reactExports);
+exports.default = React;
+exports.reactExports = reactExports;

package/dist/ui/_virtual/index.qwik2.mjs

@@ -0,0 +1,8 @@
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.qwik.mjs";
+import { __require as requireReact } from "../node_modules/.pnpm/react@18.2.0/node_modules/react/index.qwik.mjs";
+var reactExports = requireReact();
+const React = /* @__PURE__ */ getDefaultExportFromCjs(reactExports);
+export {
+  React as default,
+  reactExports as r
+};

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var reactDom = { exports: {} };
+exports.__module = reactDom;

package/dist/ui/_virtual/index.qwik3.mjs

@@ -0,0 +1,4 @@
+var reactDom = { exports: {} };
+export {
+  reactDom as __module
+};

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var react = { exports: {} };
+exports.__module = react;

package/dist/ui/_virtual/index.qwik4.mjs

@@ -0,0 +1,4 @@
+var react = { exports: {} };
+export {
+  react as __module
+};

package/dist/ui/_virtual/index.qwik5.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.qwik5.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/_virtual/index.qwik6.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var scheduler = { exports: {} };
+exports.__module = scheduler;

package/dist/ui/_virtual/index.qwik6.mjs

@@ -0,0 +1,4 @@
+var scheduler = { exports: {} };
+export {
+  scheduler as __module
+};

package/dist/ui/_virtual/jsx-runtime.qwik.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.qwik.cjs");
+var jsxRuntimeExports = jsxRuntime.__require();
+exports.jsxRuntimeExports = jsxRuntimeExports;

package/dist/ui/_virtual/jsx-runtime.qwik.mjs

@@ -0,0 +1,5 @@
+import { __require as requireJsxRuntime } from "../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.qwik.mjs";
+var jsxRuntimeExports = requireJsxRuntime();
+export {
+  jsxRuntimeExports as j
+};

package/dist/ui/_virtual/jsx-runtime.qwik2.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var jsxRuntime = { exports: {} };
+exports.__module = jsxRuntime;

package/dist/ui/_virtual/jsx-runtime.qwik2.mjs

@@ -0,0 +1,4 @@
+var jsxRuntime = { exports: {} };
+export {
+  jsxRuntime as __module
+};

package/dist/ui/_virtual/react-dom-server-legacy.node.development.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var reactDomServerLegacy_node_development = {};
+exports.__exports = reactDomServerLegacy_node_development;

package/dist/ui/_virtual/react-dom-server-legacy.node.development.qwik.mjs

@@ -0,0 +1,4 @@
+var reactDomServerLegacy_node_development = {};
+export {
+  reactDomServerLegacy_node_development as __exports
+};

package/dist/ui/_virtual/react-dom-server-legacy.node.production.min.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var reactDomServerLegacy_node_production_min = {};
+exports.__exports = reactDomServerLegacy_node_production_min;

package/dist/ui/_virtual/react-dom-server-legacy.node.production.min.qwik.mjs

@@ -0,0 +1,4 @@
+var reactDomServerLegacy_node_production_min = {};
+export {
+  reactDomServerLegacy_node_production_min as __exports
+};

package/dist/ui/_virtual/react-dom-server.node.development.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var reactDomServer_node_development = {};
+exports.__exports = reactDomServer_node_development;

package/dist/ui/_virtual/react-dom-server.node.development.qwik.mjs

@@ -0,0 +1,4 @@
+var reactDomServer_node_development = {};
+export {
+  reactDomServer_node_development as __exports
+};

package/dist/ui/_virtual/react-dom-server.node.production.min.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var reactDomServer_node_production_min = {};
+exports.__exports = reactDomServer_node_production_min;

package/dist/ui/_virtual/react-dom-server.node.production.min.qwik.mjs

@@ -0,0 +1,4 @@
+var reactDomServer_node_production_min = {};
+export {
+  reactDomServer_node_production_min as __exports
+};

package/dist/ui/_virtual/react-dom.development.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var reactDom_development = {};
+exports.__exports = reactDom_development;

package/dist/ui/_virtual/react-dom.development.qwik.mjs

@@ -0,0 +1,4 @@
+var reactDom_development = {};
+export {
+  reactDom_development as __exports
+};

package/dist/ui/_virtual/react-dom.production.min.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var reactDom_production_min = {};
+exports.__exports = reactDom_production_min;

package/dist/ui/_virtual/react-dom.production.min.qwik.mjs

@@ -0,0 +1,4 @@
+var reactDom_production_min = {};
+export {
+  reactDom_production_min as __exports
+};

package/dist/ui/_virtual/react-jsx-runtime.development.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var reactJsxRuntime_development = {};
+exports.__exports = reactJsxRuntime_development;

package/dist/ui/_virtual/react-jsx-runtime.development.qwik.mjs

@@ -0,0 +1,4 @@
+var reactJsxRuntime_development = {};
+export {
+  reactJsxRuntime_development as __exports
+};

package/dist/ui/_virtual/react-jsx-runtime.production.min.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var reactJsxRuntime_production_min = {};
+exports.__exports = reactJsxRuntime_production_min;

package/dist/ui/_virtual/react-jsx-runtime.production.min.qwik.mjs

@@ -0,0 +1,4 @@
+var reactJsxRuntime_production_min = {};
+export {
+  reactJsxRuntime_production_min as __exports
+};

package/dist/ui/_virtual/react.development.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var react_development = { exports: {} };
+exports.__module = react_development;

package/dist/ui/_virtual/react.development.qwik.mjs

@@ -0,0 +1,4 @@
+var react_development = { exports: {} };
+export {
+  react_development as __module
+};

package/dist/ui/_virtual/react.production.min.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var react_production_min = {};
+exports.__exports = react_production_min;

package/dist/ui/_virtual/react.production.min.qwik.mjs

@@ -0,0 +1,4 @@
+var react_production_min = {};
+export {
+  react_production_min as __exports
+};

package/dist/ui/_virtual/scheduler.development.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var scheduler_development = {};
+exports.__exports = scheduler_development;

package/dist/ui/_virtual/scheduler.development.qwik.mjs

@@ -0,0 +1,4 @@
+var scheduler_development = {};
+export {
+  scheduler_development as __exports
+};

package/dist/ui/_virtual/scheduler.production.min.qwik.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var scheduler_production_min = {};
+exports.__exports = scheduler_production_min;

package/dist/ui/_virtual/scheduler.production.min.qwik.mjs

@@ -0,0 +1,4 @@
+var scheduler_production_min = {};
+export {
+  scheduler_production_min as __exports
+};

package/dist/ui/_virtual/server.node.qwik.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const server_node = require("../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/server.node.qwik.cjs");
+var server_nodeExports = server_node.__require();
+exports.server_nodeExports = server_nodeExports;

package/dist/ui/_virtual/server.node.qwik.mjs

@@ -0,0 +1,5 @@
+import { __require as requireServer_node } from "../node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/server.node.qwik.mjs";
+var server_nodeExports = requireServer_node();
+export {
+  server_nodeExports as s
+};

package/dist/ui/_virtual/server.node.qwik2.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var server_node = {};
+exports.__exports = server_node;

package/dist/ui/_virtual/server.node.qwik2.mjs

@@ -0,0 +1,4 @@
+var server_node = {};
+export {
+  server_node as __exports
+};

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