@leavepulse/ui 0.69.0 → 0.70.1

package/dist/chunks/{LpLogViewer-4QFc-sVN.js → LpLogViewer-DKK4ySZl.js}

@@ -1,16 +1,21 @@
-import { defineComponent, useModel, watch, computed, ref, shallowRef, onMounted, onBeforeUnmount, 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 { defineComponent, useModel, watch, computed, ref, shallowRef, onMounted, onBeforeUnmount, nextTick, openBlock, createElementBlock, mergeProps, unref, createVNode, Transition, withCtx, toDisplayString, createCommentVNode, createElementVNode, Fragment, renderList, normalizeClass, createTextVNode, normalizeStyle, createBlock, resolveDynamicComponent, TransitionGroup, mergeModels } from "vue";
 import { usePersisted } from "../composables/usePersisted.js";
-import { prefersReducedMotion } from "../composables/easing.js";
+import { prefersReducedMotion, durationToken, tokenEase } from "../composables/easing.js";
 import { useClipboard } from "../composables/useClipboard.js";
 import { useHotkeys } from "../composables/useHotkeys.js";
-import { _ as _sfc_main$4 } from "./LpContextMenu-CRnjoqSt.js";
-import { _ as _sfc_main$3 } from "./LpEmptyState-om1UnFjV.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-Hz3-JWUG.js";
+import { _ as _sfc_main$7 } from "./LpBadge-BBq1Er9T.js";
+import { _ as _sfc_main$6 } from "./LpContextMenu-Cj96ENDC.js";
+import { _ as _sfc_main$4 } from "./LpEmptyState-KTKipws2.js";
+import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$5 } from "./LpLoader-DjJEX8hL.js";
+import { _ as _sfc_main$1 } from "./LpInput-CDuwODJG.js";
+import { _ as _sfc_main$3 } from "./LpScrollArea-Hz3-JWUG.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
+import { useResizeObserver } from "../composables/useResizeObserver.js";
 import { ringWindow, matchPositions, countLevels, stepMatch } from "../components/logSearch.js";
-const _hoisted_1 = {
+import { TONES, toneLook } from "../components/tone.js";
+import '../assets/LpLogViewer-BDNW6P52.css';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"
 };
