@qwik.dev/devtools 0.0.2 → 0.0.3

package/lib/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/lib/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
+};

package/lib/devtools.qwik.cjs

@@ -0,0 +1,538 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@qwik.dev/core/jsx-runtime");
+const core = require("@qwik.dev/core");
+const viteHotClient = require("vite-hot-client");
+const heroicons = require("@qwikest/icons/heroicons");
+const lucide = require("@qwikest/icons/lucide");
+const client = require("./kit/client.qwik.cjs");
+require("superjson");
+require("birpc");
+const context = require("./kit/context.qwik.cjs");
+const dree = require("dree");
+const devtools = require("./devtools.css.qwik.cjs");
+const location = require("./utils/location.qwik.cjs");
+function getClientRpcFunctions() {
+  return {
+    healthCheck: () => true
+  };
+}
+const QwikDevtools = core.component$(() => {
+  core.useStyles$(devtools);
+  const state = core.useStore({
+    isOpen: false,
+    activeTab: "overview",
+    npmPackages: [],
+    assets: [],
+    routes: void 0
+  });
+  const panelRef = core.useSignal();
+  const location$1 = location.getCurrentLocation();
+  core.useVisibleTask$(async ({ cleanup, track }) => {
+    const hot = await viteHotClient.tryCreateHotContext(void 0, [
+      "/"
+    ]);
+    if (!hot) {
+      throw new Error("Vite Hot Context not connected");
+    }
+    context.setViteClientContext(hot);
+    client.createClientRpc(getClientRpcFunctions());
+    track(() => {
+      if (state.isOpen) {
+        const rpc = context.getViteClientRpc();
+        rpc.getAssetsFromPublicDir().then((data) => {
+          state.assets = data;
+        });
+        rpc.getRoutes().then((data) => {
+          const children = data.children || [];
+          const directories = children.filter((child) => child.type === "directory");
+          const values = [
+            {
+              relativePath: "",
+              name: "index",
+              type: dree.Type.DIRECTORY,
+              path: "",
+              isSymbolicLink: false,
+              children: void 0
+            },
+            ...directories
+          ];
+          state.routes = core.noSerialize(values);
+        });
+        rpc.getQwikPackages().then((data) => {
+          state.npmPackages = data;
+        });
+      }
+    });
+    const handleKeyPress = (e) => {
+      if (e.key === "`" && e.metaKey) {
+        state.isOpen = !state.isOpen;
+      }
+      if (e.key === "Escape" && state.isOpen) {
+        state.isOpen = false;
+      }
+    };
+    const handleClickOutside = (e) => {
+      if (state.isOpen && panelRef.value && !panelRef.value.contains(e.target)) {
+        state.isOpen = false;
+      }
+    };
+    window.addEventListener("keydown", handleKeyPress);
+    window.addEventListener("mousedown", handleClickOutside);
+    cleanup(() => {
+      window.removeEventListener("keydown", handleKeyPress);
+      window.removeEventListener("mousedown", handleClickOutside);
+    });
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: {
+      "devtools-container": true,
+      "devtools-open": state.isOpen
+    },
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: {
+          "devtools-toggle": true,
+          "is-open": state.isOpen
+        },
+        onClick$: () => state.isOpen = !state.isOpen,
+        children: /* @__PURE__ */ jsxRuntime.jsx("img", {
+          width: 20,
+          height: 20,
+          src: "https://qwik.dev/logos/qwik-logo.svg",
+          alt: "Qwik Logo",
+          class: "toggle-icon"
+        })
+      }),
+      state.isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        ref: panelRef,
+        class: "devtools-panel",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "devtools-tabs",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("button", {
+                class: {
+                  "tab-active": state.activeTab === "overview"
+                },
+                onClick$: () => state.activeTab = "overview",
+                title: "Overview",
+                children: /* @__PURE__ */ jsxRuntime.jsx(heroicons.HiBoltOutline, {
+                  width: 20,
+                  height: 20
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", {
+                class: {
+                  "tab-active": state.activeTab === "components"
+                },
+                onClick$: () => state.activeTab = "components",
+                title: "Components",
+                children: /* @__PURE__ */ jsxRuntime.jsx(heroicons.HiCubeOutline, {
+                  width: 20,
+                  height: 20
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", {
+                class: {
+                  "tab-active": state.activeTab === "routes"
+                },
+                onClick$: () => state.activeTab = "routes",
+                title: "Routes",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucide.LuFolderTree, {
+                  width: 20,
+                  height: 20
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", {
+                class: {
+                  "tab-active": state.activeTab === "state"
+                },
+                onClick$: () => state.activeTab = "state",
+                title: "State",
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", {
+                  width: "20",
+                  height: "20",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                      d: "M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7zm0 2a5 5 0 0 0-5 5c0 2.05 1.23 3.81 3 4.58V16h4v-2.42c1.77-.77 3-2.53 3-4.58a5 5 0 0 0-5-5z",
+                      fill: "currentColor"
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", {
+                      d: "M8 20v1h8v-1H8z",
+                      fill: "currentColor"
+                    })
+                  ]
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", {
+                class: {
+                  "tab-active": state.activeTab === "assets"
+                },
+                onClick$: () => state.activeTab = "assets",
+                title: "Assets",
+                children: /* @__PURE__ */ jsxRuntime.jsx(heroicons.HiPhotoOutline, {
+                  width: 20,
+                  height: 20
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "devtools-content",
+            children: [
+              state.activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "tab-content overview",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "header-section",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "title-container",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("img", {
+                            width: 32,
+                            height: 32,
+                            src: "https://qwik.dev/logos/qwik-logo.svg",
+                            alt: "Qwik Logo",
+                            class: "qwik-logo"
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx("h1", {
+                            children: "Qwik DevTools"
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "version",
+                        children: [
+                          "v",
+                          state.npmPackages.find(([name]) => name.includes("core"))?.[1] || "0.0.0"
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "metrics-grid",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "metric-card",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "metric-icon",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(lucide.LuFolderTree, {
+                              class: "icon"
+                            })
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "metric-content",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-value",
+                                children: state.routes?.length
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-label",
+                                children: "pages"
+                              })
+                            ]
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "metric-card",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "metric-icon",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(heroicons.HiCubeOutline, {
+                              class: "icon"
+                            })
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "metric-content",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-value",
+                                children: state.assets.length
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-label",
+                                children: "components"
+                              })
+                            ]
+                          })
+                        ]
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "metric-card",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "metric-icon",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(heroicons.HiPhotoOutline, {
+                              class: "icon"
+                            })
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "metric-content",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-value",
+                                children: state.assets.length || 0
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "metric-label",
+                                children: "assets"
+                              })
+                            ]
+                          })
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "packages-section",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", {
+                        children: "Installed Packages"
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", {
+                        class: "packages-grid",
+                        children: state.npmPackages.map(([name, version]) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                          class: "package-item",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("div", {
+                              class: "package-name",
+                              children: name
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                              class: "package-version",
+                              children: [
+                                "v",
+                                version
+                              ]
+                            })
+                          ]
+                        }, name))
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "performance-section",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", {
+                        children: "Performance"
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "performance-metrics",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "perf-item",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                children: "SSR to full load"
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                class: "perf-value",
+                                children: "-"
+                              })
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "perf-item",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                children: "Page load"
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                class: "perf-value",
+                                children: "-"
+                              })
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "perf-item",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                children: "Navigation"
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                class: "perf-value",
+                                children: "-"
+                              })
+                            ]
+                          })
+                        ]
+                      })
+                    ]
+                  })
+                ]
+              }),
+              state.activeTab === "assets" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "tab-content assets",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "header-section",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", {
+                        children: "Public Assets"
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "assets-stats",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                            class: "stat-item",
+                            children: [
+                              "Total Size:",
+                              " ",
+                              (state.assets?.reduce((acc, asset) => acc + asset.size, 0) / 1024).toFixed(2),
+                              " ",
+                              "KB"
+                            ]
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                            class: "stat-item",
+                            children: [
+                              "Count: ",
+                              state.assets?.length || 0
+                            ]
+                          })
+                        ]
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    class: "assets-grid",
+                    children: state.assets?.map((asset) => {
+                      const isImage = asset.path.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
+                      const fileExt = asset.path.split(".").pop()?.toUpperCase();
+                      return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "asset-card",
+                        children: [
+                          isImage ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "asset-preview",
+                            children: /* @__PURE__ */ jsxRuntime.jsx("img", {
+                              width: 176,
+                              height: 176,
+                              src: asset.publicPath,
+                              alt: asset.path
+                            })
+                          }) : /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "file-preview",
+                            children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+                              class: "file-ext",
+                              children: fileExt
+                            })
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                            class: "asset-info",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                                class: "asset-path",
+                                title: asset.path,
+                                children: asset.path.split("/").pop()
+                              }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                                class: "asset-meta",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsxs("span", {
+                                    class: "asset-size",
+                                    children: [
+                                      (asset.size / 1024).toFixed(2),
+                                      " KB"
+                                    ]
+                                  }),
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                    class: "asset-type",
+                                    children: fileExt
+                                  })
+                                ]
+                              })
+                            ]
+                          })
+                        ]
+                      }, asset.filePath);
+                    })
+                  })
+                ]
+              }),
+              state.activeTab === "components" && /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: "tab-content",
+                children: /* @__PURE__ */ jsxRuntime.jsx("h3", {
+                  children: "Components"
+                })
+              }),
+              state.activeTab === "routes" && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                class: "tab-content",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", {
+                    children: "Application Routes"
+                  }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                    class: "routes-table",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                        class: "table-header",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "col-route",
+                            children: "Route Path"
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "col-route",
+                            children: "Name"
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "col-route",
+                            children: "Middleware"
+                          }),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", {
+                            class: "col-route",
+                            children: "Layout"
+                          })
+                        ]
+                      }),
+                      state.routes?.map((route, i) => {
+                        const children = route.children || [];
+                        const layout = route.relativePath !== "" && route.type === "directory" && children.find((child) => child.name.startsWith("layout"));
+                        return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                          class: "table-row",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("div", {
+                              class: "col-route",
+                              children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                class: location$1 === `/${route.relativePath}` ? "active-route" : "",
+                                children: route.relativePath === "" ? "/" : `/${route.relativePath}/`
+                              })
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsx("div", {
+                              class: "col-route",
+                              children: route.name
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsx("div", {
+                              class: "col-route",
+                              children: "-"
+                            }),
+                            /* @__PURE__ */ jsxRuntime.jsx("div", {
+                              class: "col-route",
+                              children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+                                class: layout && i > 0 ? "custom-layout" : "",
+                                children: layout && i > 0 ? `${route.relativePath}/layout` : "default"
+                              })
+                            })
+                          ]
+                        }, route.relativePath);
+                      })
+                    ]
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+});
+exports.QwikDevtools = QwikDevtools;