@qwik.dev/devtools 0.2.7 → 0.3.0-beta.3

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

@@ -0,0 +1,201 @@
+import { componentQrl, inlinedQrl, useSignal, _jsxSorted, _captures, _qrlSync, _wrapProp, _fnSignal, Slot } from "@qwik.dev/core";
+import { IconXMark, IconGripVertical } from "../components/Icons/Icons.qwik.mjs";
+import { IconButton } from "../components/IconButton/IconButton.qwik.mjs";
+import { resolveTabs, getAvailableTabs, reorderVisibleTabs, saveVisibleTabIds, setTabVisible } from "./sidebar-tabs.qwik.mjs";
+const _hf0 = (p0) => [
+  "transition-opacity",
+  p0.dragging ? "opacity-40" : ""
+];
+const _hf1 = (p0, p1) => p0.value === p1;
+const TabRow = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => /* @__PURE__ */ _jsxSorted("li", {
+  class: _fnSignal(_hf0, [
+    props
+  ]),
+  draggable: _wrapProp(props, "draggable"),
+  "q-e:dragend": props.onDragEnd$,
+  "q-e:dragenter": props.onDragEnter$,
+  "q-e:dragstart": props.onDragStart$
+}, null, /* @__PURE__ */ _jsxSorted("label", null, {
+  class: "hover:bg-card-item-hover-bg flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5"
+}, [
+  props.draggable && /* @__PURE__ */ _jsxSorted("span", null, {
+    class: "text-muted-foreground cursor-grab",
+    title: "Drag to reorder"
+  }, /* @__PURE__ */ _jsxSorted(IconGripVertical, null, {
+    class: "h-4 w-4"
+  }, null, 3, "Mh_0"), 1, "Mh_1"),
+  /* @__PURE__ */ _jsxSorted("input", {
+    checked: _wrapProp(props, "checked"),
+    "q-e:change": /* @__PURE__ */ inlinedQrl((_, el, props2) => props2.onToggle$(props2.id, el.checked), "TabRow_component_li_label_input_q_e_change_34xiTR3EoWM").m(),
+    "q:p": props
+  }, {
+    type: "checkbox",
+    class: "h-3.5 w-3.5 rounded",
+    style: {
+      accentColor: "var(--color-primary-active)"
+    }
+  }, null, 6, null),
+  /* @__PURE__ */ _jsxSorted("span", null, {
+    class: "text-muted-foreground"
+  }, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "Mh_2"), 1, null),
+  /* @__PURE__ */ _jsxSorted("span", null, {
+    class: "text-foreground text-sm"
+  }, _wrapProp(props, "title"), 1, null)
+], 1, null), 0, "Mh_3"), "TabRow_component_OkPaM0aSuSk"));
+const CustomizeTabsPanel = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  const pendingVisibleIds = useSignal([
+    ..._rawProps.state.visibleTabIds
+  ]);
+  const draggingId = useSignal(null);
+  const visibleTabs = resolveTabs(pendingVisibleIds.value);
+  const availableTabs = getAvailableTabs(pendingVisibleIds.value);
+  const toggle$ = /* @__PURE__ */ inlinedQrl((id, checked) => {
+    const pendingVisibleIds2 = _captures[0];
+    pendingVisibleIds2.value = setTabVisible(pendingVisibleIds2.value, id, checked);
+  }, "CustomizeTabsPanel_component_toggle_7ito2DKngBw", [
+    pendingVisibleIds
+  ]);
+  const endDrag$ = /* @__PURE__ */ inlinedQrl(() => {
+    const draggingId2 = _captures[0];
+    return draggingId2.value = null;
+  }, "CustomizeTabsPanel_component_endDrag_GuR2fyNtG9E", [
+    draggingId
+  ]);
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "absolute inset-0 z-30 flex items-start justify-start p-4"
+  }, [
+    /* @__PURE__ */ _jsxSorted("div", {
+      "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, _rawProps2) => _rawProps2.state.isCustomizeOpen = false, "CustomizeTabsPanel_component_div_div_q_e_click_l3t3UrZvZ6Y").m(),
+      "q:p": _rawProps
+    }, {
+      class: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity"
+    }, null, 6, null),
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "glass-panel relative z-10 flex max-h-full w-80 flex-col overflow-hidden rounded-2xl"
+    }, [
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "flex items-start justify-between p-4 pb-3"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, null, [
+          /* @__PURE__ */ _jsxSorted("h2", null, {
+            class: "text-foreground text-base font-semibold"
+          }, "Customize Tabs", 3, null),
+          /* @__PURE__ */ _jsxSorted("p", null, {
+            class: "text-muted-foreground text-xs"
+          }, "Choose which tools appear in the sidebar.", 3, null)
+        ], 3, null),
+        /* @__PURE__ */ _jsxSorted(IconButton, {
+          onClick$: /* @__PURE__ */ inlinedQrl(() => {
+            const _rawProps2 = _captures[0];
+            return _rawProps2.state.isCustomizeOpen = false;
+          }, "CustomizeTabsPanel_component_div_div_div_IconButton_onClick_BD1Lcw5n01g", [
+            _rawProps
+          ])
+        }, {
+          title: "Close"
+        }, /* @__PURE__ */ _jsxSorted(IconXMark, null, {
+          class: "h-5 w-5"
+        }, null, 3, "Mh_4"), 0, "Mh_5")
+      ], 1, null),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "custom-scrollbar flex flex-1 flex-col gap-4 overflow-y-auto px-4 pb-3"
+      }, [
+        /* @__PURE__ */ _jsxSorted("section", {
+          "q-e:dragover": _qrlSync((event) => event.preventDefault(), "event=>event.preventDefault()"),
+          "q-e:drop": _qrlSync((event) => event.preventDefault(), "event=>event.preventDefault()")
+        }, {
+          "preventdefault:dragover": true,
+          "preventdefault:drop": true
+        }, [
+          /* @__PURE__ */ _jsxSorted("h3", null, {
+            class: "text-foreground text-sm font-medium"
+          }, "Visible in Sidebar", 3, null),
+          /* @__PURE__ */ _jsxSorted("p", null, {
+            class: "text-muted-foreground text-xs"
+          }, "Drag to reorder.", 3, null),
+          /* @__PURE__ */ _jsxSorted("ul", null, {
+            class: "mt-2 flex flex-col gap-1"
+          }, visibleTabs.map((tab) => {
+            const id = tab.id;
+            return /* @__PURE__ */ _jsxSorted(TabRow, {
+              dragging: _fnSignal(_hf1, [
+                draggingId,
+                id
+              ]),
+              id,
+              onDragEnter$: /* @__PURE__ */ inlinedQrl(() => {
+                const draggingId2 = _captures[0], id2 = _captures[1], pendingVisibleIds2 = _captures[2];
+                const dragged = draggingId2.value;
+                if (dragged && dragged !== id2) {
+                  pendingVisibleIds2.value = reorderVisibleTabs(pendingVisibleIds2.value, dragged, id2);
+                }
+              }, "CustomizeTabsPanel_component_div_div_div_section_ul_TabRow_onDragEnter_yYXv7uhV1nk", [
+                draggingId,
+                id,
+                pendingVisibleIds
+              ]),
+              onDragStart$: /* @__PURE__ */ inlinedQrl(() => {
+                const draggingId2 = _captures[0], id2 = _captures[1];
+                return draggingId2.value = id2;
+              }, "CustomizeTabsPanel_component_div_div_div_section_ul_TabRow_onDragStart_j7We62qpm2E", [
+                draggingId,
+                id
+              ]),
+              title: _wrapProp(tab, "title")
+            }, {
+              checked: true,
+              onToggle$: toggle$,
+              draggable: true,
+              onDragEnd$: endDrag$
+            }, tab.renderIcon(), 0, id);
+          }), 1, null)
+        ], 0, null),
+        /* @__PURE__ */ _jsxSorted("section", null, null, [
+          /* @__PURE__ */ _jsxSorted("h3", null, {
+            class: "text-foreground text-sm font-medium"
+          }, "Available in More Panel", 3, null),
+          /* @__PURE__ */ _jsxSorted("p", null, {
+            class: "text-muted-foreground text-xs"
+          }, "Add tools to access them from the More panel.", 3, null),
+          /* @__PURE__ */ _jsxSorted("ul", null, {
+            class: "mt-2 flex flex-col gap-1"
+          }, availableTabs.map((tab) => /* @__PURE__ */ _jsxSorted(TabRow, {
+            id: _wrapProp(tab, "id"),
+            title: _wrapProp(tab, "title")
+          }, {
+            checked: false,
+            onToggle$: toggle$
+          }, tab.renderIcon(), 1, tab.id)), 1, null)
+        ], 1, null)
+      ], 1, null),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "border-glass-border flex justify-end gap-2 border-t p-4"
+      }, [
+        /* @__PURE__ */ _jsxSorted("button", {
+          "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, _rawProps2) => _rawProps2.state.isCustomizeOpen = false, "CustomizeTabsPanel_component_div_div_div_button_q_e_click_bKi0Y3F44SM").m(),
+          "q:p": _rawProps
+        }, {
+          class: "text-muted-foreground hover:text-foreground rounded-lg px-4 py-1.5 text-sm font-medium transition-colors"
+        }, "Cancel", 6, null),
+        /* @__PURE__ */ _jsxSorted("button", {
+          "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, _rawProps2, pendingVisibleIds2) => {
+            _rawProps2.state.visibleTabIds = [
+              ...pendingVisibleIds2.value
+            ];
+            saveVisibleTabIds(pendingVisibleIds2.value);
+            _rawProps2.state.isCustomizeOpen = false;
+          }, "CustomizeTabsPanel_component_div_div_div_button_q_e_click_1_QB9JB6Vwuyc").m(),
+          "q:ps": [
+            _rawProps,
+            pendingVisibleIds
+          ]
+        }, {
+          class: "bg-primary rounded-lg px-4 py-1.5 text-sm font-medium text-white transition-opacity hover:opacity-90"
+        }, "Apply", 6, null)
+      ], 1, null)
+    ], 1, null)
+  ], 1, "Mh_6");
+}, "CustomizeTabsPanel_component_sHmgDosprm8"));
+export {
+  CustomizeTabsPanel
+};

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

