@qwik.dev/devtools 0.0.2 → 0.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+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/README.md

@@ -1,47 +1 @@
-# Qwik Library ⚡️
-
-- [Qwik Docs](https://qwik.dev/)
-- [Discord](https://qwik.dev/chat)
-- [Qwik on GitHub](https://github.com/QwikDev/qwik)
-- [@QwikDev](https://twitter.com/QwikDev)
-- [Vite](https://vitejs.dev/)
-- [Partytown](https://partytown.builder.io/)
-- [Mitosis](https://github.com/BuilderIO/mitosis)
-- [Builder.io](https://www.builder.io/)
-
----
-
-## Project Structure
-
-Inside your project, you'll see the following directories and files:
-
-```
-├── public/
-│   └── ...
-└── src/
-    ├── components/
-    │   └── ...
-    └── index.ts
-```
-
-- `src/components`: Recommended directory for components.
-
-- `index.ts`: The entry point of your component library, make sure all the public components are exported from this file.
-
-## Development
-
-Development mode uses [Vite's development server](https://vitejs.dev/). For Qwik during development, the `dev` command will also server-side render (SSR) the output. The client-side development modules are loaded by the browser.
-
-```
-pnpm dev
-```
-
-> Note: during dev mode, Vite will request many JS files, which does not represent a Qwik production build.
-
-## Production
-
-The production build should generate the production build of your component library in (./lib) and the typescript type definitions in (./lib-types).
-
-```
-pnpm build
-```
+## Qwik DevTools

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

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

@@ -0,0 +1,6 @@
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+export {
+  getDefaultExportFromCjs
+};

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

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

@@ -0,0 +1,4 @@
+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
+};