@leavepulse/ui 0.69.0 → 0.70.1

package/dist/components/tone.js

@@ -0,0 +1,82 @@
+const TONE_ALIASES = {
+  neutral: "neutral",
+  muted: "neutral",
+  brand: "brand",
+  info: "brand",
+  success: "success",
+  ok: "success",
+  action: "success",
+  warning: "warning",
+  accent: "warning",
+  danger: "danger",
+  error: "danger"
+};
+const TONES = {
+  neutral: {
+    color: "var(--color-muted)",
+    soft: "var(--color-surface-soft)",
+    text: "text-muted",
+    bg: "bg-muted",
+    softBg: "bg-surface-soft",
+    chip: "bg-surface-soft text-muted-strong",
+    border: "border-line-strong",
+    panel: "border-line bg-surface-soft",
+    selection: "selection:bg-muted/40"
+  },
+  brand: {
+    color: "var(--color-brand)",
+    soft: "var(--color-brand-soft)",
+    text: "text-brand",
+    bg: "bg-brand",
+    softBg: "bg-brand-soft",
+    chip: "bg-brand-soft text-[color-mix(in_oklab,var(--color-brand)_60%,var(--color-ink))]",
+    border: "border-brand",
+    panel: "border-brand/30 bg-brand/10",
+    selection: "selection:bg-brand/40"
+  },
+  success: {
+    color: "var(--color-action)",
+    soft: "var(--color-action-soft)",
+    text: "text-action",
+    bg: "bg-action",
+    softBg: "bg-action-soft",
+    chip: "bg-action-soft text-[color-mix(in_oklab,var(--color-action)_60%,var(--color-ink))]",
+    border: "border-action",
+    panel: "border-action/30 bg-action/10",
+    selection: "selection:bg-action/40"
+  },
+  warning: {
+    color: "var(--color-accent)",
+    soft: "var(--color-accent-soft)",
+    text: "text-accent",
+    bg: "bg-accent",
+    softBg: "bg-accent-soft",
+    chip: "bg-accent-soft text-[color-mix(in_oklab,var(--color-accent)_60%,var(--color-ink))]",
+    border: "border-accent",
+    panel: "border-accent/30 bg-accent/10",
+    selection: "selection:bg-accent/40"
+  },
+  danger: {
+    color: "var(--color-danger)",
+    soft: "var(--color-danger-soft)",
+    text: "text-danger",
+    bg: "bg-danger",
+    softBg: "bg-danger-soft",
+    chip: "bg-danger-soft text-[color-mix(in_oklab,var(--color-danger)_60%,var(--color-ink))]",
+    border: "border-danger",
+    panel: "border-danger/30 bg-danger/10",
+    selection: "selection:bg-danger/40"
+  }
+};
+function toneOf(name, fallback = "neutral") {
+  return name && TONE_ALIASES[name] || fallback;
+}
+function toneLook(name, fallback = "neutral") {
+  return TONES[toneOf(name, fallback)];
+}
+export {
+  TONES,
+  TONE_ALIASES,
+  toneLook,
+  toneOf
+};

package/dist/components/tour.js

@@ -48,8 +48,9 @@ function openContextMenu(el) {
   );
   return () => {
     const outside = { bubbles: true, cancelable: true, clientX: 0, clientY: 0 };
-    document.body.dispatchEvent(new PointerEvent("pointerdown", outside));
-    document.body.dispatchEvent(new PointerEvent("pointerup", outside));
+    const body = el.ownerDocument.body;
+    body.dispatchEvent(new PointerEvent("pointerdown", outside));
+    body.dispatchEvent(new PointerEvent("pointerup", outside));
   };
 }
 export {

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,16 @@ 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;
+/** Trigger and portalled content share a boundary for the control's public blur. */
+export declare function useFieldBlur(blur: (event: FocusEvent) => void): {
+    partId: string;
+    onFocusOut: (event: FocusEvent) => void;
+};

package/dist/composables/useField.js

@@ -1,4 +1,4 @@
-import { useId, computed, provide, inject } from "vue";
+import { useId, computed, provide, onScopeDispose, inject } from "vue";
 const LP_FIELD = /* @__PURE__ */ Symbol.for("lp-field");
 function provideField(context) {
   provide(LP_FIELD, context);
@@ -36,10 +36,35 @@ function useFieldControl(own) {
     };
   });
 }
+function focusLeft(event) {
+  const next = event.relatedTarget;
+  return !(next instanceof Node && event.currentTarget?.contains(next));
+}
+function useFieldBlur(blur) {
+  const partId = `lp-field-${useId()}`;
+  let cancelPending;
+  const inside = (target) => !!target?.closest?.(`[data-lp-field-part="${partId}"]`);
+  function onFocusOut(event) {
+    cancelPending?.();
+    if (inside(event.relatedTarget)) return;
+    if (event.relatedTarget) return blur(event);
+    const doc = event.target.ownerDocument;
+    const view = doc.defaultView;
+    const frame = view.requestAnimationFrame(() => {
+      cancelPending = void 0;
+      if (!inside(doc.activeElement)) blur(event);
+    });
+    cancelPending = () => view.cancelAnimationFrame(frame);
+  }
+  onScopeDispose(() => cancelPending?.());
+  return { partId, onFocusOut };
+}
 export {
   LP_FIELD,
   fieldMessageId,
+  focusLeft,
   provideField,
   useField,
+  useFieldBlur,
   useFieldControl
 };

package/dist/composables/useForm.js

@@ -30,6 +30,8 @@ function useForm(options) {
   const submitting = ref(false);
   const submitCount = ref(0);
   const runs = /* @__PURE__ */ new Map();
+  let validationEpoch = 0;
+  const fromForm = /* @__PURE__ */ new Map();
   const baseVersion = ref(0);
   const keys = () => Object.keys(plain());
   const dirty = computed(() => {
@@ -50,7 +52,7 @@ function useForm(options) {
     return void 0;
   }
   async function runField(name) {
-    const run = (runs.get(name) ?? 0) + 1;
+    const run = /* @__PURE__ */ Symbol();
     runs.set(name, run);
     const found = await checkField(name);
     if (runs.get(name) !== run) return !errors[name];
@@ -60,26 +62,34 @@ function useForm(options) {
   }
   async function runForm() {
     if (!options.validate) return true;
-    const run = (runs.get("form") ?? 0) + 1;
+    const run = /* @__PURE__ */ Symbol();
     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;
   }
   async function validate(name) {
+    const epoch = validationEpoch;
     validating.value = true;
     try {
-      if (name !== void 0) return await runField(name);
-      if (errors.form) delete errors.form;
+      if (name !== void 0) {
+        const valid2 = await runField(name);
+        return epoch === validationEpoch && valid2;
+      }
       const fields = await Promise.all(keys().map(runField));
+      if (epoch !== validationEpoch) return false;
       const form = await runForm();
-      return fields.every(Boolean) && form && !Object.values(external).some(Boolean);
+      return epoch === validationEpoch && fields.every(Boolean) && form && !Object.values(external).some(Boolean);
     } finally {
       validating.value = false;
     }
@@ -95,10 +105,12 @@ function useForm(options) {
     for (const [k, v] of Object.entries(next)) set(k, v);
   }
   function clearState() {
+    validationEpoch++;
     for (const k of Object.keys(errors)) delete errors[k];
     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 +137,25 @@ function useForm(options) {
     },
     { deep: true }
   );
+  async function recheck(names) {
+    const epoch = validationEpoch;
+    await Promise.all(names.map((name) => validate(name)));
+    if (epoch !== validationEpoch) return;
+    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 +188,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/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;