@leavepulse/ui 0.94.0 → 0.95.0

package/dist/components/LpLightbox.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpLightbox-DPgz7IsT.js";
+import { _ as _sfc_main } from "../chunks/LpLightbox--EwvQGe-.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpLogViewer.vue.js

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

package/dist/components/LpMediaGallery.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpMediaGallery-CTejKF2-.js";
+import { _ as _sfc_main } from "../chunks/LpMediaGallery-DlYJf3DS.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModal.vue.js

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

package/dist/components/LpModalNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModalNav-DVXAF-DG.js";
+import { _ as _sfc_main } from "../chunks/LpModalNav-Cj02cfhL.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNotificationBell.vue.js

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

package/dist/components/LpNotificationFeed.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNotificationFeed-CMGYU8c-.js";
+import { _ as _sfc_main } from "../chunks/LpNotificationFeed-BoovbtfL.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpPageScrollbar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPageScrollbar-C9sTeU-2.js";
+import { _ as _sfc_main } from "../chunks/LpPageScrollbar-BniFeL2U.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpPaletteTheme.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPaletteTheme-CLwO-SDf.js";
+import { _ as _sfc_main } from "../chunks/LpPaletteTheme-_FwkJO2o.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpPasswordInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPasswordInput-LPVI7D3v.js";
+import { _ as _sfc_main } from "../chunks/LpPasswordInput-BBDz2zyU.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpPie.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPie-CsiBXe-e.js";
+import { _ as _sfc_main } from "../chunks/LpPie-CtC4XdhC.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpPipeline.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPipeline-DVcoSs--.js";
+import { _ as _sfc_main } from "../chunks/LpPipeline-aCALaUY8.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpRelativeTime.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpRelativeTime-CN5bWD73.js";
+import { _ as _sfc_main } from "../chunks/LpRelativeTime-9MHlbq6F.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpScrollArea.vue.js

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

package/dist/components/LpSecretField.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSecretField-BwrZ4TfT.js";
+import { _ as _sfc_main } from "../chunks/LpSecretField-C9vwMFQ6.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpShortcutsDialog.vue.js

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, createTextVNode, createCommentVNode, createVNode } from "vue";
 import LpKeys from "./LpKeys.vue.js";
-import { _ as _sfc_main$1 } from "../chunks/LpModal-D1E7rQzw.js";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-COMHrBKL.js";
 import { mergeShortcutGroups, activeShortcuts, useHotkeys } from "../composables/useHotkeys.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";

package/dist/components/LpSidebar.vue.js

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

package/dist/components/LpSidebarNav.vue.js

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

package/dist/components/LpTable.vue.js

@@ -1,7 +1,7 @@
 import { defineComponent, computed, useAttrs, ref, shallowRef, watch, onMounted, useSlots, onBeforeUnmount, useId, h, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, renderSlot, createCommentVNode, createBlock, createTextVNode, toDisplayString, Fragment, renderList, createElementVNode, Transition, mergeProps, normalizeStyle, withModifiers, TransitionGroup, unref, nextTick } from "vue";
 import { usePaletteScope, suppressPaletteDiscovery, usePaletteCommands } from "../composables/usePaletteCommands.js";
 import { menuPaletteCommands } from "./commandPalette.js";
-import { _ as _sfc_main$1 } from "../chunks/LpDataList-B56Gu6Yt.js";
+import { _ as _sfc_main$1 } from "../chunks/LpDataList-Cit9fOSp.js";
 import { _ as _sfc_main$d } from "../chunks/LpCheckbox-C9VnPIQf.js";
 import { _ as _sfc_main$c } from "../chunks/LpContextMenu-DEFirphS.js";
 import { _ as _sfc_main$g } from "../chunks/LpEditable-DfRUAGkA.js";
@@ -11,7 +11,7 @@ import { _ as _sfc_main$5 } from "../chunks/LpIcon-CxHFPwKt.js";
 import { _ as _sfc_main$e } from "../chunks/LpSkeleton-leTl53V9.js";
 import { _ as _sfc_main$h } from "../chunks/LpPagination-DGLntZJN.js";
 import { _ as _sfc_main$6 } from "../chunks/LpPopover-w2rr4x7n.js";
-import { _ as _sfc_main$b } from "../chunks/LpScrollArea-CqvwfZs2.js";
+import { _ as _sfc_main$b } from "../chunks/LpScrollArea-B_1KZOSS.js";
 import { _ as _sfc_main$9 } from "../chunks/LpRollingText-B54Pje7P.js";
 import { _ as _sfc_main$2 } from "../chunks/LpShift-DAgS_d2x.js";
 import { _ as _sfc_main$7 } from "../chunks/LpTableFilter-CILHffC1.js";
