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

package/dist/ui/packages/devtools/ui/src/components/Tab/Tab.qwik.mjs

@@ -0,0 +1,21 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp, Slot } from "@qwik.dev/core";
+const Tab = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  const isActive = _rawProps.state.activeTab === _rawProps.id;
+  return /* @__PURE__ */ _jsxSorted("button", {
+    class: [
+      "relative flex h-11 w-11 items-center justify-center rounded-xl transition-all duration-300 ease-out select-none",
+      isActive ? "bg-primary/15 text-primary cursor-pointer" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground cursor-pointer"
+    ],
+    "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, _rawProps2) => {
+      _rawProps2.state.activeTab = _rawProps2.id;
+    }, "Tab_component_button_q_e_click_mLGAiGoqTr0").m(),
+    "q:p": _rawProps,
+    style: isActive ? {
+      boxShadow: "inset 3px 0 0 0 var(--color-primary)"
+    } : {},
+    title: _wrapProp(_rawProps, "title")
+  }, null, /* @__PURE__ */ _jsxSorted(Slot, null, null, null, 3, "5U_0"), 4, "5U_1");
+}, "Tab_component_HsfA1eSoy4c"));
+export {
+  Tab
+};

package/dist/ui/packages/devtools/ui/src/components/TabContent/TabContent.qwik.mjs

@@ -0,0 +1,21 @@
+import { componentQrl, inlinedQrl, _jsxSorted, Slot } from "@qwik.dev/core";
+const TabContent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "animate-slide-up-fade flex h-full w-full flex-col space-y-8",
+    style: "animation-duration: 0.3s; animation-fill-mode: both; animation-delay: 0.1s;"
+  }, [
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "border-glass-border flex items-center justify-between border-b px-2 pb-4"
+    }, /* @__PURE__ */ _jsxSorted(Slot, null, {
+      name: "title"
+    }, null, 3, "lX_0"), 1, null),
+    /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "custom-scrollbar flex-1 overflow-y-auto px-2 pb-8"
+    }, /* @__PURE__ */ _jsxSorted(Slot, null, {
+      name: "content"
+    }, null, 3, "lX_1"), 1, null)
+  ], 1, "lX_2");
+}, "TabContent_component_QKBLQC1st04"));
+export {
+  TabContent
+};

package/dist/ui/packages/devtools/ui/src/components/TabTitle/TabTitle.qwik.mjs

@@ -0,0 +1,9 @@
+import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp } from "@qwik.dev/core";
+const TabTitle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  return /* @__PURE__ */ _jsxSorted("h3", null, {
+    class: "from-foreground to-muted-foreground bg-gradient-to-br bg-clip-text text-2xl font-bold tracking-tight text-transparent"
+  }, _wrapProp(_rawProps, "title"), 1, "B3_0");
+}, "TabTitle_component_FETeCscYgXU"));
+export {
+  TabTitle
+};

package/dist/ui/packages/devtools/ui/src/components/ThemeToggle/QwikThemeToggle.qwik.mjs

