@leavepulse/ui 0.24.0 → 0.25.0

package/src/components/LpCodeBlock.vue

@@ -268,7 +268,7 @@ function onInput(e: Event) {
             v-else
           ><button
               type="button"
-              class="lp-fold-toggle flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+              class="lp-fold-toggle flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
               :aria-expanded="openState[seg.id]"
               @click="toggleFold(seg.id)"
             ><LpIcon

package/src/components/LpConfirmDialog.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // Confirmation dialog built on LpModal. Resolves an action via confirm/cancel.
+import { computed } from "vue"
 import LpButton from "./LpButton.vue"
+import LpIcon from "./LpIcon.vue"
 import LpModal from "./LpModal.vue"
 
 const props = withDefaults(
@@ -10,7 +12,23 @@ const props = withDefaults(
     description?: string
     confirmLabel?: string
     cancelLabel?: string
+    /**
+     * The action destroys something. Colours the confirm button, and marks the
+     * title with a warning glyph — a destructive prompt should be recognisable
+     * before the words are read, since it is the one dialog people dismiss on
+     * reflex.
+     */
     danger?: boolean
+    /**
+     * Override the marker: any iconify name, or `""` to leave the title plain —
+     * for a `danger` action whose dialog body already carries the warning and
+     * would otherwise state it twice.
+     *
+     * A string rather than `string | false`, deliberately: a union including
+     * Boolean makes Vue boolean-cast the prop, so an absent `icon` would arrive
+     * as `false` and be indistinguishable from a caller suppressing the marker.
+     */
+    icon?: string
     /**
      * The confirm action is in flight: the button disables and swaps to
      * `loadingLabel`, and confirming no longer closes the dialog — the owner
@@ -28,6 +46,22 @@ const emit = defineEmits<{
   (e: "cancel"): void
 }>()
 
+/*
+ * Only a destructive prompt is marked by default. A routine confirmation
+ * ("Save these changes?") with a warning badge cries wolf, and the badge stops
+ * meaning anything on the dialog where it matters.
+ *
+ * "Not given" cannot be tested with `undefined` here. A prop whose type union
+ * includes Boolean is boolean-cast by Vue, so an absent `icon` arrives as
+ * `false` — the same value the caller passes to suppress the marker — and the
+ * default silently never applied. A string is an override, and everything else
+ * (absent, or an explicit false) falls through to the danger default.
+ */
+const marker = computed<string>(() => {
+  if (props.icon !== undefined) return props.icon
+  return props.danger ? "lucide:triangle-alert" : ""
+})
+
 function confirm() {
   emit("confirm")
   // An async confirm owns its own dismissal; closing here would tear the
@@ -47,6 +81,21 @@ function cancel() {
     :description="description"
     @update:open="(v) => $emit('update:open', v)"
   >
+    <template v-if="marker" #title>
+      <span class="inline-flex items-center gap-2.5">
+        <span
+          class="flex size-9 shrink-0 items-center justify-center rounded-full"
+          :class="
+            danger
+              ? 'border border-danger/30 bg-danger-soft text-danger'
+              : 'border border-line bg-surface-soft text-muted-strong'
+          "
+        >
+          <LpIcon :name="marker" :size="20" />
+        </span>
+        {{ title }}
+      </span>
+    </template>
     <slot />
     <template #footer>
       <LpButton variant="ghost" :disabled="loading" @click="cancel">

package/src/components/LpDisclosure.vue

@@ -61,7 +61,7 @@ function onToggle(value: boolean) {
     @update:open="onToggle"
   >
     <CollapsibleTrigger
-      class="group flex w-full items-center gap-2 px-3 py-2.5 text-sm font-semibold text-ink outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      class="group flex w-full items-center gap-2 px-3 py-2.5 text-sm font-semibold text-ink outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
     >
       <LpIcon v-if="icon" :name="icon" :size="14" class="text-muted" />
       <span class="min-w-0 flex-1 text-left">

package/src/components/LpFileTreeNode.vue

@@ -10,6 +10,7 @@
  * Tab enters the tree once, arrows move within it. The parent owns that state.
  */
 import { computed } from "vue"
+import { easingToken, prefersReducedMotion } from "../composables/easing"
 import {
   fileIcon,
   formatModified,
@@ -110,35 +111,30 @@ function rowDelay(index: number): string {
   return `${Math.min(index * 18, 180)}ms`
 }
 
-/** Respect the OS setting — skip the height animation entirely. */
-function reducedMotion(): boolean {
-  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false
-}
-
 // Expand/collapse the branch by animating from 0 to its measured height. The
 // Web Animations API is used directly (rather than a CSS class) because the
 // target height isn't known until the rows are in the DOM.
 function onBranchEnter(el: Element, done: () => void) {
-  if (reducedMotion()) return done()
+  if (prefersReducedMotion()) return done()
   const height = (el as HTMLElement).scrollHeight
   el.animate(
     [
       { height: "0px", opacity: 0 },
       { height: `${height}px`, opacity: 1 },
     ],
-    { duration: 220, easing: "cubic-bezier(0.2, 0, 0, 1)" },
+    { duration: 220, easing: easingToken("ease-emphasized") },
   ).onfinish = () => done()
 }
 
 function onBranchLeave(el: Element, done: () => void) {
-  if (reducedMotion()) return done()
+  if (prefersReducedMotion()) return done()
   const height = (el as HTMLElement).scrollHeight
   el.animate(
     [
       { height: `${height}px`, opacity: 1 },
       { height: "0px", opacity: 0 },
     ],
-    { duration: 180, easing: "cubic-bezier(0.2, 0, 0, 1)" },
+    { duration: 180, easing: easingToken("ease-emphasized") },
   ).onfinish = () => done()
 }
 
@@ -163,10 +159,13 @@ function onActivate() {
   >
     <!-- Passthrough when the node has no menu, so the row keeps the native one. -->
     <LpContextMenu :items="node.menu ?? []">
+      <!-- The ring is drawn inset, like LpTable's rows: a row spans the full
+           width of the branch, and a branch clips its overflow to animate its
+           height, so an outset ring loses its left and right edge. -->
       <div
         :data-node-id="node.id"
         :tabindex="isFocused ? 0 : -1"
-        class="group/row relative flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-control py-1 pr-2 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+        class="group/row relative flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-control py-1 pr-2 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
         :class="[
           node.disabled
             ? 'cursor-not-allowed text-muted/50'

package/src/components/LpLogViewer.vue

@@ -8,6 +8,7 @@
  * needs.
  */
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, TransitionGroup, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -466,9 +467,7 @@ function restoreScrollAnchor() {
 function rideToBottom(smooth = true, force = false) {
   const el = viewport()
   if (!el) return
-  const reduce =
-    typeof window !== "undefined" &&
-    window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+  const reduce = prefersReducedMotion()
   const far = !force && el.scrollHeight - el.scrollTop - el.clientHeight > el.clientHeight
   el.scrollTo({ top: el.scrollHeight, behavior: smooth && !reduce && !far ? "smooth" : "auto" })
 }

package/src/components/LpMapPicker.vue

@@ -14,6 +14,7 @@
  * is how the zoom reads as continuous instead of as a hard cut between levels.
  */
 import { computed, onBeforeUnmount, onMounted, 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"
 
@@ -335,7 +336,7 @@ function onPointerUp(e: PointerEvent) {
  * rather than per-frame, which keeps the feel identical at 60 and 144 Hz.
  */
 function glide() {
-  if (reducedMotion() || Math.hypot(velocity.x, velocity.y) < 0.05) {
+  if (prefersReducedMotion() || Math.hypot(velocity.x, velocity.y) < 0.05) {
     velocity = { x: 0, y: 0 }
     return
   }
@@ -355,10 +356,6 @@ function glide() {
   glideFrame = requestAnimationFrame(step)
 }
 
-function reducedMotion() {
-  return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches
-}
-
 function panBy(dx: number, dy: number) {
   mapCenter.value = unproject(
     origin.value.x + dx + viewWidth.value / 2,

package/src/components/LpNotificationBell.vue

@@ -8,7 +8,7 @@
  * `select`. Mirrors the kit convention (cf. LpSidebar): data in, events out,
  * no data fetching inside.
  */
-import { computed } from "vue"
+import { computed, getCurrentInstance } from "vue"
 import LpBadge from "./LpBadge.vue"
 import LpButton from "./LpButton.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
@@ -24,6 +24,15 @@ export interface NotificationItem {
   body?: string
   /** Optional icon name (e.g. "lucide:check-circle"). */
   icon?: string
+  /**
+   * Colours the row's icon by what KIND of notification it is — a billing
+   * notice and a security one should not look alike at a glance.
+   *
+   * A named tone rather than a class, so the categories stay themeable:
+   * 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"
   /** Optional deep link; the row becomes clickable when set. */
   link?: string
   /** ISO-8601 creation time; rendered as a relative label. */
@@ -40,6 +49,7 @@ export interface NotificationItem {
 export interface NotificationLabels {
   title?: string
   markAllRead?: string
+  clear?: string
   markAsRead?: string
   markAsUnread?: string
   open?: string
@@ -76,6 +86,7 @@ const props = withDefaults(
 const l = computed(() => ({
   title: props.title ?? props.labels?.title ?? "Notifications",
   markAllRead: props.labels?.markAllRead ?? "Mark all read",
+  clear: props.labels?.clear ?? "Clear",
   markAsRead: props.labels?.markAsRead ?? "Mark as read",
   markAsUnread: props.labels?.markAsUnread ?? "Mark as unread",
   open: props.labels?.open ?? "Open",
@@ -94,6 +105,8 @@ const emit = defineEmits<{
   (e: "markRead", id: string): void
   (e: "markUnread", id: string): void
   (e: "markAllRead"): void
+  /** Empty the whole feed. The header button only appears when this is bound. */
+  (e: "clear"): void
   (e: "dismiss", id: string): void
   (e: "select", item: NotificationItem): void
 }>()
@@ -106,21 +119,52 @@ const badgeLabel = computed(() =>
 )
 const hasUnread = computed(() => unread.value > 0)
 
+/** 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
+ * nobody listens to is a button that does nothing when pressed.
+ *
+ * NOT `useAttrs()`: a listener for a DECLARED emit is removed from `$attrs`, so
+ * an `@clear` handler never appears there. The raw vnode props are where it
+ * survives.
+ */
+const instance = getCurrentInstance()
+const handlesClear = computed(() => Boolean(instance?.vnode.props?.onClear))
+
 // Right-click quick actions on the bell. "Open" is intentionally omitted — a
 // left-click already opens the feed, so the menu only carries actions you
 // can't get from the click itself. Because `open` is a defineModel we open on
 // left-click ourselves (the popover is anchor-only), which frees the trigger
 // button to also host LpContextMenu without the two fighting over the trigger.
-const contextMenu = computed<ContextMenuItemDef[]>(() =>
-  props.menuItems ?? [
+const contextMenu = computed<ContextMenuItemDef[]>(() => {
+  if (props.menuItems) return props.menuItems
+  const items: ContextMenuItemDef[] = [
     {
       label: l.value.markAllRead,
       icon: "lucide:check-check",
       disabled: !hasUnread.value,
       onSelect: () => emit("markAllRead"),
     },
-  ],
-)
+  ]
+  // Same rule as the header button: offered only when the caller can act on it.
+  if (handlesClear.value) {
+    items.push({
+      label: l.value.clear,
+      icon: "lucide:trash-2",
+      disabled: !props.items.length,
+      onSelect: () => emit("clear"),
+    })
+  }
+  return items
+})
 
 function onSelect(item: NotificationItem) {
   if (!item.read) emit("markRead", item.id)
@@ -216,14 +260,28 @@ function timeAgo(iso?: string): string {
 
     <header class="flex items-center justify-between gap-2 px-3 py-2.5">
       <span class="text-sm font-semibold">{{ l.title }}</span>
-      <button
-        v-if="hasUnread"
-        type="button"
-        class="rounded-md px-1.5 py-0.5 text-xs font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:bg-brand-soft"
-        @click="emit('markAllRead')"
-      >
-        {{ l.markAllRead }}
-      </button>
+      <span class="flex items-center gap-0.5">
+        <!-- Emptying the feed is a different act from reading it, and it is
+             destructive, so it is muted and sits away from the primary action.
+             Only offered when a listener is bound: a caller with no way to
+             clear its feed must not be given a button that does nothing. -->
+        <button
+          v-if="items.length && handlesClear"
+          type="button"
+          class="rounded-md px-1.5 py-0.5 text-xs font-medium text-muted outline-none transition-colors hover:bg-surface-soft hover:text-ink focus-visible:bg-surface-soft"
+          @click="emit('clear')"
+        >
+          {{ l.clear }}
+        </button>
+        <button
+          v-if="hasUnread"
+          type="button"
+          class="rounded-md px-1.5 py-0.5 text-xs font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:bg-brand-soft"
+          @click="emit('markAllRead')"
+        >
+          {{ l.markAllRead }}
+        </button>
+      </span>
     </header>
 
     <!-- Skeleton → empty → feed are three different heights, so the panel
@@ -250,13 +308,16 @@ function timeAgo(iso?: string): string {
             :is="item.link ? 'a' : 'button'"
             :href="item.link || undefined"
             :type="item.link ? undefined : 'button'"
-            class="group/notif flex w-full items-start gap-2.5 rounded-control px-2 py-2 text-left outline-none transition-colors hover:bg-white/[0.05] focus-visible:bg-white/[0.05]"
+            class="group/notif flex w-full items-start gap-2.5 rounded-control px-2 py-2 text-left outline-none transition-colors hover:bg-surface-soft focus-visible:bg-surface-soft"
             :class="item.read ? '' : 'bg-brand-soft/35'"
             @click="onSelect(item)"
           >
+            <!-- A read notification is always muted: the tone says what kind of
+                 thing it is, and that only needs to compete for attention while
+                 it is still unread. -->
             <span
               class="grid size-7 shrink-0 place-items-center rounded-control"
-              :class="item.read ? 'bg-surface-soft text-muted' : 'bg-brand-soft text-brand'"
+              :class="item.read ? 'bg-surface-soft text-muted' : TONE_CLASS[item.tone ?? 'brand']"
             >
               <LpIcon :name="item.icon || 'lucide:bell'" :size="15" />
             </span>