@leavepulse/ui 0.95.1 → 0.96.0

package/src/components/LpShift.vue

@@ -24,9 +24,14 @@
  *
  * The mechanism — measure the natural size, pin it in pixels, tween — lives in
  * `useShift`, and LpModal drives its panel with the same composable.
+ *
+ * Whether a tween is holding the box (`resizing`) is read through a ref to the
+ * component (`defineExpose`), not from the slot: a slot prop is read by this
+ * component's render, which would render the whole content again at both ends
+ * of every tween. See docs/migrations/lpshift-resizing-slot.md.
  */
 import { isElement, isHTMLElement, nodeWindow } from "../composables/useView"
-import { computed, onBeforeUnmount, watch } from "vue"
+import { computed, onBeforeUnmount, onUpdated, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
 import { useShift, type ShiftAxis } from "../composables/useShift"
 
@@ -289,6 +294,48 @@ onBeforeUnmount(() => {
   clearTimeout(rememberTimer)
 })
 
+/*
+ * The tween's classes go onto the box from here, not from the template. A
+ * render that read `tweening` or `resizing` would run again at the start and
+ * the end of every tween, and the slot runs inside that render: the whole
+ * content re-rendered twice per resize for two classes on one element. A
+ * table's sixty rows were each rendered again, and TransitionGroup measured
+ * every one of them again, for nothing in the rows having changed.
+ *
+ * Applied after every render too: a class bound by the parent replaces the
+ * element's whole class attribute when it changes, and these are put back.
+ */
+const shiftClasses = computed(() => {
+  const on = [
+    tweening.value && !props.disabled
+      ? `${transitionClass.value} duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none`
+      : "",
+    resizing.value ? "overflow-hidden" : "",
+    // While the box holds a width its content has outgrown, a flex row would
+    // squeeze its children to fit (a button's keys folding into a column)
+    // instead of letting the easing edge clip them.
+    resizing.value && props.axis !== "height" ? "[&>*]:shrink-0" : "",
+    resizing.value && props.anchor === "end" ? "justify-end" : "",
+  ]
+  return on.join(" ").split(" ").filter(Boolean)
+})
+let applied: readonly string[] = []
+function applyShiftClasses() {
+  const box = el.value
+  if (!box) return
+  const next = shiftClasses.value
+  for (const name of applied) if (!next.includes(name)) box.classList.remove(name)
+  for (const name of next) box.classList.add(name)
+  applied = next
+}
+watch(shiftClasses, applyShiftClasses, { flush: "post" })
+onUpdated(() => {
+  // The parent's class binding may have rewritten the attribute: what was
+  // applied is gone from the element, so all of it goes back on.
+  applied = []
+  applyShiftClasses()
+})
+
 defineExpose({ resizing })
 </script>
 
@@ -297,21 +344,9 @@ defineExpose({ resizing })
        smaller than the content it already holds, and without the clip that
        content spills past the easing edge. Dropped once settled, so nothing
        that legitimately overflows — a dropdown, a focus ring — is clipped at
-       rest. -->
-  <div
-    ref="el"
-    :class="[
-      tweening && !disabled
-        ? `${transitionClass} duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none`
-        : '',
-      resizing ? 'overflow-hidden' : '',
-      // While the box holds a width its content has outgrown, a flex row would
-      // squeeze its children to fit (a button's keys folding into a column)
-      // instead of letting the easing edge clip them.
-      resizing && axis !== 'height' ? '[&>*]:shrink-0' : '',
-      resizing && anchor === 'end' ? 'justify-end' : '',
-    ]"
-  >
-    <slot :resizing="resizing" />
+       rest. The classes are put on in script (`applyShiftClasses`), so a
+       tween starting or ending never renders the content again. -->
+  <div ref="el">
+    <slot />
   </div>
 </template>

package/src/components/LpTable.vue