@@ -0,0 +1,58 @@
+import { componentQrl, inlinedQrl, eventQrl, _jsxSorted, isServer } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+import { themeStorageKey } from "../router-head/theme-script.qwik.mjs";
+import { IconSunOutline, IconMoonOutline, IconSparkles } from "../Icons/Icons.qwik.mjs";
+/* empty css                      */
+const getTheme = () => {
+  if (isServer) {
+    return "auto";
+  }
+  let theme;
+  try {
+    theme = localStorage.getItem(themeStorageKey);
+  } catch {
+  }
+  return theme || "auto";
+};
+const setTheme = (theme) => {
+  if (theme === "auto") {
+    document.firstElementChild?.removeAttribute("data-theme");
+  } else {
+    document.firstElementChild?.setAttribute("data-theme", theme);
+  }
+  localStorage.setItem(themeStorageKey, theme);
+};
+const QwikThemeToggle = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl(() => {
+  const onClick$ = eventQrl(/* @__PURE__ */ inlinedQrl(() => {
+    let currentTheme = getTheme();
+    if (currentTheme === "dark") {
+      currentTheme = "light";
+    } else if (currentTheme === "light") {
+      currentTheme = "auto";
+    } else if (currentTheme === "auto") {
+      currentTheme = "dark";
+    }
+    setTheme(currentTheme);
+  }, "QwikThemeToggle_component_onClick_event_mPgLgEB0unU"));
+  return /* @__PURE__ */ _jsxSorted(Fragment, null, null, /* @__PURE__ */ _jsxSorted("button", null, {
+    "q-e:click": onClick$,
+    class: "bg-background text-foreground group relative flex h-8 w-8 items-center justify-center rounded-md hover:opacity-60"
+  }, /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "absolute inset-0 grid place-items-center transition-transform duration-200 ease-out group-hover:scale-110 group-active:scale-75"
+  }, [
+    /* @__PURE__ */ _jsxSorted(IconSunOutline, null, {
+      class: "themeIcon light col-start-1 row-start-1"
+    }, null, 3, "cO_0"),
+    /* @__PURE__ */ _jsxSorted(IconMoonOutline, null, {
+      class: "themeIcon dark col-start-1 row-start-1"
+    }, null, 3, "cO_1"),
+    /* @__PURE__ */ _jsxSorted(IconSparkles, null, {
+      class: "themeIcon auto col-start-1 row-start-1"
+    }, null, 3, "cO_2")
+  ], 1, null), 1, null), 1, "cO_3");
+}, "QwikThemeToggle_component_7eADANc7QaI"));
+export {
+  QwikThemeToggle,
+  getTheme,
+  setTheme
+};

package/dist/ui/{components → packages/devtools/ui/src/components}/ThemeToggle/theme-script.qwik.mjs

@@ -1,14 +1,17 @@
-import { themeStorageKey } from "../router-head/theme-script.qwik.mjs";
 import { _jsxSorted } from "@qwik.dev/core";
