@leavepulse/ui 0.69.0 → 0.70.1

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>;

package/dist/composables/useLoadingGate.js

@@ -0,0 +1,38 @@
+import { ref, watch, toValue, onScopeDispose } from "vue";
+function useLoadingGate(active, options = {}) {
+  const shown = ref(false);
+  let shownAt = 0;
+  let timer;
+  const clear = () => {
+    if (timer !== void 0) clearTimeout(timer);
+    timer = void 0;
+  };
+  const show = () => {
+    clear();
+    shown.value = true;
+    shownAt = Date.now();
+  };
+  const settle = (on) => {
+    clear();
+    if (on) {
+      if (shown.value) return;
+      const wait = Math.max(0, toValue(options.delay) ?? 0);
+      if (wait === 0) show();
+      else timer = setTimeout(show, wait);
+      return;
+    }
+    if (!shown.value) return;
+    const left = Math.max(0, toValue(options.minVisible) ?? 0) - (Date.now() - shownAt);
+    if (left <= 0) shown.value = false;
+    else timer = setTimeout(() => {
+      timer = void 0;
+      shown.value = false;
+    }, left);
+  };
+  watch(() => !!toValue(active), settle, { immediate: true });
+  onScopeDispose(clear);
+  return shown;
+}
+export {
+  useLoadingGate
+};

package/dist/composables/useLpConfig.d.ts

@@ -1,4 +1,5 @@
 import { type App, type Component, type ComputedRef, type InjectionKey, type MaybeRefOrGetter } from "vue";
