@leavepulse/ui 0.60.0 → 0.62.0

package/dist/composables/useToast.d.ts

@@ -19,6 +19,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 {
     /**
@@ -31,12 +33,19 @@ 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;
 }
-declare function push(variant: ToastVariant, message: string, options?: ToastOptions): number;
+export type ToastMessage = string | (Error & {
+    details?: string;
+});
+declare function push(variant: ToastVariant, input: ToastMessage, given?: ToastOptions): number;
 export interface ToastPromiseMessages<T> {
     loading: string;
     success: string | ((value: T) => string);
-    error: string | ((error: unknown) => string);
+    error: string | ((error: unknown) => ToastMessage);
 }
 /**
  * One toast that follows a promise: a persistent "loading" toast that turns
@@ -50,8 +59,8 @@ export declare function useToast(): {
     toast: (message: string, o?: ToastOptions) => number;
     info: (message: string, o?: ToastOptions) => number;
     success: (message: string, o?: ToastOptions) => number;
-    warning: (message: string, o?: ToastOptions) => number;
-    error: (message: string, o?: ToastOptions) => number;
+    warning: (message: ToastMessage, o?: ToastOptions) => number;
+    error: (message: ToastMessage, o?: ToastOptions) => number;
     promise: typeof promise;
     /** Low-level push for bridges (e.g. @leavepulse/ui-sdk apiError). */
     push: typeof push;

package/dist/composables/useToast.js

@@ -1,11 +1,21 @@
 import { reactive } from "vue";
+function detailsOf(source) {
+  const details = source?.details;
+  return typeof details === "string" && details ? details : void 0;
+}
+function split(message, options) {
+  const text = typeof message === "string" ? message : message.message;
+  const details = options.details ?? (typeof message === "string" ? void 0 : detailsOf(message)) ?? detailsOf(options.cause);
+  return [text, { ...options, details }];
+}
 const DEFAULT_DURATION = 4500;
 const MAX_ACTIVE = 4;
 const STATE_KEY = /* @__PURE__ */ Symbol.for("@leavepulse/ui:toast-queue");
 const g = globalThis;
 const state = g[STATE_KEY] ??= { queue: reactive([]), nextId: 0 };
 const queue = state.queue;
-function push(variant, message, options = {}) {
+function push(variant, input, given = {}) {
+  const [message, options] = split(input, given);
   if (typeof window === "undefined") return -1;
   const duration = options.duration ?? DEFAULT_DURATION;
   const fields = {
@@ -16,7 +26,8 @@ function push(variant, message, options = {}) {
     duration,
     dismissAt: duration > 0 ? Date.now() + duration : null,
     actions: options.actions,
-    onClick: options.onClick
+    onClick: options.onClick,
+    details: options.details
   };
   const same = options.key === void 0 ? -1 : queue.findIndex((t) => t.key === options.key);
   const existing = queue[same];

package/dist/index.d.ts

@@ -8,7 +8,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";
@@ -125,6 +125,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";
@@ -237,7 +238,7 @@ export type { UseTilt, UseTiltOptions } from "./composables/useTilt";
 export { useZoomPan } from "./composables/useZoomPan";
 export type { UseZoomPan, UseZoomPanOptions } from "./composables/useZoomPan";
 export { useToast } from "./composables/useToast";
-export type { ToastAction, ToastItem, ToastOptions, ToastVariant, } from "./composables/useToast";
+export type { ToastAction, ToastItem, ToastMessage, ToastOptions, ToastVariant, } from "./composables/useToast";
 export type { ToastPromiseMessages } from "./composables/useToast";
 export { cacheSystemThemes, normalizeTheme, prefersDarkScheme, themeEntries, } from "./theme/useTheme";
 export type { SystemThemes, UseTheme } from "./theme/useTheme";

package/dist/index.js

@@ -1,24 +1,24 @@
 import { _ } from "./chunks/LayoutCanvas-t7LWFCEn.js";
-import { _ as _2 } from "./chunks/LpAddressInput-DD4zTN4P.js";
+import { _ as _2 } from "./chunks/LpAddressInput-CzdZguBo.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DybIlWnF.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BsSp66S_.js";
-import { _ as _5 } from "./chunks/LpAlert--KLL4NLk.js";
-import { _ as _6 } from "./chunks/LpAppShell-Cv-Y9qNA.js";
-import { _ as _7 } from "./chunks/LpAutocomplete-PnL2ntKl.js";
-import { _ as _8 } from "./chunks/LpAvatar-CwGs1JCQ.js";
+import { _ as _5 } from "./chunks/LpAlert-BAOujnXy.js";
+import { _ as _6 } from "./chunks/LpAppShell-BXMNDEpF.js";
+import { _ as _7 } from "./chunks/LpAutocomplete-D9mY5Tqk.js";
+import { _ as _8 } from "./chunks/LpAvatar-K6MOMfgn.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
 import { _ as _10 } from "./chunks/LpBreadcrumbs-CndzPYiG.js";
 import { _ as _11 } from "./chunks/LpButton-CJSD7N0Z.js";
 import { _ as _12 } from "./chunks/LpCalendar-CXVDbb2M.js";
-import { _ as _13 } from "./chunks/LpCard-B2D0GIUU.js";
+import { _ as _13 } from "./chunks/LpCard-D9HVgX8Y.js";
 import { default as default2 } from "./components/LpChart.vue.js";
 import { backgroundOf, csvField, downloadFile, fileStem, inlineSvg, resolveCssColor, svgToPng, toCsv } from "./components/exportData.js";
 import { CHART_PALETTE, axisTicks, chartSummary, formatTick, markerIndex, niceScale, resolveSlices } from "./components/chart.js";
 import { _ as _14 } from "./chunks/LpCheckbox-DV9W6T3H.js";
 import { _ as _15 } from "./chunks/LpCodeBlock-t6MLA3fb.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
-import { _ as _16 } from "./chunks/LpColorPicker-CvBF8TeL.js";
+import { _ as _16 } from "./chunks/LpColorPicker-BO1ZTY51.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
 import { applyQueryFilters, highlightParts, parseCommandQuery, parsePaletteQuery, rankCommandItems } from "./components/commandSearch.js";
@@ -33,7 +33,7 @@ import { comboKeys, comboSteps } from "./components/keys.js";
 import { _ as _18 } from "./chunks/LpConfirmDialog-tkgyY3eu.js";
 import { _ as _19 } from "./chunks/LpConfirmHost-CoYIcUdl.js";
 import { confirm, useConfirm } from "./components/confirm.js";
-import { _ as _20 } from "./chunks/LpContextMenu-BnN1k7ga.js";
+import { _ as _20 } from "./chunks/LpContextMenu-Cv_F2iCG.js";
 import { _ as _21 } from "./chunks/LpDatePicker-DxdrVNCG.js";
 import { _ as _22 } from "./chunks/LpDateRangePicker-DjeaqikC.js";
 import { _ as _23 } from "./chunks/LpRangeCalendar-COeOYF52.js";
@@ -44,7 +44,7 @@ import { _ as _26 } from "./chunks/LpDrawer-C97yoWmh.js";
 import { _ as _27 } from "./chunks/LpDropdownMenu-CbyYu4Rw.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
 import { _ as _28 } from "./chunks/LpEmptyState-CX8fdGSU.js";
-import { _ as _29 } from "./chunks/LpFileTree-DEqh2ySW.js";
+import { _ as _29 } from "./chunks/LpFileTree-DTwUj0L-.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _30 } from "./chunks/LpFieldNotice-B--RzKfj.js";
 import { _ as _31 } from "./chunks/LpFormField-DMPPL1jF.js";
@@ -56,19 +56,19 @@ import { _ as _34 } from "./chunks/LpInput-C7FHxzj2.js";
 import { _ as _35 } from "./chunks/LpLightbox-DiksFa4L.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _37 } from "./chunks/LpLogViewer-BuPe23sZ.js";
+import { _ as _37 } from "./chunks/LpLogViewer-D9UgNz2m.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _38 } from "./chunks/LpMediaGallery-Cic9UHsa.js";
 import { _ as _39 } from "./chunks/LpModal-QFfctZsj.js";
-import { _ as _40 } from "./chunks/LpModalNav-Cw7m-eks.js";
-import { _ as _41 } from "./chunks/LpNotificationBell-xH_JphpS.js";
+import { _ as _40 } from "./chunks/LpModalNav-D4rmflQn.js";
+import { _ as _41 } from "./chunks/LpNotificationBell-CyylOlZR.js";
 import { _ as _42 } from "./chunks/LpNumberField-BFSRVGkJ.js";
 import { _ as _43 } from "./chunks/LpTimeField-BTEt0kvL.js";
 import { _ as _44 } from "./chunks/LpNumberFlow-z4WPZcZu.js";
 import { _ as _45 } from "./chunks/LpOtpInput-PbeNJ5In.js";
 import { _ as _46 } from "./chunks/LpPagination-BFl0I7tL.js";
 import { _ as _47 } from "./chunks/LpPasswordInput-C1G4k_r0.js";
-import { _ as _48 } from "./chunks/LpPie-BD5Lsh-2.js";
+import { _ as _48 } from "./chunks/LpPie-B2deu8CI.js";
 import { _ as _49 } from "./chunks/LpPhoneInput-CZrpVxla.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _50 } from "./chunks/LpPopover-DCKeqiVn.js";
@@ -82,36 +82,37 @@ import { _ as _57 } from "./chunks/LpSection-BAkbf0OK.js";
 import { _ as _58 } from "./chunks/LpSelect-C4OXN_q3.js";
 import { _ as _59 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _60 } from "./chunks/LpShift-DXNsauQZ.js";
+import { _ as _61 } from "./chunks/LpSwap-D82jiecV.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _61 } from "./chunks/LpSidebar-B3E_iViL.js";
-import { _ as _62 } from "./chunks/LpSkeleton-BB6XIV-w.js";
-import { _ as _63 } from "./chunks/LpSlider-Cuzmrd7p.js";
-import { _ as _64 } from "./chunks/LpRangeSlider-C1yF9-nP.js";
-import { _ as _65 } from "./chunks/LpVideoBackdrop-qWRYBOTQ.js";
+import { _ as _62 } from "./chunks/LpSidebar-D8tub3bt.js";
+import { _ as _63 } from "./chunks/LpSkeleton-BB6XIV-w.js";
+import { _ as _64 } from "./chunks/LpSlider-Cuzmrd7p.js";
+import { _ as _65 } from "./chunks/LpRangeSlider-C1yF9-nP.js";
+import { _ as _66 } from "./chunks/LpVideoBackdrop-qWRYBOTQ.js";
 import { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop.js";
-import { _ as _66 } from "./chunks/LpSparkline-CB80N8SJ.js";
-import { _ as _67 } from "./chunks/LpStat-oYk6V1LZ.js";
-import { _ as _68 } from "./chunks/LpStepper-YgHGzgfD.js";
-import { _ as _69 } from "./chunks/LpSwitch-DG2AhXIL.js";
+import { _ as _67 } from "./chunks/LpSparkline-CB80N8SJ.js";
+import { _ as _68 } from "./chunks/LpStat-oYk6V1LZ.js";
+import { _ as _69 } from "./chunks/LpStepper-YgHGzgfD.js";
+import { _ as _70 } from "./chunks/LpSwitch-DG2AhXIL.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
-import { _ as _70 } from "./chunks/LpTableOfContents-DYuqkByy.js";
-import { _ as _71 } from "./chunks/LpTabs-00v3VQx4.js";
-import { _ as _72 } from "./chunks/LpTagsInput-Sc56iy_j.js";
+import { _ as _71 } from "./chunks/LpTableOfContents-DYuqkByy.js";
+import { _ as _72 } from "./chunks/LpTabs-00v3VQx4.js";
+import { _ as _73 } from "./chunks/LpTagsInput-Sc56iy_j.js";
 import { addTags, splitTags } from "./components/tags.js";
-import { _ as _73 } from "./chunks/LpTextarea-CQZccQI3.js";
-import { _ as _74 } from "./chunks/LpThemeSwitcher-CeBG0e_D.js";
-import { _ as _75 } from "./chunks/LpTilt-B7KHX1zH.js";
-import { _ as _76 } from "./chunks/LpToaster-BcKs7vX7.js";
-import { _ as _77 } from "./chunks/LpTooltip-suFCM34F.js";
-import { _ as _78 } from "./chunks/LpTour-C29-1wha.js";
+import { _ as _74 } from "./chunks/LpTextarea-CQZccQI3.js";
+import { _ as _75 } from "./chunks/LpThemeSwitcher-ZFFftBQn.js";
+import { _ as _76 } from "./chunks/LpTilt-B7KHX1zH.js";
+import { _ as _77 } from "./chunks/LpToaster-D3OisETH.js";
+import { _ as _78 } from "./chunks/LpTooltip-suFCM34F.js";
+import { _ as _79 } from "./chunks/LpTour-ByaL36fN.js";
 import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
-import { _ as _79 } from "./chunks/LpHintLayer-DsclGYcD.js";
-import { _ as _80 } from "./chunks/LpHints-BTpvisgP.js";
+import { _ as _80 } from "./chunks/LpHintLayer-DsclGYcD.js";
+import { _ as _81 } from "./chunks/LpHints-B_85eSmm.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, hintKey, hintSummary, localHintStorage, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
-import { _ as _81 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _82 } from "./chunks/LpTopologyCanvas-6ozNrQKh.js";
-import { _ as _83 } from "./chunks/LpUptimeBar-B4ltCfno.js";
+import { _ as _82 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
+import { _ as _83 } from "./chunks/LpTopologyCanvas-6ozNrQKh.js";
+import { _ as _84 } from "./chunks/LpUptimeBar-B4ltCfno.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
@@ -145,7 +146,7 @@ import { useShift } from "./composables/useShift.js";
 import { useTilt } from "./composables/useTilt.js";
 import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
-import { _ as _84 } from "./chunks/LpThemeProvider-CQ2jC9TA.js";
+import { _ as _85 } from "./chunks/LpThemeProvider-CQ2jC9TA.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
 function defineTheme(base, overrides = {}) {
   const src = typeof base === "string" ? presets[base] : base;
@@ -218,8 +219,8 @@ export {
   _30 as LpFieldNotice,
   _29 as LpFileTree,
   _31 as LpFormField,
-  _79 as LpHintLayer,
-  _80 as LpHints,
+  _80 as LpHintLayer,
+  _81 as LpHints,
   _32 as LpIcon,
   default10 as LpImageEditor,
   _33 as LpInfraNode,
@@ -250,7 +251,7 @@ export {
   _52 as LpRadio,
   _53 as LpRadioGroup,
   _23 as LpRangeCalendar,
-  _64 as LpRangeSlider,
+  _65 as LpRangeSlider,
   _54 as LpRollingText,
   _55 as LpScrollArea,
   _57 as LpSection,
@@ -259,29 +260,30 @@ export {
   _59 as LpServiceNode,
   _60 as LpShift,
   default11 as LpShortcutsDialog,
-  _61 as LpSidebar,
-  _62 as LpSkeleton,
-  _63 as LpSlider,
-  _66 as LpSparkline,
-  _67 as LpStat,
-  _68 as LpStepper,
-  _69 as LpSwitch,
+  _62 as LpSidebar,
+  _63 as LpSkeleton,
+  _64 as LpSlider,
+  _67 as LpSparkline,
+  _68 as LpStat,
+  _69 as LpStepper,
+  _61 as LpSwap,
+  _70 as LpSwitch,
   default12 as LpTable,
-  _70 as LpTableOfContents,
-  _71 as LpTabs,
-  _72 as LpTagsInput,
-  _73 as LpTextarea,
-  _84 as LpThemeProvider,
-  _74 as LpThemeSwitcher,
-  _75 as LpTilt,
+  _71 as LpTableOfContents,
+  _72 as LpTabs,
+  _73 as LpTagsInput,
+  _74 as LpTextarea,
+  _85 as LpThemeProvider,
+  _75 as LpThemeSwitcher,
+  _76 as LpTilt,
   _43 as LpTimeField,
-  _76 as LpToaster,
-  _77 as LpTooltip,
-  _81 as LpTooltipProvider,
-  _82 as LpTopologyCanvas,
-  _78 as LpTour,
-  _83 as LpUptimeBar,
-  _65 as LpVideoBackdrop,
+  _77 as LpToaster,
+  _78 as LpTooltip,
+  _82 as LpTooltipProvider,
+  _83 as LpTopologyCanvas,
+  _79 as LpTour,
+  _84 as LpUptimeBar,
+  _66 as LpVideoBackdrop,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.60.0",
+  "version": "0.62.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -30,6 +30,7 @@
     "./css": "./src/index.css",
     "./tokens.css": "./src/tokens/tokens.css",
     "./scrollbar.css": "./src/tokens/scrollbar.css",
+    "./selection.css": "./src/tokens/selection.css",
     "./canvas.css": "./src/canvas.css",
     "./package.json": "./package.json",
     "./dist/*.js": {

package/src/component-names.ts

@@ -80,6 +80,7 @@ export const COMPONENT_NAMES = [
   "LpSparkline",
   "LpStat",
   "LpStepper",
+  "LpSwap",
   "LpSwitch",
   "LpTable",
   "LpTableOfContents",

package/src/components/LpAlert.vue

@@ -45,23 +45,34 @@ const props = withDefaults(
      * of the page from the start should not be shouted on load.
      */
     live?: "assertive" | "polite" | false
+    /**
+     * Work is under way: the icon becomes a spinning loader (unless `icon` is
+     * given, which then spins instead) and the alert is announced politely.
+     * A loader drawn as a still icon read as a frozen page.
+     */
+    busy?: boolean
   }>(),
-  { variant: "info", live: undefined },
+  { variant: "info", live: undefined, busy: false },
 )
 
 const role = computed(() => {
-  const live = props.live ?? (props.variant === "danger" ? "assertive" : false)
+  const live = props.live ?? (props.variant === "danger" ? "assertive" : props.busy ? "polite" : false)
   return live === "assertive" ? "alert" : live === "polite" ? "status" : undefined
 })
 
 const classes = computed(() => alert({ variant: props.variant }))
-const resolvedIcon = computed(() => props.icon ?? ICONS[props.variant ?? "info"])
+const resolvedIcon = computed(() => props.icon ?? (props.busy ? "lucide:loader-circle" : ICONS[props.variant ?? "info"]))
 const iconTone = computed(() => ICON_TONE[props.variant ?? "info"])
 </script>
 
 <template>
-  <div :class="classes" :role="role">
-    <LpIcon :name="resolvedIcon" :size="18" :class="['mt-0.5 shrink-0', iconTone]" aria-hidden="true" />
+  <div :class="classes" :role="role" :aria-busy="busy || undefined">
+    <LpIcon
+      :name="resolvedIcon"
+      :size="18"
+      :class="['mt-0.5 shrink-0', iconTone, busy ? 'animate-spin motion-reduce:animate-none' : '']"
+      aria-hidden="true"
+    />
     <div class="min-w-0">
       <p v-if="title" class="font-semibold text-ink">{{ title }}</p>
       <div :class="['text-muted-strong', title ? 'mt-0.5' : '']">

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) {