@leavepulse/ui 0.43.4 → 0.44.0

package/src/components/LpLightbox.vue

@@ -22,11 +22,29 @@ import {
   DialogTitle,
 } from "reka-ui"
 import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import { useZoomPan } from "../composables/useZoomPan"
 import { fileNameOf, type LightboxItem } from "./lightbox"
 import LpIcon from "./LpIcon.vue"
 import { useModalLayer } from "./modalDepth"
 
+export type LightboxLabels = {
+  viewer: string
+  /** `{index}` and `{total}` are filled in. */
+  position: string
+  previous: string
+  next: string
+  zoomIn: string
+  zoomOut: string
+  rotate: string
+  copy: string
+  download: string
+  close: string
+  failed: string
+  spoiler: string
+  reveal: string
+}
+
 const props = withDefaults(
   defineProps<{
     open?: boolean
@@ -46,6 +64,7 @@ const props = withDefaults(
     loop?: boolean
     /** Largest zoom level. */
     maxZoom?: number
+    labels?: Partial<LightboxLabels>
   }>(),
   {
     open: false,
@@ -68,7 +87,31 @@ const emit = defineEmits<{
   (e: "copy", item: LightboxItem, ok: boolean): void
 }>()
 
-const { claim, release, layer } = useModalLayer()
+const text = useLabels<LightboxLabels>(
+  "lightbox",
+  {
+    viewer: "Image viewer",
+    position: "Image {index} of {total}",
+    previous: "Previous image",
+    next: "Next image",
+    zoomIn: "Zoom in (+)",
+    zoomOut: "Zoom out (−)",
+    rotate: "Rotate (R)",
+    copy: "Copy image",
+    download: "Download",
+    close: "Close (Esc)",
+    failed: "This image couldn't be loaded.",
+    spoiler: "Spoiler",
+    reveal: "Show image",
+  },
+  () => props.labels,
+)
+
+const position = (i: number) =>
+  text.value.position.replace("{index}", String(i + 1)).replace("{total}", String(props.items.length))
+
+const contentRef = ref<{ $el: HTMLElement } | null>(null)
+const { claim, release, layer } = useModalLayer({ element: () => contentRef.value?.$el })
 watch(() => props.open, (open) => (open ? claim() : release()), { immediate: true })
 onBeforeUnmount(release)
 
@@ -79,7 +122,7 @@ defineSlots<{
   actions(props: { item: LightboxItem; index: number }): unknown
 }>()
 
-const zoom = useZoomPan({ max: props.maxZoom })
+const zoom = useZoomPan({ max: () => props.maxZoom })
 
 // `zoom` is a plain object, so its refs don't unwrap in the template — surface
 // the two the chrome reads as computeds rather than writing `.value` in markup.
@@ -87,7 +130,11 @@ const scale = computed(() => zoom.scale.value)
 const isZoomed = computed(() => zoom.zoomed.value)
 const isPanning = computed(() => zoom.panning.value)
 
-const current = computed(() => Math.min(Math.max(props.index, 0), Math.max(props.items.length - 1, 0)))
+// Works with and without v-model:index: the prop seeds and steers it, paging
+// moves it locally and reports the move.
+const shown = ref(props.index)
+watch(() => props.index, (i) => (shown.value = i))
+const current = computed(() => Math.min(Math.max(shown.value, 0), Math.max(props.items.length - 1, 0)))
 const item = computed<LightboxItem | undefined>(() => props.items[current.value])
 const total = computed(() => props.items.length)
 const showStrip = computed(() => props.filmstrip ?? total.value > 1)
@@ -113,6 +160,7 @@ function go(next: number) {
   // Compare against the raw target, not the wrapped one: stepping past the last
   // image is still "forward" even though the index jumps back to 0.
   direction.value = next > current.value ? 1 : -1
+  shown.value = wrapped
   emit("update:index", wrapped)
   emit("change", wrapped, props.items[wrapped])
 }
@@ -193,6 +241,23 @@ function close() {
   emit("update:open", false)
 }
 
+/*
+ * A spoiler stays covered until it is asked for, here as in the gallery: the
+ * viewer is often opened straight from a link or a filmstrip, past whatever
+ * cover the grid had.
+ */
+const revealed = ref<Set<number>>(new Set())
+const covered = (i: number) => !!props.items[i]?.spoiler && !revealed.value.has(i)
+function reveal(i: number) {
+  revealed.value = new Set(revealed.value).add(i)
+}
+watch(
+  () => props.open,
+  (open) => {
+    if (!open) revealed.value = new Set()
+  },
+)
+
 function onKeydown(e: KeyboardEvent) {
   switch (e.key) {
     case "ArrowRight":
@@ -270,21 +335,51 @@ function onViewportClick(e: MouseEvent) {
   close()
 }
 
-async function download() {
-  const target = item.value
-  if (!target) return
-  emit("download", target)
+function sameOrigin(src: string): boolean {
+  try {
+    const url = new URL(src, window.location.href)
+    return url.protocol === "blob:" || url.protocol === "data:" || url.origin === window.location.origin
+  } catch {
+    return false
+  }
+}
+
+function save(href: string, name: string, newTab = false) {
   const a = document.createElement("a")
-  a.href = target.src
-  a.download = fileNameOf(target)
-  // Cross-origin sources ignore `download` and just navigate, so open those in
-  // a new tab instead of replacing the app.
-  a.rel = "noopener"
+  a.href = href
+  if (newTab) {
+    a.target = "_blank"
+    a.rel = "noopener"
+  } else {
+    a.download = name
+  }
   document.body.appendChild(a)
   a.click()
   a.remove()
 }
 
+/*
+ * A cross-origin `download` attribute is ignored and the link just navigates,
+ * which unloaded the whole app in favour of the image. Such a source is fetched
+ * into a blob first; one that refuses CORS opens in a new tab instead.
+ */
+async function download() {
+  const target = item.value
+  if (!target) return
+  emit("download", target)
+  const name = fileNameOf(target)
+  if (sameOrigin(target.src)) return save(target.src, name)
+  try {
+    const response = await fetch(target.src, { mode: "cors" })
+    if (!response.ok) throw new Error(String(response.status))
+    const url = URL.createObjectURL(await response.blob())
+    save(url, name)
+    window.setTimeout(() => URL.revokeObjectURL(url), 0)
+  } catch {
+    save(target.src, name, true)
+  }
+}
+
 async function copy() {
   const target = item.value
   if (!target) return
@@ -346,14 +441,15 @@ const ARROW =
         :style="{ zIndex: layer.scrim }"
       />
       <DialogContent
+        ref="contentRef"
         class="fixed inset-0 flex flex-col outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none"
         :style="{ zIndex: layer.panel }"
         @keydown="onKeydown"
       >
         <!-- reka wants both for a labelled dialog; the caption is the title. -->
-        <DialogTitle class="sr-only">{{ item?.title ?? "Image viewer" }}</DialogTitle>
+        <DialogTitle class="sr-only">{{ item?.title ?? text.viewer }}</DialogTitle>
         <DialogDescription class="sr-only">
-          {{ item?.description ?? `Image ${current + 1} of ${total}` }}
+          {{ item?.description ?? position(current) }}
         </DialogDescription>
 
         <!-- Toolbar. Chrome drifts in from its own edge, slightly behind the
@@ -369,34 +465,34 @@ const ARROW =
           <div class="ml-auto flex items-center gap-1">
             <slot name="actions" :item="item!" :index="current" />
 
-            <button :class="BTN" type="button" title="Zoom out (−)" @click="zoom.zoomBy(1 / 1.3)">
+            <button :class="BTN" type="button" :title="text.zoomOut" @click="zoom.zoomBy(1 / 1.3)">
               <LpIcon name="lucide:zoom-out" :size="18" />
             </button>
-            <button :class="BTN" type="button" title="Zoom in (+)" @click="zoom.zoomBy(1.3)">
+            <button :class="BTN" type="button" :title="text.zoomIn" @click="zoom.zoomBy(1.3)">
               <LpIcon name="lucide:zoom-in" :size="18" />
             </button>
             <button
               v-if="rotatable"
               :class="BTN"
               type="button"
-              title="Rotate (R)"
+              :title="text.rotate"
               @click="rotate"
             >
               <LpIcon name="lucide:rotate-cw" :size="18" />
             </button>
-            <button v-if="copyable" :class="BTN" type="button" title="Copy image" @click="copy">
+            <button v-if="copyable" :class="BTN" type="button" :title="text.copy" @click="copy">
               <LpIcon name="lucide:copy" :size="18" />
             </button>
             <button
               v-if="downloadable"
               :class="BTN"
               type="button"
-              title="Download"
+              :title="text.download"
               @click="download"
             >
               <LpIcon name="lucide:download" :size="18" />
             </button>
-            <button :class="BTN" type="button" title="Close (Esc)" @click="close">
+            <button :class="BTN" type="button" :title="text.close" @click="close">
               <LpIcon name="lucide:x" :size="20" />
             </button>
           </div>
@@ -419,7 +515,7 @@ const ARROW =
             :class="[ARROW, 'left-4']"
             type="button"
             :disabled="!canPrev"
-            aria-label="Previous image"
+            :aria-label="text.previous"
             @click.stop="go(current - 1)"
           >
             <LpIcon name="lucide:chevron-left" :size="24" />
@@ -430,14 +526,28 @@ const ARROW =
             class="flex flex-col items-center gap-3 text-white/60"
           >
             <LpIcon name="lucide:image-off" :size="40" />
-            <p class="text-sm">This image couldn't be loaded.</p>
+            <p class="text-sm">{{ text.failed }}</p>
+          </div>
+          <div
+            v-else-if="item && covered(current)"
+            class="flex flex-col items-center gap-3 text-white/70"
+          >
+            <LpIcon name="lucide:eye-off" :size="36" />
+            <p class="text-sm font-medium">{{ text.spoiler }}</p>
+            <button
+              type="button"
+              class="rounded-control bg-white/15 px-3 py-1.5 text-sm text-white outline-none transition-colors hover:bg-white/25 focus-visible:ring-2 focus-visible:ring-ring"
+              @click.stop="reveal(current)"
+            >
+              {{ text.reveal }}
+            </button>
           </div>
-          <!-- Keyed on src so paging remounts the img and replays the slide;
-               without the key Vue patches it in place and the change is a hard
-               cut with no sense of direction. -->
+          <!-- Keyed on position and src so paging remounts the img and replays
+               the slide, even between two items with the same source (whose
+               load event would otherwise never fire, leaving the spinner up). -->
           <img
             v-else-if="item"
-            :key="item.src"
+            :key="`${current}:${item.src}`"
             data-lightbox-image
             :src="item.src"
             :alt="item.title ?? ''"
@@ -449,7 +559,7 @@ const ARROW =
           />
 
           <LpIcon
-            v-if="loading && !failed"
+            v-if="loading && !failed && !covered(current)"
             name="lucide:loader-circle"
             :size="28"
             class="absolute animate-spin text-white/50"
@@ -459,7 +569,7 @@ const ARROW =
             :class="[ARROW, 'right-4']"
             type="button"
             :disabled="!canNext"
-            aria-label="Next image"
+            :aria-label="text.next"
             @click.stop="go(current + 1)"
           >
             <LpIcon name="lucide:chevron-right" :size="24" />
@@ -494,13 +604,14 @@ const ARROW =
               :style="{ '--thumb-delay': `${Math.min(i * 30, 240)}ms` }"
               class="size-14 shrink-0 overflow-hidden rounded-control outline-none ring-2 transition-[opacity,box-shadow,scale] duration-[var(--duration-fast)] hover:scale-105 focus-visible:ring-ring animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_both] [animation-delay:var(--thumb-delay)] motion-reduce:animate-none"
               :class="i === current ? 'opacity-100 ring-brand' : 'opacity-45 ring-transparent hover:opacity-80'"
-              :aria-label="entry.title ?? `Image ${i + 1}`"
+              :aria-label="entry.title ?? position(i)"
               @click="go(i)"
             >
               <img
                 :src="entry.thumb ?? entry.src"
                 :alt="entry.title ?? ''"
                 class="size-full object-cover"
+                :class="covered(i) ? 'scale-110 blur-md' : ''"
                 draggable="false"
               />
             </button>

package/src/components/LpLink.vue

@@ -7,11 +7,15 @@ export default { inheritAttrs: false }
 
 <script setup lang="ts">
 import { computed, type Component } from "vue"
+import { useLinkComponent } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { resolveLink, type LinkTarget } from "./link"
 
 const props = withDefaults(
   defineProps<{
     href?: string
+    /** Router destination; rendered through the configured link component. */
+    to?: LinkTarget
     external?: boolean
     /** Shorthand for `tone="muted"`. */
     muted?: boolean
@@ -23,11 +27,9 @@ const props = withDefaults(
      */
     tone?: "brand" | "ink" | "muted" | "soft"
     /**
-     * Root element/component. Defaults to a native <a>. Pass a router link
-     * component (e.g. NuxtLink or RouterLink) to keep client-side navigation;
-     * the kit stays DOM-agnostic, the consumer supplies the link component.
-     * Router links take their destination through their own prop (`to`), which
-     * falls through as a plain attribute.
+     * Root element/component. By default an internal `to`/`href` renders the
+     * link component set with provideLpConfig (NuxtLink under the Nuxt module),
+     * anything else a native <a>. Pass a component here to override per link.
      */
     as?: string | Component
     /**
@@ -50,13 +52,23 @@ const props = withDefaults(
      */
     revealOn?: "self" | "group"
   }>(),
-  { variant: "default", as: "a", revealOn: "self" },
+  { variant: "default", revealOn: "self" },
 )
 
-// A router link component owns its destination through its own prop (`to`),
-// so `href` is only bound when this really renders an anchor. `target`/`rel`
-// stay in play either way — router links honour them for external targets.
-const isAnchor = computed(() => props.as === "a")
+const linkComponent = useLinkComponent()
+
+// An explicit `as` keeps its old contract (href on an anchor, `to` passed on to
+// the component). Otherwise the target decides, and an external link is always
+// a plain anchor.
+const resolved = computed(() => {
+  if (props.as) {
+    return props.as === "a"
+      ? { is: "a", props: { href: props.href } }
+      : { is: props.as, props: props.to != null ? { to: props.to } : { href: props.href } }
+  }
+  const component = props.external ? "a" : linkComponent.value
+  return resolveLink(component, { to: props.to, href: props.href }) ?? { is: "a", props: {} }
+})
 
 const rel = computed(() => (props.external ? "noopener noreferrer" : undefined))
 const target = computed(() => (props.external ? "_blank" : undefined))
@@ -121,12 +133,11 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
 
 <template>
   <component
-    :is="as"
-    :href="isAnchor ? href : undefined"
+    :is="resolved.is"
+    v-bind="{ ...resolved.props, ...rest }"
     :target="target"
     :rel="rel"
     :class="rootClass"
-    v-bind="rest"
   >
     <slot />
   </component>

package/src/components/LpLogViewer.vue

@@ -31,6 +31,26 @@ 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"
+
+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
+}
 
 export type LogLevel = "trace" | "debug" | "info" | "warn" | "error" | "fatal" | "success"
 
@@ -103,6 +123,7 @@ const props = withDefaults(
      * so a duplicate level word / timestamp doesn't repeat in the message body.
      */
     parse?: boolean
+    labels?: Partial<LogViewerLabels>
   }>(),
   {
     showTime: true,
@@ -111,8 +132,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 +148,25 @@ const emit = defineEmits<{
   (e: "reach-top"): void
 }>()
 
+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",
+  },
+  () => 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).
@@ -336,6 +374,24 @@ 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
+}
+
 // True when filtering has emptied an otherwise non-empty stream.
 const filteredEmpty = computed(
   () => props.lines.length > 0 && visibleLines.value.length === 0,
@@ -356,7 +412,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 +454,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,7 +470,7 @@ 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 }),
@@ -576,8 +632,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,7 +650,7 @@ 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) {
@@ -673,7 +736,7 @@ 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>
 
@@ -691,7 +754,7 @@ 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 class="text-muted">{{ filteredEmpty ? text.noMatch : (emptyLabel ?? text.empty) }}</span>
         <span v-if="filteredEmpty" class="text-muted/70">“{{ highlight }}”</span>
       </div>
 
@@ -704,7 +767,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,7 +801,7 @@ 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"
@@ -785,7 +848,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"
@@ -803,7 +872,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
                 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`"
+                :title="text.identical.replace('{n}', String(count))"
               >×{{ count }}</span>
             </Transition>
           </span>
@@ -839,7 +908,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
             :size="14"
             class="transition-transform duration-200 ease-[var(--ease-emphasized)] group-hover:translate-y-0.5"
           />
-          Jump to latest
+          {{ text.jump }}
         </button>
       </div>
     </Transition>