@leavepulse/ui 0.60.0 → 0.61.0

package/src/components/LpAutocomplete.vue

@@ -25,7 +25,7 @@ import {
   ComboboxRoot,
   ComboboxViewport,
 } from "reka-ui"
-import { computed, ref, useAttrs, watch } from "vue"
+import { computed, nextTick, ref, useAttrs, watch } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { useInputFilter } from "../composables/useInputFilter"
 import { useLabels } from "../composables/useLpConfig"
@@ -36,6 +36,15 @@ export interface AutocompleteOption {
   value: string
   label?: string
   description?: string
+  /** A picture beside the option: an avatar, an icon of a server. */
+  image?: string
+}
+
+/** What the field's value stands for: a name for an id, with an optional muted hint and picture. */
+export interface AutocompleteSelection {
+  label: string
+  hint?: string
+  image?: string
 }
 
 const props = withDefaults(
@@ -65,6 +74,14 @@ const props = withDefaults(
     pattern?: RegExp | string
     /** Allowed-character RegExp; hard-blocks other input (see LpInput). */
     restrict?: RegExp
+    /**
+     * What the current value stands for, shown in the field itself while it is
+     * not being edited: a picked id reads as a person (avatar in place of the
+     * icon, name, muted hint) instead of digits nobody recognises, and nothing
+     * appears or jumps below the field. Focusing it brings the raw text back.
+     * When room runs short the hint gives way first; the name stays.
+     */
+    selected?: AutocompleteSelection | null
   }>(),
   {
     placeholder: "Type…",
@@ -136,6 +153,12 @@ const filtered = computed(() => {
 
 const open = ref(false)
 const focused = ref(false)
+const showSelected = computed(() => !!props.selected?.label && !focused.value)
+// Focusing a picked value starts a new search from its name, not from the raw
+// value: the name is put in the box selected, so typing replaces it, and
+// leaving without typing keeps the pick as it was.
+const draft = ref<string | null>(null)
+const showImage = computed(() => !!props.selected?.image && (!focused.value || draft.value !== null))
 
 // Threshold met AND something to show → the list is allowed to open.
 const canOpen = computed(
@@ -174,19 +197,31 @@ const anchorSize = {
 function onInput(event: Event) {
   filterInput(event)
   typing.value = true
+  draft.value = null
   text.value = (event.target as HTMLInputElement).value
 }
 
-function onFocus() {
+function onFocus(event: FocusEvent) {
   // Arriving at a field that already holds a value shows every option, not just
   // the one it currently holds.
   typing.value = false
   focused.value = true
+  if (props.selected?.label) {
+    draft.value = props.selected.label
+    const input = event.target as HTMLInputElement
+    void nextTick(() => input.select())
+  }
   if (canOpen.value) open.value = true
 }
 
+function onBlur() {
+  focused.value = false
+  draft.value = null
+}
+
 function choose(opt: AutocompleteOption) {
   typing.value = false
+  draft.value = null
   emit("update:modelValue", opt.value)
   emit("select", opt.value)
   open.value = false
@@ -194,6 +229,7 @@ function choose(opt: AutocompleteOption) {
 
 function clear() {
   typing.value = false
+  draft.value = null
   emit("update:modelValue", "")
   open.value = false
 }
@@ -220,7 +256,28 @@ function clear() {
           : 'border-line focus-within:border-brand',
       ]"
     >
-      <LpIcon v-if="icon" :name="icon" :size="16" class="shrink-0 text-muted" />
+      <!-- Picture and icon share one fixed box and cross-fade, so the text
+           beside them never moves when one gives way to the other. -->
+      <span
+        v-if="icon || selected?.image"
+        class="relative grid shrink-0 place-items-center"
+        :class="selected?.image ? 'size-5' : 'size-4'"
+      >
+        <LpIcon
+          v-if="icon"
+          :name="icon"
+          :size="16"
+          class="col-start-1 row-start-1 text-muted transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none"
+          :class="showImage ? 'scale-75 opacity-0' : 'opacity-100'"
+        />
+        <img
+          v-if="selected?.image"
+          :src="selected.image"
+          alt=""
+          class="col-start-1 row-start-1 size-5 rounded-full object-cover transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none"
+          :class="showImage ? 'opacity-100' : 'scale-75 opacity-0'"
+        />
+      </span>
       <!--
         Bind value one-way and update from the raw DOM event, NOT via reka's
         ComboboxInput v-model: reka defers the value/search update to nextTick
@@ -228,23 +285,49 @@ function clear() {
         keystroke lag by one char. Reading event.target.value here is synchronous
         so `text` (and the reactive `open`) track the field exactly.
       -->
-      <ComboboxInput
-        v-bind="inputAttrs"
-        :id="field.id"
-        :model-value="text"
-        :placeholder="placeholder"
-        :disabled="field.disabled"
-        :required="field.required || undefined"
-        :aria-invalid="isInvalidState || undefined"
-        :aria-describedby="field.describedBy"
-        class="lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted"
-        @beforeinput="onBeforeInput"
-        @paste="onPaste"
-        @compositionend="onCompositionEnd"
-        @input="onInput"
-        @focus="onFocus"
-        @blur="focused = false"
-      />
+      <div class="relative flex min-w-0 flex-1 self-stretch">
+        <ComboboxInput
+          v-bind="inputAttrs"
+          :id="field.id"
+          :model-value="draft ?? text"
+          :placeholder="placeholder"
+          :disabled="field.disabled"
+          :required="field.required || undefined"
+          :aria-invalid="isInvalidState || undefined"
+          :aria-describedby="field.describedBy"
+          class="lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted"
+          :class="showSelected && 'text-transparent placeholder:text-transparent'"
+          @beforeinput="onBeforeInput"
+          @paste="onPaste"
+          @compositionend="onCompositionEnd"
+          @input="onInput"
+          @focus="onFocus"
+          @blur="onBlur"
+        />
+        <!-- Focus and blur do not animate the name: it sits exactly where the
+             input's own text sits, so that swap cannot be seen. The hint, which
+             exists in one state alone, eases in and out beside it, and the
+             whole line fades when a pick appears or is cleared. -->
+        <Transition
+          enter-active-class="transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none"
+          leave-active-class="transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none"
+          enter-from-class="opacity-0"
+          leave-to-class="opacity-0"
+        >
+          <span
+            v-if="selected?.label"
+            class="pointer-events-none absolute inset-0 flex min-w-0 items-center gap-1.5"
+            aria-hidden="true"
+          >
+            <span class="max-w-full shrink-0 truncate" :class="showSelected ? '' : 'invisible'">{{ selected.label }}</span>
+            <span
+              v-if="selected.hint"
+              class="min-w-0 truncate text-sm text-muted transition-[opacity,translate] duration-[var(--duration-fast)] motion-reduce:transition-none"
+              :class="showSelected ? 'opacity-100' : '-translate-x-1 opacity-0'"
+            >{{ selected.hint }}</span>
+          </span>
+        </Transition>
+      </div>
       <button
         v-if="clearable && hasValue"
         type="button"
@@ -285,10 +368,13 @@ function clear() {
             :class="[OPTION_ITEM, 'justify-between']"
             @select.prevent="choose(opt)"
           >
-            <span class="flex min-w-0 flex-col">
-              <span class="truncate">{{ opt.label ?? opt.value }}</span>
-              <span v-if="opt.description" class="truncate text-xs text-muted">
-                {{ opt.description }}
+            <span class="flex min-w-0 items-center gap-2.5">
+              <img v-if="opt.image" :src="opt.image" alt="" class="size-6 shrink-0 rounded-full object-cover" />
+              <span class="flex min-w-0 flex-col">
+                <span class="truncate">{{ opt.label ?? opt.value }}</span>
+                <span v-if="opt.description" class="truncate text-xs text-muted">
+                  {{ opt.description }}
+                </span>
               </span>
             </span>
           </ComboboxItem>

package/src/components/LpContextMenu.vue

@@ -9,7 +9,7 @@
 import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from "reka-ui"
 import { computed } from "vue"
 import { hints } from "../composables/useHints"
-import { HINT_SIGNALS } from "../composables/useHintSystem"
+import { HINT_SIGNALS, noteContextTarget } from "../composables/useHintSystem"
 import ContextMenuItems from "./ContextMenuItems.vue"
 import MenuTitle from "./MenuTitle.vue"
 import { POPOVER_PANEL } from "./dropdown"
@@ -103,8 +103,11 @@ function opened(open: boolean) {
   if (open) hints.use(HINT_SIGNALS.contextMenu)
 }
 
-function leftClick() {
-  if (hinted.value) hints.use(HINT_SIGNALS.contextTarget)
+function leftClick(event: MouseEvent) {
+  if (!hinted.value) return
+  hints.use(HINT_SIGNALS.contextTarget)
+  const el = event.currentTarget as Element
+  noteContextTarget((event.target as Element).closest?.("[data-lp-context-row]") ?? el)
 }
 
 function returnFocus(event: Event) {

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/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;
+  }
+}