@qwik.dev/devtools 0.3.0-beta.3 → 2.0.0-beta.45

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

@@ -1,5 +1,4 @@
-import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
-import { QwikLogo, IconMonitor } from "../components/Icons/Icons.qwik.mjs";
+import { IconMonitor, QwikLogo } from "../components/Icons/Icons.qwik.mjs";
 import { TabContent } from "../components/TabContent/TabContent.qwik.mjs";
 import { TabTitle } from "../components/TabTitle/TabTitle.qwik.mjs";
 import { Assets } from "../features/Assets/Assets.qwik.mjs";
@@ -13,198 +12,91 @@ import { Performance } from "../features/Performance/Performance.qwik.mjs";
 import { Preloads } from "../features/Preloads/Preloads.qwik.mjs";
 import { RenderTree } from "../features/RenderTree/RenderTree.qwik.mjs";
 import { Routes } from "../features/Routes/Routes.qwik.mjs";
-const _hf0 = (p0) => p0.state.isExtension ? "Component Tree" : "Render Tree";
+import { _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
 function formatAssetSummary(assets) {
-  const totalSizeInKb = assets.reduce((totalSize, asset) => totalSize + asset.size, 0) / 1024;
-  return {
-    count: assets.length,
-    totalSizeInKb: totalSizeInKb.toFixed(2)
-  };
+	const totalSizeInKb = assets.reduce((totalSize, asset) => totalSize + asset.size, 0) / 1024;
+	return {
+		count: assets.length,
+		totalSizeInKb: totalSizeInKb.toFixed(2)
+	};
 }
-const ViteOnlyPlaceholder = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "flex h-full flex-col items-center justify-center gap-4 px-8 text-center"
-  }, [
-    /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "text-muted-foreground/40 text-4xl"
-    }, /* @__PURE__ */ _jsxSorted(IconMonitor, null, {
-      class: "h-12 w-12"
-    }, null, 3, "lf_0"), 1, null),
-    /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "text-muted-foreground text-sm"
-    }, [
-      /* @__PURE__ */ _jsxSorted("span", null, {
-        class: "font-semibold"
-      }, _wrapProp(_rawProps, "feature"), 1, null),
-      " is only available in the in-app overlay."
-    ], 1, null),
-    /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "text-muted-foreground/50 max-w-xs text-xs leading-relaxed"
-    }, [
-      "This feature requires direct access to the Vite dev server. Add",
-      " ",
-      /* @__PURE__ */ _jsxSorted("code", null, {
-        class: "bg-card-item-bg text-foreground/70 rounded px-1.5 py-0.5"
-      }, "qwikDevtools()", 3, null),
-      " ",
-      "to your Vite config to use it in the overlay during development."
-    ], 3, null)
-  ], 1, "lf_1");
+var ViteOnlyPlaceholder = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "flex h-full flex-col items-center justify-center gap-4 px-8 text-center" }, [
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground/40 text-4xl" }, /*#__PURE__*/ _jsxSorted(IconMonitor, null, { class: "h-12 w-12" }, null, 3, "L0_0"), 1, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground text-sm" }, [/*#__PURE__*/ _jsxSorted("span", null, { class: "font-semibold" }, _wrapProp(_rawProps, "feature"), 1, null), " is only available in the in-app overlay."], 1, null),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground/50 max-w-xs text-xs leading-relaxed" }, [
+			"This feature requires direct access to the Vite dev server. Add",
+			" ",
+			/*#__PURE__*/ _jsxSorted("code", null, { class: "bg-card-item-bg text-foreground/70 rounded px-1.5 py-0.5" }, "qwikDevtools()", 3, null),
+			" ",
+			"to your Vite config to use it in the overlay during development."
+		], 3, null)
+	], 1, "L0_1");
 }, "ViteOnlyPlaceholder_component_AIuuVPTVfFw"));
