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

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

@@ -1,284 +1,194 @@
-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"
+import { addRecentId, buildPaletteSources, filterResults, getActionResults, groupResults, loadRecentIds, resolveRecents, saveRecentIds } from "./command-palette.qwik.mjs";
+import { _captures, _fnSignal, _jsxSorted, _qrlSync, _wrapProp, componentQrl, inlinedQrl, useComputedQrl, useSignal, useVisibleTaskQrl } from "@qwik.dev/core";
+var _hf0 = (p0) => p0.value >= 0 ? `palette-option-${p0.value}` : void 0;
+var 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 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");
+/**
+* Cmd/Ctrl+K overlay to jump across tabs, components, routes, and packages, plus common actions.
+* The empty state lists recent selections and actions; results are keyboard-navigable.
+*/ var CommandPalette = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	const query = useSignal("");
+	const activeIndex = useSignal(-1);
+	const recentIds = useSignal([]);
+	const inputRef = useSignal();
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(() => {
+		const inputRef = _captures[0], recentIds = _captures[1];
+		recentIds.value = loadRecentIds();
+		inputRef.value?.focus();
+	}, "CommandPalette_component_useVisibleTask_35PZ2o0kMqE", [inputRef, recentIds]));
+	const searchable = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		const _rawProps = _captures[0];
+		return [...buildPaletteSources(_rawProps.state), ...getActionResults(_rawProps.state)];
+	}, "CommandPalette_component_searchable_useComputed_9iV5XwqJXZQ", [_rawProps]));
+	const groups = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		const _rawProps = _captures[0], query = _captures[1], recentIds = _captures[2], searchable = _captures[3];
+		if (!query.value.trim()) {
+			const recents = resolveRecents(recentIds.value, _rawProps.state);
+			const emptyGroups = [];
+			if (recents.length > 0) emptyGroups.push({
+				category: "Recent",
+				results: recents
+			});
+			emptyGroups.push({
+				category: "Actions",
+				results: getActionResults(_rawProps.state)
+			});
+			return emptyGroups;
+		}
+		return groupResults(filterResults(searchable.value, query.value));
+	}, "CommandPalette_component_groups_useComputed_W1LVMagOt0o", [
+		_rawProps,
+		query,
+		recentIds,
+		searchable
+	]));
+	const flatResults = useComputedQrl(/*#__PURE__*/ inlinedQrl(() => {
+		return _captures[0].value.flatMap((group) => group.results);
+	}, "CommandPalette_component_flatResults_useComputed_cCauVUcEhYk", [groups]));
+	useVisibleTaskQrl(/*#__PURE__*/ inlinedQrl(({ track }) => {
+		const activeIndex = _captures[0];
+		const index = track(() => activeIndex.value);
+		document.getElementById(`palette-option-${index}`)?.scrollIntoView({ block: "nearest" });
+	}, "CommandPalette_component_useVisibleTask_1_fkiiKqJKwhQ", [activeIndex]));
+	const activate = /*#__PURE__*/ inlinedQrl((result) => {
+		const _rawProps = _captures[0], recentIds = _captures[1], runAction = _captures[2];
+		const target = result.target;
+		if (target.kind === "action" && target.action === "clearRecents") {
+			runAction("clearRecents");
+			return;
+		}
+		if (!(target.kind === "action" && target.action === "customizeTabs")) _rawProps.state.isCustomizeOpen = false;
+		const nextRecents = addRecentId(recentIds.value, result.id);
+		recentIds.value = nextRecents;
+		saveRecentIds(nextRecents);
+		switch (target.kind) {
+			case "tab":
+				_rawProps.state.activeTab = target.tabId;
+				break;
+			case "route":
+				_rawProps.state.activeTab = "routes";
+				break;
+			case "package":
+				_rawProps.state.activeTab = "packages";
+				break;
+			case "component":
+				_rawProps.state.activeTab = "renderTree";
+				_rawProps.state.componentReveal = target.name;
+				break;
+			case "action": runAction(target.action);
+		}
+		_rawProps.state.isPaletteOpen = false;
+	}, "CommandPalette_component_activate_13BjyNN4Ia4", [
+		_rawProps,
+		recentIds,
+		/* @__PURE__ */ inlinedQrl((action) => {
+			const _rawProps = _captures[0], recentIds = _captures[1];
+			switch (action) {
+				case "toggleTheme":
+					cycleTheme();
+					break;
+				case "clearPerformance":
+					_rawProps.state.activeTab = "performance";
+					_rawProps.state.clearPerformanceRequested = true;
+					break;
+				case "customizeTabs":
+					_rawProps.state.isCustomizeOpen = true;
+					break;
+				case "clearRecents":
+					recentIds.value = [];
+					saveRecentIds([]);
+			}
+		}, "CommandPalette_component_runAction_x9wZJ0Hrfic", [_rawProps, recentIds])
+	]);
+	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, _rawProps) => _rawProps.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 _rawProps = _captures[0], activate = _captures[1], activeIndex = _captures[2], flatResults = _captures[3], inputRef = _captures[4];
+		const count = flatResults.value.length;
+		if (event.key === "ArrowDown") activeIndex.value = count === 0 ? -1 : activeIndex.value < 0 ? 0 : (activeIndex.value + 1) % count;
+		else if (event.key === "ArrowUp") activeIndex.value = count === 0 ? -1 : activeIndex.value < 0 ? count - 1 : (activeIndex.value - 1 + count) % count;
+		else if (event.key === "Enter") {
+			const result = activeIndex.value >= 0 ? flatResults.value[activeIndex.value] : null;
+			if (result) activate(result);
+		} else if (event.key === "Escape") _rawProps.state.isPaletteOpen = false;
+		else if (event.key === "Tab") inputRef.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, activeIndex, query) => {
+				query.value = el.value;
+				activeIndex.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, index) => {
+				const activeIndex = _captures[0];
+				return activeIndex.value = index;
+			}, "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
-};
+export { CommandPalette };