@leavepulse/ui 0.69.0 → 0.70.0

package/src/components/LpMagnetic.vue

@@ -0,0 +1,97 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * LpMagnetic — leans what it wraps toward a nearby pointer and lets it spring
+ * back when the pointer leaves.
+ *
+ *   <LpMagnetic><LpButton size="lg">Play</LpButton></LpMagnetic>
+ *
+ * For the one or two primary actions of a screen (the launcher's Play): the
+ * button meets the cursor a little way, which makes it feel like the obvious
+ * target. On every button it turns a toolbar into jelly, so keep it rare.
+ *
+ * The field reaches `reach` px past the element's edge. The position is read
+ * once per animation frame from a single listener on its window
+ * (usePointerFrame) and written to the `translate` property directly, so
+ * nothing re-renders. Mouse only; reduced
+ * motion leaves the element still. Layout is untouched: the wrapper keeps its
+ * place and only its paint moves.
+ */
+import { onBeforeUnmount, onMounted, ref } from "vue"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { usePointerFrame } from "../composables/usePointerFrame"
+import { magneticOffset } from "./dock"
+
+const props = withDefaults(
+  defineProps<{
+    /** How far past the element's edge, in px, the pull is felt. */
+    reach?: number
+    /** Fraction of the pointer's distance the element travels, 0–1. Small is better. */
+    strength?: number
+    /** Keep the wrapper, turn the pull off. */
+    disabled?: boolean
+  }>(),
+  { reach: 60, strength: 0.25, disabled: false },
+)
+
+const { class: classes, attrs: rest } = useMergedAttrs(() => "inline-block")
+
+const el = ref<HTMLElement | null>(null)
+let held = false
+
+function paint(lastX: number, lastY: number) {
+  const node = el.value
+  if (!node) return
+  const rect = node.getBoundingClientRect()
+  const dx = lastX - (rect.left + rect.width / 2)
+  const dy = lastY - (rect.top + rect.height / 2)
+  // The field is measured from the edge, so a wide button pulls from as far
+  // away along its length as a square one does.
+  const reach = props.reach + Math.max(rect.width, rect.height) / 2
+  const { x, y } = props.disabled ? { x: 0, y: 0 } : magneticOffset(dx, dy, reach, props.strength)
+  const pulling = x !== 0 || y !== 0
+  if (!pulling && !held) return
+  held = pulling
+  // Following: short and direct. Letting go: the settle curve, whose slight
+  // overshoot is the spring back.
+  node.style.transition = pulling
+    ? "translate 120ms ease-out"
+    : "translate var(--duration-slow) var(--ease-settle)"
+  node.style.translate = pulling ? `${x.toFixed(1)}px ${y.toFixed(1)}px` : ""
+}
+
+// `disabled` is not a dropped move here: the paint turns the pull off, so an
+// element held when it is disabled still springs back.
+const pointer = usePointerFrame({ paint })
+const onMove = (event: PointerEvent) => void pointer.move(event)
+
+// The pointer leaving the window sends no further moves, so the element would
+// stay leaning toward a cursor that is gone.
+function onOut(event: PointerEvent) {
+  if (event.relatedTarget || !held) return
+  pointer.moveTo(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY)
+}
+
+// The window the element actually lives in: inside LpFrame that is the
+// frame's, and the pointer events over it never reach the page's own window.
+let host: Window | null = null
+
+onMounted(() => {
+  host = el.value?.ownerDocument.defaultView ?? window
+  host.addEventListener("pointermove", onMove, { passive: true })
+  host.addEventListener("pointerout", onOut, { passive: true })
+})
+onBeforeUnmount(() => {
+  host?.removeEventListener("pointermove", onMove)
+  host?.removeEventListener("pointerout", onOut)
+})
+</script>
+
+<template>
+  <div ref="el" :class="classes" v-bind="rest">
+    <slot />
+  </div>
+</template>

package/src/components/LpMapPicker.vue

@@ -20,12 +20,14 @@ export default { inheritAttrs: false }
  * layer first and swaps the tile pyramid only once the animation lands, which
  * is how the zoom reads as continuous instead of as a hard cut between levels.
  */
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import { computed, onBeforeUnmount, ref, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
 import { type LatLon, OSM_TILES, type TileSource, project, tileUrl, unproject } from "./address"
 import LpIcon from "./LpIcon.vue"
+import LpLoader from "./LpLoader.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useLabels } from "../composables/useLpConfig"
+import { useResizeObserver } from "../composables/useResizeObserver"
 
 const props = withDefaults(
   defineProps<{
@@ -538,26 +540,19 @@ watch(
   },
 )
 
-let observer: ResizeObserver | undefined
-
-onMounted(() => {
-  const el = viewport.value
-  if (!el) return
-  observer = new ResizeObserver(([entry]) => {
-    viewWidth.value = entry.contentRect.width
-    viewHeight.value = entry.contentRect.height
-    if (!layers.value.length) {
-      pushLayer()
-      return
-    }
-    reanchor()
-    refreshTiles()
-  })
-  observer.observe(el)
+useResizeObserver(viewport, (entry) => {
+  if (!entry) return
+  viewWidth.value = entry.contentRect.width
+  viewHeight.value = entry.contentRect.height
+  if (!layers.value.length) {
+    pushLayer()
+    return
+  }
+  reanchor()
+  refreshTiles()
 })
 
 onBeforeUnmount(() => {
-  observer?.disconnect()
   clearTimeout(zoomTimer)
   clearTimeout(pruneTimer)
   stopGlide()
@@ -672,21 +667,24 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :disabled="disabled || locating"
         :title="text.locate"
         :aria-label="text.locate"
+        :aria-busy="locating || undefined"
         @click="locate"
       >
-        <LpIcon
-          :name="locating ? 'lucide:loader-circle' : 'lucide:crosshair'"
-          :size="16"
-          :class="locating ? 'animate-spin' : ''"
-        />
+        <!-- At once, since it takes the crosshair's place; silent, since the
+             button's aria-busy already says it. -->
+        <LpLoader v-if="locating" size="inline" :delay="0" aria-hidden="true" class="text-[16px]" />
+        <LpIcon v-else name="lucide:crosshair" :size="16" />
       </button>
     </div>
 
-    <LpIcon
-      v-if="loadingTiles"
-      name="lucide:loader-circle"
-      :size="16"
-      class="pointer-events-none absolute left-2 top-2 animate-spin text-white/70 drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]"
+    <!-- Driven by `active` so cached tiles show nothing and a pan does not
+         blink it. Silent: tiles load on every pan and zoom, and announcing
+         each batch would only be noise. -->
+    <LpLoader
+      :active="loadingTiles"
+      size="inline"
+      aria-hidden="true"
+      class="pointer-events-none absolute left-2 top-2 text-[16px] text-white/70 drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]"
     />
 
     <p

package/src/components/LpMasonry.vue

@@ -0,0 +1,247 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts" generic="T">
+/*
+ * LpMasonry — items of different heights packed into columns without the
+ * ragged gaps a grid leaves: memo cards, screenshots, mod tiles.
+ *
+ *   <LpMasonry :items="memos" item-key="id" :min-column-width="240">
+ *     <template #default="{ item }"><LpCard>{{ item.text }}</LpCard></template>
+ *   </LpMasonry>
+ *
+ * Why positioned, not CSS columns: `column-count` fills column by column, so
+ * the first items run down the left edge and adding one item reflows
+ * everything. Here each item goes, in order, into the shortest column, so the
+ * newest content stays at the top and an appended item leaves the rest alone.
+ *
+ * Every item is measured (one ResizeObserver for all of them) and placed with
+ * the `translate` property, so a change of column count, an item growing, or one being
+ * added or removed makes the others glide to their new places rather than
+ * jump; the container's height eases along. Items arrive with a short
+ * staggered entrance the first time the block is seen (useReveal), and later
+ * additions fade in where they land. Reduced motion places everything at once.
+ *
+ * DOM order is the items' order, which is also the reading order for
+ * keyboard and screen readers.
+ */
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue"
+import { easingToken, prefersReducedMotion } from "../composables/easing"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useReveal } from "../composables/useReveal"
+import { masonryColumnCount, placeMasonry } from "./masonry"
+import { staggerDelay } from "./reveal"
+
+const props = withDefaults(
+  defineProps<{
+    items: T[]
+    /** Field (or function) giving each item a stable identity, so it keeps its element across changes. */
+    itemKey?: keyof T | ((item: T, index: number) => string | number)
+    /**
+     * Fixed column count, or a table of minimum container widths to counts
+     * (`{ 0: 1, 560: 2, 900: 3 }`). Omit to fit as many `minColumnWidth`
+     * columns as the container allows — the right default, because a masonry
+     * usually lives in a panel whose width the viewport does not decide.
+     */
+    columns?: number | Record<number, number>
+    /** Narrowest a column may get when the count is derived from the width. */
+    minColumnWidth?: number
+    /** Upper bound for the derived count. */
+    maxColumns?: number
+    /** Space between items, in px, both ways. */
+    gap?: number
+    /** Play the entrance when the block is first seen. Off shows it as is. */
+    entrance?: boolean
+  }>(),
+  { minColumnWidth: 240, gap: 16, entrance: true },
+)
+
+defineSlots<{
+  default?(props: { item: T; index: number }): unknown
+}>()
+
+const { class: classes, attrs: rest } = useMergedAttrs(
+  () => "relative w-full transition-[height] duration-(--duration-slow) ease-(--ease-emphasized)",
+)
+
+function keyOf(item: T, index: number): string | number {
+  const key = props.itemKey
+  if (typeof key === "function") return key(item, index)
+  if (key != null) return item[key] as string | number
+  return index
+}
+
+const keys = computed(() => props.items.map((item, index) => keyOf(item, index)))
+
+// ── measuring ─────────────────────────────────────────────
+
+const root = ref<HTMLElement | null>(null)
+const width = ref(0)
+const heights = reactive(new Map<string | number, number>())
+const elements = new Map<string | number, HTMLElement>()
+const keyByElement = new WeakMap<Element, string | number>()
+
+let observer: ResizeObserver | null = null
+
+function heightOf(entry: ResizeObserverEntry): number {
+  const box = entry.borderBoxSize?.[0]
+  return box ? box.blockSize : (entry.target as HTMLElement).offsetHeight
+}
+
+function setItem(key: string | number, el: unknown) {
+  const previous = elements.get(key)
+  if (el instanceof HTMLElement) {
+    if (previous === el) return
+    if (previous) observer?.unobserve(previous)
+    elements.set(key, el)
+    keyByElement.set(el, key)
+    heights.set(key, el.offsetHeight)
+    observer?.observe(el)
+  } else if (previous && !keys.value.includes(key)) {
+    // Gone from the items (its element may still be fading out): stop
+    // measuring it. A re-added key gets a fresh element and a fresh entry.
+    observer?.unobserve(previous)
+    elements.delete(key)
+    heights.delete(key)
+  }
+}
+
+onMounted(() => {
+  if (typeof ResizeObserver === "undefined") {
+    width.value = root.value?.clientWidth ?? 0
+    return
+  }
+  observer = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.target === root.value) {
+        width.value = entry.contentRect.width
+        continue
+      }
+      const key = keyByElement.get(entry.target)
+      if (key !== undefined) heights.set(key, heightOf(entry))
+    }
+  })
+  if (root.value) {
+    width.value = root.value.clientWidth
+    observer.observe(root.value)
+  }
+  for (const el of elements.values()) observer.observe(el)
+})
+
+onBeforeUnmount(() => observer?.disconnect())
+
+// ── layout ────────────────────────────────────────────────
+
+const count = computed(() =>
+  masonryColumnCount(width.value, {
+    columns: props.columns,
+    minColumnWidth: props.minColumnWidth,
+    maxColumns: props.maxColumns,
+    gap: props.gap,
+  }),
+)
+
+const layout = computed(() =>
+  placeMasonry(
+    keys.value.map((key) => heights.get(key) ?? 0),
+    count.value,
+    width.value,
+    props.gap,
+  ),
+)
+
+const position = computed(() => {
+  const map = new Map<string | number, { x: number; y: number }>()
+  keys.value.forEach((key, index) => map.set(key, { x: layout.value.x[index]!, y: layout.value.y[index]! }))
+  return map
+})
+
+// An item glides only once it has been placed: a new one must appear where it
+// belongs, not fly in from the top-left corner where it was first measured.
+const placed = reactive(new Set<string | number>())
+const ready = computed(() => width.value > 0)
+
+watch(
+  [layout, ready],
+  () => {
+    if (!ready.value) return
+    requestAnimationFrame(() => {
+      for (const key of keys.value) placed.add(key)
+      for (const key of placed) if (!keys.value.includes(key)) placed.delete(key)
+    })
+  },
+  { flush: "post" },
+)
+
+function itemStyle(key: string | number) {
+  const at = position.value.get(key)
+  return {
+    width: `${layout.value.columnWidth}px`,
+    // `translate`, not `transform`: TransitionGroup runs its own FLIP on any
+    // child whose transition names `transform`, and that FLIP clears the inline
+    // transform when it finishes — every item landed in the top-left corner.
+    translate: at ? `${at.x}px ${at.y}px` : undefined,
+  }
+}
+
+// ── entrance ──────────────────────────────────────────────
+
+const { el: revealEl, revealed } = useReveal({ immediate: () => !props.entrance, threshold: 0.05 })
+watch(root, (node) => (revealEl.value = node))
+
+const hidden = computed(() => !ready.value || !revealed.value)
+
+watch(
+  () => ready.value && revealed.value,
+  (go) => {
+    if (!go || !props.entrance || prefersReducedMotion()) return
+    const easing = easingToken("ease-emphasized")
+    // Stagger by the order items are placed in, which reads top to bottom.
+    keys.value.forEach((key, index) => {
+      const el = elements.get(key)
+      el?.firstElementChild?.animate?.(
+        [
+          { opacity: 0, transform: "translate3d(0, 12px, 0)" },
+          { opacity: 1, transform: "none" },
+        ],
+        { duration: 460, delay: staggerDelay(index, 0, 40, 12), easing, fill: "backwards" },
+      )
+    })
+  },
+  { flush: "post" },
+)
+</script>
+
+<template>
+  <div
+    ref="root"
+    :class="classes"
+    role="list"
+    :style="{ height: `${layout.height}px`, opacity: hidden ? 0 : undefined }"
+    v-bind="rest"
+  >
+    <TransitionGroup
+      enter-active-class="transition-[opacity,scale] duration-(--duration-slow) ease-(--ease-emphasized)"
+      enter-from-class="opacity-0 scale-95"
+      leave-active-class="transition-[opacity,scale] duration-(--duration-medium) ease-(--ease-emphasized)"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <div
+        v-for="(item, index) in items"
+        :key="keys[index]"
+        :ref="(el) => setItem(keys[index]!, el)"
+        role="listitem"
+        class="absolute top-0 left-0"
+        :class="placed.has(keys[index]!) && 'transition-[translate] duration-(--duration-slow) ease-(--ease-emphasized)'"
+        :style="itemStyle(keys[index]!)"
+      >
+        <!-- The inner box takes the entrance, so its transform never fights
+             the placement transform on the outer one. -->
+        <div>
+          <slot :item="item" :index="index" />
+        </div>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>

package/src/components/LpModal.vue

@@ -17,6 +17,7 @@ import { useModalLayer } from "./modalDepth"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 /*
  * Stacking depth, so a dialog opened FROM a dialog sits above the one that
@@ -122,6 +123,7 @@ function close() {
 defineExpose({ close })
 
 function onEscape(event: KeyboardEvent) {
+  guardOutside(event)
   if (!props.dismissible) event.preventDefault()
 }
 
@@ -136,6 +138,7 @@ function onEscape(event: KeyboardEvent) {
  * attribute and every click behaves exactly as before.
  */
 const onInteractOutside = (event: Event) => {
+  guardOutside(event)
   if (!props.dismissible) return event.preventDefault()
   const target = event.target
   if (target instanceof Element && target.closest("[data-lp-modal-aside]")) {
@@ -285,11 +288,17 @@ watch(
   },
   { flush: "post" },
 )
+
+// Overlays open in the window this component renders in (an LpFrame's, inside one).
+const portalTo = usePortalTarget()
+// What happens in another document (the page around a frame, or a frame in
+// the page) is not "outside" for this layer.
+const guardOutside = useOutsideGuard()
 </script>
 
 <template>
   <DialogRoot :open="open" @update:open="onOpenChange">
-    <DialogPortal>
+    <DialogPortal :to="portalTo">
       <DialogOverlay
         :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested, 'lp-scrim--covered': layer.covered }"
         class="lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"

package/src/components/LpNotificationBell.vue

@@ -8,18 +8,21 @@
  * `select`. Mirrors the kit convention (cf. LpSidebar): data in, events out,
  * no data fetching inside.
  */
-import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref } from "vue"
+import { computed, getCurrentInstance } from "vue"
 import { useLabels } from "../composables/useLpConfig"
+import { useNow } from "../composables/useNow"
 import LpBadge from "./LpBadge.vue"
 import LpButton from "./LpButton.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpEmptyState from "./LpEmptyState.vue"
 import LpIcon from "./LpIcon.vue"
 import LpPopover from "./LpPopover.vue"
+import LpRelativeTime from "./LpRelativeTime.vue"
 import LpRollingText from "./LpRollingText.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import LpSkeleton from "./LpSkeleton.vue"
 import LpShift from "./LpShift.vue"
+import { toneLook, type ToneName } from "./tone"
 
 export interface NotificationItem {
   id: string
@@ -35,7 +38,7 @@ export interface NotificationItem {
    * consumers were mapping their own types onto raw palette classes, which is
    * the one place a theme cannot follow them.
    */
-  tone?: "brand" | "action" | "danger" | "accent" | "muted"
+  tone?: ToneName
   /** Optional deep link; the row becomes clickable when set. */
   link?: string
   /** ISO-8601 creation time; rendered as a relative label. */
@@ -63,10 +66,17 @@ export interface NotificationLabels {
   unread?: string
   /** Screen-reader marker on an unread row. */
   unreadItem?: string
-  /** Relative times; `{n}` is filled in. */
+  /**
+   * No longer read: times are worded by Intl in the app's locale. Still
+   * accepted so existing label objects keep type-checking.
+   * @deprecated
+   */
   justNow?: string
+  /** @deprecated See `justNow`. */
   minutes?: string
+  /** @deprecated See `justNow`. */
   hours?: string
+  /** @deprecated See `justNow`. */
   days?: string
 }
 
@@ -85,8 +95,9 @@ const props = withDefaults(
     /** Translations for the strings the bell renders itself. */
     labels?: NotificationLabels
     /**
-     * Formats `item.createdAt` for display. Defaults to a compact English
-     * relative time ("just now", "5m", "3h"); pass your own to localise it.
+     * Formats `item.createdAt` for display. Defaults to a narrow relative time
+     * in the app's locale ("now", "5m ago", "3h ago"); pass your own to word
+     * it differently.
      */
     formatTime?: (iso: string) => string
   }>(),
@@ -109,10 +120,6 @@ const text = useLabels(
     ariaLabel: "",
     unread: "{count} unread",
     unreadItem: "Unread",
-    justNow: "just now",
-    minutes: "{n}m",
-    hours: "{n}h",
-    days: "{n}d",
   },
   () => props.labels,
 )
@@ -152,14 +159,6 @@ const buttonLabel = computed(() =>
   hasUnread.value ? `${l.value.ariaLabel}, ${l.value.unread.replace("{count}", String(unread.value))}` : l.value.ariaLabel,
 )
 
-/** Icon tints for an unread row, keyed by the item's category tone. */
-const TONE_CLASS: Record<string, string> = {
-  brand: "bg-brand-soft text-brand",
-  action: "bg-action-soft text-action",
-  danger: "bg-danger-soft text-danger",
-  accent: "bg-accent-soft text-accent",
-  muted: "bg-surface-soft text-muted-strong",
-}
 
 /*
  * Which optional actions the consumer actually handles. A button for an event
@@ -199,8 +198,11 @@ const contextMenu = computed<ContextMenuItemDef[]>(() => {
   return items
 })
 
+// Picking an item goes somewhere (a page, a dialog, a tour step), so the feed
+// steps out of the way: left open it would cover what the item just opened.
 function onSelect(item: NotificationItem) {
   if (!item.read) emit("markRead", item.id)
+  open.value = false
   emit("select", item)
 }
 
@@ -226,7 +228,7 @@ function rowMenu(item: NotificationItem): ContextMenuItemDef[] {
     actions.push({
       label: l.value.open,
       icon: "lucide:external-link",
-      onSelect: () => emit("select", item),
+      onSelect: () => onSelect(item),
     })
   }
   actions.push({
@@ -239,35 +241,14 @@ function rowMenu(item: NotificationItem): ContextMenuItemDef[] {
   return actions
 }
 
-// Compact relative time ("just now", "5m", "3h", "2d"); falls back to a date.
-// A `formatTime` prop takes over entirely — that's the localisation seam.
-//
-// The clock is only read after mount and then ticks, so a server render and the
-// hydrating client agree (both print nothing) and "just now" does not stay
-// "just now" for the life of the page.
-const now = ref<number | null>(null)
-let clock: ReturnType<typeof setInterval> | undefined
-onMounted(() => {
-  now.value = Date.now()
-  clock = setInterval(() => (now.value = Date.now()), 30_000)
-})
-onBeforeUnmount(() => clearInterval(clock))
-
-function timeAgo(iso?: string): string {
-  if (!iso || now.value === null) return ""
-  if (props.formatTime) return props.formatTime(iso)
-  const then = new Date(iso).getTime()
-  if (Number.isNaN(then)) return ""
-  const secs = Math.max(0, Math.round((now.value - then) / 1000))
-  const n = (template: string, value: number) => template.replace("{n}", String(value))
-  if (secs < 45) return l.value.justNow
-  const mins = Math.round(secs / 60)
-  if (mins < 60) return n(l.value.minutes, mins)
-  const hrs = Math.round(mins / 60)
-  if (hrs < 24) return n(l.value.hours, hrs)
-  const days = Math.round(hrs / 24)
-  if (days < 7) return n(l.value.days, days)
-  return new Date(then).toLocaleDateString()
+// A `formatTime` prop takes over the row's time entirely; it is re-asked twice
+// a minute so its "5m" keeps moving. Without one, the row renders
+// LpRelativeTime, which words the time through Intl in the app's locale and
+// wakes only when its own text would change.
+const customNow = useNow(() => !!props.formatTime, { nextIn: () => 30_000 })
+function customTime(iso: string): string {
+  void customNow.value
+  return props.formatTime ? props.formatTime(iso) : ""
 }
 </script>
 
@@ -371,7 +352,7 @@ function timeAgo(iso?: string): string {
                  it is still unread. -->
             <span
               class="grid size-7 shrink-0 place-items-center rounded-control"
-              :class="item.read ? 'bg-surface-soft text-muted' : TONE_CLASS[item.tone ?? 'brand']"
+              :class="item.read ? 'bg-surface-soft text-muted' : toneLook(item.tone, 'brand').chip"
             >
               <LpIcon :name="item.icon || 'lucide:bell'" :size="15" />
             </span>
@@ -387,7 +368,10 @@ function timeAgo(iso?: string): string {
                 {{ item.body }}
               </span>
               <span v-if="item.createdAt" class="mt-0.5 block text-[11px] text-muted/70">
-                {{ timeAgo(item.createdAt) }}
+                <template v-if="formatTime">{{ customTime(item.createdAt) }}</template>
+                <!-- The row is itself a button or link, so the exact date goes
+                     to the native title rather than a focusable tooltip. -->
+                <LpRelativeTime v-else :date="item.createdAt" format="narrow" :tooltip="false" />
               </span>
             </span>
           </component>