@leavepulse/ui 0.43.4 → 0.45.0

package/dist/chunks/{LpLogViewer-CaRy5MeS.js → LpLogViewer-KypbgOyo.js}

@@ -1,47 +1,68 @@
-import { defineComponent, ref, shallowRef, computed, onMounted, onBeforeUnmount, watch, nextTick, openBlock, createElementBlock, mergeProps, unref, createVNode, Transition, withCtx, toDisplayString, createCommentVNode, normalizeStyle, createElementVNode, Fragment, createBlock, resolveDynamicComponent, TransitionGroup, renderList, normalizeClass, createTextVNode } from "vue";
+import { defineComponent, useModel, computed, ref, shallowRef, onMounted, onBeforeUnmount, watch, nextTick, openBlock, createElementBlock, mergeProps, unref, createVNode, Transition, withCtx, toDisplayString, createCommentVNode, createElementVNode, withDirectives, vModelText, Fragment, renderList, normalizeClass, createTextVNode, normalizeStyle, createBlock, resolveDynamicComponent, TransitionGroup, mergeModels } from "vue";
 import { prefersReducedMotion } from "../composables/easing.js";
 import { useClipboard } from "../composables/useClipboard.js";
 import { useHotkeys } from "../composables/useHotkeys.js";
-import { _ as _sfc_main$3 } from "./LpContextMenu-CwW1QXe_.js";
-import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-D8xyKXcF.js";
+import { _ as _sfc_main$3 } from "./LpContextMenu-BqkAYa9X.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-Bry1fdOM.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { ringWindow, matchPositions, countLevels, stepMatch } from "../components/logSearch.js";
 const _hoisted_1 = {
   key: 0,
   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"
 };
 const _hoisted_2 = {
+  key: 0,
+  class: "flex flex-wrap items-center gap-2 border-b border-line px-2 py-1.5 font-sans"
+};
+const _hoisted_3 = { 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" };
+const _hoisted_4 = ["aria-label", "placeholder"];
+const _hoisted_5 = {
+  key: 0,
+  class: "shrink-0 text-[11px] tabular-nums text-muted",
+  "aria-live": "polite"
+};
+const _hoisted_6 = ["aria-label"];
+const _hoisted_7 = { class: "flex items-center" };
+const _hoisted_8 = ["aria-label", "disabled"];
+const _hoisted_9 = ["aria-label", "disabled"];
+const _hoisted_10 = ["aria-label"];
+const _hoisted_11 = ["aria-pressed", "onClick"];
+const _hoisted_12 = { class: "font-normal tabular-nums text-muted" };
+const _hoisted_13 = {
   key: 0,
   class: "flex h-full flex-col items-center justify-center gap-1 px-4 py-10 text-center"
 };
-const _hoisted_3 = { class: "text-muted" };
-const _hoisted_4 = {
+const _hoisted_14 = { class: "text-muted" };
+const _hoisted_15 = {
   key: 0,
   class: "text-muted/70"
 };
-const _hoisted_5 = {
+const _hoisted_16 = {
   key: 0,
   class: "flex items-center justify-center gap-2 py-2 text-muted"
 };
-const _hoisted_6 = ["data-log-row"];
-const _hoisted_7 = {
+const _hoisted_17 = { class: "text-[11px]" };
+const _hoisted_18 = ["data-log-row", "aria-current"];
+const _hoisted_19 = {
   key: 0,
   class: "mr-3 w-10 shrink-0 select-none text-right tabular-nums text-muted/70"
 };
-const _hoisted_8 = {
+const _hoisted_20 = {
   key: 1,
   class: "mr-3 shrink-0 tabular-nums text-muted"
 };
-const _hoisted_9 = {
+const _hoisted_21 = {
   key: 3,
   class: "mr-2 shrink-0 text-muted-strong"
 };
-const _hoisted_10 = {
+const _hoisted_22 = {
   key: 0,
   class: "rounded-xs bg-accent/30 text-ink"
 };
-const _hoisted_11 = ["title"];
-const _hoisted_12 = {
+const _hoisted_23 = ["title"];
+const _hoisted_24 = {
   key: 0,
   class: "absolute inset-x-0 bottom-3 flex justify-center"
 };
@@ -49,7 +70,7 @@ const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "LpLogViewer",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     lines: {},
     showTime: { type: Boolean, default: true },
     showLevel: { type: Boolean, default: true },
@@ -60,18 +81,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     compact: { type: Boolean },
     tail: { type: Boolean, default: true },
     height: { default: "20rem" },
-    emptyLabel: { default: "No logs yet" },
-    frozenLabel: { default: "Held — release Ctrl to resume" },
+    emptyLabel: {},
+    frozenLabel: {},
     loadingOlder: { type: Boolean },
     loadOlder: { type: Boolean },
     rowMenu: { type: Boolean, default: true },
     extraRowItems: {},
-    parse: { type: Boolean, default: false }
-  },
-  emits: ["filter", "reach-top"],
-  setup(__props, { emit: __emit }) {
+    parse: { type: Boolean, default: false },
+    maxLines: {},
+    toolbar: { type: Boolean },
+    labels: {}
+  }, {
+    "search": { default: "" },
+    "searchModifiers": {},
+    "levels": { default: () => [] },
+    "levelsModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["filter", "reach-top"], ["update:search", "update:levels"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const query = useModel(__props, "search");
+    const levels = useModel(__props, "levels");
+    const term = computed(() => (props.toolbar && query.value ? query.value : props.highlight ?? "").trim());
+    const text = useLabels(
+      "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
+    );
     const levelMeta = {
       trace: { rail: "bg-line-strong", text: "text-muted", chip: "text-muted", sel: "selection:bg-muted/40" },
       debug: { rail: "bg-line-strong", text: "text-muted-strong", chip: "text-muted-strong", sel: "selection:bg-muted-strong/40" },
@@ -139,11 +196,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const root = ref(null);
     const frozen = ref(false);
     const frozenLines = shallowRef(null);
-    const sourceLines = computed(() => frozenLines.value ?? props.lines);
+    const windowed = computed(() => ringWindow(frozenLines.value ?? props.lines, props.maxLines));
+    const sourceLines = computed(() => windowed.value.lines);
+    const lineOffset = computed(() => windowed.value.offset);
     function freeze() {
       if (!hovered.value && !focusWithin()) return false;
       if (frozen.value) return true;
-      frozenLines.value = props.lines;
+      frozenLines.value = props.maxLines ? props.lines.slice(-props.maxLines) : props.lines;
       frozen.value = true;
       return true;
     }
@@ -156,9 +215,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const el = root.value;
       return !!el && el.contains(document.activeElement);
     }
+    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 }
     ]);
     function onKeyup(event) {
       if (event.key === "Control" || event.key === "Meta") thaw();
@@ -175,8 +235,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.parse ? sourceLines.value.map(parseLine) : sourceLines.value
     );
     const visibleLines = computed(() => {
-      const term = props.filterMatches ? props.highlight?.trim().toLowerCase() : "";
-      const filtered = parsedLines.value.map((line, n) => ({ line, n })).filter(({ line }) => !term || line.message.toLowerCase().includes(term));
+      const needle = props.filterMatches ? term.value.toLowerCase() : "";
+      const shown = levels.value.length ? new Set(levels.value) : null;
+      const filtered = parsedLines.value.map((line, n) => ({ line, n })).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 }));
       const folded = [];
       for (const row of filtered) {
@@ -189,6 +250,82 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return folded;
     });
+    const lineIds = /* @__PURE__ */ new WeakMap();
+    let nextLineId = 0;
+    function lineKey(n) {
+      const line = sourceLines.value[n];
+      if (!line) return -1 - n;
+      let id = lineIds.get(line);
+      if (id === void 0) {
+        id = nextLineId++;
+        lineIds.set(line, id);
+      }
+      return id;
+    }
+    const LEVEL_ORDER = ["trace", "debug", "info", "success", "warn", "error", "fatal"];
+    const levelCounts = computed(() => countLevels(parsedLines.value, "info"));
+    const presentLevels = computed(() => LEVEL_ORDER.filter((l) => levelCounts.value.has(l)));
+    function toggleLevel(level) {
+      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 === void 0 ? -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) {
+      const next = stepMatch(current.value, matches.value.length, direction);
+      if (next < 0) return;
+      current.value = next;
+      pinned.value = false;
+      nextTick(() => revealMatch(matches.value[next]));
+    }
+    function revealMatch(position) {
+      const el = viewport();
+      if (!el || position === void 0) return;
+      const behavior = 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(`[data-log-row="${n}"]`)?.scrollIntoView({ block: "center", behavior });
+    }
+    const searchEl = ref(null);
+    function onSearchKeydown(event) {
+      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) }
+    ]);
+    __expose({
+      next: () => step(1),
+      previous: () => step(-1),
+      focusSearch: () => searchEl.value?.focus()
+    });
     const filteredEmpty = computed(
       () => props.lines.length > 0 && visibleLines.value.length === 0
     );