@@ -0,0 +1,210 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
+import { QwikLogo, IconMonitor } 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";
+import { BuildAnalysis } from "../features/BuildAnalysis/BuildAnalysis.qwik.mjs";
+import { CodeBreak } from "../features/CodeBreak/CodeBreak.qwik.mjs";
+import { HookTree } from "../features/HookTree/HookTree.qwik.mjs";
+import { Inspect } from "../features/Inspect/Inspect.qwik.mjs";
+import { Overview } from "../features/Overview/Overview.qwik.mjs";
+import { Packages } from "../features/Packages/Packages.qwik.mjs";
+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";
+function formatAssetSummary(assets) {
+  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");
+}, "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;
+  }
+}, "DevtoolsContent_component_38oZRY07A7Y"));
+export {
+  DevtoolsContent
+};

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

@@ -0,0 +1,105 @@
+import { componentQrl, inlinedQrl, useSignal, _jsxSorted, _wrapProp, _captures, _fnSignal, Slot } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+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");
+}, "DevtoolsSidebar_component_5rrdRzaEaiE"));
+export {
+  DevtoolsSidebar
+};

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

@@ -0,0 +1,105 @@
+import { componentQrl, inlinedQrl, useStore, useSignal, useVisibleTaskQrl, _captures, _jsxSorted } from "@qwik.dev/core";
+import { getQwikDevtoolsGlobal, QWIK_DEVTOOLS_GLOBAL } from "@qwik.dev/devtools/kit";
+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 { 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");
+}, "QwikDevtools_component_Jxy3rMAzQPw"));
+export {
+  QwikDevtools
+};

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

@@ -0,0 +1,36 @@
+import { componentQrl, inlinedQrl, useStore, useVisibleTaskQrl, _captures, _jsxSorted } from "@qwik.dev/core";
+/* empty css                  */
+import { DevtoolsContent } from "./DevtoolsContent.qwik.mjs";
+import { loadDevtoolsData } from "./rpc.qwik.mjs";
+import { createDevtoolsState } from "./state.qwik.mjs";
+import { DevtoolsSidebar } from "./DevtoolsSidebar.qwik.mjs";
+const QwikDevtoolsExtension = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
+  const state = useStore(createDevtoolsState({
+    isExtension: true
+  }));
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(async () => {
+    const state2 = _captures[0];
+    await loadDevtoolsData(state2);
+  }, "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
+};