@qwik.dev/devtools 0.0.5 → 0.1.0

package/dist/ui/lib-types/ui/src/hooks/useDebouncer.d.ts

@@ -0,0 +1,2 @@
+import { QRL } from "@qwik.dev/core";
+export declare const useDebouncer: <A extends readonly unknown[], R>(fn: QRL<(...args: [...A]) => R>, delay: number) => QRL<(...args: A) => void>;

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

@@ -0,0 +1 @@
+export { QwikDevtools } from "./devtools";

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

@@ -0,0 +1,10 @@
+import { AssetInfo, NpmInfo, RoutesInfo } from "@devtools/kit";
+import { NoSerialize } from "@qwik.dev/core";
+export type TabName = "overview" | "packages" | "routes" | "state" | "assets";
+export interface State {
+    isOpen: boolean;
+    activeTab: TabName;
+    npmPackages: NpmInfo;
+    assets: AssetInfo[];
+    routes: NoSerialize<RoutesInfo[]>;
+}

package/package.json

@@ -1,28 +1,25 @@
 {
   "name": "@qwik.dev/devtools",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "license": "MIT",
   "main": "./dist/plugin/index.mjs",
   "description": "Qwik devtools package",
-  "qwik": "./dist/component/index.qwik.mjs",
+  "qwik": "./dist/ui/index.qwik.mjs",
   "exports": {
     ".": {
       "import": "./dist/plugin/index.mjs",
       "types": "./dist/plugin/index.d.ts"
     },
-    "./component": {
-      "import": "./dist/component/index.qwik.mjs",
-      "require": "./dist/component/index.qwik.cjs",
-      "types": "./dist/component/lib-types/index.d.ts"
+    "./ui": {
+      "import": "./dist/ui/index.qwik.mjs",
+      "require": "./dist/ui/index.qwik.cjs",
+      "types": "./dist/ui/lib-types/index.d.ts"
     }
   },
   "files": [
-    "dist/**"
+    "dist/**",
+    "README.md"
   ],
-  "scripts": {
-    "playground": "pnpm --filter playground dev",
-    "build": "tsx scripts/build-devtools.ts"
-  },
   "peerDependencies": {
     "vite": "^6.0.7",
     "@qwik.dev/core": "^2.0.0-alpha.4",
@@ -37,7 +34,10 @@
   },
   "devDependencies": {
     "tsx": "^4.19.2",
-    "@types/node": "^22.10.5"
+    "@types/node": "^22.10.5",
+    "@changesets/cli": "^2.27.11",
+    "@changesets/get-github-info": "^0.6.0",
+    "@changesets/types": "^6.0.0"
   },
   "private": false,
   "keywords": [
@@ -52,6 +52,5 @@
   "bugs": {
     "url": "https://github.com/QwikDev/devtools/issues"
   },
-  "homepage": "https://github.com/QwikDev/devtools#readme",
-  "packageManager": "pnpm@9.15.3+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a"
+  "homepage": "https://github.com/QwikDev/devtools#readme"
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 qwikdev
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/component/devtools.css.qwik.cjs

@@ -1,3 +0,0 @@
-"use strict";
-const styles = ".devtools-container {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  z-index: 9999;\n  font-family:\n    system-ui,\n    -apple-system,\n    sans-serif;\n}\n\n.devtools-toggle {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  width: 36px;\n  height: 36px;\n  background: #18181b;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow:\n    0 4px 12px rgba(0, 0, 0, 0.15),\n    inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  transform-origin: center;\n  overflow: hidden;\n  backdrop-filter: blur(8px);\n  animation: glow 2s ease-in-out infinite;\n}\n\n@keyframes glow {\n  0% {\n    box-shadow:\n      0 4px 12px rgba(0, 0, 0, 0.15),\n      inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  }\n  50% {\n    box-shadow:\n      0 4px 12px rgba(0, 220, 130, 0.35),\n      inset 0 1px 1px rgba(255, 255, 255, 0.1),\n      0 0 25px rgba(0, 220, 130, 0.25);\n    border-color: rgba(0, 220, 130, 0.5);\n  }\n  100% {\n    box-shadow:\n      0 4px 12px rgba(0, 0, 0, 0.15),\n      inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  }\n}\n\n.devtools-toggle:hover {\n  transform: scale(1.05);\n  box-shadow:\n    0 6px 16px rgba(0, 220, 130, 0.4),\n    inset 0 1px 1px rgba(255, 255, 255, 0.15),\n    0 0 30px rgba(0, 220, 130, 0.3);\n  border-color: rgba(0, 220, 130, 0.6);\n  background: #1c1c1f;\n  animation: none;\n}\n\n.devtools-toggle:active {\n  transform: scale(0.98);\n  box-shadow:\n    0 2px 8px rgba(0, 0, 0, 0.15),\n    inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  animation: none;\n}\n\n.devtools-toggle.is-open {\n  transform: rotate(90deg);\n  background: #1c1c1f;\n  animation: none;\n  border-color: rgba(0, 220, 130, 0.5);\n  box-shadow:\n    0 4px 12px rgba(0, 220, 130, 0.35),\n    inset 0 1px 1px rgba(255, 255, 255, 0.1),\n    0 0 25px rgba(0, 220, 130, 0.25);\n}\n\n.devtools-toggle.is-open:hover {\n  transform: rotate(90deg) scale(1.05);\n  box-shadow:\n    0 6px 16px rgba(0, 220, 130, 0.4),\n    inset 0 1px 1px rgba(255, 255, 255, 0.15),\n    0 0 30px rgba(0, 220, 130, 0.3);\n}\n\n.devtools-panel {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 50vh;\n  background: #18181b;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #fff;\n  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);\n  display: flex;\n  transform: translateY(100%);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  backdrop-filter: blur(16px);\n}\n\n.devtools-open .devtools-panel {\n  transform: translateY(0);\n}\n\n@media (min-width: 640px) {\n  .devtools-panel {\n    width: 60%;\n    right: 0;\n  }\n}\n\n.devtools-header {\n  padding: 12px;\n  border-bottom: 1px solid #27272a;\n}\n\n.devtools-tabs {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  border-right: 1px solid #27272a;\n  background: #1c1c1f;\n}\n\n.devtools-tabs button {\n  padding: 4px;\n  background: transparent;\n  border: none;\n  color: #a1a1aa;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n}\n\n.devtools-tabs button:hover {\n  background: #27272a;\n  color: #fff;\n}\n\n.devtools-tabs button.tab-active {\n  background: #3b82f6;\n  color: white;\n}\n\n.devtools-content {\n  padding: 16px;\n  height: 100%;\n  overflow-y: auto;\n  flex: 1;\n}\n\n.tab-content h3 {\n  margin: 0 0 16px 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.info-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n.info-item {\n  background: #27272a;\n  padding: 12px;\n  border-radius: 8px;\n}\n\n.info-label {\n  display: block;\n  color: #a1a1aa;\n  font-size: 12px;\n  margin-bottom: 4px;\n}\n\n.info-value {\n  font-size: 14px;\n  font-weight: 500;\n}\n\n/* Asset specific styles */\n.assets-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 1.25rem;\n  margin-top: 1.5rem;\n  padding: 0.5rem;\n}\n\n.asset-card {\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 8px;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.asset-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n  border-color: rgba(255, 255, 255, 0.15);\n}\n\n.asset-preview {\n  height: 120px;\n  background: rgba(0, 0, 0, 0.3);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n}\n\n.asset-preview img {\n  width: 70%;\n  height: 70%;\n  object-fit: contain;\n  padding: 0.5rem;\n}\n\n.file-preview {\n  height: 120px;\n  background: rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n}\n\n.file-ext {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.7);\n  text-transform: uppercase;\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.asset-info {\n  padding: 0.75rem;\n  background: rgba(0, 0, 0, 0.2);\n}\n\n.asset-path {\n  color: #fff;\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.asset-meta {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.asset-size {\n  color: #94a3b8;\n  font-size: 0.75rem;\n}\n\n.asset-type {\n  color: #94a3b8;\n  font-size: 0.75rem;\n  padding: 0.25rem 0.5rem;\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 4px;\n  letter-spacing: 0.025em;\n}\n\n.tab-content.overview {\n  padding: 1.5rem;\n}\n\n.metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1.25rem;\n  margin-bottom: 2rem;\n}\n\n.metric-card {\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 12px;\n  padding: 1.25rem;\n  display: flex;\n  align-items: center;\n  gap: 1.25rem;\n  transition: all 0.2s ease;\n}\n\n.metric-card:hover {\n  background: rgba(255, 255, 255, 0.05);\n  transform: translateY(-1px);\n}\n\n.metric-icon {\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 10px;\n  padding: 0.875rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n}\n\n.metric-card:hover .metric-icon {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  color: #10b981;\n}\n\n.metric-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.metric-value {\n  font-size: 1.75rem;\n  font-weight: 600;\n  color: #fff;\n  line-height: 1.2;\n}\n\n.metric-label {\n  color: #94a3b8;\n  font-size: 0.875rem;\n  font-weight: 500;\n  letter-spacing: 0.01em;\n}\n\n.performance-section {\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 12px;\n  padding: 1.25rem;\n}\n\n.performance-section h3 {\n  margin: 0 0 1.25rem 0;\n  font-size: 1rem;\n  font-weight: 600;\n  color: #fff;\n  letter-spacing: 0.01em;\n}\n\n.performance-metrics {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.perf-item {\n  display: flex;\n  justify-content: space-between;\n  color: #94a3b8;\n  font-size: 0.875rem;\n  padding: 0.5rem 0;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.perf-item:last-child {\n  border-bottom: none;\n}\n\n.perf-value {\n  color: #fff;\n  font-weight: 500;\n}\n\n.header-section {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 2rem;\n  padding-bottom: 1.5rem;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.title-container {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.qwik-logo {\n  width: 2rem;\n  height: 2rem;\n}\n\n.title-container h1 {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: #fff;\n  margin: 0;\n}\n\n.version {\n  font-size: 0.875rem;\n  color: #94a3b8;\n  font-weight: 500;\n  padding: 0.25rem 0.75rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 9999px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.packages-section {\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 12px;\n  padding: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.packages-section h3 {\n  margin: 0 0 1.25rem 0;\n  font-size: 1rem;\n  font-weight: 600;\n  color: #fff;\n  letter-spacing: 0.01em;\n}\n\n.packages-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 0.75rem;\n}\n\n.package-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.75rem 1rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n}\n\n.package-item:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.package-name {\n  color: #fff;\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n\n.package-version {\n  color: #94a3b8;\n  font-size: 0.75rem;\n  font-weight: 500;\n  padding: 0.25rem 0.5rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 9999px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.tab-content.assets {\n  padding: 1.5rem;\n}\n\n.assets-stats {\n  display: flex;\n  gap: 1rem;\n}\n\n.stat-item {\n  color: #94a3b8;\n  font-size: 0.875rem;\n  padding: 0.25rem 0.75rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 9999px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.routes-table {\n  background: #18181b;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.table-header {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr 1fr;\n  padding: 12px 16px;\n  background: #27272a;\n  font-weight: 500;\n  border-bottom: 1px solid #3f3f46;\n}\n\n.table-row {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr 1fr;\n  padding: 12px 16px;\n  border-bottom: 1px solid #27272a;\n  align-items: center;\n}\n\n.table-row:hover {\n  background: #27272a;\n}\n\n.active-route {\n  background: #22c55e20;\n  color: #22c55e;\n  padding: 4px 8px;\n  border-radius: 4px;\n}\n\n.col-route {\n  font-family: monospace;\n}\n\n.custom-layout {\n  color: #3b82f6;\n}\n\n.toggle-icon {\n  width: 20px;\n  height: 20px;\n  transition: all 0.3s ease;\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));\n  opacity: 0.9;\n}\n\n.devtools-toggle:hover .toggle-icon {\n  transform: scale(1.1);\n  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));\n  opacity: 1;\n}\n";
-module.exports = styles;

package/dist/component/devtools.css.qwik.mjs

@@ -1,4 +0,0 @@
-const styles = ".devtools-container {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  z-index: 9999;\n  font-family:\n    system-ui,\n    -apple-system,\n    sans-serif;\n}\n\n.devtools-toggle {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  width: 36px;\n  height: 36px;\n  background: #18181b;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow:\n    0 4px 12px rgba(0, 0, 0, 0.15),\n    inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  transform-origin: center;\n  overflow: hidden;\n  backdrop-filter: blur(8px);\n  animation: glow 2s ease-in-out infinite;\n}\n\n@keyframes glow {\n  0% {\n    box-shadow:\n      0 4px 12px rgba(0, 0, 0, 0.15),\n      inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  }\n  50% {\n    box-shadow:\n      0 4px 12px rgba(0, 220, 130, 0.35),\n      inset 0 1px 1px rgba(255, 255, 255, 0.1),\n      0 0 25px rgba(0, 220, 130, 0.25);\n    border-color: rgba(0, 220, 130, 0.5);\n  }\n  100% {\n    box-shadow:\n      0 4px 12px rgba(0, 0, 0, 0.15),\n      inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  }\n}\n\n.devtools-toggle:hover {\n  transform: scale(1.05);\n  box-shadow:\n    0 6px 16px rgba(0, 220, 130, 0.4),\n    inset 0 1px 1px rgba(255, 255, 255, 0.15),\n    0 0 30px rgba(0, 220, 130, 0.3);\n  border-color: rgba(0, 220, 130, 0.6);\n  background: #1c1c1f;\n  animation: none;\n}\n\n.devtools-toggle:active {\n  transform: scale(0.98);\n  box-shadow:\n    0 2px 8px rgba(0, 0, 0, 0.15),\n    inset 0 1px 1px rgba(255, 255, 255, 0.1);\n  animation: none;\n}\n\n.devtools-toggle.is-open {\n  transform: rotate(90deg);\n  background: #1c1c1f;\n  animation: none;\n  border-color: rgba(0, 220, 130, 0.5);\n  box-shadow:\n    0 4px 12px rgba(0, 220, 130, 0.35),\n    inset 0 1px 1px rgba(255, 255, 255, 0.1),\n    0 0 25px rgba(0, 220, 130, 0.25);\n}\n\n.devtools-toggle.is-open:hover {\n  transform: rotate(90deg) scale(1.05);\n  box-shadow:\n    0 6px 16px rgba(0, 220, 130, 0.4),\n    inset 0 1px 1px rgba(255, 255, 255, 0.15),\n    0 0 30px rgba(0, 220, 130, 0.3);\n}\n\n.devtools-panel {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 50vh;\n  background: #18181b;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #fff;\n  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);\n  display: flex;\n  transform: translateY(100%);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  backdrop-filter: blur(16px);\n}\n\n.devtools-open .devtools-panel {\n  transform: translateY(0);\n}\n\n@media (min-width: 640px) {\n  .devtools-panel {\n    width: 60%;\n    right: 0;\n  }\n}\n\n.devtools-header {\n  padding: 12px;\n  border-bottom: 1px solid #27272a;\n}\n\n.devtools-tabs {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  border-right: 1px solid #27272a;\n  background: #1c1c1f;\n}\n\n.devtools-tabs button {\n  padding: 4px;\n  background: transparent;\n  border: none;\n  color: #a1a1aa;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n}\n\n.devtools-tabs button:hover {\n  background: #27272a;\n  color: #fff;\n}\n\n.devtools-tabs button.tab-active {\n  background: #3b82f6;\n  color: white;\n}\n\n.devtools-content {\n  padding: 16px;\n  height: 100%;\n  overflow-y: auto;\n  flex: 1;\n}\n\n.tab-content h3 {\n  margin: 0 0 16px 0;\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.info-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n.info-item {\n  background: #27272a;\n  padding: 12px;\n  border-radius: 8px;\n}\n\n.info-label {\n  display: block;\n  color: #a1a1aa;\n  font-size: 12px;\n  margin-bottom: 4px;\n}\n\n.info-value {\n  font-size: 14px;\n  font-weight: 500;\n}\n\n/* Asset specific styles */\n.assets-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 1.25rem;\n  margin-top: 1.5rem;\n  padding: 0.5rem;\n}\n\n.asset-card {\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 8px;\n  overflow: hidden;\n  transition: all 0.2s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.asset-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n  border-color: rgba(255, 255, 255, 0.15);\n}\n\n.asset-preview {\n  height: 120px;\n  background: rgba(0, 0, 0, 0.3);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n}\n\n.asset-preview img {\n  width: 70%;\n  height: 70%;\n  object-fit: contain;\n  padding: 0.5rem;\n}\n\n.file-preview {\n  height: 120px;\n  background: rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n}\n\n.file-ext {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: rgba(255, 255, 255, 0.7);\n  text-transform: uppercase;\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.asset-info {\n  padding: 0.75rem;\n  background: rgba(0, 0, 0, 0.2);\n}\n\n.asset-path {\n  color: #fff;\n  font-size: 0.875rem;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.asset-meta {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.asset-size {\n  color: #94a3b8;\n  font-size: 0.75rem;\n}\n\n.asset-type {\n  color: #94a3b8;\n  font-size: 0.75rem;\n  padding: 0.25rem 0.5rem;\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 4px;\n  letter-spacing: 0.025em;\n}\n\n.tab-content.overview {\n  padding: 1.5rem;\n}\n\n.metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1.25rem;\n  margin-bottom: 2rem;\n}\n\n.metric-card {\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 12px;\n  padding: 1.25rem;\n  display: flex;\n  align-items: center;\n  gap: 1.25rem;\n  transition: all 0.2s ease;\n}\n\n.metric-card:hover {\n  background: rgba(255, 255, 255, 0.05);\n  transform: translateY(-1px);\n}\n\n.metric-icon {\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 10px;\n  padding: 0.875rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n}\n\n.metric-card:hover .metric-icon {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  color: #10b981;\n}\n\n.metric-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.metric-value {\n  font-size: 1.75rem;\n  font-weight: 600;\n  color: #fff;\n  line-height: 1.2;\n}\n\n.metric-label {\n  color: #94a3b8;\n  font-size: 0.875rem;\n  font-weight: 500;\n  letter-spacing: 0.01em;\n}\n\n.performance-section {\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 12px;\n  padding: 1.25rem;\n}\n\n.performance-section h3 {\n  margin: 0 0 1.25rem 0;\n  font-size: 1rem;\n  font-weight: 600;\n  color: #fff;\n  letter-spacing: 0.01em;\n}\n\n.performance-metrics {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.perf-item {\n  display: flex;\n  justify-content: space-between;\n  color: #94a3b8;\n  font-size: 0.875rem;\n  padding: 0.5rem 0;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.perf-item:last-child {\n  border-bottom: none;\n}\n\n.perf-value {\n  color: #fff;\n  font-weight: 500;\n}\n\n.header-section {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 2rem;\n  padding-bottom: 1.5rem;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.title-container {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.qwik-logo {\n  width: 2rem;\n  height: 2rem;\n}\n\n.title-container h1 {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: #fff;\n  margin: 0;\n}\n\n.version {\n  font-size: 0.875rem;\n  color: #94a3b8;\n  font-weight: 500;\n  padding: 0.25rem 0.75rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 9999px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.packages-section {\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 12px;\n  padding: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.packages-section h3 {\n  margin: 0 0 1.25rem 0;\n  font-size: 1rem;\n  font-weight: 600;\n  color: #fff;\n  letter-spacing: 0.01em;\n}\n\n.packages-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 0.75rem;\n}\n\n.package-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.75rem 1rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 8px;\n  transition: all 0.2s ease;\n}\n\n.package-item:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.package-name {\n  color: #fff;\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n\n.package-version {\n  color: #94a3b8;\n  font-size: 0.75rem;\n  font-weight: 500;\n  padding: 0.25rem 0.5rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 9999px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.tab-content.assets {\n  padding: 1.5rem;\n}\n\n.assets-stats {\n  display: flex;\n  gap: 1rem;\n}\n\n.stat-item {\n  color: #94a3b8;\n  font-size: 0.875rem;\n  padding: 0.25rem 0.75rem;\n  background: rgba(255, 255, 255, 0.05);\n  border-radius: 9999px;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n.routes-table {\n  background: #18181b;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.table-header {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr 1fr;\n  padding: 12px 16px;\n  background: #27272a;\n  font-weight: 500;\n  border-bottom: 1px solid #3f3f46;\n}\n\n.table-row {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr 1fr;\n  padding: 12px 16px;\n  border-bottom: 1px solid #27272a;\n  align-items: center;\n}\n\n.table-row:hover {\n  background: #27272a;\n}\n\n.active-route {\n  background: #22c55e20;\n  color: #22c55e;\n  padding: 4px 8px;\n  border-radius: 4px;\n}\n\n.col-route {\n  font-family: monospace;\n}\n\n.custom-layout {\n  color: #3b82f6;\n}\n\n.toggle-icon {\n  width: 20px;\n  height: 20px;\n  transition: all 0.3s ease;\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));\n  opacity: 0.9;\n}\n\n.devtools-toggle:hover .toggle-icon {\n  transform: scale(1.1);\n  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));\n  opacity: 1;\n}\n";
-export {
-  styles as default
-};