@@ -202,7 +339,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return time;
     }
     const { copy: writeClipboard } = useClipboard();
-    const copy = (text) => writeClipboard(text, { toast: "Copied to clipboard" });
+    const copy = (value) => writeClipboard(value, { toast: text.value.copied });
     function lineText(line) {
       return [fmtTime(line.time), line.level?.toUpperCase(), line.source && `[${line.source}]`, line.message].filter(Boolean).join(" ");
     }
@@ -223,15 +360,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function menuFor(line, index) {
       if (!props.rowMenu) return [];
       const items = [
-        { 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 })
@@ -239,10 +376,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       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) ?? [];
@@ -250,11 +390,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return [...items, ...extra];
     }
     function splitHighlight(message) {
-      const term = props.highlight?.trim();
-      if (!term) return [{ text: message, hit: false }];
+      if (!term.value) return [{ text: message, hit: false }];
       const parts = [];
       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);
@@ -341,21 +480,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       el.scrollTo({ top: el.scrollHeight, behavior: smooth && !reduce && !far ? "smooth" : "auto" });
     }
     function scrollToBottom() {
+      current.value = -1;
       rideToBottom(true, true);
       pinned.value = true;
     }
+    const linesSignal = () => [props.lines, props.lines.length, props.lines[props.lines.length - 1]];
     watch(
-      () => props.lines.length,
+      linesSignal,
       () => {
         if (!pinned.value) captureScrollAnchor();
       },
       { flush: "pre" }
     );
     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();