-const DevtoolsContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  const assetSummary = formatAssetSummary(_rawProps.state.assets);
-  switch (_rawProps.state.activeTab) {
-    case "overview":
-      return /* @__PURE__ */ _jsxSorted(TabContent, null, null, [
-        /* @__PURE__ */ _jsxSorted("div", {
-          "q:slot": "title"
-        }, {
-          class: "flex items-center gap-3"
-        }, [
-          /* @__PURE__ */ _jsxSorted(QwikLogo, null, {
-            title: "Qwik Logo",
-            class: "h-8 w-8"
-          }, null, 3, "lf_2"),
-          /* @__PURE__ */ _jsxSorted("h1", null, {
-            class: "text-2xl font-semibold"
-          }, "Qwik DevTools", 3, null)
-        ], 1, null),
-        /* @__PURE__ */ _jsxSorted(Overview, null, {
-          state: _wrapProp(_rawProps, "state"),
-          "q:slot": "content"
-        }, null, 3, "lf_3")
-      ], 1, "lf_4");
-    case "assets":
-      return /* @__PURE__ */ _jsxSorted(TabContent, null, null, [
-        /* @__PURE__ */ _jsxSorted(TabTitle, null, {
-          title: "Public Assets",
-          "q:slot": "title"
-        }, null, 3, "lf_5"),
-        _rawProps.state.isExtension ? /* @__PURE__ */ _jsxSorted(ViteOnlyPlaceholder, null, {
-          feature: "Assets",
-          "q:slot": "content"
-        }, null, 3, "lf_6") : /* @__PURE__ */ _jsxSorted("div", {
-          "q:slot": "content"
-        }, {
-          class: "flex flex-col gap-4"
-        }, [
-          /* @__PURE__ */ _jsxSorted("div", null, {
-            class: "text-muted-foreground flex gap-4 text-sm"
-          }, [
-            /* @__PURE__ */ _jsxSorted("span", null, null, [
-              "Total Size: ",
-              _wrapProp(assetSummary, "totalSizeInKb"),
-              " KB"
-            ], 1, null),
-            /* @__PURE__ */ _jsxSorted("span", null, null, [
-              "Count: ",
-              _wrapProp(assetSummary, "count")
-            ], 1, null)
-          ], 1, null),
-          /* @__PURE__ */ _jsxSorted(Assets, null, {
-            state: _wrapProp(_rawProps, "state")
-          }, null, 3, "lf_7")
-        ], 1, "lf_8")
-      ], 1, "lf_9");
-    case "packages":
-      return /* @__PURE__ */ _jsxSorted(TabContent, null, null, [
-        /* @__PURE__ */ _jsxSorted(TabTitle, null, {
-          title: "Project Dependencies",
-          "q:slot": "title"
-        }, null, 3, "lf_10"),
-        _rawProps.state.isExtension ? /* @__PURE__ */ _jsxSorted(ViteOnlyPlaceholder, null, {
-          feature: "Packages",
-          "q:slot": "content"
-        }, null, 3, "lf_11") : /* @__PURE__ */ _jsxSorted(Packages, null, {
-          state: _wrapProp(_rawProps, "state"),
-          "q:slot": "content"
-        }, null, 3, "lf_12")
-      ], 1, "lf_13");
-    case "routes":
-      return /* @__PURE__ */ _jsxSorted(TabContent, null, null, [
-        /* @__PURE__ */ _jsxSorted(TabTitle, null, {
-          title: "Application Routes",
-          "q:slot": "title"
-        }, null, 3, "lf_14"),
-        _rawProps.state.isExtension ? /* @__PURE__ */ _jsxSorted(ViteOnlyPlaceholder, null, {
-          feature: "Routes",
-          "q:slot": "content"
-        }, null, 3, "lf_15") : /* @__PURE__ */ _jsxSorted(Routes, null, {
-          state: _wrapProp(_rawProps, "state"),
-          "q:slot": "content"
-        }, null, 3, "lf_16")
-      ], 1, "lf_17");
-    case "inspect":
-      return /* @__PURE__ */ _jsxSorted(TabContent, null, null, _rawProps.state.isExtension ? /* @__PURE__ */ _jsxSorted(ViteOnlyPlaceholder, null, {
-        feature: "Inspect",
-        "q:slot": "content"
-      }, null, 3, "lf_18") : /* @__PURE__ */ _jsxSorted(Inspect, null, {
-        "q:slot": "content"
-      }, null, 3, "lf_19"), 1, "lf_20");
-    case "renderTree":
-      return /* @__PURE__ */ _jsxSorted(TabContent, null, null, [
-        /* @__PURE__ */ _jsxSorted(TabTitle, null, {
-          title: _fnSignal(_hf0, [
-            _rawProps
-          ]),
-          "q:slot": "title"
-        }, null, 3, "lf_21"),
-        _rawProps.state.isExtension ? /* @__PURE__ */ _jsxSorted(HookTree, null, {
-          state: _wrapProp(_rawProps, "state"),
-          "q:slot": "content"
-        }, null, 3, "lf_22") : /* @__PURE__ */ _jsxSorted(RenderTree, null, {
-          state: _wrapProp(_rawProps, "state"),
-          "q:slot": "content"
-        }, null, 3, "lf_23")
-      ], 1, "lf_24");
-    case "codeBreak":
-      return /* @__PURE__ */ _jsxSorted(TabContent, null, null, [
-        /* @__PURE__ */ _jsxSorted(TabTitle, null, {
-          title: "Code Break",
-          "q:slot": "title"
-        }, null, 3, "lf_25"),
-        /* @__PURE__ */ _jsxSorted(CodeBreak, null, {
-          "q:slot": "content"
-        }, null, 3, "lf_26")
-      ], 1, "lf_27");
-    case "performance":
-      return /* @__PURE__ */ _jsxSorted(TabContent, null, null, [
-        /* @__PURE__ */ _jsxSorted(TabTitle, null, {
-          title: "Performance",
-          "q:slot": "title"
-        }, null, 3, "lf_28"),
-        /* @__PURE__ */ _jsxSorted(Performance, null, {
-          state: _wrapProp(_rawProps, "state"),
-          "q:slot": "content"
-        }, null, 3, "lf_29")
-      ], 1, "lf_30");
-    case "preloads":
-      return /* @__PURE__ */ _jsxSorted(TabContent, null, null, [
-        /* @__PURE__ */ _jsxSorted(TabTitle, null, {
-          title: "Preloads",
-          "q:slot": "title"
-        }, null, 3, "lf_31"),
-        /* @__PURE__ */ _jsxSorted(Preloads, null, {
-          "q:slot": "content"
-        }, null, 3, "lf_32")
-      ], 1, "lf_33");
-    case "buildAnalysis":
-      return /* @__PURE__ */ _jsxSorted(TabContent, null, null, [
-        /* @__PURE__ */ _jsxSorted(TabTitle, null, {
-          title: "Build Analysis",
-          "q:slot": "title"
-        }, null, 3, "lf_34"),
-        _rawProps.state.isExtension ? /* @__PURE__ */ _jsxSorted(ViteOnlyPlaceholder, null, {
-          feature: "Build Analysis",
-          "q:slot": "content"
-        }, null, 3, "lf_35") : /* @__PURE__ */ _jsxSorted(BuildAnalysis, null, {
-          "q:slot": "content"
-        }, null, 3, "lf_36")
-      ], 1, "lf_37");
-    default:
-      return null;
-  }
+var DevtoolsContent = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(({ state }) => {
+	const isExtensionMode = state.isExtension;
+	const assetSummary = formatAssetSummary(state.assets);
+	switch (state.activeTab) {
+		case "overview": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted("div", null, {
+			class: "flex items-center gap-3",
+			"q:slot": "title"
+		}, [/*#__PURE__*/ _jsxSorted(QwikLogo, null, {
+			title: "Qwik Logo",
+			class: "h-8 w-8"
+		}, null, 3, "L0_2"), /*#__PURE__*/ _jsxSorted("h1", null, { class: "text-2xl font-semibold" }, "Qwik DevTools", 3, null)], 1, null), /*#__PURE__*/ _jsxSorted(Overview, { state }, { "q:slot": "content" }, null, 3, "L0_3")], 1, "L0_4");
+		case "assets": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
+			title: "Public Assets",
+			"q:slot": "title"
+		}, null, 3, "L0_5"), isExtensionMode ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
+			feature: "Assets",
+			"q:slot": "content"
+		}, null, 3, "L0_6") : /*#__PURE__*/ _jsxSorted("div", null, {
+			class: "flex flex-col gap-4",
+			"q:slot": "content"
+		}, [/*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground flex gap-4 text-sm" }, [/*#__PURE__*/ _jsxSorted("span", null, null, [
+			"Total Size: ",
+			_wrapProp(assetSummary, "totalSizeInKb"),
+			" KB"
+		], 1, null), /*#__PURE__*/ _jsxSorted("span", null, null, ["Count: ", _wrapProp(assetSummary, "count")], 1, null)], 1, null), /*#__PURE__*/ _jsxSorted(Assets, { state }, null, null, 3, "L0_7")], 1, "L0_8")], 1, "L0_9");
+		case "packages": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
+			title: "Project Dependencies",
+			"q:slot": "title"
+		}, null, 3, "L0_10"), isExtensionMode ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
+			feature: "Packages",
+			"q:slot": "content"
+		}, null, 3, "L0_11") : /*#__PURE__*/ _jsxSorted(Packages, { state }, { "q:slot": "content" }, null, 3, "L0_12")], 1, "L0_13");
+		case "routes": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
+			title: "Application Routes",
+			"q:slot": "title"
+		}, null, 3, "L0_14"), isExtensionMode ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
+			feature: "Routes",
+			"q:slot": "content"
+		}, null, 3, "L0_15") : /*#__PURE__*/ _jsxSorted(Routes, { state }, { "q:slot": "content" }, null, 3, "L0_16")], 1, "L0_17");
+		case "inspect": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, isExtensionMode ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
+			feature: "Inspect",
+			"q:slot": "content"
+		}, null, 3, "L0_18") : /*#__PURE__*/ _jsxSorted(Inspect, null, { "q:slot": "content" }, null, 3, "L0_19"), 1, "L0_20");
+		case "renderTree": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, { title: isExtensionMode ? "Component Tree" : "Render Tree" }, { "q:slot": "title" }, null, 3, "L0_21"), isExtensionMode ? /*#__PURE__*/ _jsxSorted(HookTree, { state }, { "q:slot": "content" }, null, 3, "L0_22") : /*#__PURE__*/ _jsxSorted(RenderTree, { state }, { "q:slot": "content" }, null, 3, "L0_23")], 1, "L0_24");
+		case "codeBreak": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
+			title: "Code Break",
+			"q:slot": "title"
+		}, null, 3, "L0_25"), /*#__PURE__*/ _jsxSorted(CodeBreak, null, { "q:slot": "content" }, null, 3, "L0_26")], 1, "L0_27");
+		case "performance": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
+			title: "Performance",
+			"q:slot": "title"
+		}, null, 3, "L0_28"), /*#__PURE__*/ _jsxSorted(Performance, { state }, { "q:slot": "content" }, null, 3, "L0_29")], 1, "L0_30");
+		case "preloads": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
+			title: "Preloads",
+			"q:slot": "title"
+		}, null, 3, "L0_31"), /*#__PURE__*/ _jsxSorted(Preloads, null, { "q:slot": "content" }, null, 3, "L0_32")], 1, "L0_33");
+		case "buildAnalysis": return /*#__PURE__*/ _jsxSorted(TabContent, null, null, [/*#__PURE__*/ _jsxSorted(TabTitle, null, {
+			title: "Build Analysis",
+			"q:slot": "title"
+		}, null, 3, "L0_34"), isExtensionMode ? /*#__PURE__*/ _jsxSorted(ViteOnlyPlaceholder, null, {
+			feature: "Build Analysis",
+			"q:slot": "content"
+		}, null, 3, "L0_35") : /*#__PURE__*/ _jsxSorted(BuildAnalysis, null, { "q:slot": "content" }, null, 3, "L0_36")], 1, "L0_37");
+		default: return null;
+	}
 }, "DevtoolsContent_component_38oZRY07A7Y"));