-//#region src/components/ThemeToggle/theme-script.tsx
-var ThemeScript = () => {
-	return /* @__PURE__ */ _jsxSorted("script", { dangerouslySetInnerHTML: `
+import { themeStorageKey } from "../router-head/theme-script.qwik.mjs";
+const ThemeScript = () => {
+  const themeScript = `
         try {
           const getItem = localStorage.getItem('${themeStorageKey}')
           if(getItem === 'light' || getItem === 'dark'){
               document.firstElementChild.setAttribute('data-theme', getItem);
           }
-        } catch (err) { }` }, null, null, 3, "4v_0");
+        } catch (err) { }`;
+  return /* @__PURE__ */ _jsxSorted("script", {
+    dangerouslySetInnerHTML: themeScript
+  }, null, null, 3, "sD_0");
+};
+export {
+  ThemeScript
 };
-//#endregion
-export { ThemeScript };

package/dist/ui/packages/devtools/ui/src/components/Tree/Tree.qwik.mjs

@@ -0,0 +1,234 @@
+import { componentQrl, inlinedQrl, useSignal, useVisibleTaskQrl, _captures, _jsxSorted, _wrapProp, _fnSignal } from "@qwik.dev/core";
+import { Fragment } from "@qwik.dev/core/jsx-runtime";
+import { IconChevronUpMini } from "../Icons/Icons.qwik.mjs";
+const _hf0 = (p0) => p0.level + 1;
+const _hf1 = (p0, p1) => p0 ? {
+  boxShadow: "inset 2px 0 0 0 var(--color-primary)",
+  paddingLeft: `${p1.level * p1.gap}px`
+} : {
+  paddingLeft: `${p1.level * p1.gap}px`
+};
+const _hf2 = (p0) => p0.node.id;
+const _hf3 = (p0) => p0.node.name || p0.node.label || "";
+const _hf4 = (p0) => p0.node.label || p0.node.name;
+const _hf5 = (p0) => p0.isHover !== false;
+const _hf6 = (p0) => p0.gap ?? 20;
+const _hf7 = (p0) => p0.expandLevel ?? 2;
+const _hf8 = (p0) => p0.animate ?? true;
+const DISPLAY_PROPS = [
+  "q:id",
+  "q:key"
+];
+function formatDisplayProps(props) {
+  let result = "";
+  for (const key of DISPLAY_PROPS) {
+    const value = props[key];
+    if (value != null) {
+      result += `${key}="${String(value)}" `;
+    }
+  }
+  return result;
+}
+function findIdPathByName(nodes, name) {
+  for (const node of nodes) {
+    if (node.name === name || node.label === name) {
+      return [
+        node.id
+      ];
+    }
+    const childPath = node.children?.length ? findIdPathByName(node.children, name) : null;
+    if (childPath) {
+      return [
+        node.id,
+        ...childPath
+      ];
+    }
+  }
+  return null;
+}
+const TreeNodeComponent = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const hasChildren = (props.node.children?.length ?? 0) > 0;
+  const override = props.expanded[props.node.id];
+  const childrenVisible = override !== void 0 ? override : props.level < props.expandLevel;
+  const handleNodeClick = /* @__PURE__ */ inlinedQrl(() => {
+    const childrenVisible2 = _captures[0], hasChildren2 = _captures[1], props2 = _captures[2];
+    props2.onNodeClick(props2.node);
+    if (hasChildren2) {
+      props2.onToggle(props2.node.id, childrenVisible2);
+    }
+  }, "TreeNodeComponent_component_handleNodeClick_hFhWIIdgPGE", [
+    childrenVisible,
+    hasChildren,
+    props
+  ]);
+  const isActive = props.isHover && props.node.id === props.activeNodeId;
+  const duration = props.animationDuration ?? 200;
+  const showChildren = hasChildren && childrenVisible;
+  const renderChildren = props.node.children?.map((child) => /* @__PURE__ */ _jsxSorted(TreeNodeComponent, {
+    node: child
+  }, {
+    isHover: _wrapProp(props, "isHover"),
+    gap: _wrapProp(props, "gap"),
+    expandLevel: _wrapProp(props, "expandLevel"),
+    level: _fnSignal(_hf0, [
+      props
+    ]),
+    activeNodeId: _wrapProp(props, "activeNodeId"),
+    expanded: _wrapProp(props, "expanded"),
+    onToggle: _wrapProp(props, "onToggle"),
+    onNodeClick: _wrapProp(props, "onNodeClick"),
+    renderNode: _wrapProp(props, "renderNode"),
+    animate: _wrapProp(props, "animate"),
+    animationDuration: _wrapProp(props, "animationDuration")
+  }, null, 3, child.id));
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "w-full"
+  }, [
+    /* @__PURE__ */ _jsxSorted("div", {
+      class: [
+        "flex w-full cursor-pointer items-center rounded-lg px-1 py-0.5 transition-colors duration-150",
+        isActive ? "bg-primary/10 text-primary" : "hover:bg-card-item-hover-bg"
+      ],
+      "data-node-id": _fnSignal(_hf2, [
+        props
+      ]),
+      "data-node-name": _fnSignal(_hf3, [
+        props
+      ]),
+      style: _fnSignal(_hf1, [
+        isActive,
+        props
+      ])
+    }, {
+      "q-e:click": handleNodeClick
+    }, /* @__PURE__ */ _jsxSorted("div", null, {
+      class: "inline-flex items-center px-2 py-1"
+    }, [
+      hasChildren ? /* @__PURE__ */ _jsxSorted(IconChevronUpMini, {
+        class: `text-muted-foreground mr-2 h-4 w-4 shrink-0 transition-transform duration-200 ${childrenVisible ? "rotate-180" : "rotate-90"}`
+      }, null, null, 3, "gW_0") : /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "mr-2 w-4 shrink-0"
+      }, null, 3, "gW_1"),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "cursor-pointer font-mono text-sm whitespace-nowrap"
+      }, props.renderNode ? /* @__PURE__ */ _jsxSorted(Fragment, null, null, props.renderNode(props.node), 1, "gW_2") : /* @__PURE__ */ _jsxSorted(Fragment, null, null, [
+        /* @__PURE__ */ _jsxSorted("span", null, {
+          class: "text-foreground/50"
+        }, "<", 3, null),
+        /* @__PURE__ */ _jsxSorted("span", null, {
+          class: "text-primary/80"
+        }, _fnSignal(_hf4, [
+          props
+        ]), 1, null),
+        /* @__PURE__ */ _jsxSorted("span", null, {
+          class: "text-muted-foreground"
+        }, [
+          ` ${formatDisplayProps(props.node.props ?? {})}`,
+          ">"
+        ], 1, null)
+      ], 1, "gW_3"), 1, null)
+    ], 1, null), 1, null),
+    hasChildren && (props.animate ? /* @__PURE__ */ _jsxSorted("div", {
+      style: {
+        maxHeight: showChildren ? "1000px" : "0px",
+        opacity: showChildren ? "1" : "0",
+        transition: `max-height ${duration}ms ease-in-out, opacity ${duration}ms ease-in-out`
+      }
+    }, {
+      class: "overflow-hidden"
+    }, renderChildren, 1, "gW_4") : showChildren && /* @__PURE__ */ _jsxSorted(Fragment, null, null, renderChildren, 1, "gW_5"))
+  ], 1, "gW_6");
+}, "TreeNodeComponent_component_uTw0NGLeAGw"));
+const Tree = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
+  const ref = useSignal();
+  const activeNodeId = useSignal("");
+  const expanded = useSignal({});
+  const setActiveNode = /* @__PURE__ */ inlinedQrl((node) => {
+    const activeNodeId2 = _captures[0], props2 = _captures[1], ref2 = _captures[2];
+    if (ref2.value) {
+      ref2.value.scrollLeft = ref2.value.scrollWidth;
+    }
+    activeNodeId2.value = node.id;
+    props2.onNodeClick?.(node);
+  }, "Tree_component_setActiveNode_sXOxeM0G0DU", [
+    activeNodeId,
+    props,
+    ref
+  ]);
+  const toggleNode = /* @__PURE__ */ inlinedQrl((id, childrenVisible) => {
+    const expanded2 = _captures[0];
+    expanded2.value = {
+      ...expanded2.value,
+      [id]: !childrenVisible
+    };
+  }, "Tree_component_toggleNode_QxlcpIF5TKQ", [
+    expanded
+  ]);
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
+    const activeNodeId2 = _captures[0], expanded2 = _captures[1], props2 = _captures[2], ref2 = _captures[3];
+    const name = track(() => props2.revealNode?.value);
+    const nodes = track(() => props2.data.value);
+    if (!name) {
+      return;
+    }
+    const path = findIdPathByName(nodes, name);
+    if (!path) {
+      return;
+    }
+    const nextExpanded = {
+      ...expanded2.value
+    };
+    for (const id of path) {
+      nextExpanded[id] = true;
+    }
+    expanded2.value = nextExpanded;
+    const targetId = path[path.length - 1];
+    activeNodeId2.value = targetId;
+    const container = ref2.value;
+    if (container) {
+      const scrollDelay = props2.animate ?? true ? (props2.animationDuration ?? 200) + 50 : 0;
+      setTimeout(() => {
+        container.querySelector(`[data-node-id="${targetId}"]`)?.scrollIntoView({
+          block: "center",
+          behavior: "smooth"
+        });
+      }, scrollDelay);
+    }
+    props2.onRevealed$?.();
+  }, "Tree_component_useVisibleTask_Awi233OdHLg", [
+    activeNodeId,
+    expanded,
+    props,
+    ref
+  ]));
+  return /* @__PURE__ */ _jsxSorted("div", {
+    ref
+  }, {
+    class: "h-full w-full overflow-x-auto overflow-y-auto"
+  }, props.data.value.map((rootNode) => /* @__PURE__ */ _jsxSorted(TreeNodeComponent, {
+    node: rootNode
+  }, {
+    isHover: _fnSignal(_hf5, [
+      props
+    ]),
+    gap: _fnSignal(_hf6, [
+      props
+    ]),
+    level: 0,
+    expandLevel: _fnSignal(_hf7, [
+      props
+    ]),
+    activeNodeId: _wrapProp(activeNodeId),
+    expanded: _wrapProp(expanded),
+    onToggle: toggleNode,
+    onNodeClick: setActiveNode,
+    renderNode: _wrapProp(props, "renderNode"),
+    animate: _fnSignal(_hf8, [
+      props
+    ]),
+    animationDuration: _wrapProp(props, "animationDuration")
+  }, null, 3, rootNode.id)), 1, "gW_7");
+}, "Tree_component_mMuREZC0V3M"));
+export {
+  Tree
+};

