@qwik.dev/devtools 0.2.8 → 2.0.0-beta.43

package/dist/ui/packages/devtools/ui/src/devtools/QwikDevtools.qwik.mjs

@@ -0,0 +1,58 @@
+import { DevtoolsButton } from "../components/DevtoolsButton/DevtoolsButton.qwik.mjs";
+import { DevtoolsContainer } from "../components/DevtoolsContainer/DevtoolsContainer.qwik.mjs";
+import { DevtoolsPanel } from "../components/DevtoolsPanel/DevtoolsPanel.qwik.mjs";
+import { ThemeScript } from "../components/ThemeToggle/theme-script.qwik.mjs";
+/* empty css                  */
+import { loadDevtoolsData } from "./rpc.qwik.mjs";
+import { DevtoolsContent } from "./DevtoolsContent.qwik.mjs";
+import { loadVisibleTabIds } from "./sidebar-tabs.qwik.mjs";
+import { createDevtoolsState } from "./state.qwik.mjs";
+import { DevtoolsSidebar } from "./DevtoolsSidebar.qwik.mjs";
+import { CustomizeTabsPanel } from "./CustomizeTabsPanel.qwik.mjs";
+import { CommandPalette } from "./CommandPalette.qwik.mjs";
+import { ensurePreloadRuntime } from "../runtime/preloads.qwik.mjs";
+import { isExcludedPathname, normalizeExcludePathnames } from "../../../kit/src/overlay-paths.qwik.mjs";
+import { _captures, _jsxSorted, componentQrl, inlinedQrl, useSignal, useStore, useVisibleTaskQrl } from "@qwik.dev/core";
+import { QWIK_DEVTOOLS_GLOBAL, getQwikDevtoolsGlobal } from "@qwik.dev/devtools/kit";
+var QwikDevtools = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((props) => {
+	const state = useStore(createDevtoolsState());
+	const excludePathnames = normalizeExcludePathnames(props.excludePathnames);
+	const shouldRender = useSignal(excludePathnames.length === 0);
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(async () => {
+		const excludePathnames = _captures[0], shouldRender = _captures[1], state = _captures[2];
+		if (isExcludedPathname(location.pathname, excludePathnames)) {
+			shouldRender.value = false;
+			return;
+		}
+		shouldRender.value = true;
+		if (!state.isExtension) {
+			const storedVisibleTabIds = loadVisibleTabIds();
+			if (storedVisibleTabIds) state.visibleTabIds = storedVisibleTabIds;
+		}
+		if (!getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.dataProvider]) ensurePreloadRuntime();
+		await loadDevtoolsData(state);
+	}, "QwikDevtools_component_useVisibleTask_uC3JSfARmqs", [
+		excludePathnames,
+		shouldRender,
+		state
+	]), { strategy: "document-ready" });
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(({ cleanup }) => {
+		const state = _captures[0];
+		const handleShortcut = (event) => {
+			if ((event.metaKey || event.ctrlKey) && (event.key === "k" || event.key === "K")) {
+				if (!state.isOpen) return;
+				event.preventDefault();
+				state.isPaletteOpen = !state.isPaletteOpen;
+			}
+		};
+		window.addEventListener("keydown", handleShortcut);
+		cleanup(() => window.removeEventListener("keydown", handleShortcut));
+	}, "QwikDevtools_component_useVisibleTask_1_Q0Inlj2aFY8", [state]), { strategy: "document-ready" });
+	if (!shouldRender.value) return /*#__PURE__*/ _jsxSorted("span", null, { style: { display: "contents" } }, null, 3, "lm_0");
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "qwik-devtools" }, [/*#__PURE__*/ _jsxSorted(ThemeScript, null, null, null, 3, "lm_1"), /*#__PURE__*/ _jsxSorted(DevtoolsContainer, null, null, [/*#__PURE__*/ _jsxSorted(DevtoolsButton, null, { state }, null, 3, "lm_2"), state.isOpen && /*#__PURE__*/ _jsxSorted(DevtoolsPanel, null, { state }, [/*#__PURE__*/ _jsxSorted(DevtoolsSidebar, null, { state }, null, 3, "lm_3"), /*#__PURE__*/ _jsxSorted("div", null, { class: "relative min-h-0 flex-1" }, [
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "custom-scrollbar h-full overflow-y-auto p-4" }, /*#__PURE__*/ _jsxSorted(DevtoolsContent, null, { state }, null, 3, "lm_4"), 1, null),
+		!state.isExtension && state.isCustomizeOpen && /*#__PURE__*/ _jsxSorted(CustomizeTabsPanel, null, { state }, null, 3, "lm_5"),
+		state.isPaletteOpen && /*#__PURE__*/ _jsxSorted(CommandPalette, null, { state }, null, 3, "lm_6")
+	], 1, null)], 1, "lm_7")], 1, "lm_8")], 1, "lm_9");
+}, "QwikDevtools_component_Jxy3rMAzQPw"));
+export { QwikDevtools };

