@leavepulse/ui 0.68.0 → 0.70.0

package/src/components/LpLoader.vue

@@ -0,0 +1,145 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * The kit's loading indicator: a spinner, three dots or an indeterminate bar.
+ *
+ * Every component that waits used to draw its own (a lucide loader-circle
+ * with `animate-spin`, toned by hand), so each one blinked on fast loads in
+ * its own way and none told a screen reader anything. This one owns the three
+ * things they all needed and none had:
+ *
+ *   - timing: `delay` before it appears, so a load that finishes quickly shows
+ *     nothing at all, and `minVisible` once it has, so it never flashes
+ *     (see useLoadingGate);
+ *   - a status: role="status" with a polite label, so "loading" is announced
+ *     rather than only drawn;
+ *   - reduced motion: a spinner that simply stops reads as a frozen page, so
+ *     under reduced motion every variant breathes (a slow fade) instead of
+ *     moving — a change of state the eye can still see, without travel.
+ *
+ *   <LpLoader />                                   inline spinner
+ *   <LpLoader variant="dots" label="Connecting" />
+ *   <LpLoader :active="loading"><Results /></LpLoader>   placeholder → content
+ *
+ * Determinate progress (a known fraction) is LpProgress; this is for waits
+ * whose length is unknown.
+ */
+import { computed, useSlots } from "vue"
+import { useLabels } from "../composables/useLpConfig"
+import { useLoadingGate } from "../composables/useLoadingGate"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import LoaderMark from "./LoaderMark.vue"
+import LpSwap from "./LpSwap.vue"
+import { toneLook, type ToneName } from "./tone"
+
+export type LoaderVariant = "spinner" | "dots" | "bar"
+export type LoaderSize = "inline" | "sm" | "md" | "lg"
+/** `current` inherits the text colour around it; the rest are the kit's tones (tone.ts). */
+export type LoaderTone = "current" | ToneName
+export type LoaderLabels = { loading: string }
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * `spinner` for a spot (a button, a row, a field); `dots` for something
+     * conversational (typing, connecting); `bar` for a region across its width
+     * (the top of a card or a page).
+     */
+    variant?: LoaderVariant
+    /**
+     * `inline` sizes the mark from the font (a 1em spinner), so it fits a
+     * button or a line of text at whatever size that text is.
+     */
+    size?: LoaderSize
+    /**
+     * `current` takes the surrounding text colour, which is what a loader
+     * inside a button or a coloured badge wants; the others pin a kit tone.
+     */
+    tone?: LoaderTone
+    /**
+     * Whether work is under way. Off, the loader is not shown (or, with a
+     * default slot, the content is). Leave it on and mount the loader with
+     * `v-if` when it has nothing to swap with.
+     */
+    active?: boolean
+    /**
+     * Ms of loading before anything appears. Most requests finish inside 150
+     * ms; a spinner for those is a blink, not information. 0 shows at once —
+     * the right call where the trigger already acknowledged the click (a
+     * button that faded its label).
+     */
+    delay?: number
+    /** Ms the loader stays once shown, so a load ending just after it appeared does not blink it away. */
+    minVisible?: number
+    /**
+     * Visible text beside the indicator. Without it the indicator is still
+     * announced, with the `loading` label, to screen readers only.
+     */
+    label?: string
+    /** Spinner only: draw the faint full circle the arc runs along. */
+    track?: boolean
+    labels?: Partial<LoaderLabels>
+  }>(),
+  {
+    variant: "spinner",
+    size: "md",
+    tone: "current",
+    active: true,
+    delay: 150,
+    minVisible: 400,
+    track: false,
+  },
+)
+
+const text = useLabels<LoaderLabels>("loader", { loading: "Loading…" }, () => props.labels)
+const shown = useLoadingGate(() => props.active, {
+  delay: () => props.delay,
+  minVisible: () => props.minVisible,
+})
+
+const slots = useSlots()
+const wraps = computed(() => !!slots.default)
+
+
+/*
+ * The consumer's class lands on the indicator's own box (the status element),
+ * so `class="w-40"` narrows a bar and `class="text-lg"` scales an `inline`
+ * loader, rather than styling a wrapper around them.
+ */
+const { class: rootClass, attrs: rest } = useMergedAttrs(() => {
+  const tone = props.tone === "current" ? "" : toneLook(props.tone).text
+  if (props.variant === "bar") {
+    return `flex w-full min-w-12 flex-col gap-1.5 ${tone}`
+  }
+  return `inline-flex items-center gap-2 align-middle ${tone}`
+})
+
+const spoken = computed(() => props.label || text.value.loading)
+</script>
+
+<template>
+  <div v-if="wraps" :aria-busy="shown ? 'true' : undefined">
+    <LpSwap :swap-key="shown ? 'loading' : 'content'">
+      <div v-if="shown" class="flex justify-center py-8">
+        <LoaderMark :class="rootClass" v-bind="rest" :variant="variant" :size="size" :track="track" :label="label" :spoken="spoken" />
+      </div>
+      <slot v-else />
+    </LpSwap>
+  </div>
+
+  <Transition
+    v-else
+    enter-active-class="transition-opacity duration-(--duration-fast) ease-(--ease-emphasized) motion-reduce:transition-none"
+    enter-from-class="opacity-0"
+    leave-active-class="transition-opacity duration-(--duration-fast) ease-out motion-reduce:transition-none"
+    leave-to-class="opacity-0"
+  >
+    <LoaderMark v-if="shown" :class="rootClass" v-bind="rest" :variant="variant" :size="size" :track="track" :label="label" :spoken="spoken" />
+  </Transition>
+</template>

