@qwik.dev/devtools 0.2.2 → 0.2.4

package/dist/plugin/index.js

@@ -8030,171 +8030,199 @@ var import_src = __toESM(require_src(), 1);
 //#endregion
 //#region src/npm/index.ts
 const log$4 = (0, import_src.debug)("qwik:devtools:npm");
-const packageCache = new Map();
-const CACHE_TTL = 1e3 * 60 * 30;
 let preloadedDependencies = null;
 let isPreloading = false;
 let preloadPromise = null;
-function getCachedPackage(name) {
-	const cached = packageCache.get(name);
-	if (cached && Date.now() - cached.timestamp < CACHE_TTL) return cached.data;
-	packageCache.delete(name);
-	return null;
-}
-function setCachedPackage(name, data) {
-	packageCache.set(name, {
-		data,
-		timestamp: Date.now()
-	});
+let dependenciesStatus = {
+	phase: "idle",
+	loaded: 0,
+	total: 0,
+	startedAt: null,
+	finishedAt: null
+};
+async function fileExists(filePath) {
+	try {
+		await fsp.access(filePath);
+		return true;
+	} catch {
+		return false;
+	}
 }
-async function findNearestFileUp(startDir, fileName) {
+async function readJsonFile(filePath) {
 	try {
-		let currentDir = path.resolve(startDir);
-		for (let i = 0; i < 100; i++) {
-			const candidate = path.join(currentDir, fileName);
-			const exists = await fsp.access(candidate).then(() => true).catch(() => false);
-			if (exists) return candidate;
-			const parent = path.dirname(currentDir);
-			if (parent === currentDir) break;
-			currentDir = parent;
-		}
-		return null;
+		const content = await fsp.readFile(filePath, "utf-8");
+		return JSON.parse(content);
 	} catch {
 		return null;
 	}
 }
+async function findNearestFileUp(startDir, fileName) {
+	let currentDir = path.resolve(startDir);
+	for (let i = 0; i < 100; i++) {
+		const candidate = path.join(currentDir, fileName);
+		if (await fileExists(candidate)) return candidate;
+		const parent = path.dirname(currentDir);
+		if (parent === currentDir) break;
+		currentDir = parent;
+	}
+	return null;
+}
 function getProjectStartDirFromConfig(config) {
 	if (config?.root) return config.root;
 	if (config?.configFile) return path.dirname(config.configFile);
 	return process.cwd();
 }
-async function detectPackageManager(projectRoot) {
-	try {
-		if (await fsp.access(path.join(projectRoot, "pnpm-lock.yaml")).then(() => true).catch(() => false)) return "pnpm";
-		if (await fsp.access(path.join(projectRoot, "yarn.lock")).then(() => true).catch(() => false)) return "yarn";
-		if (await fsp.access(path.join(projectRoot, "package-lock.json")).then(() => true).catch(() => false)) return "npm";
-		return "pnpm";
-	} catch {
-		return "pnpm";
-	}
+function nodeModulesPackageJsonPath(projectRoot, name) {
+	return path.join(projectRoot, "node_modules", ...name.split("/"), "package.json");
+}
+function normalizeRepositoryUrl(repository) {
+	const url = typeof repository === "string" ? repository : repository?.url;
+	if (!url || typeof url !== "string") return void 0;
+	return url.replace(/^git\+/, "").replace(/^ssh:\/\/git@/, "https://").replace(/\.git$/, "");
 }
-const preloadDependencies = async (config) => {
-	if (preloadedDependencies) {
-		log$4("[Qwik DevTools] Dependencies already preloaded");
-		return preloadedDependencies;
+function guessIconUrl(name, repositoryUrl) {
+	if (name.startsWith("@")) {
+		const scope = name.split("/")[0].substring(1);
+		return `https://avatars.githubusercontent.com/${scope}?size=64`;
 	}
-	if (isPreloading && preloadPromise) {
-		log$4("[Qwik DevTools] Preloading already in progress...");
-		return preloadPromise;
+	if (repositoryUrl?.includes("github.com")) {
+		const match$1 = repositoryUrl.match(/github\.com\/([^\/]+)/);
+		if (match$1) return `https://avatars.githubusercontent.com/${match$1[1]}?size=64`;
 	}
+	return null;
+}
+function deferToEventLoop() {
+	return new Promise((resolve$2) => setImmediate(resolve$2));
+}
+async function mapLimit(items, concurrency, fn) {
+	if (items.length === 0) return [];
+	const results = new Array(items.length);
+	let cursor = 0;
+	const workers = Array.from({ length: Math.min(concurrency, items.length) }, async () => {
+		while (true) {
+			const i = cursor++;
+			if (i >= items.length) return;
+			results[i] = await fn(items[i], i);
+		}
+	});
+	await Promise.all(workers);
+	return results;
+}
+async function detectPackageManager(projectRoot) {
+	if (await fileExists(path.join(projectRoot, "pnpm-lock.yaml"))) return "pnpm";
+	if (await fileExists(path.join(projectRoot, "yarn.lock"))) return "yarn";
+	if (await fileExists(path.join(projectRoot, "package-lock.json"))) return "npm";
+	return "pnpm";
+}
+async function phase1LocalIndex(projectRoot, deps) {
+	const localConcurrency = 16;
+	return mapLimit(deps, localConcurrency, async ([name, requestedVersion]) => {
+		const pkgJsonPath = nodeModulesPackageJsonPath(projectRoot, name);
+		const installedPkg = await readJsonFile(pkgJsonPath);
+		const version = installedPkg?.version || requestedVersion;
+		const repository = normalizeRepositoryUrl(installedPkg?.repository);
+		const iconUrl = guessIconUrl(name, repository);
+		const info = {
+			name,
+			version,
+			description: installedPkg?.description || "No description available",
+			author: installedPkg?.author,
+			homepage: installedPkg?.homepage,
+			repository,
+			npmUrl: `https://www.npmjs.com/package/${name}`,
+			iconUrl
+		};
+		dependenciesStatus.loaded++;
+		if (dependenciesStatus.loaded % 50 === 0) await deferToEventLoop();
+		return info;
+	});
+}
+async function phase2BackgroundEnrich(deps) {
+	const targets = deps.filter((p$1) => !p$1.repository || !p$1.iconUrl || p$1.description === "No description available");
+	const enrichConcurrency = 6;
+	await mapLimit(targets, enrichConcurrency, async (p$1) => {
+		const repo = normalizeRepositoryUrl(p$1.repository);
+		if (repo && repo !== p$1.repository) p$1.repository = repo;
+		if (!p$1.iconUrl) p$1.iconUrl = guessIconUrl(p$1.name, p$1.repository);
+		if (!p$1.repository || p$1.description === "No description available") try {
+			const controller = new AbortController();
+			const timeoutId = setTimeout(() => controller.abort(), 1500);
+			const res = await fetch(`https://registry.npmjs.org/${encodeURIComponent(p$1.name)}/${encodeURIComponent(p$1.version)}`, {
+				headers: { Accept: "application/json" },
+				signal: controller.signal
+			});
+			clearTimeout(timeoutId);
+			if (res.ok) {
+				const data = await res.json();
+				if (!p$1.repository) p$1.repository = normalizeRepositoryUrl(data?.repository);
+				if (p$1.description === "No description available" && data?.description) p$1.description = data.description;
+				if (!p$1.iconUrl) p$1.iconUrl = guessIconUrl(p$1.name, p$1.repository);
+			}
+		} catch {}
+		await deferToEventLoop();
+		return p$1;
+	});
+}
+async function preloadDependencies(config) {
+	if (preloadedDependencies) return preloadedDependencies;
+	if (isPreloading && preloadPromise) return preloadPromise;
 	isPreloading = true;
-	log$4("[Qwik DevTools] Starting to preload dependencies...");
+	dependenciesStatus = {
+		phase: "phase1",
+		loaded: 0,
+		total: 0,
+		startedAt: Date.now(),
+		finishedAt: null
+	};
 	preloadPromise = (async () => {
 		const startDir = getProjectStartDirFromConfig(config);
-		const pathToPackageJson = await findNearestFileUp(startDir, "package.json");
-		if (!pathToPackageJson) {
+		const packageJsonPath = await findNearestFileUp(startDir, "package.json");
+		if (!packageJsonPath) {
 			preloadedDependencies = [];
+			dependenciesStatus.phase = "done";
+			dependenciesStatus.finishedAt = Date.now();
 			isPreloading = false;
-			log$4("[Qwik DevTools] No package.json found");
 			return [];
 		}
+		const projectRoot = path.dirname(packageJsonPath);
+		const pkg = await readJsonFile(packageJsonPath);
+		const allDeps = {
+			...pkg?.dependencies || {},
+			...pkg?.devDependencies || {},
+			...pkg?.peerDependencies || {}
+		};
+		const entries = Object.entries(allDeps);
+		dependenciesStatus.total = entries.length;
 		try {
-			const pkgJson = await fsp.readFile(pathToPackageJson, "utf-8");
-			const pkg = JSON.parse(pkgJson);
-			const allDeps = {
-				...pkg.dependencies || {},
-				...pkg.devDependencies || {},
-				...pkg.peerDependencies || {}
-			};
-			const dependencies = Object.entries(allDeps);
-			const cachedPackages = [];
-			const uncachedDependencies = [];
-			for (const [name, version] of dependencies) {
-				const cached = getCachedPackage(name);
-				if (cached) cachedPackages.push({
-					...cached,
-					version
-				});
-				else uncachedDependencies.push([name, version]);
-			}
-			if (uncachedDependencies.length === 0) {
-				preloadedDependencies = cachedPackages;
-				isPreloading = false;
-				return cachedPackages;
-			}
-			const batchSize = 100;
-			const batches = [];
-			for (let i = 0; i < uncachedDependencies.length; i += batchSize) batches.push(uncachedDependencies.slice(i, i + batchSize));
-			const fetchedPackages = [];
-			log$4(`[Qwik DevTools] Fetching ${uncachedDependencies.length} packages in parallel...`);
-			const allBatchPromises = batches.map(async (batch) => {
-				const batchPromises = batch.map(async ([name, version]) => {
-					try {
-						const controller = new AbortController();
-						const timeoutId = setTimeout(() => controller.abort(), 5e3);
-						const response = await fetch(`https://registry.npmjs.org/${name}`, {
-							headers: { "Accept": "application/json" },
-							signal: controller.signal
-						});
-						clearTimeout(timeoutId);
-						if (!response.ok) throw new Error(`HTTP ${response.status}`);
-						const packageData = await response.json();
-						const latestVersion = packageData["dist-tags"]?.latest || version;
-						const versionData = packageData.versions?.[latestVersion] || packageData.versions?.[version];
-						let repositoryUrl = versionData?.repository?.url || packageData.repository?.url;
-						if (repositoryUrl) repositoryUrl = repositoryUrl.replace(/^git\+/, "").replace(/^ssh:\/\/git@/, "https://").replace(/\.git$/, "");
-						let iconUrl = null;
-						if (packageData.logo) iconUrl = packageData.logo;
-						else if (name.startsWith("@")) {
-							const scope = name.split("/")[0].substring(1);
-							iconUrl = `https://avatars.githubusercontent.com/${scope}?size=64`;
-						} else if (repositoryUrl?.includes("github.com")) {
-							const repoMatch = repositoryUrl.match(/github\.com\/([^\/]+)/);
-							if (repoMatch) iconUrl = `https://avatars.githubusercontent.com/${repoMatch[1]}?size=64`;
-						}
-						const packageInfo = {
-							name,
-							version,
-							description: versionData?.description || packageData.description || "No description available",
-							author: versionData?.author || packageData.author,
-							homepage: versionData?.homepage || packageData.homepage,
-							repository: repositoryUrl,
-							npmUrl: `https://www.npmjs.com/package/${name}`,
-							iconUrl
-						};
-						setCachedPackage(name, packageInfo);
-						return packageInfo;
-					} catch (error) {
-						const basicInfo = {
-							name,
-							version,
-							description: "No description available",
-							npmUrl: `https://www.npmjs.com/package/${name}`,
-							iconUrl: null
-						};
-						setCachedPackage(name, basicInfo);
-						return basicInfo;
-					}
-				});
-				const batchResults = await Promise.allSettled(batchPromises);
-				return batchResults.filter((result) => result.status === "fulfilled").map((result) => result.value);
-			});
-			const allBatchResults = await Promise.all(allBatchPromises);
-			for (const batchResult of allBatchResults) fetchedPackages.push(...batchResult);
-			const allPackages = [...cachedPackages, ...fetchedPackages];
-			preloadedDependencies = allPackages;
-			isPreloading = false;
-			log$4(`[Qwik DevTools] ✓ Successfully preloaded ${allPackages.length} dependencies`);
-			return allPackages;
-		} catch (error) {
-			log$4("[Qwik DevTools] ✗ Failed to preload dependencies:", error);
+			const list = await phase1LocalIndex(projectRoot, entries);
+			preloadedDependencies = list;
+			dependenciesStatus.phase = "phase2";
+			(async () => {
+				try {
+					await phase2BackgroundEnrich(list);
+					dependenciesStatus.phase = "done";
+				} catch (e) {
+					dependenciesStatus.phase = "error";
+					dependenciesStatus.error = e instanceof Error ? e.message : String(e);
+				} finally {
+					dependenciesStatus.finishedAt = Date.now();
+					isPreloading = false;
+				}
+			})();
+			log$4(`[Qwik DevTools] ✓ Phase1 preloaded ${list.length} dependencies (local-first)`);
+			return list;
+		} catch (e) {
 			preloadedDependencies = [];
+			dependenciesStatus.phase = "error";
+			dependenciesStatus.error = e instanceof Error ? e.message : String(e);
+			dependenciesStatus.finishedAt = Date.now();
 			isPreloading = false;
+			log$4("[Qwik DevTools] ✗ Failed to preload dependencies (local-first):", e);
 			return [];
 		}
 	})();
 	return preloadPromise;
-};
+}
 async function startPreloading({ config }) {
 	const startTime = Date.now();
 	log$4("[Qwik DevTools] 🚀 Initiating dependency preload (background)...");
@@ -8213,8 +8241,7 @@ function getNpmFunctions({ config }) {
 			const pathToPackageJson = await findNearestFileUp(startDir, "package.json");
 			if (!pathToPackageJson) return [];
 			try {
-				const pkgJson = await fsp.readFile(pathToPackageJson, "utf-8");
-				const pkg = JSON.parse(pkgJson);
+				const pkg = await readJsonFile(pathToPackageJson);
 				return Object.entries(pkg.devDependencies).filter(([key]) => /@qwik/i.test(key));
 			} catch (error) {
 				return [];
@@ -8225,12 +8252,26 @@ function getNpmFunctions({ config }) {
 				log$4("[Qwik DevTools] Returning preloaded dependencies");
 				return preloadedDependencies;
 			}
-			if (isPreloading && preloadPromise) {
-				log$4("[Qwik DevTools] Waiting for preload to complete...");
-				return preloadPromise;
-			}
+			if (isPreloading) return [];
 			log$4("[Qwik DevTools] Warning: Preload not started, starting now...");
-			return preloadDependencies(config);
+			preloadDependencies(config);
+			return [];
+		},
+		async getDependenciesStatus() {
+			return dependenciesStatus;
+		},
+		async refreshDependencies() {
+			preloadedDependencies = null;
+			isPreloading = false;
+			preloadPromise = null;
+			dependenciesStatus = {
+				phase: "idle",
+				loaded: 0,
+				total: 0,
+				startedAt: null,
+				finishedAt: null
+			};
+			preloadDependencies(config);
 		},
 		async installPackage(packageName, isDev = true) {
 			try {
@@ -9810,11 +9851,6 @@ const __qwik_perf_init_csr__ = () => {
 const __qwik_perf_get_ssr_store__ = () =>
   typeof process !== 'undefined' && process ? process : globalThis;
 
-const __qwik_perf_to_error__ = (err) => ({
-  name: (err && err.name) || 'Error',
-  message: err && err.message ? String(err.message) : String(err),
-});
-
 const __qwik_perf_next_id__ = (perf) => {
   perf._id = (perf._id || 0) + 1;
   return perf._id;
@@ -9936,31 +9972,17 @@ function componentQrl(qrl, options) {
   if(qrl.dev){
     viteId = qrl.dev.file.replace(/[^/]*$/, qrl.dev.displayName);
   }
-  try {
-    const result = originalComponentQrl(qrl, options);
-    const duration = performance.now() - start;
-    __qwik_perf_commit_componentqrl__({
-      component,
-      phase,
-      duration,
-      start,  
-      viteId,
-      end: start + duration,
-    });
-    return result;
-  } catch (err) {
-    const duration = performance.now() - start;
-    __qwik_perf_commit_componentqrl__({
-      component,
-      phase,
-      duration,
-      start,
-      viteId,
-      end: start + duration,
-      error: __qwik_perf_to_error__(err),
-    });
-    throw err;
-  }
+  const result = originalComponentQrl(qrl, options);
+  const duration = performance.now() - start;
+  __qwik_perf_commit_componentqrl__({
+    component,
+    phase,
+    duration,
+    start,  
+    viteId,
+    end: start + duration,
+  });
+  return result;
 }
 
 export { componentQrl };
@@ -10089,40 +10111,50 @@ const perfLazyWrapperPreamble = `${perfRuntime_default}
 
 // [qwik-component-proxy] Render function wrapper
 const __qwik_wrap__ = (fn, name, viteId) => {
+  if (typeof fn !== 'function') return fn;
   let renderCount = 0;
-  return function (...args) {
+
+  function wrapped(...args) {
     renderCount += 1;
     const phase = __qwik_perf_is_server__() ? 'ssr' : 'csr';
     const start = performance.now();
 
-    try {
-      const result = fn.apply(this, args);
-      const duration = performance.now() - start;
-      __qwik_perf_commit__({
-        component: name,
-        phase,
-        duration,
-        start,
-        end: start + duration,
-        viteId,
-        renderCount,
-      });
-      return result;
-    } catch (err) {
-      const duration = performance.now() - start;
-      __qwik_perf_commit__({
-        component: name,
-        phase,
-        duration,
-        start,
-        end: start + duration,
-        error: __qwik_perf_to_error__(err),
-        viteId,
-        renderCount,
-      });
-      throw err;
-    }
+    const result = fn.apply(this, args);
+    const duration = performance.now() - start;
+    __qwik_perf_commit__({
+      component: name,
+      phase,
+      duration,
+      start,
+      end: start + duration,
+      viteId,
+      renderCount,
+    });
+    return result;
+  }
+
+  // Preserve Qwik-compiler metadata attached to the original function.
+  // (No try/catch per request; avoid touching special function props.)
+  const skip = {
+    length: true,
+    name: true,
+    arguments: true,
+    caller: true,
+    prototype: true,
   };
+
+  const descriptors = Object.getOwnPropertyDescriptors(fn);
+  for (const key of Object.keys(descriptors)) {
+    if (skip[key]) continue;
+    Object.defineProperty(wrapped, key, descriptors[key]);
+  }
+
+  for (const sym of Object.getOwnPropertySymbols(fn)) {
+    const desc = Object.getOwnPropertyDescriptor(fn, sym);
+    if (desc) Object.defineProperty(wrapped, sym, desc);
+  }
+
+  return wrapped;
 };
 `;
 var perfLazyWrapperPreamble_default = perfLazyWrapperPreamble;

package/dist/ui/devtools.qwik.mjs

@@ -32,6 +32,21 @@ function getClientRpcFunctions() {
     healthCheck: () => true
   };
 }
+function toDevtoolsRoutes(routes) {
+  const children = routes?.children || [];
+  const directories = children.filter((child) => child.type === re.DIRECTORY);
+  return [
+    {
+      relativePath: "",
+      name: "index",
+      type: re.DIRECTORY,
+      path: "",
+      isSymbolicLink: false,
+      children: void 0
+    },
+    ...directories
+  ];
+}
 const QwikDevtools = component$(() => {
   useStyles$(globalCss);
   const state = useStore({
@@ -44,7 +59,6 @@ const QwikDevtools = component$(() => {
     allDependencies: [],
     isLoadingDependencies: false
   });
-  const clientReady = useSignal(false);
   useVisibleTask$(async () => {
     const hot = await tryCreateHotContext(void 0, [
       "/"
@@ -54,78 +68,43 @@ const QwikDevtools = component$(() => {
     }
     setViteClientContext(hot);
     createClientRpc(getClientRpcFunctions());
-    clientReady.value = true;
-  });
-  useVisibleTask$(async ({ track }) => {
-    track(() => clientReady.value);
-    if (!clientReady.value) return;
-    const rpc = getViteClientRpc();
-    try {
-      const assets = await rpc.getAssetsFromPublicDir();
-      state.assets = assets;
-    } catch (error) {
-      log("Failed to load assets:", error);
-    }
-  });
-  useVisibleTask$(async ({ track }) => {
-    track(() => clientReady.value);
-    if (!clientReady.value) return;
-    const rpc = getViteClientRpc();
-    try {
-      const components = await rpc.getComponents();
-      state.components = components;
-    } catch (error) {
-      log("Failed to load components:", error);
-    }
-  });
-  useVisibleTask$(async ({ track }) => {
-    track(() => clientReady.value);
-    if (!clientReady.value) return;
-    const rpc = getViteClientRpc();
-    try {
-      const routes = await rpc.getRoutes();
-      const children = routes?.children || [];
-      const directories = children.filter((child) => child.type === "directory");
-      const values = [
-        {
-          relativePath: "",
-          name: "index",
-          type: re.DIRECTORY,
-          path: "",
-          isSymbolicLink: false,
-          children: void 0
-        },
-        ...directories
-      ];
-      state.routes = noSerialize(values);
-    } catch (error) {
-      log("Failed to load routes:", error);
-    }
-  });
-  useVisibleTask$(async ({ track }) => {
-    track(() => clientReady.value);
-    if (!clientReady.value) return;
-    const rpc = getViteClientRpc();
-    try {
-      const qwikPackages = await rpc.getQwikPackages();
-      state.npmPackages = qwikPackages;
-    } catch (error) {
-      log("Failed to load Qwik packages:", error);
-    }
-  });
-  useVisibleTask$(async ({ track }) => {
-    track(() => clientReady.value);
-    if (!clientReady.value) return;
     const rpc = getViteClientRpc();
+    const group1 = Promise.allSettled([
+      rpc.getAssetsFromPublicDir(),
+      rpc.getComponents(),
+      rpc.getRoutes(),
+      rpc.getQwikPackages()
+    ]);
     state.isLoadingDependencies = true;
-    try {
-      const allDeps = await rpc.getAllDependencies();
+    const depsPromise = rpc.getAllDependencies().then((allDeps) => {
       state.allDependencies = allDeps;
-    } catch (error) {
+    }).catch((error) => {
       log("Failed to load all dependencies:", error);
-    } finally {
+    }).finally(() => {
       state.isLoadingDependencies = false;
+    });
+    const [assetsRes, componentsRes, routesRes, packagesRes] = await group1;
+    if (assetsRes.status === "fulfilled") {
+      state.assets = assetsRes.value;
+    } else {
+      log("Failed to load assets:", assetsRes.reason);
+    }
+    if (componentsRes.status === "fulfilled") {
+      state.components = componentsRes.value;
+    } else {
+      log("Failed to load components:", componentsRes.reason);
+    }
+    if (routesRes.status === "fulfilled") {
+      state.routes = noSerialize(toDevtoolsRoutes(routesRes.value));
+    } else {
+      log("Failed to load routes:", routesRes.reason);
+    }
+    if (packagesRes.status === "fulfilled") {
+      state.npmPackages = packagesRes.value;
+    } else {
+      log("Failed to load Qwik packages:", packagesRes.reason);
     }
+    await depsPromise;
   });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [

package/dist/ui/features/Packages/components/DependencyCard/DependencyCard.qwik.mjs

@@ -2,11 +2,17 @@ import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$, $ } from "@qwik.dev/core";
 import { PackageIcon } from "../PackageIcon/PackageIcon.qwik.mjs";
 const DependencyCard = component$(({ pkg }) => {
+  const author = pkg.author;
+  const authorName = typeof author === "string" ? author.trim() : (author?.name || "").trim();
+  const authorDisplayName = authorName || "Unknown";
+  const authorInitials = authorDisplayName.split(/\s+/).filter(Boolean).map((n) => n.charAt(0)).join("").substring(0, 2).toUpperCase() || "??";
   const handleAuthorClick = $(() => {
-    if (pkg.author?.url) {
-      window.open(pkg.author.url, "_blank");
-    } else if (pkg.author?.email) {
-      window.open(`mailto:${pkg.author.email}`, "_blank");
+    if (typeof author !== "string") {
+      if (author?.url) {
+        window.open(author.url, "_blank");
+      } else if (author?.email) {
+        window.open(`mailto:${author.email}`, "_blank");
+      }
     }
   });
   const handlePackageClick = $(() => {
@@ -87,23 +93,23 @@ const DependencyCard = component$(({ pkg }) => {
           /* @__PURE__ */ jsxs("div", {
             class: "flex items-center justify-between gap-3",
             children: [
-              pkg.author ? /* @__PURE__ */ jsxs("div", {
+              author ? /* @__PURE__ */ jsxs("div", {
                 class: "flex min-w-0 flex-1 items-center gap-2",
                 children: [
                   /* @__PURE__ */ jsx("div", {
                     class: "from-accent/20 to-accent/40 border-accent/30 flex h-7 w-7 flex-shrink-0 cursor-pointer items-center justify-center rounded-full border bg-gradient-to-br transition-transform hover:scale-110",
                     onClick$: handleAuthorClick,
-                    title: `Contact ${pkg.author.name}`,
+                    title: `Contact ${authorDisplayName}`,
                     children: /* @__PURE__ */ jsx("span", {
                       class: "text-accent text-[10px] font-semibold",
-                      children: pkg.author.name.split(" ").map((n) => n.charAt(0)).join("").substring(0, 2).toUpperCase()
+                      children: authorInitials
                     })
                   }),
                   /* @__PURE__ */ jsx("span", {
                     class: "text-muted-foreground truncate text-xs",
                     children: /* @__PURE__ */ jsx("span", {
                       class: "text-foreground font-medium",
-                      children: pkg.author.name
+                      children: authorDisplayName
                     })
                   })
                 ]

package/dist/ui/global.css.qwik.mjs

@@ -1,4 +1,4 @@
-const globalCss = '/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    *, :before, :after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n    }\n  }\n}\n\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n    --color-red-400: oklch(70.4% .191 22.216);\n    --color-amber-400: oklch(82.8% .189 84.429);\n    --color-green-400: oklch(79.2% .209 151.711);\n    --color-emerald-100: oklch(95% .052 163.051);\n    --color-emerald-300: oklch(84.5% .143 164.978);\n    --color-emerald-700: oklch(50.8% .118 165.612);\n    --color-emerald-900: oklch(37.8% .077 168.94);\n    --color-blue-400: oklch(70.7% .165 254.624);\n    --color-violet-300: oklch(81.1% .111 293.571);\n    --color-violet-400: oklch(70.2% .183 293.541);\n    --color-purple-400: oklch(71.4% .203 305.504);\n    --color-pink-400: oklch(71.8% .202 349.761);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: .25rem;\n    --text-xs: .75rem;\n    --text-xs--line-height: calc(1 / .75);\n    --text-sm: .875rem;\n    --text-sm--line-height: calc(1.25 / .875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --leading-relaxed: 1.625;\n    --radius-md: .375rem;\n    --radius-lg: .5rem;\n    --radius-xl: .75rem;\n    --drop-shadow-md: 0 3px 3px #0000001f;\n    --ease-out: cubic-bezier(0, 0, .2, 1);\n    --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --blur-md: 12px;\n    --blur-lg: 16px;\n    --default-transition-duration: .15s;\n    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-background: #fff;\n    --color-foreground: #000;\n    --color-primary: #10b981;\n    --color-primary-active: #047857;\n    --color-muted-foreground: #6b7280;\n    --color-accent: #10b981;\n    --color-border: #e5e7eb;\n    --color-card: #f2f2f2;\n    --color-card-item-bg: #00000005;\n    --color-card-item-hover-bg: #00000008;\n  }\n}\n\n@layer base {\n  *, :after, :before, ::backdrop {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  ::file-selector-button {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  html, :host {\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    line-height: 1.5;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n\n  b, strong {\n    font-weight: bolder;\n  }\n\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n\n  small {\n    font-size: 80%;\n  }\n\n  sub, sup {\n    vertical-align: baseline;\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n  }\n\n  sub {\n    bottom: -.25em;\n  }\n\n  sup {\n    top: -.5em;\n  }\n\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n\n  :-moz-focusring {\n    outline: auto;\n  }\n\n  progress {\n    vertical-align: baseline;\n  }\n\n  summary {\n    display: list-item;\n  }\n\n  ol, ul, menu {\n    list-style: none;\n  }\n\n  img, svg, video, canvas, audio, iframe, embed, object {\n    vertical-align: middle;\n    display: block;\n  }\n\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n\n  button, input, select, optgroup, textarea {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n\n  ::placeholder {\n    opacity: 1;\n  }\n\n  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentColor;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n\n  textarea {\n    resize: vertical;\n  }\n\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n\n  ::-webkit-datetime-edit {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-year-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-month-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-day-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-hour-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-minute-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-second-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-millisecond-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n\n  button, input:where([type="button"], [type="reset"], [type="submit"]) {\n    appearance: button;\n  }\n\n  ::file-selector-button {\n    appearance: button;\n  }\n\n  ::-webkit-inner-spin-button {\n    height: auto;\n  }\n\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n\n@layer components;\n\n@layer utilities {\n  .qwik-devtools .pointer-events-none {\n    pointer-events: none;\n  }\n\n  .qwik-devtools .visible {\n    visibility: visible;\n  }\n\n  .qwik-devtools .absolute {\n    position: absolute;\n  }\n\n  .qwik-devtools .fixed {\n    position: fixed;\n  }\n\n  .qwik-devtools .relative {\n    position: relative;\n  }\n\n  .qwik-devtools .static {\n    position: static;\n  }\n\n  .qwik-devtools .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n\n  .qwik-devtools .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n\n  .qwik-devtools .right-6 {\n    right: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n\n  .qwik-devtools .bottom-6 {\n    bottom: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .z-\\[9999\\] {\n    z-index: 9999;\n  }\n\n  .qwik-devtools .col-start-1 {\n    grid-column-start: 1;\n  }\n\n  .qwik-devtools .row-start-1 {\n    grid-row-start: 1;\n  }\n\n  .qwik-devtools .container {\n    width: 100%;\n  }\n\n  @media (min-width: 40rem) {\n    .qwik-devtools .container {\n      max-width: 40rem;\n    }\n  }\n\n  @media (min-width: 48rem) {\n    .qwik-devtools .container {\n      max-width: 48rem;\n    }\n  }\n\n  @media (min-width: 64rem) {\n    .qwik-devtools .container {\n      max-width: 64rem;\n    }\n  }\n\n  @media (min-width: 80rem) {\n    .qwik-devtools .container {\n      max-width: 80rem;\n    }\n  }\n\n  @media (min-width: 96rem) {\n    .qwik-devtools .container {\n      max-width: 96rem;\n    }\n  }\n\n  .qwik-devtools .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n\n  .qwik-devtools .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .mt-5 {\n    margin-top: calc(var(--spacing) * 5);\n  }\n\n  .qwik-devtools .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .mt-auto {\n    margin-top: auto;\n  }\n\n  .qwik-devtools .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .mb-1\\.5 {\n    margin-bottom: calc(var(--spacing) * 1.5);\n  }\n\n  .qwik-devtools .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .mb-3 {\n    margin-bottom: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .line-clamp-2 {\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    overflow: hidden;\n  }\n\n  .qwik-devtools .flex {\n    display: flex;\n  }\n\n  .qwik-devtools .grid {\n    display: grid;\n  }\n\n  .qwik-devtools .hidden {\n    display: none;\n  }\n\n  .qwik-devtools .inline-flex {\n    display: inline-flex;\n  }\n\n  .qwik-devtools .aspect-square {\n    aspect-ratio: 1;\n  }\n\n  .qwik-devtools .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n\n  .qwik-devtools .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .h-7 {\n    height: calc(var(--spacing) * 7);\n  }\n\n  .qwik-devtools .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n\n  .qwik-devtools .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n\n  .qwik-devtools .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n\n  .qwik-devtools .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n\n  .qwik-devtools .h-\\[60vh\\] {\n    height: 60vh;\n  }\n\n  .qwik-devtools .h-\\[calc\\(100vh-3rem\\)\\] {\n    height: calc(100vh - 3rem);\n  }\n\n  .qwik-devtools .h-full {\n    height: 100%;\n  }\n\n  .qwik-devtools .min-h-0 {\n    min-height: calc(var(--spacing) * 0);\n  }\n\n  .qwik-devtools .min-h-\\[2\\.5rem\\] {\n    min-height: 2.5rem;\n  }\n\n  .qwik-devtools .w-1\\/2 {\n    width: 50%;\n  }\n\n  .qwik-devtools .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n\n  .qwik-devtools .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .w-7 {\n    width: calc(var(--spacing) * 7);\n  }\n\n  .qwik-devtools .w-8 {\n    width: calc(var(--spacing) * 8);\n  }\n\n  .qwik-devtools .w-9 {\n    width: calc(var(--spacing) * 9);\n  }\n\n  .qwik-devtools .w-10 {\n    width: calc(var(--spacing) * 10);\n  }\n\n  .qwik-devtools .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n\n  .qwik-devtools .w-\\[420px\\] {\n    width: 420px;\n  }\n\n  .qwik-devtools .w-\\[calc\\(100vw-3rem\\)\\] {\n    width: calc(100vw - 3rem);\n  }\n\n  .qwik-devtools .w-full {\n    width: 100%;\n  }\n\n  .qwik-devtools .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n\n  .qwik-devtools .min-w-\\[320px\\] {\n    min-width: 320px;\n  }\n\n  .qwik-devtools .flex-1 {\n    flex: 1;\n  }\n\n  .qwik-devtools .flex-shrink-0, .qwik-devtools .shrink-0 {\n    flex-shrink: 0;\n  }\n\n  .qwik-devtools .origin-center {\n    transform-origin: center;\n  }\n\n  .qwik-devtools .translate-y-0 {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n\n  .qwik-devtools .-rotate-90 {\n    rotate: -90deg;\n  }\n\n  .qwik-devtools .rotate-90 {\n    rotate: 90deg;\n  }\n\n  .qwik-devtools .rotate-180 {\n    rotate: 180deg;\n  }\n\n  .qwik-devtools .transform {\n    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n  }\n\n  .qwik-devtools .animate-spin {\n    animation: var(--animate-spin);\n  }\n\n  .qwik-devtools .cursor-grab {\n    cursor: grab;\n  }\n\n  .qwik-devtools .cursor-grabbing {\n    cursor: grabbing;\n  }\n\n  .qwik-devtools .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n\n  .qwik-devtools .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .qwik-devtools .resize-none {\n    resize: none;\n  }\n\n  .qwik-devtools .grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n\n  .qwik-devtools .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .qwik-devtools .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .qwik-devtools .grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n\n  .qwik-devtools .flex-col {\n    flex-direction: column;\n  }\n\n  .qwik-devtools .place-items-center {\n    place-items: center;\n  }\n\n  .qwik-devtools .items-center {\n    align-items: center;\n  }\n\n  .qwik-devtools .items-start {\n    align-items: flex-start;\n  }\n\n  .qwik-devtools .justify-between {\n    justify-content: space-between;\n  }\n\n  .qwik-devtools .justify-center {\n    justify-content: center;\n  }\n\n  .qwik-devtools .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n\n  .qwik-devtools .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n\n  .qwik-devtools .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .gap-5 {\n    gap: calc(var(--spacing) * 5);\n  }\n\n  :where(.qwik-devtools .space-y-2 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  :where(.qwik-devtools .space-y-3 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  :where(.qwik-devtools .space-y-4 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  :where(.qwik-devtools .space-y-6 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  .qwik-devtools .gap-x-6 {\n    column-gap: calc(var(--spacing) * 6);\n  }\n\n  :where(.qwik-devtools .space-x-2 > :not(:last-child)) {\n    --tw-space-x-reverse: 0;\n    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  :where(.qwik-devtools .space-x-4 > :not(:last-child)) {\n    --tw-space-x-reverse: 0;\n    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));\n    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .qwik-devtools .gap-y-3 {\n    row-gap: calc(var(--spacing) * 3);\n  }\n\n  :where(.qwik-devtools .divide-y > :not(:last-child)) {\n    --tw-divide-y-reverse: 0;\n    border-bottom-style: var(--tw-border-style);\n    border-top-style: var(--tw-border-style);\n    border-top-width: calc(1px * var(--tw-divide-y-reverse));\n    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  }\n\n  :where(.qwik-devtools .divide-border > :not(:last-child)) {\n    border-color: var(--color-border);\n  }\n\n  .qwik-devtools .truncate {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n\n  .qwik-devtools .overflow-auto {\n    overflow: auto;\n  }\n\n  .qwik-devtools .overflow-hidden {\n    overflow: hidden;\n  }\n\n  .qwik-devtools .overflow-x-auto {\n    overflow-x: auto;\n  }\n\n  .qwik-devtools .overflow-y-auto {\n    overflow-y: auto;\n  }\n\n  .qwik-devtools .rounded {\n    border-radius: .25rem;\n  }\n\n  .qwik-devtools .rounded-full {\n    border-radius: 3.40282e38px;\n  }\n\n  .qwik-devtools .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n\n  .qwik-devtools .rounded-md {\n    border-radius: var(--radius-md);\n  }\n\n  .qwik-devtools .rounded-xl {\n    border-radius: var(--radius-xl);\n  }\n\n  .qwik-devtools .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n\n  .qwik-devtools .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n\n  .qwik-devtools .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n\n  .qwik-devtools .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n\n  .qwik-devtools .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n\n  .qwik-devtools .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n\n  .qwik-devtools .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n\n  .qwik-devtools .border-accent\\/30 {\n    border-color: #10b9814d;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .border-accent\\/30 {\n      border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);\n    }\n  }\n\n  .qwik-devtools .border-accent\\/50 {\n    border-color: #10b98180;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .border-accent\\/50 {\n      border-color: color-mix(in oklab, var(--color-accent) 50%, transparent);\n    }\n  }\n\n  .qwik-devtools .border-border {\n    border-color: var(--color-border);\n  }\n\n  .qwik-devtools .border-border\\/50 {\n    border-color: #e5e7eb80;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .border-border\\/50 {\n      border-color: color-mix(in oklab, var(--color-border) 50%, transparent);\n    }\n  }\n\n  .qwik-devtools .border-current {\n    border-color: currentColor;\n  }\n\n  .qwik-devtools .border-emerald-300 {\n    border-color: var(--color-emerald-300);\n  }\n\n  .qwik-devtools .border-primary\\/20 {\n    border-color: #10b98133;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .border-primary\\/20 {\n      border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);\n    }\n  }\n\n  .qwik-devtools .border-t-foreground\\/40 {\n    border-top-color: #0006;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .border-t-foreground\\/40 {\n      border-top-color: color-mix(in oklab, var(--color-foreground) 40%, transparent);\n    }\n  }\n\n  .qwik-devtools .border-t-transparent {\n    border-top-color: #0000;\n  }\n\n  .qwik-devtools .border-b-transparent {\n    border-bottom-color: #0000;\n  }\n\n  .qwik-devtools .bg-accent {\n    background-color: var(--color-accent);\n  }\n\n  .qwik-devtools .bg-background {\n    background-color: var(--color-background);\n  }\n\n  .qwik-devtools .bg-background\\/95 {\n    background-color: #fffffff2;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .bg-background\\/95 {\n      background-color: color-mix(in oklab, var(--color-background) 95%, transparent);\n    }\n  }\n\n  .qwik-devtools .bg-black\\/20 {\n    background-color: #0003;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .bg-black\\/20 {\n      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);\n    }\n  }\n\n  .qwik-devtools .bg-card {\n    background-color: var(--color-card);\n  }\n\n  .qwik-devtools .bg-card-item-bg {\n    background-color: var(--color-card-item-bg);\n  }\n\n  .qwik-devtools .bg-emerald-100 {\n    background-color: var(--color-emerald-100);\n  }\n\n  .qwik-devtools .bg-foreground\\/5 {\n    background-color: #0000000d;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .bg-foreground\\/5 {\n      background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);\n    }\n  }\n\n  .qwik-devtools .bg-primary\\/5 {\n    background-color: #10b9810d;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .bg-primary\\/5 {\n      background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);\n    }\n  }\n\n  .qwik-devtools .bg-primary\\/10 {\n    background-color: #10b9811a;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .bg-primary\\/10 {\n      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);\n    }\n  }\n\n  .qwik-devtools .bg-transparent {\n    background-color: #0000;\n  }\n\n  .qwik-devtools .bg-gradient-to-br {\n    --tw-gradient-position: to bottom right in oklab;\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n\n  .qwik-devtools .from-accent\\/20 {\n    --tw-gradient-from: #10b98133;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .from-accent\\/20 {\n      --tw-gradient-from: color-mix(in oklab, var(--color-accent) 20%, transparent);\n    }\n  }\n\n  .qwik-devtools .from-accent\\/20 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .from-primary\\/0 {\n    --tw-gradient-from: #0000;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .from-primary\\/0 {\n      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 0%, transparent);\n    }\n  }\n\n  .qwik-devtools .from-primary\\/0 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .from-primary\\/10 {\n    --tw-gradient-from: #10b9811a;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .from-primary\\/10 {\n      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 10%, transparent);\n    }\n  }\n\n  .qwik-devtools .from-primary\\/10 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .via-primary\\/0 {\n    --tw-gradient-via: #0000;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .via-primary\\/0 {\n      --tw-gradient-via: color-mix(in oklab, var(--color-primary) 0%, transparent);\n    }\n  }\n\n  .qwik-devtools .via-primary\\/0 {\n    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);\n    --tw-gradient-stops: var(--tw-gradient-via-stops);\n  }\n\n  .qwik-devtools .via-primary\\/20 {\n    --tw-gradient-via: #10b98133;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .via-primary\\/20 {\n      --tw-gradient-via: color-mix(in oklab, var(--color-primary) 20%, transparent);\n    }\n  }\n\n  .qwik-devtools .via-primary\\/20 {\n    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);\n    --tw-gradient-stops: var(--tw-gradient-via-stops);\n  }\n\n  .qwik-devtools .to-accent\\/40 {\n    --tw-gradient-to: #10b98166;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .to-accent\\/40 {\n      --tw-gradient-to: color-mix(in oklab, var(--color-accent) 40%, transparent);\n    }\n  }\n\n  .qwik-devtools .to-accent\\/40 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .to-primary\\/5 {\n    --tw-gradient-to: #10b9810d;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .to-primary\\/5 {\n      --tw-gradient-to: color-mix(in oklab, var(--color-primary) 5%, transparent);\n    }\n  }\n\n  .qwik-devtools .to-primary\\/5 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .to-primary\\/30 {\n    --tw-gradient-to: #10b9814d;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .to-primary\\/30 {\n      --tw-gradient-to: color-mix(in oklab, var(--color-primary) 30%, transparent);\n    }\n  }\n\n  .qwik-devtools .to-primary\\/30 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .object-cover {\n    object-fit: cover;\n  }\n\n  .qwik-devtools .p-0\\.5 {\n    padding: calc(var(--spacing) * .5);\n  }\n\n  .qwik-devtools .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n\n  .qwik-devtools .p-1\\.5 {\n    padding: calc(var(--spacing) * 1.5);\n  }\n\n  .qwik-devtools .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .p-2\\.5 {\n    padding: calc(var(--spacing) * 2.5);\n  }\n\n  .qwik-devtools .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .p-3\\.5 {\n    padding: calc(var(--spacing) * 3.5);\n  }\n\n  .qwik-devtools .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .p-5 {\n    padding: calc(var(--spacing) * 5);\n  }\n\n  .qwik-devtools .p-8 {\n    padding: calc(var(--spacing) * 8);\n  }\n\n  .qwik-devtools .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .px-2\\.5 {\n    padding-inline: calc(var(--spacing) * 2.5);\n  }\n\n  .qwik-devtools .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .py-0\\.5 {\n    padding-block: calc(var(--spacing) * .5);\n  }\n\n  .qwik-devtools .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n\n  .qwik-devtools .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n\n  .qwik-devtools .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .py-8 {\n    padding-block: calc(var(--spacing) * 8);\n  }\n\n  .qwik-devtools .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .pb-6 {\n    padding-bottom: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .text-center {\n    text-align: center;\n  }\n\n  .qwik-devtools .text-left {\n    text-align: left;\n  }\n\n  .qwik-devtools .text-right {\n    text-align: right;\n  }\n\n  .qwik-devtools .font-mono {\n    font-family: var(--font-mono);\n  }\n\n  .qwik-devtools .font-sans {\n    font-family: var(--font-sans);\n  }\n\n  .qwik-devtools .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n\n  .qwik-devtools .text-3xl {\n    font-size: var(--text-3xl);\n    line-height: var(--tw-leading, var(--text-3xl--line-height));\n  }\n\n  .qwik-devtools .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n\n  .qwik-devtools .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n\n  .qwik-devtools .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n\n  .qwik-devtools .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n\n  .qwik-devtools .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n\n  .qwik-devtools .text-\\[10px\\] {\n    font-size: 10px;\n  }\n\n  .qwik-devtools .leading-relaxed {\n    --tw-leading: var(--leading-relaxed);\n    line-height: var(--leading-relaxed);\n  }\n\n  .qwik-devtools .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n\n  .qwik-devtools .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n\n  .qwik-devtools .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n\n  .qwik-devtools .break-all {\n    word-break: break-all;\n  }\n\n  .qwik-devtools .whitespace-nowrap {\n    white-space: nowrap;\n  }\n\n  .qwik-devtools .text-accent {\n    color: var(--color-accent);\n  }\n\n  .qwik-devtools .text-amber-400 {\n    color: var(--color-amber-400);\n  }\n\n  .qwik-devtools .text-blue-400 {\n    color: var(--color-blue-400);\n  }\n\n  .qwik-devtools .text-emerald-700 {\n    color: var(--color-emerald-700);\n  }\n\n  .qwik-devtools .text-foreground {\n    color: var(--color-foreground);\n  }\n\n  .qwik-devtools .text-foreground\\/70 {\n    color: #000000b3;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .text-foreground\\/70 {\n      color: color-mix(in oklab, var(--color-foreground) 70%, transparent);\n    }\n  }\n\n  .qwik-devtools .text-green-400 {\n    color: var(--color-green-400);\n  }\n\n  .qwik-devtools .text-muted-foreground {\n    color: var(--color-muted-foreground);\n  }\n\n  .qwik-devtools .text-pink-400 {\n    color: var(--color-pink-400);\n  }\n\n  .qwik-devtools .text-primary {\n    color: var(--color-primary);\n  }\n\n  .qwik-devtools .text-primary\\/50 {\n    color: #10b98180;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .text-primary\\/50 {\n      color: color-mix(in oklab, var(--color-primary) 50%, transparent);\n    }\n  }\n\n  .qwik-devtools .text-purple-400 {\n    color: var(--color-purple-400);\n  }\n\n  .qwik-devtools .text-red-400 {\n    color: var(--color-red-400);\n  }\n\n  .qwik-devtools .text-violet-400 {\n    color: var(--color-violet-400);\n  }\n\n  .qwik-devtools .text-white {\n    color: var(--color-white);\n  }\n\n  .qwik-devtools .opacity-0 {\n    opacity: 0;\n  }\n\n  .qwik-devtools .opacity-90 {\n    opacity: .9;\n  }\n\n  .qwik-devtools .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .qwik-devtools .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .qwik-devtools .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .qwik-devtools .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .qwik-devtools .ring-2 {\n    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .qwik-devtools .shadow-accent\\/35 {\n    --tw-shadow-color: #10b98159;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .shadow-accent\\/35 {\n      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-accent) 35%, transparent) var(--tw-shadow-alpha), transparent);\n    }\n  }\n\n  .qwik-devtools .ring-primary-active {\n    --tw-ring-color: var(--color-primary-active);\n  }\n\n  .qwik-devtools .drop-shadow-md {\n    --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, #0000001f));\n    --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));\n    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n  }\n\n  .qwik-devtools .filter {\n    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n  }\n\n  .qwik-devtools .backdrop-blur-lg {\n    --tw-backdrop-blur: blur(var(--blur-lg));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n  }\n\n  .qwik-devtools .backdrop-blur-md {\n    --tw-backdrop-blur: blur(var(--blur-md));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n  }\n\n  .qwik-devtools .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .qwik-devtools .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .qwik-devtools .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .qwik-devtools .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .qwik-devtools .transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .qwik-devtools .duration-200 {\n    --tw-duration: .2s;\n    transition-duration: .2s;\n  }\n\n  .qwik-devtools .duration-300 {\n    --tw-duration: .3s;\n    transition-duration: .3s;\n  }\n\n  .qwik-devtools .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n\n  .qwik-devtools .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n\n  .qwik-devtools .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  @media (hover: hover) {\n    .qwik-devtools .group-hover\\:scale-110:is(:where(.group):hover *) {\n      --tw-scale-x: 110%;\n      --tw-scale-y: 110%;\n      --tw-scale-z: 110%;\n      scale: var(--tw-scale-x) var(--tw-scale-y);\n    }\n\n    .qwik-devtools .group-hover\\:opacity-100:is(:where(.group):hover *) {\n      opacity: 1;\n    }\n\n    .qwik-devtools .group-hover\\:shadow-primary\\/20:is(:where(.group):hover *) {\n      --tw-shadow-color: #10b98133;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .group-hover\\:shadow-primary\\/20:is(:where(.group):hover *) {\n        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);\n      }\n    }\n  }\n\n  .qwik-devtools .group-active\\:scale-75:is(:where(.group):active *) {\n    --tw-scale-x: 75%;\n    --tw-scale-y: 75%;\n    --tw-scale-z: 75%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n\n  @media (hover: hover) {\n    .qwik-devtools .hover\\:-translate-y-0\\.5:hover {\n      --tw-translate-y: calc(var(--spacing) * -.5);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n\n    .qwik-devtools .hover\\:scale-110:hover {\n      --tw-scale-x: 110%;\n      --tw-scale-y: 110%;\n      --tw-scale-z: 110%;\n      scale: var(--tw-scale-x) var(--tw-scale-y);\n    }\n\n    .qwik-devtools .hover\\:rotate-3:hover {\n      rotate: 3deg;\n    }\n\n    .qwik-devtools .hover\\:border-primary\\/30:hover {\n      border-color: #10b9814d;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .hover\\:border-primary\\/30:hover {\n        border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);\n      }\n    }\n\n    .qwik-devtools .hover\\:bg-card-item-hover-bg:hover {\n      background-color: var(--color-card-item-hover-bg);\n    }\n\n    .qwik-devtools .hover\\:bg-foreground\\/5:hover {\n      background-color: #0000000d;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .hover\\:bg-foreground\\/5:hover {\n        background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);\n      }\n    }\n\n    .qwik-devtools .hover\\:bg-primary\\/10:hover {\n      background-color: #10b9811a;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .hover\\:bg-primary\\/10:hover {\n        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);\n      }\n    }\n\n    .qwik-devtools .hover\\:bg-primary\\/20:hover {\n      background-color: #10b98133;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .hover\\:bg-primary\\/20:hover {\n        background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);\n      }\n    }\n\n    .qwik-devtools .hover\\:text-foreground:hover {\n      color: var(--color-foreground);\n    }\n\n    .qwik-devtools .hover\\:text-primary:hover {\n      color: var(--color-primary);\n    }\n\n    .qwik-devtools .hover\\:underline:hover {\n      text-decoration-line: underline;\n    }\n\n    .qwik-devtools .hover\\:opacity-60:hover {\n      opacity: .6;\n    }\n\n    .qwik-devtools .hover\\:opacity-90:hover {\n      opacity: .9;\n    }\n\n    .qwik-devtools .hover\\:shadow-lg:hover {\n      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n\n    .qwik-devtools .hover\\:shadow-primary\\/5:hover {\n      --tw-shadow-color: #10b9810d;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .hover\\:shadow-primary\\/5:hover {\n        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 5%, transparent) var(--tw-shadow-alpha), transparent);\n      }\n    }\n  }\n\n  .qwik-devtools .focus\\:ring-primary-active:focus {\n    --tw-ring-color: var(--color-primary-active);\n  }\n\n  .qwik-devtools .focus\\:ring-offset-0:focus {\n    --tw-ring-offset-width: 0px;\n    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  }\n\n  @media (min-width: 40rem) {\n    .qwik-devtools .sm\\:grid-cols-2 {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    .qwik-devtools .sm\\:grid-cols-3 {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n\n  @media (min-width: 48rem) {\n    .qwik-devtools .md\\:mt-6 {\n      margin-top: calc(var(--spacing) * 6);\n    }\n\n    .qwik-devtools .md\\:grid-cols-2 {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    .qwik-devtools .md\\:grid-cols-3 {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n\n    .qwik-devtools .md\\:grid-cols-4 {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n\n    .qwik-devtools .md\\:px-4 {\n      padding-inline: calc(var(--spacing) * 4);\n    }\n  }\n\n  @media (min-width: 64rem) {\n    .qwik-devtools .lg\\:grid-cols-3 {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n\n    .qwik-devtools .lg\\:grid-cols-4 {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .qwik-devtools .dark\\:border-\\[\\#374151\\] {\n      border-color: #374151;\n    }\n\n    .qwik-devtools .dark\\:border-emerald-700\\/40 {\n      border-color: #00795666;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .dark\\:border-emerald-700\\/40 {\n        border-color: color-mix(in oklab, var(--color-emerald-700) 40%, transparent);\n      }\n    }\n\n    .qwik-devtools .dark\\:bg-\\[\\#1F2937\\] {\n      background-color: #1f2937;\n    }\n\n    .qwik-devtools .dark\\:bg-emerald-900\\/30 {\n      background-color: #004e3b4d;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .dark\\:bg-emerald-900\\/30 {\n        background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);\n      }\n    }\n\n    .qwik-devtools .dark\\:text-emerald-300 {\n      color: var(--color-emerald-300);\n    }\n\n    .qwik-devtools .dark\\:text-violet-300 {\n      color: var(--color-violet-300);\n    }\n  }\n\n  .custom-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: var(--color-scrollbar-thumb) transparent;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-track {\n    background: none;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-thumb {\n    background-color: var(--color-scrollbar-thumb);\n    border-radius: 20px;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n    background-color: var(--color-scrollbar-thumb-hover);\n  }\n}\n\n:root {\n  --theme-name: "light";\n  --color-background: #fff;\n  --color-foreground: #000;\n  --color-primary: #10b981;\n  --color-primary-hover: #f2f2f2;\n  --color-primary-active: #047857;\n  --color-secondary: #6b7280;\n  --color-border: #e5e7eb;\n  --color-card: #f2f2f2;\n  --color-card-item-bg: #00000005;\n  --color-card-item-hover-bg: #00000008;\n  --color-scrollbar-thumb: #d1d5db;\n  --color-scrollbar-thumb-hover: #a1a1aa;\n  --color-muted: #9ca3af;\n  --color-muted-foreground: #6b7280;\n  --color-accent: #10b981;\n  --color-input: var(--color-border);\n  --color-ring: var(--color-primary);\n}\n\n:root[data-theme="dark"] {\n  --theme-name: "dark";\n  --color-background: #18181b;\n  --color-foreground: #fff;\n  --color-primary: #34d399;\n  --color-primary-hover: #10b981;\n  --color-primary-active: #059669;\n  --color-secondary: #9ca3af;\n  --color-border: #374151;\n  --color-card: #27272a;\n  --color-card-item-bg: #ffffff08;\n  --color-card-item-hover-bg: #ffffff0d;\n  --color-scrollbar-thumb: #3f3f46;\n  --color-scrollbar-thumb-hover: #52525b;\n  --color-muted: #374151;\n  --color-muted-foreground: #9ca3af;\n  --color-accent: #10b981;\n  --color-input: var(--color-border);\n  --color-ring: var(--color-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --theme-name: "dark";\n    --color-background: #18181b;\n    --color-foreground: #fff;\n    --color-primary: #10b981;\n    --color-secondary: #9ca3af;\n    --color-border: #374151;\n    --color-card: #27272a;\n    --color-card-item-bg: #ffffff08;\n    --color-card-item-hover-bg: #ffffff0d;\n    --color-scrollbar-thumb: #3f3f46;\n    --color-scrollbar-thumb-hover: #52525b;\n    --color-muted: #374151;\n    --color-muted-foreground: #9ca3af;\n    --color-accent: #10b981;\n    --color-input: var(--color-border);\n    --color-ring: var(--color-primary);\n  }\n}\n\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-rotate-x {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-rotate-y {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-rotate-z {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-skew-x {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-skew-y {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-space-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-space-x-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-divide-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-gradient-position {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-gradient-from {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n\n@property --tw-gradient-via {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n\n@property --tw-gradient-to {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n\n@property --tw-gradient-stops {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-gradient-via-stops {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-gradient-from-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 0%;\n}\n\n@property --tw-gradient-via-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 50%;\n}\n\n@property --tw-gradient-to-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-leading {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-blur {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-brightness {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-contrast {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-grayscale {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-hue-rotate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-invert {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-opacity {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-saturate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-sepia {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-blur {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-brightness {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-contrast {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-grayscale {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-hue-rotate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-invert {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-opacity {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-saturate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-sepia {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-duration {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-ease {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-scale-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n\n@property --tw-scale-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n\n@property --tw-scale-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n';
+const globalCss = '/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    *, :before, :after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-space-x-reverse: 0;\n      --tw-divide-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-scale-z: 1;\n    }\n  }\n}\n\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n    --color-red-400: oklch(70.4% .191 22.216);\n    --color-amber-400: oklch(82.8% .189 84.429);\n    --color-green-400: oklch(79.2% .209 151.711);\n    --color-emerald-100: oklch(95% .052 163.051);\n    --color-emerald-300: oklch(84.5% .143 164.978);\n    --color-emerald-700: oklch(50.8% .118 165.612);\n    --color-emerald-900: oklch(37.8% .077 168.94);\n    --color-blue-400: oklch(70.7% .165 254.624);\n    --color-violet-300: oklch(81.1% .111 293.571);\n    --color-violet-400: oklch(70.2% .183 293.541);\n    --color-purple-400: oklch(71.4% .203 305.504);\n    --color-pink-400: oklch(71.8% .202 349.761);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: .25rem;\n    --text-xs: .75rem;\n    --text-xs--line-height: calc(1 / .75);\n    --text-sm: .875rem;\n    --text-sm--line-height: calc(1.25 / .875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --leading-relaxed: 1.625;\n    --radius-md: .375rem;\n    --radius-lg: .5rem;\n    --radius-xl: .75rem;\n    --drop-shadow-md: 0 3px 3px #0000001f;\n    --ease-out: cubic-bezier(0, 0, .2, 1);\n    --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --blur-md: 12px;\n    --blur-lg: 16px;\n    --default-transition-duration: .15s;\n    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-background: #fff;\n    --color-foreground: #000;\n    --color-primary: #16b6f6;\n    --color-primary-active: #0ea5e9;\n    --color-muted-foreground: #6b7280;\n    --color-accent: #16b6f6;\n    --color-border: #e5e7eb;\n    --color-card: #f2f2f2;\n    --color-card-item-bg: #00000005;\n    --color-card-item-hover-bg: #00000008;\n  }\n}\n\n@layer base {\n  *, :after, :before, ::backdrop {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  ::file-selector-button {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  html, :host {\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    line-height: 1.5;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n\n  b, strong {\n    font-weight: bolder;\n  }\n\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n\n  small {\n    font-size: 80%;\n  }\n\n  sub, sup {\n    vertical-align: baseline;\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n  }\n\n  sub {\n    bottom: -.25em;\n  }\n\n  sup {\n    top: -.5em;\n  }\n\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n\n  :-moz-focusring {\n    outline: auto;\n  }\n\n  progress {\n    vertical-align: baseline;\n  }\n\n  summary {\n    display: list-item;\n  }\n\n  ol, ul, menu {\n    list-style: none;\n  }\n\n  img, svg, video, canvas, audio, iframe, embed, object {\n    vertical-align: middle;\n    display: block;\n  }\n\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n\n  button, input, select, optgroup, textarea {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n\n  ::placeholder {\n    opacity: 1;\n  }\n\n  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentColor;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n\n  textarea {\n    resize: vertical;\n  }\n\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n\n  ::-webkit-datetime-edit {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-year-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-month-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-day-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-hour-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-minute-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-second-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-millisecond-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n\n  button, input:where([type="button"], [type="reset"], [type="submit"]) {\n    appearance: button;\n  }\n\n  ::file-selector-button {\n    appearance: button;\n  }\n\n  ::-webkit-inner-spin-button {\n    height: auto;\n  }\n\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n\n@layer components;\n\n@layer utilities {\n  .qwik-devtools .pointer-events-none {\n    pointer-events: none;\n  }\n\n  .qwik-devtools .visible {\n    visibility: visible;\n  }\n\n  .qwik-devtools .absolute {\n    position: absolute;\n  }\n\n  .qwik-devtools .fixed {\n    position: fixed;\n  }\n\n  .qwik-devtools .relative {\n    position: relative;\n  }\n\n  .qwik-devtools .static {\n    position: static;\n  }\n\n  .qwik-devtools .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n\n  .qwik-devtools .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n\n  .qwik-devtools .right-6 {\n    right: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .bottom-0 {\n    bottom: calc(var(--spacing) * 0);\n  }\n\n  .qwik-devtools .bottom-6 {\n    bottom: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .z-\\[9999\\] {\n    z-index: 9999;\n  }\n\n  .qwik-devtools .col-start-1 {\n    grid-column-start: 1;\n  }\n\n  .qwik-devtools .row-start-1 {\n    grid-row-start: 1;\n  }\n\n  .qwik-devtools .container {\n    width: 100%;\n  }\n\n  @media (min-width: 40rem) {\n    .qwik-devtools .container {\n      max-width: 40rem;\n    }\n  }\n\n  @media (min-width: 48rem) {\n    .qwik-devtools .container {\n      max-width: 48rem;\n    }\n  }\n\n  @media (min-width: 64rem) {\n    .qwik-devtools .container {\n      max-width: 64rem;\n    }\n  }\n\n  @media (min-width: 80rem) {\n    .qwik-devtools .container {\n      max-width: 80rem;\n    }\n  }\n\n  @media (min-width: 96rem) {\n    .qwik-devtools .container {\n      max-width: 96rem;\n    }\n  }\n\n  .qwik-devtools .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n\n  .qwik-devtools .mt-4 {\n    margin-top: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .mt-5 {\n    margin-top: calc(var(--spacing) * 5);\n  }\n\n  .qwik-devtools .mt-6 {\n    margin-top: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .mt-auto {\n    margin-top: auto;\n  }\n\n  .qwik-devtools .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .mb-1\\.5 {\n    margin-bottom: calc(var(--spacing) * 1.5);\n  }\n\n  .qwik-devtools .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .mb-3 {\n    margin-bottom: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .line-clamp-2 {\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    overflow: hidden;\n  }\n\n  .qwik-devtools .flex {\n    display: flex;\n  }\n\n  .qwik-devtools .grid {\n    display: grid;\n  }\n\n  .qwik-devtools .hidden {\n    display: none;\n  }\n\n  .qwik-devtools .inline-flex {\n    display: inline-flex;\n  }\n\n  .qwik-devtools .aspect-square {\n    aspect-ratio: 1;\n  }\n\n  .qwik-devtools .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n\n  .qwik-devtools .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .h-7 {\n    height: calc(var(--spacing) * 7);\n  }\n\n  .qwik-devtools .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n\n  .qwik-devtools .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n\n  .qwik-devtools .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n\n  .qwik-devtools .h-12 {\n    height: calc(var(--spacing) * 12);\n  }\n\n  .qwik-devtools .h-\\[60vh\\] {\n    height: 60vh;\n  }\n\n  .qwik-devtools .h-\\[calc\\(100vh-3rem\\)\\] {\n    height: calc(100vh - 3rem);\n  }\n\n  .qwik-devtools .h-full {\n    height: 100%;\n  }\n\n  .qwik-devtools .min-h-0 {\n    min-height: calc(var(--spacing) * 0);\n  }\n\n  .qwik-devtools .min-h-\\[2\\.5rem\\] {\n    min-height: 2.5rem;\n  }\n\n  .qwik-devtools .w-1\\/2 {\n    width: 50%;\n  }\n\n  .qwik-devtools .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n\n  .qwik-devtools .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .w-7 {\n    width: calc(var(--spacing) * 7);\n  }\n\n  .qwik-devtools .w-8 {\n    width: calc(var(--spacing) * 8);\n  }\n\n  .qwik-devtools .w-9 {\n    width: calc(var(--spacing) * 9);\n  }\n\n  .qwik-devtools .w-10 {\n    width: calc(var(--spacing) * 10);\n  }\n\n  .qwik-devtools .w-12 {\n    width: calc(var(--spacing) * 12);\n  }\n\n  .qwik-devtools .w-\\[420px\\] {\n    width: 420px;\n  }\n\n  .qwik-devtools .w-\\[calc\\(100vw-3rem\\)\\] {\n    width: calc(100vw - 3rem);\n  }\n\n  .qwik-devtools .w-full {\n    width: 100%;\n  }\n\n  .qwik-devtools .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n\n  .qwik-devtools .min-w-\\[320px\\] {\n    min-width: 320px;\n  }\n\n  .qwik-devtools .flex-1 {\n    flex: 1;\n  }\n\n  .qwik-devtools .flex-shrink-0, .qwik-devtools .shrink-0 {\n    flex-shrink: 0;\n  }\n\n  .qwik-devtools .origin-center {\n    transform-origin: center;\n  }\n\n  .qwik-devtools .translate-y-0 {\n    --tw-translate-y: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n\n  .qwik-devtools .-rotate-90 {\n    rotate: -90deg;\n  }\n\n  .qwik-devtools .rotate-90 {\n    rotate: 90deg;\n  }\n\n  .qwik-devtools .rotate-180 {\n    rotate: 180deg;\n  }\n\n  .qwik-devtools .transform {\n    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n  }\n\n  .qwik-devtools .animate-spin {\n    animation: var(--animate-spin);\n  }\n\n  .qwik-devtools .cursor-grab {\n    cursor: grab;\n  }\n\n  .qwik-devtools .cursor-grabbing {\n    cursor: grabbing;\n  }\n\n  .qwik-devtools .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n\n  .qwik-devtools .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .qwik-devtools .resize-none {\n    resize: none;\n  }\n\n  .qwik-devtools .grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n\n  .qwik-devtools .grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .qwik-devtools .grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .qwik-devtools .grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n\n  .qwik-devtools .flex-col {\n    flex-direction: column;\n  }\n\n  .qwik-devtools .place-items-center {\n    place-items: center;\n  }\n\n  .qwik-devtools .items-center {\n    align-items: center;\n  }\n\n  .qwik-devtools .items-start {\n    align-items: flex-start;\n  }\n\n  .qwik-devtools .justify-between {\n    justify-content: space-between;\n  }\n\n  .qwik-devtools .justify-center {\n    justify-content: center;\n  }\n\n  .qwik-devtools .gap-1 {\n    gap: calc(var(--spacing) * 1);\n  }\n\n  .qwik-devtools .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n\n  .qwik-devtools .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .gap-5 {\n    gap: calc(var(--spacing) * 5);\n  }\n\n  :where(.qwik-devtools .space-y-2 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  :where(.qwik-devtools .space-y-3 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  :where(.qwik-devtools .space-y-4 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  :where(.qwik-devtools .space-y-6 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  .qwik-devtools .gap-x-6 {\n    column-gap: calc(var(--spacing) * 6);\n  }\n\n  :where(.qwik-devtools .space-x-2 > :not(:last-child)) {\n    --tw-space-x-reverse: 0;\n    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  :where(.qwik-devtools .space-x-4 > :not(:last-child)) {\n    --tw-space-x-reverse: 0;\n    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));\n    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));\n  }\n\n  .qwik-devtools .gap-y-3 {\n    row-gap: calc(var(--spacing) * 3);\n  }\n\n  :where(.qwik-devtools .divide-y > :not(:last-child)) {\n    --tw-divide-y-reverse: 0;\n    border-bottom-style: var(--tw-border-style);\n    border-top-style: var(--tw-border-style);\n    border-top-width: calc(1px * var(--tw-divide-y-reverse));\n    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  }\n\n  :where(.qwik-devtools .divide-border > :not(:last-child)) {\n    border-color: var(--color-border);\n  }\n\n  .qwik-devtools .truncate {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n\n  .qwik-devtools .overflow-auto {\n    overflow: auto;\n  }\n\n  .qwik-devtools .overflow-hidden {\n    overflow: hidden;\n  }\n\n  .qwik-devtools .overflow-x-auto {\n    overflow-x: auto;\n  }\n\n  .qwik-devtools .overflow-y-auto {\n    overflow-y: auto;\n  }\n\n  .qwik-devtools .rounded {\n    border-radius: .25rem;\n  }\n\n  .qwik-devtools .rounded-full {\n    border-radius: 3.40282e38px;\n  }\n\n  .qwik-devtools .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n\n  .qwik-devtools .rounded-md {\n    border-radius: var(--radius-md);\n  }\n\n  .qwik-devtools .rounded-xl {\n    border-radius: var(--radius-xl);\n  }\n\n  .qwik-devtools .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n\n  .qwik-devtools .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n\n  .qwik-devtools .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n\n  .qwik-devtools .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n\n  .qwik-devtools .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n\n  .qwik-devtools .border-b-2 {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 2px;\n  }\n\n  .qwik-devtools .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n\n  .qwik-devtools .border-accent\\/30 {\n    border-color: #16b6f64d;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .border-accent\\/30 {\n      border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);\n    }\n  }\n\n  .qwik-devtools .border-accent\\/50 {\n    border-color: #16b6f680;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .border-accent\\/50 {\n      border-color: color-mix(in oklab, var(--color-accent) 50%, transparent);\n    }\n  }\n\n  .qwik-devtools .border-border {\n    border-color: var(--color-border);\n  }\n\n  .qwik-devtools .border-border\\/50 {\n    border-color: #e5e7eb80;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .border-border\\/50 {\n      border-color: color-mix(in oklab, var(--color-border) 50%, transparent);\n    }\n  }\n\n  .qwik-devtools .border-current {\n    border-color: currentColor;\n  }\n\n  .qwik-devtools .border-emerald-300 {\n    border-color: var(--color-emerald-300);\n  }\n\n  .qwik-devtools .border-primary\\/20 {\n    border-color: #16b6f633;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .border-primary\\/20 {\n      border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);\n    }\n  }\n\n  .qwik-devtools .border-t-foreground\\/40 {\n    border-top-color: #0006;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .border-t-foreground\\/40 {\n      border-top-color: color-mix(in oklab, var(--color-foreground) 40%, transparent);\n    }\n  }\n\n  .qwik-devtools .border-t-transparent {\n    border-top-color: #0000;\n  }\n\n  .qwik-devtools .border-b-transparent {\n    border-bottom-color: #0000;\n  }\n\n  .qwik-devtools .bg-accent {\n    background-color: var(--color-accent);\n  }\n\n  .qwik-devtools .bg-background {\n    background-color: var(--color-background);\n  }\n\n  .qwik-devtools .bg-background\\/95 {\n    background-color: #fffffff2;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .bg-background\\/95 {\n      background-color: color-mix(in oklab, var(--color-background) 95%, transparent);\n    }\n  }\n\n  .qwik-devtools .bg-black\\/20 {\n    background-color: #0003;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .bg-black\\/20 {\n      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);\n    }\n  }\n\n  .qwik-devtools .bg-card {\n    background-color: var(--color-card);\n  }\n\n  .qwik-devtools .bg-card-item-bg {\n    background-color: var(--color-card-item-bg);\n  }\n\n  .qwik-devtools .bg-emerald-100 {\n    background-color: var(--color-emerald-100);\n  }\n\n  .qwik-devtools .bg-foreground\\/5 {\n    background-color: #0000000d;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .bg-foreground\\/5 {\n      background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);\n    }\n  }\n\n  .qwik-devtools .bg-primary\\/5 {\n    background-color: #16b6f60d;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .bg-primary\\/5 {\n      background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);\n    }\n  }\n\n  .qwik-devtools .bg-primary\\/10 {\n    background-color: #16b6f61a;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .bg-primary\\/10 {\n      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);\n    }\n  }\n\n  .qwik-devtools .bg-transparent {\n    background-color: #0000;\n  }\n\n  .qwik-devtools .bg-gradient-to-br {\n    --tw-gradient-position: to bottom right in oklab;\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n\n  .qwik-devtools .from-accent\\/20 {\n    --tw-gradient-from: #16b6f633;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .from-accent\\/20 {\n      --tw-gradient-from: color-mix(in oklab, var(--color-accent) 20%, transparent);\n    }\n  }\n\n  .qwik-devtools .from-accent\\/20 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .from-primary\\/0 {\n    --tw-gradient-from: #0000;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .from-primary\\/0 {\n      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 0%, transparent);\n    }\n  }\n\n  .qwik-devtools .from-primary\\/0 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .from-primary\\/10 {\n    --tw-gradient-from: #16b6f61a;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .from-primary\\/10 {\n      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 10%, transparent);\n    }\n  }\n\n  .qwik-devtools .from-primary\\/10 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .via-primary\\/0 {\n    --tw-gradient-via: #0000;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .via-primary\\/0 {\n      --tw-gradient-via: color-mix(in oklab, var(--color-primary) 0%, transparent);\n    }\n  }\n\n  .qwik-devtools .via-primary\\/0 {\n    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);\n    --tw-gradient-stops: var(--tw-gradient-via-stops);\n  }\n\n  .qwik-devtools .via-primary\\/20 {\n    --tw-gradient-via: #16b6f633;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .via-primary\\/20 {\n      --tw-gradient-via: color-mix(in oklab, var(--color-primary) 20%, transparent);\n    }\n  }\n\n  .qwik-devtools .via-primary\\/20 {\n    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);\n    --tw-gradient-stops: var(--tw-gradient-via-stops);\n  }\n\n  .qwik-devtools .to-accent\\/40 {\n    --tw-gradient-to: #16b6f666;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .to-accent\\/40 {\n      --tw-gradient-to: color-mix(in oklab, var(--color-accent) 40%, transparent);\n    }\n  }\n\n  .qwik-devtools .to-accent\\/40 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .to-primary\\/5 {\n    --tw-gradient-to: #16b6f60d;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .to-primary\\/5 {\n      --tw-gradient-to: color-mix(in oklab, var(--color-primary) 5%, transparent);\n    }\n  }\n\n  .qwik-devtools .to-primary\\/5 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .to-primary\\/30 {\n    --tw-gradient-to: #16b6f64d;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .to-primary\\/30 {\n      --tw-gradient-to: color-mix(in oklab, var(--color-primary) 30%, transparent);\n    }\n  }\n\n  .qwik-devtools .to-primary\\/30 {\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n\n  .qwik-devtools .object-cover {\n    object-fit: cover;\n  }\n\n  .qwik-devtools .p-0\\.5 {\n    padding: calc(var(--spacing) * .5);\n  }\n\n  .qwik-devtools .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n\n  .qwik-devtools .p-1\\.5 {\n    padding: calc(var(--spacing) * 1.5);\n  }\n\n  .qwik-devtools .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .p-2\\.5 {\n    padding: calc(var(--spacing) * 2.5);\n  }\n\n  .qwik-devtools .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .p-3\\.5 {\n    padding: calc(var(--spacing) * 3.5);\n  }\n\n  .qwik-devtools .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .p-5 {\n    padding: calc(var(--spacing) * 5);\n  }\n\n  .qwik-devtools .p-8 {\n    padding: calc(var(--spacing) * 8);\n  }\n\n  .qwik-devtools .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .px-2\\.5 {\n    padding-inline: calc(var(--spacing) * 2.5);\n  }\n\n  .qwik-devtools .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .py-0\\.5 {\n    padding-block: calc(var(--spacing) * .5);\n  }\n\n  .qwik-devtools .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n\n  .qwik-devtools .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n\n  .qwik-devtools .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n\n  .qwik-devtools .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n\n  .qwik-devtools .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .py-8 {\n    padding-block: calc(var(--spacing) * 8);\n  }\n\n  .qwik-devtools .pb-4 {\n    padding-bottom: calc(var(--spacing) * 4);\n  }\n\n  .qwik-devtools .pb-6 {\n    padding-bottom: calc(var(--spacing) * 6);\n  }\n\n  .qwik-devtools .text-center {\n    text-align: center;\n  }\n\n  .qwik-devtools .text-left {\n    text-align: left;\n  }\n\n  .qwik-devtools .text-right {\n    text-align: right;\n  }\n\n  .qwik-devtools .font-mono {\n    font-family: var(--font-mono);\n  }\n\n  .qwik-devtools .font-sans {\n    font-family: var(--font-sans);\n  }\n\n  .qwik-devtools .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n\n  .qwik-devtools .text-3xl {\n    font-size: var(--text-3xl);\n    line-height: var(--tw-leading, var(--text-3xl--line-height));\n  }\n\n  .qwik-devtools .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n\n  .qwik-devtools .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n\n  .qwik-devtools .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n\n  .qwik-devtools .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n\n  .qwik-devtools .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n\n  .qwik-devtools .text-\\[10px\\] {\n    font-size: 10px;\n  }\n\n  .qwik-devtools .leading-relaxed {\n    --tw-leading: var(--leading-relaxed);\n    line-height: var(--leading-relaxed);\n  }\n\n  .qwik-devtools .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n\n  .qwik-devtools .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n\n  .qwik-devtools .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n\n  .qwik-devtools .break-all {\n    word-break: break-all;\n  }\n\n  .qwik-devtools .whitespace-nowrap {\n    white-space: nowrap;\n  }\n\n  .qwik-devtools .text-accent {\n    color: var(--color-accent);\n  }\n\n  .qwik-devtools .text-amber-400 {\n    color: var(--color-amber-400);\n  }\n\n  .qwik-devtools .text-blue-400 {\n    color: var(--color-blue-400);\n  }\n\n  .qwik-devtools .text-emerald-700 {\n    color: var(--color-emerald-700);\n  }\n\n  .qwik-devtools .text-foreground {\n    color: var(--color-foreground);\n  }\n\n  .qwik-devtools .text-foreground\\/70 {\n    color: #000000b3;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .text-foreground\\/70 {\n      color: color-mix(in oklab, var(--color-foreground) 70%, transparent);\n    }\n  }\n\n  .qwik-devtools .text-green-400 {\n    color: var(--color-green-400);\n  }\n\n  .qwik-devtools .text-muted-foreground {\n    color: var(--color-muted-foreground);\n  }\n\n  .qwik-devtools .text-pink-400 {\n    color: var(--color-pink-400);\n  }\n\n  .qwik-devtools .text-primary {\n    color: var(--color-primary);\n  }\n\n  .qwik-devtools .text-primary\\/50 {\n    color: #16b6f680;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .text-primary\\/50 {\n      color: color-mix(in oklab, var(--color-primary) 50%, transparent);\n    }\n  }\n\n  .qwik-devtools .text-purple-400 {\n    color: var(--color-purple-400);\n  }\n\n  .qwik-devtools .text-red-400 {\n    color: var(--color-red-400);\n  }\n\n  .qwik-devtools .text-violet-400 {\n    color: var(--color-violet-400);\n  }\n\n  .qwik-devtools .text-white {\n    color: var(--color-white);\n  }\n\n  .qwik-devtools .opacity-0 {\n    opacity: 0;\n  }\n\n  .qwik-devtools .opacity-90 {\n    opacity: .9;\n  }\n\n  .qwik-devtools .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .qwik-devtools .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .qwik-devtools .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .qwik-devtools .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .qwik-devtools .ring-2 {\n    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .qwik-devtools .shadow-accent\\/35 {\n    --tw-shadow-color: #16b6f659;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .qwik-devtools .shadow-accent\\/35 {\n      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-accent) 35%, transparent) var(--tw-shadow-alpha), transparent);\n    }\n  }\n\n  .qwik-devtools .ring-primary-active {\n    --tw-ring-color: var(--color-primary-active);\n  }\n\n  .qwik-devtools .drop-shadow-md {\n    --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, #0000001f));\n    --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));\n    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n  }\n\n  .qwik-devtools .filter {\n    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n  }\n\n  .qwik-devtools .backdrop-blur-lg {\n    --tw-backdrop-blur: blur(var(--blur-lg));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n  }\n\n  .qwik-devtools .backdrop-blur-md {\n    --tw-backdrop-blur: blur(var(--blur-md));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n  }\n\n  .qwik-devtools .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .qwik-devtools .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .qwik-devtools .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .qwik-devtools .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .qwik-devtools .transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .qwik-devtools .duration-200 {\n    --tw-duration: .2s;\n    transition-duration: .2s;\n  }\n\n  .qwik-devtools .duration-300 {\n    --tw-duration: .3s;\n    transition-duration: .3s;\n  }\n\n  .qwik-devtools .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n\n  .qwik-devtools .ease-out {\n    --tw-ease: var(--ease-out);\n    transition-timing-function: var(--ease-out);\n  }\n\n  .qwik-devtools .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  @media (hover: hover) {\n    .qwik-devtools .group-hover\\:scale-110:is(:where(.group):hover *) {\n      --tw-scale-x: 110%;\n      --tw-scale-y: 110%;\n      --tw-scale-z: 110%;\n      scale: var(--tw-scale-x) var(--tw-scale-y);\n    }\n\n    .qwik-devtools .group-hover\\:opacity-100:is(:where(.group):hover *) {\n      opacity: 1;\n    }\n\n    .qwik-devtools .group-hover\\:shadow-primary\\/20:is(:where(.group):hover *) {\n      --tw-shadow-color: #16b6f633;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .group-hover\\:shadow-primary\\/20:is(:where(.group):hover *) {\n        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);\n      }\n    }\n  }\n\n  .qwik-devtools .group-active\\:scale-75:is(:where(.group):active *) {\n    --tw-scale-x: 75%;\n    --tw-scale-y: 75%;\n    --tw-scale-z: 75%;\n    scale: var(--tw-scale-x) var(--tw-scale-y);\n  }\n\n  @media (hover: hover) {\n    .qwik-devtools .hover\\:-translate-y-0\\.5:hover {\n      --tw-translate-y: calc(var(--spacing) * -.5);\n      translate: var(--tw-translate-x) var(--tw-translate-y);\n    }\n\n    .qwik-devtools .hover\\:scale-110:hover {\n      --tw-scale-x: 110%;\n      --tw-scale-y: 110%;\n      --tw-scale-z: 110%;\n      scale: var(--tw-scale-x) var(--tw-scale-y);\n    }\n\n    .qwik-devtools .hover\\:rotate-3:hover {\n      rotate: 3deg;\n    }\n\n    .qwik-devtools .hover\\:border-primary\\/30:hover {\n      border-color: #16b6f64d;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .hover\\:border-primary\\/30:hover {\n        border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);\n      }\n    }\n\n    .qwik-devtools .hover\\:bg-card-item-hover-bg:hover {\n      background-color: var(--color-card-item-hover-bg);\n    }\n\n    .qwik-devtools .hover\\:bg-foreground\\/5:hover {\n      background-color: #0000000d;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .hover\\:bg-foreground\\/5:hover {\n        background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);\n      }\n    }\n\n    .qwik-devtools .hover\\:bg-primary\\/10:hover {\n      background-color: #16b6f61a;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .hover\\:bg-primary\\/10:hover {\n        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);\n      }\n    }\n\n    .qwik-devtools .hover\\:bg-primary\\/20:hover {\n      background-color: #16b6f633;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .hover\\:bg-primary\\/20:hover {\n        background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);\n      }\n    }\n\n    .qwik-devtools .hover\\:text-foreground:hover {\n      color: var(--color-foreground);\n    }\n\n    .qwik-devtools .hover\\:text-primary:hover {\n      color: var(--color-primary);\n    }\n\n    .qwik-devtools .hover\\:underline:hover {\n      text-decoration-line: underline;\n    }\n\n    .qwik-devtools .hover\\:opacity-60:hover {\n      opacity: .6;\n    }\n\n    .qwik-devtools .hover\\:opacity-90:hover {\n      opacity: .9;\n    }\n\n    .qwik-devtools .hover\\:shadow-lg:hover {\n      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n\n    .qwik-devtools .hover\\:shadow-primary\\/5:hover {\n      --tw-shadow-color: #16b6f60d;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .hover\\:shadow-primary\\/5:hover {\n        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 5%, transparent) var(--tw-shadow-alpha), transparent);\n      }\n    }\n  }\n\n  .qwik-devtools .focus\\:ring-primary-active:focus {\n    --tw-ring-color: var(--color-primary-active);\n  }\n\n  .qwik-devtools .focus\\:ring-offset-0:focus {\n    --tw-ring-offset-width: 0px;\n    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  }\n\n  @media (min-width: 40rem) {\n    .qwik-devtools .sm\\:grid-cols-2 {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    .qwik-devtools .sm\\:grid-cols-3 {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n\n  @media (min-width: 48rem) {\n    .qwik-devtools .md\\:mt-6 {\n      margin-top: calc(var(--spacing) * 6);\n    }\n\n    .qwik-devtools .md\\:grid-cols-2 {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    .qwik-devtools .md\\:grid-cols-3 {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n\n    .qwik-devtools .md\\:grid-cols-4 {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n\n    .qwik-devtools .md\\:px-4 {\n      padding-inline: calc(var(--spacing) * 4);\n    }\n  }\n\n  @media (min-width: 64rem) {\n    .qwik-devtools .lg\\:grid-cols-3 {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n\n    .qwik-devtools .lg\\:grid-cols-4 {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  }\n\n  @media (prefers-color-scheme: dark) {\n    .qwik-devtools .dark\\:border-\\[\\#374151\\] {\n      border-color: #374151;\n    }\n\n    .qwik-devtools .dark\\:border-emerald-700\\/40 {\n      border-color: #00795666;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .dark\\:border-emerald-700\\/40 {\n        border-color: color-mix(in oklab, var(--color-emerald-700) 40%, transparent);\n      }\n    }\n\n    .qwik-devtools .dark\\:bg-\\[\\#1F2937\\] {\n      background-color: #1f2937;\n    }\n\n    .qwik-devtools .dark\\:bg-emerald-900\\/30 {\n      background-color: #004e3b4d;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .qwik-devtools .dark\\:bg-emerald-900\\/30 {\n        background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);\n      }\n    }\n\n    .qwik-devtools .dark\\:text-emerald-300 {\n      color: var(--color-emerald-300);\n    }\n\n    .qwik-devtools .dark\\:text-violet-300 {\n      color: var(--color-violet-300);\n    }\n  }\n\n  .custom-scrollbar {\n    scrollbar-width: thin;\n    scrollbar-color: var(--color-scrollbar-thumb) transparent;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-track {\n    background: none;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-thumb {\n    background-color: var(--color-scrollbar-thumb);\n    border-radius: 20px;\n  }\n\n  .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n    background-color: var(--color-scrollbar-thumb-hover);\n  }\n}\n\n:root {\n  --theme-name: "light";\n  --color-background: #fff;\n  --color-foreground: #000;\n  --color-primary: #16b6f6;\n  --color-primary-hover: #38bdf8;\n  --color-primary-active: #0ea5e9;\n  --color-secondary: #6b7280;\n  --color-border: #e5e7eb;\n  --color-card: #f2f2f2;\n  --color-card-item-bg: #00000005;\n  --color-card-item-hover-bg: #00000008;\n  --color-scrollbar-thumb: #d1d5db;\n  --color-scrollbar-thumb-hover: #a1a1aa;\n  --color-muted: #9ca3af;\n  --color-muted-foreground: #6b7280;\n  --color-accent: #16b6f6;\n  --color-input: var(--color-border);\n  --color-ring: var(--color-primary);\n}\n\n:root[data-theme="dark"] {\n  --theme-name: "dark";\n  --color-background: #18181b;\n  --color-foreground: #fff;\n  --color-primary: #16b6f6;\n  --color-primary-hover: #38bdf8;\n  --color-primary-active: #0ea5e9;\n  --color-secondary: #9ca3af;\n  --color-border: #374151;\n  --color-card: #27272a;\n  --color-card-item-bg: #ffffff08;\n  --color-card-item-hover-bg: #ffffff0d;\n  --color-scrollbar-thumb: #3f3f46;\n  --color-scrollbar-thumb-hover: #52525b;\n  --color-muted: #374151;\n  --color-muted-foreground: #9ca3af;\n  --color-accent: #16b6f6;\n  --color-input: var(--color-border);\n  --color-ring: var(--color-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --theme-name: "dark";\n    --color-background: #18181b;\n    --color-foreground: #fff;\n    --color-primary: #16b6f6;\n    --color-secondary: #9ca3af;\n    --color-border: #374151;\n    --color-card: #27272a;\n    --color-card-item-bg: #ffffff08;\n    --color-card-item-hover-bg: #ffffff0d;\n    --color-scrollbar-thumb: #3f3f46;\n    --color-scrollbar-thumb-hover: #52525b;\n    --color-muted: #374151;\n    --color-muted-foreground: #9ca3af;\n    --color-accent: #16b6f6;\n    --color-input: var(--color-border);\n    --color-ring: var(--color-primary);\n  }\n}\n\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-rotate-x {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-rotate-y {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-rotate-z {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-skew-x {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-skew-y {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-space-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-space-x-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-divide-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-gradient-position {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-gradient-from {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n\n@property --tw-gradient-via {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n\n@property --tw-gradient-to {\n  syntax: "<color>";\n  inherits: false;\n  initial-value: #0000;\n}\n\n@property --tw-gradient-stops {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-gradient-via-stops {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-gradient-from-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 0%;\n}\n\n@property --tw-gradient-via-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 50%;\n}\n\n@property --tw-gradient-to-position {\n  syntax: "<length-percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-leading {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-blur {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-brightness {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-contrast {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-grayscale {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-hue-rotate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-invert {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-opacity {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-saturate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-sepia {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-blur {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-brightness {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-contrast {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-grayscale {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-hue-rotate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-invert {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-opacity {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-saturate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-backdrop-sepia {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-duration {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-ease {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-scale-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n\n@property --tw-scale-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n\n@property --tw-scale-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 1;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n';
 export {
   globalCss as default
 };

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

@@ -12,6 +12,15 @@ export interface ServerFunctions {
     getRoutes: () => any;
     getQwikPackages: () => Promise<[string, string][]>;
     getAllDependencies: () => Promise<any[]>;
+    getDependenciesStatus: () => Promise<{
+        phase: 'idle' | 'phase1' | 'phase2' | 'done' | 'error';
+        loaded: number;
+        total: number;
+        startedAt: number | null;
+        finishedAt: number | null;
+        error?: string;
+    }>;
+    refreshDependencies: () => Promise<void>;
     installPackage: (packageName: string, isDev?: boolean) => Promise<{
         success: boolean;
         error?: string;

package/dist/ui/lib-types/ui/src/features/Packages/types.d.ts

@@ -2,8 +2,16 @@ export interface Package {
     name: string;
     version: string;
     description: string;
-    author?: {
-        name: string;
+    /**
+     * npm package.json `author` can be:
+     * - string: "Jane Doe <jane@example.com> (https://example.com)"
+     * - object: { name, email?, url? }
+     * - missing / partial
+     *
+     * Runtime data may not match strict typings, so keep this permissive.
+     */
+    author?: string | {
+        name?: string;
         email?: string;
         url?: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwik.dev/devtools",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "license": "MIT",
   "main": "./dist/plugin/index.mjs",
   "description": "Qwik devtools package",