@leavepulse/ui 0.55.0 → 0.57.0

package/dist/index.js

@@ -1,15 +1,15 @@
 import { _ } from "./chunks/LayoutCanvas-BkaGXTjx.js";
-import { _ as _2 } from "./chunks/LpAddressInput-iOJhmRzy.js";
+import { _ as _2 } from "./chunks/LpAddressInput-NUHmplCd.js";
 import { _ as _3 } from "./chunks/LpMapPicker-Cc84LaM3.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
-import { _ as _4 } from "./chunks/LpActionBar-CnfFVIwC.js";
+import { _ as _4 } from "./chunks/LpActionBar-C3hkVsFz.js";
 import { _ as _5 } from "./chunks/LpAlert-B6ilrM7T.js";
-import { _ as _6 } from "./chunks/LpAppShell-DcSXik4a.js";
+import { _ as _6 } from "./chunks/LpAppShell-Bl1Ch68N.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-C8IgSMsi.js";
 import { _ as _8 } from "./chunks/LpAvatar-LTvy0OkE.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
 import { _ as _10 } from "./chunks/LpBreadcrumbs-D4TsoFju.js";
-import { _ as _11 } from "./chunks/LpButton-CKSwC6Mu.js";
+import { _ as _11 } from "./chunks/LpButton-BdfZFNqi.js";
 import { _ as _12 } from "./chunks/LpCalendar-DrA2McTU.js";
 import { _ as _13 } from "./chunks/LpCard-DbjO5yaF.js";
 import { default as default2 } from "./components/LpChart.vue.js";
@@ -30,17 +30,17 @@ import { default as default6 } from "./components/LpPaletteStats.vue.js";
 import { default as default7 } from "./components/LpPaletteSwatches.vue.js";
 import { default as default8 } from "./components/LpKeys.vue.js";
 import { comboKeys, comboSteps } from "./components/keys.js";
-import { _ as _18 } from "./chunks/LpConfirmDialog-Ca-CTlxT.js";
-import { _ as _19 } from "./chunks/LpConfirmHost-BAaSaT2b.js";
+import { _ as _18 } from "./chunks/LpConfirmDialog-CrbUZgJE.js";
+import { _ as _19 } from "./chunks/LpConfirmHost-BgMIV8r9.js";
 import { confirm, useConfirm } from "./components/confirm.js";
 import { _ as _20 } from "./chunks/LpContextMenu-EF_90u3g.js";
 import { _ as _21 } from "./chunks/LpDatePicker-BrdFtSTy.js";