@@ -382,12 +523,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     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)]",
+      "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-200 ease-[var(--ease-emphasized)]"
+      "move-class": "transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)]"
     };
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       () => [
@@ -402,8 +543,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         tabindex: "-1",
         class: unref(rootClass)
       }, unref(rest), {
-        onPointerenter: _cache[0] || (_cache[0] = ($event) => hovered.value = true),
-        onPointerleave: _cache[1] || (_cache[1] = ($event) => hovered.value = false)
+        onPointerenter: _cache[4] || (_cache[4] = ($event) => hovered.value = true),
+        onPointerleave: _cache[5] || (_cache[5] = ($event) => hovered.value = false)
       }), [
         createVNode(Transition, {
           "enter-active-class": "transition duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
@@ -412,11 +553,97 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "leave-to-class": "-translate-y-1 opacity-0"
         }, {
           default: withCtx(() => [
-            frozen.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.frozenLabel), 1)) : createCommentVNode("", true)
+            frozen.value ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.frozenLabel ?? unref(text).frozen), 1)) : createCommentVNode("", true)
           ]),
           _: 1
         }),
-        createVNode(_sfc_main$1, {
+        __props.toolbar ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createVNode(_sfc_main$1, {
+              name: "lucide:search",
+              size: 14,
+              class: "shrink-0 text-muted"
+            }),
+            withDirectives(createElementVNode("input", {
+              ref_key: "searchEl",
+              ref: searchEl,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+              type: "search",
+              "aria-label": unref(text).search,
+              placeholder: unref(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",
+              onKeydown: onSearchKeydown
+            }, null, 40, _hoisted_4), [
+              [vModelText, query.value]
+            ]),
+            term.value ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(matchLabel.value), 1)) : createCommentVNode("", true),
+            query.value ? (openBlock(), createElementBlock("button", {
+              key: 1,
+              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": unref(text).clearSearch,
+              onClick: _cache[1] || (_cache[1] = ($event) => {
+                query.value = "";
+                searchEl.value?.focus();
+              })
+            }, [
+              createVNode(_sfc_main$1, {
+                name: "lucide:x",
+                size: 12
+              })
+            ], 8, _hoisted_6)) : createCommentVNode("", true)
+          ]),
+          createElementVNode("div", _hoisted_7, [
+            createElementVNode("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": unref(text).previousMatch,
+              disabled: !matches.value.length,
+              onClick: _cache[2] || (_cache[2] = ($event) => step(-1))
+            }, [
+              createVNode(_sfc_main$1, {
+                name: "lucide:chevron-up",
+                size: 14
+              })
+            ], 8, _hoisted_8),
+            createElementVNode("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": unref(text).nextMatch,
+              disabled: !matches.value.length,
+              onClick: _cache[3] || (_cache[3] = ($event) => step(1))
+            }, [
+              createVNode(_sfc_main$1, {
+                name: "lucide:chevron-down",
+                size: 14
+              })
+            ], 8, _hoisted_9)
+          ]),
+          presentLevels.value.length > 1 ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            role: "group",
+            "aria-label": unref(text).levels,
+            class: "flex flex-wrap items-center gap-1"
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(presentLevels.value, (level) => {
+              return openBlock(), createElementBlock("button", {
+                key: level,
+                type: "button",
+                class: normalizeClass(["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", levels.value.includes(level) ? "border-line-strong bg-surface-soft text-ink" : "border-line text-muted hover:text-ink"]),
+                "aria-pressed": levels.value.includes(level),
+                onClick: ($event) => toggleLevel(level)
+              }, [
+                createElementVNode("span", {
+                  class: normalizeClass(["size-1.5 rounded-full", metaFor(level).rail]),
+                  "aria-hidden": "true"
+                }, null, 2),
+                createTextVNode(" " + toDisplayString(level) + " ", 1),
+                createElementVNode("span", _hoisted_12, toDisplayString(levelCounts.value.get(level)), 1)
+              ], 10, _hoisted_11);
+            }), 128))
+          ], 8, _hoisted_10)) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        createVNode(_sfc_main$2, {
           ref_key: "scrollRef",
           ref: scrollRef,
           instant: "",
@@ -425,17 +652,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onScroll
         }, {
           default: withCtx(() => [
-            __props.lines.length === 0 || filteredEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
-              createElementVNode("span", _hoisted_3, toDisplayString(filteredEmpty.value ? "No lines match" : __props.emptyLabel), 1),
-              filteredEmpty.value ? (openBlock(), createElementBlock("span", _hoisted_4, "“" + toDisplayString(__props.highlight) + "”", 1)) : createCommentVNode("", true)
+            __props.lines.length === 0 || filteredEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
+              createElementVNode("span", _hoisted_14, toDisplayString(filteredEmpty.value ? unref(text).noMatch : __props.emptyLabel ?? unref(text).empty), 1),
+              filteredEmpty.value && term.value ? (openBlock(), createElementBlock("span", _hoisted_15, "“" + toDisplayString(term.value) + "”", 1)) : createCommentVNode("", true)
             ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              __props.loadingOlder ? (openBlock(), createElementBlock("div", _hoisted_5, [
-                createVNode(_sfc_main$2, {
+              __props.loadingOlder ? (openBlock(), createElementBlock("div", _hoisted_16, [
+                createVNode(_sfc_main$1, {
                   name: "lucide:loader-circle",
                   size: 14,
                   class: "animate-spin"
                 }),
-                _cache[2] || (_cache[2] = createElementVNode("span", { class: "text-[11px]" }, "loading older…", -1))
+                createElementVNode("span", _hoisted_17, toDisplayString(unref(text).loadingOlder), 1)
               ])) : createCommentVNode("", true),
               createVNode(_sfc_main$3, {
                 items: menuItems.value,
@@ -455,50 +682,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       }, null, 4)) : createCommentVNode("", true),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(renderedLines.value, ({ line, n, count }) => {
                         return openBlock(), createElementBlock("li", {
-                          key: n,
+                          key: lineKey(n),
                           "data-log-row": n,
-                          class: normalizeClass(["group relative flex items-start gap-0 px-0 leading-5 transition-colors hover:bg-surface-soft/60", metaFor(line.level).sel])
+                          class: normalizeClass(["group relative flex items-start gap-0 px-0 leading-5 transition-colors hover:bg-surface-soft/60", [metaFor(line.level).sel, n === currentRow.value ? "bg-accent/15" : ""]]),
+                          "aria-current": n === currentRow.value ? "true" : void 0
                         }, [
                           createElementVNode("span", {
                             class: normalizeClass(["absolute inset-y-0 left-0 w-0.5", metaFor(line.level).rail]),
                             "aria-hidden": "true"
                           }, null, 2),
-                          _cache[3] || (_cache[3] = createElementVNode("span", {
+                          _cache[6] || (_cache[6] = createElementVNode("span", {
                             class: "mr-2 w-0.5 shrink-0",
                             "aria-hidden": "true"
                           }, null, -1)),
-                          __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(n + 1), 1)) : createCommentVNode("", true),
-                          __props.showTime ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(fmtTime(line.time)), 1)) : createCommentVNode("", true),
+                          __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_19, toDisplayString(n + lineOffset.value + 1), 1)) : createCommentVNode("", true),
+                          __props.showTime ? (openBlock(), createElementBlock("span", _hoisted_20, toDisplayString(fmtTime(line.time)), 1)) : createCommentVNode("", true),
                           __props.showLevel ? (openBlock(), createElementBlock("span", {
                             key: 2,
                             class: normalizeClass(["mr-3 w-12 shrink-0 text-[10px] font-semibold uppercase tracking-[0.06em]", metaFor(line.level).chip])
                           }, toDisplayString(line.level ?? "info"), 3)) : createCommentVNode("", true),
-                          line.source ? (openBlock(), createElementBlock("span", _hoisted_9, "[" + toDisplayString(line.source) + "]", 1)) : createCommentVNode("", true),
+                          line.source ? (openBlock(), createElementBlock("span", _hoisted_21, "[" + toDisplayString(line.source) + "]", 1)) : createCommentVNode("", true),
                           createElementVNode("span", {
                             class: normalizeClass(["min-w-0 pr-3", [metaFor(line.level).text, __props.wrap ? "whitespace-pre-wrap break-words" : "whitespace-pre"]])
                           }, [
-                            (openBlock(true), createElementBlock(Fragment, null, renderList(splitHighlight(line.message), (part, p) => {
+                            (openBlock(true), createElementBlock(Fragment, null, renderList(splitHighlight(virtualise.value ? line.message.replace(/\r?\n/g, " ↵ ") : line.message), (part, p) => {
                               return openBlock(), createElementBlock(Fragment, { key: p }, [
-                                part.hit ? (openBlock(), createElementBlock("mark", _hoisted_10, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                part.hit ? (openBlock(), createElementBlock("mark", _hoisted_22, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                   createTextVNode(toDisplayString(part.text), 1)
                                 ], 64))
                               ], 64);
                             }), 128)),
                             createVNode(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"
                             }, {
                               default: withCtx(() => [
                                 count > 1 ? (openBlock(), createElementBlock("span", {
                                   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`
-                                }, "×" + toDisplayString(count), 9, _hoisted_11)) : createCommentVNode("", true)
+                                  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: unref(text).identical.replace("{n}", String(count))
+                                }, "×" + toDisplayString(count), 9, _hoisted_23)) : createCommentVNode("", true)
                               ]),
                               _: 2
                             }, 1024)
                           ], 2)
-                        ], 10, _hoisted_6);
+                        ], 10, _hoisted_18);
                       }), 128)),
                       virtualise.value && padBottom.value > 0 ? (openBlock(), createElementBlock("li", {
                         key: "pad-bottom",
@@ -516,24 +744,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           _: 1
         }, 8, ["content-class", "style"]),
         createVNode(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"
         }, {
           default: withCtx(() => [
-            showJump.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
+            showJump.value ? (openBlock(), createElementBlock("div", _hoisted_24, [
               createElementVNode("button", {
                 type: "button",
                 class: "group flex items-center gap-1.5 rounded-pill border border-line bg-surface-overlay px-3 py-1 text-xs font-medium text-ink shadow-[var(--shadow-panel)] backdrop-blur outline-none transition-colors hover:bg-surface-soft focus-visible:ring-2 focus-visible:ring-ring",
                 onClick: scrollToBottom
               }, [
-                createVNode(_sfc_main$2, {
+                createVNode(_sfc_main$1, {
                   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"
                 }),
-                _cache[4] || (_cache[4] = createTextVNode(" Jump to latest ", -1))
+                createTextVNode(" " + toDisplayString(unref(text).jump), 1)
               ])
             ])) : createCommentVNode("", true)
           ]),