@leavepulse/ui 0.68.0 → 0.70.0

package/src/components/LpTour.vue

@@ -67,11 +67,13 @@ import { hints } from "../composables/useHints"
 import { useHotkeys } from "../composables/useHotkeys"
 import { useLabels } from "../composables/useLpConfig"
 import { useMediaQuery } from "../composables/useMediaQuery"
+import { useView, viewDocument, viewWindow } from "../composables/useView"
 import { scrollToElement } from "../composables/scroll"
 import { PANEL_SURFACE } from "./dropdown"
 import TourCard from "./TourCard.vue"
 import type { Box } from "../composables/spatialNav"
 import { holeClip, holeOf, panelsAround } from "./tour"
+import { usePortalTarget } from "../composables/useView"
 
 const props = withDefaults(
   defineProps<{
@@ -111,6 +113,10 @@ const SETTLE_MS = 1000
 const CARD_ROOM = 200
 
 const wide = useMediaQuery("(min-width: 640px)")
+// The window the tour walks: the page's, or an LpFrame's when it runs in one.
+const view = useView()
+const win = () => viewWindow(view.value)
+const doc = () => viewDocument(view.value)
 const sampled = ref(false)
 const step = computed<TourStep | undefined>(() => {
   const raw = props.steps[index.value]
@@ -161,7 +167,7 @@ function resolve(raw: TourStep["target"]): Element | null {
   try {
     if (typeof raw === "function") return raw()
     if (typeof raw !== "string") return raw.isConnected ? raw : null
-    return hints.element(raw) ?? document.querySelector(raw)
+    return hints.element(raw) ?? doc().querySelector(raw)
   } catch {
     return null
   }
@@ -185,9 +191,9 @@ function waitFor(raw: TourStep["target"], mine: number): Promise<Element | null>
 // or calc(), which parseFloat would misread (0.5rem → 0.5px), so the browser
 // resolves it on a throwaway element.
 function controlRadius(): number {
-  const probe = document.createElement("div")
+  const probe = doc().createElement("div")
   probe.style.cssText = "position:absolute;visibility:hidden;border-top-left-radius:var(--radius-control)"
-  document.body.append(probe)
+  doc().body.append(probe)
   const px = parseFloat(getComputedStyle(probe).borderTopLeftRadius)
   probe.remove()
   return Number.isFinite(px) ? px : 8
@@ -201,7 +207,7 @@ const pause = (ms: number) => new Promise<void>((done) => setTimeout(done, ms))
 // to land. Endless animations (a pulse, a spinner) never land and are left out.
 async function settled(el: Element): Promise<void> {
   await new Promise(requestAnimationFrame)
-  const moving = document.getAnimations().filter((animation) => {
+  const moving = doc().getAnimations().filter((animation) => {
     const node = animation.effect instanceof KeyframeEffect ? animation.effect.target : null
     const end = Number(animation.effect?.getComputedTiming().endTime)
     return !!node && (node.contains(el) || el.contains(node)) && Number.isFinite(end)
@@ -239,7 +245,7 @@ function glideTo(el: Element | null) {
 }
 
 function measure() {
-  viewport.value = { width: window.innerWidth, height: window.innerHeight }
+  viewport.value = { width: win().innerWidth, height: win().innerHeight }
   const el = target.value
   if (!el) {
     box.value = null
@@ -371,13 +377,13 @@ watch(
       direction = 1
       box.value = null
       radius.value = controlRadius()
-      document.addEventListener("click", onTargetClick, true)
-      document.addEventListener("contextmenu", onTargetClick, true)
+      doc().addEventListener("click", onTargetClick, true)
+      doc().addEventListener("contextmenu", onTargetClick, true)
       frame ||= requestAnimationFrame(track)
       void show()
     } else {
-      document.removeEventListener("click", onTargetClick, true)
-      document.removeEventListener("contextmenu", onTargetClick, true)
+      doc().removeEventListener("click", onTargetClick, true)
+      doc().removeEventListener("contextmenu", onTargetClick, true)
       end()
     }
   },
@@ -389,8 +395,8 @@ watch(index, () => {
 })
 
 onBeforeUnmount(() => {
-  document.removeEventListener("click", onTargetClick, true)
-  document.removeEventListener("contextmenu", onTargetClick, true)
+  doc().removeEventListener("click", onTargetClick, true)
+  doc().removeEventListener("contextmenu", onTargetClick, true)
   if (open.value) end()
 })
 
@@ -408,10 +414,13 @@ useHotkeys(
 // and reka switches off pointer events on every older one, the card included
 // when it carries over from the step before. The tour sits above all of them.
 const CARD = `${PANEL_SURFACE} pointer-events-auto! rounded-card w-80 max-w-[calc(100vw-24px)] p-4 text-sm text-ink outline-none`
+
+// Overlays open in the window this component renders in (an LpFrame's, inside one).
+const portalTo = usePortalTarget()
 </script>
 
 <template>
-  <Teleport to="body">
+  <Teleport :to="portalTo">
     <Transition
       enter-active-class="transition-opacity duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
       leave-active-class="lp-tour-gone transition-opacity duration-[var(--duration-medium)] ease-out motion-reduce:transition-none"
@@ -444,7 +453,7 @@ const CARD = `${PANEL_SURFACE} pointer-events-auto! rounded-card w-80 max-w-[cal
 
     <PopoverRoot v-if="wide" :open="open && ready">
       <PopoverAnchor :reference="reference" />
-      <PopoverPortal>
+      <PopoverPortal :to="portalTo">
         <PopoverContent
           :side="side"
           :side-offset="12"
@@ -452,6 +461,7 @@ const CARD = `${PANEL_SURFACE} pointer-events-auto! rounded-card w-80 max-w-[cal
           update-position-strategy="always"
           :trap-focus="false"
           :class="[CARD, 'z-[calc(var(--z-tour)+1)] data-[state=open]:animate-[popover-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[popover-out_var(--duration-fast)_ease-out] motion-reduce:animate-none']"
+          :data-lp-glide-position="gliding || undefined"
           role="dialog"
           :aria-label="step?.title"
           @pointerdown.stop
@@ -481,3 +491,4 @@ const CARD = `${PANEL_SURFACE} pointer-events-auto! rounded-card w-80 max-w-[cal
     </Transition>
   </Teleport>
 </template>
+

package/src/components/LpTruncate.vue

@@ -0,0 +1,135 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * Text that may not fit: cut with an ellipsis, and the whole of it in a tip —
+ * but only when something was actually cut. A tip that repeats the text you
+ * can already read in full is noise, and a list of names where every row
+ * pops one up teaches people to ignore them.
+ *
+ *   <LpTruncate :text="server.name" />
+ *   <LpTruncate :text="description" :lines="2" />
+ *   <LpTruncate :text="commitHash" middle :tail="6" copyable />
+ *
+ * Whether it was cut is measured, not guessed: a ResizeObserver re-checks when
+ * the box resizes (a sidebar collapsing, a column dragged), so the tip appears
+ * and disappears with the layout.
+ *
+ * `middle` cuts out of the middle instead (`/home/u…/report.pdf`), for ids,
+ * paths and hashes, whose two ends are what people compare. The browser has
+ * no CSS for that, so the longest fitting cut is found by measuring with the
+ * element's own font (see `middleTruncate`). Assistive tech always gets the
+ * full text: the cut version is only drawn.
+ *
+ * A truncated value becomes focusable, so the tip is reachable by keyboard too.
+ */
+import { computed, nextTick, onMounted, ref, watch } from "vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useResizeObserver } from "../composables/useResizeObserver"
+import LpCopyButton from "./LpCopyButton.vue"
+import LpTooltip from "./LpTooltip.vue"
+import { middleTruncate } from "./fieldText"
+
+const props = withDefaults(
+  defineProps<{
+    text: string
+    /** Lines before the cut. Ignored with `middle`, which is one line by nature. */
+    lines?: number
+    /** Cut from the middle, keeping both ends. */
+    middle?: boolean
+    /** With `middle`: how many characters the end keeps. Unset splits evenly. */
+    tail?: number
+    /** A copy button after the text, for values people paste elsewhere. */
+    copyable?: boolean
+    /** Where the tip opens. */
+    side?: "top" | "right" | "bottom" | "left"
+    /** Never show the tip, even when cut (the full text is shown elsewhere). */
+    noTooltip?: boolean
+  }>(),
+  { lines: 1, side: "top" },
+)
+
+const box = ref<HTMLElement | null>(null)
+const truncated = ref(false)
+const drawn = ref(props.text)
+
+let canvas: CanvasRenderingContext2D | null = null
+function measurer(el: HTMLElement): (s: string) => number {
+  canvas ??= document.createElement("canvas").getContext("2d")
+  const style = getComputedStyle(el)
+  // Built from the longhands: Firefox leaves the `font` shorthand empty in
+  // computed styles.
+  if (canvas) canvas.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`
+  const spacing = Number.parseFloat(style.letterSpacing) || 0
+  return (s) => (canvas ? canvas.measureText(s).width + spacing * Array.from(s).length : 0)
+}
+
+function measure() {
+  const el = box.value
+  if (!el) return
+  if (props.middle) {
+    const width = el.clientWidth
+    if (!width) return
+    const widthOf = measurer(el)
+    // Half a pixel of slack: canvas and layout round sub-pixels differently.
+    const fit = middleTruncate(props.text, (s) => widthOf(s) <= width - 0.5, { tail: props.tail })
+    drawn.value = fit
+    truncated.value = fit !== props.text
+    return
+  }
+  truncated.value = props.lines > 1 ? el.scrollHeight > el.clientHeight + 1 : el.scrollWidth > el.clientWidth + 0.5
+}
+
+useResizeObserver(box, () => measure())
+onMounted(() => {
+  measure()
+  // Web fonts land after mount and change every width.
+  void document.fonts?.ready.then(() => measure())
+})
+watch(
+  () => [props.text, props.lines, props.middle, props.tail],
+  async () => {
+    drawn.value = props.text
+    await nextTick()
+    measure()
+  },
+)
+
+const clampStyle = computed(() =>
+  !props.middle && props.lines > 1
+    ? { display: "-webkit-box", WebkitBoxOrient: "vertical" as const, WebkitLineClamp: props.lines, overflow: "hidden" }
+    : undefined,
+)
+const boxClass = computed(() =>
+  props.middle ? "block overflow-hidden whitespace-pre" : props.lines > 1 ? "break-words" : "block truncate",
+)
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() => "inline-flex min-w-0 max-w-full items-center gap-1 align-bottom")
+</script>
+
+<template>
+  <span :class="rootClass" v-bind="rest">
+    <LpTooltip :content="text" :side="side" :disabled="noTooltip || !truncated">
+      <span
+        ref="box"
+        class="min-w-0 flex-1 rounded-[2px] outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        :class="boxClass"
+        :style="clampStyle"
+        :tabindex="truncated && !noTooltip ? 0 : undefined"
+      >
+        <template v-if="middle">
+          <span aria-hidden="true">{{ drawn }}</span>
+          <!-- The full text, invisible and flat, gives the box its natural
+               width; without it the box would shrink to the cut text and
+               never grow back when room opens up. -->
+          <span aria-hidden="true" class="invisible block h-0">{{ text }}</span>
+          <span class="sr-only">{{ text }}</span>
+        </template>
+        <template v-else>{{ text }}</template>
+      </span>
+    </LpTooltip>
+    <LpCopyButton v-if="copyable" :value="text" size="xs" class="-my-1 size-6 shrink-0 text-muted" />
+  </span>
+</template>

package/src/components/LpTypewriter.vue

@@ -0,0 +1,236 @@
+<script lang="ts">
+// The root class is merged with the consumer's (useMergedAttrs).
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * Text typed out a character at a time, optionally cycling through several
+ * strings: type, hold, erase, type the next.
+ *
+ * For a line that suggests rather than states: the examples a search box can
+ * take ("Search servers", "Search logs", "Search people"), a hero line naming
+ * what a product does, a terminal-styled empty state. Not for anything the
+ * reader has to read to continue: it makes them wait for it.
+ *
+ *   <LpTypewriter text="Hello, operator." />
+ *   <LpTypewriter :text="['servers', 'logs', 'people']" loop />
+ *
+ * Keystrokes are uneven and pause after punctuation, so it reads as typing and
+ * not as a progress bar. Erasing stops at what the next string shares with the
+ * current one ("Search logs" to "Search people" erases only "logs").
+ *
+ * The box reserves the size of the longest string, so the line it sits in
+ * does not jump as characters come and go. `reserve` off lets it take the
+ * width of what is typed, for text that runs on in a sentence.
+ *
+ * Screen readers hear whole strings, never characters: a polite live region
+ * gets each string once it is fully typed. It starts typing the first time it
+ * is on screen and pauses while it is off screen or the tab is hidden. Under
+ * reduced motion whole strings appear and swap without typing.
+ */
+import { computed, onBeforeUnmount, ref, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
+import { useInView } from "../composables/useInView"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useReveal } from "../composables/useReveal"
+import { graphemes } from "./scramble"
+import { typewriterNext, typewriterStart, type TypewriterState } from "./typewriter"
+
+const props = withDefaults(
+  defineProps<{
+    /** One string, or several to cycle through. */
+    text: string | string[]
+    /** Ms per character, before the natural unevenness. */
+    speed?: number
+    /** Ms per erased character. */
+    eraseSpeed?: number
+    /** Ms a finished string stays before it is erased. */
+    hold?: number
+    /** Ms before the first keystroke, once it is on screen. */
+    startDelay?: number
+    /** After the last string, start over from the first. Without it the last string stays. */
+    loop?: boolean
+    /** Show the caret. */
+    caret?: boolean
+    /** Reserve the longest string's size so the surroundings hold still. */
+    reserve?: boolean
+    /** Hold it until true. Leave unset to start the first time it is on screen. */
+    play?: boolean
+    /** Element to render. */
+    as?: string
+  }>(),
+  {
+    speed: 55,
+    eraseSpeed: 28,
+    hold: 1800,
+    startDelay: 0,
+    loop: false,
+    caret: true,
+    reserve: true,
+    play: undefined,
+    as: "span",
+  },
+)
+
+const emit = defineEmits<{
+  /** A string has been typed out in full. */
+  typed: [index: number, text: string]
+  /** The last string is typed and nothing more will happen (never fires with `loop`). */
+  finished: []
+}>()
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  () => "lp-typewriter relative inline-grid whitespace-pre-wrap align-bottom",
+)
+
+const strings = computed(() => (Array.isArray(props.text) ? props.text : [props.text]))
+const split = computed(() => strings.value.map((s) => graphemes(s)))
+
+const state = ref<TypewriterState>(typewriterStart())
+const visible = computed(() => (split.value[state.value.index] ?? []).slice(0, state.value.length).join(""))
+const announced = ref(strings.value[0] ?? "")
+const idle = computed(() => state.value.phase === "holding" || state.value.phase === "done")
+
+const { el: revealEl, revealed } = useReveal({ immediate: () => props.play !== undefined })
+const { el: viewEl, inView } = useInView()
+const setRoot = (node: unknown) => {
+  const element = node instanceof Element ? node : null
+  revealEl.value = element
+  viewEl.value = element
+}
+const running = computed(() => (props.play ?? revealed.value) && inView.value)
+
+let timer: ReturnType<typeof setTimeout> | undefined
+// Time left on the step a pause interrupted, so going off screen mid-hold and
+// back does not restart the hold from zero or skip it.
+let pendingWait: number | null = null
+let dueAt = 0
+let started = false
+
+function schedule(wait: number) {
+  clearTimeout(timer)
+  timer = undefined
+  if (!Number.isFinite(wait)) return
+  pendingWait = wait
+  if (!running.value) return
+  dueAt = performance.now() + wait
+  timer = setTimeout(tick, wait)
+}
+
+function tick() {
+  timer = undefined
+  pendingWait = null
+  const options = { speed: props.speed, eraseSpeed: props.eraseSpeed, hold: props.hold, loop: props.loop }
+  let step = typewriterNext(state.value, split.value, options)
+  if (prefersReducedMotion()) {
+    // Whole strings: run the keystrokes of this phase at once and keep only
+    // the waits that are holds.
+    let guard = 0
+    while (step.typed === undefined && Number.isFinite(step.wait) && guard++ < 10_000) {
+      step = typewriterNext(step.state, split.value, options)
+    }
+  }
+  state.value = step.state
+  if (step.typed !== undefined) {
+    const text = strings.value[step.typed] ?? ""
+    announced.value = text
+    emit("typed", step.typed, text)
+    if (step.state.phase === "done") emit("finished")
+  }
+  if (step.wait === 0) return tick()
+  schedule(step.wait)
+}
+
+watch(
+  running,
+  (now) => {
+    if (!now) {
+      if (timer) pendingWait = Math.max(0, dueAt - performance.now())
+      clearTimeout(timer)
+      timer = undefined
+      return
+    }
+    if (!started) {
+      started = true
+      return schedule(prefersReducedMotion() ? 0 : props.startDelay)
+    }
+    if (pendingWait !== null) schedule(pendingWait)
+  },
+  { immediate: true },
+)
+
+// New strings: erase back to what the new first string shares, then type it.
+watch(
+  () => strings.value.join("\u0000"),
+  () => {
+    if (!started) return
+    const index = Math.min(state.value.index, split.value.length - 1)
+    state.value = { index: Math.max(0, index), length: Math.min(state.value.length, split.value[index]?.length ?? 0), phase: "erasing", to: 0 }
+    schedule(props.eraseSpeed)
+  },
+)
+
+watch(
+  () => props.loop,
+  (loop) => {
+    if (loop && state.value.phase === "done") {
+      state.value = { ...state.value, phase: "holding" }
+      schedule(props.hold)
+    }
+  },
+)
+
+onBeforeUnmount(() => clearTimeout(timer))
+</script>
+
+<template>
+  <component :is="as" :ref="setRoot" :class="rootClass" v-bind="rest">
+    <span class="sr-only" aria-live="polite">{{ announced }}</span>
+    <!-- The zero-width space keeps a baseline while nothing is typed yet, so
+         the empty box does not sink below the text around it. -->
+    <span aria-hidden="true" class="[grid-area:1/1]"
+      >&#8203;{{ visible
+      }}<span
+        v-if="caret"
+        class="lp-typewriter__caret"
+        :class="idle ? 'lp-typewriter__caret--blink' : ''"
+    /></span>
+    <template v-if="reserve">
+      <span v-for="(s, i) in strings" :key="i" aria-hidden="true" class="invisible [grid-area:1/1]"
+        >{{ s }}<span v-if="caret" class="lp-typewriter__caret"
+      /></span>
+    </template>
+  </component>
+</template>
+
+<style>
+.lp-typewriter__caret {
+  display: inline-block;
+  width: 0.08em;
+  min-width: 2px;
+  height: 1.05em;
+  margin-inline-start: 0.06em;
+  vertical-align: -0.15em;
+  border-radius: 1px;
+  background: var(--color-brand);
+}
+
+/* Solid while keys are moving, blinking while it waits: the same cue a real
+   text field gives about whether input is happening. */
+.lp-typewriter__caret--blink {
+  animation: lp-typewriter-blink 1.06s step-end infinite;
+}
+
+@keyframes lp-typewriter-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lp-typewriter__caret--blink {
+    animation: none;
+  }
+}
+</style>

package/src/components/LpUptimeBar.vue

@@ -12,6 +12,7 @@ import LpRollingText from "./LpRollingText.vue"
 import LpSkeleton from "./LpSkeleton.vue"
 import LpSwap from "./LpSwap.vue"
 import LpTooltip from "./LpTooltip.vue"
+import { TONES } from "./tone"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useLabels } from "../composables/useLpConfig"
 
@@ -64,11 +65,11 @@ const props = withDefaults(
  * made the whole row look faded rather than calm.)
  */
 const defaultColor: Record<UptimeStatus, string> = {
-  operational: "var(--color-action)",
-  degraded: "var(--color-accent)",
-  down: "var(--color-danger)",
-  maintenance: "var(--color-brand)",
-  empty: "var(--color-surface-soft)",
+  operational: TONES.success.color,
+  degraded: TONES.warning.color,
+  down: TONES.danger.color,
+  maintenance: TONES.brand.color,
+  empty: TONES.neutral.soft,
 }
 
 /* Only "no data yet" is held back; a real reading is always full strength. */

package/src/components/LpVideoBackdrop.vue

@@ -21,12 +21,12 @@ export default { inheritAttrs: false }
  *   paced on its own media clock, so a clip whose last frame does not match
  *   its first still loops without a visible cut.
  * - Speed (`rate`) and a darkening veil (`dim`) for text laid over it.
- * - Pausing where motion is unwanted: `paused`, a hidden tab, and the
- *   system's reduced-motion setting, which shows the first frame of the
+ * - Pausing where motion is unwanted: `paused`, a hidden tab, scrolled off
+ *   screen, and the system's reduced-motion setting, which shows the first frame of the
  *   stretch instead (`playWithReducedMotion` overrides it).
  * - Easing in and out of a pause (`easePlayback`): the picture slows to a
  *   standstill and gathers speed again instead of freezing and lurching. A
- *   hidden tab and reduced motion still stop at once.
+ *   hidden tab, a backdrop scrolled away and reduced motion still stop at once.
  *
  * The second element exists only while there is a seam to blend, so a plain
  * loop decodes one stream. Both play the same `src`: a URL the media element
@@ -34,6 +34,7 @@ export default { inheritAttrs: false }
  */
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { easeTravel, prefersReducedMotion } from "../composables/easing"
+import { useInView } from "../composables/useInView"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { isNativeLoop, planLoop, seamProgress, seamReached } from "./videoBackdrop"
 
@@ -101,7 +102,13 @@ const throttle = ref(1)
 const SLOWEST_RATE = 1 / 16
 
 const reducedMotion = ref(prefersReducedMotion())
-const pageHidden = ref(typeof document !== "undefined" && document.hidden)
+/*
+ * Unseen: the tab is hidden or the backdrop is off screen. A video decoding
+ * frames under the fold spends as much as one in view, and a page of them
+ * (a hero, then panels further down) runs them all at once.
+ */
+const { el: root, inView } = useInView()
+const unseen = computed(() => !inView.value)
 
 const plan = computed(() =>
   planLoop(duration.value, { start: props.start, end: props.end, crossfade: props.crossfade }),
@@ -109,7 +116,7 @@ const plan = computed(() =>
 const native = computed(() => isNativeLoop(plan.value, duration.value))
 const blended = computed(() => plan.value.fade > 0)
 const still = computed(() => reducedMotion.value && !props.playWithReducedMotion)
-const playing = computed(() => ready.value && !props.paused && !pageHidden.value && !still.value)
+const playing = computed(() => ready.value && !props.paused && !unseen.value && !still.value)
 
 function element(index: 0 | 1) {
   return index === 0 ? first.value : second.value
@@ -253,8 +260,8 @@ function sync() {
     rampTo(1, easing)
     return
   }
-  // Nobody sees a hidden tab, and a still is asked for outright: both stop at once.
-  if (!running.value || pageHidden.value || still.value || !easing) {
+  // Nobody watches a hidden tab or a backdrop off screen, and a still is asked for outright: all stop at once.
+  if (!running.value || unseen.value || still.value || !easing) {
     rampTo(throttle.value, 0)
     stopElements()
     return
@@ -301,23 +308,18 @@ watch(
 function onMotionChange(event: MediaQueryListEvent) {
   reducedMotion.value = event.matches
 }
-function onVisibility() {
-  pageHidden.value = document.hidden
-}
 let motionQuery: MediaQueryList | null = null
 
 onMounted(() => {
   applyRate()
   motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
   motionQuery.addEventListener("change", onMotionChange)
-  document.addEventListener("visibilitychange", onVisibility)
 })
 
 onBeforeUnmount(() => {
   if (frame) cancelAnimationFrame(frame)
   if (ramp) cancelAnimationFrame(ramp)
   motionQuery?.removeEventListener("change", onMotionChange)
-  document.removeEventListener("visibilitychange", onVisibility)
 })
 
 function layerStyle(index: 0 | 1) {
@@ -339,7 +341,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 </script>
 
 <template>
-  <div :class="rootClass" aria-hidden="true" v-bind="rest">
+  <div ref="root" :class="rootClass" aria-hidden="true" v-bind="rest">
     <!-- Under the video, which fades in over it: removing a still laid on top
          would flash the page between the two. -->
     <img v-if="poster" class="absolute inset-0 size-full" :style="{ objectFit: fit }" :src="poster" alt="" />

package/src/components/OptionContent.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { LpOptionBase } from "./options"
+import LpIcon from "./LpIcon.vue"
+
+defineProps<{ option: LpOptionBase<string | number> }>()
+</script>
+
+<template>
+  <span class="flex min-w-0 items-center gap-2.5">
+    <img v-if="option.image" :src="option.image" alt="" class="size-6 shrink-0 rounded-full object-cover" />
+    <LpIcon v-else-if="option.icon" :name="option.icon" :size="16" class="shrink-0 text-muted" />
+    <span class="flex min-w-0 flex-col">
+      <span class="truncate">{{ option.label ?? option.value }}</span>
+      <span v-if="option.description" class="truncate text-xs text-muted">{{ option.description }}</span>
+    </span>
+  </span>
+</template>