@leavepulse/ui 0.69.0 → 0.70.0

package/src/composables/usePillTransition.ts

@@ -1,5 +1,5 @@
-import { useReducedMotion } from "motion-v"
 import { computed, type ComputedRef } from "vue"
+import { usePrefersReducedMotion } from "./useReducedMotion"
 
 /*
  * Shared motion-v transition for an element that FLIES to a new position rather
@@ -8,27 +8,32 @@ import { computed, type ComputedRef } from "vue"
  * tooltip trailing the cursor. One spring per feel keeps them consistent, and
  * every preset collapses to an instant move when the OS prefers reduced motion.
  *
- * Two feels, because the two jobs want opposite things:
+ * Three feels, because the jobs want different things:
  *
- *   "pill"  — snappy. The move is a direct answer to a click, so it should read
- *             as already-arrived: high stiffness, almost no visible travel.
- *   "float" — trailing. The element chases a continuously moving pointer, so it
- *             wants perceptible lag and a soft landing; a pill-stiff spring
- *             tracks the cursor so exactly that it reads as jitter, not motion.
+ *   "pill"   — snappy. The move is a direct answer to a click, so it should read
+ *              as already-arrived: high stiffness, almost no visible travel.
+ *   "float"  — trailing. The element chases a continuously moving pointer, so it
+ *              wants perceptible lag and a soft landing; a pill-stiff spring
+ *              tracks the cursor so exactly that it reads as jitter, not motion.
+ *   "layout" — a box resizing or a block moving to a new place (motion-v
+ *              `layout`): LpTabs' panel height, a block dropped in LayoutCanvas.
+ *              As quick as the pill, a touch more damped and lighter, so a
+ *              large box lands without a wobble at its edge.
  */
 export type PillTransition =
   | { duration: number }
-  | { type: "spring"; stiffness: number; damping: number }
+  | { type: "spring"; stiffness: number; damping: number; mass?: number }
 
-export type PillFeel = "pill" | "float"
+export type PillFeel = "pill" | "float" | "layout"
 
