@leavepulse/ui 0.69.0 → 0.70.0

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;

package/dist/composables/useSpotlight.d.ts

@@ -0,0 +1,18 @@
+import { type MaybeRefOrGetter, type Ref } from "vue";
+export interface UseSpotlightOptions {
+    /** Switch the effect off without unbinding — the listeners stay, nothing is drawn. */
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+}
+export interface UseSpotlight {
+    /** Attach to the element carrying `.lp-spotlight`. */
+    el: Ref<HTMLElement | null>;
+}
+/** Pointer position relative to a rect, in px, as the CSS custom properties want it. */
+export declare function spotlightPoint(rect: {
+    left: number;
+    top: number;
+}, clientX: number, clientY: number): {
+    x: string;
+    y: string;
+};
+export declare function useSpotlight(options?: UseSpotlightOptions): UseSpotlight;

package/dist/composables/useSpotlight.js

@@ -0,0 +1,53 @@
+import { ref, watch, toValue, onBeforeUnmount } from "vue";
+import { usePointerFrame } from "./usePointerFrame.js";
+function spotlightPoint(rect, clientX, clientY) {
+  return { x: `${Math.round(clientX - rect.left)}px`, y: `${Math.round(clientY - rect.top)}px` };
+}
+function useSpotlight(options = {}) {
+  const el = ref(null);
+  const pointer = usePointerFrame({
+    disabled: options.disabled,
+    paint: (clientX, clientY) => {
+      const node = el.value;
+      if (!node) return;
+      const { x, y } = spotlightPoint(node.getBoundingClientRect(), clientX, clientY);
+      node.style.setProperty("--lp-spot-x", x);
+      node.style.setProperty("--lp-spot-y", y);
+    }
+  });
+  function onMove(event) {
+    if (pointer.move(event)) el.value?.setAttribute("data-lp-spot", "");
+  }
+  function onLeave() {
+    el.value?.removeAttribute("data-lp-spot");
+  }
+  function detach(node) {
+    node.removeEventListener("pointermove", onMove);
+    node.removeEventListener("pointerleave", onLeave);
+    node.removeAttribute("data-lp-spot");
+  }
+  watch(
+    el,
+    (node, previous) => {
+      if (previous) detach(previous);
+      if (!node) return;
+      node.addEventListener("pointermove", onMove, { passive: true });
+      node.addEventListener("pointerleave", onLeave, { passive: true });
+    },
+    { flush: "post" }
+  );
+  watch(
+    () => toValue(options.disabled),
+    (disabled) => {
+      if (disabled) onLeave();
+    }
+  );
+  onBeforeUnmount(() => {
+    if (el.value) detach(el.value);
+  });
+  return { el };
+}
+export {
+  spotlightPoint,
+  useSpotlight
+};

package/dist/composables/useTilt.js

@@ -1,38 +1,48 @@
-import { useReducedMotion } from "motion-v";
 import { computed, toValue, ref } from "vue";
+import { usePointerFrame } from "./usePointerFrame.js";
+import { usePrefersReducedMotion } from "./useReducedMotion.js";
+import { spotlightPoint } from "./useSpotlight.js";
+const TILT_VARS = ["--lp-tilt-x", "--lp-tilt-y", "--lp-spot-x", "--lp-spot-y"];
 function useTilt(source = {}) {
   const options = computed(() => toValue(source));
-  const reduceMotion = useReducedMotion();
+  const reduceMotion = usePrefersReducedMotion();
   const active = ref(false);
-  const nx = ref(0);
-  const ny = ref(0);
+  let target = null;
+  const pointer = usePointerFrame({
+    anyPointer: true,
+    paint: (x, y) => {
+      if (!target || !active.value) return;
+      const r = target.getBoundingClientRect();
+      target.style.setProperty("--lp-tilt-x", ((x - r.left) / r.width * 2 - 1).toFixed(3));
+      target.style.setProperty("--lp-tilt-y", ((y - r.top) / r.height * 2 - 1).toFixed(3));
+      const spot = spotlightPoint(r, x, y);
+      target.style.setProperty("--lp-spot-x", spot.x);
+      target.style.setProperty("--lp-spot-y", spot.y);
+    }
+  });
   function onPointerMove(e) {
-    if (reduceMotion.value) return;
-    const el = e.currentTarget;
-    if (!el) return;
-    const r = el.getBoundingClientRect();
-    nx.value = (e.clientX - r.left) / r.width * 2 - 1;
-    ny.value = (e.clientY - r.top) / r.height * 2 - 1;
+    if (e.currentTarget instanceof HTMLElement) target = e.currentTarget;
+    pointer.move(e);
   }
   function onPointerEnter() {
     active.value = true;
   }
   function onPointerLeave() {
     active.value = false;
-    nx.value = 0;
-    ny.value = 0;
+    pointer.cancel();
+    for (const name of TILT_VARS) target?.style.removeProperty(name);
   }
   const style = computed(() => {
     if (reduceMotion.value) {
       return { transition: "transform 0.2s ease" };
     }
     const { max = 10, lift = 8, scale = 1.03 } = options.value;
-    const rx = active.value ? -ny.value * max : 0;
-    const ry = active.value ? nx.value * max : 0;
+    const rx = active.value ? `calc(var(--lp-tilt-y, 0) * ${-max}deg)` : "0deg";
+    const ry = active.value ? `calc(var(--lp-tilt-x, 0) * ${max}deg)` : "0deg";
     const z = active.value ? lift : 0;
     const s = active.value ? scale : 1;
     return {
-      transform: `translate3d(0, ${-z}px, 0) rotateX(${rx}deg) rotateY(${ry}deg) scale(${s})`,
+      transform: `translate3d(0, ${-z}px, 0) rotateX(${rx}) rotateY(${ry}) scale(${s})`,
       transformStyle: "preserve-3d",
       transition: active.value ? "transform 0.12s ease-out" : "transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)"
     };
@@ -41,11 +51,9 @@ function useTilt(source = {}) {
     if (!options.value.glare || reduceMotion.value || !active.value) {
       return { opacity: 0 };
     }
-    const px = (nx.value + 1) * 50;
-    const py = (ny.value + 1) * 50;
     return {
       opacity: 1,
-      background: `radial-gradient(circle at ${px}% ${py}%, rgba(255,255,255,0.35), transparent 55%)`,
+      background: "radial-gradient(circle at var(--lp-spot-x, 50%) var(--lp-spot-y, 50%), rgba(255,255,255,0.35), transparent 55%)",
       transition: "opacity 0.2s ease"
     };
   });