@leavepulse/ui 0.95.0 → 0.95.2

package/dist/composables/useAppUpdate.js

@@ -1,7 +1,10 @@
 import { ref, onScopeDispose, readonly } from "vue";
+import { prefersReducedMotion } from "./easing.js";
 const OVERLAY = '[role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"], [data-state="open"][data-side]';
 const INPUT_EVENTS = ["pointerdown", "keydown", "wheel", "touchstart", "input"];
 const CARRY_MS = 6e4;
+const FADE_OUT_MS = 220;
+const FADE_IN_MS = 320;
 function editableFocused() {
   const el = document.activeElement;
   if (!(el instanceof HTMLElement)) return false;
@@ -34,6 +37,9 @@ function useAppUpdate(options) {
   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));
@@ -44,7 +50,12 @@ function useAppUpdate(options) {
       sessionStorage.setItem(key, JSON.stringify({ href: location.href, top: window.scrollY, at: Date.now() }));
     } catch {
     }
-    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() {
     if (document.hidden) return true;

package/dist/index.d.ts

@@ -196,6 +196,8 @@ export type { SortState, TableColumn, TableListMode, TablePage, TableQuery } fro
 export type { TableLabels } from "./components/LpTable.vue";
 export type { TableCellEdit, TableExportOptions, TableSelectionToken } from "./components/LpTable.vue";
 export type { ColumnPin, ColumnPreset, TableLayout } from "./components/tableFeatures";
+export { rowWindow } from "./components/tableFeatures";
+export type { RowWindow } from "./components/tableFeatures";
 export { compareValues } from "./components/tableSort";
 export { filterRows, showOnly, shownValues } from "./components/tableFilter";
 export type { TableFilters } from "./components/tableFilter";

package/dist/index.js

@@ -112,6 +112,7 @@ import { _ as _76 } from "./chunks/LpStat-SyVb5JXm.js";
 import { _ as _77 } from "./chunks/LpStepper-DBNRA6Q2.js";
 import { _ as _78 } from "./chunks/LpSwitch-D-mcaA6C.js";
 import { default as default13 } from "./components/LpTable.vue.js";
+import { rowWindow } from "./components/tableFeatures.js";
 import { compareValues } from "./components/tableSort.js";
 import { filterRows, showOnly, shownValues } from "./components/tableFilter.js";
 import { useTableFilterChoice } from "./composables/useTableFilterChoice.js";
@@ -1245,6 +1246,7 @@ export {
   rgbToHsv,
   ringWindow,
   rose,
+  rowWindow,
   rubberBand,
   rubberClamp,
   runningHintSystem,

package/package.json

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

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 {

package/src/index.ts

@@ -272,6 +272,8 @@ export type { SortState, TableColumn, TableListMode, TablePage, TableQuery } fro
 export type { TableLabels } from "./components/LpTable.vue"
 export type { TableCellEdit, TableExportOptions, TableSelectionToken } from "./components/LpTable.vue"
 export type { ColumnPin, ColumnPreset, TableLayout } from "./components/tableFeatures"
+export { rowWindow } from "./components/tableFeatures"
+export type { RowWindow } from "./components/tableFeatures"
 export { compareValues } from "./components/tableSort"
 export { filterRows, showOnly, shownValues } from "./components/tableFilter"
 export type { TableFilters } from "./components/tableFilter"