@leavepulse/ui 0.94.0 → 0.95.0

package/dist/index.js

@@ -1,10 +1,10 @@
 import { _ } from "./chunks/LayoutCanvas-j4TZqx1A.js";
-import { _ as _2 } from "./chunks/LpAddressInput-BCqR0zmv.js";
+import { _ as _2 } from "./chunks/LpAddressInput-C5VIgRp0.js";
 import { _ as _3 } from "./chunks/LpMapPicker-V0Lybi10.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-43WHmTsM.js";
 import { _ as _5 } from "./chunks/LpAlert-Q0h7Gucu.js";
-import { _ as _6 } from "./chunks/LpAppShell-xEBmGV78.js";
+import { _ as _6 } from "./chunks/LpAppShell-C4b3ySa_.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-YPxAPHEo.js";
 import { _ as _8 } from "./chunks/LpAvatar-CfLBqlY1.js";
 import { _ as _9 } from "./chunks/LpBadge-Bh5roBr_.js";
@@ -19,7 +19,7 @@ import { chartView, lttbIndices, minMaxBuckets, panRange, slotOf, sourceOf, zoom
 import { useChartSync } from "./composables/useChartSync.js";
 import { createLinkedView, linkChart, linkLog, linkPipeline, linkTable, linkTopology, provideLinkedView, useLinkedView } from "./composables/useLinkedView.js";
 import { _ as _14 } from "./chunks/LpCheckbox-C9VnPIQf.js";
-import { _ as _15 } from "./chunks/LpCodeBlock-BgWcg2mk.js";
+import { _ as _15 } from "./chunks/LpCodeBlock-DTU40x8P.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
 import { _ as _16 } from "./chunks/LpColorPicker-KGMG8QEh.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
@@ -33,8 +33,8 @@ import { default as default6 } from "./components/LpPaletteStats.vue.js";
 import { default as default7 } from "./components/LpPaletteSwatches.vue.js";
 import { default as default8 } from "./components/LpKeys.vue.js";
 import { comboKeys, comboSteps } from "./components/keys.js";
-import { _ as _18 } from "./chunks/LpConfirmDialog-y6k0ryWR.js";
-import { _ as _19 } from "./chunks/LpConfirmHost-D-X0tDym.js";
+import { _ as _18 } from "./chunks/LpConfirmDialog-DrHcIxRn.js";
+import { _ as _19 } from "./chunks/LpConfirmHost-D0Cd8FA_.js";
 import { confirm, useConfirm } from "./components/confirm.js";
 import { _ as _20 } from "./chunks/LpContextMenu-DEFirphS.js";
 import { _ as _21 } from "./chunks/LpDatePicker-Dlyvgsan.js";
@@ -43,11 +43,11 @@ import { _ as _23 } from "./chunks/LpRangeCalendar-9BvaLZji.js";
 import { clampRange, dayAllowed, defaultDatePresets, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
 import { _ as _24 } from "./chunks/LpDisclosure-D4JZ-o8K.js";
 import { _ as _25 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _26 } from "./chunks/LpDrawer-BkWjFdV0.js";
+import { _ as _26 } from "./chunks/LpDrawer-BHlqi62K.js";
 import { _ as _27 } from "./chunks/LpDropdownMenu-CdCe7D2d.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
 import { _ as _28 } from "./chunks/LpEmptyState-DLOm07KH.js";
-import { _ as _29 } from "./chunks/LpFileTree-BN_zybBN.js";
+import { _ as _29 } from "./chunks/LpFileTree-gVjF_b6r.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _30 } from "./chunks/LpFieldNotice-DUPo1Yii.js";
 import { _ as _31 } from "./chunks/LpFormField-jbM7K1Hg.js";
@@ -56,25 +56,25 @@ import { i, b, a, c } from "./chunks/icons-C8ccRCKw.js";
 import { default as default10 } from "./components/LpImageEditor.vue.js";
 import { _ as _33 } from "./chunks/LpInfraNode-tD5x5YOy.js";
 import { _ as _34 } from "./chunks/LpInput-DGMpxrcg.js";
-import { _ as _35 } from "./chunks/LpLightbox-DPgz7IsT.js";
+import { _ as _35 } from "./chunks/LpLightbox--EwvQGe-.js";
 import { fileNameOf, isVideoItem } from "./components/lightbox.js";
 import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _37 } from "./chunks/LpLogViewer-BuIzr_6h.js";
+import { _ as _37 } from "./chunks/LpLogViewer-DSq9e8mT.js";
 import { _ as _38 } from "./chunks/LpLogInspector-BhJTJIst.js";
 import { compilePattern, findIds, messageShape, structuredPayload, timeMs } from "./components/logTools.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
-import { _ as _39 } from "./chunks/LpMediaGallery-CTejKF2-.js";
-import { _ as _40 } from "./chunks/LpModal-D1E7rQzw.js";
-import { _ as _41 } from "./chunks/LpModalNav-DVXAF-DG.js";
-import { _ as _42 } from "./chunks/LpNotificationBell-KRgdRZs-.js";
-import { _ as _43 } from "./chunks/LpNotificationFeed-CMGYU8c-.js";
+import { _ as _39 } from "./chunks/LpMediaGallery-DlYJf3DS.js";
+import { _ as _40 } from "./chunks/LpModal-COMHrBKL.js";
+import { _ as _41 } from "./chunks/LpModalNav-Cj02cfhL.js";
+import { _ as _42 } from "./chunks/LpNotificationBell-DNGijtmW.js";
+import { _ as _43 } from "./chunks/LpNotificationFeed-BoovbtfL.js";
 import { _ as _44 } from "./chunks/LpNumberField-C0LSu-tl.js";
 import { _ as _45 } from "./chunks/LpTimeField-Dio7Tj9A.js";
 import { _ as _46 } from "./chunks/LpNumberFlow-Vqj0tP7B.js";
 import { _ as _47 } from "./chunks/LpOtpInput-C14XagVB.js";
 import { _ as _48 } from "./chunks/LpPagination-DGLntZJN.js";
-import { _ as _49 } from "./chunks/LpPasswordInput-LPVI7D3v.js";
-import { _ as _50 } from "./chunks/LpPie-CsiBXe-e.js";
+import { _ as _49 } from "./chunks/LpPasswordInput-BBDz2zyU.js";
+import { _ as _50 } from "./chunks/LpPie-CtC4XdhC.js";
 import { _ as _51 } from "./chunks/LpPhoneInput-BdglZsGH.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _52 } from "./chunks/LpPopover-w2rr4x7n.js";
@@ -82,9 +82,9 @@ import { _ as _53 } from "./chunks/LpProgress-D_MSjowb.js";
 import { _ as _54 } from "./chunks/LpRadio-4KyxeSz4.js";
 import { _ as _55 } from "./chunks/LpRadioGroup-Cr_fmrBY.js";
 import { _ as _56 } from "./chunks/LpRollingText-B54Pje7P.js";
-import { _ as _57 } from "./chunks/LpScrollArea-CqvwfZs2.js";
+import { _ as _57 } from "./chunks/LpScrollArea-B_1KZOSS.js";
 import { _ as _58 } from "./chunks/LpScrollStrip-D4tsOfAQ.js";
-import { _ as _59 } from "./chunks/LpPageScrollbar-C9sTeU-2.js";
+import { _ as _59 } from "./chunks/LpPageScrollbar-BniFeL2U.js";
 import { _ as _60 } from "./chunks/LpSegmented-DzFYP0ZF.js";
 import { _ as _61 } from "./chunks/LpSection-CwsfNR7N.js";
 import { _ as _62 } from "./chunks/LpSelect-Dffg5r4I.js";
@@ -94,7 +94,7 @@ import { _ as _64 } from "./chunks/LpShift-DAgS_d2x.js";
 import { _ as _65 } from "./chunks/LpSwap-M7nFeW3C.js";
 import { _ as _66 } from "./chunks/LpHintExample-YzCXiSUp.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _67 } from "./chunks/LpSidebar-BIhusppV.js";
+import { _ as _67 } from "./chunks/LpSidebar-DPri9uyz.js";
 import { _ as _68 } from "./chunks/LpContextSwitcher-COw6GHPW.js";
 import { _ as _69 } from "./chunks/LpSkeleton-leTl53V9.js";
 import { _ as _70 } from "./chunks/LpSlider-DUd4gXnw.js";
@@ -122,10 +122,10 @@ import { _ as _80 } from "./chunks/LpBottomNav-9AqvZlRW.js";
 import { _ as _81 } from "./chunks/LpTagsInput-DD8-xe3F.js";
 import { addTags, splitTags } from "./components/tags.js";
 import { _ as _82 } from "./chunks/LpTextarea-CQg-dVxN.js";
-import { _ as _83 } from "./chunks/LpThemeSwitcher-B3c44xFH.js";
+import { _ as _83 } from "./chunks/LpThemeSwitcher-DKkCFaFk.js";
 import { _ as _84 } from "./chunks/LpTilt-B7KHX1zH.js";
-import { _ as _85 } from "./chunks/LpToaster-Cdx1tnHB.js";
-import { _ as _86 } from "./chunks/LpTooltip-BKde8Xjv.js";
+import { _ as _85 } from "./chunks/LpToaster-C7hHkGOA.js";
+import { _ as _86 } from "./chunks/LpTooltip-Bt1ZFViJ.js";
 import { _ as _87 } from "./chunks/LpTour-BGUKUxSZ.js";
 import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
 import { _ as _88 } from "./chunks/LpHintLayer-nuMqfzvy.js";
@@ -134,13 +134,13 @@ import { HINT_SIGNALS, contextMenuTip, createHintSystem, dropzoneTip, hintKey, h
 import { _ as _90 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
 import { _ as _91 } from "./chunks/LpTopologyCanvas-B1YFfMaq.js";
 import { clusterGraph, diffTopology, findPath, layeredLayout, neighborhood, topologyToSvg } from "./components/topologyGraph.js";
-import { _ as _92 } from "./chunks/LpUptimeBar-Dt6SY_-m.js";
+import { _ as _92 } from "./chunks/LpUptimeBar-CXgzU5ym.js";
 import { addLeaf, addTab, countBlocks, countLeaves, deserializeLayout, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, serializeLayout, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
 import { layoutController, useLayout } from "./layout/useLayout.js";
 import { useWorkspaces } from "./layout/useWorkspaces.js";
-import { _ as _93 } from "./chunks/LpWorkspaceSwitcher-DCIiOQt_.js";
-import { _ as _94 } from "./chunks/LpInspector-oTfkOdYd.js";
+import { _ as _93 } from "./chunks/LpWorkspaceSwitcher-CrUVSI7x.js";
+import { _ as _94 } from "./chunks/LpInspector-DSL1lINx.js";
 import { _ as _95 } from "./chunks/LpWindow-DsPeiDCZ.js";
 import { WINDOW_DOCKS, clampRect, dockAt, dockedRect, isWindowRect, resizeRect, snapRect, useWindowLayer } from "./composables/windowing.js";
 import { THEME_COOKIE, applyTheme, applyThemeWithTransition, bootstrapTheme, cacheSystemThemes, normalizeTheme, parseTheme, prefersDarkScheme, revealTransition, serializeTheme, themeEntries, themeFromCookie, themeToCssRule, themeToCssVars, useTheme } from "./theme/useTheme.js";
@@ -192,14 +192,14 @@ import { useScrollStrip } from "./composables/useScrollStrip.js";
 import { useToast } from "./composables/useToast.js";
 import { _ as _96 } from "./chunks/LpThemeProvider-XK6ZeWAE.js";
 import { _ as _97 } from "./chunks/LpFrame-Bv5Fphte.js";
-import { _ as _98 } from "./chunks/LpThemeStudio-BPPctXgd.js";
+import { _ as _98 } from "./chunks/LpThemeStudio-yiEdFJQL.js";
 import { _ as _99 } from "./chunks/LpThemeStudioSection-B7bt8Iyg.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
 import { _ as _100 } from "./chunks/LpRepeater-C0rns2xW.js";
 import { _ as _101 } from "./chunks/LpGauge-KZaQ_FDR.js";
 import { _ as _102 } from "./chunks/LpQuota-BaCq5YOQ.js";
 import { _ as _103 } from "./chunks/LpStatus-C6GqSHJj.js";
-import { _ as _104 } from "./chunks/LpRelativeTime-CN5bWD73.js";
+import { _ as _104 } from "./chunks/LpRelativeTime-9MHlbq6F.js";
 import { _ as _105 } from "./chunks/LpActivityLine-Ea-t5Vza.js";
 import { TONE_COLOR, TONE_SOFT, arcPath, capacityThresholds, meterFraction, toneAt } from "./components/meter.js";
 import { TONES, TONE_ALIASES, toneLook, toneOf } from "./components/tone.js";
@@ -207,7 +207,7 @@ import { formatAmount, quotaSegments, quotaState } from "./components/quota.js";
 import { compactNumber, decimalMark, formatBytes } from "./components/format.js";
 import { STATUS_LABELS, STATUS_LOOK } from "./components/status.js";
 import { formatRelativeTime } from "./components/relativeTime.js";
-import { _ as _106 } from "./chunks/LpPipeline-DVcoSs--.js";
+import { _ as _106 } from "./chunks/LpPipeline-aCALaUY8.js";
 import { _ as _107 } from "./chunks/LpStepMark-CPGVj1XG.js";
 import { childProgress, connectorFilled, currentStepIndex, isSettled, overallStatus, stepElapsed } from "./components/pipeline.js";
 import { _ as _108 } from "./chunks/LpLoader-Bf1yZwaU.js";
@@ -216,12 +216,12 @@ import { useAppUpdate } from "./composables/useAppUpdate.js";
 import { useNow } from "./composables/useNow.js";
 import { _ as _109 } from "./chunks/LpCountdown-DVl7vXI1.js";
 import { DEFAULT_MILESTONES, DEFAULT_UNIT_LABELS, ceilToSecond, crossedMilestone, formatElapsed, formatTime, msToNextSecond, splitTime, timeParts } from "./components/timeSpan.js";
-import { _ as _110 } from "./chunks/LpCopyButton-BGzw95Xc.js";
-import { _ as _111 } from "./chunks/LpSecretField-BwrZ4TfT.js";
-import { _ as _112 } from "./chunks/LpDataList-B56Gu6Yt.js";
+import { _ as _110 } from "./chunks/LpCopyButton-CiqUS4SX.js";
+import { _ as _111 } from "./chunks/LpSecretField-C9vwMFQ6.js";
+import { _ as _112 } from "./chunks/LpDataList-Cit9fOSp.js";
 import { _ as _113 } from "./chunks/LpEditable-DfRUAGkA.js";
-import { _ as _114 } from "./chunks/LpTruncate-C_C8eiIE.js";
-import { _ as _115 } from "./chunks/LpCodeDisplay-DBi1YPLp.js";
+import { _ as _114 } from "./chunks/LpTruncate-DEHWL1OA.js";
+import { _ as _115 } from "./chunks/LpCodeDisplay-F2hjLb0X.js";
 import { formatRemaining, groupCode, middleTruncate, normalizeCode } from "./components/fieldText.js";
 import { _ as _116 } from "./chunks/LpHoverCard-DYguY2AP.js";
 import { _ as _117 } from "./chunks/LpIdenticon-Dbbr4fvt.js";
@@ -251,7 +251,7 @@ import { _ as _129 } from "./chunks/LpCommandScope-DRUvHiX7.js";
 import { createPaletteRegistry, mergePaletteCommands, usePaletteCommands, vPalette } from "./composables/usePaletteCommands.js";
 import { commandShortcuts, commandToHotkey, commandToMenuItem, commandToPalette, useCommands } from "./composables/useCommands.js";
 import { usePaletteTheme } from "./theme/palette.js";
-import { _ as _130 } from "./chunks/LpPaletteTheme-CLwO-SDf.js";
+import { _ as _130 } from "./chunks/LpPaletteTheme-_FwkJO2o.js";
 const uk = {
   actionBar: { dismiss: "Закрити" },
   activityLine: { busy: "Завантаження" },

package/package.json

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

package/src/components/LpPageScrollbar.vue

@@ -75,9 +75,22 @@ function measure() {
   const height = Math.max(MIN_THUMB_PX, Math.round((track * view.clientHeight) / view.scrollHeight))
   thumb.value = { height, top: Math.round(((track - height) * view.scrollTop) / range) }
 }
+/*
+ * At most once a frame, and never in the middle of someone's render. A scroll
+ * or a resize of the window asks for the next frame. A change of the page's
+ * size is measured where the observer reports it, which is after the browser
+ * has laid the page out: the sizes are read for free there. Put off to the
+ * next frame instead, the read landed after whatever that frame had changed
+ * first (a list's rows starting their entrance) and laid the page out again
+ * for it, the cost of a whole table inside the frame that showed it.
+ */
 function measureSoon() {
   if (!frame && doc) frame = nodeWindow(doc).requestAnimationFrame(measure)
 }
+function measureLaidOut() {
+  if (frame && doc) nodeWindow(doc).cancelAnimationFrame(frame)
+  measure()
+}
 
 function onScroll() {
   measureSoon()
@@ -146,7 +159,7 @@ onMounted(() => {
   const win = nodeWindow(doc)
   win.addEventListener("scroll", onScroll, { passive: true })
   win.addEventListener("resize", measureSoon)
-  sizes = new win.ResizeObserver(measureSoon)
+  sizes = new win.ResizeObserver(measureLaidOut)
   sizes.observe(doc.body)
   if (host) sizes.observe(host)
   measure()

package/src/components/LpScrollArea.vue

@@ -155,8 +155,12 @@ function onViewportScroll(event: Event) {
 // state has to track content size even where the fade is off.
 let edgeResize: ResizeObserver | undefined
 let edgeMutation: MutationObserver | undefined
+let edgeFrame = 0
+let edgeWindow: Window | undefined
 
 function stopEdgeWatch() {
+  if (edgeFrame) edgeWindow?.cancelAnimationFrame(edgeFrame)
+  edgeFrame = 0
   edgeResize?.disconnect()
   edgeMutation?.disconnect()
   edgeResize = undefined
@@ -187,6 +191,14 @@ watch(
     // Rows arriving after the first paint are the common case — a list waiting
     // on a query renders empty, and observing only the boxes that existed then
     // left the fade off until something else happened to trigger a measure.
+    //
+    // Measured in the next frame, not here: a mutation is reported straight
+    // after the render that made it, before the browser has laid anything out,
+    // so reading the sizes here laid out fifty fresh table rows inside the
+    // click that brought them. The resize observer, which reports after layout,
+    // usually measures first anyway; the frame covers a change that resized
+    // nothing it watches.
+    edgeWindow = win
     if (win.MutationObserver) {
       edgeMutation = new win.MutationObserver(() => {
         if (edgeResize) {
@@ -194,7 +206,12 @@ watch(
           edgeResize.observe(el)
           for (const child of Array.from(el.children)) edgeResize.observe(child)
         }
-        remeasure()
+        if (!edgeFrame) {
+          edgeFrame = win.requestAnimationFrame(() => {
+            edgeFrame = 0
+            remeasure()
+          })
+        }
       })
       edgeMutation.observe(el, { childList: true, subtree: true })
     }

package/src/components/LpSidebar.vue

@@ -185,7 +185,7 @@ const props = withDefaults(
   }>(),
   {
     skeletonRows: 6,
-    skeletonHeader: true,
+    skeletonHeader: false,
     responsive: false,
     mobileBreakpoint: "md",
     divider: true,

package/src/components/LpSidebarNav.vue

@@ -56,7 +56,7 @@ const props = withDefaults(
     previewDelay?: number
     labels: { pinned: string; pin: string; unpin: string; expand: string }
   }>(),
-  { skeletonRows: 6, skeletonHeader: true, collapsedKeys: () => [], hoverFollow: false, pinned: () => [], previewDelay: 900 },
+  { skeletonRows: 6, skeletonHeader: false, collapsedKeys: () => [], hoverFollow: false, pinned: () => [], previewDelay: 900 },
 )
 
 const emit = defineEmits<{
@@ -212,6 +212,8 @@ function activate(item: SidebarItem) {
 }
 
 // The nav fills the remaining height with a fixed gap between groups; a short sidebar needs both under the consumer's control.
+const SKELETON_WIDTHS = ["55%", "70%", "45%", "62%", "50%", "68%"]
+
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex min-h-0 flex-1 flex-col gap-4",
 )
@@ -222,7 +224,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
        LpSkeleton wrapper so it pulses in phase with every other placeholder
        on the page and stops under reduced motion. -->
   <LpSkeleton v-if="loading"
-    :class="rootClass"
+    :class="[rootClass, 'overflow-hidden']"
     v-bind="rest">
     <div v-if="skeletonHeader" class="flex items-center gap-3 px-1">
       <div class="lp-skeleton-item size-10 shrink-0 rounded-pill bg-surface-soft" />
@@ -231,12 +233,20 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         <div class="lp-skeleton-item h-3 w-16 rounded-small bg-surface-soft/60" />
       </div>
     </div>
-    <div class="space-y-1">
-      <div
-        v-for="n in skeletonRows"
-        :key="n"
-        class="lp-skeleton-item h-9 rounded-control bg-surface-soft"
-      />
+    <!-- Rows in the shape of the items they stand in for: an icon and a label
+         of uneven width at the item's own height and padding, with a section
+         label after the first three. A run of full-width bars read as a list
+         of buttons, not as navigation. -->
+    <div class="flex flex-col gap-1">
+      <template v-for="n in skeletonRows" :key="n">
+        <div v-if="n === 4" class="px-3 pb-1 pt-3">
+          <div class="lp-skeleton-item h-2.5 w-20 rounded-small bg-surface-soft/60" />
+        </div>
+        <div class="flex h-9 items-center gap-3 px-3">
+          <div class="lp-skeleton-item size-4 shrink-0 rounded-small bg-surface-soft" />
+          <div class="lp-skeleton-item h-3 rounded-small bg-surface-soft" :style="{ width: SKELETON_WIDTHS[(n - 1) % SKELETON_WIDTHS.length] }" />
+        </div>
+      </template>
     </div>
   </LpSkeleton>
 

package/src/components/LpTable.vue

@@ -39,6 +39,7 @@ import {
   orderPinned,
   pinOffsets,
   presetHidden,
+  rowChanges,
   rowWindow,
   sortByKeys,
   type ColumnPin,
@@ -48,6 +49,7 @@ import {
 import { devWarn } from "../composables/devWarn"
 import { startPointerDrag } from "../composables/pointerDrag"
 import { isHTMLElement, nodeWindow } from "../composables/useView"
+import { prefersReducedMotion } from "../composables/easing"
 import LpButton from "./LpButton.vue"
 import { downloadFile, fileStem, toCsv, type CsvOptions } from "./exportData"
 import {
@@ -1708,6 +1710,47 @@ const roving = useRovingFocus(rovingItems, {
   },
 })
 
+/*
+ * A change that brings in, takes out or reorders many rows at once — a filter
+ * lifted from ten rows back to sixty, a page of new rows, a sort of a long
+ * list — is not animated row by row. Each row eased on its own reads as noise
+ * at that size, and following them is costly: TransitionGroup measures every
+ * row before and after (a forced layout of all the new rows inside the click),
+ * then sets an enter or move transition on each. The rows land at once and the
+ * body eases in as one instead, a single opacity animation on the compositor.
+ * A few rows leaving, arriving or moving (a filter that hides some, a row
+ * deleted) keep their own motion, which is what lets the eye follow them.
+ *
+ * Counted by rowChanges: the rows that arrive, leave or change their order;
+ * the ones that only slide aside to close a gap do not count.
+ */
+const ROW_MOTION_LIMIT = 12
+const rowsEl = shallowRef<HTMLElement | null>(null)
+function setRowsEl(el: unknown) {
+  const node = (el as { $el?: HTMLElement } | null)?.$el ?? null
+  rowsEl.value = node
+  roving.setContainer(node)
+}
+const motionIds = computed(() => (headerless.value ? allEntries.value : viewEntries.value).map((entry) => entry.id))
+/* The rows on screen, written after each render: what the next change is measured against. */
+let shownIds: readonly string[] = []
+const bigSwap = computed(() => rowChanges(shownIds, motionIds.value) > ROW_MOTION_LIMIT)
+let settleFlip = false
+watch(
+  motionIds,
+  (ids) => {
+    const eased = bigSwap.value && shownIds.length > 0 && ids.length > 0
+    shownIds = ids
+    const body = rowsEl.value
+    if (!eased || !body || props.virtualRowHeight || prefersReducedMotion(nodeWindow(body))) return
+    // Two names for one animation: switching between them restarts it without
+    // the reflow that taking a class off and putting it back would need.
+    settleFlip = !settleFlip
+    body.dataset.lpSettle = settleFlip ? "a" : "b"
+  },
+  { flush: "post", immediate: true },
+)
+
 function onRowKeydown(event: KeyboardEvent) {
   // Space ticks rather than activates when the table is selectable — the
   // standard split for a multi-select list.
@@ -2088,10 +2131,11 @@ usePaletteCommands(() => {
       <TransitionGroup
         tag="tbody"
         name="lp-row"
-        :css="animating && !virtualRowHeight"
+        :css="animating && !virtualRowHeight && !bigSwap"
+        :move-class="bigSwap ? 'lp-row-still' : undefined"
         :class="busy && displayRows.length ? 'opacity-60 transition-opacity' : 'transition-opacity'"
         :aria-busy="busy || undefined"
-        :ref="(el: unknown) => roving.setContainer((el as { $el?: HTMLElement })?.$el ?? null)"
+        :ref="setRowsEl"
       >
         <!-- The first page on its way: rows in the shape of the columns rather
              than a spinner in an empty box, so the table already has its height
@@ -2252,7 +2296,8 @@ usePaletteCommands(() => {
       :key="activeLayout"
       tag="div"
       name="lp-row"
-      :css="animating"
+      :css="animating && !bigSwap"
+      :move-class="bigSwap ? 'lp-row-still' : undefined"
       v-bind="scrollAttrs"
       class="min-h-0 transition-opacity"
       :class="[
@@ -2263,7 +2308,7 @@ usePaletteCommands(() => {
       ]"
       :style="activeLayout === 'cards' ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(${cardWidth}, 100%), 1fr))` } : undefined"
       :aria-busy="busy || undefined"
-      :ref="(el: unknown) => roving.setContainer((el as { $el?: HTMLElement })?.$el ?? null)"
+      :ref="setRowsEl"
     >
       <template v-if="displayRows.length === 0 && busy">
         <div
@@ -2501,6 +2546,30 @@ usePaletteCommands(() => {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
 
+/*
+ * A change too big to animate row by row (see ROW_MOTION_LIMIT): the rows
+ * land at once and the body comes up from half-faded as one. `lp-row-still`
+ * is the move class then, and has no transition on purpose: TransitionGroup
+ * checks the move class for one before it measures the rows, and skips the
+ * measuring when there is none.
+ */
+[data-lp-settle="a"] {
+  animation: lp-rows-settle-a var(--duration-fast) var(--ease-emphasized);
+}
+[data-lp-settle="b"] {
+  animation: lp-rows-settle-b var(--duration-fast) var(--ease-emphasized);
+}
+@keyframes lp-rows-settle-a {
+  from {
+    opacity: 0.4;
+  }
+}
+@keyframes lp-rows-settle-b {
+  from {
+    opacity: 0.4;
+  }
+}
+
 .lp-row-enter-from,
 .lp-row-leave-to {
   opacity: 0;
@@ -2624,5 +2693,8 @@ tr:hover .lp-tick-cue,
   .lp-tick {
     transition: none;
   }
+  [data-lp-settle] {
+    animation: none;
+  }
 }
 </style>

package/src/components/LpTabs.vue

@@ -3,7 +3,8 @@ import { isHTMLElement } from "../composables/useView"
 import { usePaletteCommands, usePaletteScope } from "../composables/usePaletteCommands"
 import { Motion } from "motion-v"
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
-import { computed, nextTick, ref, useId, watch, type FunctionalComponent } from "vue"
+import { computed, nextTick, onMounted, ref, useId, watch, type FunctionalComponent } from "vue"
+import { useResizeObserver } from "../composables/useResizeObserver"
 import { usePillTransition } from "../composables/usePillTransition"
 import { useStepHistory } from "../composables/useOverlayHistory"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
@@ -106,13 +107,21 @@ watch(
 // A row wider than its container scrolls sideways (a phone, a narrow card)
 // instead of wrapping each label onto two lines. LpScrollStrip lets a mouse
 // reach the tabs off to the side (wheel, drag, edge buttons), and the active
-// tab is brought into view whenever it changes, including from outside.
+// tab is brought into view whenever it changes, including from outside, and
+// also on mount and when the row resizes: a tab picked by the address before
+// the first paint, or left beyond the edge by a narrower window, would
+// otherwise sit off-screen with nothing saying which section is open. Those
+// two jump; only a change the person can follow eases.
 const strip = ref<InstanceType<typeof LpScrollStrip> | null>(null)
 const Passthrough: FunctionalComponent = (_, { slots }) => slots.default?.()
 const list = ref<{ $el: HTMLElement } | null>(null)
-watch(current, () => {
-  void nextTick(() => strip.value?.reveal(list.value?.$el?.querySelector('[data-state="active"]')))
-})
+function revealActive(smooth: boolean) {
+  if (bottom.value) return
+  strip.value?.reveal(list.value?.$el?.querySelector('[data-state="active"]'), { smooth })
+}
+watch(current, () => void nextTick(() => revealActive(true)))
+onMounted(() => requestAnimationFrame(() => revealActive(false)))
+useResizeObserver(() => strip.value?.scroller, () => revealActive(false))
 
 /*
  * reka selects a tab on mousedown, so a press meant to drag the row would