-const SPRING: Record<PillFeel, { type: "spring"; stiffness: number; damping: number }> = {
+const SPRING: Record<PillFeel, { type: "spring"; stiffness: number; damping: number; mass?: number }> = {
   pill: { type: "spring", stiffness: 520, damping: 40 },
   float: { type: "spring", stiffness: 210, damping: 26 },
+  layout: { type: "spring", stiffness: 520, damping: 42, mass: 0.9 },
 }
 
 export function usePillTransition(feel: PillFeel = "pill"): ComputedRef<PillTransition> {
-  const reduceMotion = useReducedMotion()
+  const reduceMotion = usePrefersReducedMotion()
   return computed<PillTransition>(() =>
     reduceMotion.value ? { duration: 0 } : SPRING[feel],
   )
@@ -51,7 +56,10 @@ export function usePillTransition(feel: PillFeel = "pill"): ComputedRef<PillTran
  * matched by feel and kept beside their motion-v counterparts so that a change
  * to one is an obvious prompt to check the other.
  */
-const STEP_SPRING: Record<PillFeel, { stiffness: number; damping: number }> = {
+/** The feels a pointer follower uses; "layout" is a motion-v layout move only. */
+export type StepFeel = Exclude<PillFeel, "layout">
+
+const STEP_SPRING: Record<StepFeel, { stiffness: number; damping: number }> = {
   // Critically damped: reaches the target quickly, never past it.
   pill: { stiffness: 420, damping: 41 },
   float: { stiffness: 260, damping: 32 },
@@ -67,7 +75,7 @@ export interface SpringState {
 export function springStep(
   state: SpringState,
   target: number,
-  feel: PillFeel = "float",
+  feel: StepFeel = "float",
   /** Frame time in seconds; clamped so a backgrounded tab can't explode it. */
   dt = 1 / 60,
 ): SpringState {

package/src/composables/usePointerFrame.ts

@@ -0,0 +1,72 @@
+import { onScopeDispose, toValue, type MaybeRefOrGetter } from "vue"
+import { prefersReducedMotion } from "./easing"
+
+/*
+ * The scaffolding of a decoration that follows the pointer (LpMagnetic's
+ * pull, the spotlight glow, LpTilt's lean): take the latest pointer position,
+ * and paint from it once per animation frame.
+ *
+ * pointermove fires faster than frames, and a re-render per event for a
+ * decoration is the kind of cost the launcher on WebKitGTK actually feels. So
+ * nothing here is reactive: `move` records the position and asks for a frame,
+ * `paint` runs in that frame with the latest one, and writes straight to the
+ * element (a style property, a custom property). The three effects had this
+ * written out each, with the same filters in slightly different orders.
+ *
+ * Who listens is the caller's: the spotlight listens on its own element, the
+ * magnet on its window (its field reaches past its edges), the tilt through
+ * handlers its consumer binds. They all feed `move`.
+ *
+ * Touch and pen are ignored unless `anyPointer`: there is no hover to follow,
+ * and an effect that jumps to wherever a finger landed reads as a pressed
+ * state that is not one. Reduced motion and `disabled` drop moves entirely.
+ */
+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 function usePointerFrame(options: PointerFrameOptions): PointerFrame {
+  let frame = 0
+  let lastX = 0
+  let lastY = 0
+
+  const run = () => {
+    frame = 0
+    options.paint(lastX, lastY)
+  }
+
+  const moveTo = (x: number, y: number) => {
+    lastX = x
+    lastY = y
+    if (!frame) frame = requestAnimationFrame(run)
+  }
+
+  const move = (event: PointerEvent): boolean => {
+    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 }
+}

package/src/composables/useReducedMotion.ts

@@ -0,0 +1,22 @@
+import type { Ref } from "vue"
+import { useMediaQuery } from "./useMediaQuery"
+
+/*
+ * `prefersReducedMotion()` as a ref, for a component that has to RE-RENDER
+ * when the setting changes mid-session (a spring that becomes an instant move,
+ * a tilt that goes flat), not just read it when an animation starts.
+ *
+ * The kit had two sources for this question: the plain function in easing.ts
+ * and motion-v's `useReducedMotion`, picked per file. Both read the same media
+ * query, so this is the one reactive answer and the function stays the one
+ * point-in-time answer. motion-v's hook adds nothing the kit needs: motion-v
+ * does not consult it for its own layout animations (every caller had to turn
+ * a spring into `{ duration: 0 }` itself), and it reads the page's window, where
+ * this asks the window the component renders in (an LpFrame's, say).
+ *
+ * False until mounted, like every media query here, so a server render and the
+ * hydrating client agree; nothing animates before mount anyway.
+ */
+export function usePrefersReducedMotion(): Ref<boolean> {
+  return useMediaQuery("(prefers-reduced-motion: reduce)")
+}

package/src/composables/useRepeater.ts

@@ -0,0 +1,44 @@
+import { computed, toRaw } from "vue"
+
+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 function useRepeater<T extends object>(options: {
+  value: () => T[]
+  set: (items: T[]) => void
+  createItem: () => T
+  itemKey: () => RepeaterItemKey<T> | undefined
+  disabled: () => boolean
+}) {
+  const keys = new WeakMap<object, string>()
+  let sequence = 0
+
+  function keyFor(item: T): string {
+    const key = options.itemKey()
+    const explicit = typeof key === "function" ? key(item) : key === undefined ? undefined : item[key]
+    if (explicit !== undefined && 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: number) {
+    if (options.disabled() || index < 0 || index >= options.value().length) return
+    options.set(options.value().filter((_, i) => i !== index))
+  }
+
+  function update(index: number, item: T) {
+    const previous = options.value()[index]
+    if (options.disabled() || previous === undefined) return
+    keys.set(toRaw(item), keyFor(previous))
+    options.set(options.value().map((value, i) => i === index ? item : value))
+  }
+
+  return { rows, add, remove, update }
+}

package/src/composables/useResizeObserver.ts

@@ -0,0 +1,59 @@
+import { onScopeDispose, toValue, watch, type MaybeRefOrGetter } from "vue"
+
+/*
+ * "Tell me when this element changes size", for as long as the component lives.
+ *
+ * A dozen components wrote the same scaffolding around a ResizeObserver: a
+ * variable for it, a guard for engines without one (old WebKitGTK, tests),
+ * disconnect-and-reobserve when the element ref changes, disconnect on unmount.
+ * Each copy got one of those slightly different, and a missing guard is a crash
+ * rather than a style difference. This is that scaffolding once.
+ *
+ * `target` is a ref or a getter, so the observed element can be a template ref,
+ * a component's exposed element or something found from one (the scroll
+ * viewport around a table); a new element is observed in place of the old one
+ * and `null` stops observing. `immediate` also calls back right when an element
+ * is attached, without an entry, for components that must measure before the
+ * first paint: the observer's own first report arrives a frame later.
+ */
+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 function useResizeObserver(
+  target: MaybeRefOrGetter<Element | null | undefined>,
+  callback: (entry: ResizeObserverEntry | undefined, el: Element) => void,
+  options: UseResizeObserverOptions = {},
+): { stop: () => void } {
+  const { immediate = false, ...observe } = options
+  let observer: ResizeObserver | undefined
+
+  const disconnect = () => {
+    observer?.disconnect()
+    observer = undefined
+  }
+
+  const stopWatch = watch(
+    () => toValue(target),
+    (el) => {
+      disconnect()
+      if (!el) return
+      if (immediate) callback(undefined, 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 }
+}

package/src/composables/useRevealedValue.ts

@@ -0,0 +1,84 @@
+import { computed, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from "vue"
+import { easeOut } from "./easing"
+import { useReveal } from "./useReveal"
+import { lerp, useTween } from "./useTween"
+
+/*
+ * A number that waits to be seen before it moves to its value.
+ *
+ * A meter that fills (LpProgress, LpGauge, LpQuota) or a figure that counts up
+ * (LpNumberFlow) is showing a quantity being measured, and that only works if
+ * the reader sees the sweep. So the number is held at its starting point until
+ * the element is revealed (useReveal), then let go to the real value; every
+ * change after that goes straight through. Each of those components used to
+ * carry this hold-and-release by hand, and they disagreed in the corners: what
+ * a value change before the reveal does, and what the server renders.
+ */
+
+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 function useRevealedValue(
+  value: () => number,
+  options: UseRevealedValueOptions = {},
+): UseRevealedValue {
+  const animate = () => toValue(options.animateOnMount) ?? true
+  const { el, revealed } = useReveal({ immediate: () => !animate() })
+
+  /*
+   * The server has no viewport, so useReveal reports it revealed; releasing
+   * there would render the final value and the client, which starts held,
+   * would hydrate a different one. The server renders the starting point and
+   * the client releases it once the element is seen.
+   */
+  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 === undefined
+      ? computed(() => target.value)
+      : useTween(() => target.value, lerp, { duration: () => toValue(duration), ease: easeOut })
+
+  return { el, revealed, target, shown }
+}

package/src/composables/useScramble.ts

@@ -0,0 +1,152 @@
+import { computed, onScopeDispose, shallowRef, toValue, watch, type ComputedRef, type MaybeRefOrGetter, type ShallowRef } from "vue"
+import {
+  planScramble,
+  scrambleFrame,
+  settledCells,
+  SCRAMBLE_GLYPHS,
+  type Random,
+  type ScrambleCell,
+  type ScrambleFrameCell,
+} from "../components/scramble"
+import { prefersReducedMotion } from "./easing"
+
+/*
+ * A value that "decrypts" into place: each position churns through random
+ * glyphs and settles on its character.
+ *
+ * For values that are revealed rather than read: an API key shown after a
+ * click, a hash arriving from a job, a code a user is about to copy. The churn
+ * says "this was just produced" in a way a plain swap does not.
+ *
+ * The composable owns the clock; the frames themselves come from the pure
+ * functions in components/scramble.ts. It hands back CELLS rather than only a
+ * string, because a component that wants the width to hold still needs to know
+ * which character each position will end as (LpScramble sizes each cell by it).
+ */
+
+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 function useScramble(source: MaybeRefOrGetter<string>, options: UseScrambleOptions = {}): UseScramble {
+  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<ScrambleFrameCell[]>(
+    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: ScrambleCell[] = []
+  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: number) {
+    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 {
+      // Between re-rolls only the positions that just landed change, so the
+      // settle front moves smoothly while the churn keeps its own rate.
+      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()
+    // From what is DRAWN: a change that lands mid-run carries on from the
+    // positions as they are, instead of snapping back to the old value first.
+    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 }
+}

package/src/composables/useShift.ts

@@ -180,22 +180,16 @@ export function useShift(
     const fromWidth = lastWidth
     const tops = readScroll()
 
-    // Measured with any cap lifted, then the clamp is left to CSS. A `max-*`
-    // from a class makes the element report the clipped figure once the cap
-    // bites, and pinning that would hold the box short of the content it now
-    // has to fit.
-    if (wantsHeight()) {
-      node.style.height = ""
-      node.style.maxHeight = "none"
-    }
-    if (wantsWidth()) {
-      node.style.width = ""
-      node.style.maxWidth = "none"
-    }
+    // Measured where the box will settle: free of the pinned size, but with
+    // its `max-*` in place. The target used to be read with the cap lifted
+    // while the settled size was read with it, so a box whose content is
+    // wider than its cap never matched its own target: every render started
+    // another tween and it never came to rest (a breadcrumb trail too wide for
+    // its bar re-animated some sixty times a second).
+    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
@@ -239,8 +233,8 @@ export function useShift(
       // clearing it let the box spread to the window's edges.
       if (wantsHeight()) node.style.height = ""
       if (wantsWidth()) node.style.width = ""
-      // Re-read rather than trusting the target: a `max-*` may have clamped the
-      // box short of it, and the next tween has to start from where it sits.
+      // Re-read rather than trusting the target: the layout around may have
+      // moved meanwhile, and the next tween has to start from where it sits.
       lastHeight = node.offsetHeight
       lastWidth = node.offsetWidth
     }, wait)

package/src/composables/useSpotlight.ts

@@ -0,0 +1,82 @@
+import { onBeforeUnmount, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from "vue"
+import { usePointerFrame } from "./usePointerFrame"
+
+/*
+ * Drives the `.lp-spotlight` glow (tokens/effects.css): writes the pointer
+ * position into custom properties on the element and marks it while the
+ * pointer is inside.
+ *
+ * Writes go straight to the element's style, not through a reactive binding,
+ * one per animation frame with the latest position (usePointerFrame, shared
+ * with LpMagnetic and useTilt). Touch and pen are ignored: a glow that jumps
+ * to wherever a finger landed reads as a pressed state that is not one.
+ * Reduced motion turns it off rather than freezing it.
+ */
+
+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 function spotlightPoint(rect: { left: number; top: number }, clientX: number, clientY: number) {
+  return { x: `${Math.round(clientX - rect.left)}px`, y: `${Math.round(clientY - rect.top)}px` }
+}
+
+export function useSpotlight(options: UseSpotlightOptions = {}): UseSpotlight {
+  const el = ref<HTMLElement | null>(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: PointerEvent) {
+    if (pointer.move(event)) el.value?.setAttribute("data-lp-spot", "")
+  }
+
+  function onLeave() {
+    el.value?.removeAttribute("data-lp-spot")
+  }
+
+  function detach(node: HTMLElement) {
+    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 }
+}