@leavepulse/ui 0.60.0 → 0.62.0

package/src/components/LpSwap.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+/*
+ * One piece of content standing in for another: the section picked in a side
+ * nav, the step of a wizard, the view chosen in a segmented control. Without
+ * it the old content vanishes and the new one appears in the same frame, and
+ * everything below jumps to the new height.
+ *
+ *   <LpSidebar v-model="section" :items="items" />
+ *   <LpSwap :swap-key="section">
+ *     <SectionBody :name="section" />
+ *   </LpSwap>
+ *
+ * The outgoing content fades out quickly, the incoming one rises in the way
+ * LpTabs panels do (`tab-in`), and the box eases between the two heights
+ * through LpShift, so what sits under it glides instead of jolting.
+ *
+ * `swapKey` is what decides that the content is "another one". Change it per
+ * section, not per record: a key that changes on every reload replays the
+ * entrance for data that merely refreshed.
+ */
+import LpShift from "./LpShift.vue"
+
+defineProps<{
+  /** Identity of the current content; a new value plays the swap. */
+  swapKey: string | number
+  /** Turn the motion off (the content still swaps). */
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <LpShift axis="height" :disabled="disabled">
+    <Transition
+      mode="out-in"
+      :css="!disabled"
+      enter-active-class="animate-[tab-in_220ms_var(--ease-emphasized)] motion-reduce:animate-none"
+      leave-active-class="transition-opacity duration-[var(--duration-fast)] ease-out motion-reduce:transition-none"
+      leave-to-class="opacity-0"
+    >
+      <div :key="swapKey">
+        <slot />
+      </div>
+    </Transition>
+  </LpShift>
+</template>

package/src/components/LpTable.vue

@@ -1293,6 +1293,7 @@ const barInsetTop = computed(() =>
           :class="selectedSet.has(keyFor(row, index)) ? 'bg-brand-soft/40' : ''"
           v-bind="roving.itemProps(String(keyFor(row, index)))"
           :data-paint-key="selectable ? String(keyFor(row, index)) : undefined"
+          :data-lp-context-row="rowMenu ? '' : undefined"
           @click="onRowClick(row, keyFor(row, index))"
           @pointerdown="onRowPointerDown($event, keyFor(row, index))"
           @keydown="onRowKeydown"

package/src/components/LpToaster.vue

@@ -225,7 +225,7 @@ 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
+  if (!(await copy([t.title, t.message, t.details].filter(Boolean).join("\n")))) return
   copiedId.value = tag(t)
   clearTimeout(copiedTimer)
   copiedTimer = setTimeout(() => (copiedId.value = null), 1500)

package/src/components/LpTour.vue

@@ -37,9 +37,11 @@ export interface TourStep {
  * scrim, a card beside it says what it is, and the user steps through with the
  * buttons or the arrow keys.
  *
- * The scrim is four panels around a hole rather than a mask, so the target
- * stays clickable (a `try` step waits for exactly that click) and the hole can
- * glide between targets on any engine, WebKitGTK included. The card is a reka
+ * The dim is one blurred layer clipped around the hole (`holeClip`), so the
+ * blur has no seams; four transparent panels around the hole take the clicks,
+ * so the target stays clickable (a `try` step waits for exactly that click).
+ * Both glide between targets on any engine, WebKitGTK included. Closing fades
+ * the whole layer out instead of dropping it. The card is a reka
  * popover anchored to the hole, so flipping and sliding to stay on screen is
  * floating-ui's job; on a phone it becomes a sheet at the bottom instead.
  *
@@ -59,7 +61,7 @@ import { scrollToElement } from "../composables/scroll"
 import { PANEL_SURFACE } from "./dropdown"
 import TourCard from "./TourCard.vue"
 import type { Box } from "../composables/spatialNav"
-import { holeOf, panelsAround } from "./tour"
+import { holeClip, holeOf, panelsAround } from "./tour"
 
 const props = withDefaults(
   defineProps<{
@@ -113,6 +115,8 @@ const panels = computed(() =>
     ? panelsAround(hole.value, viewport.value)
     : [{ x: 0, y: 0, width: viewport.value.width, height: viewport.value.height }],
 )
+const radius = ref(8)
+const clip = computed(() => holeClip(hole.value, viewport.value, radius.value))
 const reference = {
   getBoundingClientRect: () => {
     const h = hole.value
@@ -244,7 +248,6 @@ function end() {
   cancelAnimationFrame(frame)
   frame = 0
   target.value = null
-  box.value = null
   runAll(cleanups)
 }
 
@@ -269,6 +272,8 @@ watch(
   (value) => {
     if (value) {
       direction = 1
+      box.value = null
+      radius.value = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--radius-control")) || 8
       document.addEventListener("click", onTargetClick, true)
       document.addEventListener("contextmenu", onTargetClick, true)
       frame ||= requestAnimationFrame(track)
@@ -307,11 +312,21 @@ const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 te
 
 <template>
   <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+      leave-active-class="transition-opacity duration-[var(--duration-medium)] ease-out motion-reduce:transition-none"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
     <div v-if="open" class="lp-tour pointer-events-none fixed inset-0 z-(--z-tour)" @pointerdown.stop>
+      <div
+        class="lp-scrim absolute inset-0 transition-[clip-path] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+        :style="{ clipPath: clip }"
+      />
       <div
         v-for="(panel, i) in panels"
         :key="i"
-        class="lp-scrim pointer-events-auto absolute left-0 top-0 transition-[transform,width,height] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+        class="pointer-events-auto absolute left-0 top-0"
         :style="{ transform: `translate(${panel.x}px, ${panel.y}px)`, width: `${panel.width}px`, height: `${panel.height}px` }"
       />
       <div
@@ -321,8 +336,9 @@ const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 te
         :style="{ transform: `translate(${hole.x}px, ${hole.y}px)`, width: `${hole.width}px`, height: `${hole.height}px` }"
       />
     </div>
+    </Transition>
 
-    <PopoverRoot v-if="open && wide" :open="ready">
+    <PopoverRoot v-if="wide" :open="open && ready">
       <PopoverAnchor :reference="reference" />
       <PopoverPortal>
         <PopoverContent
@@ -331,7 +347,7 @@ const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 te
           :collision-padding="12"
           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)] motion-reduce:animate-none']"
+          :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']"
           role="dialog"
           :aria-label="step?.title"
           @pointerdown.stop
@@ -346,6 +362,7 @@ const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 te
       </PopoverPortal>
     </PopoverRoot>
 
+    <Transition leave-active-class="animate-[rise-out_var(--duration-fast)_ease-out] motion-reduce:animate-none">
     <div
       v-if="open && !wide && ready"
       :class="[CARD, 'pointer-events-auto fixed inset-x-3 bottom-3 z-[calc(var(--z-tour)+1)] w-auto animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none']"
@@ -357,5 +374,6 @@ const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 te
             <TourCard :step="step" :index="index" :last="last" :progress="progress" :labels="labels" @next="next" @back="back" @perform="perform" @dismiss="dismiss" />
           </slot>
     </div>
+    </Transition>
   </Teleport>
 </template>

package/src/components/tour.ts

@@ -29,6 +29,37 @@ export function panelsAround(hole: Box, viewport: Size): Box[] {
   ]
 }
 
+const CORNER_STEPS = 6
+
+/**
+ * The dimmed, blurred layer as one clip: the whole viewport with the hole cut
+ * out (evenodd), corners rounded like the ring drawn around it. One layer
+ * instead of the four panels, because each panel blurred the page on its own
+ * and the blur's edges showed as seams where they met. The point count never
+ * changes, so the clip eases between steps on every engine; with no target
+ * the hole shrinks to a dot in the middle.
+ */
+export function holeClip(hole: Box | null, viewport: Size, radius: number): string {
+  const h = hole ?? { x: viewport.width / 2, y: viewport.height / 2, width: 0, height: 0 }
+  const r = Math.max(0, Math.min(radius, h.width / 2, h.height / 2))
+  const px = (n: number) => `${Math.round(n * 100) / 100}px`
+  const corners: [number, number, number][] = [
+    [h.x + h.width - r, h.y + r, -90],
+    [h.x + h.width - r, h.y + h.height - r, 0],
+    [h.x + r, h.y + h.height - r, 90],
+    [h.x + r, h.y + r, 180],
+  ]
+  const points: string[] = []
+  for (const [cx, cy, start] of corners) {
+    for (let i = 0; i <= CORNER_STEPS; i++) {
+      const angle = ((start + (90 * i) / CORNER_STEPS) * Math.PI) / 180
+      points.push(`${px(cx + r * Math.cos(angle))} ${px(cy + r * Math.sin(angle))}`)
+    }
+  }
+  const outer = [`0px 0px`, `${px(viewport.width)} 0px`, `${px(viewport.width)} ${px(viewport.height)}`, `0px ${px(viewport.height)}`, `0px 0px`]
+  return `polygon(evenodd, ${[...outer, ...points, points[0]].join(", ")})`
+}
+
 /**
  * Open the context menu of an element as a right-click would, at its centre.
  * Lets a tour step show a row's menu without the user hunting for it; the menu

package/src/composables/useHintSystem.ts

@@ -109,6 +109,31 @@ export const HINT_SIGNALS = {
   paletteActions: "lp.palette-actions",
 } as const
 
+let lastContextTarget: WeakRef<Element> | null = null
+
+/** The element a left click just landed on that also has a right-click menu (a table row rather than the table). */
+export function noteContextTarget(el: Element): void {
+  lastContextTarget = new WeakRef(el)
+}
+
+const onScreen = (el: Element) => {
+  const box = el.getBoundingClientRect()
+  return el.isConnected && box.width > 0 && box.bottom > 0 && box.top < window.innerHeight
+}
+
+/*
+ * What the tip lights up: the thing the user keeps clicking, while it is still
+ * on screen; otherwise a row with a menu, then any menu target. Rows first,
+ * because a page's first target in document order is usually chrome (a
+ * sidebar account card), not the content the habit is about.
+ */
+function rightClickTarget(): Element | null {
+  const last = lastContextTarget?.deref()
+  if (last && onScreen(last)) return last
+  const visible = (selector: string) => [...document.querySelectorAll(selector)].find(onScreen) ?? null
+  return visible("[data-lp-context-row]") ?? visible("main [data-lp-context-menu]") ?? visible("[data-lp-context-menu]")
+}
+
 /** Right click instead of the "…" button. */
 export function contextMenuTip(text: Partial<Pick<HintTip, "title" | "text"> & { stepText: string }> = {}): HintTip {
   return {
@@ -119,10 +144,7 @@ export function contextMenuTip(text: Partial<Pick<HintTip, "title" | "text"> & {
       count(HINT_SIGNALS.contextMenu) === 0
       && (count(HINT_SIGNALS.menuButton) >= 5 || count(HINT_SIGNALS.contextTarget) >= 25),
     step: () => {
-      const target = [...document.querySelectorAll("[data-lp-context-menu]")].find((el) => {
-        const box = el.getBoundingClientRect()
-        return box.width > 0 && box.bottom > 0 && box.top < window.innerHeight
-      })
+      const target = rightClickTarget()
       return target ? { target, title: text.title ?? "Right-click works here", text: text.stepText ?? "Right-click this to see what it can do.", try: true } : null
     },
   }

package/src/composables/useToast.ts

@@ -23,6 +23,8 @@ export interface ToastItem {
   actions?: ToastAction[]
   /** Whole-toast click handler (UAProject-style clickable toast). */
   onClick?: () => void | Promise<void>
+  /** Copied with the message, not shown: what a bug report needs (request, status, ids). */
+  details?: string
 }
 
 export interface ToastOptions {
@@ -36,6 +38,29 @@ export interface ToastOptions {
   duration?: number
   actions?: ToastAction[]
   onClick?: () => void | Promise<void>
+  /** Copied with the message, not shown. An Error passed to `error()` brings its own `details`. */
+  details?: string
+  /** The error behind a hand-written message ("Not saved: " + e.message): its `details` ride along. */
+  cause?: unknown
+}
+
+/*
+ * What a toast can be made from. An Error shows its message; a `details`
+ * string on it (an API error's request, status and ids) rides along to the
+ * copy button, so "copy" yields something worth pasting into a bug report
+ * instead of the same one line the user already sees.
+ */
+export type ToastMessage = string | (Error & { details?: string })
+
+function detailsOf(source: unknown): string | undefined {
+  const details = (source as { details?: unknown } | null | undefined)?.details
+  return typeof details === "string" && details ? details : undefined
+}
+
+function split(message: ToastMessage, options: ToastOptions): [string, ToastOptions] {
+  const text = typeof message === "string" ? message : message.message
+  const details = options.details ?? (typeof message === "string" ? undefined : detailsOf(message)) ?? detailsOf(options.cause)
+  return [text, { ...options, details }]
 }
 
 const DEFAULT_DURATION = 4500
@@ -54,9 +79,10 @@ const queue = state.queue
 
 function push(
   variant: ToastVariant,
-  message: string,
-  options: ToastOptions = {},
+  input: ToastMessage,
+  given: ToastOptions = {},
 ): number {
+  const [message, options] = split(input, given)
   // A server render has no one to show it to, and the queue would outlive the
   // request and surface in the next visitor's page.
   if (typeof window === "undefined") return -1
@@ -70,6 +96,7 @@ function push(
     dismissAt: duration > 0 ? Date.now() + duration : null,
     actions: options.actions,
     onClick: options.onClick,
+    details: options.details,
   }
 
   const same = options.key === undefined ? -1 : queue.findIndex((t) => t.key === options.key)
@@ -91,7 +118,7 @@ function push(
 export interface ToastPromiseMessages<T> {
   loading: string
   success: string | ((value: T) => string)
-  error: string | ((error: unknown) => string)
+  error: string | ((error: unknown) => ToastMessage)
 }
 
 let promiseKey = 0
@@ -135,8 +162,8 @@ export function useToast() {
     toast: (message: string, o?: ToastOptions) => push("info", message, o),
     info: (message: string, o?: ToastOptions) => push("info", message, o),
     success: (message: string, o?: ToastOptions) => push("success", message, o),
-    warning: (message: string, o?: ToastOptions) => push("warning", message, o),
-    error: (message: string, o?: ToastOptions) => push("error", message, o),
+    warning: (message: ToastMessage, o?: ToastOptions) => push("warning", message, o),
+    error: (message: ToastMessage, o?: ToastOptions) => push("error", message, o),
     promise,
     /** Low-level push for bridges (e.g. @leavepulse/ui-sdk apiError). */
     push,

package/src/index.ts

@@ -26,7 +26,7 @@ export type { ActionBarAction } from "./components/LpActionBar.vue"
 export { default as LpAlert } from "./components/LpAlert.vue"
 export { default as LpAppShell } from "./components/LpAppShell.vue"
 export { default as LpAutocomplete } from "./components/LpAutocomplete.vue"
-export type { AutocompleteOption } from "./components/LpAutocomplete.vue"
+export type { AutocompleteOption, AutocompleteSelection } from "./components/LpAutocomplete.vue"
 export { default as LpAvatar } from "./components/LpAvatar.vue"
 export { default as LpBadge } from "./components/LpBadge.vue"
 export { default as LpBreadcrumbs } from "./components/LpBreadcrumbs.vue"
@@ -175,6 +175,7 @@ export type { SelectOption, SelectValue } from "./components/LpSelect.vue"
 export { default as LpServiceNode } from "./components/LpServiceNode.vue"
 export type { ServiceNodeData } from "./components/LpServiceNode.vue"
 export { default as LpShift } from "./components/LpShift.vue"
+export { default as LpSwap } from "./components/LpSwap.vue"
 export { default as LpShortcutsDialog } from "./components/LpShortcutsDialog.vue"
 export { default as LpSidebar } from "./components/LpSidebar.vue"
 export type { SidebarItem, SidebarSection } from "./components/LpSidebar.vue"
@@ -364,6 +365,7 @@ export { useToast } from "./composables/useToast"
 export type {
   ToastAction,
   ToastItem,
+  ToastMessage,
   ToastOptions,
   ToastVariant,
 } from "./composables/useToast"

package/src/tokens/selection.css

@@ -0,0 +1,20 @@
+/*
+ * Text selection in the theme's colours — opt-in, like scrollbar.css. Without
+ * it the browser paints selected text with the operating system's accent
+ * (red, green, whatever the desktop theme picked), which clashes with the kit
+ * palette and changes from machine to machine; WebKitGTK and Chromium on Linux
+ * both read it from the GTK theme.
+ *
+ * Global on purpose, so it lives outside tokens.css (which stays embeddable).
+ * Reads --color-brand, so import it AFTER the tokens:
+ *   @import "@leavepulse/ui";
+ *   @import "@leavepulse/ui/selection.css";
+ *
+ * In `@layer base`, so any rule of the app's own wins over it.
+ */
+@layer base {
+  ::selection {
+    background-color: color-mix(in oklab, var(--color-brand, #7a8a84) 38%, transparent);
+    color: inherit;
+  }
+}