package/dist/ui/packages/devtools/ui/src/components/router-head/theme-script.qwik.mjs

@@ -0,0 +1,4 @@
+const themeStorageKey = "vueuse-color-scheme";
+export {
+  themeStorageKey
+};

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

@@ -0,0 +1,284 @@
+import { componentQrl, inlinedQrl, useSignal, useVisibleTaskQrl, _captures, useComputedQrl, _jsxSorted, _qrlSync, _wrapProp, _fnSignal } from "@qwik.dev/core";
+import { IconMagnifyingGlass } from "../components/Icons/Icons.qwik.mjs";
+import { getTheme, setTheme } from "../components/ThemeToggle/QwikThemeToggle.qwik.mjs";
+import { loadRecentIds, buildPaletteSources, getActionResults, resolveRecents, groupResults, filterResults, addRecentId, saveRecentIds } from "./command-palette.qwik.mjs";
+const _hf0 = (p0) => p0.value >= 0 ? `palette-option-${p0.value}` : void 0;
+const CATEGORY_HINT = {
+  Tabs: "Tab",
+  Components: "Component",
+  Routes: "Route",
+  Packages: "Package",
+  Actions: "Action",
+  Recent: "Recent"
+};
+function cycleTheme() {
+  const current = getTheme();
+  setTheme(current === "dark" ? "light" : current === "light" ? "auto" : "dark");
+}
+const CommandPalette = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
+  const query = useSignal("");
+  const activeIndex = useSignal(-1);
+  const recentIds = useSignal([]);
+  const inputRef = useSignal();
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const inputRef2 = _captures[0], recentIds2 = _captures[1];
+    recentIds2.value = loadRecentIds();
+    inputRef2.value?.focus();
+  }, "CommandPalette_component_useVisibleTask_35PZ2o0kMqE", [
+    inputRef,
+    recentIds
+  ]));
+  const searchable = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const _rawProps2 = _captures[0];
+    return [
+      ...buildPaletteSources(_rawProps2.state),
+      ...getActionResults(_rawProps2.state)
+    ];
+  }, "CommandPalette_component_searchable_useComputed_9iV5XwqJXZQ", [
+    _rawProps
+  ]));
+  const groups = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const _rawProps2 = _captures[0], query2 = _captures[1], recentIds2 = _captures[2], searchable2 = _captures[3];
+    if (!query2.value.trim()) {
+      const recents = resolveRecents(recentIds2.value, _rawProps2.state);
+      const emptyGroups = [];
+      if (recents.length > 0) {
+        emptyGroups.push({
+          category: "Recent",
+          results: recents
+        });
+      }
+      emptyGroups.push({
+        category: "Actions",
+        results: getActionResults(_rawProps2.state)
+      });
+      return emptyGroups;
+    }
+    return groupResults(filterResults(searchable2.value, query2.value));
+  }, "CommandPalette_component_groups_useComputed_W1LVMagOt0o", [
+    _rawProps,
+    query,
+    recentIds,
+    searchable
+  ]));
+  const flatResults = useComputedQrl(/* @__PURE__ */ inlinedQrl(() => {
+    const groups2 = _captures[0];
+    return groups2.value.flatMap((group) => group.results);
+  }, "CommandPalette_component_flatResults_useComputed_cCauVUcEhYk", [
+    groups
+  ]));
+  useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
+    const activeIndex2 = _captures[0];
+    const index = track(() => activeIndex2.value);
+    document.getElementById(`palette-option-${index}`)?.scrollIntoView({
+      block: "nearest"
+    });
+  }, "CommandPalette_component_useVisibleTask_1_fkiiKqJKwhQ", [
+    activeIndex
+  ]));
+  const runAction = /* @__PURE__ */ inlinedQrl((action) => {
+    const _rawProps2 = _captures[0], recentIds2 = _captures[1];
+    switch (action) {
+      case "toggleTheme":
+        cycleTheme();
+        break;
+      case "clearPerformance":
+        _rawProps2.state.activeTab = "performance";
+        _rawProps2.state.clearPerformanceRequested = true;
+        break;
+      case "customizeTabs":
+        _rawProps2.state.isCustomizeOpen = true;
+        break;
+      case "clearRecents":
+        recentIds2.value = [];
+        saveRecentIds([]);
+        break;
+    }
+  }, "CommandPalette_component_runAction_x9wZJ0Hrfic", [
+    _rawProps,
+    recentIds
+  ]);
+  const activate = /* @__PURE__ */ inlinedQrl((result) => {
+    const _rawProps2 = _captures[0], recentIds2 = _captures[1], runAction2 = _captures[2];
+    const target = result.target;
+    if (target.kind === "action" && target.action === "clearRecents") {
+      runAction2("clearRecents");
+      return;
+    }
+    if (!(target.kind === "action" && target.action === "customizeTabs")) {
+      _rawProps2.state.isCustomizeOpen = false;
+    }
+    const nextRecents = addRecentId(recentIds2.value, result.id);
+    recentIds2.value = nextRecents;
+    saveRecentIds(nextRecents);
+    switch (target.kind) {
+      case "tab":
+        _rawProps2.state.activeTab = target.tabId;
+        break;
+      case "route":
+        _rawProps2.state.activeTab = "routes";
+        break;
+      case "package":
+        _rawProps2.state.activeTab = "packages";
+        break;
+      case "component":
+        _rawProps2.state.activeTab = "renderTree";
+        _rawProps2.state.componentReveal = target.name;
+        break;
+      case "action":
+        runAction2(target.action);
+        break;
+    }
+    _rawProps2.state.isPaletteOpen = false;
+  }, "CommandPalette_component_activate_13BjyNN4Ia4", [
+    _rawProps,
+    recentIds,
+    runAction
+  ]);
+  let optionIndex = 0;
+  return /* @__PURE__ */ _jsxSorted("div", null, {
+    class: "absolute inset-0 z-30 flex items-start justify-center p-4"
+  }, [
+    /* @__PURE__ */ _jsxSorted("div", {
+      "q-e:click": /* @__PURE__ */ inlinedQrl((_, _1, _rawProps2) => _rawProps2.state.isPaletteOpen = false, "CommandPalette_component_div_div_q_e_click_AC38AwghEZY").m(),
+      "q:p": _rawProps
+    }, {
+      class: "absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity"
+    }, null, 6, null),
+    /* @__PURE__ */ _jsxSorted("div", {
+      "q-e:keydown": [
+        _qrlSync((event) => {
+          if ([
+            "ArrowDown",
+            "ArrowUp",
+            "Enter",
+            "Tab"
+          ].includes(event.key)) {
+            event.preventDefault();
+          }
+        }, 'event=>{if(["ArrowDown","ArrowUp","Enter","Tab"].includes(event.key)){event.preventDefault();}}'),
+        /* @__PURE__ */ inlinedQrl((event) => {
+          const _rawProps2 = _captures[0], activate2 = _captures[1], activeIndex2 = _captures[2], flatResults2 = _captures[3], inputRef2 = _captures[4];
+          const count = flatResults2.value.length;
+          if (event.key === "ArrowDown") {
+            activeIndex2.value = count === 0 ? -1 : activeIndex2.value < 0 ? 0 : (activeIndex2.value + 1) % count;
+          } else if (event.key === "ArrowUp") {
+            activeIndex2.value = count === 0 ? -1 : activeIndex2.value < 0 ? count - 1 : (activeIndex2.value - 1 + count) % count;
+          } else if (event.key === "Enter") {
+            const result = activeIndex2.value >= 0 ? flatResults2.value[activeIndex2.value] : null;
+            if (result) {
+              activate2(result);
+            }
+          } else if (event.key === "Escape") {
+            _rawProps2.state.isPaletteOpen = false;
+          } else if (event.key === "Tab") {
+            inputRef2.value?.focus();
+          }
+        }, "CommandPalette_component_div_div_q_e_keydown_PM5c20jSiZ0", [
+          _rawProps,
+          activate,
+          activeIndex,
+          flatResults,
+          inputRef
+        ])
+      ]
+    }, {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Command palette",
+      class: "glass-panel relative z-10 flex max-h-full w-[32rem] max-w-full flex-col overflow-hidden rounded-2xl"
+    }, [
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "border-glass-border flex items-center gap-3 border-b px-4 py-3"
+      }, [
+        /* @__PURE__ */ _jsxSorted("span", null, {
+          class: "text-muted-foreground"
+        }, /* @__PURE__ */ _jsxSorted(IconMagnifyingGlass, null, {
+          class: "h-5 w-5"
+        }, null, 3, "s1_0"), 1, null),
+        /* @__PURE__ */ _jsxSorted("input", {
+          "q-e:input": /* @__PURE__ */ inlinedQrl((_, el, activeIndex2, query2) => {
+            query2.value = el.value;
+            activeIndex2.value = el.value.trim() ? 0 : -1;
+          }, "CommandPalette_component_div_div_div_input_q_e_input_j9vHtbrHP4c").m(),
+          "q:ps": [
+            activeIndex,
+            query
+          ],
+          ref: inputRef
+        }, {
+          type: "text",
+          autoFocus: true,
+          role: "combobox",
+          "aria-expanded": "true",
+          "aria-controls": "palette-listbox",
+          "aria-activedescendant": _fnSignal(_hf0, [
+            activeIndex
+          ]),
+          placeholder: "Search tabs, components, routes, packages...",
+          class: "text-foreground placeholder:text-muted-foreground/70 w-full bg-transparent text-sm outline-none",
+          value: _wrapProp(query)
+        }, null, 6, null)
+      ], 1, null),
+      /* @__PURE__ */ _jsxSorted("ul", null, {
+        id: "palette-listbox",
+        role: "listbox",
+        "aria-label": "Results",
+        class: "custom-scrollbar max-h-80 overflow-y-auto p-2"
+      }, flatResults.value.length === 0 ? /* @__PURE__ */ _jsxSorted("li", null, {
+        class: "text-muted-foreground px-2 py-6 text-center text-sm"
+      }, "No results", 3, "s1_1") : groups.value.map((group) => /* @__PURE__ */ _jsxSorted("li", null, {
+        role: "presentation"
+      }, [
+        /* @__PURE__ */ _jsxSorted("div", null, {
+          class: "text-muted-foreground px-2 pb-1 pt-2 text-xs font-medium uppercase tracking-wide"
+        }, _wrapProp(group, "category"), 1, null),
+        /* @__PURE__ */ _jsxSorted("ul", null, {
+          role: "presentation"
+        }, group.results.map((result) => {
+          const index = optionIndex++;
+          const isActive = index === activeIndex.value;
+          const qrl_0 = /* @__PURE__ */ inlinedQrl((_, _1, _2, index2) => {
+            const activeIndex2 = _captures[0];
+            return activeIndex2.value = index2;
+          }, "CommandPalette_component_div_div_ul_li_ul_li_q_e_mouseenter_0qIEkwUcwUE", [
+            activeIndex
+          ]).m();
+          return /* @__PURE__ */ _jsxSorted("li", {
+            "aria-selected": isActive ? "true" : "false",
+            class: [
+              "flex cursor-pointer items-center justify-between gap-3 rounded-lg px-2 py-1.5",
+              isActive ? "bg-primary/15 text-primary" : "hover:bg-card-item-hover-bg"
+            ],
+            id: `palette-option-${index}`,
+            "q-e:click": qrl_0,
+            "q-e:mouseenter": qrl_0,
+            "q:ps": [
+              result,
+              index
+            ]
+          }, {
+            role: "option"
+          }, [
+            /* @__PURE__ */ _jsxSorted("span", null, {
+              class: "text-foreground truncate text-sm"
+            }, _wrapProp(result, "label"), 1, null),
+            /* @__PURE__ */ _jsxSorted("span", null, {
+              class: "text-muted-foreground shrink-0 truncate text-xs"
+            }, result.hint ?? CATEGORY_HINT[group.category], 1, null)
+          ], 4, result.id);
+        }), 1, null)
+      ], 1, group.category)), 1, null),
+      /* @__PURE__ */ _jsxSorted("div", null, {
+        class: "border-glass-border text-muted-foreground flex gap-4 border-t px-4 py-2 text-xs"
+      }, [
+        /* @__PURE__ */ _jsxSorted("span", null, null, "↑↓ navigate", 3, null),
+        /* @__PURE__ */ _jsxSorted("span", null, null, "↵ select", 3, null),
+        /* @__PURE__ */ _jsxSorted("span", null, null, "esc close", 3, null)
+      ], 3, null)
+    ], 0, null)
+  ], 1, "s1_2");
+}, "CommandPalette_component_0OIptX9h7QY"));
+export {
+  CommandPalette
+};