@leavepulse/ui 0.20.2 → 0.20.4

package/dist/chunks/{LpAddressInput-CCtskgfZ.js → LpAddressInput-BV9M0aec.js}

@@ -6,7 +6,7 @@ import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-Bn-ZwC6z.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpInput-BauZRyzm.js";
-import { _ as _sfc_main$7 } from "./LpModal-g2dGpF7l.js";
+import { _ as _sfc_main$7 } from "./LpModal-YaFleOpp.js";
 import { _ as _sfc_main$6 } from "./LpSelect-D5mU4cZO.js";
 const _hoisted_1 = { class: "flex flex-col gap-3" };
 const _hoisted_2 = { class: "flex items-stretch gap-2" };

package/dist/chunks/{LpAppShell-D42la4ZD.js → LpAppShell-oYlB1C9T.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-DQ0Yudfu.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-DlLZJk1u.js";
+import { _ as _sfc_main$4 } from "./LpScrollArea-BjImFflN.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-DlvoM3h6.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-Z9hsfm2D.js → LpConfirmDialog-BgaP-GJZ.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-g2dGpF7l.js";
+import { _ as _sfc_main$1 } from "./LpModal-YaFleOpp.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

package/dist/chunks/{LpDrawer-CYm-nUIZ.js → LpDrawer-D1ubjU11.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-DQ0Yudfu.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-BjImFflN.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/{LpFileTree-DXb3yKzH.js → LpFileTree-CmKJxz4K.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, watch, computed, openBlock, createElementBlock, F
 import { formatSize, sortNodes, computeStats, subtreeIds, ancestorIds } from "../components/fileTree.js";
 import { _ as _sfc_main$1 } from "./LpEmptyState-CrfyRJUG.js";
 import { _ as _sfc_main$3 } from "./LpFileTreeNode-DFg4PhOK.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-DQ0Yudfu.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-BjImFflN.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex h-full w-full min-w-0 flex-col gap-1 overflow-hidden"

package/dist/chunks/{LpLogViewer-tmKPNTuU.js → LpLogViewer-CFckvccr.js}

@@ -1,7 +1,7 @@
 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-DQ0Yudfu.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-BjImFflN.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,

package/dist/chunks/{LpModal-g2dGpF7l.js → LpModal-YaFleOpp.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, useSlots, ref, watch, onBeforeUnmount, openB
 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-DQ0Yudfu.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-BjImFflN.js";
 const _hoisted_1 = { class: "fixed inset-0 z-(--z-modal) flex items-center justify-center pointer-events-none" };
 const _hoisted_2 = {
   key: 0,
@@ -57,21 +57,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let mo;
     let raf = 0;
     let settleTimer;
+    let lastHeight = 0;
+    let inFlight = false;
     const retune = (el) => {
-      const from = el.offsetHeight;
+      if (inFlight) return;
+      const from = lastHeight;
       el.style.height = "";
       el.style.maxHeight = "none";
       const to = el.offsetHeight;
       el.style.maxHeight = "";
-      if (to === 0 || to === from) return;
+      lastHeight = to;
+      if (to === 0 || from === 0 || to === from) return;
       el.style.height = `${from}px`;
       void el.offsetHeight;
       el.style.height = `${to}px`;
+      inFlight = true;
       resizing.value = true;
       clearTimeout(settleTimer);
       settleTimer = setTimeout(() => {
+        inFlight = false;
         resizing.value = false;
         el.style.height = "";
+        lastHeight = el.offsetHeight;
       }, TWEEN_MS);
     };
     watch(
@@ -85,8 +92,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         clearTimeout(settleTimer);
         tweening.value = false;
         resizing.value = false;
+        lastHeight = 0;
+        inFlight = false;
         const el = panelRef.value?.$el;
         if (!isOpen || !(el instanceof HTMLElement)) return;
+        lastHeight = el.offsetHeight;
         el.style.height = `${el.offsetHeight}px`;
         raf = requestAnimationFrame(() => {
           tweening.value = true;
@@ -175,6 +185,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       renderSlot(_ctx.$slots, "default")
                     ], 2)) : (openBlock(), createBlock(_sfc_main$2, {
                       key: 2,
+                      fade: "",
                       class: normalizeClass(["min-h-0 flex-1 text-sm text-ink/90", resizing.value ? "[&_[data-scrollbarimpl]]:invisible" : ""]),
                       "content-class": bodyPad.value
                     }, {

package/dist/chunks/{LpNotificationBell-DHze8wYN.js → LpNotificationBell-B1QTe4mK.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-DQ0Yudfu.js";
+import { _ as _sfc_main$3 } from "./LpScrollArea-BjImFflN.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-BjImFflN.js

@@ -0,0 +1,120 @@
+import { defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createBlock, unref, normalizeClass, withCtx, createVNode, normalizeStyle, createElementVNode, renderSlot } from "vue";
+import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "reka-ui";
+const barFade = "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]";
+const FADE_PX = 14;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpScrollArea",
+  props: {
+    fade: { type: Boolean },
+    instant: { type: Boolean, default: false },
+    contentClass: {},
+    barInsetTop: {}
+  },
+  emits: ["scroll"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const viewportRef = ref(null);
+    const viewportEl = computed(
+      () => viewportRef.value?.viewportElement ?? null
+    );
+    __expose({ viewportEl });
+    const dragging = ref(false);
+    const atTop = ref(true);
+    const atBottom = ref(true);
+    const fadeMask = computed(() => {
+      const top = atTop.value ? "black 0" : `transparent 0, black ${FADE_PX}px`;
+      const bottom = atBottom.value ? "black 100%" : `black calc(100% - ${FADE_PX}px), transparent 100%`;
+      return `linear-gradient(to bottom, ${top}, ${bottom})`;
+    });
+    function measureEdges(el) {
+      atTop.value = el.scrollTop <= 1;
+      atBottom.value = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+    }
+    function onViewportScroll(event) {
+      if (props.fade) measureEdges(event.target);
+      emit("scroll", event);
+    }
+    let edgeObserver;
+    watch(
+      [viewportEl, () => props.fade],
+      ([el, enabled]) => {
+        edgeObserver?.disconnect();
+        edgeObserver = void 0;
+        if (!el || !enabled || typeof ResizeObserver === "undefined") return;
+        measureEdges(el);
+        edgeObserver = new ResizeObserver(() => measureEdges(el));
+        edgeObserver.observe(el);
+        for (const child of Array.from(el.children)) edgeObserver.observe(child);
+      },
+      { immediate: true, flush: "post" }
+    );
+    onBeforeUnmount(() => edgeObserver?.disconnect());
+    function onThumbPointerDown() {
+      dragging.value = true;
+      const stop = () => {
+        dragging.value = false;
+        window.removeEventListener("pointerup", stop);
+        window.removeEventListener("pointercancel", stop);
+      };
+      window.addEventListener("pointerup", stop);
+      window.addEventListener("pointercancel", stop);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ScrollAreaRoot), {
+        class: normalizeClass(["relative flex flex-col overflow-hidden", dragging.value ? "select-none" : void 0]),
+        type: "hover",
+        "scroll-hide-delay": 500
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(ScrollAreaScrollbar), {
+            orientation: "vertical",
+            "force-mount": "",
+            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: "min-w-1 rounded-l-pill bg-brand/40 transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand",
+                onPointerdown: onThumbPointerDown
+              })
+            ]),
+            _: 1
+          }, 8, ["style"]),
+          createVNode(unref(ScrollAreaScrollbar), {
+            orientation: "horizontal",
+            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: "min-h-1 rounded-t-pill bg-brand/40 transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand",
+                onPointerdown: onThumbPointerDown
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(unref(ScrollAreaViewport), {
+            ref_key: "viewportRef",
+            ref: viewportRef,
+            class: normalizeClass(["w-full min-h-0 min-w-0 flex-1 [&>div]:!block [&>div]:!min-w-0", __props.instant ? "" : "scroll-smooth motion-reduce:scroll-auto"]),
+            style: normalizeStyle(__props.fade ? { maskImage: fadeMask.value, WebkitMaskImage: fadeMask.value } : void 0),
+            onScrollPassive: onViewportScroll
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: normalizeClass(__props.contentClass)
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 2)
+            ]),
+            _: 3
+          }, 8, ["class", "style"])
+        ]),
+        _: 3
+      }, 8, ["class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpSidebar-DlLZJk1u.js → LpSidebar-DlvoM3h6.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-CYm-nUIZ.js";
-import { _ as _sfc_main$1 } from "./LpSidebarNav-DSDa5mAY.js";
+import { _ as _sfc_main$2 } from "./LpDrawer-D1ubjU11.js";
+import { _ as _sfc_main$1 } from "./LpSidebarNav-Ds95Sp9b.js";
 const _hoisted_1 = {
   key: 1,
   class: "mt-2 flex shrink-0 flex-col gap-2"

package/dist/chunks/{LpSidebarNav-DSDa5mAY.js → LpSidebarNav-Ds95Sp9b.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-DQ0Yudfu.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-BjImFflN.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex min-h-0 flex-1 flex-col gap-4"

package/dist/chunks/{LpTable-DqZ-L4Au.js → LpTable-i2AEwiPd.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-DQ0Yudfu.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-BjImFflN.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/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-CCtskgfZ.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-BV9M0aec.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-D42la4ZD.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-oYlB1C9T.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-DQ0Yudfu.js";
+import { _ as _sfc_main$2 } from "../chunks/LpScrollArea-BjImFflN.js";
 import '../assets/LpCommandPalette-Cp6Y-j7g.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-Z9hsfm2D.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-BgaP-GJZ.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDrawer.vue.js

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

package/dist/components/LpFileTree.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTree-DXb3yKzH.js";
+import { _ as _sfc_main } from "../chunks/LpFileTree-CmKJxz4K.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpLogViewer.vue.js

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

package/dist/components/LpModal.vue.js

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

package/dist/components/LpNotificationBell.vue.js

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

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

@@ -4,9 +4,9 @@ type __VLS_Props = {
     contentClass?: string;
     barInsetTop?: string;
 };
-declare var __VLS_40: {};
+declare var __VLS_44: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_40) => any;
+    default?: (props: typeof __VLS_44) => 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-DQ0Yudfu.js";
+import { _ as _sfc_main } from "../chunks/LpScrollArea-BjImFflN.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebar.vue.js

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

package/dist/components/LpSidebarNav.vue.js

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

package/dist/components/LpTable.vue.js

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

package/dist/index.js

@@ -1,9 +1,9 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CCtskgfZ.js";
+import { _ as _2 } from "./chunks/LpAddressInput-BV9M0aec.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DFKrd1Ne.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _5 } from "./chunks/LpAppShell-D42la4ZD.js";
+import { _ as _5 } from "./chunks/LpAppShell-oYlB1C9T.js";
 import { _ as _6 } from "./chunks/LpAutocomplete-DIgXmtCA.js";
 import { _ as _7 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
 import { _ as _8 } from "./chunks/LpBadge-CXzBPnwO.js";
@@ -14,15 +14,15 @@ import { _ as _12 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _13 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _14 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _15 } from "./chunks/LpConfirmDialog-Z9hsfm2D.js";
+import { _ as _15 } from "./chunks/LpConfirmDialog-BgaP-GJZ.js";
 import { _ as _16 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _17 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _18 } from "./chunks/LpDisclosure-DP6yfgfM.js";
 import { _ as _19 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _20 } from "./chunks/LpDrawer-CYm-nUIZ.js";
+import { _ as _20 } from "./chunks/LpDrawer-D1ubjU11.js";
 import { _ as _21 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _22 } from "./chunks/LpEmptyState-CrfyRJUG.js";
-import { _ as _23 } from "./chunks/LpFileTree-DXb3yKzH.js";
+import { _ as _23 } from "./chunks/LpFileTree-CmKJxz4K.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _24 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _25 } from "./chunks/LpIcon-CCnX5_2j.js";
@@ -31,9 +31,9 @@ import { _ as _27 } from "./chunks/LpInput-BauZRyzm.js";
 import { _ as _28 } from "./chunks/LpLightbox-CzhFe9wZ.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _29 } from "./chunks/LpLink-DHwOEp4e.js";
-import { _ as _30 } from "./chunks/LpLogViewer-tmKPNTuU.js";
-import { _ as _31 } from "./chunks/LpModal-g2dGpF7l.js";
-import { _ as _32 } from "./chunks/LpNotificationBell-DHze8wYN.js";
+import { _ as _30 } from "./chunks/LpLogViewer-CFckvccr.js";
+import { _ as _31 } from "./chunks/LpModal-YaFleOpp.js";
+import { _ as _32 } from "./chunks/LpNotificationBell-B1QTe4mK.js";
 import { _ as _33 } from "./chunks/LpNumberField-C5ar-OwE.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _35 } from "./chunks/LpPagination-CeGuNe_q.js";
@@ -44,17 +44,17 @@ import { _ as _38 } from "./chunks/LpPopover-8268UmlC.js";
 import { _ as _39 } from "./chunks/LpProgress-BhI0IbjC.js";
 import { _ as _40 } from "./chunks/LpRadio-CL-pI0_O.js";
 import { _ as _41 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
-import { _ as _42 } from "./chunks/LpScrollArea-DQ0Yudfu.js";
+import { _ as _42 } from "./chunks/LpScrollArea-BjImFflN.js";
 import { _ as _43 } from "./chunks/LpSegmented-BmpanyAo.js";
 import { _ as _44 } from "./chunks/LpSelect-D5mU4cZO.js";
 import { _ as _45 } from "./chunks/LpServiceNode-Dc-Ut5RS.js";
-import { _ as _46 } from "./chunks/LpSidebar-DlLZJk1u.js";
+import { _ as _46 } from "./chunks/LpSidebar-DlvoM3h6.js";
 import { _ as _47 } from "./chunks/LpSkeleton-eSFIo4kD.js";
 import { _ as _48 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _49 } from "./chunks/LpStat-CdbEFOvn.js";
 import { _ as _50 } from "./chunks/LpStepper-5dFTrW21.js";
 import { _ as _51 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _52 } from "./chunks/LpTable-DqZ-L4Au.js";
+import { _ as _52 } from "./chunks/LpTable-i2AEwiPd.js";
 import { _ as _53 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
 import { _ as _54 } from "./chunks/LpTabs-D7aTVPOb.js";
 import { _ as _55 } from "./chunks/LpTextarea-CRAkhemZ.js";

package/package.json

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

package/src/components/LpModal.vue

@@ -99,6 +99,10 @@ let ro: ResizeObserver | undefined
 let mo: MutationObserver | undefined
 let raf = 0
 let settleTimer: ReturnType<typeof setTimeout> | undefined
+/** Where the panel last settled, so a retune has a height to ease FROM. */
+let lastHeight = 0
+/** True while a tween owns the height, so observers don't cancel it midway. */
+let inFlight = false
 
 // The height is driven imperatively rather than through a style binding. By the
 // time replacement content is in the DOM the panel has already reflowed to its
@@ -106,7 +110,12 @@ let settleTimer: ReturnType<typeof setTimeout> | undefined
 // height for the transition to start from. Writing the OLD height, forcing a
 // reflow, then writing the new one gives the transition both ends.
 const retune = (el: HTMLElement) => {
-  const from = el.offsetHeight
+  // One swap wakes both observers — the mutation as content lands, the resize as
+  // it reflows — and the second call would clear the pin the first just wrote.
+  if (inFlight) return
+  // Remembered, not measured: by the time either observer fires the panel has
+  // already reflowed, so the element can only report where it is going.
+  const from = lastHeight
   el.style.height = ""
   // `max-h` comes from a class, so the panel already reports the clipped figure
   // once the cap bites. Pinning that would leave a short panel sitting over
@@ -115,24 +124,30 @@ const retune = (el: HTMLElement) => {
   el.style.maxHeight = "none"
   const to = el.offsetHeight
   el.style.maxHeight = ""
+  lastHeight = to
   // Nothing moved, so there is nothing to ease — and leaving the height unset
   // keeps the panel free to size itself.
-  if (to === 0 || to === from) return
+  if (to === 0 || from === 0 || to === from) return
   el.style.height = `${from}px`
   void el.offsetHeight
   el.style.height = `${to}px`
 
+  inFlight = true
   // While the panel is still catching up, the body is shorter than the content
   // it already holds, so the scroll area would flash a bar for an overflow that
   // resolves itself the moment the transition lands.
   resizing.value = true
   clearTimeout(settleTimer)
   settleTimer = setTimeout(() => {
+    inFlight = false
     resizing.value = false
     // Released once the panel has arrived. A height left pinned in pixels stops
     // being a starting point and becomes a cap: content that grows afterwards
     // is clipped, and `max-h` can no longer size the panel itself.
     el.style.height = ""
+    // Re-read rather than trusting `to`: `max-h` may have clamped the panel
+    // short of it, and the next tween has to start from where it really sits.
+    lastHeight = el.offsetHeight
   }, TWEEN_MS)
 }
 
@@ -150,9 +165,13 @@ watch(
     tweening.value = false
     resizing.value = false
 
+    lastHeight = 0
+    inFlight = false
+
     const el = panelRef.value?.$el
     if (!isOpen || !(el instanceof HTMLElement)) return
 
+    lastHeight = el.offsetHeight
     el.style.height = `${el.offsetHeight}px`
     // The opening panel must not animate its height in from the pre-content box,
     // so the transition only arms once that first pin has painted. The pin is
@@ -264,8 +283,11 @@ onBeforeUnmount(() => {
              it already holds, so the scroll area raises a bar for an overflow
              that resolves itself as the transition lands. Hiding just the bar
              for the length of the tween leaves scrolling itself untouched. -->
+        <!-- Faded because a capped panel cuts its body mid-row, and a hard edge
+             at the crop reads as the content ending there. -->
         <LpScrollArea
           v-else
+          fade
           class="min-h-0 flex-1 text-sm text-ink/90"
           :class="resizing ? '[&_[data-scrollbarimpl]]:invisible' : ''"
           :content-class="bodyPad"

package/src/components/LpScrollArea.vue

@@ -6,7 +6,7 @@
  * exit animation). Rounded only on the OUTER edge — the side flush to the wall
  * stays square. Themed via tokens; native scroll/keyboard/touch preserved.
  */
-import { computed, ref } from "vue"
+import { computed, onBeforeUnmount, ref, watch } from "vue"
 import {
   ScrollAreaRoot,
   ScrollAreaScrollbar,
@@ -14,7 +14,8 @@ import {
   ScrollAreaViewport,
 } from "reka-ui"
 
-// `fade` softens the top/bottom edges to hint more content.
+// `fade` softens whichever of the top/bottom edges currently has content beyond
+// it, so a clipped list reads as continuing rather than as cut off.
 // `contentClass` styles the scrollable CONTENT container (the viewport's inner
 // wrapper) — put list layout here (display:grid / gap / padding), not on the
 // component root, since items live inside reka's viewport.
@@ -40,7 +41,7 @@ const props = withDefaults(
 // drive scroll-following (e.g. log tails) can track position. The listener is
 // bound on ScrollAreaViewport, whose `$attrs` reka forwards onto the scrollable
 // element itself.
-defineEmits<{ scroll: [event: Event] }>()
+const emit = defineEmits<{ scroll: [event: Event] }>()
 
 // Expose the scrollable viewport element so callers can read/write scrollTop
 // (auto-scroll to bottom, "is at bottom" checks). reka's ScrollAreaViewport
@@ -56,6 +57,78 @@ defineExpose({ viewportEl })
 // would snap back to visible once the animation finished.
 const barFade =
   "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]"
+
+// Dragging the thumb pulls the pointer off the bar and across the content, and
+// the browser reads that as a text selection — the rows highlight blue while
+// the user is only trying to scroll. Suppressed for the duration of the drag
+// rather than with a blanket `select-none`, which would cost the content its
+// selectability for good.
+const dragging = ref(false)
+
+/** How far the fade reaches in from an edge that has content beyond it. */
+const FADE_PX = 14
+
+const atTop = ref(true)
+const atBottom = ref(true)
+
+/// Only the edges that actually hide something are softened. A fixed mask dims
+/// the last line of a list that has already been scrolled to the end, which
+/// reads as content missing rather than as content continuing.
+const fadeMask = computed(() => {
+  const top = atTop.value ? "black 0" : `transparent 0, black ${FADE_PX}px`
+  const bottom = atBottom.value
+    ? "black 100%"
+    : `black calc(100% - ${FADE_PX}px), transparent 100%`
+  return `linear-gradient(to bottom, ${top}, ${bottom})`
+})
+
+function measureEdges(el: HTMLElement) {
+  atTop.value = el.scrollTop <= 1
+  // A rounded-up scrollHeight can sit a pixel above the sum, so the comparison
+  // is given the same slack as the top rather than demanding an exact landing.
+  atBottom.value = el.scrollTop + el.clientHeight >= el.scrollHeight - 1
+}
+
+function onViewportScroll(event: Event) {
+  if (props.fade) measureEdges(event.target as HTMLElement)
+  emit("scroll", event)
+}
+
+// Scrolling is not the only thing that changes which edges hide content: a list
+// that fills in, a panel that resizes, or content short enough to need no fade
+// at all never fire a scroll event. Watched only when `fade` is on, since
+// nothing else here depends on the measurements.
+let edgeObserver: ResizeObserver | undefined
+
+watch(
+  [viewportEl, () => props.fade],
+  ([el, enabled]) => {
+    edgeObserver?.disconnect()
+    edgeObserver = undefined
+    if (!el || !enabled || typeof ResizeObserver === "undefined") return
+    measureEdges(el)
+    edgeObserver = new ResizeObserver(() => measureEdges(el))
+    edgeObserver.observe(el)
+    // The content box grows independently of the viewport's own size.
+    for (const child of Array.from(el.children)) edgeObserver.observe(child)
+  },
+  { immediate: true, flush: "post" },
+)
+
+onBeforeUnmount(() => edgeObserver?.disconnect())
+
+function onThumbPointerDown() {
+  dragging.value = true
+  const stop = () => {
+    dragging.value = false
+    window.removeEventListener("pointerup", stop)
+    window.removeEventListener("pointercancel", stop)
+  }
+  // Bound on the window: the pointer is captured by the thumb, and the release
+  // routinely happens far outside the scroll area.
+  window.addEventListener("pointerup", stop)
+  window.addEventListener("pointercancel", stop)
+}
 </script>
 
 <template>
@@ -65,7 +138,12 @@ const barFade =
        by `flex-1` inside a capped panel — is itself content-derived, so the
        viewport grew to the full content height and scrolled nothing while the
        root clipped the overflow. -->
-  <ScrollAreaRoot class="relative flex flex-col overflow-hidden" type="hover" :scroll-hide-delay="500">
+  <ScrollAreaRoot
+    class="relative flex flex-col overflow-hidden"
+    :class="dragging ? 'select-none' : undefined"
+    type="hover"
+    :scroll-hide-delay="500"
+  >
     <!-- 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
@@ -91,6 +169,7 @@ const barFade =
            the positioning reka owns. -->
       <ScrollAreaThumb
         class="min-w-1 rounded-l-pill bg-brand/40 transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand"
+        @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>
 
@@ -101,17 +180,16 @@ const barFade =
     >
       <ScrollAreaThumb
         class="min-h-1 rounded-t-pill bg-brand/40 transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand"
+        @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>
 
     <ScrollAreaViewport
       ref="viewportRef"
       class="w-full min-h-0 min-w-0 flex-1 [&>div]:!block [&>div]:!min-w-0"
-      :class="[
-        instant ? '' : 'scroll-smooth motion-reduce:scroll-auto',
-        fade ? '[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]' : '',
-      ]"
-      @scroll.passive="$emit('scroll', $event)"
+      :class="instant ? '' : 'scroll-smooth motion-reduce:scroll-auto'"
+      :style="fade ? { maskImage: fadeMask, WebkitMaskImage: fadeMask } : undefined"
+      @scroll.passive="onViewportScroll"
     >
       <div :class="contentClass">
         <slot />

package/dist/chunks/LpScrollArea-DQ0Yudfu.js

@@ -1,72 +0,0 @@
-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 = "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpScrollArea",
-  props: {
-    fade: { type: Boolean },
-    instant: { type: Boolean, default: false },
-    contentClass: {},
-    barInsetTop: {}
-  },
-  emits: ["scroll"],
-  setup(__props, { expose: __expose }) {
-    const viewportRef = ref(null);
-    const viewportEl = computed(
-      () => viewportRef.value?.viewportElement ?? null
-    );
-    __expose({ viewportEl });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ScrollAreaRoot), {
-        class: "relative flex flex-col overflow-hidden",
-        type: "hover",
-        "scroll-hide-delay": 500
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(ScrollAreaScrollbar), {
-            orientation: "vertical",
-            "force-mount": "",
-            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: "min-w-1 rounded-l-pill bg-brand/40 transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand" })
-            ]),
-            _: 1
-          }, 8, ["style"]),
-          createVNode(unref(ScrollAreaScrollbar), {
-            orientation: "horizontal",
-            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: "min-h-1 rounded-t-pill bg-brand/40 transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand" })
-            ]),
-            _: 1
-          }),
-          createVNode(unref(ScrollAreaViewport), {
-            ref_key: "viewportRef",
-            ref: viewportRef,
-            class: normalizeClass(["w-full min-h-0 min-w-0 flex-1 [&>div]:!block [&>div]:!min-w-0", [
-              __props.instant ? "" : "scroll-smooth motion-reduce:scroll-auto",
-              __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
-      });
-    };
-  }
-});
-export {
-  _sfc_main as _
-};