package/dist/ui/packages/devtools/ui/src/devtools/QwikDevtoolsExtension.qwik.mjs

@@ -0,0 +1,31 @@
+/* empty css                  */
+import { loadDevtoolsData } from "./rpc.qwik.mjs";
+import { DevtoolsContent } from "./DevtoolsContent.qwik.mjs";
+import { createDevtoolsState } from "./state.qwik.mjs";
+import { DevtoolsSidebar } from "./DevtoolsSidebar.qwik.mjs";
+import { _captures, _jsxSorted, componentQrl, inlinedQrl, useStore, useVisibleTaskQrl } from "@qwik.dev/core";
+/**
+* Extension-only devtools layout.
+*
+* Renders the sidebar and content directly without the overlay chrome (floating button, draggable
+* panel, backdrop). Mounted inside the browser extension DevTools panel via
+* {@link entry.extension.tsx}.
+*
+* The outer `.qwik-devtools` wrapper is required because the Tailwind utilities are scoped under
+* `.qwik-devtools .{class}` in the CSS build. It must be a separate element so descendant selectors
+* match.
+*/ var QwikDevtoolsExtension = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(() => {
+	const state = useStore(createDevtoolsState({ isExtension: true }));
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(async () => {
+		const state = _captures[0];
+		await loadDevtoolsData(state);
+	}, "QwikDevtoolsExtension_component_useVisibleTask_uLhNm8VeHHc", [state]));
+	return /*#__PURE__*/ _jsxSorted("div", null, {
+		class: "qwik-devtools",
+		style: "position: absolute; inset: 0;"
+	}, /*#__PURE__*/ _jsxSorted("div", null, {
+		class: "flex overflow-hidden",
+		style: "height: 100%; width: 100%;"
+	}, [/*#__PURE__*/ _jsxSorted(DevtoolsSidebar, null, { state }, null, 3, "Nl_0"), /*#__PURE__*/ _jsxSorted("div", null, { class: "custom-scrollbar min-h-0 flex-1 overflow-y-auto p-4" }, /*#__PURE__*/ _jsxSorted(DevtoolsContent, null, { state }, null, 3, "Nl_1"), 1, null)], 1, null), 1, "Nl_2");
+}, "QwikDevtoolsExtension_component_EdZTDUSLNrE"));
+export { QwikDevtoolsExtension };

package/dist/ui/packages/devtools/ui/src/devtools/command-palette.qwik.mjs