-import { _ as _22 } from "./chunks/LpDateRangePicker-Drd7EbIz.js";
+import { _ as _22 } from "./chunks/LpDateRangePicker-CxV5jW7p.js";
 import { _ as _23 } from "./chunks/LpRangeCalendar-DZuaRV0W.js";
 import { clampRange, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
 import { _ as _24 } from "./chunks/LpDisclosure-Cc23-JOT.js";
 import { _ as _25 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _26 } from "./chunks/LpDrawer-CBFVD624.js";
+import { _ as _26 } from "./chunks/LpDrawer-D9lLOC0C.js";
 import { _ as _27 } from "./chunks/LpDropdownMenu-DrpJJBp0.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
 import { _ as _28 } from "./chunks/LpEmptyState-BJbZXC8D.js";
@@ -60,15 +60,15 @@ import { _ as _37 } from "./chunks/LpLogViewer-BfgtXVKm.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _38 } from "./chunks/LpMediaGallery-BnlkN_1f.js";
 import { _ as _39 } from "./chunks/LpModal-JNa3B_Lr.js";
-import { _ as _40 } from "./chunks/LpModalNav-aWwc_5CD.js";
-import { _ as _41 } from "./chunks/LpNotificationBell-wZ3meeim.js";
+import { _ as _40 } from "./chunks/LpModalNav-DXyAyhQl.js";
+import { _ as _41 } from "./chunks/LpNotificationBell-DEL-RoHS.js";
 import { _ as _42 } from "./chunks/LpNumberField-B77O-z28.js";
 import { _ as _43 } from "./chunks/LpTimeField-Cqe7fXnh.js";
 import { _ as _44 } from "./chunks/LpNumberFlow-z4WPZcZu.js";
 import { _ as _45 } from "./chunks/LpOtpInput-PbeNJ5In.js";
 import { _ as _46 } from "./chunks/LpPagination-BcDlo3r_.js";
 import { _ as _47 } from "./chunks/LpPasswordInput-eKzQhbQP.js";
-import { _ as _48 } from "./chunks/LpPie-B7ti5qCH.js";
+import { _ as _48 } from "./chunks/LpPie-CXka8Jvx.js";
 import { _ as _49 } from "./chunks/LpPhoneInput-BCbrrhgE.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _50 } from "./chunks/LpPopover-DCKeqiVn.js";
@@ -83,7 +83,7 @@ import { _ as _58 } from "./chunks/LpSelect-DNIL6MB9.js";
 import { _ as _59 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _60 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _61 } from "./chunks/LpSidebar-C2oolgwy.js";
+import { _ as _61 } from "./chunks/LpSidebar-hZ8D1cVr.js";
 import { _ as _62 } from "./chunks/LpSkeleton-BB6XIV-w.js";
 import { _ as _63 } from "./chunks/LpSlider-Cuzmrd7p.js";
 import { _ as _64 } from "./chunks/LpRangeSlider-C1yF9-nP.js";
@@ -95,7 +95,7 @@ import { _ as _68 } from "./chunks/LpStepper-C7XiVKZj.js";
 import { _ as _69 } from "./chunks/LpSwitch-DG2AhXIL.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
-import { _ as _70 } from "./chunks/LpTableOfContents-BUcAfGPQ.js";
+import { _ as _70 } from "./chunks/LpTableOfContents-DYuqkByy.js";
 import { _ as _71 } from "./chunks/LpTabs-BMSBB78h.js";
 import { _ as _72 } from "./chunks/LpTagsInput-D1SuqbhB.js";
 import { addTags, splitTags } from "./components/tags.js";
@@ -103,10 +103,13 @@ import { _ as _73 } from "./chunks/LpTextarea-uuScWo6-.js";
 import { _ as _74 } from "./chunks/LpThemeSwitcher-Fz85BCRS.js";
 import { _ as _75 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _76 } from "./chunks/LpToaster-DTtWuKvq.js";
-import { _ as _77 } from "./chunks/LpTooltip-CXVKcOXT.js";
-import { _ as _78 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _79 } from "./chunks/LpTopologyCanvas-6ozNrQKh.js";
-import { _ as _80 } from "./chunks/LpUptimeBar-ugcv25xj.js";
+import { _ as _77 } from "./chunks/LpTooltip-suFCM34F.js";
+import { _ as _78 } from "./chunks/LpTour-C1TC2GyY.js";
+import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
+import { _ as _79 } from "./chunks/LpHintLayer-CI1oZ9Pd.js";
+import { _ as _80 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
+import { _ as _81 } from "./chunks/LpTopologyCanvas-6ozNrQKh.js";
+import { _ as _82 } from "./chunks/LpUptimeBar-B4ltCfno.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
@@ -127,6 +130,9 @@ import { LP_FIELD, fieldMessageId, provideField, useField, useFieldControl } fro
 import { FIELD_NOTICE_MS, useFieldNotice } from "./composables/useFieldNotice.js";
 import { easeOut, easeTravel, easingToken, prefersReducedMotion } from "./composables/easing.js";
 import { useReveal } from "./composables/useReveal.js";
+import { hints, vHint } from "./composables/useHints.js";
+import { scrollParent, scrollToElement } from "./composables/scroll.js";
+import { useMediaQuery } from "./composables/useMediaQuery.js";
 import { useAsyncTask } from "./composables/useAsyncTask.js";
 import { useRovingFocus } from "./composables/useRovingFocus.js";
 import { useFormDraft } from "./composables/useFormDraft.js";
@@ -137,7 +143,7 @@ import { useShift } from "./composables/useShift.js";
 import { useTilt } from "./composables/useTilt.js";
 import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
-import { _ as _81 } from "./chunks/LpThemeProvider-CQ2jC9TA.js";
+import { _ as _83 } from "./chunks/LpThemeProvider-CQ2jC9TA.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
 function defineTheme(base, overrides = {}) {
   const src = typeof base === "string" ? presets[base] : base;
@@ -209,6 +215,7 @@ export {
   _30 as LpFieldNotice,
   _29 as LpFileTree,
   _31 as LpFormField,
+  _79 as LpHintLayer,
   _32 as LpIcon,
   default10 as LpImageEditor,
   _33 as LpInfraNode,
@@ -260,15 +267,16 @@ export {
   _71 as LpTabs,
   _72 as LpTagsInput,
   _73 as LpTextarea,
-  _81 as LpThemeProvider,
+  _83 as LpThemeProvider,
   _74 as LpThemeSwitcher,
   _75 as LpTilt,
   _43 as LpTimeField,
   _76 as LpToaster,
   _77 as LpTooltip,
-  _78 as LpTooltipProvider,
-  _79 as LpTopologyCanvas,
-  _80 as LpUptimeBar,
+  _80 as LpTooltipProvider,
+  _81 as LpTopologyCanvas,
+  _78 as LpTour,
+  _82 as LpUptimeBar,
   _65 as LpVideoBackdrop,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
@@ -336,6 +344,8 @@ export {
   formatSize,
   formatTick,
   highlightParts,
+  hints,
+  holeOf,
   hotkeyConflicts,
   hotkeySteps,
   hsvToHsl,
@@ -370,6 +380,8 @@ export {
   normalizeRange,
   k as normalizeTheme,
   opaqueCss,
+  openContextMenu,
+  panelsAround,
   parseColor,
   parseCommandQuery,
   parseConfig,
@@ -405,6 +417,8 @@ export {
   ringWindow,
   o as rose,
   sameRange,
+  scrollParent,
+  scrollToElement,
   seamProgress,
   seamReached,
   sequenceProgress,
@@ -448,6 +462,7 @@ export {
   useLayout,
   useLinkComponent,
   useLpConfig,
+  useMediaQuery,
   useMergedAttrs,
   useMergedClass,
   useModalLayer,
@@ -460,5 +475,6 @@ export {
   useTilt,
   useToast,
   useZoomPan,
+  vHint,
   y as violet
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/component-names.ts

@@ -33,6 +33,7 @@ export const COMPONENT_NAMES = [
   "LpFieldNotice",
   "LpFileTree",
   "LpFormField",
+  "LpHintLayer",
   "LpIcon",
   "LpImageEditor",
   "LpInfraNode",
@@ -92,6 +93,7 @@ export const COMPONENT_NAMES = [
   "LpTooltip",
   "LpTooltipProvider",
   "LpTopologyCanvas",
+  "LpTour",
   "LpUptimeBar",
   "LpVideoBackdrop"
 ] as const

package/src/components/LpButton.vue

@@ -9,6 +9,7 @@ import { tv, type VariantProps } from "tailwind-variants"
 import { computed, type Component } from "vue"
 import { useLinkComponent } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import LpIcon from "./LpIcon.vue"
 import { resolveLink, type LinkTarget } from "./link"
 
 const button = tv({
@@ -47,6 +48,8 @@ const button = tv({
     square: { true: "aspect-square p-0" },
     // soft elevation glow keyed to the variant's colour
     glow: { true: "" },
+    // busy: the label fades out in place (no width jump) and a spinner sits on top
+    loading: { true: "relative cursor-progress !text-transparent hover:!text-transparent" },
   },
   compoundVariants: [
     { square: true, size: "xs", class: "size-8" },
@@ -96,6 +99,11 @@ const props = withDefaults(
     href?: string
     type?: "button" | "submit" | "reset"
     disabled?: boolean
+    /**
+     * Busy state: blocks clicks like `disabled` without dimming, fades the label out
+     * in place and shows a spinner over it, so the width never jumps. Sets `aria-busy`.
+     */
+    loading?: boolean
   }>(),
   { type: "button" },
 )
@@ -119,11 +127,20 @@ const isNativeButton = computed(() => resolved.value.is === "button")
  * own handler, which skips navigation once the event is default-prevented.
  */
 function blockDisabled(event: MouseEvent) {
-  if (!props.disabled || isNativeButton.value) return
+  if (!props.loading && (!props.disabled || isNativeButton.value)) return
   event.preventDefault()
   event.stopImmediatePropagation()
 }
 
+const SPINNER_TONE: Record<string, string> = {
+  solid: "text-ink-inverse",
+  action: "text-ink-inverse",
+  danger: "text-ink-inverse",
+  light: "text-[#0b1210]",
+  muted: "text-muted",
+}
+const spinnerTone = computed(() => SPINNER_TONE[props.variant ?? "solid"] ?? "text-ink")
+
 const linkProps = computed(() => {
   if (isNativeButton.value) return {}
   if (!props.disabled) return resolved.value.props
@@ -137,6 +154,7 @@ const { class: classes, attrs: rest } = useMergedAttrs(() =>
     block: props.block,
     square: props.square,
     glow: props.glow,
+    loading: props.loading,
   }),
 )
 </script>
@@ -149,9 +167,18 @@ const { class: classes, attrs: rest } = useMergedAttrs(() =>
     :disabled="isNativeButton ? disabled : undefined"
     :aria-disabled="!isNativeButton && disabled ? 'true' : undefined"
     :tabindex="!isNativeButton && disabled ? -1 : undefined"
+    :aria-busy="loading ? 'true' : undefined"
     :class="classes"
     @click.capture="blockDisabled"
   >
     <slot />
+    <span
+      v-if="loading"
+      class="pointer-events-none absolute inset-0 flex items-center justify-center animate-[fade-in_var(--duration-fast)_var(--ease-emphasized)] motion-reduce:animate-none"
+      :class="spinnerTone"
+      aria-hidden="true"
+    >
+      <LpIcon name="lucide:loader-circle" class="size-[1.15em] animate-spin motion-reduce:animate-none" />
+    </span>
   </component>
 </template>

package/src/components/LpDateRangePicker.vue

@@ -10,11 +10,12 @@ export default { inheritAttrs: false }
  * Two months sit side by side where there is room, one on a phone.
  */
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from "reka-ui"
-import { computed, onBeforeUnmount, onMounted, ref, useAttrs } from "vue"
+import { computed, ref, useAttrs } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { useLocale } from "../composables/useLocale"
 import { useLabels } from "../composables/useLpConfig"
 import { mergeClass } from "../composables/useMergedClass"
+import { useMediaQuery } from "../composables/useMediaQuery"
 import {
   clampRange,
   type DateRange,
@@ -113,17 +114,7 @@ function presetFits(preset: DateRangePreset): boolean {
   return !!clampRange(preset.range(), props.min, props.max)
 }
 
-const wide = ref(false)
-let query: MediaQueryList | undefined
-const onQuery = () => {
-  wide.value = !!query?.matches
-}
-onMounted(() => {
-  query = window.matchMedia("(min-width: 640px)")
-  onQuery()
-  query.addEventListener("change", onQuery)
-})
-onBeforeUnmount(() => query?.removeEventListener("change", onQuery))
+const wide = useMediaQuery("(min-width: 640px)")
 
 const shellSize = {
   sm: "h-(--size-control-sm) text-xs",

package/src/components/LpDrawer.vue

@@ -34,6 +34,7 @@ import {
 } from "vaul-vue"
 import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
 import { CLOSE_ICON } from "./dropdown"
+import { prefersReducedMotion } from "../composables/easing"
 import { useGlass } from "../composables/useGlass"
 import { useLabels } from "../composables/useLpConfig"
 import LpIcon from "./LpIcon.vue"
@@ -328,10 +329,6 @@ function edgeEnabled(): boolean {
 let track: { id: number; x: number; y: number; t: number; lastX: number; lastT: number; speed: number } | null = null
 const owner = Symbol("edge-pull")
 
-function reducedMotion(): boolean {
-  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
-}
-
 // A horizontally scrollable ancestor that can still move the way the finger
 // pulls (a carousel, a wide table) keeps the gesture: the pull only claims
 // what nothing under the finger wants.
@@ -414,7 +411,7 @@ function settle() {
             peek.value = 0
           }, 60),
         )
-      }, reducedMotion() ? 0 : 180),
+      }, prefersReducedMotion() ? 0 : 180),
     )
   } else {
     peek.value = 0
@@ -462,7 +459,7 @@ const previewStyle = computed(() => {
   const axis = dir.value === "right" ? off : -off
   return {
     transform: `translateX(${axis}%)`,
-    transition: peeking.value || reducedMotion() ? "none" : "transform 0.18s cubic-bezier(0.32, 0.72, 0, 1)",
+    transition: peeking.value || prefersReducedMotion() ? "none" : "transform 0.18s cubic-bezier(0.32, 0.72, 0, 1)",
     pointerEvents: "none" as const,
   }
 })
@@ -477,7 +474,7 @@ const previewStyle = computed(() => {
       v-show="peeking || peek > 0"
       class="lp-scrim pointer-events-none fixed inset-0"
       :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested }"
-      :style="{ zIndex: layer.scrim, opacity: peek, transition: peeking || reducedMotion() ? 'none' : 'opacity 0.18s ease-out' }"
+      :style="{ zIndex: layer.scrim, opacity: peek, transition: peeking || prefersReducedMotion() ? 'none' : 'opacity 0.18s ease-out' }"
     />
     <div
       v-show="peeking || peek > 0"

package/src/components/LpHintLayer.vue

@@ -0,0 +1,148 @@
+<script lang="ts">
+export interface HintNote {
+  title: string
+  text?: string
+}
+</script>
+
+<script setup lang="ts">
+/*
+ * Quiet "new" markers over `v-hint` elements, with a short note when the user
+ * reaches for one. Nothing pops up by itself: a dot sits on the control, and
+ * the note opens only when the pointer or focus lands on it. Reading the note
+ * (or simply using the control) is the app's cue to stop marking it.
+ *
+ * The layer only draws. Which ids are new, and when a read counts, is decided
+ * by the app from the registry's seen/used events.
+ */
+import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from "reka-ui"
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue"
+import { hints } from "../composables/useHints"
+import { useLabels } from "../composables/useLpConfig"
+import { PANEL_SURFACE, POPOVER_ANIM } from "./dropdown"
+import LpButton from "./LpButton.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** Ids to mark, most important first. */
+    fresh: string[]
+    notes: Record<string, HintNote>
+    /** At most this many dots at once, so a page full of news stays calm. */
+    limit?: number
+    labels?: Partial<typeof DEFAULT_LABELS>
+  }>(),
+  { limit: 3 },
+)
+
+const emit = defineEmits<{ (e: "read", id: string): void }>()
+
+const DEFAULT_LABELS = { gotIt: "Got it", badge: "New" }
+const labels = useLabels("hintLayer", DEFAULT_LABELS, () => props.labels)
+
+const OPEN_DELAY_MS = 350
+
+const shown = computed(() => props.fresh.filter((id) => hints.present(id) && props.notes[id]).slice(0, props.limit))
+const spots = ref<{ id: string; x: number; y: number }[]>([])
+const openId = ref<string | null>(null)
+const anchor = shallowRef<Element | null>(null)
+let frame = 0
+let timer: ReturnType<typeof setTimeout> | undefined
+
+function place() {
+  spots.value = shown.value.flatMap((id) => {
+    const el = hints.element(id)
+    if (!el) return []
+    const r = el.getBoundingClientRect()
+    return r.width || r.height ? [{ id, x: r.right, y: r.top }] : []
+  })
+  frame = shown.value.length ? requestAnimationFrame(place) : 0
+}
+
+watch(
+  shown,
+  (ids) => {
+    if (ids.length && !frame) frame = requestAnimationFrame(place)
+    if (openId.value && !ids.includes(openId.value)) openId.value = null
+  },
+  { immediate: true },
+)
+
+function reveal(id: string) {
+  clearTimeout(timer)
+  timer = setTimeout(() => {
+    if (!shown.value.includes(id)) return
+    anchor.value = hints.element(id)
+    openId.value = anchor.value ? id : null
+  }, OPEN_DELAY_MS)
+}
+
+function read() {
+  const id = openId.value
+  openId.value = null
+  if (id) emit("read", id)
+}
+
+let off: (() => void)[] = []
+onMounted(() => {
+  off = [
+    hints.on("hover", (id) => {
+      if (shown.value.includes(id)) reveal(id)
+    }),
+    hints.on("used", (id) => {
+      if (!shown.value.includes(id)) return
+      clearTimeout(timer)
+      if (openId.value === id) openId.value = null
+      emit("read", id)
+    }),
+  ]
+})
+
+onBeforeUnmount(() => {
+  cancelAnimationFrame(frame)
+  clearTimeout(timer)
+  for (const stop of off) stop()
+})
+
+const note = computed(() => (openId.value ? props.notes[openId.value] : undefined))
+</script>
+
+<template>
+  <Teleport to="body">
+    <button
+      v-for="spot in spots"
+      :key="spot.id"
+      type="button"
+      class="fixed z-(--z-popover) -translate-x-1/2 -translate-y-1/2 rounded-full p-1"
+      :style="{ left: `${spot.x}px`, top: `${spot.y}px` }"
+      :aria-label="`${labels.badge}: ${notes[spot.id]?.title ?? ''}`"
+      @pointerenter="reveal(spot.id)"
+      @focus="reveal(spot.id)"
+      @click="reveal(spot.id)"
+    >
+      <span class="relative flex size-2">
+        <span class="absolute inline-flex size-full animate-ping rounded-full bg-brand opacity-60 motion-reduce:animate-none" />
+        <span class="relative inline-flex size-2 rounded-full bg-brand ring-2 ring-surface" />
+      </span>
+    </button>
+    <PopoverRoot :open="!!openId" @update:open="(value) => !value && (openId = null)">
+      <PopoverAnchor v-if="anchor" :reference="anchor" />
+      <PopoverPortal>
+        <PopoverContent
+          side="bottom"
+          :side-offset="8"
+          :collision-padding="8"
+          :class="[PANEL_SURFACE, POPOVER_ANIM, 'z-(--z-popover) w-72 rounded-card p-3 text-sm text-ink outline-none']"
+        >
+          <p class="flex items-center gap-2 font-medium">
+            <span class="rounded-full bg-brand/15 px-1.5 text-[11px] text-brand">{{ labels.badge }}</span>
+            {{ note?.title }}
+          </p>
+          <p v-if="note?.text" class="mt-1.5 text-muted">{{ note.text }}</p>
+          <div class="mt-3 flex justify-end">
+            <LpButton size="sm" @click="read">{{ labels.gotIt }}</LpButton>
+          </div>
+        </PopoverContent>
+      </PopoverPortal>
+    </PopoverRoot>
+  </Teleport>
+</template>

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 { scrollParent } from "../composables/scroll"
 import { usePillTransition } from "../composables/usePillTransition"
 
 export interface TocLink {
@@ -113,24 +114,11 @@ function unfreeze() {
   safetyTimer = null
 }
 
-/*
- * The element that actually scrolls to the heading. Inside an app shell that is
- * a scroll region, not the window, and watching window.scrollY there saw no
- * movement and unfroze on the first frame.
- */
-function scrollerOf(el: HTMLElement): HTMLElement | null {
-  for (let node = el.parentElement; node; node = node.parentElement) {
-    const { overflowY } = getComputedStyle(node)
-    if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) return node
-  }
-  return null
-}
-
 function suppressSpyUntilScrollEnds(target: HTMLElement) {
   spySuppressed = true
   if (rafId != null) cancelAnimationFrame(rafId)
   if (safetyTimer != null) clearTimeout(safetyTimer)
-  const scroller = scrollerOf(target)
+  const scroller = scrollParent(target)
   const position = () => (scroller ? scroller.scrollTop : window.scrollY)
   let last = position()
   const tick = () => {

package/src/components/LpTooltip.vue

@@ -42,6 +42,7 @@ import {
   type SpringState,
 } from "../composables/usePillTransition"
 import { PANEL_SURFACE, TOOLTIP_ANIM } from "./dropdown"
+import { prefersReducedMotion } from "../composables/easing"
 
 const props = withDefaults(
   defineProps<{
@@ -116,9 +117,6 @@ const shared = injectTooltipProviderContext(null)
  */
 const PassThrough: FunctionalComponent = (_, { slots }) => slots.default?.()
 
-const reducedMotion = () =>
-  typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
-
 const target = { x: 0, y: 0 }
 const offset = ref({ x: 0, y: 0 })
 
@@ -174,7 +172,7 @@ const onPointerMove = (e: PointerEvent) => {
   const dir = props.side === "bottom" ? -1 : 1
   target.y = e.clientY - (rect.top + rect.height / 2) + half * dir
   // Without motion the tip goes straight to the reading instead of trailing.
-  if (reducedMotion()) {
+  if (prefersReducedMotion()) {
     offset.value = { x: target.x, y: target.y }
     return
   }