package/src/components/LpLogViewer.vue

@@ -25,16 +25,21 @@ import {
   watch,
 } from "vue"
 import { usePersisted } from "../composables/usePersisted"
-import { prefersReducedMotion } from "../composables/easing"
+import { durationToken, prefersReducedMotion, tokenEase } from "../composables/easing"
 import { useClipboard } from "../composables/useClipboard"
 import { useHotkeys } from "../composables/useHotkeys"
+import LpBadge from "./LpBadge.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpEmptyState from "./LpEmptyState.vue"
 import LpIcon from "./LpIcon.vue"
+import LpLoader from "./LpLoader.vue"
+import LpInput from "./LpInput.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useLabels } from "../composables/useLpConfig"
+import { useResizeObserver } from "../composables/useResizeObserver"
 import { countLevels, matchPositions, ringWindow, stepMatch } from "./logSearch"
+import { TONES, toneLook, type ToneName } from "./tone"
 
 export interface LogViewerLabels {
   [key: string]: string
@@ -225,16 +230,21 @@ const text = useLabels<LogViewerLabels>(
 // red (fatal gets a filled chip to stand apart from plain error).
 // `sel` tints ::selection in the row's semantic colour (info→brand, warn→accent,
 // error/fatal→danger) via Tailwind's `selection:` variant — the highlight then
-// matches the level instead of the browser default. Static classes (not built
-// from a var) so Tailwind emits them from the @source scan.
+// matches the level instead of the browser default. The toned levels read the
+// kit's tones (tone.ts, where the classes are spelled out whole for Tailwind's
+// scan); trace and debug are quieter than any tone, two steps of grey.
+const toned = (tone: ToneName) => {
+  const look = toneLook(tone)
+  return { rail: look.bg, text: "text-ink", chip: look.text, sel: look.selection }
+}
 const levelMeta: Record<LogLevel, { rail: string; text: string; chip: string; sel: string }> = {
-  trace: { rail: "bg-line-strong", text: "text-muted", chip: "text-muted", sel: "selection:bg-muted/40" },
+  trace: { rail: "bg-line-strong", text: "text-muted", chip: "text-muted", sel: TONES.neutral.selection },
   debug: { rail: "bg-line-strong", text: "text-muted-strong", chip: "text-muted-strong", sel: "selection:bg-muted-strong/40" },
-  info: { rail: "bg-brand", text: "text-ink", chip: "text-brand", sel: "selection:bg-brand/40" },
-  success: { rail: "bg-action", text: "text-ink", chip: "text-action", sel: "selection:bg-action/40" },
-  warn: { rail: "bg-accent", text: "text-ink", chip: "text-accent", sel: "selection:bg-accent/40" },
-  error: { rail: "bg-danger", text: "text-ink", chip: "text-danger", sel: "selection:bg-danger/40" },
-  fatal: { rail: "bg-danger", text: "text-ink", chip: "rounded-xs bg-danger px-1 text-ink-inverse", sel: "selection:bg-danger/40" },
+  info: toned("info"),
+  success: toned("success"),
+  warn: toned("warning"),
+  error: toned("error"),
+  fatal: { ...toned("error"), chip: `rounded-xs px-1 text-ink-inverse ${TONES.danger.bg}` },
 }
 
 function metaFor(level?: LogLevel) {
@@ -511,7 +521,7 @@ function revealMatch(position: number | undefined) {
   el.querySelector<HTMLElement>(`[data-log-row="${n}"]`)?.scrollIntoView({ block: "center", behavior })
 }
 
-const searchEl = ref<HTMLInputElement | null>(null)
+const searchEl = ref<InstanceType<typeof LpInput> | null>(null)
 
 function onSearchKeydown(event: KeyboardEvent) {
   if (event.isComposing) return
@@ -727,7 +737,12 @@ let topArmed = true
 
 function onScroll(e: Event) {
   const el = e.target as HTMLElement
-  pinned.value = atBottom(el)
+  // The glide's own writes are not the user leaving the tail: a burst taller
+  // than NEAR would read as "scrolled up" on its first frame and unpin it.
+  // Anything the user does to scroll cancels the glide before this runs. Nor
+  // may a scroll event the glide queued before an upward wheel re-pin the
+  // tail the wheel just left (see `leaveTail`).
+  if (!glide && performance.now() - leftAt > LEAVE_GRACE_MS) pinned.value = atBottom(el)
   // Feed the virtual window. Reading clientHeight here keeps it in sync with
   // runtime resizes (drawer drag, window resize) without a ResizeObserver.
   scrollTop.value = el.scrollTop
@@ -743,38 +758,171 @@ function onScroll(e: Event) {
   }
 }
 
-// Preserve scroll position across a prepend: when older lines are added at the
-// top, scrollTop must grow by the height they introduced or the view jumps. We
-// snapshot scrollHeight before the lines change and restore the offset after.
-let prevScrollHeight = 0
-let prevScrollTop = 0
+/*
+ * Keep the line being read where it is when the lines change under it.
+ *
+ * Anchored on a row, not on the total height. Measuring how much scrollHeight
+ * grew and adding all of it to scrollTop is right for older lines prepended
+ * above, but a line appended BELOW grows it just the same, so every pushed
+ * line dragged a reader who had scrolled up one row further down. The absolute
+ * write also cancelled the browser's own animated wheel scroll, so with a busy
+ * stream a wheel turn up never got anywhere.
+ *
+ * The first row in view is remembered with its offset; afterwards scrollTop
+ * moves by however far that row was displaced, and is not written at all when
+ * it stayed put. Rows above that leave (a capped stream) are covered the same
+ * way.
+ */
+let anchorRow: HTMLElement | null = null
+let anchorOffset = 0
+
+function firstRowInView(el: HTMLElement): HTMLElement | null {
+  const top = el.getBoundingClientRect().top
+  for (const row of el.querySelectorAll<HTMLElement>("[data-log-row]")) {
+    if (row.getBoundingClientRect().bottom > top) return row
+  }
+  return null
+}
+
 function captureScrollAnchor() {
   const el = viewport()
-  if (!el) return
-  prevScrollHeight = el.scrollHeight
-  prevScrollTop = el.scrollTop
+  anchorRow = el ? firstRowInView(el) : null
+  if (el && anchorRow) anchorOffset = anchorRow.getBoundingClientRect().top - el.getBoundingClientRect().top
 }
+
 function restoreScrollAnchor() {
   const el = viewport()
-  if (!el) return
-  const added = el.scrollHeight - prevScrollHeight
-  if (added > 0) el.scrollTop = prevScrollTop + added
+  const row = anchorRow
+  anchorRow = null
+  if (!el || !row?.isConnected) return
+  const drift = row.getBoundingClientRect().top - el.getBoundingClientRect().top - anchorOffset
+  if (Math.abs(drift) >= 1) el.scrollTop += drift
 }
 
-// Glide to the bottom. Honours OS reduce-motion. For auto-tail we skip the
-// animation on large jumps (`far`), where a smooth chase would feel sluggish —
-// but a deliberate "jump to latest" passes force=true to always animate.
-function rideToBottom(smooth = true, force = false) {
+/*
+ * Follow the tail by easing scrollTop toward the bottom over a frame loop.
+ *
+ * The browser's own smooth scroll covered one 20px row in three frames, so a
+ * pushed line still read as a jolt; it also cannot be retargeted, and a line
+ * arriving mid-scroll restarted it from wherever it stood. Here the target is
+ * re-read every frame, so lines landing during the glide (or rows collapsing
+ * above it) only move where it ends, and a fresh change restarts the easing
+ * from the position actually on screen.
+ *
+ * A jump of more than a viewport starts one viewport short of the end: easing
+ * across a whole burst is a smear of text nobody can follow, and snapping
+ * there outright was the jolt this replaces.
+ */
+let glide = 0
+
+function stopGlide() {
+  if (glide) cancelAnimationFrame(glide)
+  glide = 0
+}
+
+/*
+ * Where "the bottom" is: the newest row that is staying, not the end of the
+ * scroll height. Rows still collapsing out under it (a window that slid back,
+ * a filter that dropped the tail) briefly make the list overflow, and gliding
+ * down into them scrolled a list that fits by a few pixels and back again as
+ * they closed.
+ */
+function tailEnd(el: HTMLElement): number {
+  const max = el.scrollHeight - el.clientHeight
+  const list = el.querySelector("[data-log-row]")?.parentElement
+  let row = list?.lastElementChild ?? null
+  const below = row ? max + el.clientHeight - contentBottom(el, row) : 0
+  while (row && (!row.hasAttribute("data-log-row") || row.classList.contains("lp-log-row-leave-active"))) {
+    row = row.previousElementSibling
+  }
+  if (!row) return max
+  return Math.max(0, Math.min(max, contentBottom(el, row) + below - el.clientHeight))
+}
+
+function contentBottom(el: HTMLElement, row: Element): number {
+  return row.getBoundingClientRect().bottom - el.getBoundingClientRect().top + el.scrollTop
+}
+
+function rideToBottom() {
   const el = viewport()
   if (!el) return
-  const reduce = prefersReducedMotion()
-  const far = !force && el.scrollHeight - el.scrollTop - el.clientHeight > el.clientHeight
-  el.scrollTo({ top: el.scrollHeight, behavior: smooth && !reduce && !far ? "smooth" : "auto" })
+  stopGlide()
+  const end = () => tailEnd(el)
+  if (prefersReducedMotion()) {
+    el.scrollTop = end()
+    return
+  }
+  const from = Math.max(el.scrollTop, end() - el.clientHeight)
+  if (Math.abs(end() - from) < 1) return
+  el.scrollTop = from
+  const ms = durationToken("duration-medium")
+  const ease = tokenEase("ease-emphasized")
+  const started = performance.now()
+  const step = (now: number) => {
+    const t = Math.min(1, Math.max(0, (now - started) / ms))
+    el.scrollTop = from + (end() - from) * ease(t)
+    glide = t < 1 ? requestAnimationFrame(step) : 0
+  }
+  glide = requestAnimationFrame(step)
+}
+
+/*
+ * The user reaching for the stream ends the glide at once, and an upward
+ * gesture leaves the tail there and then rather than when its scroll lands.
+ *
+ * Waiting for the scroll event was not enough: a wheel turn is itself animated
+ * by the browser, the next pushed line arrived before it had moved past NEAR,
+ * the tail still counted as pinned, and the glide's first write cancelled the
+ * wheel's own animation. With lines every ~100ms the stream simply refused to
+ * be scrolled up. A pointer or finger held on the stream (dragging the
+ * scrollbar, selecting text) holds the tail for the same reason.
+ */
+let holding = false
+// Long enough for a scroll event already queued by the glide to arrive.
+const LEAVE_GRACE_MS = 250
+let leftAt = -Infinity
+
+function leaveTail() {
+  stopGlide()
+  leftAt = performance.now()
+  const el = viewport()
+  if (el && el.scrollTop > 0) pinned.value = false
+}
+
+function onWheel(event: WheelEvent) {
+  if (event.deltaY < 0) leaveTail()
+  else stopGlide()
+}
+
+const UPWARD_KEYS = new Set(["ArrowUp", "PageUp", "Home"])
+
+function onKeydown(event: KeyboardEvent) {
+  const field = event.target instanceof HTMLElement && event.target.closest("input, textarea, [contenteditable]")
+  if (!field && UPWARD_KEYS.has(event.key)) leaveTail()
+}
+
+function release() {
+  holding = false
+  window.removeEventListener("pointerup", release)
+  window.removeEventListener("pointercancel", release)
+  window.removeEventListener("touchend", release)
+}
+
+function hold(event: Event) {
+  // The scroll area's root, so its scrollbar (a sibling of the viewport)
+  // counts, and the toolbar and jump pill above it do not.
+  const area = viewport()?.parentElement
+  if (!area || !(event.target instanceof Node) || !area.contains(event.target)) return
+  stopGlide()
+  holding = true
+  window.addEventListener("pointerup", release)
+  window.addEventListener("pointercancel", release)
+  window.addEventListener("touchend", release)
 }
 
 function scrollToBottom() {
   current.value = -1
-  rideToBottom(true, true)
+  rideToBottom()
   pinned.value = true
 }
 
@@ -802,8 +950,8 @@ watch(
   linesSignal,
   async () => {
     await nextTick()
-    if (props.tail && pinned.value && current.value < 0) {
-      requestAnimationFrame(() => rideToBottom(true))
+    if (props.tail && pinned.value && !holding && current.value < 0) {
+      rideToBottom()
     } else {
       restoreScrollAnchor()
     }
@@ -818,39 +966,77 @@ const showJump = computed(() => props.tail && !pinned.value && props.lines.lengt
 // collapsed to a single row, so there was nothing to scroll, and `onScroll` —
 // the only other place that refreshed the height — could never fire to correct
 // it. The list looked stuck and wouldn't scroll at all.
-let viewportResize: ResizeObserver | null = null
-
 function measureViewport() {
   const el = viewport()
   if (el) viewportHeight.value = el.clientHeight
 }
+useResizeObserver(viewport, measureViewport)
 
 onMounted(() => {
   measureViewport()
   const el = viewport()
-  if (el && typeof ResizeObserver !== "undefined") {
-    viewportResize = new ResizeObserver(measureViewport)
-    viewportResize.observe(el)
-  }
+  // A tailing viewer opens on its newest lines. Opening at the top left the
+  // first pushed line to haul the whole history past in one go.
+  if (el && props.tail) el.scrollTop = el.scrollHeight
 })
 
 onBeforeUnmount(() => {
-  viewportResize?.disconnect()
-  viewportResize = null
+  stopGlide()
+  release()
 })
 
-// FLIP / enter / leave classes for the full-render TransitionGroup, bound via
-// v-bind so the same list element can fall back to a plain <ol> when virtualised
-// (a component :is can't carry TransitionGroup-only props inertly otherwise).
+/*
+ * Enter / leave / move for the full-render TransitionGroup, bound via v-bind so
+ * the same list element can fall back to a plain <ol> when virtualised (a
+ * component :is can't carry TransitionGroup-only props inertly otherwise).
+ *
+ * Named classes from the <style> block rather than Tailwind utilities: every
+ * row carries `transition-colors` for its hover tint, and a utility that sets
+ * `transition` for the enter, leave or move lands in the same layer with the
+ * same specificity, so whichever Tailwind happened to emit last won. It was
+ * `transition-colors`: no row ever animated, a pushed line popped in and a
+ * dropped one took its height with it in a single frame.
+ *
+ * A leaving row collapses from its own measured height. A fixed cap (it was
+ * `max-h-8`) snapped a wrapped, three-line row down to the cap first.
+ */
 const transitionProps = {
   tag: "ol",
-  "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-[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-[var(--duration-medium)] ease-[var(--ease-emphasized)]",
+  name: "lp-log-row",
+  onBeforeLeave: (el: Element) => {
+    const row = el as HTMLElement
+    row.style.setProperty("--lp-log-row-h", `${row.offsetHeight}px`)
+  },
+}
+
+/*
+ * Rows that just arrived while virtualised. The TransitionGroup is off there
+ * (FLIP over thousands of rows is the cost virtualising avoids), but a pushed
+ * line still should not pop in. Only the lines appended by the latest change
+ * are marked, found by where the previous last line sits in the new array, so
+ * a row scrolled into view later, or a whole replaced buffer, never plays it.
+ * A burst taller than the viewport is not worth animating line by line.
+ */
+const FRESH_CAP = 40
+const freshLines = shallowRef<WeakSet<LogLine>>(new WeakSet())
+let lastSeen: LogLine | undefined
+watch(
+  linesSignal,
+  () => {
+    const lines = props.lines
+    const fresh = new WeakSet<LogLine>()
+    const at = lastSeen ? lines.lastIndexOf(lastSeen) : -1
+    if (at >= 0 && lines.length - 1 - at <= FRESH_CAP) {
+      for (let i = at + 1; i < lines.length; i++) fresh.add(lines[i])
+    }
+    lastSeen = lines[lines.length - 1]
+    freshLines.value = fresh
+  },
+  { immediate: true },
+)
+function isFresh(n: number): boolean {
+  const line = sourceLines.value[n]
+  return virtualise.value && !!line && freshLines.value.has(line)
 }
 
 // The viewer draws its own card frame and hides its overflow; a consumer
@@ -872,6 +1058,10 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     v-bind="rest"
     @pointerenter="hovered = true"
     @pointerleave="hovered = false"
+    @wheel.passive="onWheel"
+    @touchstart.passive="hold"
+    @pointerdown="hold"
+    @keydown="onKeydown"
   >
     <!-- Says which state it is in, because a stream that has simply gone quiet
          looks exactly like a frozen one. -->
@@ -893,32 +1083,24 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
       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>
+      <LpInput
+        ref="searchEl"
+        v-model="query"
+        type="search"
+        size="sm"
+        icon="lucide:search"
+        clearable
+        class="min-w-48 flex-1"
+        :aria-label="text.search"
+        :placeholder="text.search"
+        :labels="{ clear: text.clearSearch }"
+        @keydown="onSearchKeydown"
+      >
+        <template #trailing>
+          <span v-if="term" class="shrink-0 text-[11px] tabular-nums text-muted" aria-live="polite">{{ matchLabel }}</span>
+        </template>
+      </LpInput>
+
       <div class="flex items-center">
         <button
           type="button"
@@ -988,8 +1170,10 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
           v-if="loadingOlder"
           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]">{{ text.loadingOlder }}</span>
+          <!-- The loader speaks the row's words; the visible caption is hidden
+               from screen readers so they are not read twice. -->
+          <LpLoader size="inline" :delay="0" :labels="{ loading: text.loadingOlder }" class="text-[14px]" />
+          <span class="text-[11px]" aria-hidden="true">{{ text.loadingOlder }}</span>
         </div>
 
       <!-- ONE context menu wraps the whole list (not each row): @contextmenu
@@ -1026,7 +1210,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
           :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, n === currentRow ? 'bg-accent/15' : '']"
+          :class="[metaFor(line.level).sel, n === currentRow ? 'bg-accent/15' : '', isFresh(n) ? 'lp-log-row-fresh' : '']"
           :aria-current="n === currentRow ? 'true' : undefined"
         >
           <!-- level rail -->
@@ -1091,12 +1275,13 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
               enter-active-class="transition duration-[var(--duration-medium)] ease-[var(--ease-emphasized)]"
               enter-from-class="scale-50 opacity-0"
             >
-              <span
+              <LpBadge
                 v-if="count > 1"
                 :key="count"
-                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"
+                size="sm"
+                class="ml-2 select-none tabular-nums"
                 :title="text.identical.replace('{n}', String(count))"
-              >×{{ count }}</span>
+              >×{{ count }}</LpBadge>
             </Transition>
           </span>
         </li>
@@ -1137,3 +1322,47 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     </Transition>
   </div>
 </template>
+
+<style>
+/*
+ * Unscoped and namespaced, like LpRollingText: Vue applies these to the row
+ * while it leaves, and an unlayered rule is also what lets them outrank the
+ * row's own `transition-colors` utility (see `transitionProps`).
+ */
+/* Rises into place from just below, the direction a tail grows in (the kit's rise-in). */
+.lp-log-row-enter-active,
+.lp-log-row-fresh {
+  --rise: 6px;
+  animation: rise-in var(--duration-medium) var(--ease-emphasized);
+}
+
+.lp-log-row-leave-active {
+  overflow: hidden;
+  animation: lp-log-row-out var(--duration-medium) var(--ease-emphasized) forwards;
+}
+
+.lp-log-row-move {
+  transition: transform var(--duration-medium) var(--ease-emphasized);
+}
+
+@keyframes lp-log-row-out {
+  from {
+    height: var(--lp-log-row-h, 1.25rem);
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lp-log-row-enter-active,
+  .lp-log-row-fresh,
+  .lp-log-row-leave-active {
+    animation: none;
+  }
+  .lp-log-row-move {
+    transition: none;
+  }
+}
+</style>