@@ -0,0 +1,157 @@
+import { devtoolsTabs } from "./tabs.qwik.mjs";
+var RECENTS_STORAGE_KEY = "qwik-devtools:palette-recents";
+var MAX_RECENTS = 5;
+/** Categories always render in this order. */ var CATEGORY_ORDER = [
+	"Tabs",
+	"Components",
+	"Routes",
+	"Packages",
+	"Actions"
+];
+/** Tabs reachable in the current context (Vite-only tabs are hidden in the extension). */ function getTabResults(state) {
+	return devtoolsTabs.filter((tab) => !(state.isExtension && tab.viteOnly)).map((tab) => ({
+		id: `tab:${tab.id}`,
+		category: "Tabs",
+		label: tab.title,
+		target: {
+			kind: "tab",
+			tabId: tab.id
+		}
+	}));
+}
+function getComponentResults(state) {
+	return state.components.map((component) => ({
+		id: `component:${component.file || component.name}`,
+		category: "Components",
+		label: component.name,
+		hint: component.fileName,
+		target: {
+			kind: "component",
+			name: component.name
+		}
+	}));
+}
+/** Routes live behind the Vite-only Routes tab, so they are excluded in the extension. */ function getRouteResults(state) {
+	if (state.isExtension || !state.routes) return [];
+	return state.routes.map((route) => ({
+		id: `route:${route.relativePath}`,
+		category: "Routes",
+		label: route.relativePath === "" ? "/" : `/${route.relativePath}/`,
+		hint: route.name,
+		target: {
+			kind: "route",
+			path: route.relativePath
+		}
+	}));
+}
+/** Packages live behind the Vite-only Packages tab, so they are excluded in the extension. */ function getPackageResults(state) {
+	if (state.isExtension) return [];
+	return state.npmPackages.map(([name, version]) => ({
+		id: `package:${name}`,
+		category: "Packages",
+		label: name,
+		hint: version,
+		target: {
+			kind: "package",
+			name
+		}
+	}));
+}
+/** Common quick actions available in the current context. */ function getActionResults(state) {
+	const actions = [
+		{
+			id: "action:toggleTheme",
+			category: "Actions",
+			label: "Toggle theme",
+			target: {
+				kind: "action",
+				action: "toggleTheme"
+			}
+		},
+		{
+			id: "action:clearPerformance",
+			category: "Actions",
+			label: "Clear performance",
+			target: {
+				kind: "action",
+				action: "clearPerformance"
+			}
+		},
+		{
+			id: "action:clearRecents",
+			category: "Actions",
+			label: "Clear recent searches",
+			target: {
+				kind: "action",
+				action: "clearRecents"
+			}
+		}
+	];
+	if (!state.isExtension) actions.push({
+		id: "action:customizeTabs",
+		category: "Actions",
+		label: "Customize tabs",
+		target: {
+			kind: "action",
+			action: "customizeTabs"
+		}
+	});
+	return actions;
+}
+/** Every searchable result for the current context (tabs, components, routes, packages). */ function buildPaletteSources(state) {
+	return [
+		...getTabResults(state),
+		...getComponentResults(state),
+		...getRouteResults(state),
+		...getPackageResults(state)
+	];
+}
+/** Filters results by a substring match against label and hint; an empty query returns nothing. */ function filterResults(results, query) {
+	const normalized = query.trim().toLowerCase();
+	if (!normalized) return [];
+	return results.filter((result) => result.label.toLowerCase().includes(normalized) || (result.hint?.toLowerCase().includes(normalized) ?? false));
+}
+/** Groups results by category, preserving the fixed category order and dropping empty groups. */ function groupResults(results) {
+	const groups = [];
+	for (const category of CATEGORY_ORDER) {
+		const inCategory = results.filter((result) => result.category === category);
+		if (inCategory.length > 0) groups.push({
+			category,
+			results: inCategory
+		});
+	}
+	return groups;
+}
+/** Reads the persisted recent-selection ids, newest first; empty when nothing valid is stored. */ function loadRecentIds() {
+	try {
+		const raw = localStorage.getItem(RECENTS_STORAGE_KEY);
+		if (!raw) return [];
+		const parsed = JSON.parse(raw);
+		if (!Array.isArray(parsed)) return [];
+		return parsed.filter((value) => typeof value === "string");
+	} catch {
+		return [];
+	}
+}
+/** Persists the recent-selection ids. Storage failures (private mode, quota) are ignored. */ function saveRecentIds(ids) {
+	try {
+		localStorage.setItem(RECENTS_STORAGE_KEY, JSON.stringify(ids));
+	} catch {}
+}
+/** Returns a new list with `id` moved to the front, de-duped and capped at MAX_RECENTS. */ function addRecentId(recentIds, id) {
+	return [id, ...recentIds.filter((existing) => existing !== id)].slice(0, MAX_RECENTS);
+}
+/**
+* Resolves persisted recent ids to their current results, dropping entries that no longer exist
+* (e.g. a component that unmounted or a package that was removed). Actions are resolvable too.
+*/ function resolveRecents(recentIds, state) {
+	const byId = /* @__PURE__ */ new Map();
+	for (const result of [...buildPaletteSources(state), ...getActionResults(state)]) byId.set(result.id, result);
+	const resolved = [];
+	for (const id of recentIds) {
+		const result = byId.get(id);
+		if (result) resolved.push(result);
+	}
+	return resolved;
+}
+export { addRecentId, buildPaletteSources, filterResults, getActionResults, groupResults, loadRecentIds, resolveRecents, saveRecentIds };

