@leavepulse/ui 0.14.10 → 0.15.1

package/dist/components/fileTree.d.ts

@@ -50,5 +50,30 @@ export type CheckState = "checked" | "unchecked" | "indeterminate";
  * ticked as a whole — which is exactly what a backup picker needs.
  */
 export declare function checkStateOf(node: FileNode, checked: ReadonlySet<string>): CheckState;
+/**
+ * How much of a directory's subtree is ticked, counting FILES only (folders are
+ * containers, not payload). Lets a row say "3 / 12" so a half-filled checkbox
+ * isn't the only clue that a folder is partially selected.
+ */
+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

@@ -128,6 +128,70 @@ function checkStateOf(node, checked) {
   if (all) return "checked";
   return any ? "indeterminate" : "unchecked";
 }
+function checkedCount(node, checked) {
+  let count = 0;
+  let total = 0;
+  function walk(list) {
+    for (const child of list) {
+      if (child.kind === "file") {
+        total++;
+        if (checked.has(child.id)) count++;
+      } else if (child.children?.length) {
+        walk(child.children);
+      }
+    }
+  }
+  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) {
@@ -146,6 +210,8 @@ function ancestorIds(nodes, id) {
 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, 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-0Ko_uj8q.js";
-import { ancestorIds, checkStateOf, 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";
@@ -168,6 +168,8 @@ export {
   blockTitle,
   e as bootstrapTheme,
   checkStateOf,
+  checkedCount,
+  computeStats,
   countBlocks,
   countLeaves,
   f as dark,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.14.10",
+  "version": "0.15.1",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -31,7 +31,8 @@
     "./dist/*": "./dist/*"
   },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org"
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
   },
   "sideEffects": [
     "**/*.css",

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[] = []
@@ -321,6 +353,12 @@ function onToggle(node: FileNode) {
 
 function onSelect(node: FileNode) {
   if (node.disabled) return
+  // Clicking the highlighted row again clears it — a selection you can't undo
+  // without picking something else is a trap.
+  if (props.selected === node.id) {
+    emit("update:selected", "")
+    return
+  }
   emit("update:selected", node.id)
   emit("select", node)
   if (node.kind === "file") emit("open", node)
@@ -328,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
 }
 
@@ -391,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)
@@ -481,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,13 +11,12 @@
  */
 import { computed } from "vue"
 import {
-  checkStateOf,
   fileIcon,
   formatModified,
   formatSize,
   sortNodes,
-  subtreeSize,
   type FileNode,
+  type NodeStats,
 } from "./fileTree"
 import LpCheckbox from "./LpCheckbox.vue"
 import LpContextMenu from "./LpContextMenu.vue"
@@ -37,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
 }>()
@@ -70,18 +71,31 @@ 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)
 })
 
+/**
+ * "3 / 12" on a directory whose subtree is partly ticked. Only shown while it
+ * actually differs from the whole — a fully ticked or untouched folder reads
+ * fine from the checkbox alone, and a count on every row would be noise.
+ */
+const countLabel = computed(() => {
+  if (!props.checkable || !isDir.value) return ""
+  const { checked = 0, total = 0 } = stat.value ?? {}
+  return total && checked && checked < total ? `${checked} / ${total}` : ""
+})
+
 const modifiedLabel = computed(() =>
   props.showModified && props.node.modified !== undefined
     ? formatModified(props.node.modified)
@@ -201,14 +215,27 @@ 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>
         </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>
+        <!-- Partial-selection counter: says outright how much of the folder is
+             ticked, which a half-state checkbox alone doesn't convey. -->
+        <span
+          v-if="countLabel"
+          class="shrink-0 rounded-pill bg-brand-soft px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-brand"
+        >
+          {{ countLabel }}
+        </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"
@@ -247,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)"