@leavepulse/ui 0.15.0 → 0.15.1

package/dist/chunks/{LpAppShell-BLKZDLh8.js → LpAppShell-CV194os6.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-BtnZCCBT.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-tZ2z-PnM.js";
+import { _ as _sfc_main$4 } from "./LpScrollArea-De9DLpa1.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-B11IDRQi.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/{LpAutocomplete-B9uoCs4t.js → LpAutocomplete-DIgXmtCA.js}

@@ -50,9 +50,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (o) => typeof o === "string" ? { value: o } : o
       )
     );
+    const typing = ref(false);
     const filtered = computed(() => {
       const q = text.value.trim().toLowerCase();
-      if (!props.filter || !q) return items.value;
+      if (!props.filter || !typing.value || !q) return items.value;
       return items.value.filter((o) => {
         const hay = `${o.label ?? o.value} ${o.description ?? ""}`.toLowerCase();
         return hay.includes(q);
@@ -72,23 +73,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       md: "h-(--size-control-md) text-sm",
       lg: "h-(--size-control-lg) text-sm"
     };
+    function onInput(event) {
+      typing.value = true;
+      text.value = event.target.value;
+    }
     function onFocus() {
+      typing.value = false;
       focused.value = true;
       if (canOpen.value) open.value = true;
     }
     function choose(opt) {
+      typing.value = false;
       emit("update:modelValue", opt.value);
       emit("select", opt.value);
       open.value = false;
     }
     function clear() {
+      typing.value = false;
       emit("update:modelValue", "");
       open.value = false;
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ComboboxRoot), {
         open: open.value,
-        "onUpdate:open": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+        "onUpdate:open": _cache[2] || (_cache[2] = ($event) => open.value = $event),
         "ignore-filter": true,
         "reset-search-term-on-blur": false,
         "reset-search-term-on-select": false,
@@ -118,9 +126,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted",
                 onBeforeinput: unref(onBeforeInput),
                 onPaste: unref(onPaste),
-                onInput: _cache[0] || (_cache[0] = ($event) => text.value = $event.target.value),
+                onInput,
                 onFocus,
-                onBlur: _cache[1] || (_cache[1] = ($event) => focused.value = false)
+                onBlur: _cache[0] || (_cache[0] = ($event) => focused.value = false)
               }, null, 8, ["model-value", "placeholder", "disabled", "aria-invalid", "onBeforeinput", "onPaste"]),
               __props.clearable && hasValue.value ? (openBlock(), createElementBlock("button", {
                 key: 1,
@@ -144,7 +152,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 position: "popper",
                 "side-offset": 6,
                 class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"]),
-                onOpenAutoFocus: _cache[2] || (_cache[2] = withModifiers(() => {
+                onOpenAutoFocus: _cache[1] || (_cache[1] = withModifiers(() => {
                 }, ["prevent"]))
               }, {
                 default: withCtx(() => [

package/dist/chunks/{LpConfirmDialog-BA45MvRL.js → LpConfirmDialog-WHkymac5.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-B9CVVC5U.js";
+import { _ as _sfc_main$1 } from "./LpModal-DpBHQpbU.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

package/dist/chunks/{LpDrawer-6n5Hd-iF.js → LpDrawer-BHzCy-Aa.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-BtnZCCBT.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-De9DLpa1.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-D0DEpKof.js → LpFileTree-BQz8Rfgz.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref, watch, computed, openBlock, createElementBlock, Fragment, renderList, normalizeStyle, createBlock, createVNode, withCtx, createElementVNode, renderSlot, mergeProps, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createCommentVNode } from "vue";
-import { subtreeIds, subtreeSize, formatSize, sortNodes, ancestorIds, checkStateOf } from "../components/fileTree.js";
+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-3e71ywJV.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-BtnZCCBT.js";
+import { _ as _sfc_main$3 } from "./LpFileTreeNode-DFg4PhOK.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-De9DLpa1.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex flex-col gap-1"
@@ -53,43 +53,56 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (ids) checkedIds.value = new Set(ids);
       }
     );
-    const byId = computed(() => {
-      const map = /* @__PURE__ */ new Map();
-      function walk(list) {
+    const index = computed(() => {
+      const byId2 = /* @__PURE__ */ new Map();
+      const parentOfId = /* @__PURE__ */ new Map();
+      function walk(list, parent) {
         for (const node of list) {
-          map.set(node.id, node);
-          if (node.children) walk(node.children);
+          byId2.set(node.id, node);
+          if (parent !== void 0) parentOfId.set(node.id, parent);
+          if (node.children) walk(node.children, node.id);
         }
       }
       walk(props.nodes);
-      return map;
+      return { byId: byId2, parentOfId };
     });
+    const byId = computed(() => index.value.byId);
     const summary = computed(() => {
       let files = 0;
       let dirs = 0;
       let bytes = 0;
       let sized = false;
-      for (const id of checkedIds.value) {
-        const node = byId.value.get(id);
-        if (!node) continue;
-        if (node.kind === "dir") {
-          dirs++;
-          const inside = node.children?.length ? subtreeIds(node).some((child) => child !== id && checkedIds.value.has(child)) : false;
-          if (!inside) {
-            const size = subtreeSize(node);
-            if (size !== void 0) {
-              bytes += size;
+      function walk(list) {
+        for (const node of list) {
+          const stat = stats.value.get(node.id);
+          if (!stat || stat.state === "unchecked") continue;
+          if (node.kind === "file") {
+            files++;
+            if (node.size !== void 0) {
+              bytes += node.size;
               sized = true;
             }
+            continue;
           }
-        } else {
-          files++;
-          if (node.size !== void 0) {
-            bytes += node.size;
+          dirs++;
+          if (stat.state === "checked" && stat.size !== void 0) {
+            bytes += stat.size;
             sized = true;
+            files += stat.total;
+            countDirs(node.children ?? []);
+            continue;
           }
+          walk(node.children ?? []);
         }
       }
+      function countDirs(list) {
+        for (const node of list) {
+          if (node.kind !== "dir") continue;
+          dirs++;
+          countDirs(node.children ?? []);
+        }
+      }
+      walk(props.nodes);
       return {
         files,
         dirs,
@@ -111,12 +124,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (value) next.add(id);
         else next.delete(id);
       }
-      for (const ancestorId of ancestorIds(props.nodes, node.id).reverse()) {
+      let ancestorId = index.value.parentOfId.get(node.id);
+      while (ancestorId !== void 0) {
         const ancestor = byId.value.get(ancestorId);
-        if (!ancestor?.children?.length) continue;
-        const all = ancestor.children.every((c) => c.disabled || next.has(c.id));
-        if (all) next.add(ancestorId);
-        else next.delete(ancestorId);
+        if (ancestor?.children?.length) {
+          const all = ancestor.children.every((c) => c.disabled || next.has(c.id));
+          if (all) next.add(ancestorId);
+          else next.delete(ancestorId);
+        }
+        ancestorId = index.value.parentOfId.get(ancestorId);
       }
       setChecked(next);
     }
@@ -130,6 +146,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const requested = /* @__PURE__ */ new Set();
     const roots = computed(() => props.sort ? sortNodes(props.nodes) : props.nodes);
+    const stats = computed(() => computeStats(props.nodes, checkedIds.value));
     const visible = computed(() => {
       const out = [];
       function walk(list) {
@@ -204,8 +221,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (node.kind === "file") emit("open", node);
     }
     function parentOf(id) {
-      const trail = ancestorIds(props.nodes, id);
-      const parentId = trail.at(-1);
+      const parentId = index.value.parentOfId.get(id);
       return parentId ? visible.value.find((n) => n.id === parentId) : void 0;
     }
     function move(delta) {
@@ -260,7 +276,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (!node) return;
           e.preventDefault();
           if (props.checkable) {
-            onCheck(node, checkStateOf(node, checkedIds.value) !== "checked");
+            onCheck(node, stats.value.get(node.id)?.state !== "checked");
             break;
           }
           onSelect(node);
@@ -338,6 +354,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "icon-size": __props.iconSize,
                   checkable: __props.checkable,
                   checked: checkedIds.value,
+                  stats: stats.value,
                   "show-size": __props.showSize,
                   "show-modified": __props.showModified,
                   onSelect,
@@ -349,7 +366,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     renderSlot(_ctx.$slots, "row", mergeProps({ ref_for: true }, slotProps))
                   ]),
                   _: 3
-                }, 8, ["node", "expanded", "loading", "selected-id", "focused-id", "sort", "icon-size", "checkable", "checked", "show-size", "show-modified"]);
+                }, 8, ["node", "expanded", "loading", "selected-id", "focused-id", "sort", "icon-size", "checkable", "checked", "stats", "show-size", "show-modified"]);
               }), 128))
             ], 40, _hoisted_3)
           ]),

package/dist/chunks/{LpFileTreeNode-3e71ywJV.js → LpFileTreeNode-DFg4PhOK.js}

@@ -1,19 +1,19 @@
 import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, withModifiers, normalizeStyle, normalizeClass, createBlock, createCommentVNode, unref, renderSlot, createTextVNode, toDisplayString, Transition, Fragment, renderList, mergeProps } from "vue";
-import { sortNodes, checkStateOf, subtreeSize, formatSize, checkedCount, formatModified, fileIcon } from "../components/fileTree.js";
+import { sortNodes, formatSize, formatModified, fileIcon } from "../components/fileTree.js";
 import { _ as _sfc_main$3 } from "./LpCheckbox-BO0zuuPh.js";
 import { _ as _sfc_main$1 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
 const _hoisted_1 = ["aria-level", "aria-selected", "aria-expanded", "aria-disabled"];
 const _hoisted_2 = ["data-node-id", "tabindex"];
 const _hoisted_3 = { class: "flex size-4 shrink-0 items-center justify-center" };
-const _hoisted_4 = { class: "min-w-0 flex-1 truncate" };
+const _hoisted_4 = { class: "min-w-0 flex-1 shrink-[2] truncate" };
 const _hoisted_5 = {
   key: 1,
   class: "shrink-0 rounded-pill bg-brand-soft px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-brand"
 };
 const _hoisted_6 = {
   key: 2,
-  class: "shrink-0 text-xs text-muted"
+  class: "min-w-0 shrink truncate text-xs text-muted"
 };
 const _hoisted_7 = {
   key: 3,
@@ -41,6 +41,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     iconSize: {},
     checkable: { type: Boolean },
     checked: {},
+    stats: {},
     showSize: { type: Boolean },
     showModified: { type: Boolean }
   },
@@ -59,17 +60,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const list = props.node.children ?? [];
       return props.sort ? sortNodes(list) : list;
     });
+    const stat = computed(() => props.stats.get(props.node.id));
     const checkState = computed(
-      () => props.checkable ? checkStateOf(props.node, props.checked) : "unchecked"
+      () => props.checkable ? stat.value?.state ?? "unchecked" : "unchecked"
     );
     const sizeLabel = computed(() => {
       if (!props.showSize) return "";
-      const bytes = subtreeSize(props.node);
+      const bytes = stat.value?.size;
       return bytes === void 0 ? "" : formatSize(bytes);
     });
     const countLabel = computed(() => {
       if (!props.checkable || !isDir.value) return "";
-      const { checked, total } = checkedCount(props.node, props.checked);
+      const { checked = 0, total = 0 } = stat.value ?? {};
       return total && checked && checked < total ? `${checked} / ${total}` : "";
     });
     const modifiedLabel = computed(
@@ -201,6 +203,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "icon-size": __props.iconSize,
                   checkable: __props.checkable,
                   checked: __props.checked,
+                  stats: __props.stats,
                   "show-size": __props.showSize,
                   "show-modified": __props.showModified,
                   onSelect: _cache[2] || (_cache[2] = ($event) => emit("select", $event)),
@@ -212,7 +215,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     renderSlot(_ctx.$slots, "row", mergeProps({ ref_for: true }, slotProps))
                   ]),
                   _: 3
-                }, 8, ["style", "node", "depth", "expanded", "loading", "selected-id", "focused-id", "sort", "icon-size", "checkable", "checked", "show-size", "show-modified"]);
+                }, 8, ["style", "node", "depth", "expanded", "loading", "selected-id", "focused-id", "sort", "icon-size", "checkable", "checked", "stats", "show-size", "show-modified"]);
               }), 128))
             ])) : createCommentVNode("", true)
           ]),