package/dist/ui/packages/devtools/ui/src/devtools/page-data-source.qwik.mjs

@@ -0,0 +1,60 @@
+import { isBrowser } from "@qwik.dev/core";
+import { QWIK_DEVTOOLS_GLOBAL, createInPageBridge, getQwikDevtoolsGlobal } from "@qwik.dev/devtools/kit";
+/**
+* Default implementation that reads directly from `window` globals. Used when the devtools UI runs
+* as an in-app overlay (same document).
+*/ var InPageDataSource = class {
+	constructor() {
+		this.bridge = createInPageBridge({ isBrowser });
+	}
+	async readPerfData() {
+		return this.bridge.readPerfData();
+	}
+	async readPreloadStore() {
+		return this.bridge.readPreloadStore();
+	}
+	async clearPreloadStore() {
+		return this.bridge.clearPreloadStore();
+	}
+	subscribePreloadUpdates(cb) {
+		return this.bridge.subscribePreloadUpdates(cb);
+	}
+	async readComponentTree() {
+		return this.bridge.readComponentTree();
+	}
+	async readSignals() {
+		return this.bridge.readSignals();
+	}
+	async readVNodeTree() {
+		return this.bridge.readVNodeTree();
+	}
+	subscribeTreeUpdates(cb) {
+		return this.bridge.subscribeTreeUpdates(cb);
+	}
+	async readNodeProps(nodeId) {
+		return this.bridge.readNodeProps(nodeId);
+	}
+	async readComponentDetail(componentName, qrlChunk) {
+		return this.bridge.readComponentDetail(componentName, qrlChunk);
+	}
+	async setSignalValue(componentName, qrlChunk, variableName, newValue) {
+		return this.bridge.setSignalValue(componentName, qrlChunk, variableName, newValue);
+	}
+	async highlightElement() {}
+	async unhighlightElement() {}
+	subscribeRenderEvents(cb) {
+		return this.bridge.subscribeRenderEvents(cb);
+	}
+};
+var defaultSource = new InPageDataSource();
+/**
+* Return the active page data source.
+*
+* When the Qwik DevTools root has a `pageDataSource` (by the browser extension entry point), that
+* source is used. Otherwise the default in-page source is returned.
+*/ function getPageDataSource() {
+	const source = isBrowser ? getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.pageDataSource] : void 0;
+	if (source) return source;
+	return defaultSource;
+}
+export { getPageDataSource };

package/dist/ui/packages/devtools/ui/src/devtools/rpc.qwik.mjs

