@leavepulse/ui 0.96.2 → 0.96.3

package/dist/chunks/{LpHints-wsawHZCP.js → LpHints-lGLsGxOx.js}

@@ -4,7 +4,7 @@ import { useAppleKeyboard, appleModifierLabel } from "../composables/useHotkeys.
 import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$3 } from "./LpActionBar-DuwBawji.js";
 import { _ as _sfc_main$2 } from "./LpHintLayer-rD3BTMfK.js";
-import { _ as _sfc_main$1 } from "./LpTour-iZNl_vdy.js";
+import { _ as _sfc_main$1 } from "./LpTour-DUzpkD8W.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpHints",
   props: {

package/dist/chunks/{LpTour-iZNl_vdy.js → LpTour-DUzpkD8W.js}

@@ -149,6 +149,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       clearTimeout(glide);
       glide = window.setTimeout(() => gliding.value = false, durationToken("duration-medium", void 0, doc()) + 40);
     }
+    let shownRaw = void 0;
     function measure() {
       viewport.value = { width: win().innerWidth, height: win().innerHeight };
       const el = target.value;
@@ -156,7 +157,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         box.value = null;
         return;
       }
-      if (!el.isConnected) return;
+      if (!el.isConnected) {
+        const again = resolve(shownRaw);
+        glideTo(again && again.getClientRects().length ? again : null);
+        return;
+      }
       const r = el.getBoundingClientRect();
       const prev = box.value;
       if (!prev || prev.x !== r.x || prev.y !== r.y || prev.width !== r.width || prev.height !== r.height) {
@@ -193,6 +198,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       const el = current.enter || sampled.value ? await waitFor(raw, mine) : resolve(raw);
       if (mine !== token) return;
+      shownRaw = raw;
       if (!el || !el.getClientRects().length) return skip();
       await settled(el);
       if (mine !== token) return;

package/dist/components/LpHints.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpHints-wsawHZCP.js";
+import { _ as _sfc_main } from "../chunks/LpHints-lGLsGxOx.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTour.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTour-iZNl_vdy.js";
+import { _ as _sfc_main } from "../chunks/LpTour-DUzpkD8W.js";
 export {
   _sfc_main as default
 };

package/dist/composables/scroll.d.ts

@@ -12,7 +12,12 @@ export declare function scrollParent(el: Element | null | undefined, { axis, sel
  */
 export declare function atScrollEnd(el: Element | null | undefined, slack?: number): boolean;
 export interface ScrollToElementOptions {
-    /** `nearest` scrolls only when the element is out of view. */
+    /**
+     * `nearest` scrolls only when the element is out of view. An element taller
+     * than the scroller is brought in by its start whatever the block: centring
+     * or meeting its far edge would show its middle or end, and a list that
+     * loads more at its end would start loading.
+     */
     block?: "nearest" | "center" | "start";
     behavior?: ScrollBehavior;
     /** Room kept between the element and the scroller's edge. */

package/dist/composables/scroll.js

@@ -35,8 +35,10 @@ function scrollToElement(el, { block = "nearest", behavior = "auto", margin = 0,
   const lo = x ? inner.left - outer.left : inner.top - outer.top;
   const hi = x ? inner.right - outer.right : inner.bottom - outer.bottom;
   const at = lo + from;
+  const fits = size + 2 * margin <= view;
   let target = from;
   if (block === "start") target = at - margin;
+  else if (!fits) target = lo < margin || lo > view - margin || block === "center" ? at - margin : from;
   else if (block === "center") target = at - (view - size) / 2;
   else if (lo < margin) target = at - margin;
   else if (hi > -margin) target = at - view + size + margin;

package/dist/index.js

@@ -127,10 +127,10 @@ import { _ as _83 } from "./chunks/LpThemeSwitcher-CnkIH76z.js";
 import { _ as _84 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _85 } from "./chunks/LpToaster-CGHXxCie.js";
 import { _ as _86 } from "./chunks/LpTooltip-CzIfznts.js";
-import { _ as _87 } from "./chunks/LpTour-iZNl_vdy.js";
+import { _ as _87 } from "./chunks/LpTour-DUzpkD8W.js";
 import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
 import { _ as _88 } from "./chunks/LpHintLayer-rD3BTMfK.js";
-import { _ as _89 } from "./chunks/LpHints-wsawHZCP.js";
+import { _ as _89 } from "./chunks/LpHints-lGLsGxOx.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, dropzoneTip, hintKey, hintSummary, hotkeyTip, localHintStorage, noteDropzone, noteHotkeyTarget, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
 import { _ as _90 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
 import { _ as _91 } from "./chunks/LpTopologyCanvas-DKn0Xcz4.js";

package/package.json

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

package/src/components/LpTour.vue

@@ -256,6 +256,11 @@ function glideTo(el: Element | null) {
   glide = window.setTimeout(() => (gliding.value = false), durationToken("duration-medium", undefined, doc()) + 40)
 }
 
+// What the shown step points at, kept to find it again: a list that re-renders
+// replaces the element, and a card anchored to the old one would hang over
+// nothing (or nowhere) with the page dimmed under it.
+let shownRaw: TourStep["target"] = undefined
+
 function measure() {
   viewport.value = { width: win().innerWidth, height: win().innerHeight }
   const el = target.value
@@ -263,7 +268,11 @@ function measure() {
     box.value = null
     return
   }
-  if (!el.isConnected) return
+  if (!el.isConnected) {
+    const again = resolve(shownRaw)
+    glideTo(again && again.getClientRects().length ? again : null)
+    return
+  }
   const r = el.getBoundingClientRect()
   const prev = box.value
   if (!prev || prev.x !== r.x || prev.y !== r.y || prev.width !== r.width || prev.height !== r.height) {
@@ -302,6 +311,7 @@ async function show(): Promise<void> {
   }
   const el = current.enter || sampled.value ? await waitFor(raw, mine) : resolve(raw)
   if (mine !== token) return
+  shownRaw = raw
   if (!el || !el.getClientRects().length) return skip()
   await settled(el)
   if (mine !== token) return

package/src/composables/scroll.ts

@@ -40,7 +40,12 @@ export function atScrollEnd(el: Element | null | undefined, slack = 2): boolean
 }
 
 export interface ScrollToElementOptions {
-  /** `nearest` scrolls only when the element is out of view. */
+  /**
+   * `nearest` scrolls only when the element is out of view. An element taller
+   * than the scroller is brought in by its start whatever the block: centring
+   * or meeting its far edge would show its middle or end, and a list that
+   * loads more at its end would start loading.
+   */
   block?: "nearest" | "center" | "start"
   behavior?: ScrollBehavior
   /** Room kept between the element and the scroller's edge. */
@@ -76,8 +81,10 @@ export function scrollToElement(
   const lo = x ? inner.left - outer.left : inner.top - outer.top
   const hi = x ? inner.right - outer.right : inner.bottom - outer.bottom
   const at = lo + from
+  const fits = size + 2 * margin <= view
   let target = from
   if (block === "start") target = at - margin
+  else if (!fits) target = lo < margin || lo > view - margin || block === "center" ? at - margin : from
   else if (block === "center") target = at - (view - size) / 2
   else if (lo < margin) target = at - margin
   else if (hi > -margin) target = at - view + size + margin