@leavepulse/ui 0.45.0 → 0.46.0

package/src/components/LpDropzone.vue

@@ -23,7 +23,7 @@ export default { inheritAttrs: false }
  * invisible to a keyboard: nothing focusable, nothing that Enter activates, and
  * the file dialog unreachable without a mouse.
  */
-import { onBeforeUnmount, onMounted, ref, watch } from "vue"
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useReveal } from "../composables/useReveal"
 import LpIcon from "./LpIcon.vue"
@@ -35,6 +35,13 @@ const props = withDefaults(
     /** Take more than one at a time. */
     multiple?: boolean
     disabled?: boolean
+    /**
+     * A drag the page itself cannot see is over the zone. Desktop shells
+     * (Tauri, Electron) often take file drags natively, and the page then gets
+     * no dragenter or dragover at all, only the shell's own events; the app
+     * hit-tests those and passes the answer here so the zone lights up the same.
+     */
+    dragOver?: boolean
     /**
      * Also accept a paste anywhere on the page, not only while focused.
      * Off by default: two zones both listening would each take the same
@@ -95,11 +102,12 @@ const input = ref<HTMLInputElement | null>(null)
  * may not — one stuck increment and the zone stays lit after the drag is long
  * gone, which is exactly what it did.
  */
-const over = ref(false)
+const pointerOver = ref(false)
+const over = computed(() => pointerOver.value || (props.dragOver && !props.disabled))
 
 function onDragOver(event: DragEvent) {
   if (props.disabled) return
-  over.value = true
+  pointerOver.value = true
   if (event.dataTransfer) event.dataTransfer.dropEffect = "copy"
 }
 
@@ -108,7 +116,7 @@ function onDragLeave(event: DragEvent) {
   // drag merely crossed a child, and the highlight stays.
   const to = event.relatedTarget as Node | null
   if (to && (event.currentTarget as HTMLElement).contains(to)) return
-  over.value = false
+  pointerOver.value = false
 }
 
 /** Does the file match `accept`? Mirrors the input's own matching so a drop
@@ -146,7 +154,7 @@ function take(list: FileList | File[] | null | undefined) {
 }
 
 function onDrop(event: DragEvent) {
-  over.value = false
+  pointerOver.value = false
   take(event.dataTransfer?.files)
 }
 

package/src/components/LpModal.vue

@@ -325,14 +325,14 @@ watch(
       <div
         ref="panelRef"
         class="relative flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line shadow-panel"
-        :class="[frosted ? (layer.nested ? 'lp-glass-overlay--nested' : 'lp-glass-overlay') : 'bg-surface-raised', widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
+        :class="[frosted ? (layer.nested ? 'lp-glass-overlay lp-glass-overlay--nested' : 'lp-glass-overlay') : 'bg-surface-raised', widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
         :style="{ ...(width ? { width } : {}), ...(hasAside ? { alignSelf: 'stretch' } : {}) }"
       >
         <DialogTitle v-if="!(title || $slots.title) && ariaLabel" class="sr-only">
           {{ ariaLabel }}
         </DialogTitle>
         <header v-if="title || $slots.title" class="flex shrink-0 items-start justify-between gap-4 p-5 pb-3">
-          <div class="flex flex-col gap-1">
+          <div class="flex min-w-0 flex-1 flex-col gap-1">
             <DialogTitle class="text-base font-semibold text-ink">
               <slot name="title">{{ title }}</slot>
             </DialogTitle>
@@ -340,6 +340,12 @@ watch(
               {{ description }}
             </DialogDescription>
           </div>
+          <!-- Controls that act on the whole dialog (a period, a filter) sit
+               beside the close button, not inside the title: the title is a
+               heading, and a button in it would be read out as part of it. -->
+          <div v-if="$slots.actions" class="flex shrink-0 flex-wrap items-center justify-end gap-2">
+            <slot name="actions" />
+          </div>
           <!-- Marked so the auto-focus pass skips it: it is first in the DOM
                and last in usefulness. Still reachable by Tab and Escape. -->
           <DialogClose

package/src/components/LpModalNav.vue

@@ -14,6 +14,7 @@
  * one the sections are simply unreachable on a phone.
  */
 import { computed, ref } from "vue"
+import { useGlass } from "../composables/useGlass"
 import { useLabels } from "../composables/useLpConfig"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
@@ -127,6 +128,16 @@ const triggerClass = computed(() => TRIGGER_VISIBILITY[props.mobileBreakpoint])
  * consuming app's scan.
  */
 const railStyle = { maxHeight: "min(90vh, calc(100dvh - 2rem))" }
+
+/*
+ * The rail is part of the dialog, so it takes the same surface: a glass
+ * dialog beside a solid rail read as two different windows.
+ */
+const frosted = useGlass(() => props.glass)
+const railPanel = computed(() => [
+  "rounded-card border border-line p-2 shadow-panel",
+  frosted.value ? "lp-glass-overlay" : "bg-surface-raised",
+])
 </script>
 
 <template>
@@ -158,7 +169,7 @@ const railStyle = { maxHeight: "min(90vh, calc(100dvh - 2rem))" }
           responsive
           :mobile-breakpoint="mobileBreakpoint"
           :style="railStyle"
-          class="rounded-card border border-line bg-surface-raised p-2 shadow-panel"
+          :class="railPanel"
         />
       </div>
     </template>
@@ -178,7 +189,7 @@ const railStyle = { maxHeight: "min(90vh, calc(100dvh - 2rem))" }
           responsive
           :mobile-breakpoint="mobileBreakpoint"
           :style="railStyle"
-          class="rounded-card border border-line bg-surface-raised p-2 shadow-panel"
+          :class="railPanel"
         />
       </div>
     </template>
@@ -200,6 +211,10 @@ const railStyle = { maxHeight: "min(90vh, calc(100dvh - 2rem))" }
       </div>
     </template>
 
+    <template v-if="$slots.actions" #actions>
+      <slot name="actions" />
+    </template>
+
     <slot />
 
     <template v-if="$slots.footer" #footer>

package/src/components/LpScrollArea.vue

@@ -13,6 +13,7 @@ import {
   ScrollAreaThumb,
   ScrollAreaViewport,
 } from "reka-ui"
+import { prefersReducedMotion } from "../composables/easing"
 
 // `fade` softens whichever of the top/bottom edges currently has content beyond
 // it, so a clipped list reads as continuing rather than as cut off. On by
@@ -182,6 +183,29 @@ watch(
 
 onBeforeUnmount(stopEdgeWatch)
 
+/*
+ * A press on the bar beside the thumb. reka treats any press on the track as
+ * "put the thumb's middle under the pointer" and sets the scroll in one go,
+ * so a press that just missed the narrow thumb yanked the content by half a
+ * thumb, and a press further away teleported it. Like a native bar, a press
+ * off the thumb now pages one viewport towards the pointer, smoothly; the
+ * thumb itself has a hit area as wide as the bar (see its `before:`), so a
+ * press that meant to grab it does.
+ */
+function onTrackPointerDown(event: PointerEvent, axis: "x" | "y") {
+  const el = viewportEl.value
+  const bar = event.currentTarget as HTMLElement
+  const thumb = bar.querySelector<HTMLElement>("[data-lp-thumb]")
+  if (!el || !thumb || event.button !== 0 || thumb.contains(event.target as Node)) return
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  const rect = thumb.getBoundingClientRect()
+  const before = axis === "y" ? event.clientY < rect.top : event.clientX < rect.left
+  const step = (axis === "y" ? el.clientHeight : el.clientWidth) * 0.85 * (before ? -1 : 1)
+  const behavior = prefersReducedMotion() ? "auto" : "smooth"
+  el.scrollBy(axis === "y" ? { top: step, behavior } : { left: step, behavior })
+}
+
 function onThumbPointerDown() {
   dragging.value = true
   const stop = () => {
@@ -230,6 +254,7 @@ function onThumbPointerDown() {
       class="group z-1 flex w-3.5 touch-none select-none justify-end py-px pl-2.5 pr-px"
       :class="barFade"
       :style="barInsetTop ? { marginTop: barInsetTop } : undefined"
+      @pointerdown.capture="onTrackPointerDown($event, 'y')"
     >
       <!-- Sized with min-width, not width: reka sets an inline
            `width: var(--reka-scroll-area-thumb-width)` on the thumb, and for a
@@ -238,7 +263,8 @@ function onThumbPointerDown() {
            leaving an invisible thumb. A minimum wins over that without fighting
            the positioning reka owns. -->
       <ScrollAreaThumb
-        class="min-w-1 rounded-l-pill bg-brand/40 transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand"
+        data-lp-thumb
+        class="relative min-w-1 rounded-l-pill bg-brand/40 before:absolute before:inset-y-0 before:right-0 before:-left-2.5 before:content-[''] transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand"
         @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>
@@ -247,9 +273,11 @@ function onThumbPointerDown() {
       orientation="horizontal"
       class="group z-1 flex h-3.5 flex-col touch-none select-none justify-end px-px pb-px pt-2.5"
       :class="barFade"
+      @pointerdown.capture="onTrackPointerDown($event, 'x')"
     >
       <ScrollAreaThumb
-        class="min-h-1 rounded-t-pill bg-brand/40 transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand"
+        data-lp-thumb
+        class="relative min-h-1 rounded-t-pill bg-brand/40 before:absolute before:inset-x-0 before:bottom-0 before:-top-2.5 before:content-[''] transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand"
         @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>

package/src/components/LpTable.vue

@@ -1098,7 +1098,7 @@ const barInsetTop = computed(() =>
   <LpScrollArea
     v-bind="scrollAttrs"
     :fade="false"
-    class="min-h-0 flex-1 rounded-card border border-line"
+    class="min-h-0 flex-1 rounded-card border border-line bg-surface"
     :style="load && floor ? { minHeight: `${floor + 2}px` } : undefined"
     :bar-inset-top="barInsetTop"
   >

package/src/components/LpToaster.vue

@@ -13,13 +13,14 @@ import {
 } from "reka-ui"
 import { nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
+import { useClipboard } from "../composables/useClipboard"
 import { useLabels } from "../composables/useLpConfig"
 import { useToast, type ToastItem } from "../composables/useToast"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 
-const props = defineProps<{ labels?: Partial<{ dismiss: string }> }>()
-const text = useLabels("toast", { dismiss: "Dismiss" }, () => props.labels)
+const props = defineProps<{ labels?: Partial<{ dismiss: string; copy: string; copied: string }> }>()
+const text = useLabels("toast", { dismiss: "Dismiss", copy: "Copy message", copied: "Copied" }, () => props.labels)
 
 const { queue, dismiss } = useToast()
 
@@ -211,8 +212,32 @@ async function settle(t: ToastItem, run: () => void | Promise<void>) {
   }
 }
 
+/*
+ * An error is something people need to pass on, so its text can be selected
+ * and copied. reka sets user-select: none on the toast and starts a swipe on
+ * any press, which made the message impossible to select: the description
+ * opts back into selection and keeps its presses from starting a swipe. A
+ * click that ends a selection is not a click on the toast.
+ */
+const { copy } = useClipboard()
+const copiedId = ref<string | null>(null)
+let copiedTimer: ReturnType<typeof setTimeout> | undefined
+const copyable = (t: ToastItem) => t.variant === "error" || t.variant === "warning"
+
+async function copyToast(t: ToastItem) {
+  if (!(await copy([t.title, t.message].filter(Boolean).join("\n")))) return
+  copiedId.value = tag(t)
+  clearTimeout(copiedTimer)
+  copiedTimer = setTimeout(() => (copiedId.value = null), 1500)
+}
+onBeforeUnmount(() => clearTimeout(copiedTimer))
+
+function selecting(): boolean {
+  return Boolean(window.getSelection()?.toString())
+}
+
 function runClick(t: ToastItem) {
-  if (swiped === tag(t)) return
+  if (swiped === tag(t) || selecting()) return
   if (t.onClick) return settle(t, t.onClick)
 }
 
@@ -250,7 +275,10 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
           <ToastTitle v-if="t.title" class="text-sm font-semibold text-ink">
             {{ t.title }}
           </ToastTitle>
-          <ToastDescription class="break-words text-xs text-muted">
+          <ToastDescription
+            class="cursor-text select-text break-words text-xs text-muted"
+            @pointerdown.stop
+          >
             {{ t.message }}
           </ToastDescription>
 
@@ -274,6 +302,16 @@ function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[numbe
           </div>
         </div>
 
+        <button
+          v-if="copyable(t)"
+          type="button"
+          class="-mt-1 rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+          :aria-label="copiedId === tag(t) ? text.copied : text.copy"
+          :title="copiedId === tag(t) ? text.copied : text.copy"
+          @click.stop="copyToast(t)"
+        >
+          <LpIcon :name="copiedId === tag(t) ? 'lucide:check' : 'lucide:copy'" :size="15" />
+        </button>
         <button
           type="button"
           class="group -mr-1 -mt-1 rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"

package/src/components/MenuTitle.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/*
+ * The heading row of a menu: what the menu acts on, so a right-click on one of
+ * many look-alike rows says which one it caught before anything is chosen.
+ * Not an item: it takes no focus or highlight, and long names truncate rather
+ * than widening the panel. Internal: LpContextMenu and LpDropdownMenu render it
+ * from their `title` props.
+ */
+import LpIcon from "./LpIcon.vue"
+
+defineProps<{
+  title: string
+  subtitle?: string
+  icon?: string
+  image?: string
+}>()
+</script>
+
+<template>
+  <div class="flex max-w-72 min-w-0 items-center gap-2 px-2.5 pt-1.5 pb-2" aria-hidden="true">
+    <img v-if="image" :src="image" alt="" class="size-7 shrink-0 rounded-md object-cover" />
+    <span
+      v-else-if="icon"
+      class="grid size-7 shrink-0 place-items-center rounded-md bg-surface-soft text-muted"
+    >
+      <LpIcon :name="icon" :size="15" />
+    </span>
+    <span class="flex min-w-0 flex-col">
+      <span class="truncate text-sm font-medium text-ink">{{ title }}</span>
+      <span v-if="subtitle" class="truncate text-xs text-muted">{{ subtitle }}</span>
+    </span>
+  </div>
+  <div class="mb-1 h-px bg-line" role="presentation" />
+</template>

package/src/composables/useClipboard.ts

@@ -13,7 +13,9 @@ import { useToast } from "./useToast"
  *
  * Why every call is allowed to fail: the Clipboard API needs a secure context
  * and, in some browsers, a permission. It is absent over plain http, rejects
- * outside a user gesture, and is missing entirely in a non-DOM test runner. A
+ * outside a user gesture, and is missing entirely in a non-DOM test runner.
+ * Where it is missing or refuses, the old copy command is tried before
+ * giving up (see `writeLegacy`). A
  * copy that cannot happen is a disappointment, not an exception, and a rejected
  * promise reaching a component means an unhandled rejection in the console of
  * an app that did nothing wrong.
@@ -23,6 +25,51 @@ import { useToast } from "./useToast"
  * than any message, and the two are complementary rather than alternatives.
  */
 
+/** The Clipboard API, where there is one and it agrees. */
+async function writeAsync(text: string): Promise<boolean> {
+  if (typeof navigator === "undefined" || !navigator.clipboard) return false
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/*
+ * The old copy command, for where the Clipboard API is missing or refuses.
+ * Embedded Chromium (CEF in a Tauri or Electron-like shell) rejects
+ * `writeText` when the host answers no permission requests, and plain http
+ * has no API at all, while a copy command run inside the click still works
+ * there. It copies the selection, so a throwaway text field holds the text
+ * and the page's own selection and focus are put back afterwards.
+ */
+function writeLegacy(text: string): boolean {
+  if (typeof document === "undefined") return false
+  const active = document.activeElement as HTMLElement | null
+  const selection = document.getSelection()
+  const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, i) => selection.getRangeAt(i)) : []
+  const field = document.createElement("textarea")
+  field.value = text
+  field.setAttribute("readonly", "")
+  field.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none"
+  document.body.appendChild(field)
+  field.select()
+  let ok = false
+  try {
+    ok = document.execCommand("copy")
+  } catch {
+    ok = false
+  }
+  field.remove()
+  if (selection) {
+    selection.removeAllRanges()
+    for (const range of ranges) selection.addRange(range)
+  }
+  active?.focus?.({ preventScroll: true })
+  return ok
+}
+
 /** How long `copied` stays true — long enough to read, short enough to not linger. */
 const COPIED_MS = 1400
 
@@ -81,12 +128,7 @@ export function useClipboard(): UseClipboard {
   async function copy(text: string, options: CopyOptions = {}): Promise<boolean> {
     const { toast = false, errorToast = false } = options
     try {
-      // Optional-chained: `navigator.clipboard` is undefined, not throwing, on
-      // an insecure origin, and that should take the same path as a rejection.
-      await navigator.clipboard?.writeText(text)
-      // A missing API resolves `undefined` rather than rejecting, so confirm
-      // the write was actually possible before claiming it happened.
-      if (!navigator.clipboard) throw new Error("clipboard unavailable")
+      if (!(await writeAsync(text)) && !writeLegacy(text)) throw new Error("clipboard unavailable")
 
       copied.value = true
       clearTimeout(timer)

package/src/composables/useLocale.ts

@@ -0,0 +1,14 @@
+import { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from "vue"
+import { injectConfigProviderContext } from "reka-ui"
+
+/*
+ * The locale a date is written in: the component's own `locale`, else the one
+ * the app gave reka's ConfigProvider, else undefined, which lets Intl use the
+ * browser's. The calendars already followed ConfigProvider while the field
+ * that shows the picked date did not, so a Russian app showed a Russian
+ * calendar under "Oct 8, 2026".
+ */
+export function useLocale(own?: MaybeRefOrGetter<string | undefined>): ComputedRef<string | undefined> {
+  const context = injectConfigProviderContext({})
+  return computed(() => toValue(own) || context.locale?.value || undefined)
+}

package/src/tokens/tokens.css

@@ -550,11 +550,14 @@
   backdrop-filter: blur(var(--glass-overlay-blur, 28px)) saturate(170%);
 }
 
+/*
+ * A dialog opened over another is glass too: without its own blur the text of
+ * the dialog below read straight through the fill. Its scrim stays unblurred
+ * (.lp-scrim--nested), so the only blur is the panel's, and the fill is a
+ * little denser than the first layer's, since what it blurs is glass already.
+ */
 .lp-glass-overlay--nested {
-  background-color: color-mix(in srgb, var(--color-surface-raised) 88%, transparent);
-  background-image: none;
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
+  --glass-overlay-fill: 62%;
 }
 
 :root[data-lp-no-backdrop] .lp-glass-overlay {