@leavepulse/ui 0.14.4 → 0.14.6

package/dist/chunks/{LpAppShell-C22642JK.js → LpAppShell-DBTsNQaM.js}

@@ -1,8 +1,8 @@
 import { defineComponent, computed, watch, openBlock, createElementBlock, createVNode, createSlots, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, createBlock } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$4 } from "./LpScrollArea-CcHul_XS.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-CTUdtX7W.js";
+import { _ as _sfc_main$4 } from "./LpScrollArea-K1x-azgY.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-BPQabjae.js";
 const _hoisted_1 = { class: "flex h-dvh overflow-hidden bg-surface text-ink" };
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };
 const _hoisted_3 = { class: "flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };

package/dist/chunks/{LpConfirmDialog-CnHtHWHm.js → LpConfirmDialog-KLtTtCiT.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$1 } from "./LpModal-D17Bocq7.js";
+import { _ as _sfc_main$1 } from "./LpModal-CWoOExzT.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

package/dist/chunks/{LpDrawer-CBNVhkg0.js → LpDrawer-Ce6g9ZMr.js}

@@ -3,7 +3,7 @@ import { usePointerSwipe } from "@vueuse/core";
 import { DrawerRoot, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHandle, DrawerTitle, DrawerDescription, DrawerClose } from "vaul-vue";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-CcHul_XS.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-K1x-azgY.js";
 const _hoisted_1 = { class: "text-base font-semibold text-ink" };
 const _hoisted_2 = { class: "flex flex-col gap-1" };
 const _hoisted_3 = ["data-vaul-no-drag"];

package/dist/chunks/{LpLogViewer-CDBjhXl6.js → LpLogViewer-hC0OKkeE.js}

@@ -1,7 +1,7 @@
-import { defineComponent, computed, ref, watch, nextTick, onMounted, openBlock, createElementBlock, createVNode, normalizeStyle, withCtx, createElementVNode, toDisplayString, createCommentVNode, Fragment, createBlock, resolveDynamicComponent, TransitionGroup, mergeProps, renderList, normalizeClass, createTextVNode, Transition } from "vue";
+import { defineComponent, computed, ref, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createElementBlock, createVNode, normalizeStyle, withCtx, createElementVNode, toDisplayString, createCommentVNode, Fragment, createBlock, resolveDynamicComponent, TransitionGroup, mergeProps, renderList, normalizeClass, createTextVNode, Transition } from "vue";
 import { _ as _sfc_main$3 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-CcHul_XS.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-K1x-azgY.js";
 const _hoisted_1 = { class: "relative overflow-hidden rounded-card border border-line bg-surface font-mono text-xs leading-relaxed" };
 const _hoisted_2 = {
   key: 0,
@@ -322,9 +322,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     const showJump = computed(() => props.tail && !pinned.value && props.lines.length > 0);
-    onMounted(() => {
+    let viewportResize = null;
+    function measureViewport() {
       const el = viewport();
       if (el) viewportHeight.value = el.clientHeight;
+    }
+    onMounted(() => {
+      measureViewport();
+      const el = viewport();
+      if (el && typeof ResizeObserver !== "undefined") {
+        viewportResize = new ResizeObserver(measureViewport);
+        viewportResize.observe(el);
+      }
+    });
+    onBeforeUnmount(() => {
+      viewportResize?.disconnect();
+      viewportResize = null;
     });
     const transitionProps = {
       tag: "ol",

package/dist/chunks/{LpModal-D17Bocq7.js → LpModal-CWoOExzT.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, useSlots, openBlock, createBlock, unref, wit
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-CcHul_XS.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-K1x-azgY.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex shrink-0 items-start justify-between gap-4 p-5 pb-3"

package/dist/chunks/{LpNotificationBell-Bm51SkgV.js → LpNotificationBell-BDy0tQwr.js}

@@ -5,7 +5,7 @@ import { _ as _sfc_main$4 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpEmptyState-CrfyRJUG.js";
 import { _ as _sfc_main$5 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "./LpPopover-8268UmlC.js";
-import { _ as _sfc_main$3 } from "./LpScrollArea-CcHul_XS.js";
+import { _ as _sfc_main$3 } from "./LpScrollArea-K1x-azgY.js";
 const _hoisted_1 = { class: "flex items-center justify-between gap-2 px-3 py-2.5" };
 const _hoisted_2 = { class: "text-sm font-semibold" };
 const _hoisted_3 = {

package/dist/chunks/{LpScrollArea-CcHul_XS.js → LpScrollArea-K1x-azgY.js}

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementVNode, renderSlot, normalizeStyle } from "vue";
-import { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui";
+import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, createElementVNode, renderSlot } from "vue";
+import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "reka-ui";
 const barFade = "data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=hidden]:animate-[fade-out_240ms_ease]";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpScrollArea",
@@ -22,40 +22,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "scroll-hide-delay": 500
       }, {
         default: withCtx(() => [
-          createVNode(unref(ScrollAreaViewport), {
-            ref_key: "viewportRef",
-            ref: viewportRef,
-            class: normalizeClass(["size-full min-w-0 [&>div]:!block [&>div]:!min-w-0", __props.fade ? "[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]" : ""]),
-            onScrollPassive: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("scroll", $event))
-          }, {
-            default: withCtx(() => [
-              createElementVNode("div", {
-                class: normalizeClass(__props.contentClass)
-              }, [
-                renderSlot(_ctx.$slots, "default")
-              ], 2)
-            ]),
-            _: 3
-          }, 8, ["class"]),
           createVNode(unref(ScrollAreaScrollbar), {
             orientation: "vertical",
-            class: normalizeClass(["group flex w-1 touch-none select-none p-px transition-[width] duration-[var(--duration-fast)] hover:w-1.5", barFade]),
+            class: normalizeClass(["group flex w-3.5 touch-none select-none justify-end py-px pl-2.5 pr-px", barFade]),
             style: normalizeStyle(__props.barInsetTop ? { marginTop: __props.barInsetTop } : void 0)
           }, {
             default: withCtx(() => [
-              createVNode(unref(ScrollAreaThumb), { class: "flex-1 rounded-l-pill bg-brand/40 transition-colors group-hover:bg-brand" })
+              createVNode(unref(ScrollAreaThumb), { class: "w-1 rounded-l-pill bg-brand/40 transition-[width,background-color] duration-[var(--duration-fast)] group-hover:w-1.5 group-hover:bg-brand" })
             ]),
             _: 1
           }, 8, ["style"]),
           createVNode(unref(ScrollAreaScrollbar), {
             orientation: "horizontal",
-            class: normalizeClass(["group flex h-1 flex-col touch-none select-none p-px transition-[height] duration-[var(--duration-fast)] hover:h-1.5", barFade])
+            class: normalizeClass(["group flex h-3.5 flex-col touch-none select-none justify-end px-px pb-px pt-2.5", barFade])
           }, {
             default: withCtx(() => [
-              createVNode(unref(ScrollAreaThumb), { class: "flex-1 rounded-t-pill bg-brand/40 transition-colors group-hover:bg-brand" })
+              createVNode(unref(ScrollAreaThumb), { class: "h-1 rounded-t-pill bg-brand/40 transition-[height,background-color] duration-[var(--duration-fast)] group-hover:h-1.5 group-hover:bg-brand" })
             ]),
             _: 1
-          })
+          }),
+          createVNode(unref(ScrollAreaViewport), {
+            ref_key: "viewportRef",
+            ref: viewportRef,
+            class: normalizeClass(["size-full min-w-0 [&>div]:!block [&>div]:!min-w-0", __props.fade ? "[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]" : ""]),
+            onScrollPassive: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("scroll", $event))
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: normalizeClass(__props.contentClass)
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 2)
+            ]),
+            _: 3
+          }, 8, ["class"])
         ]),
         _: 3
       });