-export {
-  DevtoolsContent
-};
+export { DevtoolsContent };

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

@@ -1,105 +1,55 @@
-import { componentQrl, inlinedQrl, useSignal, _jsxSorted, _wrapProp, _captures, _fnSignal, Slot } from "@qwik.dev/core";
-import { Fragment } from "@qwik.dev/core/jsx-runtime";
+import { IconAdjustmentsHorizontal, IconEllipsisHorizontal } from "../components/Icons/Icons.qwik.mjs";
+import { getAvailableTabs, getVisibleTabs } from "./sidebar-tabs.qwik.mjs";
 import { Tab } from "../components/Tab/Tab.qwik.mjs";
 import { QwikThemeToggle } from "../components/ThemeToggle/QwikThemeToggle.qwik.mjs";
-import { IconEllipsisHorizontal, IconAdjustmentsHorizontal } from "../components/Icons/Icons.qwik.mjs";
-import { getAvailableTabs, getVisibleTabs } from "./sidebar-tabs.qwik.mjs";
-const _hf0 = (p0, p1) => p1.value || p0;
-const SidebarIconButton = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => /* @__PURE__ */ _jsxSorted("button", {
-  "aria-label": _wrapProp(_rawProps, "title"),
-  class: [
-    "flex h-11 w-11 items-center justify-center rounded-xl transition-all",
-    _rawProps.active ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
-  ],
-  "q-e:click": _rawProps.onClick$,
-  title: _wrapProp(_rawProps, "title")
-}, null, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Hx_0"), 0, "Hx_1"), "SidebarIconButton_component_aIUV3qUcOzY"));
-const DevtoolsSidebar = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  const isMoreOpen = useSignal(false);
-  const moreTabs = getAvailableTabs(_rawProps.state.visibleTabIds);
-  const isMoreActive = moreTabs.some((tab) => tab.id === _rawProps.state.activeTab);
-  return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "glass-bg border-glass-border shadow-r flex h-full w-16 flex-col items-center justify-start gap-3 border-r p-3 md:w-20"
-  }, [
-    getVisibleTabs(_rawProps.state.visibleTabIds, _rawProps.state.isExtension).map((tab) => /* @__PURE__ */ _jsxSorted(Tab, {
-      id: _wrapProp(tab, "id"),
-      title: _wrapProp(tab, "title")
-    }, {
-      state: _wrapProp(_rawProps, "state")
-    }, tab.renderIcon(), 1, tab.id)),
-    /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "mt-auto flex flex-col items-center gap-2"
-    }, [
-      moreTabs.length > 0 && /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "relative"
-      }, [
-        /* @__PURE__ */ _jsxSorted(SidebarIconButton, {
-          onClick$: /* @__PURE__ */ inlinedQrl(() => {
-            const isMoreOpen2 = _captures[0];
-            return isMoreOpen2.value = !isMoreOpen2.value;
-          }, "DevtoolsSidebar_component_div_div_div_SidebarIconButton_onClick_Ehnn3kErcX8", [
-            isMoreOpen
-          ])
-        }, {
-          title: "More tools",
-          active: _fnSignal(_hf0, [
-            isMoreActive,
-            isMoreOpen
-          ])
-        }, /* @__PURE__ */ _jsxSorted(IconEllipsisHorizontal, null, {
-          class: "h-6 w-6"
-        }, null, 3, "Hx_2"), 0, "Hx_3"),
-        isMoreOpen.value && /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
-          /* @__PURE__ */ _jsxSorted("div", {
-            "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, isMoreOpen2) => isMoreOpen2.value = false, "DevtoolsSidebar_component_div_div_div_Fragment_div_q_e_click_90NEvxKYiKk").m(),
-            "q:p": isMoreOpen
-          }, {
-            class: "fixed inset-0 z-20"
-          }, null, 6, null),
-          /* @__PURE__ */ _jsxSorted("div", null, {
-            class: "glass-panel absolute bottom-0 left-full z-30 ml-2 flex min-w-40 flex-col gap-1 rounded-xl p-2"
-          }, moreTabs.map((tab) => {
-            const id = tab.id;
-            const qrl_0 = /* @__PURE__ */ inlinedQrl((_, _1, id2) => {
-              const _rawProps2 = _captures[0], isMoreOpen2 = _captures[1];
-              _rawProps2.state.activeTab = id2;
-              isMoreOpen2.value = false;
-            }, "DevtoolsSidebar_component_div_div_div_Fragment_div_button_q_e_click_UeLOkJekfd8", [
-              _rawProps,
-              isMoreOpen
-            ]).m();
-            return /* @__PURE__ */ _jsxSorted("button", {
-              "q-e:click": qrl_0,
-              "q:p": id
-            }, {
-              class: "text-muted-foreground hover:bg-card-item-hover-bg hover:text-foreground flex items-center gap-3 rounded-lg px-2 py-1.5 text-left"
-            }, [
-              tab.renderIcon(),
-              /* @__PURE__ */ _jsxSorted("span", null, {
-                class: "text-foreground text-sm"
-              }, _wrapProp(tab, "title"), 1, null)
-            ], 4, id);
-          }), 1, null)
-        ], 1, "Hx_4")
-      ], 1, "Hx_5"),
-      !_rawProps.state.isExtension && /* @__PURE__ */ _jsxSorted(SidebarIconButton, {
-        onClick$: /* @__PURE__ */ inlinedQrl(() => {
-          const _rawProps2 = _captures[0];
-          return _rawProps2.state.isCustomizeOpen = true;
-        }, "DevtoolsSidebar_component_div_div_SidebarIconButton_onClick_h0rhNZi5Tq0", [
-          _rawProps
-        ])
-      }, {
-        title: "Customize Tabs"
-      }, /* @__PURE__ */ _jsxSorted(IconAdjustmentsHorizontal, null, {
-        class: "h-6 w-6"
-      }, null, 3, "Hx_6"), 0, "Hx_7"),
-      /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "mb-2 opacity-80 transition-opacity hover:opacity-100"
-      }, /* @__PURE__ */ _jsxSorted(QwikThemeToggle, null, null, null, 3, "Hx_8"), 1, null)
-    ], 1, null)
-  ], 1, "Hx_9");
+import { Slot, _captures, _fnSignal, _jsxSorted, _wrapProp, componentQrl, inlinedQrl, useSignal } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+var _hf0 = (p0, p1) => p1.value || p0;
+var _hf0_str = "p1.value||p0";
+/** A fixed bottom-action button matching the sidebar tab shell (Customize, More). */
+var SidebarIconButton = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => /*#__PURE__*/ _jsxSorted("button", {
+	"aria-label": _wrapProp(_rawProps, "title"),
+	class: ["flex h-11 w-11 items-center justify-center rounded-xl transition-all", _rawProps.active ? "bg-primary/15 text-primary" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"],
+	"q-e:click": _rawProps.onClick$,
+	title: _wrapProp(_rawProps, "title")
+}, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "BY_0"), 0, "BY_1"), "SidebarIconButton_component_aIUV3qUcOzY"));
+var DevtoolsSidebar = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const isMoreOpen = useSignal(false);
+	const moreTabs = getAvailableTabs(_rawProps.state.visibleTabIds);
+	const isMoreActive = moreTabs.some((tab) => tab.id === _rawProps.state.activeTab);
+	const DevtoolsSidebar_component_div_div_div_Fragment_div_button_q_e_click_UeLOkJekfd8 = /*#__PURE__*/ inlinedQrl((_, _1, id) => {
+		const _rawProps = _captures[0], isMoreOpen = _captures[1];
+		_rawProps.state.activeTab = id;
+		isMoreOpen.value = false;
+	}, "DevtoolsSidebar_component_div_div_div_Fragment_div_button_q_e_click_UeLOkJekfd8", [_rawProps, isMoreOpen]).m();
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "glass-bg border-glass-border shadow-r flex h-full w-16 flex-col items-center justify-start gap-3 border-r p-3 md:w-20" }, [getVisibleTabs(_rawProps.state.visibleTabIds, _rawProps.state.isExtension).map((tab) => /*#__PURE__*/ _jsxSorted(Tab, {
+		id: _wrapProp(tab, "id"),
+		title: _wrapProp(tab, "title")
+	}, { state: _wrapProp(_rawProps, "state") }, tab.renderIcon(), 1, tab.id)), /*#__PURE__*/ _jsxSorted("div", null, { class: "mt-auto flex flex-col items-center gap-2" }, [
+		moreTabs.length > 0 && /*#__PURE__*/ _jsxSorted("div", null, { class: "relative" }, [/*#__PURE__*/ _jsxSorted(SidebarIconButton, { active: _fnSignal(_hf0, [isMoreActive, isMoreOpen], _hf0_str) }, {
+			title: "More tools",
+			onClick$: /*#__PURE__*/ inlinedQrl(() => {
+				const isMoreOpen = _captures[0];
+				return isMoreOpen.value = !isMoreOpen.value;
+			}, "DevtoolsSidebar_component_div_div_div_SidebarIconButton_onClick_Ehnn3kErcX8", [isMoreOpen])
+		}, /*#__PURE__*/ _jsxSorted(IconEllipsisHorizontal, null, { class: "h-6 w-6" }, null, 3, "BY_2"), 1, "BY_3"), isMoreOpen.value && /*#__PURE__*/ _jsxSorted(Fragment, null, null, [/*#__PURE__*/ _jsxSorted("div", null, {
+			class: "fixed inset-0 z-20",
+			"q-e:click": /*#__PURE__*/ inlinedQrl(() => {
+				const isMoreOpen = _captures[0];
+				return isMoreOpen.value = false;
+			}, "DevtoolsSidebar_component_div_div_div_Fragment_div_q_e_click_90NEvxKYiKk", [isMoreOpen])
+		}, null, 3, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "glass-panel absolute bottom-0 left-full z-30 ml-2 flex min-w-40 flex-col gap-1 rounded-xl p-2" }, moreTabs.map((tab) => {
+			const id = tab.id;
+			return /*#__PURE__*/ _jsxSorted("button", {
+				"q-e:click": DevtoolsSidebar_component_div_div_div_Fragment_div_button_q_e_click_UeLOkJekfd8,
+				"q:p": id
+			}, { class: "text-muted-foreground hover:bg-card-item-hover-bg hover:text-foreground flex items-center gap-3 rounded-lg px-2 py-1.5 text-left" }, [tab.renderIcon(), /*#__PURE__*/ _jsxSorted("span", null, { class: "text-foreground text-sm" }, _wrapProp(tab, "title"), 1, null)], 4, id);
+		}), 1, null)], 1, "BY_4")], 1, "BY_5"),
+		!_rawProps.state.isExtension && /*#__PURE__*/ _jsxSorted(SidebarIconButton, { onClick$: /*#__PURE__*/ inlinedQrl(() => {
+			const _rawProps = _captures[0];
+			return _rawProps.state.isCustomizeOpen = true;
+		}, "DevtoolsSidebar_component_div_div_SidebarIconButton_onClick_h0rhNZi5Tq0", [_rawProps]) }, { title: "Customize Tabs" }, /*#__PURE__*/ _jsxSorted(IconAdjustmentsHorizontal, null, { class: "h-6 w-6" }, null, 3, "BY_6"), 0, "BY_7"),
+		/*#__PURE__*/ _jsxSorted("div", null, { class: "mb-2 opacity-80 transition-opacity hover:opacity-100" }, /*#__PURE__*/ _jsxSorted(QwikThemeToggle, null, null, null, 3, "BY_8"), 1, null)
+	], 1, null)], 1, "BY_9");
 }, "DevtoolsSidebar_component_5rrdRzaEaiE"));
