@leavepulse/ui 0.43.4 → 0.45.0

package/src/components/LpCodeBlock.vue

@@ -24,7 +24,8 @@ export default { inheritAttrs: false }
  */
 import { computed, reactive, ref, watch } from "vue"
 import { useClipboard } from "../composables/useClipboard"
-import { type CodeLang, tokenizeLine } from "./codeHighlight"
+import { type CodeLang, tokenizeLines } from "./codeHighlight"
+import { useLabels } from "../composables/useLpConfig"
 import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
@@ -49,6 +50,7 @@ const props = withDefaults(
     height?: string
     /** Auto-collapse a leading import/package block (no markers needed). */
     foldImports?: boolean
+    labels?: Partial<Record<"unlock" | "lock" | "copy" | "copied" | "imports" | "details" | "lines", string>>
   }>(),
   {
     lang: "plain",
@@ -66,6 +68,21 @@ const emit = defineEmits<{
   (e: "update:locked", value: boolean): void
 }>()
 
+const text = useLabels(
+  "codeBlock",
+  {
+    unlock: "Unlock to edit",
+    lock: "Lock (read-only)",
+    copy: "Copy code",
+    copied: "Copied",
+    imports: "imports",
+    details: "details",
+    /** `{n}` is replaced by the count. */
+    lines: "({n} lines)",
+  },
+  () => props.labels,
+)
+
 const code = computed(() => props.modelValue ?? "")
 const rawLines = computed(() => code.value.replace(/\n$/, "").split("\n"))
 
@@ -114,7 +131,7 @@ const segments = computed<Segment[]>(() => {
       flushPlain()
       const lines: NumberedLine[] = []
       for (let k = start; k < realEnd; k++) lines.push({ n: k + 1, text: src[k] })
-      out.push({ kind: "fold", id: foldId++, label: "imports", defaultOpen: false, lines })
+      out.push({ kind: "fold", id: foldId++, label: text.value.imports, defaultOpen: false, lines })
       i = realEnd
     }
   }
@@ -126,7 +143,7 @@ const segments = computed<Segment[]>(() => {
       flushPlain()
       const rest = startMatch[1] ?? ""
       const defaultOpen = /\bopen\b/.test(rest)
-      const label = rest.replace(/\bopen\b/, "").trim() || "details"
+      const label = rest.replace(/\bopen\b/, "").trim() || text.value.details
       const lines: NumberedLine[] = []
       i++
       for (; i < src.length; i++) {
@@ -143,6 +160,7 @@ const segments = computed<Segment[]>(() => {
 })
 
 const hasFolds = computed(() => segments.value.some((s) => s.kind === "fold"))
+const editing = computed(() => !props.locked && !hasFolds.value)
 
 // Per-region open state, keyed by fold id, defaulting to each region's declared
 // open flag. Reset when the set of folds changes.
@@ -159,9 +177,21 @@ function toggleFold(id: number) {
   openState[id] = !openState[id]
 }
 
-/** Highlight one line's text into tokens. */
-function tokens(text: string) {
-  return tokenizeLine(text, props.lang)
+/* Highlighted once for the whole snippet, so a block comment that spans lines
+   is coloured as one; looked up by the line's 1-based number. */
+const highlighted = computed(() => tokenizeLines(rawLines.value, props.lang))
+function tokens(n: number) {
+  return highlighted.value[n - 1] ?? []
+}
+
+/* The textarea is the scroller while editing; the highlighted copy under it
+   follows, or the caret drifts over the wrong text on a long line. */
+const preEl = ref<HTMLElement | null>(null)
+function syncScroll(e: Event) {
+  const area = e.target as HTMLTextAreaElement
+  if (!preEl.value) return
+  preEl.value.scrollLeft = area.scrollLeft
+  preEl.value.scrollTop = area.scrollTop
 }
 
 // Copied text is the real code with marker lines removed (so it pastes clean),
@@ -214,7 +244,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           v-if="lockToggle"
           type="button"
           class="group/lock flex items-center gap-1 rounded px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
-          :aria-label="locked ? 'Unlock to edit' : 'Lock (read-only)'"
+          :aria-label="locked ? text.unlock : text.lock"
           @click="toggleLock"
         >
           <LpIcon
@@ -227,7 +257,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           v-if="copyable"
           type="button"
           class="group/copy flex items-center gap-1 rounded px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
-          :aria-label="copied ? 'Copied' : 'Copy code'"
+          :aria-label="copied ? text.copied : text.copy"
           @click="copy"
         >
           <LpIcon
@@ -245,7 +275,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     <div
       class="lp-scrollbar-none relative"
       :style="height ? { height } : undefined"
-      :class="height ? 'overflow-auto' : ''"
+      :class="height ? (editing ? 'overflow-hidden' : 'overflow-auto') : ''"
     >
       <!-- Editable overlay: only when unlocked and there are no folds. -->
       <textarea
@@ -253,12 +283,18 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :value="code"
         spellcheck="false"
         class="lp-scrollbar-none absolute inset-0 size-full resize-none overflow-auto whitespace-pre bg-transparent p-3 leading-relaxed text-transparent caret-brand outline-none"
-        :class="[wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre', lineNumbers ? 'pl-12' : '']"
+        :class="[wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre', lineNumbers ? 'pl-13' : '']"
         @input="onInput"
+        @scroll="syncScroll"
       />
       <pre
+        ref="preEl"
         class="lp-scrollbar-none m-0 overflow-auto p-3 leading-relaxed"
-        :class="[wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre', !locked && !hasFolds ? 'pointer-events-none' : '']"
+        :class="[
+          wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre',
+          editing ? 'pointer-events-none' : '',
+          editing && height ? 'h-full overflow-hidden' : '',
+        ]"
       ><code class="block"><template
           v-for="(seg, s) in segments"
           :key="s"
@@ -271,7 +307,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
                 class="mr-3 inline-block w-7 select-none text-right text-muted/60"
                 aria-hidden="true"
               >{{ ln.n }}</span><span
-                v-for="(tok, j) in tokens(ln.text)"
+                v-for="(tok, j) in tokens(ln.n)"
                 :key="j"
                 :class="tok.cls"
               >{{ tok.text }}</span></span></template><!-- Fold region --><template
@@ -288,7 +324,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
               /><span class="select-none">{{ openState[seg.id] ? seg.label : seg.label + ' …' }}</span><span
                 v-if="!openState[seg.id]"
                 class="select-none text-muted/50"
-              >({{ seg.lines.length }} lines)</span></button><template
+              >{{ text.lines.replace("{n}", String(seg.lines.length)) }}</span></button><template
               v-if="openState[seg.id]"
             ><span
                 v-for="ln in seg.lines"
@@ -299,7 +335,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
                   class="mr-3 inline-block w-7 select-none text-right text-muted/60"
                   aria-hidden="true"
                 >{{ ln.n }}</span><span
-                  v-for="(tok, j) in tokens(ln.text)"
+                  v-for="(tok, j) in tokens(ln.n)"
                   :key="j"
                   :class="tok.cls"
                 >{{ tok.text }}</span></span></template></template></template></code></pre>

package/src/components/LpColorPicker.vue

@@ -36,7 +36,9 @@ import {
   PopoverRoot,
   PopoverTrigger,
 } from "reka-ui"
-import { computed, ref, watch } from "vue"
+import { computed, nextTick, ref, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
+import { useFieldControl } from "../composables/useField"
 import {
   clampHsv,
   DEFAULT_SWATCHES,
@@ -52,6 +54,7 @@ import { useClipboard } from "../composables/useClipboard"
 import { POPOVER_PANEL } from "./dropdown"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
 
 /**
  * Every user-facing string the picker renders on its own — the menu items, the
@@ -271,7 +274,9 @@ function trackPointer(e: PointerEvent, onMove: (x: number, y: number) => void) {
 
 const onFieldPointer = (e: PointerEvent) =>
   trackPointer(e, (x, y) => set({ s: x, v: 1 - y }))
-const onHuePointer = (e: PointerEvent) => trackPointer(e, (x) => set({ h: x * 360 }))
+// 360° is 0° again, so the far edge of the rail would throw the thumb back to
+// the start; it stops just short instead, as End does.
+const onHuePointer = (e: PointerEvent) => trackPointer(e, (x) => set({ h: Math.min(x * 360, 359.9) }))
 const onAlphaPointer = (e: PointerEvent) => trackPointer(e, (x) => set({ a: x }))
 
 /* ── keyboard ─────────────────────────────────────
@@ -303,11 +308,13 @@ function step(e: KeyboardEvent, axis: "sv" | "h" | "a") {
 }
 
 /* ── text field ───────────────────────────────────
-   Typed text is parsed on every keystroke but only applied when it resolves to
-   a real colour, so a half-written "#3b8" never snaps the picker somewhere the
-   user is still on their way past. The field shows what is typed while it has
-   focus and the committed value once it doesn't. */
+   Typed text is parsed on every keystroke and previews as soon as it resolves
+   to a real colour, but is only committed (`change`) on Enter or when the field
+   loses focus: "#3b8" and "#3b82" are valid colours on the way to "#3b82f6",
+   and committing each one handed listeners three colours nobody chose. The
+   field shows what is typed while it has focus and the value once it doesn't. */
 const typed = ref<string | null>(null)
+let typedChange = false
 const inputValue = computed(() => typed.value ?? current.value)
 
 function onInput(e: Event) {
@@ -318,11 +325,19 @@ function onInput(e: Event) {
   const next = rgbToHsv(rgb)
   if (next.s === 0) next.h = hsv.value.h
   if (next.v === 0) next.s = hsv.value.s
-  set(props.alpha ? next : { ...next, a: 1 }, true)
+  set(props.alpha ? next : { ...next, a: 1 })
+  typedChange = true
+}
+
+function commitTyped() {
+  if (!typedChange) return
+  typedChange = false
+  emit("change", current.value)
 }
 
 function onInputBlur() {
   typed.value = null
+  commitTyped()
 }
 
 function pickSwatch(value: string) {
@@ -463,8 +478,12 @@ function remember(value: string) {
 // Remember on close rather than on every commit: the colour a person leaves the
 // popover on is the one they chose, while the ones they passed through on the
 // way are not history, they are the search for it.
+// Only a colour that changed while the popover was open: opening it to look,
+// or to copy the value out, is not a choice worth recording.
+let openedOn = ""
 watch(open, (isOpen, was) => {
-  if (was && !isOpen) remember(current.value)
+  if (isOpen) openedOn = current.value
+  else if (was && current.value !== openedOn) remember(current.value)
 })
 
 /**
@@ -537,9 +556,28 @@ async function pasteColor() {
  * emit the picker would display rgb() while the app still stored hex, and the
  * next thing to read that value would disagree with the screen.
  */
+/*
+ * A format switch rewrites the whole text in place ("#3b82f6" becomes
+ * "rgb(59 130 246)"), so the new value rolls in over the field the way the
+ * kit's other changing labels do. An <input> cannot animate its own text, so
+ * a rolling copy lies over it for the length of the roll; it only ever moves
+ * on a format switch, never while a colour is being dragged.
+ */
+const ROLL_MS = 320
+const rollText = ref(current.value)
+const rolling = ref(false)
+let rollTimer: ReturnType<typeof setTimeout> | undefined
+
 function setFormat(f: ColorFormat) {
   if (activeFormat.value === f) return
+  rollText.value = inputValue.value
   activeFormat.value = f
+  if (!prefersReducedMotion()) {
+    rolling.value = true
+    void nextTick(() => (rollText.value = current.value))
+    if (rollTimer) clearTimeout(rollTimer)
+    rollTimer = setTimeout(() => (rolling.value = false), ROLL_MS + 40)
+  }
   typed.value = null
   emit("update:modelValue", current.value)
   emit("change", current.value)
@@ -573,6 +611,12 @@ const menuItems = computed<ContextMenuItemDef[]>(() => {
     : builtin
 })
 
+const field = useFieldControl(() => ({
+  wrapped: false,
+  invalid: props.invalid,
+  disabled: props.disabled,
+}))
+
 defineExpose({ open })
 </script>
 
@@ -592,12 +636,15 @@ defineExpose({ open })
       <PopoverTrigger as-child>
         <button
           type="button"
-          :disabled="disabled"
+          :id="field.id"
+          :disabled="field.disabled"
           :aria-label="ariaLabel"
+          :aria-invalid="field.invalid || undefined"
+          :aria-describedby="field.describedBy"
           class="group inline-flex w-full items-center gap-2 rounded-control border bg-surface-soft px-2 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
           :class="[
             triggerSize[size],
-            invalid ? 'border-danger focus-visible:ring-danger-soft' : 'border-line focus-visible:border-brand',
+            field.invalid ? 'border-danger focus-visible:ring-danger-soft' : 'border-line focus-visible:border-brand',
           ]"
         >
           <!-- The swatch sits on the checkerboard so a transparent colour looks
@@ -628,6 +675,7 @@ defineExpose({ open })
 
     <PopoverPortal>
       <PopoverContent
+        :collision-padding="8"
         :side="side"
         :align="align"
         :side-offset="6"
@@ -645,6 +693,9 @@ defineExpose({ open })
               role="slider"
               :tabindex="disabled ? -1 : 0"
               :aria-label="l.saturation"
+              :aria-valuemin="0"
+              :aria-valuemax="100"
+              :aria-valuenow="Math.round(hsv.s * 100)"
               :aria-valuetext="fill(l.saturationValueText, { s: Math.round(hsv.s * 100), v: Math.round(hsv.v * 100) })"
               class="relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-control outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
               :style="fieldStyle"
@@ -719,6 +770,15 @@ defineExpose({ open })
                 class="size-4 shrink-0 rounded-[5px] border border-line"
                 :style="{ backgroundColor: previewCss }"
               />
+              <span class="relative flex min-w-0 flex-1 items-center">
+              <LpRollingText
+                v-show="rolling"
+                :value="rollText"
+                :duration="ROLL_MS"
+                align="start"
+                aria-hidden="true"
+                class="pointer-events-none absolute inset-0 font-mono text-xs text-ink"
+              />
               <input
                 :value="inputValue"
                 :disabled="disabled"
@@ -727,9 +787,12 @@ defineExpose({ open })
                 autocomplete="off"
                 :aria-label="l.value"
                 class="min-w-0 flex-1 select-text bg-transparent font-mono text-xs text-ink outline-none placeholder:text-muted"
+                :class="rolling ? 'text-transparent' : ''"
                 @input="onInput"
+                @keydown.enter="commitTyped"
                 @blur="onInputBlur"
               />
+              </span>
             </div>
 
             <!-- Recent sits ABOVE the presets because it is the row that

package/src/components/LpCommandPalette.vue

@@ -44,6 +44,7 @@ import { useGlass } from "../composables/useGlass"
 import { useClipboard } from "../composables/useClipboard"
 import { useHotkeys } from "../composables/useHotkeys"
 import { useModalLayer } from "./modalDepth"
+import { useLabels } from "../composables/useLpConfig"
 import { parseCommandQuery, rankCommandItems } from "./commandSearch"
 
 export interface Command {
@@ -87,7 +88,7 @@ export interface Command {
    * `onSelect` still runs when the mode opens, so a command can both act and
    * drill in.
    */
-  children?: Command[] | ((query: string) => Command[] | Promise<Command[]>)
+  children?: Command[] | ((query: string, signal: AbortSignal) => Command[] | Promise<Command[]>)
   /** Placeholder while inside this command's mode. */
   childPlaceholder?: string
   /**
@@ -121,7 +122,7 @@ export interface Command {
 }
 
 /** Footer hints and the mode chip, spelled out so an app can translate them. */
-export interface PaletteLabels {
+export type PaletteLabels = {
   navigate: string
   select: string
   close: string
@@ -144,6 +145,11 @@ export interface PaletteLabels {
    * text is never displayed. Kept so existing `labels` objects still type-check.
    */
   noPreview?: string
+  /** Accessible name and description of the dialog, read by screen readers only. */
+  title?: string
+  description?: string
+  /** The key hint printed beside the box and in the footer. */
+  esc?: string
 }
 
 const props = withDefaults(
@@ -175,6 +181,12 @@ const props = withDefaults(
      * so a stored history never resurrects a command that has gone away.
      */
     recent?: string[]
+    /**
+     * Let the palette keep the history itself, in localStorage under this key:
+     * every top-level command run is remembered, newest first. Ignored while
+     * `recent` is bound, which stays the way to store it somewhere else.
+     */
+    recentKey?: string
     /** How many recent commands to surface. */
     recentLimit?: number
     /** Headings the palette adds itself. */
@@ -229,9 +241,10 @@ const props = withDefaults(
 )
 
 const frosted = useGlass(() => props.glass)
-const { claim, release, layer } = useModalLayer()
+const contentRef = ref<{ $el: HTMLElement } | null>(null)
+const { claim, release, layer } = useModalLayer({ element: () => contentRef.value?.$el })
 
-const DEFAULT_LABELS: PaletteLabels = {
+const DEFAULT_LABELS: Required<PaletteLabels> = {
   navigate: "navigate",
   select: "select",
   close: "close",
@@ -245,9 +258,12 @@ const DEFAULT_LABELS: PaletteLabels = {
   copyLink: "Copy link",
   linkCopied: "Link copied",
   noPreview: "No preview",
+  title: "Command palette",
+  description: "Search and run a command.",
+  esc: "esc",
 }
 
-const text = computed<PaletteLabels>(() => ({ ...DEFAULT_LABELS, ...props.labels }))
+const text = useLabels("palette", DEFAULT_LABELS, () => props.labels)
 
 const emit = defineEmits<{
   (e: "update:open", value: boolean): void
@@ -330,15 +346,42 @@ const selectedActions = computed(() => actionsOf(flat.value[selectedIndex.value]
  * actions it keeps that default.
  */
 function onTab(event: KeyboardEvent) {
-  event.preventDefault()
-  event.stopPropagation()
+  // Without actions Tab stays Tab, so the trail chips and a Retry button are
+  // still reachable from the keyboard.
   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 })
 }
 
+/*
+ * A mode holds the command it was entered through, and a static `children`
+ * list is a snapshot of that moment. When the app rebuilds its commands (a
+ * theme list whose tick follows the active theme), the open mode is matched
+ * to the new commands by id along its path and takes their children, so a
+ * `keepOpen` pick inside it shows its own effect.
+ */
+watch(
+  () => props.commands,
+  (commands) => {
+    if (!trail.value.length) return
+    let level: Command[] = commands
+    const next: Command[] = []
+    for (const step of trail.value) {
+      const fresh = level.find((c) => c.id === step.id)
+      if (!fresh) return
+      next.push(fresh)
+      level = Array.isArray(fresh.children) ? fresh.children : []
+    }
+    trail.value = next
+    const last = next[next.length - 1]
+    if (last && Array.isArray(last.children)) modeItems.value = last.children
+  },
+)
+
 function enter(c: Command) {
   trailState.value = [...trailState.value, { query: query.value, selectedId: selectedId.value }]
   trail.value = [...trail.value, c]
@@ -392,7 +435,7 @@ function fetcher(): ((q: string, signal: AbortSignal) => Command[] | Promise<Com
   const current = mode.value
   if (current) {
     return typeof current.children === "function"
-      ? (q: string) => (current.children as (q: string) => Command[] | Promise<Command[]>)(q)
+      ? current.children
       : null
   }
   return props.search ?? null
@@ -486,11 +529,36 @@ const fetched = computed<Command[]>(() => {
  * Only on the root's empty query: once someone types, or drills into a mode,
  * relevance is the better order and a duplicated row is just noise.
  */
+const RECENT_KEEP = 20
+const ownRecent = ref<string[]>([])
+watch(
+  () => props.recentKey,
+  (key) => {
+    if (!key || typeof localStorage === "undefined") return
+    try {
+      const stored: unknown = JSON.parse(localStorage.getItem(key) ?? "[]")
+      ownRecent.value = Array.isArray(stored) ? stored.filter((v): v is string => typeof v === "string") : []
+    } catch {
+      ownRecent.value = []
+    }
+  },
+  { immediate: true },
+)
+function remember(id: string) {
+  const key = props.recentKey
+  if (!key || props.recent) return
+  ownRecent.value = [id, ...ownRecent.value.filter((v) => v !== id)].slice(0, RECENT_KEEP)
+  try {
+    localStorage.setItem(key, JSON.stringify(ownRecent.value))
+  } catch {}
+}
+const recentIds = computed(() => props.recent ?? (props.recentKey ? ownRecent.value : []))
+
 const recentItems = computed<Command[]>(() => {
-  if (mode.value || query.value.trim() || !props.recent?.length) return []
+  if (mode.value || query.value.trim() || !recentIds.value.length) return []
   const byId = new Map(props.commands.map((c) => [c.id, c]))
   const out: Command[] = []
-  for (const id of props.recent) {
+  for (const id of recentIds.value) {
     const c = byId.get(id)
     if (c && !c.disabled && !out.includes(c)) out.push(c)
     if (out.length >= props.recentLimit) break
@@ -578,6 +646,18 @@ const paragraphs = computed(() =>
     .filter(Boolean),
 )
 
+/*
+ * The row's description heads the pane only when it says something the body
+ * does not: a command whose full text opens with its description (or is it)
+ * would otherwise print the same sentences twice, once small and once large.
+ */
+const paneDescription = computed(() => {
+  const description = active.value?.description?.trim()
+  if (!description) return undefined
+  const body = paragraphs.value.join(" ")
+  return body.startsWith(description) ? undefined : description
+})
+
 /** Stagger between paragraphs, capped so a long section does not trickle in. */
 const STAGGER_MS = 45
 const STAGGER_MAX = 10
@@ -599,8 +679,11 @@ watch(
     else viewport.scrollTop = 0
   },
 )
+// Rows ask for their index several times per render; a lookup keeps that O(1)
+// instead of a scan of the whole list per row.
+const flatIndex = computed(() => new Map(flat.value.map((c, i) => [c, i])))
 function flatIndexOf(c: Command): number {
-  return flat.value.indexOf(c)
+  return flatIndex.value.get(c) ?? -1
 }
 
 // ── highlight ────────────────────────────────────────────────
@@ -689,6 +772,9 @@ function movePage(direction: -1 | 1) {
 function onPaletteKeydown(event: KeyboardEvent) {
   if (event.isComposing) return
   if (!(["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp"] as string[]).includes(event.key)) return
+  // Home and End belong to the caret while there is text to move it through.
+  const typing = event.target instanceof HTMLInputElement && event.target.value !== ""
+  if (typing && (event.key === "Home" || event.key === "End")) return
   event.preventDefault()
   event.stopPropagation()
   if (event.key === "ArrowDown") moveDown()
@@ -750,11 +836,16 @@ function run(c: Command | undefined) {
     return
   }
   emit("run", c.id, c)
+  if (!mode.value) remember(c.id)
   if (c.keepOpen) {
     // 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 = ""
-    select(0)
+    // Inside a mode the highlight stays on what was just picked, so trying
+    // themes one after another is a matter of the arrow keys; at the root the
+    // list it came from is gone and the top is the honest place to land.
+    if (mode.value) void nextTick(() => select(Math.max(0, flat.value.findIndex((x) => x.id === c.id))))
+    else select(0)
     inputRef.value?.focus()
     return
   }
@@ -828,6 +919,8 @@ useHotkeys(() =>
           code: "KeyK",
           ctrl: true,
           allowInInput: true,
+          overLayers: true,
+          repeat: false,
           handler: () => emit("update:open", !props.open),
         },
       ]
@@ -844,6 +937,7 @@ useHotkeys(() =>
         :style="{ zIndex: layer.scrim }"
       />
       <DialogContent
+        ref="contentRef"
         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 }"
@@ -851,8 +945,8 @@ useHotkeys(() =>
         @open-auto-focus.prevent
         @keydown.capture="onPaletteKeydown"
       >
-        <DialogTitle class="sr-only">Command palette</DialogTitle>
-        <DialogDescription class="sr-only">Search and run a command.</DialogDescription>
+        <DialogTitle class="sr-only">{{ text.title }}</DialogTitle>
+        <DialogDescription class="sr-only">{{ text.description }}</DialogDescription>
 
         <!-- Filter. The trail sits inside the box as chips, the way a scoped
              search reads everywhere else: what you type is filtered by what is
@@ -895,7 +989,7 @@ useHotkeys(() =>
             @keydown.esc="onEscape"
             @keydown.tab="onTab"
           />
-          <kbd class="shrink-0 rounded border border-line px-1.5 py-0.5 text-[10px] text-muted">esc</kbd>
+          <kbd class="shrink-0 rounded border border-line px-1.5 py-0.5 text-[10px] text-muted">{{ text.esc }}</kbd>
         </div>
 
         <!-- Results -->
@@ -1024,8 +1118,8 @@ useHotkeys(() =>
                       <LpIcon v-if="active.icon" :name="active.icon" :size="16" class="shrink-0 text-muted" />
                       <h3 class="min-w-0 text-base font-semibold">{{ active.label }}</h3>
                     </div>
-                    <p v-if="active.description" class="lp-cmd-para mt-0.5 text-xs text-muted">
-                      {{ active.description }}
+                    <p v-if="paneDescription" class="lp-cmd-para mt-0.5 text-xs text-muted">
+                      {{ paneDescription }}
                     </p>
                     <p
                       v-for="(para, i) in paragraphs"
@@ -1045,9 +1139,10 @@ useHotkeys(() =>
           </Transition>
         </div>
 
-        <!-- Footer hints -->
+        <!-- Footer hints. Keyboard-only, so a touch screen without a keyboard
+             gets the row back for results. -->
         <div
-          class="flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted"
+          class="flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted [@media(hover:none)_and_(pointer:coarse)]:hidden"
         >
           <span class="flex items-center gap-1">
             <kbd class="rounded border border-line px-1 text-[10px]">↑</kbd>
@@ -1069,7 +1164,7 @@ useHotkeys(() =>
             {{ text.back }}
           </span>
           <span class="ml-auto flex items-center gap-1">
-            <kbd class="rounded border border-line px-1 text-[10px]">esc</kbd>
+            <kbd class="rounded border border-line px-1 text-[10px]">{{ text.esc }}</kbd>
             {{ text.close }}
           </span>
         </div>