@@ -0,0 +1,71 @@
+import { __toESM } from "../../../../../_virtual/_rolldown/runtime.qwik.mjs";
+import { require_browser } from "../../../../../node_modules/.pnpm/debug@4.4.3_supports-color@10.2.2/node_modules/debug/src/browser.qwik.mjs";
+import { tryCreateHotContext } from "../../../../../node_modules/.pnpm/vite-hot-client@2.1.0_vite@8.2.1_@types_node@24.10.0_esbuild@0.28.2_jiti@2.6.1_terser@5.46.0_tsx@4.21.0_yaml@2.8.3_/node_modules/vite-hot-client/dist/index.qwik.mjs";
+import { noSerialize } from "@qwik.dev/core";
+import { QWIK_DEVTOOLS_GLOBAL, RouteType, createClientRpc, getQwikDevtoolsGlobal, getViteClientRpc, setViteClientContext } from "@qwik.dev/devtools/kit";
+var log = (0, (/* @__PURE__ */ __toESM(require_browser(), 1)).default)("qwik:devtools:devtools");
+function getClientRpcFunctions() {
+	return { healthCheck: () => true };
+}
+function toDevtoolsRoutes(routes) {
+	const directories = (routes?.children || []).filter((child) => child.type === RouteType.DIRECTORY);
+	return [{
+		relativePath: "",
+		name: "index",
+		type: RouteType.DIRECTORY,
+		path: "",
+		isSymbolicLink: false,
+		children: void 0
+	}, ...directories];
+}
+async function connectRpc() {
+	const hot = await tryCreateHotContext(void 0, ["/", "/"]);
+	if (!hot) throw new Error("Vite Hot Context not connected");
+	setViteClientContext(hot);
+	createClientRpc(getClientRpcFunctions());
+	return getViteClientRpc();
+}
+var rpcPromise;
+function getDevtoolsRpc() {
+	rpcPromise ?? (rpcPromise = connectRpc());
+	return rpcPromise;
+}
+/**
+* Default data provider that loads data via Vite HMR RPC. Used when the devtools UI runs as an
+* in-app overlay.
+*/ var viteDataProvider = { async loadData(state) {
+	const rpc = await getDevtoolsRpc();
+	const primaryDataPromise = Promise.allSettled([
+		rpc.getAssetsFromPublicDir(),
+		rpc.getComponents(),
+		rpc.getRoutes(),
+		rpc.getQwikPackages()
+	]);
+	state.isLoadingDependencies = true;
+	const dependenciesPromise = rpc.getAllDependencies().then((allDependencies) => {
+		state.allDependencies = allDependencies;
+	}).catch((error) => {
+		log("Failed to load all dependencies:", error);
+	}).finally(() => {
+		state.isLoadingDependencies = false;
+	});
+	const [assetsResult, componentsResult, routesResult, packagesResult] = await primaryDataPromise;
+	if (assetsResult.status === "fulfilled") state.assets = assetsResult.value;
+	else log("Failed to load assets:", assetsResult.reason);
+	if (componentsResult.status === "fulfilled") state.components = componentsResult.value;
+	else log("Failed to load components:", componentsResult.reason);
+	if (routesResult.status === "fulfilled") state.routes = noSerialize(toDevtoolsRoutes(routesResult.value));
+	else log("Failed to load routes:", routesResult.reason);
+	if (packagesResult.status === "fulfilled") state.npmPackages = packagesResult.value;
+	else log("Failed to load Qwik packages:", packagesResult.reason);
+	await dependenciesPromise;
+} };
+/**
+* Load devtools data using the active data provider.
+*
+* When the Qwik DevTools root has a `dataProvider` (e.g. from the browser extension entry point),
+* that provider is used. Otherwise, falls back to the default Vite HMR RPC provider.
+*/ async function loadDevtoolsData(state) {
+	await (getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.dataProvider] ?? viteDataProvider).loadData(state);
+}
+export { getDevtoolsRpc, loadDevtoolsData };

package/dist/ui/packages/devtools/ui/src/devtools/sidebar-tabs.qwik.mjs

