@leavepulse/ui 0.77.3 → 0.78.0

package/src/components/LpTableFilter.vue

@@ -80,7 +80,7 @@ const paint = usePaintSelect<unknown>({
 function onListKeydown(event: KeyboardEvent) {
   if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return
   const boxes = [...(list.value?.querySelectorAll<HTMLElement>("[role=checkbox]") ?? [])]
-  const at = boxes.indexOf(document.activeElement as HTMLElement)
+  const at = boxes.indexOf(list.value?.ownerDocument.activeElement as HTMLElement)
   const next = boxes[at + (event.key === "ArrowDown" ? 1 : -1)]
   if (!next) return
   event.preventDefault()

package/src/components/LpTableOfContents.vue

@@ -12,6 +12,7 @@
 import { Motion } from "motion-v"
 import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
+import { useView, viewDocument, viewWindow } from "../composables/useView"
 import { atScrollEnd, scrollMarginTop, scrollParent, scrollToElement } from "../composables/scroll"
 import { usePillTransition } from "../composables/usePillTransition"
 
@@ -92,12 +93,17 @@ let safetyTimer: ReturnType<typeof setTimeout> | null = null
  * final section could otherwise never reach. Works for the window and for a
  * scroll area the headings live in.
  */
+// Headings sit in the document this list renders in, a frame's inside one.
+const host = useView()
+
 function setup() {
   stopSpy?.()
   stopSpy = null
   const ids = flatIds(props.links)
   if (!ids.length) return
-  const first = document.getElementById(ids[0]!)
+  const page = viewDocument(host.value)
+  const win = viewWindow(host.value)
+  const first = page.getElementById(ids[0]!)
   const scroller = first ? scrollParent(first) : null
   let frame = 0
 
@@ -105,13 +111,13 @@ function setup() {
     frame = 0
     if (spySuppressed) return
     const top = scroller ? scroller.getBoundingClientRect().top : 0
-    const headings = ids.map((id) => document.getElementById(id)).filter((el): el is HTMLElement => !!el)
+    const headings = ids.map((id) => page.getElementById(id)).filter((el): el is HTMLElement => !!el)
     if (!headings.length) return
     let current = headings[0]!.id
-    const view = scroller ? scroller.clientHeight : window.innerHeight
+    const view = scroller ? scroller.clientHeight : win.innerHeight
     const line = Math.max(props.offset, view / 4)
     for (const el of headings) if (el.getBoundingClientRect().top - top <= line + 1) current = el.id
-    const scrolled = scroller ? scroller.scrollTop : window.scrollY
+    const scrolled = scroller ? scroller.scrollTop : win.scrollY
     const end = atScrollEnd(headings[0])
     if (scrolled > 0 && end) current = headings[headings.length - 1]!.id
     activeId.value = current
@@ -119,13 +125,13 @@ function setup() {
   const onScroll = () => {
     if (!frame) frame = requestAnimationFrame(measure)
   }
-  const target: HTMLElement | Window = scroller ?? window
+  const target: HTMLElement | Window = scroller ?? win
   target.addEventListener("scroll", onScroll, { passive: true })
-  window.addEventListener("resize", onScroll)
+  win.addEventListener("resize", onScroll)
   measure()
   stopSpy = () => {
     target.removeEventListener("scroll", onScroll)
-    window.removeEventListener("resize", onScroll)
+    win.removeEventListener("resize", onScroll)
     if (frame) cancelAnimationFrame(frame)
   }
 }
@@ -147,7 +153,8 @@ function suppressSpyUntilScrollEnds(target: HTMLElement) {
   if (rafId != null) cancelAnimationFrame(rafId)
   if (safetyTimer != null) clearTimeout(safetyTimer)
   const scroller = scrollParent(target)
-  const position = () => (scroller ? scroller.scrollTop : window.scrollY)
+  const win = viewWindow(host.value)
+  const position = () => (scroller ? scroller.scrollTop : win.scrollY)
   let last = position()
   const tick = () => {
     const y = position()
@@ -165,7 +172,7 @@ function suppressSpyUntilScrollEnds(target: HTMLElement) {
 }
 
 function onClick(id: string, ev: MouseEvent) {
-  const el = document.getElementById(id)
+  const el = viewDocument(host.value).getElementById(id)
   if (!el) return
   ev.preventDefault()
   activeId.value = id // mark immediately so the bar jumps to the clicked item

package/src/components/LpTabs.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isHTMLElement } from "../composables/useView"
 import { usePaletteCommands, usePaletteScope } from "../composables/usePaletteCommands"
 import { Motion } from "motion-v"
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
@@ -179,7 +180,7 @@ function pillUnder(value: string, active?: string): boolean {
  */
 function releaseFocusAfterPointer(event: PointerEvent) {
   const target = event.currentTarget
-  if (target instanceof HTMLElement) target.blur()
+  if (isHTMLElement(target)) target.blur()
 }
 
 const paletteScope = usePaletteScope()

package/src/components/LpTagsInput.vue

@@ -13,6 +13,7 @@ export type TagsInputLabels = {
 </script>
 
 <script setup lang="ts">
+import { isNode, isInputElement } from "../composables/realm"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Free-form list of short values: emails, labels, hostnames. Typing a
@@ -38,7 +39,7 @@ import {
   TagsInputRoot,
 } from "reka-ui"
 import { computed, ref, useAttrs, useId, watch } from "vue"
-import { fieldMessageId, useField, useFieldControl } from "../composables/useField"
+import { fieldWrapperBinds, fieldMessageId, useField, useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { prefersReducedMotion } from "../composables/easing"
 import { useFieldNotice, type FieldNoticeOptions } from "../composables/useFieldNotice"
 import { useShift } from "../composables/useShift"
@@ -177,13 +178,12 @@ const field = useFieldControl(() => ({
 
 const describedBy = computed(
   () =>
-    [
+    mergeDescribedBy(
+      attrs["aria-describedby"],
       field.value.describedBy,
       hasField.value && field.value.id ? `${field.value.id}-notice` : undefined,
       standalone.value && notice.message.value ? noticeId : undefined,
-    ]
-      .filter(Boolean)
-      .join(" ") || undefined,
+    ),
 )
 
 const rootAttrs = computed(() => {
@@ -336,7 +336,7 @@ function choose(opt: LpOptionBase<string>): void {
 function keepOpenInside(event: Event): void {
   guardOutside(event)
   const target = event.target
-  if (target instanceof Node && boxEl.value?.contains(target)) event.preventDefault()
+  if (isNode(target) && boxEl.value?.contains(target)) event.preventDefault()
 }
 
 function isDelimiter(data: string): boolean {
@@ -346,7 +346,7 @@ function isDelimiter(data: string): boolean {
 }
 
 function onKeydown(event: KeyboardEvent): void {
-  if (event.isComposing || !(event.target instanceof HTMLInputElement)) return
+  if (event.isComposing || !isInputElement(event.target)) return
   const count = suggestions.value.length
   if (listOpen.value && count) {
     if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -369,7 +369,7 @@ function onKeydown(event: KeyboardEvent): void {
 }
 
 function onBeforeInput(event: InputEvent): void {
-  if (event.isComposing || !(event.target instanceof HTMLInputElement)) return
+  if (event.isComposing || !isInputElement(event.target)) return
   if (event.inputType === "insertText" && event.data && isDelimiter(event.data)) {
     event.preventDefault()
     commit(event.target)
@@ -377,7 +377,7 @@ function onBeforeInput(event: InputEvent): void {
 }
 
 function onInput(event: Event): void {
-  if (event.target instanceof HTMLInputElement) sync(event.target)
+  if (isInputElement(event.target)) sync(event.target)
   if (!stuck.value) return
   stuck.value = false
   unsay()
@@ -385,7 +385,7 @@ function onInput(event: Event): void {
 
 function onPaste(event: ClipboardEvent): void {
   const pasted = event.clipboardData?.getData("text") ?? ""
-  if (!(event.target instanceof HTMLInputElement) || !pasted) return
+  if (!isInputElement(event.target) || !pasted) return
   if (splitTags(pasted, props.delimiter).length < 2) return
   event.preventDefault()
   const el = event.target
@@ -397,7 +397,7 @@ function onPaste(event: ClipboardEvent): void {
 function onBlur(event: FocusEvent): void {
   focused.value = false
   emit("blur", event)
-  if (props.addOnBlur && event.target instanceof HTMLInputElement && event.target.value.trim()) commit(event.target)
+  if (props.addOnBlur && isInputElement(event.target) && event.target.value.trim()) commit(event.target)
 }
 
 function onFocus(): void {
@@ -433,15 +433,8 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
 
 <template>
   <FieldWrapper
-    :wrapped="hasField"
+    v-bind="fieldWrapperBinds(hasField, field, $props, attrs)"
     :ref="bindField"
-    :id="field.id"
-    :label="label"
-    :hint="hint"
-    :error="error"
-    :required="required"
-    :class="attrs.class"
-    :style="attrs.style"
   >
     <div class="relative">
       <TagsInputRoot

package/src/components/LpTextarea.vue

@@ -3,9 +3,10 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { nodeWindow } from "../composables/realm"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 import { computed, nextTick, onMounted, ref, useAttrs, watch } from "vue"
-import { useFieldControl } from "../composables/useField"
+import { fieldWrapperBinds, useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { mergeClass } from "../composables/useMergedClass"
 import FieldWrapper from "./FieldWrapper.vue"
 
@@ -63,7 +64,7 @@ const box = ref<HTMLTextAreaElement | null>(null)
 function fit() {
   const el = box.value
   if (!props.autosize || !el) return
-  const style = getComputedStyle(el)
+  const style = nodeWindow(el).getComputedStyle(el)
   const line = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.4
   const borders = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)
   const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)
@@ -91,14 +92,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
 
 <template>
   <FieldWrapper
-    :wrapped="hasField"
-    :id="field.id"
-    :label="label"
-    :hint="hint"
-    :error="error"
-    :required="required"
-    :class="attrs.class"
-    :style="attrs.style"
+    v-bind="fieldWrapperBinds(hasField, field, $props, attrs)"
   >
     <textarea
       ref="box"
@@ -110,7 +104,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
       :disabled="field.disabled"
       :required="field.required || undefined"
       :aria-invalid="field.invalid || undefined"
-      :aria-describedby="field.describedBy"
+      :aria-describedby="mergeDescribedBy(attrs['aria-describedby'], field.describedBy)"
       :class="textareaClass"
       :style="hasField ? undefined : (attrs.style as never)"
       @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value); fit()"

package/src/components/LpThemeProvider.vue

@@ -1,12 +1,16 @@
 <script lang="ts">
-// The last press anywhere on the page: a theme change triggered by a toggle
-// reveals from the toggle the user just pressed.
+// The last press in each window: a theme change triggered by a toggle reveals
+// from the toggle the user just pressed. Per window because an LpFrame has its
+// own, whose presses and viewport coordinates the page never sees.
 const PRESS_FRESH_MS = 1500
-let lastPress: { x: number; y: number; at: number } | null = null
-if (typeof window !== "undefined") {
-  window.addEventListener(
+const presses = new WeakMap<Window, { x: number; y: number; at: number } | null>()
+
+function trackPresses(win: Window) {
+  if (presses.has(win)) return
+  presses.set(win, null)
+  win.addEventListener(
     "pointerdown",
-    (event) => (lastPress = { x: event.clientX, y: event.clientY, at: performance.now() }),
+    (event) => presses.set(win, { x: event.clientX, y: event.clientY, at: performance.now() }),
     { capture: true, passive: true },
   )
 }
@@ -26,13 +30,15 @@ export default { inheritAttrs: false }
  * circular reveal the global theme switch uses, growing from where the user
  * last pressed, or from the subtree's centre.
  */
-import { computed, nextTick, ref, shallowRef, watch, type Component, type ComponentPublicInstance } from "vue"
+import { computed, nextTick, onMounted, ref, shallowRef, watch, type Component, type ComponentPublicInstance } from "vue"
 import type { TokenSet } from "../theme/tokens"
 import { revealTransition, themeEntries, type RevealOrigin } from "../theme/useTheme"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { isElement, nodeWindow, useView, viewWindow } from "../composables/useView"
 
 const props = withDefaults(
   defineProps<{
+    /** Replace the object to change the theme: a mutation inside it is not seen. */
     theme: TokenSet
     /** Root element. A wrapper that should not affect layout can use `class="contents"`. */
     as?: string | Component
@@ -54,11 +60,19 @@ const style = computed(() => ({
   colorScheme: shown.value.mode,
 }))
 
-function originOf(): RevealOrigin | undefined {
-  if (lastPress && performance.now() - lastPress.at < PRESS_FRESH_MS) return lastPress
+const view = useView()
+onMounted(() => trackPresses(viewWindow(view.value)))
+
+function rootElement(): Element | undefined {
   const value = root.value
-  const el = value instanceof HTMLElement ? value : (value?.$el as Element | undefined)
-  const box = el?.getBoundingClientRect?.()
+  const el = isElement(value) ? value : value?.$el
+  return isElement(el) ? el : undefined
+}
+
+function originOf(el: Element | undefined): RevealOrigin | undefined {
+  const press = presses.get(el ? nodeWindow(el) : viewWindow(view.value))
+  if (press && performance.now() - press.at < PRESS_FRESH_MS) return press
+  const box = el?.getBoundingClientRect()
   return box ? { x: box.left + box.width / 2, y: box.top + box.height / 2 } : undefined
 }
 
@@ -69,10 +83,12 @@ watch(
       shown.value = next
       return
     }
-    revealTransition(async () => {
+    const el = rootElement()
+    const update = async () => {
       shown.value = next
       await nextTick()
-    }, originOf())
+    }
+    revealTransition(update, originOf(el), undefined, el?.ownerDocument)
   },
 )
 </script>

package/src/components/LpTimeField.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { CONTROL_SIZE } from "./controlSize"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Time-of-day field: hour and minute segments, typed or stepped with the arrow
@@ -21,7 +22,7 @@ import { usePaletteControl, type PaletteControlOptions } from "../composables/us
 import { Time } from "@internationalized/date"
 import { TimeFieldInput, TimeFieldRoot } from "reka-ui"
 import { computed } from "vue"
-import { focusLeft, useFieldControl } from "../composables/useField"
+import { focusLeft, useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import LpIcon from "./LpIcon.vue"
 
@@ -73,11 +74,7 @@ const field = useFieldControl(() => ({
   disabled: props.disabled,
 }))
 
-const shellSize = {
-  sm: "h-(--size-control-sm) text-xs",
-  md: "h-(--size-control-md) text-sm",
-  lg: "h-(--size-control-lg) text-sm",
-}
+const shellSize = CONTROL_SIZE
 
 // `w-full` is the default, not a rule: a time column of `w-28` must win over it.
 const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
@@ -101,10 +98,10 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
     :disabled="field.disabled"
     :required="field.required"
     :aria-invalid="field.invalid || undefined"
-    :aria-describedby="field.describedBy"
     :aria-labelledby="field.labelId"
     :class="rootClass"
     v-bind="rest"
+    :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy)"
     @update:model-value="onUpdate"
     @focusout="onFocusOut"
   >

package/src/components/LpToaster.vue

@@ -19,7 +19,7 @@ import { CLOSE_ICON } from "./dropdown"
 import LpCopyButton from "./LpCopyButton.vue"
 import LpIcon from "./LpIcon.vue"
 import { toneLook } from "./tone"
-import { usePortalTarget } from "../composables/useView"
+import { nodeWindow, usePortalTarget, useView, viewDocument, viewWindow } from "../composables/useView"
 
 const props = defineProps<{ labels?: Partial<{ dismiss: string; copy: string; copied: string }> }>()
 const text = useLabels("toast", { dismiss: "Dismiss", copy: "Copy message", copied: "Copied" }, () => props.labels)
@@ -44,7 +44,7 @@ function toastsIn(root: Element): HTMLElement[] {
 }
 
 function slide(root: Element) {
-  const reduce = prefersReducedMotion()
+  const reduce = prefersReducedMotion(nodeWindow(root))
   const height = (root as HTMLElement).offsetHeight
   for (const el of toastsIn(root)) {
     const before = tops.get(el)
@@ -61,12 +61,13 @@ function slide(root: Element) {
 // The viewport's component root is a wrapper fragment, not the list, so the
 // list is found by a mark of its own once it is teleported into place.
 const viewportId = useId()
+const view = useView()
 onMounted(() =>
   nextTick(() => {
-    const root = document.querySelector(`[data-lp-toasts="${viewportId}"]`)
-    if (!root || typeof MutationObserver === "undefined") return
+    const root = viewDocument(view.value).querySelector(`[data-lp-toasts="${viewportId}"]`)
+    if (!root) return
     for (const el of toastsIn(root)) tops.set(el, el.offsetTop - (root as HTMLElement).offsetHeight)
-    observer = new MutationObserver(() => slide(root))
+    observer = new (nodeWindow(root).MutationObserver)(() => slide(root))
     observer.observe(root, { childList: true, subtree: true })
   }),
 )
@@ -207,7 +208,7 @@ const copyable = (t: ToastItem) => t.variant === "error" || t.variant === "warni
 const toastText = (t: ToastItem) => () => [t.title, t.message, t.details, t.context].filter(Boolean).join("\n")
 
 function selecting(): boolean {
-  return Boolean(window.getSelection()?.toString())
+  return Boolean(viewWindow(view.value).getSelection()?.toString())
 }
 
 function runClick(t: ToastItem) {

package/src/components/LpTooltip.vue

@@ -27,6 +27,7 @@
  * those bind their handlers to the slot's direct child, so a wrapper swallows
  * them and the control stops opening. Put `aria-label` on the trigger instead.
  */
+import { clamp } from "../composables/clamp"
 import {
   injectTooltipProviderContext,
   TooltipContent,
@@ -43,7 +44,7 @@ import {
 } from "../composables/usePillTransition"
 import { PANEL_SURFACE, TOOLTIP_ANIM } from "./dropdown"
 import { prefersReducedMotion } from "../composables/easing"
-import { useOutsideGuard, usePortalTarget } from "../composables/useView"
+import { useOutsideGuard, usePortalTarget, useView, viewWindow } from "../composables/useView"
 
 const props = withDefaults(
   defineProps<{
@@ -131,15 +132,21 @@ const EDGE = 8
  * uptime slice with its breakdown) slid half off screen. The offset is held to
  * the room the window has on each side of where reka put the tip.
  */
-function inView(x: number): number {
+function inView(x: number, y: number): { x: number; y: number } {
   const panel = tipBody.value?.parentElement
-  if (!panel) return x
+  if (!panel) return { x, y }
   const rect = panel.getBoundingClientRect()
-  const placed = rect.left - offset.value.x
-  const width = panel.ownerDocument.defaultView?.innerWidth ?? window.innerWidth
+  const win = panel.ownerDocument.defaultView ?? window
+  return {
+    x: withinRoom(x, rect.left - offset.value.x, rect.width, win.innerWidth),
+    y: withinRoom(y, rect.top - offset.value.y, rect.height, win.innerHeight),
+  }
+}
+
+function withinRoom(value: number, placed: number, size: number, room: number): number {
   const min = EDGE - placed
-  const max = width - EDGE - rect.width - placed
-  return max < min ? x : Math.min(max, Math.max(min, x))
+  const max = room - EDGE - size - placed
+  return max < min ? value : clamp(value, min, max)
 }
 
 /*
@@ -152,6 +159,22 @@ let sx: SpringState = { value: 0, velocity: 0 }
 let sy: SpringState = { value: 0, velocity: 0 }
 let frame = 0
 let lastFrame = 0
+/* The last reading, so the tip can be placed again when the window changes under it. */
+let pointer: { el: HTMLElement; x: number; y: number } | null = null
+
+function stopSpring() {
+  if (frame) cancelAnimationFrame(frame)
+  frame = 0
+  lastFrame = 0
+}
+
+/* Straight to the target, with no spring left over to pull it back. */
+function jumpToTarget() {
+  stopSpring()
+  offset.value = { x: target.x, y: target.y }
+  sx = { value: target.x, velocity: 0 }
+  sy = { value: target.y, velocity: 0 }
+}
 
 const settle = (now: number) => {
   const dt = lastFrame ? (now - lastFrame) / 1000 : 1 / 60
@@ -179,10 +202,17 @@ const onPointerMove = (e: PointerEvent) => {
   if (!props.followCursor) return
   const el = e.currentTarget as HTMLElement | null
   if (!el) return
+  pointer = { el, x: e.clientX, y: e.clientY }
+  follow()
+}
+
+function follow() {
+  if (!pointer) return
+  const { el, x: clientX, y: clientY } = pointer
   const rect = el.getBoundingClientRect()
   const halfX = props.side === "left" || props.side === "right" ? rect.width / 2 : 0
   const dirX = props.side === "right" ? -1 : 1
-  target.x = e.clientX - (rect.left + rect.width / 2) + halfX * dirX
+  target.x = clientX - (rect.left + rect.width / 2) + halfX * dirX
   /*
    * reka clears the tip past the whole box's EDGE, not past the pointer, so on
    * a tall trigger it ends up half the box above the cursor — measured at 96px
@@ -192,11 +222,11 @@ const onPointerMove = (e: PointerEvent) => {
    */
   const half = props.side === "top" || props.side === "bottom" ? rect.height / 2 : 0
   const dir = props.side === "bottom" ? -1 : 1
-  target.y = e.clientY - (rect.top + rect.height / 2) + half * dir
-  target.x = inView(target.x)
+  target.y = clientY - (rect.top + rect.height / 2) + half * dir
+  Object.assign(target, inView(target.x, target.y))
   // Without motion the tip goes straight to the reading instead of trailing.
   if (prefersReducedMotion()) {
-    offset.value = { x: target.x, y: target.y }
+    jumpToTarget()
     return
   }
   if (!frame) frame = requestAnimationFrame(settle)
@@ -218,10 +248,7 @@ const onOpenChange = (next: boolean) => {
   if (!open.value || !props.followCursor) return
   // A fresh open starts at the cursor instead of flying in from wherever the
   // last one came to rest.
-  offset.value = { x: target.x, y: target.y }
-  sx = { value: target.x, velocity: 0 }
-  sy = { value: target.y, velocity: 0 }
-  lastFrame = 0
+  jumpToTarget()
 }
 
 /*
@@ -243,9 +270,26 @@ watch(
   },
 )
 
-onBeforeUnmount(() => {
-  if (frame) cancelAnimationFrame(frame)
-})
+/*
+ * A followed tip moves only with the pointer, so a window that changes under a
+ * still pointer (a resize, a phone's address bar, a rotation) would leave it
+ * off screen. And a tip that is gone has nothing left to animate.
+ */
+const view = useView()
+watch(
+  () => open.value && props.followCursor,
+  (following, _, onCleanup) => {
+    if (!following) {
+      stopSpring()
+      return
+    }
+    const win = viewWindow(view.value)
+    win.addEventListener("resize", follow)
+    onCleanup(() => win.removeEventListener("resize", follow))
+  },
+)
+
+onBeforeUnmount(stopSpring)
 
 // Overlays open in the window this component renders in (an LpFrame's, inside one).
 const portalTo = usePortalTarget()