@leavepulse/ui 0.41.0 → 0.42.0

package/dist/assets/{LpCommandPalette-DyT6aGdW.css → LpCommandPalette-Esv0a-gS.css}

@@ -5,81 +5,81 @@
  * pane from its right edge as it grows. Animating the columns themselves made
  * every line of the list and the pane re-wrap on every frame.
  */
-.lp-cmd-dialog[data-v-19283172] {
+.lp-cmd-dialog[data-v-7bcd1140] {
   --lp-cmd-list: min(92vw, 40rem);
   --lp-cmd-pane: max(0px, min(26rem, 96vw - var(--lp-cmd-list)));
   width: var(--lp-cmd-list);
 }
-.lp-cmd-split[data-v-19283172] {
+.lp-cmd-split[data-v-7bcd1140] {
   transition:
     width 300ms var(--ease-emphasized, ease),
     min-height 300ms var(--ease-emphasized, ease);
 }
 @media (min-width: 768px) {
-.lp-cmd-split .lp-cmd-list[data-v-19283172] {
+.lp-cmd-split .lp-cmd-list[data-v-7bcd1140] {
     flex: 0 0 auto;
     /* the dialog's 1px border on each side */
     width: calc(var(--lp-cmd-list) - 2px);
 }
-.lp-cmd-dialog[data-pane="open"][data-v-19283172] {
+.lp-cmd-dialog[data-pane="open"][data-v-7bcd1140] {
     width: calc(var(--lp-cmd-list) + var(--lp-cmd-pane));
     min-height: min(76vh, 36rem);
 }
 }
-.lp-cmd-pane[data-v-19283172] {
+.lp-cmd-pane[data-v-7bcd1140] {
   width: var(--lp-cmd-pane);
 }
 /*
  * The pane rides in from the right edge while the dialog opens up to it, and
  * leaves the same way, for as long as the dialog takes to close over it.
  */
-.lp-cmd-pane-enter-active[data-v-19283172],
-.lp-cmd-pane-leave-active[data-v-19283172] {
+.lp-cmd-pane-enter-active[data-v-7bcd1140],
+.lp-cmd-pane-leave-active[data-v-7bcd1140] {
   transition:
     transform 300ms var(--ease-emphasized, ease),
     opacity 300ms ease;
 }
-.lp-cmd-pane-enter-from[data-v-19283172],
-.lp-cmd-pane-leave-to[data-v-19283172] {
+.lp-cmd-pane-enter-from[data-v-7bcd1140],
+.lp-cmd-pane-leave-to[data-v-7bcd1140] {
   opacity: 0;
   transform: translateX(40%);
 }
-.lp-cmd-para[data-v-19283172] {
-  animation: lp-cmd-para-in-19283172 260ms ease-out both;
+.lp-cmd-para[data-v-7bcd1140] {
+  animation: lp-cmd-para-in-7bcd1140 260ms ease-out both;
 }
-@keyframes lp-cmd-para-in-19283172 {
+@keyframes lp-cmd-para-in-7bcd1140 {
 from {
     opacity: 0;
     transform: translateY(4px);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-split[data-v-19283172],
-  .lp-cmd-pane-enter-active[data-v-19283172],
-  .lp-cmd-pane-leave-active[data-v-19283172] {
+.lp-cmd-split[data-v-7bcd1140],
+  .lp-cmd-pane-enter-active[data-v-7bcd1140],
+  .lp-cmd-pane-leave-active[data-v-7bcd1140] {
     transition: none;
 }
-.lp-cmd-para[data-v-19283172] {
+.lp-cmd-para[data-v-7bcd1140] {
     animation: none;
 }
 }
-.lp-cmd-excerpt[data-v-19283172] {
+.lp-cmd-excerpt[data-v-7bcd1140] {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-19283172] {
-  animation: lp-cmd-in-19283172 140ms ease-out both;
+.lp-cmd-item[data-v-7bcd1140] {
+  animation: lp-cmd-in-7bcd1140 140ms ease-out both;
 }
-@keyframes lp-cmd-in-19283172 {
+@keyframes lp-cmd-in-7bcd1140 {
 from {
     opacity: 0;
     transform: translateY(3px);
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-19283172] {
+.lp-cmd-item[data-v-7bcd1140] {
     animation: none;
 }
 }

package/dist/components/LpCommandPalette.vue.js

@@ -7,64 +7,63 @@ import { useGlass } from "../composables/useGlass.js";
 import { useClipboard } from "../composables/useClipboard.js";
 import { useHotkeys } from "../composables/useHotkeys.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpCommandPalette-DyT6aGdW.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
+import '../assets/LpCommandPalette-Esv0a-gS.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
 const _hoisted_2 = ["title", "onClick"];
 const _hoisted_3 = ["aria-activedescendant", "placeholder", "onKeydown"];
-const _hoisted_4 = { class: "flex min-h-0 flex-1" };
-const _hoisted_5 = {
+const _hoisted_4 = {
   key: 0,
   class: "px-2 py-10 text-center text-sm text-muted"
 };
-const _hoisted_6 = ["aria-labelledby"];
-const _hoisted_7 = ["id"];
-const _hoisted_8 = { class: "min-w-0 flex-1" };
-const _hoisted_9 = { class: "block truncate font-medium" };
-const _hoisted_10 = {
+const _hoisted_5 = ["aria-labelledby"];
+const _hoisted_6 = ["id"];
+const _hoisted_7 = { class: "min-w-0 flex-1" };
+const _hoisted_8 = { class: "block truncate font-medium" };
+const _hoisted_9 = {
   key: 0,
   class: "rounded-xs bg-brand/25 text-ink"
 };
-const _hoisted_11 = {
+const _hoisted_10 = {
   key: 0,
   class: "mt-0.5 block truncate text-xs text-muted"
 };
-const _hoisted_12 = {
+const _hoisted_11 = {
   key: 0,
   class: "rounded-xs bg-brand/20 text-ink"
 };
-const _hoisted_13 = {
+const _hoisted_12 = {
   key: 0,
   class: "rounded-xs bg-brand/20 text-ink"
 };
-const _hoisted_14 = {
+const _hoisted_13 = {
   key: 1,
   class: "shrink-0 text-xs text-muted"
 };
-const _hoisted_15 = {
+const _hoisted_14 = {
   key: 0,
   class: "lp-cmd-pane hidden min-h-0 shrink-0 flex-col border-l border-line md:flex"
 };
-const _hoisted_16 = { class: "lp-cmd-para flex items-center gap-2 text-ink" };
-const _hoisted_17 = { class: "min-w-0 text-base font-semibold" };
-const _hoisted_18 = {
+const _hoisted_15 = { class: "lp-cmd-para flex items-center gap-2 text-ink" };
+const _hoisted_16 = { class: "min-w-0 text-base font-semibold" };
+const _hoisted_17 = {
   key: 0,
   class: "lp-cmd-para mt-0.5 text-xs text-muted"
 };
-const _hoisted_19 = {
+const _hoisted_18 = {
   key: 0,
   class: "rounded-xs bg-brand/25 text-ink"
 };
-const _hoisted_20 = { class: "flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted" };
+const _hoisted_19 = { class: "flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted" };
+const _hoisted_20 = { class: "flex items-center gap-1" };
 const _hoisted_21 = { class: "flex items-center gap-1" };
-const _hoisted_22 = { class: "flex items-center gap-1" };
-const _hoisted_23 = {
+const _hoisted_22 = {
   key: 0,
   class: "flex items-center gap-1"
 };
-const _hoisted_24 = {
+const _hoisted_23 = {
   key: 1,
   class: "flex items-center gap-1"
 };
-const _hoisted_25 = { class: "ml-auto flex items-center gap-1" };
+const _hoisted_24 = { class: "ml-auto flex items-center gap-1" };
 const LATIN = "qwertyuiop[]asdfghjkl;'zxcvbnm,.`";
 const CYRILLIC = "йцукенгшщзхъфывапролджэячсмитьбюё";
 const TYPO_MIN = 5;
@@ -120,9 +119,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const activeId = computed(() => flat.value.length ? optionId(selectedIndex.value) : void 0);
     const selectedIndex = ref(0);
+    const selectedId = ref(null);
     const inputRef = ref(null);
     const scrollRef = ref(null);
     const trail = shallowRef([]);
+    const trailState = shallowRef([]);
     const mode = computed(() => trail.value[trail.value.length - 1] ?? null);
     const modeItems = shallowRef([]);
     const { copy } = useClipboard();
@@ -150,30 +151,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const selectedActions = computed(() => actionsOf(flat.value[selectedIndex.value]));
     function onTab(event) {
+      event.preventDefault();
+      event.stopPropagation();
       if (event.shiftKey) return;
       const c = flat.value[selectedIndex.value];
       const actions = selectedActions.value;
       if (!c || !actions.length) return;
-      event.preventDefault();
-      event.stopPropagation();
       enter({ id: `${c.id}:actions`, label: c.label, icon: c.icon, children: actions });
     }
     function enter(c) {
+      trailState.value = [...trailState.value, { query: query.value, selectedId: selectedId.value }];
       trail.value = [...trail.value, c];
       query.value = "";
-      selectedIndex.value = 0;
+      select(0);
       modeItems.value = Array.isArray(c.children) ? c.children : [];
       refresh();
       inputRef.value?.focus();
     }
     function popTo(depth) {
+      const state = trailState.value[depth] || { query: "", selectedId: null };
       const next = trail.value.slice(0, Math.max(0, depth));
+      trailState.value = trailState.value.slice(0, Math.max(0, depth));
       trail.value = next;
-      query.value = "";
-      selectedIndex.value = 0;
       const parent = next[next.length - 1];
       modeItems.value = parent && Array.isArray(parent.children) ? parent.children : [];
+      query.value = state.query;
+      select(0);
       refresh();
+      void nextTick(() => {
+        const index = state.selectedId ? flat.value.findIndex((c) => c.id === state.selectedId) : -1;
+        select(index >= 0 ? index : 0);
+      });
       inputRef.value?.focus();
     }
     function back() {
@@ -234,12 +242,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (term.length < TYPO_MIN) return false;
       return label.split(/[^\p{L}\p{N}]+/u).some((word) => withinOne(term, word) || word.length > term.length && withinOne(term, word.slice(0, term.length)));
     }
+    const QUERY_TOKEN = /(-?)(?:(in):)?(?:"([^"]*)"|(\S+))/giu;
+    function searchTerms(value) {
+      const out = { include: [], exclude: [], groups: [] };
+      QUERY_TOKEN.lastIndex = 0;
+      for (let match; match = QUERY_TOKEN.exec(value); ) {
+        const text2 = (match[3] ?? match[4] ?? "").trim().toLowerCase();
+        if (!text2) continue;
+        if (match[2] && !match[1]) out.groups.push(text2);
+        else if (match[1]) out.exclude.push(text2);
+        else out.include.push(text2);
+      }
+      return out;
+    }
+    function matches(c, term) {
+      return c.label.toLowerCase().includes(term) || (c.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(term)) || (c.description?.toLowerCase().includes(term) ?? false);
+    }
     function score(c, terms) {
       const label = c.label.toLowerCase();
       const keywords = (c.keywords ?? []).map((k) => k.toLowerCase());
       const description = c.description?.toLowerCase() ?? "";
-      let total = 0;
-      for (const term of terms) {
+      const group = c.group?.toLowerCase() ?? "";
+      if (terms.exclude.some((term) => matches(c, term)) || terms.groups.some((term) => !group.includes(term))) return 0;
+      let total = terms.include.length ? 0 : 1;
+      for (const term of terms.include) {
         let hit = (label.includes(term) ? 4 : 0) + (keywords.some((k) => k.includes(term)) ? 3 : 0) + (description.includes(term) ? 2 : 0);
         if (!hit && nearWord(term, label)) hit = 1;
         if (!hit) return 0;
@@ -250,15 +276,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function rank(items, terms) {
       return items.map((c) => ({ c, score: score(c, terms) })).filter((e) => e.score > 0).sort((a, b) => b.score - a.score || a.c.label.localeCompare(b.c.label)).map((e) => e.c);
     }
-    const typedTerms = computed(() => query.value.trim().toLowerCase().split(/\s+/).filter(Boolean));
     const local = computed(() => {
-      const terms = typedTerms.value;
-      if (!terms.length) return { items: source.value.filter((c) => !c.hidden), terms };
-      const items = rank(source.value, terms);
-      if (items.length || !props.layoutFallback) return { items, terms };
-      const swapped = terms.map(swapLayout);
-      const other = rank(source.value, swapped);
-      return other.length ? { items: other, terms: swapped } : { items, terms };
+      const terms = searchTerms(query.value);
+      const filtered = query.value.trim() ? source.value : source.value.filter((c) => !c.hidden);
+      if (!terms.include.length && !terms.exclude.length && !terms.groups.length) return { items: filtered, terms: [] };
+      const items = rank(filtered, terms);
+      if (items.length || !props.layoutFallback) return { items, terms: terms.include };
+      const swapped = {
+        include: terms.include.map(swapLayout),
+        exclude: terms.exclude.map(swapLayout),
+        groups: terms.groups.map(swapLayout)
+      };
+      const other = rank(filtered, swapped);
+      return other.length ? { items: other, terms: swapped.include } : { items, terms: terms.include };
     });
     const ranked = computed(() => local.value.items);
     const fetched = computed(() => {
@@ -364,16 +394,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return parts;
     }
     watch(query, () => {
-      selectedIndex.value = 0;
+      select(0);
       refresh();
     });
     watch([query, trail, () => props.open], () => {
       expanded.value = /* @__PURE__ */ new Set();
     });
     watch(
-      () => flat.value.length,
-      (len) => {
-        if (selectedIndex.value >= len) selectedIndex.value = Math.max(0, len - 1);
+      () => flat.value.map((c) => c.id).join("|"),
+      () => {
+        const index = selectedId.value ? flat.value.findIndex((c) => c.id === selectedId.value) : -1;
+        select(index >= 0 ? index : 0);
       }
     );
     watch([selectedIndex, () => flat.value.map((c) => c.id).join("|")], async () => {
@@ -386,13 +417,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       );
       el?.scrollIntoView({ block: "nearest" });
     }
+    const keyboardSelection = ref(false);
+    function select(index, keyboard = false) {
+      const len = flat.value.length;
+      selectedIndex.value = len ? Math.max(0, Math.min(index, len - 1)) : 0;
+      selectedId.value = flat.value[selectedIndex.value]?.id ?? null;
+      if (keyboard) keyboardSelection.value = true;
+    }
     function moveDown() {
       const len = flat.value.length;
-      if (len) selectedIndex.value = (selectedIndex.value + 1) % len;
+      if (len) select((selectedIndex.value + 1) % len, true);
     }
     function moveUp() {
       const len = flat.value.length;
-      if (len) selectedIndex.value = (selectedIndex.value - 1 + len) % len;
+      if (len) select((selectedIndex.value - 1 + len) % len, true);
+    }
+    function movePage(direction) {
+      select(selectedIndex.value + direction * 8, true);
+    }
+    function onPaletteKeydown(event) {
+      if (event.isComposing) return;
+      if (!["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp"].includes(event.key)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.key === "ArrowDown") moveDown();
+      else if (event.key === "ArrowUp") moveUp();
+      else if (event.key === "Home") select(0, true);
+      else if (event.key === "End") select(flat.value.length - 1, true);
+      else movePage(event.key === "PageDown" ? 1 : -1);
+    }
+    function onPointerMove() {
+      keyboardSelection.value = false;
+    }
+    function onPointerEnter(c) {
+      if (!keyboardSelection.value) select(flatIndexOf(c));
     }
     function runSelected(event) {
       const c = flat.value[selectedIndex.value];
@@ -431,7 +489,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("run", c.id, c);
       if (c.keepOpen) {
         query.value = "";
-        selectedIndex.value = 0;
+        select(0);
         inputRef.value?.focus();
         return;
       }
@@ -452,8 +510,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       async (o) => {
         cancel();
         query.value = "";
-        selectedIndex.value = 0;
+        select(0);
+        selectedId.value = null;
         trail.value = [];
+        trailState.value = [];
         modeItems.value = [];
         found.value = [];
         failed.value = false;
@@ -490,7 +550,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(["lp-cmd-dialog fixed left-1/2 top-[12vh] z-(--z-modal) flex max-h-[76vh] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]", [unref(frosted) ? "lp-glass-overlay" : "bg-surface-raised", __props.previewPane && "lp-cmd-split"]]),
                 "data-pane": paneOpen.value ? "open" : void 0,
                 onOpenAutoFocus: _cache[2] || (_cache[2] = withModifiers(() => {
-                }, ["prevent"]))
+                }, ["prevent"])),
+                onKeydownCapture: onPaletteKeydown
               }, {
                 default: withCtx(() => [
                   createVNode(unref(DialogTitle), { class: "sr-only" }, {
@@ -551,8 +612,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       placeholder: mode.value?.childPlaceholder ?? __props.placeholder,
                       class: "h-12 min-w-0 flex-1 bg-transparent text-sm text-ink outline-none placeholder:text-muted",
                       onKeydown: [
-                        withKeys(withModifiers(moveDown, ["prevent"]), ["down"]),
-                        withKeys(withModifiers(moveUp, ["prevent"]), ["up"]),
                         withKeys(withModifiers(runSelected, ["prevent"]), ["enter"]),
                         withKeys(onBackspace, ["backspace"]),
                         withKeys(onEscape, ["esc"]),
@@ -563,7 +622,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ]),
                     _cache[6] || (_cache[6] = createElementVNode("kbd", { class: "shrink-0 rounded border border-line px-1.5 py-0.5 text-[10px] text-muted" }, "esc", -1))
                   ]),
-                  createElementVNode("div", _hoisted_4, [
+                  createElementVNode("div", {
+                    class: "flex min-h-0 flex-1",
+                    onPointermove: onPointerMove
+                  }, [
                     createVNode(_sfc_main$2, {
                       ref_key: "scrollRef",
                       ref: scrollRef,
@@ -571,7 +633,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       "content-class": "p-2"
                     }, {
                       default: withCtx(() => [
-                        flat.value.length === 0 && !failed.value ? (openBlock(), createElementBlock("p", _hoisted_5, toDisplayString(unref(searching) ? text.value.searching : __props.emptyText), 1)) : createCommentVNode("", true),
+                        flat.value.length === 0 && !failed.value ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(unref(searching) ? text.value.searching : __props.emptyText), 1)) : createCommentVNode("", true),
                         createElementVNode("div", {
                           id: listId,
                           role: "listbox"
@@ -586,7 +648,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 key: 0,
                                 id: `${listId}-g${gi}`,
                                 class: "px-2 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted"
-                              }, toDisplayString(group.name), 9, _hoisted_7)) : createCommentVNode("", true),
+                              }, toDisplayString(group.name), 9, _hoisted_6)) : createCommentVNode("", true),
                               (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (c) => {
                                 return openBlock(), createBlock(resolveDynamicComponent(c.href ? "a" : "button"), {
                                   id: optionId(flatIndexOf(c)),
@@ -604,7 +666,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     flatIndexOf(c) === selectedIndex.value ? "bg-brand-soft text-brand" : unref(moreOf).has(c) ? "text-muted hover:bg-surface-soft/60" : "text-ink hover:bg-surface-soft/60"
                                   ]]),
                                   onClick: ($event) => onRowClick($event, c),
-                                  onPointerenter: ($event) => selectedIndex.value = flatIndexOf(c)
+                                  onPointerenter: ($event) => onPointerEnter(c)
                                 }, {
                                   default: withCtx(() => [
                                     c.icon ? (openBlock(), createBlock(_sfc_main$1, {
@@ -613,24 +675,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       size: 16,
                                       class: normalizeClass(["shrink-0", { "mt-0.5": c.excerpt }])
                                     }, null, 8, ["name", "class"])) : createCommentVNode("", true),
-                                    createElementVNode("span", _hoisted_8, [
-                                      createElementVNode("span", _hoisted_9, [
+                                    createElementVNode("span", _hoisted_7, [
+                                      createElementVNode("span", _hoisted_8, [
                                         (openBlock(true), createElementBlock(Fragment, null, renderList(highlight(c.label, c.highlight), (p, pi) => {
                                           return openBlock(), createElementBlock(Fragment, {
                                             key: `l${pi}`
                                           }, [
-                                            p.hit ? (openBlock(), createElementBlock("mark", _hoisted_10, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                            p.hit ? (openBlock(), createElementBlock("mark", _hoisted_9, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                               createTextVNode(toDisplayString(p.text), 1)
                                             ], 64))
                                           ], 64);
                                         }), 128))
                                       ]),
-                                      c.description ? (openBlock(), createElementBlock("span", _hoisted_11, [
+                                      c.description ? (openBlock(), createElementBlock("span", _hoisted_10, [
                                         (openBlock(true), createElementBlock(Fragment, null, renderList(highlight(c.description, c.highlight), (p, pi) => {
                                           return openBlock(), createElementBlock(Fragment, {
                                             key: `d${pi}`
                                           }, [
-                                            p.hit ? (openBlock(), createElementBlock("mark", _hoisted_12, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                            p.hit ? (openBlock(), createElementBlock("mark", _hoisted_11, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                               createTextVNode(toDisplayString(p.text), 1)
                                             ], 64))
                                           ], 64);
@@ -645,14 +707,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                           return openBlock(), createElementBlock(Fragment, {
                                             key: `e${pi}`
                                           }, [
-                                            p.hit ? (openBlock(), createElementBlock("mark", _hoisted_13, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                            p.hit ? (openBlock(), createElementBlock("mark", _hoisted_12, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                               createTextVNode(toDisplayString(p.text), 1)
                                             ], 64))
                                           ], 64);
                                         }), 128))
                                       ], 4)) : createCommentVNode("", true)
                                     ]),
-                                    c.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_14, toDisplayString(c.shortcut), 1)) : c.children ? (openBlock(), createBlock(_sfc_main$1, {
+                                    c.shortcut ? (openBlock(), createElementBlock("kbd", _hoisted_13, toDisplayString(c.shortcut), 1)) : c.children ? (openBlock(), createBlock(_sfc_main$1, {
                                       key: 2,
                                       name: "lucide:chevron-right",
                                       size: 14,
@@ -662,7 +724,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   _: 2
                                 }, 1064, ["id", "href", "type", "aria-selected", "aria-disabled", "data-cmd-index", "disabled", "class", "onClick", "onPointerenter"]);
                               }), 128))
-                            ], 8, _hoisted_6);
+                            ], 8, _hoisted_5);
                           }), 128))
                         ]),
                         failed.value ? (openBlock(), createElementBlock("div", {
@@ -690,7 +752,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }, 512),
                     createVNode(Transition, { name: "lp-cmd-pane" }, {
                       default: withCtx(() => [
-                        paneOpen.value ? (openBlock(), createElementBlock("aside", _hoisted_15, [
+                        paneOpen.value ? (openBlock(), createElementBlock("aside", _hoisted_14, [
                           createVNode(_sfc_main$2, {
                             ref_key: "previewRef",
                             ref: previewRef,
@@ -702,16 +764,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 key: active.value.id
                               }, [
                                 renderSlot(_ctx.$slots, "preview", { command: active.value }, () => [
-                                  createElementVNode("div", _hoisted_16, [
+                                  createElementVNode("div", _hoisted_15, [
                                     active.value.icon ? (openBlock(), createBlock(_sfc_main$1, {
                                       key: 0,
                                       name: active.value.icon,
                                       size: 16,
                                       class: "shrink-0 text-muted"
                                     }, null, 8, ["name"])) : createCommentVNode("", true),
-                                    createElementVNode("h3", _hoisted_17, toDisplayString(active.value.label), 1)
+                                    createElementVNode("h3", _hoisted_16, toDisplayString(active.value.label), 1)
                                   ]),
-                                  active.value.description ? (openBlock(), createElementBlock("p", _hoisted_18, toDisplayString(active.value.description), 1)) : createCommentVNode("", true),
+                                  active.value.description ? (openBlock(), createElementBlock("p", _hoisted_17, toDisplayString(active.value.description), 1)) : createCommentVNode("", true),
                                   (openBlock(true), createElementBlock(Fragment, null, renderList(paragraphs.value, (para, i) => {
                                     return openBlock(), createElementBlock("p", {
                                       key: i,
@@ -722,7 +784,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                         return openBlock(), createElementBlock(Fragment, {
                                           key: `p${pi}`
                                         }, [
-                                          p.hit ? (openBlock(), createElementBlock("mark", _hoisted_19, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                          p.hit ? (openBlock(), createElementBlock("mark", _hoisted_18, toDisplayString(p.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                             createTextVNode(toDisplayString(p.text), 1)
                                           ], 64))
                                         ], 64);
@@ -738,26 +800,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ]),
                       _: 3
                     })
-                  ]),
-                  createElementVNode("div", _hoisted_20, [
-                    createElementVNode("span", _hoisted_21, [
+                  ], 32),
+                  createElementVNode("div", _hoisted_19, [
+                    createElementVNode("span", _hoisted_20, [
                       _cache[7] || (_cache[7] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "↑", -1)),
                       _cache[8] || (_cache[8] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "↓", -1)),
                       createTextVNode(" " + toDisplayString(text.value.navigate), 1)
                     ]),
-                    createElementVNode("span", _hoisted_22, [
+                    createElementVNode("span", _hoisted_21, [
                       _cache[9] || (_cache[9] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "↵", -1)),
                       createTextVNode(" " + toDisplayString(text.value.select), 1)
                     ]),
-                    selectedActions.value.length ? (openBlock(), createElementBlock("span", _hoisted_23, [
+                    selectedActions.value.length ? (openBlock(), createElementBlock("span", _hoisted_22, [
                       _cache[10] || (_cache[10] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "tab", -1)),
                       createTextVNode(" " + toDisplayString(text.value.actions), 1)
                     ])) : createCommentVNode("", true),
-                    trail.value.length ? (openBlock(), createElementBlock("span", _hoisted_24, [
+                    trail.value.length ? (openBlock(), createElementBlock("span", _hoisted_23, [
                       _cache[11] || (_cache[11] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "⌫", -1)),
                       createTextVNode(" " + toDisplayString(text.value.back), 1)
                     ])) : createCommentVNode("", true),
-                    createElementVNode("span", _hoisted_25, [
+                    createElementVNode("span", _hoisted_24, [
                       _cache[12] || (_cache[12] = createElementVNode("kbd", { class: "rounded border border-line px-1 text-[10px]" }, "esc", -1)),
                       createTextVNode(" " + toDisplayString(text.value.close), 1)
                     ])
@@ -774,7 +836,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-19283172"]]);
+const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7bcd1140"]]);
 export {
   LpCommandPalette as default
 };

package/dist/composables/useHotkeys.d.ts

@@ -70,6 +70,8 @@ export declare function appleModifierLabel(key: string): string;
  * formality.
  */
 export interface UseHotkeysOptions {
+    enabled?: MaybeRefOrGetter<boolean>;
+    priority?: MaybeRefOrGetter<number>;
     /**
      * Only act while the focus is inside this element.
      *

package/dist/composables/useHotkeys.js

@@ -1,4 +1,4 @@
-import { shallowReactive, computed, onMounted, onBeforeUnmount, toValue } from "vue";
+import { shallowReactive, computed, toValue, onMounted, onBeforeUnmount } from "vue";
 const isAppleKeyboard = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || "");
 function appleModifierLabel(key) {
   if (!isAppleKeyboard) return key;
@@ -31,18 +31,24 @@ function matches(event, binding) {
   if (event.altKey !== Boolean(binding.alt)) return false;
   return event.key.toLowerCase() === binding.key.toLowerCase() || binding.code !== void 0 && event.code === binding.code;
 }
-function useHotkeys(bindings, options = {}) {
-  function inScope(target) {
-    const el = toValue(options.scope);
-    if (!el) return true;
-    const node = target instanceof Node ? target : null;
-    return !!node && (el === node || el.contains(node));
-  }
-  function onKeydown(event) {
-    if (event.isComposing) return;
-    if (!inScope(event.target)) return;
-    const inTextEntry = isTextEntry(event.target);
-    for (const binding of toValue(bindings)) {
+const mounted = shallowReactive(/* @__PURE__ */ new Set());
+let mountOrder = 0;
+let listening = false;
+function inScope(target, scope) {
+  const el = toValue(scope);
+  if (!el) return true;
+  const node = target instanceof Node ? target : null;
+  return !!node && (el === node || el.contains(node));
+}
+function onKeydown(event) {
+  if (event.isComposing) return;
+  const inTextEntry = isTextEntry(event.target);
+  const entries = [...mounted].sort(
+    (a, b) => Number(toValue(b.priority) || 0) - Number(toValue(a.priority) || 0) || b.order - a.order
+  );
+  for (const entry of entries) {
+    if (toValue(entry.enabled) === false || !inScope(event.target, entry.scope)) continue;
+    for (const binding of entry.read()) {
       if (inTextEntry && !binding.allowInInput) continue;
       if (!matches(event, binding)) continue;
       if (binding.handler(event) === false) continue;
@@ -50,17 +56,30 @@ function useHotkeys(bindings, options = {}) {
       return;
     }
   }
-  const read = () => toValue(bindings);
+}
+function useHotkeys(bindings, options = {}) {
+  const entry = {
+    read: () => toValue(bindings),
+    scope: options.scope,
+    enabled: options.enabled,
+    priority: options.priority,
+    order: ++mountOrder
+  };
   onMounted(() => {
-    window.addEventListener("keydown", onKeydown);
-    mounted.add(read);
+    mounted.add(entry);
+    if (!listening) {
+      window.addEventListener("keydown", onKeydown);
+      listening = true;
+    }
   });
   onBeforeUnmount(() => {
-    window.removeEventListener("keydown", onKeydown);
-    mounted.delete(read);
+    mounted.delete(entry);
+    if (!mounted.size && listening) {
+      window.removeEventListener("keydown", onKeydown);
+      listening = false;
+    }
   });
 }
-const mounted = shallowReactive(/* @__PURE__ */ new Set());
 const KEY_NAMES = {
   escape: "Esc",
   enter: "Enter",
@@ -80,8 +99,9 @@ function comboOf(binding) {
 }
 const activeShortcuts = computed(() => {
   const groups = /* @__PURE__ */ new Map();
-  for (const read of mounted) {
-    for (const binding of read()) {
+  for (const entry of mounted) {
+    if (toValue(entry.enabled) === false) continue;
+    for (const binding of entry.read()) {
       if (!binding.help) continue;
       const combo = binding.help.combo ?? comboOf(binding);
       const entries = groups.get(binding.help.group) ?? [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpCommandPalette.vue

@@ -276,6 +276,7 @@ function optionId(index: number): string {
 }
 const activeId = computed(() => (flat.value.length ? optionId(selectedIndex.value) : undefined))
 const selectedIndex = ref(0)
+const selectedId = ref<string | null>(null)
 const inputRef = ref<HTMLInputElement | null>(null)
 const scrollRef = ref<{ viewportEl: HTMLElement | null } | null>(null)
 
@@ -290,6 +291,7 @@ const scrollRef = ref<{ viewportEl: HTMLElement | null } | null>(null)
  * a row of data), and deep-tracking them would walk it on every keystroke.
  */
 const trail = shallowRef<Command[]>([])
+const trailState = shallowRef<{ query: string; selectedId: string | null }[]>([])
 const mode = computed<Command | null>(() => trail.value[trail.value.length - 1] ?? null)
 
 /*
@@ -332,21 +334,20 @@ const selectedActions = computed(() => actionsOf(flat.value[selectedIndex.value]
  * actions it keeps that default.
  */
 function onTab(event: KeyboardEvent) {
+  event.preventDefault()
+  event.stopPropagation()
   if (event.shiftKey) return
   const c = flat.value[selectedIndex.value]
   const actions = selectedActions.value
   if (!c || !actions.length) return
-  // The dialog's focus trap handles Tab too, and would hand focus to the
-  // mode chip this is about to render.
-  event.preventDefault()
-  event.stopPropagation()
   enter({ id: `${c.id}:actions`, label: c.label, icon: c.icon, children: actions })
 }
 
 function enter(c: Command) {
+  trailState.value = [...trailState.value, { query: query.value, selectedId: selectedId.value }]
   trail.value = [...trail.value, c]
   query.value = ""
-  selectedIndex.value = 0
+  select(0)
   modeItems.value = Array.isArray(c.children) ? c.children : []
   refresh()
   // Entering by click leaves the focus on the button that no longer exists,
@@ -357,13 +358,19 @@ function enter(c: Command) {
 
 /** Unwind the trail to `depth` entries — 0 is the root. */
 function popTo(depth: number) {
+  const state = trailState.value[depth] || { query: "", selectedId: null }
   const next = trail.value.slice(0, Math.max(0, depth))
+  trailState.value = trailState.value.slice(0, Math.max(0, depth))
   trail.value = next
-  query.value = ""
-  selectedIndex.value = 0
   const parent = next[next.length - 1]
   modeItems.value = parent && Array.isArray(parent.children) ? parent.children : []
+  query.value = state.query
+  select(0)
   refresh()
+  void nextTick(() => {
+    const index = state.selectedId ? flat.value.findIndex((c) => c.id === state.selectedId) : -1
+    select(index >= 0 ? index : 0)
+  })
   inputRef.value?.focus()
 }
 
@@ -487,12 +494,43 @@ function nearWord(term: string, label: string): boolean {
  * the same weights the palette always had; a typo match ranks below all of
  * them, so an exact hit is never outranked by a near one.
  */
-function score(c: Command, terms: string[]): number {
+interface SearchTerms {
+  include: string[]
+  exclude: string[]
+  groups: string[]
+}
+
+const QUERY_TOKEN = /(-?)(?:(in):)?(?:"([^"]*)"|(\S+))/giu
+
+function searchTerms(value: string): SearchTerms {
+  const out: SearchTerms = { include: [], exclude: [], groups: [] }
+  QUERY_TOKEN.lastIndex = 0
+  for (let match; (match = QUERY_TOKEN.exec(value)); ) {
+    const text = (match[3] ?? match[4] ?? "").trim().toLowerCase()
+    if (!text) continue
+    if (match[2] && !match[1]) out.groups.push(text)
+    else if (match[1]) out.exclude.push(text)
+    else out.include.push(text)
+  }
+  return out
+}
+
+function matches(c: Command, term: string): boolean {
+  return (
+    c.label.toLowerCase().includes(term) ||
+    (c.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(term)) ||
+    (c.description?.toLowerCase().includes(term) ?? false)
+  )
+}
+
+function score(c: Command, terms: SearchTerms): number {
   const label = c.label.toLowerCase()
   const keywords = (c.keywords ?? []).map((k) => k.toLowerCase())
   const description = c.description?.toLowerCase() ?? ""
-  let total = 0
-  for (const term of terms) {
+  const group = c.group?.toLowerCase() ?? ""
+  if (terms.exclude.some((term) => matches(c, term)) || terms.groups.some((term) => !group.includes(term))) return 0
+  let total = terms.include.length ? 0 : 1
+  for (const term of terms.include) {
     let hit =
       (label.includes(term) ? 4 : 0) +
       (keywords.some((k) => k.includes(term)) ? 3 : 0) +
@@ -504,7 +542,7 @@ function score(c: Command, terms: string[]): number {
   return total
 }
 
-function rank(items: Command[], terms: string[]): Command[] {
+function rank(items: Command[], terms: SearchTerms): Command[] {
   return items
     .map((c) => ({ c, score: score(c, terms) }))
     .filter((e) => e.score > 0)
@@ -512,22 +550,27 @@ function rank(items: Command[], terms: string[]): Command[] {
     .map((e) => e.c)
 }
 
-const typedTerms = computed(() => query.value.trim().toLowerCase().split(/\s+/).filter(Boolean))
-
 /*
  * The local match and the terms it matched with — the swapped ones when the
  * layout fallback is what found it, so the highlight marks what actually hit.
  */
 const local = computed<{ items: Command[]; terms: string[] }>(() => {
-  const terms = typedTerms.value
+  const terms = searchTerms(query.value)
+  const filtered = query.value.trim()
+    ? source.value
+    : source.value.filter((c) => !c.hidden)
   // Empty query: show everything EXCEPT hidden commands (they only surface once
   // typed). With a query, hidden commands rank like any other.
-  if (!terms.length) return { items: source.value.filter((c) => !c.hidden), terms }
-  const items = rank(source.value, terms)
-  if (items.length || !props.layoutFallback) return { items, terms }
-  const swapped = terms.map(swapLayout)
-  const other = rank(source.value, swapped)
-  return other.length ? { items: other, terms: swapped } : { items, terms }
+  if (!terms.include.length && !terms.exclude.length && !terms.groups.length) return { items: filtered, terms: [] }
+  const items = rank(filtered, terms)
+  if (items.length || !props.layoutFallback) return { items, terms: terms.include }
+  const swapped: SearchTerms = {
+    include: terms.include.map(swapLayout),
+    exclude: terms.exclude.map(swapLayout),
+    groups: terms.groups.map(swapLayout),
+  }
+  const other = rank(filtered, swapped)
+  return other.length ? { items: other, terms: swapped.include } : { items, terms: terms.include }
 })
 
 const ranked = computed<Command[]>(() => local.value.items)
@@ -706,16 +749,17 @@ function highlight(value: string, extra: string[] = []): Part[] {
 
 // ── selection + keyboard ─────────────────────────────────────
 watch(query, () => {
-  selectedIndex.value = 0
+  select(0)
   refresh()
 })
 watch([query, trail, () => props.open], () => {
   expanded.value = new Set()
 })
 watch(
-  () => flat.value.length,
-  (len) => {
-    if (selectedIndex.value >= len) selectedIndex.value = Math.max(0, len - 1)
+  () => flat.value.map((c) => c.id).join("|"),
+  () => {
+    const index = selectedId.value ? flat.value.findIndex((c) => c.id === selectedId.value) : -1
+    select(index >= 0 ? index : 0)
   },
 )
 watch([selectedIndex, () => flat.value.map((c) => c.id).join("|")], async () => {
@@ -730,13 +774,42 @@ function scrollSelectedIntoView() {
   el?.scrollIntoView({ block: "nearest" })
 }
 
+const keyboardSelection = ref(false)
+
+function select(index: number, keyboard = false) {
+  const len = flat.value.length
+  selectedIndex.value = len ? Math.max(0, Math.min(index, len - 1)) : 0
+  selectedId.value = flat.value[selectedIndex.value]?.id ?? null
+  if (keyboard) keyboardSelection.value = true
+}
+
 function moveDown() {
   const len = flat.value.length
-  if (len) selectedIndex.value = (selectedIndex.value + 1) % len
+  if (len) select((selectedIndex.value + 1) % len, true)
 }
 function moveUp() {
   const len = flat.value.length
-  if (len) selectedIndex.value = (selectedIndex.value - 1 + len) % len
+  if (len) select((selectedIndex.value - 1 + len) % len, true)
+}
+function movePage(direction: -1 | 1) {
+  select(selectedIndex.value + direction * 8, true)
+}
+function onPaletteKeydown(event: KeyboardEvent) {
+  if (event.isComposing) return
+  if (!(["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp"] as string[]).includes(event.key)) return
+  event.preventDefault()
+  event.stopPropagation()
+  if (event.key === "ArrowDown") moveDown()
+  else if (event.key === "ArrowUp") moveUp()
+  else if (event.key === "Home") select(0, true)
+  else if (event.key === "End") select(flat.value.length - 1, true)
+  else movePage(event.key === "PageDown" ? 1 : -1)
+}
+function onPointerMove() {
+  keyboardSelection.value = false
+}
+function onPointerEnter(c: Command) {
+  if (!keyboardSelection.value) select(flatIndexOf(c))
 }
 function runSelected(event?: KeyboardEvent) {
   const c = flat.value[selectedIndex.value]
@@ -789,7 +862,7 @@ function run(c: Command | undefined) {
     // Back to the top of a fresh list: the query that found this command is
     // spent, and leaving it would hide whatever the action just changed.
     query.value = ""
-    selectedIndex.value = 0
+    select(0)
     inputRef.value?.focus()
     return
   }
@@ -833,8 +906,10 @@ watch(
   async (o) => {
     cancel()
     query.value = ""
-    selectedIndex.value = 0
+    select(0)
+    selectedId.value = null
     trail.value = []
+    trailState.value = []
     modeItems.value = []
     found.value = []
     failed.value = false
@@ -876,6 +951,7 @@ useHotkeys(() =>
         :class="[frosted ? 'lp-glass-overlay' : 'bg-surface-raised', previewPane && 'lp-cmd-split']"
         :data-pane="paneOpen ? 'open' : undefined"
         @open-auto-focus.prevent
+        @keydown.capture="onPaletteKeydown"
       >
         <DialogTitle class="sr-only">Command palette</DialogTitle>
         <DialogDescription class="sr-only">Search and run a command.</DialogDescription>
@@ -916,8 +992,6 @@ useHotkeys(() =>
             :aria-activedescendant="activeId"
             :placeholder="mode?.childPlaceholder ?? placeholder"
             class="h-12 min-w-0 flex-1 bg-transparent text-sm text-ink outline-none placeholder:text-muted"
-            @keydown.down.prevent="moveDown"
-            @keydown.up.prevent="moveUp"
             @keydown.enter.prevent="runSelected"
             @keydown.backspace="onBackspace"
             @keydown.esc="onEscape"
@@ -927,7 +1001,7 @@ useHotkeys(() =>
         </div>
 
         <!-- Results -->
-        <div class="flex min-h-0 flex-1">
+        <div class="flex min-h-0 flex-1" @pointermove="onPointerMove">
           <LpScrollArea ref="scrollRef" class="lp-cmd-list min-h-0 min-w-0 flex-1" content-class="p-2">
             <!-- While a request is out there is nothing to say yet: "no results"
                  under a spinner reads as an answer, and it is not one. -->
@@ -974,7 +1048,7 @@ useHotkeys(() =>
                         : 'text-ink hover:bg-surface-soft/60',
                   ]"
                   @click="onRowClick($event, c)"
-                  @pointerenter="selectedIndex = flatIndexOf(c)"
+                  @pointerenter="onPointerEnter(c)"
                 >
                   <LpIcon v-if="c.icon" :name="c.icon" :size="16" class="shrink-0" :class="{ 'mt-0.5': c.excerpt }" />
                   <span class="min-w-0 flex-1">

package/src/composables/useHotkeys.ts

@@ -142,6 +142,8 @@ function matches(event: KeyboardEvent, binding: HotkeyBinding): boolean {
  * formality.
  */
 export interface UseHotkeysOptions {
+  enabled?: MaybeRefOrGetter<boolean>
+  priority?: MaybeRefOrGetter<number>
   /**
    * Only act while the focus is inside this element.
    *
@@ -157,52 +159,70 @@ export interface UseHotkeysOptions {
   scope?: MaybeRefOrGetter<HTMLElement | null | undefined>
 }
 
-export function useHotkeys(
-  bindings: MaybeRefOrGetter<HotkeyBinding[]>,
-  options: UseHotkeysOptions = {},
-) {
-  function inScope(target: EventTarget | null): boolean {
-    const el = toValue(options.scope)
-    if (!el) return true
-    const node = target instanceof Node ? target : null
-    // The element itself counts: a focusable canvas holds the focus without
-    // containing anything that could.
-    return !!node && (el === node || el.contains(node))
-  }
+interface MountedHotkeys {
+  read: () => HotkeyBinding[]
+  scope: MaybeRefOrGetter<HTMLElement | null | undefined> | undefined
+  enabled: MaybeRefOrGetter<boolean> | undefined
+  priority: MaybeRefOrGetter<number> | undefined
+  order: number
+}
 
-  function onKeydown(event: KeyboardEvent) {
-    if (event.isComposing) return
-    if (!inScope(event.target)) return
-    const inTextEntry = isTextEntry(event.target)
-    for (const binding of toValue(bindings)) {
+const mounted = shallowReactive(new Set<MountedHotkeys>())
+let mountOrder = 0
+let listening = false
+
+function inScope(target: EventTarget | null, scope: MountedHotkeys["scope"]): boolean {
+  const el = toValue(scope)
+  if (!el) return true
+  const node = target instanceof Node ? target : null
+  return !!node && (el === node || el.contains(node))
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.isComposing) return
+  const inTextEntry = isTextEntry(event.target)
+  const entries = [...mounted].sort(
+    (a, b) => Number(toValue(b.priority) || 0) - Number(toValue(a.priority) || 0) || b.order - a.order,
+  )
+  for (const entry of entries) {
+    if (toValue(entry.enabled) === false || !inScope(event.target, entry.scope)) continue
+    for (const binding of entry.read()) {
       if (inTextEntry && !binding.allowInInput) continue
       if (!matches(event, binding)) continue
-      // Claimed only once the handler has run and not declined, so a binding
-      // that stands down leaves the key untouched for whoever handles it next.
       if (binding.handler(event) === false) continue
       event.preventDefault()
       return
     }
   }
+}
 
-  const read = () => toValue(bindings)
+export function useHotkeys(
+  bindings: MaybeRefOrGetter<HotkeyBinding[]>,
+  options: UseHotkeysOptions = {},
+) {
+  const entry: MountedHotkeys = {
+    read: () => toValue(bindings),
+    scope: options.scope,
+    enabled: options.enabled,
+    priority: options.priority,
+    order: ++mountOrder,
+  }
   onMounted(() => {
-    window.addEventListener("keydown", onKeydown)
-    mounted.add(read)
+    mounted.add(entry)
+    if (!listening) {
+      window.addEventListener("keydown", onKeydown)
+      listening = true
+    }
   })
   onBeforeUnmount(() => {
-    window.removeEventListener("keydown", onKeydown)
-    mounted.delete(read)
+    mounted.delete(entry)
+    if (!mounted.size && listening) {
+      window.removeEventListener("keydown", onKeydown)
+      listening = false
+    }
   })
 }
 
-/*
- * Every mounted binding list, in mount order. The lists are getters, so the
- * reference below follows the state behind them too: a binding that only
- * exists while a mode is on shows up and goes away with that mode.
- */
-const mounted = shallowReactive(new Set<() => HotkeyBinding[]>())
-
 const KEY_NAMES: Record<string, string> = {
   escape: "Esc",
   enter: "Enter",
@@ -230,8 +250,9 @@ function comboOf(binding: HotkeyBinding): string {
  */
 export const activeShortcuts = computed<ShortcutGroup[]>(() => {
   const groups = new Map<string, ShortcutEntry[]>()
-  for (const read of mounted) {
-    for (const binding of read()) {
+  for (const entry of mounted) {
+    if (toValue(entry.enabled) === false) continue
+    for (const binding of entry.read()) {
       if (!binding.help) continue
       const combo = binding.help.combo ?? comboOf(binding)
       const entries = groups.get(binding.help.group) ?? []