@@ -1736,6 +1736,17 @@ const motionIds = computed(() => (headerless.value ? allEntries.value : viewEntr
 let shownIds: readonly string[] = []
 const bigSwap = computed(() => rowChanges(shownIds, motionIds.value) > ROW_MOTION_LIMIT)
 let settleFlip = false
+/*
+ * Whether the rows carry their own enter, leave and move transitions, read by
+ * the templates through these two computeds and never as `animating` itself:
+ * the motion window closing flips `animating` 600 ms after every change, and
+ * a template reading it re-renders the whole table for it. TransitionGroup then
+ * measures every row again (it records positions on each render), sixty forced
+ * reads for a switch that, after a big swap, was off already. A computed whose
+ * value does not change does not re-render anything.
+ */
+const rowMotion = computed(() => animating.value && !props.virtualRowHeight && !bigSwap.value)
+const cardMotion = computed(() => animating.value && !bigSwap.value)
 watch(
   motionIds,
   (ids) => {
@@ -2131,7 +2142,7 @@ usePaletteCommands(() => {
       <TransitionGroup
         tag="tbody"
         name="lp-row"
-        :css="animating && !virtualRowHeight && !bigSwap"
+        :css="rowMotion"
         :move-class="bigSwap ? 'lp-row-still' : undefined"
         :class="busy && displayRows.length ? 'opacity-60 transition-opacity' : 'transition-opacity'"
         :aria-busy="busy || undefined"
@@ -2296,7 +2307,7 @@ usePaletteCommands(() => {
       :key="activeLayout"
       tag="div"
       name="lp-row"
-      :css="animating && !bigSwap"
+      :css="cardMotion"
       :move-class="bigSwap ? 'lp-row-still' : undefined"
       v-bind="scrollAttrs"
       class="min-h-0 transition-opacity"

package/src/composables/useAppUpdate.ts

@@ -1,4 +1,5 @@
 import { onScopeDispose, readonly, ref, type Ref } from "vue"
+import { prefersReducedMotion } from "./easing"
 
 /*
  * A new build is out and every open tab should run it, without anyone losing
@@ -20,6 +21,10 @@ import { onScopeDispose, readonly, ref, type Ref } from "vue"
  * window scroll position, and anything the app already keeps in storage, such
  * as form drafts. After the reload `restored` is true for the app to say
  * "updated" if it wants to.
+ *
+ * A visible reload does not blink: the page fades out before it and fades back
+ * in after it, so the swap reads as one change rather than a flash of blank.
+ * Under reduced motion, and in a hidden tab, it simply reloads.
  */
 
 export interface AppUpdateOptions {
@@ -51,6 +56,8 @@ export interface AppUpdate {
 const OVERLAY = '[role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"], [data-state="open"][data-side]'
 const INPUT_EVENTS = ["pointerdown", "keydown", "wheel", "touchstart", "input"] as const
 const CARRY_MS = 60_000
+const FADE_OUT_MS = 220
+const FADE_IN_MS = 320
 
 interface Carried {
   href: string
@@ -94,6 +101,9 @@ export function useAppUpdate(options: AppUpdateOptions): AppUpdate {
   const carried = readCarried(key)
   if (carried && carried.href === location.href && Date.now() - carried.at < CARRY_MS) {
     restored.value = true
+    if (!prefersReducedMotion()) {
+      document.documentElement.animate([{ opacity: 0 }, { opacity: 1 }], { duration: FADE_IN_MS, easing: "cubic-bezier(0.2, 0, 0, 1)" })
+    }
     const top = carried.top
     const restore = () => window.scrollTo({ top, behavior: "instant" })
     requestAnimationFrame(() => requestAnimationFrame(restore))
@@ -106,7 +116,12 @@ export function useAppUpdate(options: AppUpdateOptions): AppUpdate {
     } catch {
       // Storage off: the reload still happens, only the scroll is lost.
     }
-    location.reload()
+    if (document.hidden || prefersReducedMotion()) {
+      location.reload()
+      return
+    }
+    const fade = document.documentElement.animate([{ opacity: 1 }, { opacity: 0 }], { duration: FADE_OUT_MS, easing: "ease-in", fill: "forwards" })
+    fade.finished.then(() => location.reload(), () => location.reload())
   }
 
   function safe(): boolean {