@leavepulse/ui 0.68.0 → 0.70.0

package/dist/components/typewriter.d.ts

@@ -0,0 +1,36 @@
+import type { Random } from "./scramble";
+export interface TypewriterState {
+    /** The string being shown. */
+    index: number;
+    /** How many of its characters are shown. */
+    length: number;
+    phase: "typing" | "holding" | "erasing" | "done";
+    /** The string to type once erasing has gone far enough. */
+    to: number;
+}
+export interface TypewriterOptions {
+    /** Ms per typed character, before variance. */
+    speed: number;
+    /** Ms per erased character. Erasing is steady: nobody holds backspace unevenly. */
+    eraseSpeed: number;
+    /** Ms a finished string stays before it is erased. */
+    hold: number;
+    /** Start over after the last string instead of stopping on it. */
+    loop: boolean;
+}
+export interface TypewriterStep {
+    state: TypewriterState;
+    /** Ms until the next call. Infinity: nothing more to do. */
+    wait: number;
+    /** Set when this step finished typing a string: its index. */
+    typed?: number;
+}
+export declare const typewriterStart: () => TypewriterState;
+/**
+ * A keystroke's delay: the base speed with some unevenness, and a pause after
+ * punctuation, which is where a person typing actually stops.
+ */
+export declare function keystrokeDelay(char: string, speed: number, random: Random): number;
+/** Characters two strings share at the start: erasing stops there and typing goes on from it. */
+export declare function sharedPrefix(a: string[], b: string[]): number;
+export declare function typewriterNext(state: TypewriterState, strings: string[][], options: TypewriterOptions, random?: Random): TypewriterStep;

package/dist/components/typewriter.js

@@ -0,0 +1,53 @@
+const typewriterStart = () => ({ index: 0, length: 0, phase: "typing", to: 0 });
+function keystrokeDelay(char, speed, random) {
+  const jitter = speed * (0.55 + 0.9 * random());
+  if (/[.!?…]/.test(char)) return jitter + speed * 5;
+  if (/[,;:]/.test(char)) return jitter + speed * 2.5;
+  return jitter;
+}
+function sharedPrefix(a, b) {
+  let n = 0;
+  while (n < a.length && n < b.length && a[n] === b[n]) n++;
+  return n;
+}
+function typewriterNext(state, strings, options, random = Math.random) {
+  const count = strings.length;
+  if (!count) return { state: { ...state, phase: "done" }, wait: Infinity };
+  const current = strings[state.index] ?? [];
+  switch (state.phase) {
+    case "typing": {
+      if (state.length >= current.length) return finish(state, count, options);
+      const length = state.length + 1;
+      const next = { ...state, length };
+      if (length < current.length) return { state: next, wait: keystrokeDelay(current[length - 1], options.speed, random) };
+      return finish(next, count, options);
+    }
+    case "holding": {
+      const to = (state.index + 1) % count;
+      return erase({ ...state, phase: "erasing", to }, strings, options);
+    }
+    case "erasing":
+      return erase(state, strings, options);
+    case "done":
+      return { state, wait: Infinity };
+  }
+}
+function finish(state, count, options) {
+  const last = state.index === count - 1;
+  if (last && !options.loop) return { state: { ...state, phase: "done" }, wait: Infinity, typed: state.index };
+  return { state: { ...state, phase: "holding" }, wait: options.hold, typed: state.index };
+}
+function erase(state, strings, options) {
+  const keep = sharedPrefix(strings[state.index] ?? [], strings[state.to] ?? []);
+  if (state.length > keep) {
+    const length = state.length - 1;
+    return { state: { ...state, length }, wait: length > keep ? options.eraseSpeed : options.speed * 4 };
+  }
+  return { state: { index: state.to, length: state.length, phase: "typing", to: state.to }, wait: 0 };
+}
+export {
+  keystrokeDelay,
+  sharedPrefix,
+  typewriterNext,
+  typewriterStart
+};

package/dist/components/videoBackdrop.js

