@leavepulse/ui 0.43.4 → 0.45.0

package/src/components/LpLogViewer.vue

@@ -31,6 +31,35 @@ import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { useLabels } from "../composables/useLpConfig"
+import { countLevels, matchPositions, ringWindow, stepMatch } from "./logSearch"
+
+export interface LogViewerLabels {
+  [key: string]: string
+  empty: string
+  frozen: string
+  noMatch: string
+  loadingOlder: string
+  copyMessage: string
+  copyLine: string
+  copyTimestamp: string
+  copied: string
+  /** `{source}` is replaced by the line's source. */
+  filterSource: string
+  /** `{level}` is replaced by the line's level. */
+  filterLevel: string
+  /** `{n}` is replaced by the count. */
+  identical: string
+  jump: string
+  search: string
+  clearSearch: string
+  previousMatch: string
+  nextMatch: string
+  /** `{current}` and `{total}` are replaced. */
+  matchCount: string
+  noMatches: string
+  levels: string
+}
 
 export type LogLevel = "trace" | "debug" | "info" | "warn" | "error" | "fatal" | "success"
 
@@ -103,6 +132,19 @@ const props = withDefaults(
      * so a duplicate level word / timestamp doesn't repeat in the message body.
      */
     parse?: boolean
+    /**
+     * Keep only the newest N lines on screen. The consumer can keep pushing
+     * into the same array (or hand over a longer one) and the viewer shows the
+     * tail; trimming the source itself is still the cheaper way to cap memory.
+     */
+    maxLines?: number
+    /**
+     * A bar above the stream with a search box (Enter / Shift+Enter or F3 step
+     * through matches) and level chips. The term binds via `v-model:search`,
+     * the chosen levels via `v-model:levels`.
+     */
+    toolbar?: boolean
+    labels?: Partial<LogViewerLabels>
   }>(),
   {
     showTime: true,
@@ -111,8 +153,6 @@ const props = withDefaults(
     wrap: false,
     tail: true,
     height: "20rem",
-    emptyLabel: "No logs yet",
-    frozenLabel: "Held — release Ctrl to resume",
     rowMenu: true,
     parse: false,
   },
@@ -129,6 +169,38 @@ const emit = defineEmits<{
   (e: "reach-top"): void
 }>()
 
+/** The toolbar's search term. Without the toolbar, `highlight` is the term. */
+const query = defineModel<string>("search", { default: "" })
+/** Levels to show. Empty shows every level. */
+const levels = defineModel<LogLevel[]>("levels", { default: () => [] })
+const term = computed(() => (props.toolbar && query.value ? query.value : (props.highlight ?? "")).trim())
+
+const text = useLabels<LogViewerLabels>(
+  "logViewer",
+  {
+    empty: "No logs yet",
+    frozen: "Held — release Ctrl to resume",
+    noMatch: "No lines match",
+    loadingOlder: "loading older…",
+    copyMessage: "Copy message",
+    copyLine: "Copy line",
+    copyTimestamp: "Copy timestamp",
+    copied: "Copied to clipboard",
+    filterSource: "Filter by [{source}]",
+    filterLevel: "Filter by {level}",
+    identical: "{n} identical lines",
+    jump: "Jump to latest",
+    search: "Search logs",
+    clearSearch: "Clear search",
+    previousMatch: "Previous match",
+    nextMatch: "Next match",
+    matchCount: "{current} / {total}",
+    noMatches: "No matches",
+    levels: "Levels",
+  },
+  () => props.labels,
+)
+
 // Level → gutter rail + text colour. Reads only semantic tokens so re-skinning
 // just works. trace/debug stay muted; success is green; warn amber; error/fatal
 // red (fatal gets a filled chip to stand apart from plain error).
@@ -242,7 +314,10 @@ const root = ref<HTMLElement | null>(null)
 const frozen = ref(false)
 const frozenLines = shallowRef<LogLine[] | null>(null)
 
-const sourceLines = computed<LogLine[]>(() => frozenLines.value ?? props.lines)
+const windowed = computed(() => ringWindow(frozenLines.value ?? props.lines, props.maxLines))
+const sourceLines = computed<LogLine[]>(() => windowed.value.lines as LogLine[])
+// Line numbers keep counting from the start of the stream after the cap trims it.
+const lineOffset = computed(() => windowed.value.offset)
 
 function freeze(): boolean {
   // Declining unless the stream is being looked at: `false` hands Ctrl back
@@ -253,7 +328,9 @@ function freeze(): boolean {
   // Snapshotted by reference, not copied: the array the consumer hands over is
   // replaced wholesale on every update, so holding the old one is enough — and
   // a copy of ten thousand lines on every keypress is not.
-  frozenLines.value = props.lines
+  // A capped stream is usually one array pushed into in place, which a
+  // reference would not hold still; its window is small enough to copy.
+  frozenLines.value = props.maxLines ? props.lines.slice(-props.maxLines) : props.lines
   frozen.value = true
   return true
 }
@@ -279,9 +356,13 @@ function focusWithin() {
   return !!el && el.contains(document.activeElement)
 }
 
+// `when` rather than a bare decline: several viewers on one page all bind these
+// keys, and only the one being looked at should claim them.
+const lookedAt = () => hovered.value || focusWithin()
+
 useHotkeys(() => [
-  { key: "control", allowInInput: true, handler: freeze },
-  { key: "meta", allowInInput: true, handler: freeze },
+  { key: "control", allowInInput: true, when: lookedAt, handler: freeze },
+  { key: "meta", allowInInput: true, when: lookedAt, handler: freeze },
 ])
 
 // Released on keyup anywhere, and on blur: a window that loses focus mid-hold
@@ -309,10 +390,12 @@ const parsedLines = computed<LogLine[]>(() =>
 // With filterMatches + a search term, keep only lines whose message contains it
 // (case-insensitive); otherwise pass everything.
 const visibleLines = computed<{ line: LogLine; n: number; count: number }[]>(() => {
-  const term = props.filterMatches ? props.highlight?.trim().toLowerCase() : ""
+  const needle = props.filterMatches ? term.value.toLowerCase() : ""
+  const shown = levels.value.length ? new Set<LogLevel>(levels.value) : null
   const filtered = parsedLines.value
     .map((line, n) => ({ line, n }))
-    .filter(({ line }) => !term || line.message.toLowerCase().includes(term))
+    .filter(({ line }) => !shown || shown.has(line.level ?? "info"))
+    .filter(({ line }) => !needle || matchPositions([line], needle).length > 0)
 
   if (!props.compact) return filtered.map((row) => ({ ...row, count: 1 }))
 
@@ -336,6 +419,106 @@ const visibleLines = computed<{ line: LogLine; n: number; count: number }[]>(()
   return folded
 })
 
+/*
+ * Rows are keyed by the identity of the line object the consumer passed, not by
+ * position: prepending older history shifts every index, and index keys made
+ * the bottom rows play the enter animation instead of the new top ones.
+ */
+const lineIds = new WeakMap<LogLine, number>()
+let nextLineId = 0
+function lineKey(n: number): number {
+  const line = sourceLines.value[n]
+  if (!line) return -1 - n
+  let id = lineIds.get(line)
+  if (id === undefined) {
+    id = nextLineId++
+    lineIds.set(line, id)
+  }
+  return id
+}
+
+// ── toolbar: level chips and match navigation ───────────────────────
+const LEVEL_ORDER: LogLevel[] = ["trace", "debug", "info", "success", "warn", "error", "fatal"]
+const levelCounts = computed(() => countLevels<LogLevel>(parsedLines.value, "info"))
+const presentLevels = computed(() => LEVEL_ORDER.filter((l) => levelCounts.value.has(l)))
+
+function toggleLevel(level: LogLevel) {
+  levels.value = levels.value.includes(level)
+    ? levels.value.filter((l) => l !== level)
+    : [...levels.value, level]
+}
+
+const matches = computed(() => matchPositions(visibleLines.value.map((r) => r.line), term.value))
+const current = ref(-1)
+const currentRow = computed(() => {
+  const pos = matches.value[current.value]
+  return pos === undefined ? -1 : (visibleLines.value[pos]?.n ?? -1)
+})
+watch(term, () => {
+  current.value = -1
+})
+watch(matches, (list) => {
+  if (current.value >= list.length) current.value = list.length - 1
+})
+
+const matchLabel = computed(() => {
+  if (!term.value) return ""
+  const total = matches.value.length
+  if (!total) return text.value.noMatches
+  return text.value.matchCount
+    .replace("{current}", current.value >= 0 ? String(current.value + 1) : "–")
+    .replace("{total}", String(total))
+})
+
+function step(direction: 1 | -1) {
+  const next = stepMatch(current.value, matches.value.length, direction)
+  if (next < 0) return
+  current.value = next
+  pinned.value = false
+  nextTick(() => revealMatch(matches.value[next]))
+}
+
+// Brings the match to the middle of the viewport. A virtualised row may not be
+// in the DOM yet, so the offset is computed from the fixed row height instead.
+function revealMatch(position: number | undefined) {
+  const el = viewport()
+  if (!el || position === undefined) return
+  const behavior: ScrollBehavior = prefersReducedMotion() ? "auto" : "smooth"
+  if (virtualise.value) {
+    el.scrollTo({ top: Math.max(0, position * ROW_HEIGHT - el.clientHeight / 2), behavior })
+    return
+  }
+  const n = visibleLines.value[position]?.n
+  el.querySelector<HTMLElement>(`[data-log-row="${n}"]`)?.scrollIntoView({ block: "center", behavior })
+}
+
+const searchEl = ref<HTMLInputElement | null>(null)
+
+function onSearchKeydown(event: KeyboardEvent) {
+  if (event.isComposing) return
+  if (event.key === "Enter") {
+    event.preventDefault()
+    step(event.shiftKey ? -1 : 1)
+  } else if (event.key === "Escape" && query.value) {
+    event.preventDefault()
+    event.stopPropagation()
+    query.value = ""
+  }
+}
+
+const searching = () => !!term.value && lookedAt()
+
+useHotkeys(() => [
+  { key: "f3", allowInInput: true, when: searching, handler: () => step(1) },
+  { key: "f3", shift: true, allowInInput: true, when: searching, handler: () => step(-1) },
+])
+
+defineExpose({
+  next: () => step(1),
+  previous: () => step(-1),
+  focusSearch: () => searchEl.value?.focus(),
+})
+
 // True when filtering has emptied an otherwise non-empty stream.
 const filteredEmpty = computed(
   () => props.lines.length > 0 && visibleLines.value.length === 0,
@@ -356,7 +539,7 @@ function fmtTime(time?: number | string): string {
 // A menu item closes the menu as it runs, leaving nothing on screen to say the
 // copy happened — so unlike LpCodeBlock's button, this one announces itself.
 const { copy: writeClipboard } = useClipboard()
-const copy = (text: string) => writeClipboard(text, { toast: "Copied to clipboard" })
+const copy = (value: string) => writeClipboard(value, { toast: text.value.copied })
 
 // The whole line as one copyable string: "time LEVEL [source] message".
 function lineText(line: LogLine): string {
@@ -398,15 +581,15 @@ function onRowPointerDown(e: PointerEvent) {
 function menuFor(line: LogLine, index: number): ContextMenuItemDef[] {
   if (!props.rowMenu) return []
   const items: ContextMenuItemDef[] = [
-    { label: "Copy message", icon: "lucide:copy", onSelect: () => copy(line.message) },
-    { label: "Copy line", icon: "lucide:clipboard-list", onSelect: () => copy(lineText(line)) },
+    { label: text.value.copyMessage, icon: "lucide:copy", onSelect: () => copy(line.message) },
+    { label: text.value.copyLine, icon: "lucide:clipboard-list", onSelect: () => copy(lineText(line)) },
   ]
   if (line.time != null) {
-    items.push({ label: "Copy timestamp", icon: "lucide:clock", onSelect: () => copy(fmtTime(line.time)) })
+    items.push({ label: text.value.copyTimestamp, icon: "lucide:clock", onSelect: () => copy(fmtTime(line.time)) })
   }
   if (line.source) {
     items.push({
-      label: `Filter by [${line.source}]`,
+      label: text.value.filterSource.replace("{source}", line.source),
       icon: "lucide:filter",
       separatorBefore: true,
       onSelect: () => emit("filter", { source: line.source }),
@@ -414,10 +597,13 @@ function menuFor(line: LogLine, index: number): ContextMenuItemDef[] {
   }
   if (line.level) {
     items.push({
-      label: `Filter by ${line.level}`,
+      label: text.value.filterLevel.replace("{level}", line.level),
       icon: "lucide:filter",
       separatorBefore: !line.source,
-      onSelect: () => emit("filter", { level: line.level }),
+      onSelect: () => {
+        if (props.toolbar && line.level) levels.value = [line.level]
+        emit("filter", { level: line.level })
+      },
     })
   }
   const extra = props.extraRowItems?.(line, index) ?? []
@@ -432,11 +618,10 @@ interface Part {
   hit: boolean
 }
 function splitHighlight(message: string): Part[] {
-  const term = props.highlight?.trim()
-  if (!term) return [{ text: message, hit: false }]
+  if (!term.value) return [{ text: message, hit: false }]
   const parts: Part[] = []
   const lower = message.toLowerCase()
-  const needle = term.toLowerCase()
+  const needle = term.value.toLowerCase()
   let i = 0
   while (i < message.length) {
     const at = lower.indexOf(needle, i)
@@ -569,6 +754,7 @@ function rideToBottom(smooth = true, force = false) {
 }
 
 function scrollToBottom() {
+  current.value = -1
   rideToBottom(true, true)
   pinned.value = true
 }
@@ -576,8 +762,15 @@ function scrollToBottom() {
 // Snapshot the scroll anchor BEFORE the DOM updates for a line change (flush:pre)
 // so a prepend can be compensated post-update. Only matters when NOT pinned to
 // the bottom (i.e. the user is reading history up the stream).
+/*
+ * A capped buffer (shift + push, or slice(-N)) keeps the length constant once
+ * full, so the length alone stops seeing new lines. The array, its length and
+ * its last line together change on every append, prepend or replacement.
+ */
+const linesSignal = () => [props.lines, props.lines.length, props.lines[props.lines.length - 1]]
+
 watch(
-  () => props.lines.length,
+  linesSignal,
   () => {
     if (!pinned.value) captureScrollAnchor()
   },
@@ -587,10 +780,10 @@ watch(
 // After the DOM updates: tail to the bottom if pinned, else keep the view glued
 // to where it was so a top prepend (older history) doesn't yank it.
 watch(
-  () => props.lines.length,
+  linesSignal,
   async () => {
     await nextTick()
-    if (props.tail && pinned.value) {
+    if (props.tail && pinned.value && current.value < 0) {
       requestAnimationFrame(() => rideToBottom(true))
     } else {
       restoreScrollAnchor()
@@ -632,13 +825,13 @@ onBeforeUnmount(() => {
 // (a component :is can't carry TransitionGroup-only props inertly otherwise).
 const transitionProps = {
   tag: "ol",
-  "enter-active-class": "transition duration-200 ease-[var(--ease-emphasized)]",
+  "enter-active-class": "transition duration-[var(--duration-medium)] ease-[var(--ease-emphasized)]",
   "enter-from-class": "-translate-x-1 opacity-0",
   "leave-active-class":
-    "overflow-hidden transition-all duration-200 ease-[var(--ease-emphasized)]",
+    "overflow-hidden transition-all duration-[var(--duration-medium)] ease-[var(--ease-emphasized)]",
   "leave-from-class": "max-h-8 opacity-100",
   "leave-to-class": "max-h-0 -translate-y-1 opacity-0",
-  "move-class": "transition-transform duration-200 ease-[var(--ease-emphasized)]",
+  "move-class": "transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)]",
 }
 
 // The viewer draws its own card frame and hides its overflow; a consumer
@@ -673,10 +866,82 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
         v-if="frozen"
         class="pointer-events-none absolute top-2 left-1/2 z-10 -translate-x-1/2 rounded-pill bg-brand px-2.5 py-1 text-[11px] font-medium text-ink-inverse"
       >
-        {{ frozenLabel }}
+        {{ frozenLabel ?? text.frozen }}
       </div>
     </Transition>
 
+    <div
+      v-if="toolbar"
+      class="flex flex-wrap items-center gap-2 border-b border-line px-2 py-1.5 font-sans"
+    >
+      <div class="flex min-w-48 flex-1 items-center gap-1.5 rounded-control bg-surface-soft px-2 focus-within:ring-2 focus-within:ring-ring">
+        <LpIcon name="lucide:search" :size="14" class="shrink-0 text-muted" />
+        <input
+          ref="searchEl"
+          v-model="query"
+          type="search"
+          :aria-label="text.search"
+          :placeholder="text.search"
+          class="h-7 min-w-0 flex-1 bg-transparent text-xs text-ink outline-none placeholder:text-muted [&::-webkit-search-cancel-button]:hidden"
+          @keydown="onSearchKeydown"
+        />
+        <span
+          v-if="term"
+          class="shrink-0 text-[11px] tabular-nums text-muted"
+          aria-live="polite"
+        >{{ matchLabel }}</span>
+        <button
+          v-if="query"
+          type="button"
+          class="rounded-xs p-0.5 text-muted outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+          :aria-label="text.clearSearch"
+          @click="query = ''; searchEl?.focus()"
+        >
+          <LpIcon name="lucide:x" :size="12" />
+        </button>
+      </div>
+      <div class="flex items-center">
+        <button
+          type="button"
+          class="rounded-xs p-1 text-muted outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+          :aria-label="text.previousMatch"
+          :disabled="!matches.length"
+          @click="step(-1)"
+        >
+          <LpIcon name="lucide:chevron-up" :size="14" />
+        </button>
+        <button
+          type="button"
+          class="rounded-xs p-1 text-muted outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+          :aria-label="text.nextMatch"
+          :disabled="!matches.length"
+          @click="step(1)"
+        >
+          <LpIcon name="lucide:chevron-down" :size="14" />
+        </button>
+      </div>
+      <div
+        v-if="presentLevels.length > 1"
+        role="group"
+        :aria-label="text.levels"
+        class="flex flex-wrap items-center gap-1"
+      >
+        <button
+          v-for="level in presentLevels"
+          :key="level"
+          type="button"
+          class="flex items-center gap-1 rounded-pill border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.06em] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+          :class="levels.includes(level) ? 'border-line-strong bg-surface-soft text-ink' : 'border-line text-muted hover:text-ink'"
+          :aria-pressed="levels.includes(level)"
+          @click="toggleLevel(level)"
+        >
+          <span class="size-1.5 rounded-full" :class="metaFor(level).rail" aria-hidden="true" />
+          {{ level }}
+          <span class="font-normal tabular-nums text-muted">{{ levelCounts.get(level) }}</span>
+        </button>
+      </div>
+    </div>
+
     <!-- `instant`: this viewer decides for itself when a jump animates (see
          rideToBottom) and restores scrollTop directly after prepending older
          lines. A CSS smooth scroll would override both. -->
@@ -691,8 +956,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
         v-if="lines.length === 0 || filteredEmpty"
         class="flex h-full flex-col items-center justify-center gap-1 px-4 py-10 text-center"
       >
-        <span class="text-muted">{{ filteredEmpty ? "No lines match" : emptyLabel }}</span>
-        <span v-if="filteredEmpty" class="text-muted/70">“{{ highlight }}”</span>
+        <span class="text-muted">{{ filteredEmpty ? text.noMatch : (emptyLabel ?? text.empty) }}</span>
+        <span v-if="filteredEmpty && term" class="text-muted/70">“{{ term }}”</span>
       </div>
 
       <template v-else>
@@ -704,7 +969,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
           class="flex items-center justify-center gap-2 py-2 text-muted"
         >
           <LpIcon name="lucide:loader-circle" :size="14" class="animate-spin" />
-          <span class="text-[11px]">loading older…</span>
+          <span class="text-[11px]">{{ text.loadingOlder }}</span>
         </div>
 
       <!-- ONE context menu wraps the whole list (not each row): @contextmenu
@@ -738,10 +1003,11 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
         />
         <li
           v-for="{ line, n, count } in renderedLines"
-          :key="n"
+          :key="lineKey(n)"
           :data-log-row="n"
           class="group relative flex items-start gap-0 px-0 leading-5 transition-colors hover:bg-surface-soft/60"
-          :class="metaFor(line.level).sel"
+          :class="[metaFor(line.level).sel, n === currentRow ? 'bg-accent/15' : '']"
+          :aria-current="n === currentRow ? 'true' : undefined"
         >
           <!-- level rail -->
           <!-- Level rail: absolutely positioned so it spans the FULL row height
@@ -759,7 +1025,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
           <span
             v-if="lineNumbers"
             class="mr-3 w-10 shrink-0 select-none text-right tabular-nums text-muted/70"
-          >{{ n + 1 }}</span>
+          >{{ n + lineOffset + 1 }}</span>
 
           <!-- timestamp -->
           <span
@@ -785,7 +1051,13 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
             class="min-w-0 pr-3"
             :class="[metaFor(line.level).text, wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre']"
           >
-            <template v-for="(part, p) in splitHighlight(line.message)" :key="p">
+            <!-- Virtualised rows must stay one row tall, so a multi-line
+                 message (a stack trace) is shown on one line with ↵ marks;
+                 copying still yields the original text. -->
+            <template
+              v-for="(part, p) in splitHighlight(virtualise ? line.message.replace(/\r?\n/g, ' ↵ ') : line.message)"
+              :key="p"
+            >
               <mark
                 v-if="part.hit"
                 class="rounded-xs bg-accent/30 text-ink"
@@ -796,14 +1068,14 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
                  Keyed on count so each new fold re-mounts the chip and pops it,
                  cueing where the duplicate just merged. -->
             <Transition
-              enter-active-class="inline-block transition duration-200 ease-[var(--ease-emphasized)]"
+              enter-active-class="transition duration-[var(--duration-medium)] ease-[var(--ease-emphasized)]"
               enter-from-class="scale-50 opacity-0"
             >
               <span
                 v-if="count > 1"
                 :key="count"
-                class="ml-2 select-none rounded-pill bg-surface-soft px-1.5 align-[1px] text-[10px] font-semibold tabular-nums text-muted-strong"
-                :title="`${count} identical lines`"
+                class="ml-2 inline-block select-none rounded-pill bg-surface-soft px-1.5 align-[1px] text-[10px] font-semibold tabular-nums text-muted-strong"
+                :title="text.identical.replace('{n}', String(count))"
               >×{{ count }}</span>
             </Transition>
           </span>
@@ -823,9 +1095,9 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
          Transition rides an outer wrapper so its transform/opacity don't fight
          the button's own -translate-x-1/2 centring and hover colour transition. -->
     <Transition
-      enter-active-class="transition duration-200 ease-[var(--ease-emphasized)]"
+      enter-active-class="transition duration-[var(--duration-medium)] ease-[var(--ease-emphasized)]"
       enter-from-class="translate-y-3 scale-90 opacity-0"
-      leave-active-class="transition duration-150 ease-in"
+      leave-active-class="transition duration-[var(--duration-fast)] ease-in"
       leave-to-class="translate-y-3 scale-90 opacity-0"
     >
       <div v-if="showJump" class="absolute inset-x-0 bottom-3 flex justify-center">
@@ -837,9 +1109,9 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
           <LpIcon
             name="lucide:arrow-down"
             :size="14"
-            class="transition-transform duration-200 ease-[var(--ease-emphasized)] group-hover:translate-y-0.5"
+            class="transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] group-hover:translate-y-0.5"
           />
-          Jump to latest
+          {{ text.jump }}
         </button>
       </div>
     </Transition>

package/src/components/LpMapPicker.vue

@@ -25,6 +25,7 @@ import { prefersReducedMotion } from "../composables/easing"
 import { type LatLon, OSM_TILES, type TileSource, project, tileUrl, unproject } from "./address"
 import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { useLabels } from "../composables/useLpConfig"
 
 const props = withDefaults(
   defineProps<{
@@ -45,6 +46,8 @@ const props = withDefaults(
     zoomOutLabel?: string
     locateLabel?: string
     recentreLabel?: string
+    /** Accessible name of the map itself. */
+    mapLabel?: string
   }>(),
   {
     tiles: () => OSM_TILES,
@@ -52,15 +55,26 @@ const props = withDefaults(
     center: () => ({ lat: 50.11, lon: 14.44 }),
     height: "20rem",
     locatable: true,
-    zoomInLabel: "Zoom in",
-    zoomOutLabel: "Zoom out",
-    locateLabel: "Use my location",
-    recentreLabel: "Back to the pin",
   },
 )
 
 const emit = defineEmits<{ (e: "update:modelValue", value: LatLon): void }>()
 
+const labelSet = useLabels("mapPicker", {
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  locate: "Use my location",
+  recentre: "Back to the pin",
+  map: "Map — arrows pan, +/− zoom, Enter drops the pin in the centre",
+})
+const text = computed(() => ({
+  zoomIn: props.zoomInLabel ?? labelSet.value.zoomIn,
+  zoomOut: props.zoomOutLabel ?? labelSet.value.zoomOut,
+  locate: props.locateLabel ?? labelSet.value.locate,
+  recentre: props.recentreLabel ?? labelSet.value.recentre,
+  map: props.mapLabel ?? labelSet.value.map,
+}))
+
 const PAN_STEP = 80
 const ZOOM_MS = 220
 
@@ -452,6 +466,15 @@ function onKeydown(e: KeyboardEvent) {
       e.preventDefault()
       recentre()
       break
+    // Without this a keyboard could pan and zoom but never actually pick.
+    case "Enter":
+    case " ": {
+      const el = viewport.value
+      if (!el) return
+      e.preventDefault()
+      emit("update:modelValue", toLatLon({ x: el.clientWidth / 2, y: el.clientHeight / 2 }))
+      break
+    }
   }
 }
 
@@ -563,7 +586,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       :class="disabled ? 'cursor-not-allowed opacity-55' : panning ? 'cursor-grabbing' : 'cursor-grab'"
       :tabindex="disabled ? -1 : 0"
       role="application"
-      :aria-label="recentreLabel"
+      :aria-label="text.map"
       @pointerdown="onPointerDown"
       @pointermove="onPointerMove"
       @pointerup="onPointerUp"
@@ -616,8 +639,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :class="CONTROL"
         type="button"
         :disabled="disabled || level >= maxZoom"
-        :title="zoomInLabel"
-        :aria-label="zoomInLabel"
+        :title="text.zoomIn"
+        :aria-label="text.zoomIn"
         @click="zoomBy(1)"
       >
         <LpIcon name="lucide:plus" :size="16" />
@@ -626,8 +649,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :class="CONTROL"
         type="button"
         :disabled="disabled || level <= minZoom"
-        :title="zoomOutLabel"
-        :aria-label="zoomOutLabel"
+        :title="text.zoomOut"
+        :aria-label="text.zoomOut"
         @click="zoomBy(-1)"
       >
         <LpIcon name="lucide:minus" :size="16" />
@@ -636,8 +659,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         v-if="canRecentre"
         :class="CONTROL"
         type="button"
-        :title="recentreLabel"
-        :aria-label="recentreLabel"
+        :title="text.recentre"
+        :aria-label="text.recentre"
         @click="recentre"
       >
         <LpIcon name="lucide:locate-fixed" :size="16" />
@@ -647,8 +670,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :class="CONTROL"
         type="button"
         :disabled="disabled || locating"
-        :title="locateLabel"
-        :aria-label="locateLabel"
+        :title="text.locate"
+        :aria-label="text.locate"
         @click="locate"
       >
         <LpIcon