@@ -18,44 +23,43 @@ 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 = {
+const _hoisted_3 = {
   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 = {
+const _hoisted_4 = { class: "flex items-center" };
+const _hoisted_5 = ["aria-label", "disabled"];
+const _hoisted_6 = ["aria-label", "disabled"];
+const _hoisted_7 = ["aria-label"];
+const _hoisted_8 = ["aria-pressed", "onClick"];
+const _hoisted_9 = { class: "font-normal tabular-nums text-muted" };
+const _hoisted_10 = {
   key: 0,
   class: "flex items-center justify-center gap-2 py-2 text-muted"
 };
-const _hoisted_14 = { class: "text-[11px]" };
-const _hoisted_15 = ["data-log-row", "aria-current"];
-const _hoisted_16 = {
+const _hoisted_11 = {
+  class: "text-[11px]",
+  "aria-hidden": "true"
+};
+const _hoisted_12 = ["data-log-row", "aria-current"];
+const _hoisted_13 = {
   key: 0,
   class: "mr-3 w-10 shrink-0 select-none text-right tabular-nums text-muted/70"
 };
-const _hoisted_17 = {
+const _hoisted_14 = {
   key: 1,
   class: "mr-3 shrink-0 tabular-nums text-muted"
 };
-const _hoisted_18 = {
+const _hoisted_15 = {
   key: 3,
   class: "mr-2 shrink-0 text-muted-strong"
 };
-const _hoisted_19 = {
+const _hoisted_16 = {
   key: 0,
   class: "rounded-xs bg-accent/30 text-ink"
 };
-const _hoisted_20 = ["title"];
-const _hoisted_21 = {
+const _hoisted_17 = {
   key: 0,
   class: "absolute inset-x-0 bottom-3 flex justify-center"
 };
@@ -132,14 +136,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       () => props.labels
     );
+    const toned = (tone) => {
+      const look = toneLook(tone);
+      return { rail: look.bg, text: "text-ink", chip: look.text, sel: look.selection };
+    };
     const levelMeta = {
-      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) {
       return levelMeta[level ?? "info"];
@@ -448,7 +456,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let topArmed = true;
     function onScroll(e) {
       const el = e.target;
-      pinned.value = atBottom(el);
+      if (!glide && performance.now() - leftAt > LEAVE_GRACE_MS) pinned.value = atBottom(el);
       scrollTop.value = el.scrollTop;
       if (el.clientHeight !== viewportHeight.value) viewportHeight.value = el.clientHeight;
       if (!props.loadOlder) return;
@@ -461,30 +469,105 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         topArmed = true;
       }
     }
-    let prevScrollHeight = 0;
-    let prevScrollTop = 0;
+    let anchorRow = null;
+    let anchorOffset = 0;
+    function firstRowInView(el) {
+      const top = el.getBoundingClientRect().top;
+      for (const row of el.querySelectorAll("[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;
+    }
+    let glide = 0;
+    function stopGlide() {
+      if (glide) cancelAnimationFrame(glide);
+      glide = 0;
+    }
+    function tailEnd(el) {
+      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, row) {
+      return row.getBoundingClientRect().bottom - el.getBoundingClientRect().top + el.scrollTop;
     }
-    function rideToBottom(smooth = true, force = false) {
+    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 step2 = (now) => {
+        const t = Math.min(1, Math.max(0, (now - started) / ms));
+        el.scrollTop = from + (end() - from) * ease(t);
+        glide = t < 1 ? requestAnimationFrame(step2) : 0;
+      };
+      glide = requestAnimationFrame(step2);
+    }
+    let holding = false;
+    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) {
+      if (event.deltaY < 0) leaveTail();
+      else stopGlide();
+    }
+    const UPWARD_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "PageUp", "Home"]);
+    function onKeydown(event) {
+      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) {
+      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;
     }
     const linesSignal = () => [props.lines, props.lines.length, props.lines[props.lines.length - 1]];
@@ -499,40 +582,57 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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();
         }
       }
     );
     const showJump = computed(() => props.tail && !pinned.value && props.lines.length > 0);
-    let viewportResize = 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);
-      }
+      if (el && props.tail) el.scrollTop = el.scrollHeight;
     });
     onBeforeUnmount(() => {
-      viewportResize?.disconnect();
-      viewportResize = null;
+      stopGlide();
+      release();
     });
     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) => {
+        const row = el;
+        row.style.setProperty("--lp-log-row-h", `${row.offsetHeight}px`);
+      }
     };
+    const FRESH_CAP = 40;
+    const freshLines = shallowRef(/* @__PURE__ */ new WeakSet());
+    let lastSeen;
+    watch(
+      linesSignal,
+      () => {
+        const lines = props.lines;
+        const fresh = /* @__PURE__ */ new WeakSet();
+        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) {
+      const line = sourceLines.value[n];
+      return virtualise.value && !!line && freshLines.value.has(line);
+    }
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       () => [
         "relative overflow-hidden rounded-card border border-line bg-surface font-mono text-xs leading-relaxed",
@@ -546,8 +646,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         tabindex: "-1",
         class: unref(rootClass)
       }, unref(rest), {
-        onPointerenter: _cache[4] || (_cache[4] = ($event) => hovered.value = true),
-        onPointerleave: _cache[5] || (_cache[5] = ($event) => hovered.value = false)
+        onPointerenter: _cache[3] || (_cache[3] = ($event) => hovered.value = true),
+        onPointerleave: _cache[4] || (_cache[4] = ($event) => hovered.value = false),
+        onWheelPassive: onWheel,
+        onTouchstartPassive: hold,
+        onPointerdown: hold,
+        onKeydown
       }), [
         createVNode(Transition, {
           "enter-active-class": "transition duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
@@ -561,66 +665,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           _: 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]
+          createVNode(_sfc_main$1, {
+            ref_key: "searchEl",
+            ref: searchEl,
+            modelValue: query.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+            type: "search",
+            size: "sm",
+            icon: "lucide:search",
+            clearable: "",
+            class: "min-w-48 flex-1",
+            "aria-label": unref(text).search,
+            placeholder: unref(text).search,
+            labels: { clear: unref(text).clearSearch },
+            onKeydown: onSearchKeydown
+          }, {
+            trailing: withCtx(() => [
+              term.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(matchLabel.value), 1)) : createCommentVNode("", true)
             ]),
-            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, [
+            _: 1
+          }, 8, ["modelValue", "aria-label", "placeholder", "labels"]),
+          createElementVNode("div", _hoisted_4, [
             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))
+              onClick: _cache[1] || (_cache[1] = ($event) => step(-1))
             }, [
-              createVNode(_sfc_main$1, {
+              createVNode(_sfc_main$2, {
                 name: "lucide:chevron-up",
                 size: 14
               })
-            ], 8, _hoisted_8),
+            ], 8, _hoisted_5),
             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))