@@ -1,3 +1,4 @@
+import { splitTime } from "./timeSpan.js";
 function planLoop(duration, options = {}) {
   if (!Number.isFinite(duration) || duration <= 0) return { from: 0, to: 0, fade: 0 };
   const clamp = (value) => Math.min(duration, Math.max(0, value));
@@ -23,12 +24,10 @@ function isNativeLoop(plan, duration) {
   return plan.fade === 0 && plan.from === 0 && plan.to >= duration;
 }
 function formatClipTime(seconds, precise = false) {
-  const safe = Math.max(0, Number.isFinite(seconds) ? seconds : 0);
-  const minutes = Math.floor(safe / 60);
-  const rest = safe - minutes * 60;
-  const whole = Math.floor(rest);
-  const tenth = Math.floor((rest - whole) * 10);
-  const secs = String(whole).padStart(2, "0");
+  const t = splitTime(Number.isFinite(seconds) ? seconds * 1e3 : 0);
+  const minutes = (t.days * 24 + t.hours) * 60 + t.minutes;
+  const secs = String(t.seconds).padStart(2, "0");
+  const tenth = Math.floor(t.ms / 100);
   return precise && tenth ? `${minutes}:${secs}.${tenth}` : `${minutes}:${secs}`;
 }
 export {

package/dist/composables/easing.d.ts

@@ -7,7 +7,7 @@
  *
  * A plain function, not a reactive composable: it is read at the moment an
  * animation starts, and a component that also needs to RE-RENDER when the
- * setting changes mid-session should use motion-v's `useReducedMotion`.
+ * setting changes mid-session should use `usePrefersReducedMotion`.
  */
 export declare const prefersReducedMotion: () => boolean;
 /**
@@ -50,3 +50,24 @@ export declare const easeOut: (t: number) => number;
  * the tail short.
  */
 export declare const easeTravel: (t: number) => number;
+/**
+ * A cubic-bezier as a function of time, solved per call.
+ *
+ * The curves above are hand-shaped stand-ins for tokens a component reaches for
+ * by feel. A tween that has to match a CSS transition running beside it (a
+ * slice's arc easing while its colour and lift move on `--ease-emphasized`)
+ * needs the token's actual curve, and a theme may retune it — so this reads the
+ * four numbers and solves for them rather than approximating one fixed shape.
+ *
+ * Newton's method on x(s) = t, falling back to bisection where the slope is
+ * too flat to step on; a handful of iterations is far below a pixel.
+ */
+export declare const cubicBezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => number;
+/**
+ * An easing token as a function, for a value tweened in script.
+ *
+ * Anything the token does not spell as a `cubic-bezier()` (a keyword, a
+ * `linear()` list) falls back to `easeOut`, which has the same "arrives and
+ * settles" intent as every curve the kit defines.
+ */
+export declare const tokenEase: (name: "ease-emphasized" | "ease-travel" | "ease-settle") => ((t: number) => number);

package/dist/composables/easing.js

@@ -21,10 +21,51 @@ const easeTravel = (t) => {
   const head = EDGE * EDGE / (2 * EDGE) + EDGE * 0.1;
   return head + (t - EDGE) / (1 - 2 * EDGE) * (1 - 2 * head);
 };
+const cubicBezier = (x1, y1, x2, y2) => {
+  const cx = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx;
+  const ax = 1 - cx - bx;
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  const x = (s) => ((ax * s + bx) * s + cx) * s;
+  const y = (s) => ((ay * s + by) * s + cy) * s;
+  const dx = (s) => (3 * ax * s + 2 * bx) * s + cx;
+  return (t) => {
+    if (t <= 0) return 0;
+    if (t >= 1) return 1;
+    let s = t;
+    for (let i = 0; i < 6; i++) {
+      const err = x(s) - t;
+      if (Math.abs(err) < 1e-5) return y(s);
+      const slope = dx(s);
+      if (Math.abs(slope) < 1e-6) break;
+      s -= err / slope;
+    }
+    let lo = 0;
+    let hi = 1;
+    s = t;
+    for (let i = 0; i < 20; i++) {
+      const v = x(s);
+      if (Math.abs(v - t) < 1e-5) break;
+      if (v < t) lo = s;
+      else hi = s;
+      s = (lo + hi) / 2;
+    }
+    return y(s);
+  };
+};
+const tokenEase = (name) => {
+  const match = /cubic-bezier\(([^)]+)\)/.exec(easingToken(name));
+  const n = match?.[1].split(",").map((p) => Number.parseFloat(p));
+  return n && n.length === 4 && n.every(Number.isFinite) ? cubicBezier(n[0], n[1], n[2], n[3]) : easeOut;
+};
 export {
+  cubicBezier,
   durationToken,
   easeOut,
   easeTravel,
   easingToken,
-  prefersReducedMotion
+  prefersReducedMotion,
+  tokenEase
 };

package/dist/composables/pseudoLocale.d.ts

@@ -0,0 +1,15 @@
+export interface PseudoOptions {
+    /**
+     * Extra length as a share of the text's letters: 0.35 adds about a third.
+     * Spread over the vowels, so the text grows the way a longer word does
+     * rather than gaining a tail that wraps somewhere convenient.
+     */
+    expand?: number;
+    /**
+     * Markers around the whole string. `true` uses square brackets, a pair of
+     * strings picks others, `false` drops them.
+     */
+    brackets?: boolean | readonly [string, string];
+}
+/** English text made to look translated and longer; see the module comment. */
+export declare function pseudoLocalize(text: string, options?: PseudoOptions): string;

package/dist/composables/pseudoLocale.js

@@ -0,0 +1,96 @@
+const ACCENTED = {
+  a: "å",
+  b: "ƀ",
+  c: "ç",
+  d: "ð",
+  e: "é",
+  f: "ƒ",
+  g: "ĝ",
+  h: "ĥ",
+  i: "î",
+  j: "ĵ",
+  k: "ķ",
+  l: "ļ",
+  m: "ɱ",
+  n: "ñ",
+  o: "ö",
+  p: "þ",
+  q: "ǫ",
+  r: "ŕ",
+  s: "š",
+  t: "ţ",
+  u: "û",
+  v: "ṽ",
+  w: "ŵ",
+  x: "ẋ",
+  y: "ý",
+  z: "ž",
+  A: "Å",
+  B: "Ɓ",
+  C: "Ç",
+  D: "Ð",
+  E: "É",
+  F: "Ƒ",
+  G: "Ĝ",
+  H: "Ĥ",
+  I: "Î",
+  J: "Ĵ",
+  K: "Ķ",
+  L: "Ļ",
+  M: "Ṁ",
+  N: "Ñ",
+  O: "Ö",
+  P: "Þ",
+  Q: "Ǫ",
+  R: "Ŕ",
+  S: "Š",
+  T: "Ţ",
+  U: "Û",
+  V: "Ṽ",
+  W: "Ŵ",
+  X: "Ẋ",
+  Y: "Ý",
+  Z: "Ž"
+};
+const VOWEL = /[aeiouyAEIOUY]/;
+const PROTECTED = /\{\{[^}]*\}\}|\{[^{}]*\}|%(?:\d+\$)?[-+ 0#]*\d*(?:\.\d+)?[sdifoxXeEgGc%]|<[^>]+>|&[a-zA-Z#0-9]+;/g;
+function pseudoLocalize(text, options = {}) {
+  if (!text.trim()) return text;
+  const expand = Math.max(0, options.expand ?? 0.35);
+  const brackets = options.brackets ?? true;
+  const [open, close] = brackets === true ? ["[", "]"] : brackets === false ? ["", ""] : brackets;
+  const runs = [];
+  let last = 0;
+  for (const match of text.matchAll(PROTECTED)) {
+    const at = match.index ?? 0;
+    if (at > last) runs.push({ text: text.slice(last, at), code: false });
+    runs.push({ text: match[0], code: true });
+    last = at + match[0].length;
+  }
+  if (last < text.length) runs.push({ text: text.slice(last), code: false });
+  const letters = runs.reduce((n, run) => run.code ? n : n + (run.text.match(/[a-zA-Z]/g)?.length ?? 0), 0);
+  const vowels = runs.reduce((n, run) => run.code ? n : n + (run.text.match(/[aeiouyAEIOUY]/g)?.length ?? 0), 0);
+  let extra = Math.round(letters * expand);
+  const per = vowels ? Math.floor(extra / vowels) : 0;
+  let rest = vowels ? extra % vowels : 0;
+  if (vowels) extra = 0;
+  const out = runs.map((run) => {
+    if (run.code) return run.text;
+    let s = "";
+    for (const ch of run.text) {
+      const mapped = ACCENTED[ch] ?? ch;
+      s += mapped;
+      if (VOWEL.test(ch)) {
+        const times = per + (rest > 0 ? 1 : 0);
+        if (rest > 0) rest--;
+        s += mapped.toLowerCase().repeat(times);
+      }
+    }
+    return s;
+  }).join("");
+  const tail = extra > 0 ? "·".repeat(extra) : "";
+  return `${open}${out}${tail}${close}`;
+}
+export {
+  pseudoLocalize
+};

package/dist/composables/scroll.js

@@ -1,7 +1,7 @@
 const SCROLLS = /(auto|scroll|overlay)/;
 function scrollParent(el, { axis = "y", self = false } = {}) {
   for (let node = self ? el : el?.parentElement; node; node = node.parentElement) {
-    if (node === document.body || node === document.documentElement) return null;
+    if (node === node.ownerDocument.body || node === node.ownerDocument.documentElement) return null;
     const style = getComputedStyle(node);
     const y = axis !== "x" && SCROLLS.test(style.overflowY) && node.scrollHeight > node.clientHeight;
     const x = axis !== "y" && SCROLLS.test(style.overflowX) && node.scrollWidth > node.clientWidth;
@@ -11,9 +11,11 @@ function scrollParent(el, { axis = "y", self = false } = {}) {
 }
 function scrollToElement(el, { block = "nearest", behavior = "auto", margin = 0 } = {}) {
   if (!el) return;
-  const box = scrollParent(el) ?? document.scrollingElement;
+  const doc = el.ownerDocument;
+  const win = doc.defaultView ?? window;
+  const box = scrollParent(el) ?? doc.scrollingElement;
   if (!box) return;
-  const outer = box === document.scrollingElement ? new DOMRect(0, 0, window.innerWidth, window.innerHeight) : box.getBoundingClientRect();
+  const outer = box === doc.scrollingElement ? new DOMRect(0, 0, win.innerWidth, win.innerHeight) : box.getBoundingClientRect();
   const inner = el.getBoundingClientRect();
   const top = inner.top - outer.top + box.scrollTop;
   let target = box.scrollTop;

package/dist/composables/useClipboard.d.ts

@@ -26,8 +26,11 @@ export interface UseClipboard {
      * Writes `text` to the clipboard. Resolves true on success, false when the
      * clipboard was unavailable or refused — it never rejects, so `await copy(x)`
      * is safe to call bare from an event handler.
+     *
+     * A `Blob` is written as itself under its own type (an image as a PNG blob),
+     * for "copy image" next to "copy link".
      */
-    copy: (text: string, options?: CopyOptions) => Promise<boolean>;
+    copy: (data: string | Blob, options?: CopyOptions) => Promise<boolean>;
 }
 /**
  * Clipboard writes with optional toast feedback.

package/dist/composables/useClipboard.js

@@ -34,15 +34,25 @@ function writeLegacy(text) {
   active?.focus?.({ preventScroll: true });
   return ok;
 }
+async function writeBlob(blob) {
+  if (typeof navigator === "undefined" || !navigator.clipboard?.write || typeof ClipboardItem === "undefined") return false;
+  try {
+    await navigator.clipboard.write([new ClipboardItem({ [blob.type || "image/png"]: blob })]);
+    return true;
+  } catch {
+    return false;
+  }
+}
 const COPIED_MS = 1400;
 function useClipboard() {
   const copied = ref(false);
   const { success, error } = useToast();
   let timer;
-  async function copy(text, options = {}) {
+  async function copy(data, options = {}) {
     const { toast = false, errorToast = false } = options;
     try {
-      if (!await writeAsync(text) && !writeLegacy(text)) throw new Error("clipboard unavailable");
+      const written = typeof data === "string" ? await writeAsync(data) || writeLegacy(data) : await writeBlob(data);
+      if (!written) throw new Error("clipboard unavailable");
       copied.value = true;
       clearTimeout(timer);
       timer = setTimeout(() => copied.value = false, COPIED_MS);

package/dist/composables/useField.d.ts

@@ -36,3 +36,11 @@ export interface FieldControlState {
 export declare function useFieldControl(own: () => FieldControlState): ComputedRef<Omit<FieldContext, "id"> & {
     id?: string;
 }>;
+/**
+ * Whether a focusout leaves the whole control, not just moves between its own
+ * parts (a trigger and a clear button, the segments of a time field, an input
+ * and its stepper). Composite controls emit their `blur` only then: focus
+ * events do not bubble, so a consumer's `@blur` on the wrapper never fired, and
+ * `useForm().field()` could not mark such a field touched.
+ */
+export declare function focusLeft(event: FocusEvent): boolean;

package/dist/composables/useField.js

@@ -36,9 +36,14 @@ function useFieldControl(own) {
     };
   });
 }
+function focusLeft(event) {
+  const next = event.relatedTarget;
+  return !(next instanceof Node && event.currentTarget?.contains(next));
+}
 export {
   LP_FIELD,
   fieldMessageId,
+  focusLeft,
   provideField,
   useField,
   useFieldControl

package/dist/composables/useForm.js

@@ -30,6 +30,7 @@ function useForm(options) {
   const submitting = ref(false);
   const submitCount = ref(0);
   const runs = /* @__PURE__ */ new Map();
+  const fromForm = /* @__PURE__ */ new Map();
   const baseVersion = ref(0);
   const keys = () => Object.keys(plain());
   const dirty = computed(() => {
@@ -64,11 +65,15 @@ function useForm(options) {
     runs.set("form", run);
     const found = await options.validate(plain()) ?? {};
     if (runs.get("form") !== run) return true;
+    for (const [name, text] of fromForm) if (errors[name] === text) delete errors[name];
+    fromForm.clear();
     let ok = true;
     for (const [name, text] of Object.entries(found)) {
       if (!text) continue;
       ok = false;
-      if (!errors[name]) errors[name] = text;
+      if (errors[name]) continue;
+      errors[name] = text;
+      fromForm.set(name, text);
     }
     return ok;
   }
@@ -76,7 +81,6 @@ function useForm(options) {
     validating.value = true;
     try {
       if (name !== void 0) return await runField(name);
-      if (errors.form) delete errors.form;
       const fields = await Promise.all(keys().map(runField));
       const form = await runForm();
       return fields.every(Boolean) && form && !Object.values(external).some(Boolean);
@@ -99,6 +103,7 @@ function useForm(options) {
     for (const k of Object.keys(external)) delete external[k];
     for (const k of Object.keys(touched)) delete touched[k];
     runs.clear();
+    fromForm.clear();
     submitCount.value = 0;
   }
   function adopt(next) {
@@ -125,17 +130,23 @@ function useForm(options) {
     },
     { deep: true }
   );
+  async function recheck(names) {
+    await Promise.all(names.map((name) => validate(name)));
+    if (fromForm.size || submitCount.value) await runForm();
+  }
   let snapshot = clone(plain());
   watch(
     plain,
     () => {
       const now = clone(plain());
+      const changed = [];
       for (const name of Object.keys(now)) {
         if (deepEqual(now[name], snapshot[name])) continue;
         if (external[name]) delete external[name];
-        if (touched[name] || submitCount.value) void validate(name);
+        if (touched[name] || submitCount.value) changed.push(name);
       }
       snapshot = now;
+      if (changed.length) void recheck(changed);
     },
     { deep: true }
   );
@@ -168,8 +179,11 @@ function useForm(options) {
       try {
         submitCount.value++;
         for (const name of keys()) touched[name] = true;
-        if (!await validate()) return;
-        const submitted = clone(plain());
+        let submitted;
+        do {
+          submitted = clone(plain());
+          if (!await validate()) return;
+        } while (!deepEqual(plain(), submitted));
         await fn(submitted);
         if (deepEqual(plain(), submitted)) {
           baseline = submitted;

package/dist/composables/useHintSystem.d.ts

@@ -130,6 +130,8 @@ export interface HintTiming {
     freshLimit: number;
     nudgeAgain: number;
     flush: number;
+    /** How long a news item opened from a feed waits for its page and feature, ms. */
+    newsWait: number;
 }
 export interface HintSystemOptions {
     features: Record<string, HintFeature>;
@@ -284,6 +286,8 @@ export declare function createHintSystem(options: HintSystemOptions): {
     markIntent(): void;
     unreadNews: (page?: string) => HintNews[];
     readNews: (page: string) => void;
+    /** Open one news item from a feed: mark it read and show its feature once the app is on its page. */
+    showNews: (id: string) => void;
     pageTitle: (page: string) => string;
     readFresh(id: string): void;
     tourShown(index: number): void;

package/dist/composables/useHintSystem.js

@@ -101,7 +101,8 @@ const DEFAULT_TIMING = {
   offersMax: 2,
   freshLimit: 3,
   nudgeAgain: 7 * DAY,
-  flush: 2e3
+  flush: 2e3,
+  newsWait: 8e3
 };
 function localHintStorage(key = "lp-hints") {
   const read = () => {
@@ -284,6 +285,35 @@ function createHintSystem(options) {
   function readNews(page) {
     for (const n of unread(page)) record(newsKey(n.id), { state: "explained" });
   }
+  let pendingNews = null;
+  function showNews(id) {
+    const item = news.find((n) => n.id === id);
+    if (!item) return;
+    record(newsKey(item.id), { state: "explained" });
+    const feature = item.feature;
+    if (!feature) return;
+    pendingNews?.();
+    let done = false;
+    let stopWatch;
+    const finish = () => {
+      done = true;
+      clearTimeout(timer);
+      stopWatch?.();
+      if (pendingNews === finish) pendingNews = null;
+    };
+    const timer = setTimeout(finish, timing.newsWait);
+    pendingNews = finish;
+    stopWatch = watch(
+      () => state.page === item.page && showable(feature) && !state.tour.open,
+      (ready) => {
+        if (!ready || done) return;
+        finish();
+        startTour(item.page, [feature]);
+      },
+      { immediate: true }
+    );
+    if (done) stopWatch();
+  }
   function considerOffer() {
     const page = state.page;
     const ready = state.loaded && !state.tour.open && !state.offer && !anyModalOpen() && !typing() && Date.now() - state.settledAt > timing.settle;
@@ -416,6 +446,8 @@ function createHintSystem(options) {
     },
     unreadNews: (page) => unread(page),
     readNews,
+    /** Open one news item from a feed: mark it read and show its feature once the app is on its page. */
+    showNews,
     pageTitle: (page) => pages[page]?.title ?? page,
     readFresh(id) {
       record(featureKey(id), { state: "explained" });

package/dist/composables/useHints.js

@@ -76,14 +76,20 @@ function detach(el) {
   else mounted.delete(id);
   idOf.delete(el);
 }
+function mark(el, id) {
+  if (!id) return;
+  if (el.closest("[data-lp-hint-example]")) el.dataset.lpHintPart = id;
+  else attach(el, id);
+}
 const vHint = {
   mounted(el, binding) {
-    if (binding.value) attach(el, binding.value);
+    mark(el, binding.value);
   },
   updated(el, binding) {
-    if (binding.value === idOf.get(el)) return;
+    if (binding.value === (idOf.get(el) ?? el.dataset.lpHintPart)) return;
     detach(el);
-    if (binding.value) attach(el, binding.value);
+    delete el.dataset.lpHintPart;
+    mark(el, binding.value);
   },
   beforeUnmount(el) {
     detach(el);

package/dist/composables/useInView.d.ts

@@ -0,0 +1,11 @@
+import { type Ref } from "vue";
+export interface UseInView {
+    /** Attach to the element to watch. */
+    el: Ref<Element | null>;
+    /** On screen and the page visible. */
+    inView: Ref<boolean>;
+}
+export declare function useInView(options?: {
+    rootMargin?: string;
+    threshold?: number;
+}): UseInView;

package/dist/composables/useInView.js

@@ -0,0 +1,39 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+function useInView(options = {}) {
+  const el = ref(null);
+  const intersecting = ref(typeof IntersectionObserver === "undefined");
+  const pageVisible = ref(typeof document === "undefined" || document.visibilityState === "visible");
+  const inView = ref(false);
+  let observer = null;
+  const sync = () => inView.value = intersecting.value && pageVisible.value;
+  const onVisibility = () => {
+    pageVisible.value = document.visibilityState === "visible";
+    sync();
+  };
+  if (typeof document !== "undefined") document.addEventListener("visibilitychange", onVisibility);
+  watch(
+    el,
+    (node) => {
+      observer?.disconnect();
+      observer = null;
+      if (!node || typeof IntersectionObserver === "undefined") return sync();
+      observer = new IntersectionObserver(
+        (entries) => {
+          intersecting.value = entries.some((entry) => entry.isIntersecting);
+          sync();
+        },
+        { rootMargin: options.rootMargin ?? "0px", threshold: options.threshold ?? 0 }
+      );
+      observer.observe(node);
+    },
+    { immediate: true, flush: "post" }
+  );
+  onBeforeUnmount(() => {
+    observer?.disconnect();
+    if (typeof document !== "undefined") document.removeEventListener("visibilitychange", onVisibility);
+  });
+  return { el, inView };
+}
+export {
+  useInView
+};

package/dist/composables/useLoadingGate.d.ts

@@ -0,0 +1,8 @@
+import { type MaybeRefOrGetter, type Ref } from "vue";
+export interface LoadingGateOptions {
+    /** Ms of loading before the indicator appears. */
+    delay?: MaybeRefOrGetter<number>;
+    /** Ms the indicator stays once shown, even if loading ends sooner. */
+    minVisible?: MaybeRefOrGetter<number>;
+}
+export declare function useLoadingGate(active: MaybeRefOrGetter<boolean>, options?: LoadingGateOptions): Ref<boolean>;