@leavepulse/ui 0.59.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/LpCommandPalette.vue

@@ -44,6 +44,8 @@ import { useAsyncTask } from "../composables/useAsyncTask"
 import { useGlass } from "../composables/useGlass"
 import { useClipboard } from "../composables/useClipboard"
 import { useHotkeys } from "../composables/useHotkeys"
+import { hints } from "../composables/useHints"
+import { HINT_SIGNALS, runningHintSystem } from "../composables/useHintSystem"
 import { useModalLayer } from "./modalDepth"
 import { useLabels } from "../composables/useLpConfig"
 import {
@@ -516,9 +518,20 @@ function onTab(event: KeyboardEvent) {
   event.stopPropagation()
   const actionsMode: Command = { id: `${c.id}:actions`, label: c.label, icon: c.icon, children: actions }
   syntheticModes.add(actionsMode)
+  hints.use(HINT_SIGNALS.paletteActions)
   enter(actionsMode)
 }
 
+// A returning user who never pressed Tab gets the footer key lit up, nothing
+// more: the palette is the one place they already came to on purpose.
+const PALETTE_ACTIONS_AFTER = 3
+const showActionsKey = computed(() => {
+  const system = runningHintSystem()
+  return !!system?.state.loaded
+    && system.count(HINT_SIGNALS.palette) >= PALETTE_ACTIONS_AFTER
+    && system.count(HINT_SIGNALS.paletteActions) === 0
+})
+
 /*
  * A mode holds the command it was entered through, and a static `children`
  * list is a snapshot of that moment. When the app rebuilds its commands (a
@@ -1162,8 +1175,10 @@ function onEscape(event: KeyboardEvent) {
 watch(
   () => props.open,
   async (o) => {
-    if (o) claim()
-    else release()
+    if (o) {
+      claim()
+      hints.use(HINT_SIGNALS.palette)
+    } else release()
     cancel()
     query.value = ""
     select(0)
@@ -1461,8 +1476,15 @@ useHotkeys(() =>
           </span>
           <!-- Only inside a mode: at the root Backspace just edits the query,
                and advertising it there would be a lie. -->
-          <span v-if="selectedActions.length" class="flex items-center gap-1">
-            <kbd class="rounded-small border border-line px-1 text-[10px]">tab</kbd>
+          <span
+            v-if="selectedActions.length"
+            class="flex items-center gap-1 transition-colors"
+            :class="showActionsKey && 'font-medium text-brand'"
+          >
+            <kbd
+              class="rounded-small border px-1 text-[10px] transition-colors"
+              :class="showActionsKey ? 'border-brand' : 'border-line'"
+            >tab</kbd>
             {{ text.actions }}
           </span>
           <span v-if="trail.length" class="flex items-center gap-1">

package/src/components/LpContextMenu.vue

@@ -8,6 +8,8 @@
  */
 import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from "reka-ui"
 import { computed } from "vue"
+import { hints } from "../composables/useHints"
+import { HINT_SIGNALS, noteContextTarget } from "../composables/useHintSystem"
 import ContextMenuItems from "./ContextMenuItems.vue"
 import MenuTitle from "./MenuTitle.vue"
 import { POPOVER_PANEL } from "./dropdown"
@@ -52,6 +54,11 @@ const props = defineProps<{
   /** An icon beside the title, or `titleImage` for a picture (an avatar, a logo). */
   titleIcon?: string
   titleImage?: string
+  /**
+   * Do not count this element as "has a right-click menu" for hint tips: for
+   * menus that only hold generic items (a whole table without row actions).
+   */
+  noHint?: boolean
 }>()
 
 // With no items the trigger is disabled, so the element keeps the browser's
@@ -59,6 +66,7 @@ const props = defineProps<{
 // per element. `always` overrides this so a late-populated menu is ready on the
 // very first click.
 const enabled = computed(() => props.always || props.items.length > 0)
+const hinted = computed(() => enabled.value && !props.noHint)
 
 const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-48 p-1 outline-none`
 
@@ -91,6 +99,17 @@ function keepContextMenu(event: Event) {
   if (enabled.value) event.stopPropagation()
 }
 
+function opened(open: boolean) {
+  if (open) hints.use(HINT_SIGNALS.contextMenu)
+}
+
+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) {
   const saved = field
   field = null
@@ -106,10 +125,12 @@ function returnFocus(event: Event) {
        the reka trigger remounted the wrapped content whenever items arrived
        late, losing its state and focus. A disabled trigger leaves the browser's
        own menu in place. -->
-  <ContextMenuRoot>
+  <ContextMenuRoot @update:open="opened">
     <ContextMenuTrigger
       as-child
       :disabled="!enabled"
+      :data-lp-context-menu="hinted ? '' : undefined"
+      @click.capture="leftClick"
       @contextmenu.capture="rememberField"
       @contextmenu="keepContextMenu"
     >

package/src/components/LpDropdownMenu.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { hints } from "../composables/useHints"
+import { HINT_SIGNALS } from "../composables/useHintSystem"
 import {
   DropdownMenuContent,
   DropdownMenuItem,
@@ -20,18 +22,27 @@ export interface MenuItem {
   onSelect?: () => void
 }
 
-defineProps<{
+const props = defineProps<{
   items: MenuItem[]
   /** A heading naming what the menu acts on; see LpContextMenu's `title`. */
   title?: string
   subtitle?: string
   titleIcon?: string
   titleImage?: string
+  /**
+   * The same items are also on a right click (a row's "…" next to its context
+   * menu). Opening it then counts toward the hint system's right-click tip.
+   */
+  rightClickToo?: boolean
 }>()
+
+function opened(open: boolean) {
+  if (open && props.rightClickToo) hints.use(HINT_SIGNALS.menuButton)
+}
 </script>
 
 <template>
-  <DropdownMenuRoot>
+  <DropdownMenuRoot @update:open="opened">
     <DropdownMenuTrigger as-child>
       <slot name="trigger" />
     </DropdownMenuTrigger>

package/src/components/LpHints.vue

@@ -68,6 +68,7 @@ const title = computed(() => {
   const o = offer.value
   if (!o) return ""
   if (o.kind === "nudge") return notes.value[o.nudge.feature]?.title ?? ""
+  if (o.kind === "tip") return o.tip.title
   if (o.kind === "news") return fill(labels.value.newsTitle)
   return fill(o.kind === "assigned" ? labels.value.assignedTitle : labels.value.tourTitle)
 })
@@ -76,6 +77,7 @@ const description = computed(() => {
   const o = offer.value
   if (!o) return ""
   if (o.kind === "nudge") return o.nudge.text
+  if (o.kind === "tip") return o.tip.keys ? `${o.tip.text} ${o.tip.keys}` : o.tip.text
   if (o.kind === "news") return o.items.map((n) => n.text).join(" ")
   return o.kind === "assigned" ? labels.value.assignedText : labels.value.tourText
 })
@@ -86,6 +88,10 @@ const actions = computed<ActionBarAction[]>(() => {
   const answer = (choice: "show" | "later" | "never") => () => props.system.answer(choice)
   const show: ActionBarAction = { label: labels.value.show, icon: "lucide:sparkles", onClick: answer("show") }
   if (o.kind === "nudge") return [{ label: labels.value.noThanks, variant: "ghost", onClick: answer("never") }, show]
+  if (o.kind === "tip") {
+    const later: ActionBarAction = { label: labels.value.gotIt, variant: o.tip.step ? "ghost" : undefined, onClick: answer("later") }
+    return [{ label: labels.value.never, variant: "ghost", onClick: answer("never") }, later, ...(o.tip.step ? [show] : [])]
+  }
   if (o.kind === "news") return [{ label: labels.value.gotIt, variant: "ghost", onClick: answer("later") }, show]
   return [
     ...(o.kind === "tour" ? [{ label: labels.value.never, variant: "ghost" as const, onClick: answer("never") }] : []),
@@ -109,7 +115,7 @@ const actions = computed<ActionBarAction[]>(() => {
       :open="!!offer"
       :title="title"
       :description="description"
-      :icon="offer?.kind === 'news' ? 'lucide:gift' : 'lucide:compass'"
+      :icon="offer?.kind === 'news' ? 'lucide:gift' : offer?.kind === 'tip' ? 'lucide:lightbulb' : 'lucide:compass'"
       :actions="actions"
     />
   </template>

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

@@ -1157,7 +1157,7 @@ const barInsetTop = computed(() =>
     <!-- The table-wide menu, which is what a right-click on empty header space
          reaches: rows and headers carry their own and take the event first, so
          this is the fallback rather than a competitor. -->
-    <LpContextMenu :items="contextMenu" always>
+    <LpContextMenu :items="contextMenu" always :no-hint="!rowMenu">
     <table ref="tableEl" class="w-full border-collapse text-sm">
       <!-- The background belongs on `thead` itself, not only on its row:
            `border-collapse` collapses the borders, and with a sticky header the
@@ -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

@@ -270,10 +270,12 @@ watch(
     if (value) {
       direction = 1
       document.addEventListener("click", onTargetClick, true)
+      document.addEventListener("contextmenu", onTargetClick, true)
       frame ||= requestAnimationFrame(track)
       void show()
     } else {
       document.removeEventListener("click", onTargetClick, true)
+      document.removeEventListener("contextmenu", onTargetClick, true)
       end()
     }
   },
@@ -286,6 +288,7 @@ watch(index, () => {
 
 onBeforeUnmount(() => {
   document.removeEventListener("click", onTargetClick, true)
+  document.removeEventListener("contextmenu", onTargetClick, true)
   if (open.value) end()
 })