+              onClick: _cache[2] || (_cache[2] = ($event) => step(1))
             }, [
-              createVNode(_sfc_main$1, {
+              createVNode(_sfc_main$2, {
                 name: "lucide:chevron-down",
                 size: 14
               })
-            ], 8, _hoisted_9)
+            ], 8, _hoisted_6)
           ]),
           presentLevels.value.length > 1 ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -641,12 +730,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "aria-hidden": "true"
                 }, null, 2),
                 createTextVNode(" " + toDisplayString(level) + " ", 1),
-                createElementVNode("span", _hoisted_12, toDisplayString(levelCounts.value.get(level)), 1)
-              ], 10, _hoisted_11);
+                createElementVNode("span", _hoisted_9, toDisplayString(levelCounts.value.get(level)), 1)
+              ], 10, _hoisted_8);
             }), 128))
-          ], 8, _hoisted_10)) : createCommentVNode("", true)
+          ], 8, _hoisted_7)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        createVNode(_sfc_main$2, {
+        createVNode(_sfc_main$3, {
           ref_key: "scrollRef",
           ref: scrollRef,
           instant: "",
@@ -655,7 +744,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onScroll
         }, {
           default: withCtx(() => [
-            __props.lines.length === 0 || filteredEmpty.value ? (openBlock(), createBlock(_sfc_main$3, {
+            __props.lines.length === 0 || filteredEmpty.value ? (openBlock(), createBlock(_sfc_main$4, {
               key: 0,
               compact: "",
               icon: filteredEmpty.value ? "lucide:search-x" : "lucide:scroll-text",
@@ -663,15 +752,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               description: filteredEmpty.value && term.value ? `“${term.value}”` : void 0,
               class: "h-full justify-center px-4"
             }, null, 8, ["icon", "title", "description"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              __props.loadingOlder ? (openBlock(), createElementBlock("div", _hoisted_13, [
-                createVNode(_sfc_main$1, {
-                  name: "lucide:loader-circle",
-                  size: 14,
-                  class: "animate-spin"
-                }),
-                createElementVNode("span", _hoisted_14, toDisplayString(unref(text).loadingOlder), 1)
+              __props.loadingOlder ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                createVNode(_sfc_main$5, {
+                  size: "inline",
+                  delay: 0,
+                  labels: { loading: unref(text).loadingOlder },
+                  class: "text-[14px]"
+                }, null, 8, ["labels"]),
+                createElementVNode("span", _hoisted_11, toDisplayString(unref(text).loadingOlder), 1)
               ])) : createCommentVNode("", true),
-              createVNode(_sfc_main$4, {
+              createVNode(_sfc_main$6, {
                 items: menuItems.value,
                 always: __props.rowMenu
               }, {
@@ -691,30 +781,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         return openBlock(), createElementBlock("li", {
                           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, n === currentRow.value ? "bg-accent/15" : ""]]),
+                          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" : "", isFresh(n) ? "lp-log-row-fresh" : ""]]),
                           "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[6] || (_cache[6] = createElementVNode("span", {
+                          _cache[5] || (_cache[5] = createElementVNode("span", {
                             class: "mr-2 w-0.5 shrink-0",
                             "aria-hidden": "true"
                           }, null, -1)),
-                          __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(n + lineOffset.value + 1), 1)) : createCommentVNode("", true),
-                          __props.showTime ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(fmtTime(line.time)), 1)) : createCommentVNode("", true),
+                          __props.lineNumbers ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(n + lineOffset.value + 1), 1)) : createCommentVNode("", true),
+                          __props.showTime ? (openBlock(), createElementBlock("span", _hoisted_14, 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_18, "[" + toDisplayString(line.source) + "]", 1)) : createCommentVNode("", true),
+                          line.source ? (openBlock(), createElementBlock("span", _hoisted_15, "[" + 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(virtualise.value ? line.message.replace(/\r?\n/g, " ↵ ") : line.message), (part, p) => {
                               return openBlock(), createElementBlock(Fragment, { key: p }, [
-                                part.hit ? (openBlock(), createElementBlock("mark", _hoisted_19, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                part.hit ? (openBlock(), createElementBlock("mark", _hoisted_16, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                                   createTextVNode(toDisplayString(part.text), 1)
                                 ], 64))
                               ], 64);
@@ -724,16 +814,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               "enter-from-class": "scale-50 opacity-0"
                             }, {
                               default: withCtx(() => [
-                                count > 1 ? (openBlock(), createElementBlock("span", {
+                                count > 1 ? (openBlock(), createBlock(_sfc_main$7, {
                                   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: unref(text).identical.replace("{n}", String(count))
-                                }, "×" + toDisplayString(count), 9, _hoisted_20)) : createCommentVNode("", true)
+                                }, {
+                                  default: withCtx(() => [
+                                    createTextVNode("×" + toDisplayString(count), 1)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["title"])) : createCommentVNode("", true)
                               ]),
                               _: 2
                             }, 1024)
                           ], 2)
-                        ], 10, _hoisted_15);
+                        ], 10, _hoisted_12);
                       }), 128)),
                       virtualise.value && padBottom.value > 0 ? (openBlock(), createElementBlock("li", {
                         key: "pad-bottom",
@@ -757,13 +853,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "leave-to-class": "translate-y-3 scale-90 opacity-0"
         }, {
           default: withCtx(() => [
-            showJump.value ? (openBlock(), createElementBlock("div", _hoisted_21, [
+            showJump.value ? (openBlock(), createElementBlock("div", _hoisted_17, [
               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$1, {
+                createVNode(_sfc_main$2, {
                   name: "lucide:arrow-down",
                   size: 14,
                   class: "transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] group-hover:translate-y-0.5"

package/dist/chunks/LpMagnetic-CtXKLa2Y.js

@@ -0,0 +1,62 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, renderSlot } from "vue";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { usePointerFrame } from "../composables/usePointerFrame.js";
+import { magneticOffset } from "../components/dock.js";
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpMagnetic",
+  props: {
+    reach: { default: 60 },
+    strength: { default: 0.25 },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const { class: classes, attrs: rest } = useMergedAttrs(() => "inline-block");
+    const el = ref(null);
+    let held = false;
+    function paint(lastX, lastY) {
+      const node = el.value;
+      if (!node) return;
+      const rect = node.getBoundingClientRect();
+      const dx = lastX - (rect.left + rect.width / 2);
+      const dy = lastY - (rect.top + rect.height / 2);
+      const reach = props.reach + Math.max(rect.width, rect.height) / 2;
+      const { x, y } = props.disabled ? { x: 0, y: 0 } : magneticOffset(dx, dy, reach, props.strength);
+      const pulling = x !== 0 || y !== 0;
+      if (!pulling && !held) return;
+      held = pulling;
+      node.style.transition = pulling ? "translate 120ms ease-out" : "translate var(--duration-slow) var(--ease-settle)";
+      node.style.translate = pulling ? `${x.toFixed(1)}px ${y.toFixed(1)}px` : "";
+    }
+    const pointer = usePointerFrame({ paint });
+    const onMove = (event) => void pointer.move(event);
+    function onOut(event) {
+      if (event.relatedTarget || !held) return;
+      pointer.moveTo(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);
+    }
+    let host = null;
+    onMounted(() => {
+      host = el.value?.ownerDocument.defaultView ?? window;
+      host.addEventListener("pointermove", onMove, { passive: true });
+      host.addEventListener("pointerout", onOut, { passive: true });
+    });
+    onBeforeUnmount(() => {
+      host?.removeEventListener("pointermove", onMove);
+      host?.removeEventListener("pointerout", onOut);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        class: unref(classes)
+      }, unref(rest)), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};