@@ -25,16 +25,17 @@ import { usePaintSelect } from "../composables/usePaintSelect.js";
 import { useRovingFocus } from "../composables/useRovingFocus.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useResizeObserver } from "../composables/useResizeObserver.js";
-import { orderPinned, pinOffsets, groupRows, rowWindow, presetHidden, sortByKeys, nextSorts, clampColumnWidth } from "./tableFeatures.js";
+import { orderPinned, pinOffsets, groupRows, rowWindow, rowChanges, presetHidden, sortByKeys, nextSorts, clampColumnWidth } from "./tableFeatures.js";
 import { devWarn } from "../composables/devWarn.js";
 import { startPointerDrag } from "../composables/pointerDrag.js";
-import { isHTMLElement, nodeWindow } from "../composables/realm.js";
+import { nodeWindow, isHTMLElement } from "../composables/realm.js";
+import { prefersReducedMotion } from "../composables/easing.js";
 import { _ as _sfc_main$4 } from "../chunks/LpButton-BvVoF-PO.js";
 import { toCsv, downloadFile, fileStem } from "./exportData.js";
 import { toHiddenSets, sameHidden, summarizeShown, parseTableState, mergeRestored, serializeTableState, fromHiddenSets } from "./tableFilter.js";
 import { resolveRowMenu } from "./tableRowMenu.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-DxnthVz4.css';const _hoisted_1 = {
+import '../assets/LpTable-BJjNEvgJ.css';const _hoisted_1 = {
   key: 0,
   class: "flex min-h-8 flex-wrap items-center gap-x-3 gap-y-2 pb-3 text-xs"
 };
@@ -1044,6 +1045,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emit("rowClick", row);
       }
     });
+    const ROW_MOTION_LIMIT = 12;
+    const rowsEl = shallowRef(null);
+    function setRowsEl(el) {
+      const node = el?.$el ?? null;
+      rowsEl.value = node;
+      roving.setContainer(node);
+    }
+    const motionIds = computed(() => (headerless.value ? allEntries.value : viewEntries.value).map((entry) => entry.id));
+    let shownIds = [];
+    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;
+        settleFlip = !settleFlip;
+        body.dataset.lpSettle = settleFlip ? "a" : "b";
+      },
+      { flush: "post", immediate: true }
+    );
     function onRowKeydown(event) {
       if (event.key === " " && props.selectable && roving.activeId.value) {
         event.preventDefault();
@@ -1437,10 +1461,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       createVNode(TransitionGroup, {
                         tag: "tbody",
                         name: "lp-row",
-                        css: animating.value && !__props.virtualRowHeight,
+                        css: animating.value && !__props.virtualRowHeight && !bigSwap.value,
+                        "move-class": bigSwap.value ? "lp-row-still" : void 0,
                         class: normalizeClass(busy.value && displayRows.value.length ? "opacity-60 transition-opacity" : "transition-opacity"),
                         "aria-busy": busy.value || void 0,
-                        ref: (el) => unref(roving).setContainer(el?.$el ?? null)
+                        ref: setRowsEl
                       }, {
                         default: withCtx(() => [
                           displayRows.value.length === 0 && busy.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.skeletonRows, (n) => {
@@ -1647,7 +1672,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           ])) : createCommentVNode("", true)
                         ]),
                         _: 3
-                      }, 8, ["css", "class", "aria-busy"])
+                      }, 8, ["css", "move-class", "class", "aria-busy"])
                     ], 14, _hoisted_11)
                   ]),
                   _: 3
@@ -1669,7 +1694,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: activeLayout.value,
                   tag: "div",
                   name: "lp-row",