+import { type PseudoOptions } from "./pseudoLocale";
 export type LabelScope = Record<string, string>;
 export interface LpConfig {
     /** Component rendered for internal links (RouterLink, NuxtLink). Plain `<a>` when unset. */
@@ -11,6 +12,15 @@ export interface LpConfig {
      * desktop shell can hand in its own store. See `usePersisted`.
      */
     storage?: KitStorage;
+    /**
+     * Show every kit label pseudo-localised ("Next" → "[Ñééẋţ]"): accented,
+     * about a third longer, and bracketed. A development switch for checking a
+     * screen before any translation exists: plain English left on it is text
+     * that never went through the labels, and anything clipped or overflowing
+     * will be in a real language too. `true` uses the defaults; an object tunes
+     * them (see `pseudoLocalize`).
+     */
+    pseudoLocale?: boolean | PseudoOptions;
 }
 /**
  * Synchronous key/value store, the shape of `localStorage`. Synchronous on

package/dist/composables/useLpConfig.js

@@ -1,4 +1,5 @@
 import { computed, inject, toValue, provide } from "vue";
+import { pseudoLocalize } from "./pseudoLocale.js";
 const LP_CONFIG = /* @__PURE__ */ Symbol.for("lp-config");
 function provideLpConfig(config) {
   provide(LP_CONFIG, layered(inject(LP_CONFIG, {}), config));
@@ -24,6 +25,7 @@ function mergeConfig(outer, inner) {
     ...inner,
     linkComponent: inner.linkComponent ?? outer.linkComponent,
     storage: inner.storage ?? outer.storage,
+    pseudoLocale: inner.pseudoLocale ?? outer.pseudoLocale,
     labels
   };
 }
@@ -33,7 +35,15 @@ function useLpConfig() {
 }
 function useLabels(scope, defaults, own) {
   const config = useLpConfig();
-  return computed(() => ({ ...defaults, ...config.value.labels?.[scope], ...own?.() }));
+  return computed(() => {
+    const labels = { ...defaults, ...config.value.labels?.[scope], ...own?.() };
+    const pseudo = config.value.pseudoLocale;
+    if (!pseudo) return labels;
+    const options = pseudo === true ? void 0 : pseudo;
+    return Object.fromEntries(
+      Object.entries(labels).map(([key, text]) => [key, typeof text === "string" ? pseudoLocalize(text, options) : text])
+    );
+  });
 }
 function useLinkComponent() {
   const config = useLpConfig();

package/dist/composables/useMediaQuery.js

@@ -1,12 +1,14 @@
 import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useView, viewWindow } from "./useView.js";
 function useMediaQuery(query) {
+  const view = useView();
   const matches = ref(false);
   let list;
   const update = () => {
     matches.value = !!list?.matches;
   };
   onMounted(() => {
-    list = window.matchMedia?.(query);
+    list = viewWindow(view.value).matchMedia?.(query);
     update();
     list?.addEventListener("change", update);
   });

package/dist/composables/useNow.d.ts

@@ -0,0 +1,16 @@
+import { type MaybeRefOrGetter, type Ref } from "vue";
+export interface UseNowOptions {
+    /**
+     * Ms from `now` until the next tick. Defaults to the next wall-clock
+     * second, which is when an elapsed "1m 12s" changes.
+     */
+    nextIn?: (now: number) => number;
+    /**
+     * Re-read the clock and reschedule whenever this changes. For a `nextIn`
+     * that depends on more than the time: a relative date that was "last month"
+     * sleeps an hour, and if it is replaced by a date a few seconds old, the
+     * wait it scheduled for the old one would leave "now" on screen for an hour.
+     */
+    restartOn?: MaybeRefOrGetter<unknown>;
+}
+export declare function useNow(active?: MaybeRefOrGetter<boolean>, options?: UseNowOptions): Ref<number>;

package/dist/composables/useNow.js

@@ -0,0 +1,39 @@
+import { ref, watch, toValue, onScopeDispose } from "vue";
+function useNow(active = true, options = {}) {
+  const now = ref(Date.now());
+  let timer;
+  const hasDocument = typeof document !== "undefined";
+  const stop = () => {
+    if (timer !== void 0) clearTimeout(timer);
+    timer = void 0;
+  };
+  const delay = (at) => {
+    const next = options.nextIn ? options.nextIn(at) : 1e3 - at % 1e3;
+    return Math.max(16, Number.isFinite(next) ? next : 1e3);
+  };
+  const tick = () => {
+    stop();
+    now.value = Date.now();
+    if (!toValue(active) || hasDocument && document.hidden) return;
+    timer = setTimeout(tick, delay(now.value) + 4);
+  };
+  const onVisibility = () => {
+    if (document.hidden) stop();
+    else tick();
+  };
+  watch(() => !!toValue(active), (on) => on ? tick() : stop(), { immediate: true });
+  if (options.restartOn !== void 0) {
+    watch(() => toValue(options.restartOn), () => {
+      if (toValue(active)) tick();
+    });
+  }
+  if (hasDocument) document.addEventListener("visibilitychange", onVisibility);
+  onScopeDispose(() => {
+    stop();
+    if (hasDocument) document.removeEventListener("visibilitychange", onVisibility);
+  });
+  return now;
+}
+export {
+  useNow
+};

package/dist/composables/usePersisted.js

@@ -28,19 +28,26 @@ function useKitStorage() {
 }
 function usePersisted(key, initial, options = {}) {
   const storage = useKitStorage();
-  const value = ref(initial);
-  function read(name) {
-    if (!name) return;
+  const pristine = initial === void 0 ? void 0 : JSON.stringify(initial);
+  const fresh = () => pristine === void 0 ? initial : JSON.parse(pristine);
+  const value = ref(fresh());
+  function stored(name) {
     const raw = storage.get(name);
-    if (raw == null) return;
+    if (raw == null) return { ok: false };
     try {
       const parsed = JSON.parse(raw);
-      if (options.validate && !options.validate(parsed)) return;
-      value.value = parsed;
+      return options.validate && !options.validate(parsed) ? { ok: false } : { ok: true, value: parsed };
     } catch {
+      return { ok: false };
     }
   }
-  watch(() => toValue(key), read, { immediate: true });
+  function read(name, previous) {
+    if (!name) return;
+    const found = stored(name);
+    if (found.ok) value.value = found.value;
+    else if (previous) value.value = fresh();
+  }
+  watch(() => toValue(key), (name, previous) => read(name, previous), { immediate: true });
   watch(
     value,
     (next) => {

package/dist/composables/usePillTransition.d.ts

@@ -5,16 +5,19 @@ export type PillTransition = {
     type: "spring";
     stiffness: number;
     damping: number;
+    mass?: number;
 };
-export type PillFeel = "pill" | "float";
+export type PillFeel = "pill" | "float" | "layout";
 export declare function usePillTransition(feel?: PillFeel): ComputedRef<PillTransition>;
+/** The feels a pointer follower uses; "layout" is a motion-v layout move only. */
+export type StepFeel = Exclude<PillFeel, "layout">;
 export interface SpringState {
     /** Current position; seed it with the start value. */
     value: number;
     /** Current velocity; seed with 0. */
     velocity: number;
 }
-export declare function springStep(state: SpringState, target: number, feel?: PillFeel, 
+export declare function springStep(state: SpringState, target: number, feel?: StepFeel, 
 /** Frame time in seconds; clamped so a backgrounded tab can't explode it. */
 dt?: number): SpringState;
 /** True once a spring is close enough to its target to stop animating. */

package/dist/composables/usePillTransition.js

@@ -1,11 +1,12 @@
-import { useReducedMotion } from "motion-v";
 import { computed } from "vue";
+import { usePrefersReducedMotion } from "./useReducedMotion.js";
 const SPRING = {
   pill: { type: "spring", stiffness: 520, damping: 40 },
-  float: { type: "spring", stiffness: 210, damping: 26 }
+  float: { type: "spring", stiffness: 210, damping: 26 },
+  layout: { type: "spring", stiffness: 520, damping: 42, mass: 0.9 }
 };
 function usePillTransition(feel = "pill") {
-  const reduceMotion = useReducedMotion();
+  const reduceMotion = usePrefersReducedMotion();
   return computed(
     () => reduceMotion.value ? { duration: 0 } : SPRING[feel]
   );

package/dist/composables/usePointerFrame.d.ts

@@ -0,0 +1,18 @@
+import { type MaybeRefOrGetter } from "vue";
+export interface PointerFrameOptions {
+    /** Paint with the latest pointer position, in client coordinates. */
+    paint: (x: number, y: number) => void;
+    /** Drop moves while true; the caller decides what "off" looks like. */
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** Follow touch and pen too, not only a mouse. */
+    anyPointer?: boolean;
+}
+export interface PointerFrame {
+    /** Feed a pointer event. False when it was dropped (touch, reduced motion, disabled). */
+    move: (event: PointerEvent) => boolean;
+    /** Paint at a given position on the next frame, as if the pointer were there (a pointer that left the window). */
+    moveTo: (x: number, y: number) => void;
+    /** Drop a frame that has been asked for but not painted yet. */
+    cancel: () => void;
+}
+export declare function usePointerFrame(options: PointerFrameOptions): PointerFrame;

package/dist/composables/usePointerFrame.js

@@ -0,0 +1,31 @@
+import { onScopeDispose, toValue } from "vue";
+import { prefersReducedMotion } from "./easing.js";
+function usePointerFrame(options) {
+  let frame = 0;
+  let lastX = 0;
+  let lastY = 0;
+  const run = () => {
+    frame = 0;
+    options.paint(lastX, lastY);
+  };
+  const moveTo = (x, y) => {
+    lastX = x;
+    lastY = y;
+    if (!frame) frame = requestAnimationFrame(run);
+  };
+  const move = (event) => {
+    if (!options.anyPointer && event.pointerType !== "mouse") return false;
+    if (toValue(options.disabled) || prefersReducedMotion()) return false;
+    moveTo(event.clientX, event.clientY);
+    return true;
+  };
+  const cancel = () => {
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+  };
+  onScopeDispose(cancel);
+  return { move, moveTo, cancel };
+}
+export {
+  usePointerFrame
+};

package/dist/composables/useReducedMotion.d.ts

@@ -0,0 +1,2 @@
+import type { Ref } from "vue";
+export declare function usePrefersReducedMotion(): Ref<boolean>;

package/dist/composables/useReducedMotion.js

@@ -0,0 +1,7 @@
+import { useMediaQuery } from "./useMediaQuery.js";
+function usePrefersReducedMotion() {
+  return useMediaQuery("(prefers-reduced-motion: reduce)");
+}
+export {
+  usePrefersReducedMotion
+};

package/dist/composables/useRepeater.d.ts

@@ -0,0 +1,17 @@
+export type RepeaterItemKey<T> = keyof T | ((item: T) => string | number);
+/** Keys live beside the model: unsaved rows need identity without adding fields to a DTO. */
+export declare function useRepeater<T extends object>(options: {
+    value: () => T[];
+    set: (items: T[]) => void;
+    createItem: () => T;
+    itemKey: () => RepeaterItemKey<T> | undefined;
+    disabled: () => boolean;
+}): {
+    rows: import("vue").ComputedRef<{
+        item: T;
+        key: string;
+    }[]>;
+    add: () => void;
+    remove: (index: number) => void;
+    update: (index: number, item: T) => void;
+};

package/dist/composables/useRepeater.js

@@ -0,0 +1,31 @@
+import { computed, toRaw } from "vue";
+function useRepeater(options) {
+  const keys = /* @__PURE__ */ new WeakMap();
+  let sequence = 0;
+  function keyFor(item) {
+    const key = options.itemKey();
+    const explicit = typeof key === "function" ? key(item) : key === void 0 ? void 0 : item[key];
+    if (explicit !== void 0 && explicit !== null) return `item:${typeof explicit}:${String(explicit)}`;
+    const raw = toRaw(item);
+    if (!keys.has(raw)) keys.set(raw, `local:${sequence++}`);
+    return keys.get(raw);
+  }
+  const rows = computed(() => options.value().map((item) => ({ item, key: keyFor(item) })));
+  function add() {
+    if (!options.disabled()) options.set([...options.value(), options.createItem()]);
+  }
+  function remove(index) {
+    if (options.disabled() || index < 0 || index >= options.value().length) return;
+    options.set(options.value().filter((_, i) => i !== index));
+  }
+  function update(index, item) {
+    const previous = options.value()[index];
+    if (options.disabled() || previous === void 0) return;
+    keys.set(toRaw(item), keyFor(previous));
+    options.set(options.value().map((value, i) => i === index ? item : value));
+  }
+  return { rows, add, remove, update };
+}
+export {
+  useRepeater
+};

package/dist/composables/useResizeObserver.d.ts

@@ -0,0 +1,8 @@
+import { type MaybeRefOrGetter } from "vue";
+export interface UseResizeObserverOptions extends ResizeObserverOptions {
+    /** Call back once as soon as an element is attached (with no entry), not only on the first report. */
+    immediate?: boolean;
+}
+export declare function useResizeObserver(target: MaybeRefOrGetter<Element | null | undefined>, callback: (entry: ResizeObserverEntry | undefined, el: Element) => void, options?: UseResizeObserverOptions): {
+    stop: () => void;
+};

package/dist/composables/useResizeObserver.js

@@ -0,0 +1,33 @@
+import { watch, toValue, onScopeDispose } from "vue";
+function useResizeObserver(target, callback, options = {}) {
+  const { immediate = false, ...observe } = options;
+  let observer;
+  const disconnect = () => {
+    observer?.disconnect();
+    observer = void 0;
+  };
+  const stopWatch = watch(
+    () => toValue(target),
+    (el) => {
+      disconnect();
+      if (!el) return;
+      if (immediate) callback(void 0, el);
+      if (typeof ResizeObserver === "undefined") return;
+      observer = new ResizeObserver((entries) => {
+        const entry = entries[entries.length - 1];
+        if (entry) callback(entry, el);
+      });
+      observer.observe(el, observe);
+    },
+    { immediate: true, flush: "post" }
+  );
+  const stop = () => {
+    stopWatch();
+    disconnect();
+  };
+  onScopeDispose(stop);
+  return { stop };
+}
+export {
+  useResizeObserver
+};

package/dist/composables/useRevealedValue.d.ts

@@ -0,0 +1,31 @@
+import { type MaybeRefOrGetter, type Ref } from "vue";
+export interface UseRevealedValueOptions {
+    /** Where the number starts while held: 0 for a bar, the floor for a gauge. */
+    from?: MaybeRefOrGetter<number>;
+    /** False shows the value at once, with nothing held. */
+    animateOnMount?: MaybeRefOrGetter<boolean>;
+    /**
+     * Also tween `shown` toward the target over this many ms (eased out), for a
+     * component that draws from one interpolated number. Omitted, `shown` is the
+     * target itself, for a component that animates in CSS or through LpNumberFlow.
+     */
+    duration?: MaybeRefOrGetter<number>;
+    /**
+     * Whether a change that arrives before the reveal waits too (default) or
+     * goes through at once. A meter waits, so its first sweep is still seen;
+     * LpNumberFlow lets it through, because a figure that changes while the user
+     * is on the page is news whether or not it is in view.
+     */
+    holdChanges?: boolean;
+}
+export interface UseRevealedValue {
+    /** Attach to the element whose appearance releases the value. */
+    el: Ref<Element | null>;
+    /** False until that element has been seen. */
+    revealed: Ref<boolean>;
+    /** The value released so far: `from` while held, then the source. */
+    target: Readonly<Ref<number>>;
+    /** What to draw: `target`, tweened when a `duration` is given. */
+    shown: Readonly<Ref<number>>;
+}
+export declare function useRevealedValue(value: () => number, options?: UseRevealedValueOptions): UseRevealedValue;

package/dist/composables/useRevealedValue.js

@@ -0,0 +1,26 @@
+import { ref, toValue, watch, computed } from "vue";
+import { easeOut } from "./easing.js";
+import { useReveal } from "./useReveal.js";
+import { useTween, lerp } from "./useTween.js";
+function useRevealedValue(value, options = {}) {
+  const animate = () => toValue(options.animateOnMount) ?? true;
+  const { el, revealed } = useReveal({ immediate: () => !animate() });
+  const canRelease = () => !animate() || typeof window !== "undefined";
+  const target = ref(animate() ? toValue(options.from) ?? 0 : value());
+  watch(
+    revealed,
+    (seen) => {
+      if (seen && canRelease()) target.value = value();
+    },
+    { immediate: true }
+  );
+  watch(value, (v) => {
+    if (revealed.value || options.holdChanges === false) target.value = v;
+  });
+  const duration = options.duration;
+  const shown = duration === void 0 ? computed(() => target.value) : useTween(() => target.value, lerp, { duration: () => toValue(duration), ease: easeOut });
+  return { el, revealed, target, shown };
+}
+export {
+  useRevealedValue
+};

package/dist/composables/useScramble.d.ts

@@ -0,0 +1,42 @@
+import { type ComputedRef, type MaybeRefOrGetter, type ShallowRef } from "vue";
+import { type Random, type ScrambleFrameCell } from "../components/scramble";
+export interface UseScrambleOptions {
+    /** Travel time in ms. */
+    duration?: MaybeRefOrGetter<number | undefined>;
+    /** See ScrambleOptions.order. */
+    order?: MaybeRefOrGetter<"sequential" | "together" | undefined>;
+    /** Glyph pool. */
+    glyphs?: MaybeRefOrGetter<string | undefined>;
+    /** Characters that never churn. Whitespace by default. */
+    keep?: (char: string) => boolean;
+    /**
+     * How often a churning position draws a new glyph, in ms. Every frame is too
+     * fast to read as anything but noise; ~50 ms looks like a display cycling.
+     */
+    tick?: number;
+    /** Scramble when the source changes. Off: a change lands at once and only `play()` scrambles. */
+    onChange?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * What shows before the first `play()`: the value (`settled`) or a static
+     * mask of glyphs (`masked`), for a value that should decrypt on first sight
+     * rather than flash its plain text first.
+     */
+    start?: "settled" | "masked";
+    /** Inject for reproducible frames (tests, screenshots). */
+    random?: Random;
+    /** Called when a run lands. */
+    onDone?: () => void;
+}
+export interface UseScramble {
+    /** The positions as they are drawn now. */
+    cells: Readonly<ShallowRef<ScrambleFrameCell[]>>;
+    /** The same as one string. */
+    text: ComputedRef<string>;
+    /** A run is in progress. */
+    running: Readonly<ShallowRef<boolean>>;
+    /** Scramble from what is shown now into the source value (into itself when unchanged). */
+    play: () => void;
+    /** Land at once on the source value. */
+    settle: () => void;
+}
+export declare function useScramble(source: MaybeRefOrGetter<string>, options?: UseScrambleOptions): UseScramble;

package/dist/composables/useScramble.js

@@ -0,0 +1,76 @@
+import { toValue, shallowRef, computed, watch, onScopeDispose } from "vue";
+import { scrambleFrame, planScramble, settledCells, SCRAMBLE_GLYPHS } from "../components/scramble.js";
+import { prefersReducedMotion } from "./easing.js";
+function useScramble(source, options = {}) {
+  const random = options.random ?? Math.random;
+  const tick = options.tick ?? 50;
+  const glyphs = () => toValue(options.glyphs) || SCRAMBLE_GLYPHS;
+  const initial = toValue(source);
+  const cells = shallowRef(
+    options.start === "masked" ? scrambleFrame(planScramble(initial, initial, { duration: 1, keep: options.keep }, random), 0, random, glyphs()) : settledCells(initial)
+  );
+  const running = shallowRef(false);
+  const text = computed(() => cells.value.map((cell) => cell.char).join(""));
+  let frame = 0;
+  let plan = [];
+  let started = 0;
+  let lastRoll = 0;
+  const stopFrame = () => {
+    if (frame && typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(frame);
+    frame = 0;
+  };
+  function settle() {
+    stopFrame();
+    cells.value = settledCells(toValue(source));
+    if (running.value) {
+      running.value = false;
+      options.onDone?.();
+    }
+  }
+  function step(now) {
+    const elapsed = now - started;
+    const duration = Math.max(1, toValue(options.duration) ?? 900);
+    if (elapsed >= duration) return settle();
+    if (now - lastRoll >= tick) {
+      lastRoll = now;
+      cells.value = scrambleFrame(plan, elapsed, random, glyphs());
+    } else {
+      const shown = cells.value;
+      let changed = false;
+      const next = shown.map((cell, i) => {
+        const p = plan[i];
+        if (!cell.settled && p && (p.fixed || elapsed >= p.settleAt)) {
+          changed = true;
+          return { char: p.final, sizer: p.final, settled: true };
+        }
+        return cell;
+      });
+      if (changed) cells.value = next;
+    }
+    frame = requestAnimationFrame(step);
+  }
+  function play() {
+    const to = toValue(source);
+    const duration = toValue(options.duration) ?? 900;
+    if (prefersReducedMotion() || duration <= 0 || typeof requestAnimationFrame === "undefined") return settle();
+    stopFrame();
+    const from = cells.value.map((cell) => cell.sizer).join("");
+    plan = planScramble(from, to, { duration, order: toValue(options.order), keep: options.keep }, random);
+    started = performance.now();
+    lastRoll = -Infinity;
+    running.value = true;
+    frame = requestAnimationFrame(step);
+  }
+  watch(
+    () => toValue(source),
+    () => {
+      if (toValue(options.onChange) === false) settle();
+      else play();
+    }
+  );
+  onScopeDispose(stopFrame);
+  return { cells, text, running, play, settle };
+}
+export {
+  useScramble
+};

package/dist/composables/useShift.js

@@ -50,18 +50,10 @@ function useShift(options = {}) {
     const fromHeight = lastHeight;
     const fromWidth = lastWidth;
     const tops = readScroll();
-    if (wantsHeight()) {
-      node.style.height = "";
-      node.style.maxHeight = "none";
-    }
-    if (wantsWidth()) {
-      node.style.width = "";
-      node.style.maxWidth = "none";
-    }
+    if (wantsHeight()) node.style.height = "";
+    if (wantsWidth()) node.style.width = "";
     const toHeight = wantsHeight() ? node.offsetHeight : 0;
     const toWidth = wantsWidth() ? node.offsetWidth : 0;
-    if (wantsHeight()) node.style.maxHeight = "";
-    if (wantsWidth()) node.style.maxWidth = "";
     restoreScroll(tops);
     lastHeight = toHeight;
     lastWidth = toWidth;