-export {
-  DevtoolsSidebar
-};
+export { DevtoolsSidebar };

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

@@ -1,105 +1,58 @@
-import { componentQrl, inlinedQrl, useStore, useSignal, useVisibleTaskQrl, _captures, _jsxSorted } from "@qwik.dev/core";
-import { getQwikDevtoolsGlobal, QWIK_DEVTOOLS_GLOBAL } from "@qwik.dev/devtools/kit";
+/* empty css                  */
 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 { DevtoolsContent } from "./DevtoolsContent.qwik.mjs";
 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 { loadVisibleTabIds } from "./sidebar-tabs.qwik.mjs";
 import { ensurePreloadRuntime } from "../runtime/preloads.qwik.mjs";
-import { normalizeExcludePathnames, isExcludedPathname } from "../../../kit/src/overlay-paths.qwik.mjs";
-const 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 excludePathnames2 = _captures[0], shouldRender2 = _captures[1], state2 = _captures[2];
-    if (isExcludedPathname(location.pathname, excludePathnames2)) {
-      shouldRender2.value = false;
-      return;
-    }
-    shouldRender2.value = true;
-    if (!state2.isExtension) {
-      const storedVisibleTabIds = loadVisibleTabIds();
-      if (storedVisibleTabIds) {
-        state2.visibleTabIds = storedVisibleTabIds;
-      }
-    }
-    if (!getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.dataProvider]) {
-      ensurePreloadRuntime();
-    }
-    await loadDevtoolsData(state2);
-  }, "QwikDevtools_component_useVisibleTask_uC3JSfARmqs", [
-    excludePathnames,
-    shouldRender,
-    state
-  ]), {
-    strategy: "document-ready"
-  });
-  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ cleanup }) => {
-    const state2 = _captures[0];
-    const handleShortcut = (event) => {
-      if ((event.metaKey || event.ctrlKey) && (event.key === "k" || event.key === "K")) {
-        if (!state2.isOpen) {
-          return;
-        }
-        event.preventDefault();
-        state2.isPaletteOpen = !state2.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");
+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, "xj_0");
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "qwik-devtools" }, [/*#__PURE__*/ _jsxSorted(ThemeScript, null, null, null, 3, "xj_1"), /*#__PURE__*/ _jsxSorted(DevtoolsContainer, null, null, [/*#__PURE__*/ _jsxSorted(DevtoolsButton, null, { state }, null, 3, "xj_2"), state.isOpen && /*#__PURE__*/ _jsxSorted(DevtoolsPanel, null, { state }, [/*#__PURE__*/ _jsxSorted(DevtoolsSidebar, null, { state }, null, 3, "xj_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, "xj_4"), 1, null),
+		!state.isExtension && state.isCustomizeOpen && /*#__PURE__*/ _jsxSorted(CustomizeTabsPanel, null, { state }, null, 3, "xj_5"),
+		state.isPaletteOpen && /*#__PURE__*/ _jsxSorted(CommandPalette, null, { state }, null, 3, "xj_6")
+	], 1, null)], 1, "xj_7")], 1, "xj_8")], 1, "xj_9");
 }, "QwikDevtools_component_Jxy3rMAzQPw"));
-export {
-  QwikDevtools
-};
+export { QwikDevtools };