@@ -0,0 +1,73 @@
+import { devtoolsTabs } from "./tabs.qwik.mjs";
+var STORAGE_KEY = "qwik-devtools:visible-tabs";
+/** Tab configs keyed by id, for resolving an ordered id list. */ var tabsById = new Map(devtoolsTabs.map((tab) => [tab.id, tab]));
+var KNOWN_TAB_IDS = new Set(devtoolsTabs.map((tab) => tab.id));
+function isDevtoolsTabId(id) {
+	return KNOWN_TAB_IDS.has(id);
+}
+/** Default sidebar configuration: every tab visible, in registry order. */ function getDefaultVisibleTabIds() {
+	return devtoolsTabs.map((tab) => tab.id);
+}
+/** Tabs not currently visible (reachable via the More panel), in registry order. */ function getAvailableTabIds(visibleTabIds) {
+	const visible = new Set(visibleTabIds);
+	return devtoolsTabs.map((tab) => tab.id).filter((id) => !visible.has(id));
+}
+/** Moves `draggedId` to sit just before `targetId` in the list, returning a new list. */ function reorderVisibleTabs(visibleTabIds, draggedId, targetId) {
+	if (draggedId === targetId) return visibleTabIds;
+	const without = visibleTabIds.filter((id) => id !== draggedId);
+	const targetIndex = without.indexOf(targetId);
+	if (targetIndex < 0) return visibleTabIds;
+	without.splice(targetIndex, 0, draggedId);
+	return without;
+}
+/** Adds (appends) or removes a tab from the ordered visible list, returning a new list. */ function setTabVisible(visibleTabIds, id, visible) {
+	if (visible) return visibleTabIds.includes(id) ? visibleTabIds : [...visibleTabIds, id];
+	return visibleTabIds.filter((tabId) => tabId !== id);
+}
+/** Drops ids no longer in the registry and de-dupes, preserving the stored order. */ function normalizeVisibleTabIds(ids) {
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const id of ids) if (isDevtoolsTabId(id) && !seen.has(id)) {
+		seen.add(id);
+		result.push(id);
+	}
+	return result;
+}
+/**
+* Reads the persisted visible-tabs list, or null when nothing valid is stored so the caller falls
+* back to the default. An empty list is honored (the user hid every tab). Tabs added to the
+* registry since the last save stay hidden (reachable via the More panel) until opted in.
+*/ function loadVisibleTabIds() {
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) return null;
+		const parsed = JSON.parse(raw);
+		if (!Array.isArray(parsed)) return null;
+		return normalizeVisibleTabIds(parsed.filter((value) => typeof value === "string"));
+	} catch {
+		return null;
+	}
+}
+/** Persists the visible-tabs list. Storage failures (private mode, quota) are ignored. */ function saveVisibleTabIds(visibleTabIds) {
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(visibleTabIds));
+	} catch {}
+}
+/** Resolves an ordered id list to its tab configs, dropping unknown ids. */ function resolveTabs(ids) {
+	const tabs = [];
+	for (const id of ids) {
+		const tab = tabsById.get(id);
+		if (tab) tabs.push(tab);
+	}
+	return tabs;
+}
+/** Hidden tabs resolved to their configs (the More panel contents), in registry order. */ function getAvailableTabs(visibleTabIds) {
+	return resolveTabs(getAvailableTabIds(visibleTabIds));
+}
+/**
+* Resolves the ordered visible ids to their tab configs, dropping, in the extension, tabs that
+* require the Vite plugin.
+*/ function getVisibleTabs(visibleTabIds, isExtension) {
+	return resolveTabs(visibleTabIds).filter((tab) => !(isExtension && tab.viteOnly));
+}
+export { getAvailableTabIds, getAvailableTabs, getDefaultVisibleTabIds, getVisibleTabs, loadVisibleTabIds, reorderVisibleTabs, resolveTabs, saveVisibleTabIds, setTabVisible };

package/dist/ui/packages/devtools/ui/src/devtools/state.qwik.mjs

@@ -0,0 +1,28 @@
+import { getDefaultVisibleTabIds } from "./sidebar-tabs.qwik.mjs";
+function createDevtoolsState(opts) {
+	return {
+		isOpen: false,
+		isPanelFullscreen: false,
+		activeTab: "overview",
+		npmPackages: [],
+		assets: [],
+		components: [],
+		routes: void 0,
+		allDependencies: [],
+		isLoadingDependencies: false,
+		panelBounds: {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		},
+		lastPanelBounds: null,
+		visibleTabIds: getDefaultVisibleTabIds(),
+		isCustomizeOpen: false,
+		isPaletteOpen: false,
+		componentReveal: null,
+		clearPerformanceRequested: false,
+		isExtension: opts?.isExtension ?? false
+	};
+}
+export { createDevtoolsState };

