@leavepulse/ui 0.41.0 → 0.43.0

package/dist/components/commandSearch.js

@@ -0,0 +1,66 @@
+const QUERY_TOKEN = /(-?)(?:(in):)?(?:"([^"]*)"|(\S+))/giu;
+const LATIN = "qwertyuiop[]asdfghjkl;'zxcvbnm,.`";
+const CYRILLIC = "йцукенгшщзхъфывапролджэячсмитьбюё";
+const SWAP = /* @__PURE__ */ new Map();
+for (let i = 0; i < LATIN.length; i++) {
+  SWAP.set(LATIN[i], CYRILLIC[i]);
+  SWAP.set(CYRILLIC[i], LATIN[i]);
+}
+function parseCommandQuery(value) {
+  const out = { 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 swapCommandTerms(terms) {
+  const swap = (term) => [...term].map((ch) => SWAP.get(ch) ?? ch).join("");
+  return {
+    include: terms.include.map(swap),
+    exclude: terms.exclude.map(swap),
+    groups: terms.groups.map(swap)
+  };
+}
+function matches(command, term) {
+  return command.label.toLowerCase().includes(term) || (command.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(term)) || (command.description?.toLowerCase().includes(term) ?? false);
+}
+function withinOne(a, b) {
+  if (Math.abs(a.length - b.length) > 1) return false;
+  let i = 0;
+  while (i < a.length && i < b.length && a[i] === b[i]) i++;
+  if (i === a.length || i === b.length) return true;
+  const rest = (x, y) => a.slice(i + x) === b.slice(i + y);
+  return rest(1, 1) || rest(1, 0) || rest(0, 1) || a[i] === b[i + 1] && a[i + 1] === b[i] && rest(2, 2);
+}
+function nearWord(term, label) {
+  if (term.length < 5) 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)));
+}
+function score(command, terms) {
+  const label = command.label.toLowerCase();
+  const keywords = (command.keywords ?? []).map((keyword) => keyword.toLowerCase());
+  const description = command.description?.toLowerCase() ?? "";
+  const group = command.group?.toLowerCase() ?? "";
+  if (terms.exclude.some((term) => matches(command, 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((keyword) => keyword.includes(term)) ? 3 : 0) + (description.includes(term) ? 2 : 0);
+    if (!hit && nearWord(term, label)) hit = 1;
+    if (!hit) return 0;
+    total += hit;
+  }
+  return total;
+}
+function rankCommandItems(items, terms) {
+  return items.map((command) => ({ command, score: score(command, terms) })).filter((entry) => entry.score > 0).sort((a, b) => b.score - a.score || a.command.label.localeCompare(b.command.label)).map((entry) => entry.command);
+}
+export {
+  parseCommandQuery,
+  rankCommandItems,
+  swapCommandTerms
+};

package/dist/components/modalDepth.js

@@ -18,8 +18,9 @@ function useModalLayer() {
     layer: computed(() => {
       const drop = fromTop.value * STEP;
       return {
-        scrim: `calc(var(--z-overlay) - ${drop})`,
-        panel: `calc(var(--z-modal) - ${drop})`
+        scrim: `calc(var(--z-toast) - 20 - ${drop})`,
+        panel: `calc(var(--z-toast) - 10 - ${drop})`,
+        nested: stack.value.indexOf(id) > 0
       };
     })
   };

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/dist/index.js

@@ -1,10 +1,10 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CMjaPQVw.js";
+import { _ as _2 } from "./chunks/LpAddressInput-B-Zvxsn7.js";
 import { _ as _3 } from "./chunks/LpMapPicker-ul4oYno6.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BlvtGB2P.js";
 import { _ as _5 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _6 } from "./chunks/LpAppShell-Bcv6EhqU.js";
+import { _ as _6 } from "./chunks/LpAppShell-BGQVIY-3.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DExlIZe_.js";
 import { _ as _8 } from "./chunks/LpAvatar-B3-xAOH3.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
@@ -19,12 +19,13 @@ import { _ as _15 } from "./chunks/LpCodeBlock-Bo0B4TFR.js";
 import { _ as _16 } from "./chunks/LpColorPicker-BlXea7LM.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
-import { _ as _17 } from "./chunks/LpConfirmDialog-BNAvOR24.js";
+import { parseCommandQuery, rankCommandItems, swapCommandTerms } from "./components/commandSearch.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-Q-bxff8z.js";
 import { _ as _18 } from "./chunks/LpContextMenu-CwW1QXe_.js";
 import { _ as _19 } from "./chunks/LpDatePicker-CwOToxGq.js";
 import { _ as _20 } from "./chunks/LpDisclosure-ChQYmjlR.js";
 import { _ as _21 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _22 } from "./chunks/LpDrawer-DgaS2s2i.js";
+import { _ as _22 } from "./chunks/LpDrawer-BZ6k3hvo.js";
 import { _ as _23 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { default as default4 } from "./components/LpDropzone.vue.js";
 import { _ as _24 } from "./chunks/LpEmptyState-Dsdqz1Wj.js";
@@ -35,13 +36,13 @@ import { _ as _27 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { default as default5 } from "./components/LpImageEditor.vue.js";
 import { _ as _28 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
 import { _ as _29 } from "./chunks/LpInput-9EXWUM9B.js";
-import { _ as _30 } from "./chunks/LpLightbox-oLqyjOln.js";
+import { _ as _30 } from "./chunks/LpLightbox-2sYVMY-S.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _31 } from "./chunks/LpLink-DCND-zyu.js";
 import { _ as _32 } from "./chunks/LpLogViewer-CaRy5MeS.js";
-import { _ as _33 } from "./chunks/LpMediaGallery-Cid7PGYx.js";
-import { _ as _34 } from "./chunks/LpModal-8bja5bWS.js";
-import { _ as _35 } from "./chunks/LpModalNav-w9kfwHqO.js";
+import { _ as _33 } from "./chunks/LpMediaGallery-FF-NquIo.js";
+import { _ as _34 } from "./chunks/LpModal-Bt0pQCI_.js";
+import { _ as _35 } from "./chunks/LpModalNav-YaifHrXC.js";
 import { _ as _36 } from "./chunks/LpNotificationBell-DyGGsMAM.js";
 import { _ as _37 } from "./chunks/LpNumberField-CWuX08iX.js";
 import { _ as _38 } from "./chunks/LpTimeField-K6nAGboX.js";
@@ -64,7 +65,7 @@ import { _ as _53 } from "./chunks/LpSelect-ANIVtrpM.js";
 import { _ as _54 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _55 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _56 } from "./chunks/LpSidebar-DlTn5nXc.js";
+import { _ as _56 } from "./chunks/LpSidebar-ClBUwoEz.js";
 import { _ as _57 } from "./chunks/LpSkeleton-CTI-vBgW.js";
 import { _ as _58 } from "./chunks/LpSlider-BwNIBkAK.js";
 import { _ as _59 } from "./chunks/LpSparkline-C6xQ2dwv.js";
@@ -270,6 +271,7 @@ export {
   normalizeHue,
   opaqueCss,
   parseColor,
+  parseCommandQuery,
   parseConfig,
   parseHex,
   parseTheme,
@@ -277,6 +279,7 @@ export {
   presets,
   project,
   provideGlass,
+  rankCommandItems,
   removeBlock,
   removeLeaf,
   reorderTab,
@@ -292,6 +295,7 @@ export {
   sortNodes,
   subtreeIds,
   subtreeSize,
+  swapCommandTerms,
   t as themeFromCookie,
   k as themeToCssRule,
   m as themeToCssVars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.41.0",
+  "version": "0.43.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -45,10 +45,11 @@
   "scripts": {
     "dev": "vite",
     "gen:names": "node scripts/gen-component-names.mjs",
-    "build": "node scripts/gen-component-names.mjs && vue-tsc --noEmit -p tsconfig.build.json && vite build --config vite.lib.config.ts",
+    "build": "node scripts/gen-component-names.mjs && vue-tsc --noEmit -p tsconfig.build.json && vite build --config vite.lib.config.ts && vue-tsc --declaration --emitDeclarationOnly --noEmit false -p tsconfig.build.json --outDir dist",
     "dev:dist": "vite build --watch --config vite.lib.config.ts",
     "prepublishOnly": "node scripts/gen-component-names.mjs && vue-tsc --noEmit -p tsconfig.build.json && vite build --config vite.lib.config.ts",
     "typecheck": "vue-tsc --noEmit",
+    "test": "bun test",
     "release": "npm version patch -m \"chore: release v%s\" && git push --follow-tags",
     "release:minor": "npm version minor -m \"chore: release v%s\" && git push --follow-tags",
     "release:major": "npm version major -m \"chore: release v%s\" && git push --follow-tags"
@@ -83,7 +84,6 @@
     "tailwindcss": "^4.2.4",
     "typescript": "^5.6.3",
     "vite": "^7.0.0",
-    "vite-plugin-dts": "^5.0.2",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vue": "3.5.31",
     "vue-tsc": "^3.0.0"

package/src/components/LpCommandPalette.vue

@@ -36,13 +36,15 @@ import {
   DialogRoot,
   DialogTitle,
 } from "reka-ui"
-import { computed, nextTick, ref, shallowRef, useId, watch } from "vue"
+import { computed, nextTick, onBeforeUnmount, ref, shallowRef, useId, watch } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import { useAsyncTask } from "../composables/useAsyncTask"
 import { useGlass } from "../composables/useGlass"
 import { useClipboard } from "../composables/useClipboard"
 import { useHotkeys } from "../composables/useHotkeys"
+import { useModalLayer } from "./modalDepth"
+import { parseCommandQuery, rankCommandItems, swapCommandTerms } from "./commandSearch"
 
 export interface Command {
   id: string
@@ -234,6 +236,7 @@ const props = withDefaults(
 )
 
 const frosted = useGlass(() => props.glass)
+const { claim, release, layer } = useModalLayer()
 
 const DEFAULT_LABELS: PaletteLabels = {
   navigate: "navigate",
@@ -276,6 +279,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 +294,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 +337,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 +361,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()
 }
 
@@ -446,88 +456,23 @@ const source = computed<Command[]>(() => (mode.value ? modeItems.value : props.c
  * the one bilingual setup common enough to be worth a table — and it is a
  * fallback, tried only when the query as typed matches nothing.
  */
-const LATIN = "qwertyuiop[]asdfghjkl;'zxcvbnm,.`"
-const CYRILLIC = "йцукенгшщзхъфывапролджэячсмитьбюё"
-const SWAP = new Map<string, string>()
-for (let i = 0; i < LATIN.length; i++) {
-  SWAP.set(LATIN[i]!, CYRILLIC[i]!)
-  SWAP.set(CYRILLIC[i]!, LATIN[i]!)
-}
-
-function swapLayout(term: string): string {
-  return [...term].map((ch) => SWAP.get(ch) ?? ch).join("")
-}
-
-/** Damerau-Levenshtein distance, giving up past 1: all a typo check needs. */
-function withinOne(a: string, b: string): boolean {
-  if (Math.abs(a.length - b.length) > 1) return false
-  let i = 0
-  while (i < a.length && i < b.length && a[i] === b[i]) i++
-  if (i === a.length || i === b.length) return true
-  const rest = (x: number, y: number) => a.slice(i + x) === b.slice(i + y)
-  return rest(1, 1) || rest(1, 0) || rest(0, 1) || (a[i] === b[i + 1] && a[i + 1] === b[i] && rest(2, 2))
-}
-
-/*
- * A typo in a word long enough to have one: a slip in a three-letter word
- * makes it a different word. Compared against the word and its start, so
- * "deplyo" finds "deploy" and "deployment" alike.
- */
-const TYPO_MIN = 5
-function nearWord(term: string, label: string): boolean {
-  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))))
-}
-
-/*
- * Every word of the query has to land somewhere, in any order: "branch deploy"
- * finds "Deploy current branch". Per word, label > keywords > description,
- * 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 {
-  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) {
-    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
-    total += hit
-  }
-  return total
-}
-
-function rank(items: Command[], terms: string[]): Command[] {
-  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))
-
 /*
  * 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 = parseCommandQuery(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 = rankCommandItems(filtered, terms)
+  if (items.length || !props.layoutFallback) return { items, terms: terms.include }
+  const swapped = swapCommandTerms(terms)
+  const other = rankCommandItems(filtered, swapped)
+  return other.length ? { items: other, terms: swapped.include } : { items, terms: terms.include }
 })
 
 const ranked = computed<Command[]>(() => local.value.items)
@@ -706,16 +651,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 +676,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 +764,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
   }
@@ -831,10 +806,14 @@ function onEscape(event: KeyboardEvent) {
 watch(
   () => props.open,
   async (o) => {
+    if (o) claim()
+    else release()
     cancel()
     query.value = ""
-    selectedIndex.value = 0
+    select(0)
+    selectedId.value = null
     trail.value = []
+    trailState.value = []
     modeItems.value = []
     found.value = []
     failed.value = false
@@ -846,6 +825,8 @@ watch(
   { immediate: true },
 )
 
+onBeforeUnmount(release)
+
 // Through useHotkeys rather than a listener of its own: the palette is the one
 // shortcut that has to work from inside a text field, and `code` is what makes
 // it fire on a layout where Ctrl-K arrives as "л".
@@ -868,14 +849,17 @@ useHotkeys(() =>
   <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogPortal>
       <DialogOverlay
-        :class="{ 'lp-scrim--light': frosted }"
-        class="lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
+        :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested }"
+        class="lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
+        :style="{ zIndex: layer.scrim }"
       />
       <DialogContent
-        class="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]"
-        :class="[frosted ? 'lp-glass-overlay' : 'bg-surface-raised', previewPane && 'lp-cmd-split']"
+        class="lp-cmd-dialog fixed left-1/2 top-[12vh] 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]"
+        :class="[frosted ? (layer.nested ? 'lp-glass-overlay--nested' : 'lp-glass-overlay') : 'bg-surface-raised', previewPane && 'lp-cmd-split']"
+        :style="{ zIndex: layer.panel }"
         :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 +900,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 +909,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 +956,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/components/LpDrawer.vue

@@ -153,7 +153,7 @@ watch(() => props.open, (open) => (open ? claim() : release()), { immediate: tru
 onBeforeUnmount(release)
 
 const contentClass = computed(() => {
-  const surface = frosted.value ? "lp-glass-overlay" : "bg-surface-raised"
+  const surface = frosted.value ? (layer.value.nested ? "lp-glass-overlay--nested" : "lp-glass-overlay") : "bg-surface-raised"
   const base = `fixed z-(--z-modal) flex flex-col border-line ${surface} shadow-panel outline-none`
   const map: Record<Direction, string> = {
     left: "inset-y-0 left-0 border-r rounded-r-card",
@@ -443,7 +443,7 @@ const previewStyle = computed(() => {
     <div
       v-show="peeking || peek > 0"
       class="lp-scrim pointer-events-none fixed inset-0"
-      :class="{ 'lp-scrim--light': frosted }"
+      :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested }"
       :style="{ zIndex: layer.scrim, opacity: peek, transition: peeking || reducedMotion() ? 'none' : 'opacity 0.18s ease-out' }"
     />
     <div
@@ -476,7 +476,7 @@ const previewStyle = computed(() => {
       <DrawerOverlay
         :style="{ zIndex: layer.scrim }"
         class="lp-scrim fixed inset-0 z-(--z-overlay) data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
-        :class="{ 'lp-scrim--light': frosted }"
+        :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested }"
       />
       <DrawerContent
         :class="contentClass"