-                  css: animating.value
+                  css: animating.value && !bigSwap.value,
+                  "move-class": bigSwap.value ? "lp-row-still" : void 0
                 }, scrollAttrs.value, {
                   class: ["min-h-0 transition-opacity", [
                     busy.value && displayRows.value.length ? "opacity-60" : "",
@@ -1677,7 +1703,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ]],
                   style: activeLayout.value === "cards" ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(${__props.cardWidth}, 100%), 1fr))` } : void 0,
                   "aria-busy": busy.value || void 0,
-                  ref: (el) => unref(roving).setContainer(el?.$el ?? null)
+                  ref: setRowsEl
                 }), {
                   default: withCtx(() => [
                     displayRows.value.length === 0 && busy.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.skeletonRows, (n) => {
@@ -1896,7 +1922,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     }), 128))
                   ]),
                   _: 3
-                }, 16, ["css", "class", "style", "aria-busy"]))
+                }, 16, ["css", "move-class", "class", "style", "aria-busy"]))
               ]),
               _: 3
             }, 8, ["items", "no-hint", "title", "subtitle", "title-icon", "title-image"]))
@@ -1915,7 +1941,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a346ca36"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a366adee"]]);
 export {
   LpTable as default
 };

package/dist/components/LpTabs.vue.js

@@ -1,8 +1,9 @@
-import { defineComponent, computed, ref, watch, nextTick, useId, openBlock, createBlock, unref, withCtx, resolveDynamicComponent, mergeProps, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from "vue";
+import { defineComponent, computed, ref, watch, nextTick, onMounted, useId, openBlock, createBlock, unref, withCtx, resolveDynamicComponent, mergeProps, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from "vue";
 import { isHTMLElement } from "../composables/realm.js";
 import { usePaletteScope, usePaletteCommands } from "../composables/usePaletteCommands.js";
 import { Motion } from "motion-v";
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "reka-ui";
+import { useResizeObserver } from "../composables/useResizeObserver.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { useStepHistory } from "../composables/useOverlayHistory.js";
 import { _ as _sfc_main$2 } from "../chunks/LpContextMenu-DEFirphS.js";
@@ -11,7 +12,7 @@ import { _ as _sfc_main$3 } from "../chunks/LpTabFace-uoZgD_SN.js";
 import { _ as _sfc_main$1 } from "../chunks/LpScrollStrip-D4tsOfAQ.js";
 import { pickTab, BOTTOM_BAR, BOTTOM_ITEM, BOTTOM_MARKER } from "./tabs.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTabs-D7EyG21l.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/LpTabs-7yQjX2ih.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTabs",
   props: {
     modelValue: {},
@@ -47,9 +48,13 @@ import '../assets/LpTabs-D7EyG21l.css';const _sfc_main = /* @__PURE__ */ defineC
     const strip = ref(null);
     const Passthrough = (_, { slots }) => slots.default?.();
     const list = ref(null);
-    watch(current, () => {
-      void nextTick(() => strip.value?.reveal(list.value?.$el?.querySelector('[data-state="active"]')));
-    });
+    function revealActive(smooth) {
+      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));
     function holdMousePick(event) {
       if (event.button !== 0 || event.ctrlKey || bottom.value) return;
       if (!isHTMLElement(event.target) || !event.target.closest('[role="tab"]')) return;
@@ -224,7 +229,7 @@ import '../assets/LpTabs-D7EyG21l.css';const _sfc_main = /* @__PURE__ */ defineC
     };
   }
 });
-const LpTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43a45129"]]);
+const LpTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-60b1eda3"]]);
 export {
   LpTabs as default
 };

package/dist/components/LpThemeStudio.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeStudio-BPPctXgd.js";
+import { _ as _sfc_main } from "../chunks/LpThemeStudio-yiEdFJQL.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpThemeSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-B3c44xFH.js";
+import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-DKkCFaFk.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpToaster.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpToaster-Cdx1tnHB.js";
+import { _ as _sfc_main } from "../chunks/LpToaster-C7hHkGOA.js";
 export {
   _sfc_main as default
 };

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

@@ -46,11 +46,11 @@ type __VLS_Props = {
      */
     touch?: "hold" | "none";
 };
-declare var __VLS_24: {}, __VLS_41: {};
+declare var __VLS_9: {}, __VLS_50: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_24) => any;
+    default?: (props: typeof __VLS_9) => any;
 } & {
-    content?: (props: typeof __VLS_41) => any;
+    content?: (props: typeof __VLS_50) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     touch: "hold" | "none";

package/dist/components/LpTooltip.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTooltip-BKde8Xjv.js";
+import { _ as _sfc_main } from "../chunks/LpTooltip-Bt1ZFViJ.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTruncate.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTruncate-C_C8eiIE.js";
+import { _ as _sfc_main } from "../chunks/LpTruncate-DEHWL1OA.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpUptimeBar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpUptimeBar-Dt6SY_-m.js";
+import { _ as _sfc_main } from "../chunks/LpUptimeBar-CXgzU5ym.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpWorkspaceSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpWorkspaceSwitcher-DCIiOQt_.js";
+import { _ as _sfc_main } from "../chunks/LpWorkspaceSwitcher-CrUVSI7x.js";
 export {
   _sfc_main as default
 };

package/dist/components/RevealToggle.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/RevealToggle-BsYxY6Oz.js";
+import { _ as _sfc_main } from "../chunks/RevealToggle-D9Vs88kM.js";
 export {
   _sfc_main as default
 };

package/dist/components/tableFeatures.d.ts

@@ -65,3 +65,4 @@ export declare function presetHidden(preset: Pick<ColumnPreset, "columns">, colu
  * - `list`: one compact line per row with no header, for narrow places.
  */
 export type TableLayout = "table" | "cards" | "list";
+export declare function rowChanges(before: readonly string[], after: readonly string[]): number;

package/dist/components/tableFeatures.js

@@ -74,6 +74,30 @@ function presetHidden(preset, columns) {
   const hidden = columns.filter((c) => !c.alwaysVisible && !shown.has(c.key)).map((c) => c.key);
   return hidden.length === columns.length ? /* @__PURE__ */ new Set() : new Set(hidden);
 }
+function rowChanges(before, after) {
+  const old = /* @__PURE__ */ new Map();
+  before.forEach((id, i) => old.set(id, i));
+  let entered = 0;
+  const kept = [];
+  for (const id of after) {
+    const at = old.get(id);
+    if (at === void 0) entered++;
+    else kept.push(at);
+  }
+  const left = before.length - kept.length;
+  const tails = [];
+  for (const at of kept) {
+    let lo = 0;
+    let hi = tails.length;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (tails[mid] < at) lo = mid + 1;
+      else hi = mid;
+    }
+    tails[lo] = at;
+  }
+  return entered + left + (kept.length - tails.length);
+}
 export {
   MIN_COLUMN_PX,
   clampColumnWidth,
@@ -82,6 +106,7 @@ export {
   orderPinned,
   pinOffsets,
   presetHidden,
+  rowChanges,
   rowWindow,
   sortByKeys
 };

package/dist/composables/useShift.js

@@ -1,6 +1,23 @@
 import { ref, watch, toValue, onBeforeUnmount, nextTick } from "vue";
 import { nodeWindow, isElement } from "./realm.js";
 import { prefersReducedMotion } from "./easing.js";
+const firstReads = /* @__PURE__ */ new Map();
+function firstRead(win, pass) {
+  let queue = firstReads.get(win);
+  if (!queue) {
+    const batch2 = /* @__PURE__ */ new Set();
+    queue = batch2;
+    firstReads.set(win, batch2);
+    win.requestAnimationFrame(() => {
+      firstReads.delete(win);
+      for (const p of batch2) p.read();
+      for (const p of batch2) p.write();
+    });
+  }
+  queue.add(pass);
+  const batch = queue;
+  return () => batch.delete(pass);
+}
 const TWEEN_MS = 160;
 const RETARGET_AFTER_MS = 40;
 function useShift(options = {}) {
@@ -9,7 +26,7 @@ function useShift(options = {}) {
   const resizing = ref(false);
   let ro;
   let mo;
-  let raf = 0;
+  let cancelFirstRead;
   let settleTimer;
   let lastHeight = 0;
   let lastWidth = 0;
@@ -95,7 +112,8 @@ function useShift(options = {}) {
     mo?.disconnect();
     ro = void 0;
     mo = void 0;
-    cancelAnimationFrame(raf);
+    cancelFirstRead?.();
+    cancelFirstRead = void 0;
     clearTimeout(settleTimer);
     tweening.value = false;
     resizing.value = false;
@@ -109,17 +127,16 @@ function useShift(options = {}) {
     ([node, enabled]) => {
       teardown();
       if (!enabled || !node) return;
-      lastHeight = node.offsetHeight;
-      lastWidth = node.offsetWidth;
-      laidOut = node.getClientRects().length > 0;
       scrollHost = node;
       node.addEventListener("scroll", rememberScroll, { capture: true, passive: true });
-      if (wantsHeight()) node.style.height = `${lastHeight}px`;
-      if (wantsWidth()) node.style.width = `${lastWidth}px`;
-      raf = requestAnimationFrame(() => {
-        tweening.value = true;
-        if (wantsHeight()) node.style.height = "";
-        if (wantsWidth()) node.style.width = "";
+      cancelFirstRead = firstRead(nodeWindow(node), {
+        read: () => {
+          if (inFlight) return;
+          lastHeight = node.offsetHeight;
+          lastWidth = node.offsetWidth;
+          laidOut = node.getClientRects().length > 0;
+        },
+        write: () => tweening.value = true
       });
       const watchChildren = () => {
         if (!ro) return;