package/dist/chunks/{LpSidebar-CTUdtX7W.js → LpSidebar-BPQabjae.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps, createBlock } from "vue";
-import { _ as _sfc_main$2 } from "./LpDrawer-CBNVhkg0.js";
-import { _ as _sfc_main$1 } from "./LpSidebarNav-BRwovIc8.js";
+import { _ as _sfc_main$2 } from "./LpDrawer-Ce6g9ZMr.js";
+import { _ as _sfc_main$1 } from "./LpSidebarNav-CpF7rZxx.js";
 const _hoisted_1 = {
   key: 1,
   class: "mt-2 flex shrink-0 flex-col gap-2"

package/dist/chunks/{LpSidebarNav-BRwovIc8.js → LpSidebarNav-CpF7rZxx.js}

@@ -4,7 +4,7 @@ import { usePillTransition } from "../composables/usePillTransition.js";
 import { _ as _sfc_main$4 } from "./LpBadge-CXzBPnwO.js";
 import { _ as _sfc_main$2 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-CcHul_XS.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-K1x-azgY.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex min-h-0 flex-1 flex-col gap-4"

package/dist/chunks/{LpTable-PHE6UKor.js → LpTable-CJ4Zt1UH.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, crea
 import { _ as _sfc_main$2 } from "./LpCheckbox-BO0zuuPh.js";
 import { _ as _sfc_main$4 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-CcHul_XS.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-K1x-azgY.js";
 const _hoisted_1 = { class: "w-full border-collapse text-sm" };
 const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
 const _hoisted_3 = {

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-C22642JK.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-DBTsNQaM.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpCommandPalette.vue.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createVNode, withModifiers, createTextVNode, createElementVNode, withDirectives, withKeys, vModelText, createElementBlock, toDisplayString, createCommentVNode, Fragment, renderList, normalizeClass } from "vue";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from "reka-ui";
 import { _ as _sfc_main$1 } from "../chunks/LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "../chunks/LpScrollArea-CcHul_XS.js";
+import { _ as _sfc_main$2 } from "../chunks/LpScrollArea-K1x-azgY.js";
 import '../assets/LpCommandPalette-D315B47-.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
 const _hoisted_2 = ["placeholder", "onKeydown"];
 const _hoisted_3 = {

package/dist/components/LpConfirmDialog.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmDialog-CnHtHWHm.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-KLtTtCiT.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDrawer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDrawer-CBNVhkg0.js";
+import { _ as _sfc_main } from "../chunks/LpDrawer-Ce6g9ZMr.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpLogViewer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLogViewer-CDBjhXl6.js";
+import { _ as _sfc_main } from "../chunks/LpLogViewer-hC0OKkeE.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-D17Bocq7.js";
+import { _ as _sfc_main } from "../chunks/LpModal-CWoOExzT.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNotificationBell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNotificationBell-Bm51SkgV.js";
+import { _ as _sfc_main } from "../chunks/LpNotificationBell-BDy0tQwr.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpScrollArea.vue.d.ts

@@ -3,9 +3,9 @@ type __VLS_Props = {
     contentClass?: string;
     barInsetTop?: string;
 };
-declare var __VLS_18: {};
+declare var __VLS_40: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_40) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     viewportEl: import('vue').ComputedRef<HTMLElement | null>;

package/dist/components/LpScrollArea.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpScrollArea-CcHul_XS.js";
+import { _ as _sfc_main } from "../chunks/LpScrollArea-K1x-azgY.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-CTUdtX7W.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-BPQabjae.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebarNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebarNav-BRwovIc8.js";
+import { _ as _sfc_main } from "../chunks/LpSidebarNav-CpF7rZxx.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTable.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTable-PHE6UKor.js";
+import { _ as _sfc_main } from "../chunks/LpTable-CJ4Zt1UH.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
 import { _ as _2 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _3 } from "./chunks/LpAppShell-C22642JK.js";
+import { _ as _3 } from "./chunks/LpAppShell-DBTsNQaM.js";
 import { _ as _4 } from "./chunks/LpAutocomplete-B9uoCs4t.js";
 import { _ as _5 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
 import { _ as _6 } from "./chunks/LpBadge-CXzBPnwO.js";
@@ -11,12 +11,12 @@ import { _ as _10 } from "./chunks/LpCard-1yvWT9fx.js";
 import { _ as _11 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _12 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _13 } from "./chunks/LpConfirmDialog-CnHtHWHm.js";
+import { _ as _13 } from "./chunks/LpConfirmDialog-KLtTtCiT.js";
 import { _ as _14 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _15 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _16 } from "./chunks/LpDisclosure-DP6yfgfM.js";
 import { _ as _17 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _18 } from "./chunks/LpDrawer-CBNVhkg0.js";
+import { _ as _18 } from "./chunks/LpDrawer-Ce6g9ZMr.js";
 import { _ as _19 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _20 } from "./chunks/LpEmptyState-CrfyRJUG.js";
 import { _ as _21 } from "./chunks/LpFormField-Bn-ZwC6z.js";
@@ -24,9 +24,9 @@ import { _ as _22 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _23 } from "./chunks/LpInfraNode-C_PHcthC.js";
 import { _ as _24 } from "./chunks/LpInput-BauZRyzm.js";
 import { _ as _25 } from "./chunks/LpLink-DHwOEp4e.js";
-import { _ as _26 } from "./chunks/LpLogViewer-CDBjhXl6.js";
-import { _ as _27 } from "./chunks/LpModal-D17Bocq7.js";
-import { _ as _28 } from "./chunks/LpNotificationBell-Bm51SkgV.js";
+import { _ as _26 } from "./chunks/LpLogViewer-hC0OKkeE.js";
+import { _ as _27 } from "./chunks/LpModal-CWoOExzT.js";
+import { _ as _28 } from "./chunks/LpNotificationBell-BDy0tQwr.js";
 import { _ as _29 } from "./chunks/LpNumberField-C5ar-OwE.js";
 import { _ as _30 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _31 } from "./chunks/LpPagination-CeGuNe_q.js";
@@ -37,17 +37,17 @@ import { _ as _34 } from "./chunks/LpPopover-8268UmlC.js";
 import { _ as _35 } from "./chunks/LpProgress-BhI0IbjC.js";
 import { _ as _36 } from "./chunks/LpRadio-CL-pI0_O.js";
 import { _ as _37 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
-import { _ as _38 } from "./chunks/LpScrollArea-CcHul_XS.js";
+import { _ as _38 } from "./chunks/LpScrollArea-K1x-azgY.js";
 import { _ as _39 } from "./chunks/LpSegmented-BmpanyAo.js";
 import { _ as _40 } from "./chunks/LpSelect-DznhPEWX.js";
 import { _ as _41 } from "./chunks/LpServiceNode-Dc-Ut5RS.js";
-import { _ as _42 } from "./chunks/LpSidebar-CTUdtX7W.js";
+import { _ as _42 } from "./chunks/LpSidebar-BPQabjae.js";
 import { _ as _43 } from "./chunks/LpSkeleton-eSFIo4kD.js";
 import { _ as _44 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _45 } from "./chunks/LpStat-CdbEFOvn.js";
 import { _ as _46 } from "./chunks/LpStepper-5dFTrW21.js";
 import { _ as _47 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _48 } from "./chunks/LpTable-PHE6UKor.js";
+import { _ as _48 } from "./chunks/LpTable-CJ4Zt1UH.js";
 import { _ as _49 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
 import { _ as _50 } from "./chunks/LpTabs-D7aTVPOb.js";
 import { _ as _51 } from "./chunks/LpTextarea-CRAkhemZ.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.14.4",
+  "version": "0.14.6",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpLogViewer.vue

@@ -7,7 +7,7 @@
  * viewport element and re-emits the native scroll event — exactly what tailing
  * needs.
  */
-import { computed, nextTick, onMounted, ref, TransitionGroup, watch } from "vue"
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, TransitionGroup, watch } from "vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -505,12 +505,31 @@ watch(
 
 const showJump = computed(() => props.tail && !pinned.value && props.lines.length > 0)
 
-// Seed the viewport height before the first scroll so the initial virtual
-// window is correct (otherwise a tall list would render a single overscan slice
-// until the user scrolls).
-onMounted(() => {
+// Track the viewport height for the whole lifetime, not just at mount. Reading
+// it once was a deadlock when the viewer mounted inside a container that had no
+// height yet (a drawer mid open-animation, a hidden tab): the virtual window
+// 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
+}
+
+onMounted(() => {
+  measureViewport()
+  const el = viewport()
+  if (el && typeof ResizeObserver !== "undefined") {
+    viewportResize = new ResizeObserver(measureViewport)
+    viewportResize.observe(el)
+  }
+})
+
+onBeforeUnmount(() => {
+  viewportResize?.disconnect()
+  viewportResize = null
 })
 
 // FLIP / enter / leave classes for the full-render TransitionGroup, bound via

package/src/components/LpScrollArea.vue

@@ -47,36 +47,41 @@ const barFade =
 
 <template>
   <ScrollAreaRoot class="relative overflow-hidden" type="hover" :scroll-hide-delay="500">
-    <ScrollAreaViewport
-      ref="viewportRef"
-      class="size-full min-w-0 [&>div]:!block [&>div]:!min-w-0"
-      :class="fade ? '[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]' : ''"
-      @scroll.passive="$emit('scroll', $event)"
-    >
-      <div :class="contentClass">
-        <slot />
-      </div>
-    </ScrollAreaViewport>
-
+    <!-- The bar itself is a pointer target far wider than it looks: the visible
+         rail is the thumb, sized below, while the track pads it out to a
+         grabbable strip. A 4px-wide hit area is near-impossible to catch with a
+         mouse. Padding (not width) carries the extra room so the thumb stays
+         flush against the wall. -->
     <ScrollAreaScrollbar
       orientation="vertical"
-      class="group flex w-1 touch-none select-none p-px transition-[width] duration-[var(--duration-fast)] hover:w-1.5"
+      class="group flex w-3.5 touch-none select-none justify-end py-px pl-2.5 pr-px"
       :class="barFade"
       :style="barInsetTop ? { marginTop: barInsetTop } : undefined"
     >
       <ScrollAreaThumb
-        class="flex-1 rounded-l-pill bg-brand/40 transition-colors group-hover:bg-brand"
+        class="w-1 rounded-l-pill bg-brand/40 transition-[width,background-color] duration-[var(--duration-fast)] group-hover:w-1.5 group-hover:bg-brand"
       />
     </ScrollAreaScrollbar>
 
     <ScrollAreaScrollbar
       orientation="horizontal"
-      class="group flex h-1 flex-col touch-none select-none p-px transition-[height] duration-[var(--duration-fast)] hover:h-1.5"
+      class="group flex h-3.5 flex-col touch-none select-none justify-end px-px pb-px pt-2.5"
       :class="barFade"
     >
       <ScrollAreaThumb
-        class="flex-1 rounded-t-pill bg-brand/40 transition-colors group-hover:bg-brand"
+        class="h-1 rounded-t-pill bg-brand/40 transition-[height,background-color] duration-[var(--duration-fast)] group-hover:h-1.5 group-hover:bg-brand"
       />
     </ScrollAreaScrollbar>
+
+    <ScrollAreaViewport
+      ref="viewportRef"
+      class="size-full min-w-0 [&>div]:!block [&>div]:!min-w-0"
+      :class="fade ? '[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]' : ''"
+      @scroll.passive="$emit('scroll', $event)"
+    >
+      <div :class="contentClass">
+        <slot />
+      </div>
+    </ScrollAreaViewport>
   </ScrollAreaRoot>
 </template>