package/dist/ui/packages/devtools/ui/src/devtools/tabs.qwik.mjs

@@ -0,0 +1,60 @@
+import { IconArrowDownTray, IconBoltOutline, IconChartBarOutline, IconClockOutline, IconCodeBracketSolid, IconCubeOutline, IconDiagram3, IconFolderTree, IconMegaphoneMini, IconPhotoOutline } from "../components/Icons/Icons.qwik.mjs";
+import { _jsxSorted } from "@qwik.dev/core";
+var devtoolsTabs = [
+	{
+		id: "overview",
+		title: "Overview",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconBoltOutline, null, { class: "h-6 w-6" }, null, 3, "0V_0")
+	},
+	{
+		id: "packages",
+		title: "Packages",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconCubeOutline, null, { class: "h-6 w-6" }, null, 3, "0V_1"),
+		viteOnly: true
+	},
+	{
+		id: "renderTree",
+		title: "Render Tree",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconDiagram3, null, { class: "h-6 w-6" }, null, 3, "0V_2")
+	},
+	{
+		id: "routes",
+		title: "Routes",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconFolderTree, null, { class: "h-6 w-6" }, null, 3, "0V_3"),
+		viteOnly: true
+	},
+	{
+		id: "assets",
+		title: "Assets",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconPhotoOutline, null, { class: "h-6 w-6" }, null, 3, "0V_4"),
+		viteOnly: true
+	},
+	{
+		id: "inspect",
+		title: "Inspect",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconMegaphoneMini, null, { class: "h-6 w-6" }, null, 3, "0V_5"),
+		viteOnly: true
+	},
+	{
+		id: "codeBreak",
+		title: "Code Break",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconCodeBracketSolid, null, { class: "h-6 w-6" }, null, 3, "0V_6")
+	},
+	{
+		id: "performance",
+		title: "Performance",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconClockOutline, null, { class: "h-6 w-6" }, null, 3, "0V_7")
+	},
+	{
+		id: "preloads",
+		title: "Preloads",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconArrowDownTray, null, { class: "h-6 w-6" }, null, 3, "0V_8")
+	},
+	{
+		id: "buildAnalysis",
+		title: "Build Analysis",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconChartBarOutline, null, { class: "h-6 w-6" }, null, 3, "0V_9"),
+		viteOnly: true
+	}
+];
+export { devtoolsTabs };

package/dist/ui/packages/devtools/ui/src/features/Assets/Assets.qwik.mjs

@@ -0,0 +1,16 @@
+import { _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var Assets = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3" }, _rawProps.state.assets?.map((asset) => {
+		const isImage = asset.path.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
+		const fileExt = asset.path.split(".").pop()?.toUpperCase();
+		return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg hover:bg-card-item-hover-bg overflow-hidden rounded-xl border transition-all duration-200" }, [isImage ? /*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 aspect-square overflow-hidden" }, /*#__PURE__*/ _jsxSorted("img", {
+			alt: _wrapProp(asset, "path"),
+			src: _wrapProp(asset, "publicPath")
+		}, {
+			width: 176,
+			height: 176,
+			class: "h-full w-full object-cover"
+		}, null, 3, null), 1, "LV_0") : /*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 flex aspect-square items-center justify-center" }, /*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground font-mono text-2xl" }, fileExt, 1, null), 1, "LV_1"), /*#__PURE__*/ _jsxSorted("div", null, { class: "space-y-2 p-4" }, [/*#__PURE__*/ _jsxSorted("div", { title: _wrapProp(asset, "path") }, { class: "truncate text-sm" }, asset.path.split("/").pop(), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground flex items-center justify-between text-xs" }, [/*#__PURE__*/ _jsxSorted("span", null, null, [(asset.size / 1024).toFixed(2), " KB"], 1, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "bg-foreground/5 rounded-full px-2 py-1" }, fileExt, 1, null)], 1, null)], 1, null)], 1, asset.filePath);
+	}), 1, "LV_2");
+}, "Assets_component_3McbsijSMd8"));
+export { Assets };