package/dist/chunks/{LpLogViewer-BBgaY38i.js → LpLogViewer-BvzRZPjs.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-BtnZCCBT.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-De9DLpa1.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,
@@ -354,6 +354,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref_key: "scrollRef",
           ref: scrollRef,
           fade: "",
+          instant: "",
           "content-class": __props.wrap ? "" : "min-w-max",
           style: normalizeStyle({ height: __props.height }),
           onScroll

package/dist/chunks/{LpModal-B9CVVC5U.js → LpModal-DpBHQpbU.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-BtnZCCBT.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-De9DLpa1.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex shrink-0 items-start justify-between gap-4 p-5 pb-3"

package/dist/chunks/{LpNotificationBell-B9VHks_D.js → LpNotificationBell-BtfRoL2i.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-BtnZCCBT.js";
+import { _ as _sfc_main$3 } from "./LpScrollArea-De9DLpa1.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-BtnZCCBT.js → LpScrollArea-De9DLpa1.js}

@@ -5,7 +5,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpScrollArea",
   props: {
     fade: { type: Boolean },
-    smooth: { type: Boolean },
+    instant: { type: Boolean, default: false },
     contentClass: {},
     barInsetTop: {}
   },
@@ -47,7 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ref_key: "viewportRef",
             ref: viewportRef,
             class: normalizeClass(["size-full min-w-0 [&>div]:!block [&>div]:!min-w-0", [
-              __props.smooth ? "scroll-smooth motion-reduce:scroll-auto" : "",
+              __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))

package/dist/chunks/{LpSidebar-tZ2z-PnM.js → LpSidebar-B11IDRQi.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-6n5Hd-iF.js";
-import { _ as _sfc_main$1 } from "./LpSidebarNav-D-YvtwsH.js";
+import { _ as _sfc_main$2 } from "./LpDrawer-BHzCy-Aa.js";
+import { _ as _sfc_main$1 } from "./LpSidebarNav-TIUNHZX-.js";
 const _hoisted_1 = {
   key: 1,
   class: "mt-2 flex shrink-0 flex-col gap-2"

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

package/dist/chunks/{LpTable-CzHVcr3v.js → LpTable-CKGaUbEM.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-BtnZCCBT.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-De9DLpa1.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-BLKZDLh8.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-CV194os6.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpAutocomplete.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAutocomplete-B9uoCs4t.js";
+import { _ as _sfc_main } from "../chunks/LpAutocomplete-DIgXmtCA.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-BtnZCCBT.js";
+import { _ as _sfc_main$2 } from "../chunks/LpScrollArea-De9DLpa1.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-BA45MvRL.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-WHkymac5.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpDrawer.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDrawer-6n5Hd-iF.js";
+import { _ as _sfc_main } from "../chunks/LpDrawer-BHzCy-Aa.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFileTree.vue.js

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

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

@@ -1,4 +1,4 @@
-import { FileNode } from './fileTree';
+import { FileNode, NodeStats } from './fileTree';
 type __VLS_Props = {
     node: FileNode;
     /** Nesting depth, 0 at the root — drives the indent guide and aria-level. */
@@ -13,6 +13,8 @@ type __VLS_Props = {
     /** Render a tri-state checkbox per row (multi-select mode). */
     checkable: boolean;
     checked: Set<string>;
+    /** Per-node state, derived once by the root for the whole tree. */
+    stats: Map<string, NodeStats>;
     showSize: boolean;
     showModified: boolean;
 };

package/dist/components/LpFileTreeNode.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTreeNode-3e71ywJV.js";
+import { _ as _sfc_main } from "../chunks/LpFileTreeNode-DFg4PhOK.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpLogViewer.vue.js

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

package/dist/components/LpModal.vue.js

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

package/dist/components/LpNotificationBell.vue.js

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

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

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     fade?: boolean;
-    smooth?: boolean;
+    instant?: boolean;
     contentClass?: string;
     barInsetTop?: string;
 };
@@ -14,7 +14,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     scroll: (event: Event) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onScroll?: ((event: Event) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    instant: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/LpScrollArea.vue.js

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

package/dist/components/LpSidebar.vue.js

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

package/dist/components/LpSidebarNav.vue.js

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

package/dist/components/LpTable.vue.js

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

package/dist/components/fileTree.d.ts

@@ -59,5 +59,21 @@ export declare function checkedCount(node: FileNode, checked: ReadonlySet<string
     checked: number;
     total: number;
 };
+/** Everything a row needs to render, precomputed once per node. */
+export interface NodeStats {
+    state: CheckState;
+    /** Ticked files in the subtree, and how many there are in total. */
+    checked: number;
+    total: number;
+    /** Rolled-up subtree size, or undefined when nothing carries one. */
+    size?: number;
+}
+/**
+ * Derive every row's state in ONE post-order pass over the tree, keyed by node
+ * id. Calling `checkStateOf`/`subtreeSize`/`checkedCount` per row instead makes
+ * each row walk its own subtree, which is quadratic on a deep tree and shows up
+ * as a stutter the moment a directory holds a few thousand files.
+ */
+export declare function computeStats(nodes: FileNode[], checked: ReadonlySet<string>): Map<string, NodeStats>;
 /** Ids of every ancestor directory of `id`, so callers can reveal a deep node. */
 export declare function ancestorIds(nodes: FileNode[], id: string): string[];

package/dist/components/fileTree.js

@@ -144,6 +144,54 @@ function checkedCount(node, checked) {
   walk(node.children ?? []);
   return { checked: count, total };
 }
+function computeStats(nodes, checked) {
+  const stats = /* @__PURE__ */ new Map();
+  function visit(node) {
+    if (node.kind === "file" || !node.children?.length) {
+      const isChecked = checked.has(node.id);
+      const self2 = {
+        state: isChecked ? "checked" : "unchecked",
+        checked: node.kind === "file" && isChecked ? 1 : 0,
+        total: node.kind === "file" ? 1 : 0,
+        size: node.size
+      };
+      stats.set(node.id, self2);
+      return self2;
+    }
+    let all = true;
+    let any = false;
+    let count = 0;
+    let total = 0;
+    let bytes = 0;
+    let sized = node.size !== void 0;
+    for (const child of node.children) {
+      const childStats = visit(child);
+      if (childStats.state === "checked") any = true;
+      else if (childStats.state === "indeterminate") {
+        any = true;
+        all = false;
+      } else all = false;
+      count += childStats.checked;
+      total += childStats.total;
+      if (childStats.size !== void 0) {
+        bytes += childStats.size;
+        sized = true;
+      }
+    }
+    const self = {
+      state: all ? "checked" : any ? "indeterminate" : "unchecked",
+      checked: count,
+      total,
+      // An explicit size on the directory wins: a server-side listing usually
+      // knows the real figure without the children being loaded.
+      size: node.size ?? (sized ? bytes : void 0)
+    };
+    stats.set(node.id, self);
+    return self;
+  }
+  for (const node of nodes) visit(node);
+  return stats;
+}
 function ancestorIds(nodes, id) {
   const path = [];
   function walk(list, trail) {
@@ -163,6 +211,7 @@ export {
   ancestorIds,
   checkStateOf,
   checkedCount,
+  computeStats,
   fileIcon,
   formatModified,
   formatSize,

package/dist/index.d.ts

@@ -27,8 +27,8 @@ export type { MenuItem } from './components/LpDropdownMenu.vue';
 export { default as LpEmptyState } from './components/LpEmptyState.vue';
 export { default as LpFileTree } from './components/LpFileTree.vue';
 export type { FileTreeSummary } from './components/LpFileTree.vue';
-export type { CheckState, FileNode } from './components/fileTree';
-export { ancestorIds, checkedCount, checkStateOf, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize, } from './components/fileTree';
+export type { CheckState, FileNode, NodeStats } from './components/fileTree';
+export { ancestorIds, checkedCount, checkStateOf, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize, } from './components/fileTree';
 export { default as LpFormField } from './components/LpFormField.vue';
 export { default as LpIcon } from './components/LpIcon.vue';
 export { default as LpInfraNode } from './components/LpInfraNode.vue';

package/dist/index.js

@@ -1,7 +1,7 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
 import { _ as _2 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _3 } from "./chunks/LpAppShell-BLKZDLh8.js";
-import { _ as _4 } from "./chunks/LpAutocomplete-B9uoCs4t.js";
+import { _ as _3 } from "./chunks/LpAppShell-CV194os6.js";
+import { _ as _4 } from "./chunks/LpAutocomplete-DIgXmtCA.js";
 import { _ as _5 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
 import { _ as _6 } from "./chunks/LpBadge-CXzBPnwO.js";
 import { _ as _7 } from "./chunks/LpBreadcrumbs-B7Aqatzw.js";
@@ -11,24 +11,24 @@ import { _ as _10 } from "./chunks/LpCard-BmrTvWOe.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-BA45MvRL.js";
+import { _ as _13 } from "./chunks/LpConfirmDialog-WHkymac5.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-6n5Hd-iF.js";
+import { _ as _18 } from "./chunks/LpDrawer-BHzCy-Aa.js";
 import { _ as _19 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _20 } from "./chunks/LpEmptyState-CrfyRJUG.js";
-import { _ as _21 } from "./chunks/LpFileTree-D0DEpKof.js";
-import { ancestorIds, checkStateOf, checkedCount, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
+import { _ as _21 } from "./chunks/LpFileTree-BQz8Rfgz.js";
+import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _22 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _23 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _24 } from "./chunks/LpInfraNode-C_PHcthC.js";
 import { _ as _25 } from "./chunks/LpInput-BauZRyzm.js";
 import { _ as _26 } from "./chunks/LpLink-DHwOEp4e.js";
-import { _ as _27 } from "./chunks/LpLogViewer-BBgaY38i.js";
-import { _ as _28 } from "./chunks/LpModal-B9CVVC5U.js";
-import { _ as _29 } from "./chunks/LpNotificationBell-B9VHks_D.js";
+import { _ as _27 } from "./chunks/LpLogViewer-BvzRZPjs.js";
+import { _ as _28 } from "./chunks/LpModal-DpBHQpbU.js";
+import { _ as _29 } from "./chunks/LpNotificationBell-BtfRoL2i.js";
 import { _ as _30 } from "./chunks/LpNumberField-C5ar-OwE.js";
 import { _ as _31 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _32 } from "./chunks/LpPagination-CeGuNe_q.js";
@@ -39,17 +39,17 @@ import { _ as _35 } from "./chunks/LpPopover-8268UmlC.js";
 import { _ as _36 } from "./chunks/LpProgress-BhI0IbjC.js";
 import { _ as _37 } from "./chunks/LpRadio-CL-pI0_O.js";
 import { _ as _38 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
-import { _ as _39 } from "./chunks/LpScrollArea-BtnZCCBT.js";
+import { _ as _39 } from "./chunks/LpScrollArea-De9DLpa1.js";
 import { _ as _40 } from "./chunks/LpSegmented-BmpanyAo.js";
 import { _ as _41 } from "./chunks/LpSelect-DznhPEWX.js";
 import { _ as _42 } from "./chunks/LpServiceNode-Dc-Ut5RS.js";
-import { _ as _43 } from "./chunks/LpSidebar-tZ2z-PnM.js";
+import { _ as _43 } from "./chunks/LpSidebar-B11IDRQi.js";
 import { _ as _44 } from "./chunks/LpSkeleton-eSFIo4kD.js";
 import { _ as _45 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _46 } from "./chunks/LpStat-CdbEFOvn.js";
 import { _ as _47 } from "./chunks/LpStepper-5dFTrW21.js";
 import { _ as _48 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _49 } from "./chunks/LpTable-CzHVcr3v.js";
+import { _ as _49 } from "./chunks/LpTable-CKGaUbEM.js";
 import { _ as _50 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
 import { _ as _51 } from "./chunks/LpTabs-D7aTVPOb.js";
 import { _ as _52 } from "./chunks/LpTextarea-CRAkhemZ.js";
@@ -169,6 +169,7 @@ export {
   e as bootstrapTheme,
   checkStateOf,
   checkedCount,
+  computeStats,
   countBlocks,
   countLeaves,
   f as dark,

package/package.json

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

package/src/components/LpAutocomplete.vue

@@ -97,9 +97,16 @@ const items = computed<AutocompleteOption[]>(() =>
   ),
 )
 
+// The field's text IS the value here, so a chosen option would otherwise filter
+// the list down to itself: reopening the field showed a single row, and the
+// other options only came back after erasing what was already selected. The
+// filter therefore applies to what the user TYPES, and stops applying as soon
+// as a value is picked (or the field is reopened untouched).
+const typing = ref(false)
+
 const filtered = computed(() => {
   const q = text.value.trim().toLowerCase()
-  if (!props.filter || !q) return items.value
+  if (!props.filter || !typing.value || !q) return items.value
   return items.value.filter((o) => {
     const hay = `${o.label ?? o.value} ${o.description ?? ""}`.toLowerCase()
     return hay.includes(q)
@@ -136,18 +143,28 @@ const anchorSize = {
   lg: "h-(--size-control-lg) text-sm",
 }
 
+function onInput(event: Event) {
+  typing.value = true
+  text.value = (event.target as HTMLInputElement).value
+}
+
 function onFocus() {
+  // Arriving at a field that already holds a value shows every option, not just
+  // the one it currently holds.
+  typing.value = false
   focused.value = true
   if (canOpen.value) open.value = true
 }
 
 function choose(opt: AutocompleteOption) {
+  typing.value = false
   emit("update:modelValue", opt.value)
   emit("select", opt.value)
   open.value = false
 }
 
 function clear() {
+  typing.value = false
   emit("update:modelValue", "")
   open.value = false
 }
@@ -188,7 +205,7 @@ function clear() {
         class="min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted"
         @beforeinput="onBeforeInput"
         @paste="onPaste"
-        @input="text = ($event.target as HTMLInputElement).value"
+        @input="onInput"
         @focus="onFocus"
         @blur="focused = false"
       />

package/src/components/LpFileTree.vue

@@ -21,11 +21,10 @@
 import { computed, ref, watch } from "vue"
 import {
   ancestorIds,
-  checkStateOf,
+  computeStats,
   formatSize,
   sortNodes,
   subtreeIds,
-  subtreeSize,
   type FileNode,
 } from "./fileTree"
 import LpEmptyState from "./LpEmptyState.vue"
@@ -135,19 +134,27 @@ watch(
   },
 )
 
-/** Index every node by id once per data change — the tree walks it a lot. */
-const byId = computed(() => {
-  const map = new Map<string, FileNode>()
-  function walk(list: FileNode[]) {
+/**
+ * Index every node by id, plus each node's parent id, in one pass per data
+ * change. The parent map turns "reconcile my ancestors" into a walk up the
+ * chain instead of a search through the whole tree on every tick.
+ */
+const index = computed(() => {
+  const byId = new Map<string, FileNode>()
+  const parentOfId = new Map<string, string>()
+  function walk(list: FileNode[], parent?: string) {
     for (const node of list) {
-      map.set(node.id, node)
-      if (node.children) walk(node.children)
+      byId.set(node.id, node)
+      if (parent !== undefined) parentOfId.set(node.id, parent)
+      if (node.children) walk(node.children, node.id)
     }
   }
   walk(props.nodes)
-  return map
+  return { byId, parentOfId }
 })
 
+const byId = computed(() => index.value.byId)
+
 /**
  * What the ticked set adds up to. Directories are counted but not sized — their
  * bytes arrive through the files inside them, so summing both would double-count.
@@ -159,30 +166,47 @@ const summary = computed<FileTreeSummary>(() => {
   let dirs = 0
   let bytes = 0
   let sized = false
-  for (const id of checkedIds.value) {
-    const node = byId.value.get(id)
-    if (!node) continue
-    if (node.kind === "dir") {
-      dirs++
-      // Only when nothing inside it is ticked (unexpanded/lazy folder).
-      const inside = node.children?.length
-        ? subtreeIds(node).some((child) => child !== id && checkedIds.value.has(child))
-        : false
-      if (!inside) {
-        const size = subtreeSize(node)
-        if (size !== undefined) {
-          bytes += size
+
+  // Walk the tree, not the ticked set: a fully ticked directory can be counted
+  // whole and its subtree skipped, which keeps this linear in what's selected
+  // rather than in the size of the instance.
+  function walk(list: FileNode[]) {
+    for (const node of list) {
+      const stat = stats.value.get(node.id)
+      if (!stat || stat.state === "unchecked") continue
+
+      if (node.kind === "file") {
+        files++
+        if (node.size !== undefined) {
+          bytes += node.size
           sized = true
         }
+        continue
       }
-    } else {
-      files++
-      if (node.size !== undefined) {
-        bytes += node.size
+
+      dirs++
+      if (stat.state === "checked" && stat.size !== undefined) {
+        // Whole directory: take its rolled-up size and don't descend.
+        bytes += stat.size
         sized = true
+        files += stat.total
+        countDirs(node.children ?? [])
+        continue
       }
+      walk(node.children ?? [])
+    }
+  }
+
+  // A fully ticked directory still contributes its nested folders to the count.
+  function countDirs(list: FileNode[]) {
+    for (const node of list) {
+      if (node.kind !== "dir") continue
+      dirs++
+      countDirs(node.children ?? [])
     }
   }
+
+  walk(props.nodes)
   return {
     files,
     dirs,
@@ -212,13 +236,17 @@ function onCheck(node: FileNode, value: boolean) {
     if (value) next.add(id)
     else next.delete(id)
   }
-  // Walk ancestors outward, re-deriving each from its children.
-  for (const ancestorId of ancestorIds(props.nodes, node.id).reverse()) {
+  // Walk straight up the parent chain, re-deriving each ancestor from its
+  // children — nearest first, so each one sees the level below already settled.
+  let ancestorId = index.value.parentOfId.get(node.id)
+  while (ancestorId !== undefined) {
     const ancestor = byId.value.get(ancestorId)
-    if (!ancestor?.children?.length) continue
-    const all = ancestor.children.every((c) => c.disabled || next.has(c.id))
-    if (all) next.add(ancestorId)
-    else next.delete(ancestorId)
+    if (ancestor?.children?.length) {
+      const all = ancestor.children.every((c) => c.disabled || next.has(c.id))
+      if (all) next.add(ancestorId)
+      else next.delete(ancestorId)
+    }
+    ancestorId = index.value.parentOfId.get(ancestorId)
   }
   setChecked(next)
 }
@@ -240,6 +268,10 @@ const requested = new Set<string>()
 
 const roots = computed(() => (props.sort ? sortNodes(props.nodes) : props.nodes))
 
+// One pass for the whole tree; every row reads its entry by id instead of
+// walking its own subtree on each render.
+const stats = computed(() => computeStats(props.nodes, checkedIds.value))
+
 /** Rows currently visible, in render order — the axis the arrow keys walk. */
 const visible = computed(() => {
   const out: FileNode[] = []
@@ -334,8 +366,7 @@ function onSelect(node: FileNode) {
 
 /** Nearest expanded ancestor of `id`, or undefined at the top level. */
 function parentOf(id: string): FileNode | undefined {
-  const trail = ancestorIds(props.nodes, id)
-  const parentId = trail.at(-1)
+  const parentId = index.value.parentOfId.get(id)
   return parentId ? visible.value.find((n) => n.id === parentId) : undefined
 }
 
@@ -397,7 +428,7 @@ function onKeydown(e: KeyboardEvent) {
       // In checkable mode Space is the tick — the standard tree behaviour for a
       // multi-select tree — and Enter stays "open/activate".
       if (props.checkable) {
-        onCheck(node, checkStateOf(node, checkedIds.value) !== "checked")
+        onCheck(node, stats.value.get(node.id)?.state !== "checked")
         break
       }
       onSelect(node)
@@ -487,6 +518,7 @@ defineExpose({ reveal, expandAll, collapseAll, checkAll, clearChecked, summary }
           :icon-size="iconSize"
           :checkable="checkable"
           :checked="checkedIds"
+          :stats="stats"
           :show-size="showSize"
           :show-modified="showModified"
           @select="onSelect"

package/src/components/LpFileTreeNode.vue

@@ -11,14 +11,12 @@
  */
 import { computed } from "vue"
 import {
-  checkedCount,
-  checkStateOf,
   fileIcon,
   formatModified,
   formatSize,
   sortNodes,
-  subtreeSize,
   type FileNode,
+  type NodeStats,
 } from "./fileTree"
 import LpCheckbox from "./LpCheckbox.vue"
 import LpContextMenu from "./LpContextMenu.vue"
@@ -38,6 +36,8 @@ const props = defineProps<{
   /** Render a tri-state checkbox per row (multi-select mode). */
   checkable: boolean
   checked: Set<string>
+  /** Per-node state, derived once by the root for the whole tree. */
+  stats: Map<string, NodeStats>
   showSize: boolean
   showModified: boolean
 }>()
@@ -71,15 +71,17 @@ const children = computed(() => {
   return props.sort ? sortNodes(list) : list
 })
 
+const stat = computed(() => props.stats.get(props.node.id))
+
 const checkState = computed(() =>
-  props.checkable ? checkStateOf(props.node, props.checked) : "unchecked",
+  props.checkable ? (stat.value?.state ?? "unchecked") : "unchecked",
 )
 
 // A directory shows the rolled-up size of what's under it, so a backup picker
 // can answer "how much is this folder" without expanding it.
 const sizeLabel = computed(() => {
   if (!props.showSize) return ""
-  const bytes = subtreeSize(props.node)
+  const bytes = stat.value?.size
   return bytes === undefined ? "" : formatSize(bytes)
 })
 
@@ -90,7 +92,7 @@ const sizeLabel = computed(() => {
  */
 const countLabel = computed(() => {
   if (!props.checkable || !isDir.value) return ""
-  const { checked, total } = checkedCount(props.node, props.checked)
+  const { checked = 0, total = 0 } = stat.value ?? {}
   return total && checked && checked < total ? `${checked} / ${total}` : ""
 })
 
@@ -213,7 +215,7 @@ function onActivate() {
           :class="node.disabled ? '' : isDir ? 'text-brand' : 'text-muted'"
         />
 
-        <span class="min-w-0 flex-1 truncate">
+        <span class="min-w-0 flex-1 shrink-[2] truncate">
           <slot name="row" :node="node" :depth="depth" :expanded="isOpen" :selected="isSelected">
             {{ node.name }}
           </slot>
@@ -228,8 +230,12 @@ function onActivate() {
           {{ countLabel }}
         </span>
 
-        <!-- Metadata columns: tabular figures so sizes line up down the tree. -->
-        <span v-if="node.meta" class="shrink-0 text-xs text-muted">{{ node.meta }}</span>
+        <!-- Metadata columns: tabular figures so sizes line up down the tree.
+             `meta` is free text, so it truncates rather than pushing the size
+             column off the row. -->
+        <span v-if="node.meta" class="min-w-0 shrink truncate text-xs text-muted">
+          {{ node.meta }}
+        </span>
         <span
           v-if="modifiedLabel"
           class="shrink-0 text-xs tabular-nums text-muted/80"
@@ -268,6 +274,7 @@ function onActivate() {
           :icon-size="iconSize"
           :checkable="checkable"
           :checked="checked"
+          :stats="stats"
           :show-size="showSize"
           :show-modified="showModified"
           @select="emit('select', $event)"

package/src/components/LpLogViewer.vue

@@ -551,9 +551,13 @@ const transitionProps = {
   <div
     class="relative overflow-hidden rounded-card border border-line bg-surface font-mono text-xs leading-relaxed"
   >
+    <!-- `instant`: this viewer decides for itself when a jump animates (see
+         rideToBottom) and restores scrollTop directly after prepending older
+         lines. A CSS smooth scroll would override both. -->
     <LpScrollArea
       ref="scrollRef"
       fade
+      instant
       :content-class="wrap ? '' : 'min-w-max'"
       :style="{ height }"
       @scroll="onScroll"

package/src/components/LpScrollArea.vue

@@ -20,16 +20,21 @@ import {
 // component root, since items live inside reka's viewport.
 // `barInsetTop` (any CSS length) pulls the vertical scrollbar down by that much,
 // so it doesn't run under a sticky header pinned at the top of the viewport.
-// `smooth` eases wheel and keyboard scrolling. Opt-in rather than default:
-// it also applies to `scrollTo({ behavior: "auto" })`, which consumers that
-// drive the scroll themselves (a log tail jumping to the newest line) rely on
-// being instant.
-const props = defineProps<{
-  fade?: boolean
-  smooth?: boolean
-  contentClass?: string
-  barInsetTop?: string
-}>()
+// Wheel and keyboard scrolling ease by default. `instant` opts back out, and
+// any consumer that DRIVES the scroll itself needs it: CSS scroll-behaviour
+// also governs programmatic scrolling, overriding `scrollTo({behavior:"auto"})`
+// and animating even a plain `scrollTop = n`. A log tail pinning itself to the
+// newest line, or restoring a position after prepending rows, has to land
+// instantly — see LpLogViewer.
+const props = withDefaults(
+  defineProps<{
+    fade?: boolean
+    instant?: boolean
+    contentClass?: string
+    barInsetTop?: string
+  }>(),
+  { instant: false },
+)
 
 // Re-emit the native scroll event of the underlying viewport so consumers that
 // drive scroll-following (e.g. log tails) can track position. The listener is
@@ -91,7 +96,7 @@ const barFade =
       ref="viewportRef"
       class="size-full min-w-0 [&>div]:!block [&>div]:!min-w-0"
       :class="[
-        smooth ? 'scroll-smooth motion-reduce:scroll-auto' : '',
+        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)"

package/src/components/fileTree.ts

@@ -221,6 +221,81 @@ export function checkedCount(
   return { checked: count, total }
 }
 
+/** Everything a row needs to render, precomputed once per node. */
+export interface NodeStats {
+  state: CheckState
+  /** Ticked files in the subtree, and how many there are in total. */
+  checked: number
+  total: number
+  /** Rolled-up subtree size, or undefined when nothing carries one. */
+  size?: number
+}
+
+/**
+ * Derive every row's state in ONE post-order pass over the tree, keyed by node
+ * id. Calling `checkStateOf`/`subtreeSize`/`checkedCount` per row instead makes
+ * each row walk its own subtree, which is quadratic on a deep tree and shows up
+ * as a stutter the moment a directory holds a few thousand files.
+ */
+export function computeStats(
+  nodes: FileNode[],
+  checked: ReadonlySet<string>,
+): Map<string, NodeStats> {
+  const stats = new Map<string, NodeStats>()
+
+  function visit(node: FileNode): NodeStats {
+    if (node.kind === "file" || !node.children?.length) {
+      // A leaf, or a directory whose children aren't loaded: fall back to its
+      // own membership so an unexpanded folder can still be ticked whole.
+      const isChecked = checked.has(node.id)
+      const self: NodeStats = {
+        state: isChecked ? "checked" : "unchecked",
+        checked: node.kind === "file" && isChecked ? 1 : 0,
+        total: node.kind === "file" ? 1 : 0,
+        size: node.size,
+      }
+      stats.set(node.id, self)
+      return self
+    }
+
+    let all = true
+    let any = false
+    let count = 0
+    let total = 0
+    let bytes = 0
+    let sized = node.size !== undefined
+
+    for (const child of node.children) {
+      const childStats = visit(child)
+      if (childStats.state === "checked") any = true
+      else if (childStats.state === "indeterminate") {
+        any = true
+        all = false
+      } else all = false
+      count += childStats.checked
+      total += childStats.total
+      if (childStats.size !== undefined) {
+        bytes += childStats.size
+        sized = true
+      }
+    }
+
+    const self: NodeStats = {
+      state: all ? "checked" : any ? "indeterminate" : "unchecked",
+      checked: count,
+      total,
+      // An explicit size on the directory wins: a server-side listing usually
+      // knows the real figure without the children being loaded.
+      size: node.size ?? (sized ? bytes : undefined),
+    }
+    stats.set(node.id, self)
+    return self
+  }
+
+  for (const node of nodes) visit(node)
+  return stats
+}
+
 /** Ids of every ancestor directory of `id`, so callers can reveal a deep node. */
 export function ancestorIds(nodes: FileNode[], id: string): string[] {
   const path: string[] = []

package/src/index.ts

@@ -27,11 +27,12 @@ export type { MenuItem } from "./components/LpDropdownMenu.vue"
 export { default as LpEmptyState } from "./components/LpEmptyState.vue"
 export { default as LpFileTree } from "./components/LpFileTree.vue"
 export type { FileTreeSummary } from "./components/LpFileTree.vue"
-export type { CheckState, FileNode } from "./components/fileTree"
+export type { CheckState, FileNode, NodeStats } from "./components/fileTree"
 export {
   ancestorIds,
   checkedCount,
   checkStateOf,
+  computeStats,
   fileIcon,
   formatModified,
   formatSize,