@leavepulse/ui 0.59.0 → 0.60.0

package/dist/index.js

@@ -1,24 +1,24 @@
-import { _ } from "./chunks/LayoutCanvas-BcGLJVBq.js";
-import { _ as _2 } from "./chunks/LpAddressInput-D-H94m4q.js";
-import { _ as _3 } from "./chunks/LpMapPicker-BH5csaBt.js";
+import { _ } from "./chunks/LayoutCanvas-t7LWFCEn.js";
+import { _ as _2 } from "./chunks/LpAddressInput-DD4zTN4P.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-DCN-_pZP.js";
-import { _ as _5 } from "./chunks/LpAlert-CXMn1GYE.js";
-import { _ as _6 } from "./chunks/LpAppShell-BeMuKEjh.js";
-import { _ as _7 } from "./chunks/LpAutocomplete-hJ_6CHlh.js";
-import { _ as _8 } from "./chunks/LpAvatar-CeW4Z5CL.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 _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
-import { _ as _10 } from "./chunks/LpBreadcrumbs-BLzOEgAF.js";
-import { _ as _11 } from "./chunks/LpButton-vhlwmpBy.js";
-import { _ as _12 } from "./chunks/LpCalendar-BLoE8Qm7.js";
-import { _ as _13 } from "./chunks/LpCard-Gbr8a1xK.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 { 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-B_C8sOoT.js";
-import { _ as _15 } from "./chunks/LpCodeBlock-D6zhp30a.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-CVXwjEtX.js";
+import { _ as _16 } from "./chunks/LpColorPicker-CvBF8TeL.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";
@@ -30,46 +30,46 @@ import { default as default6 } from "./components/LpPaletteStats.vue.js";
 import { default as default7 } from "./components/LpPaletteSwatches.vue.js";
 import { default as default8 } from "./components/LpKeys.vue.js";
 import { comboKeys, comboSteps } from "./components/keys.js";
-import { _ as _18 } from "./chunks/LpConfirmDialog-DkgIT-Xg.js";
-import { _ as _19 } from "./chunks/LpConfirmHost-CYzXWFOI.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-DRFd-iyc.js";
-import { _ as _21 } from "./chunks/LpDatePicker-B-VMHMgy.js";
-import { _ as _22 } from "./chunks/LpDateRangePicker-B68KPKPl.js";
-import { _ as _23 } from "./chunks/LpRangeCalendar-D5sDID9W.js";
+import { _ as _20 } from "./chunks/LpContextMenu-BnN1k7ga.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";
 import { clampRange, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
-import { _ as _24 } from "./chunks/LpDisclosure-Ct-VBHxt.js";
+import { _ as _24 } from "./chunks/LpDisclosure-s8cQ7KQq.js";
 import { _ as _25 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _26 } from "./chunks/LpDrawer-Rc6eAJrr.js";
-import { _ as _27 } from "./chunks/LpDropdownMenu-BoJQsjzt.js";
+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-CBwwkkdA.js";
-import { _ as _29 } from "./chunks/LpFileTree-Bs57DhVa.js";
+import { _ as _28 } from "./chunks/LpEmptyState-CX8fdGSU.js";
+import { _ as _29 } from "./chunks/LpFileTree-DEqh2ySW.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
-import { _ as _30 } from "./chunks/LpFieldNotice-9hH4ITZa.js";
-import { _ as _31 } from "./chunks/LpFormField-BpQ6WJPe.js";
-import { _ as _32 } from "./chunks/LpIcon-B5guGKrW.js";
-import { i, b, a, c } from "./chunks/icons-QqBscG5I.js";
+import { _ as _30 } from "./chunks/LpFieldNotice-B--RzKfj.js";
+import { _ as _31 } from "./chunks/LpFormField-DMPPL1jF.js";
+import { _ as _32 } from "./chunks/LpIcon-CTuDVTYv.js";
+import { i, b, a, c } from "./chunks/icons-CuO3W46H.js";
 import { default as default10 } from "./components/LpImageEditor.vue.js";
 import { _ as _33 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
-import { _ as _34 } from "./chunks/LpInput-WvyP02ID.js";
-import { _ as _35 } from "./chunks/LpLightbox-Dq-e36uT.js";
+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-B92bAftG.js";
+import { _ as _37 } from "./chunks/LpLogViewer-BuPe23sZ.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
-import { _ as _38 } from "./chunks/LpMediaGallery-B1kDypJ-.js";
-import { _ as _39 } from "./chunks/LpModal-DvGD6kEe.js";
-import { _ as _40 } from "./chunks/LpModalNav-B-_zRTS-.js";
-import { _ as _41 } from "./chunks/LpNotificationBell-63pvatBj.js";
-import { _ as _42 } from "./chunks/LpNumberField-CJPjmoDz.js";
-import { _ as _43 } from "./chunks/LpTimeField-DvGXgdES.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 _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-DehAaJLY.js";
-import { _ as _47 } from "./chunks/LpPasswordInput-BK25_vNG.js";
-import { _ as _48 } from "./chunks/LpPie-Coa2GMHt.js";
-import { _ as _49 } from "./chunks/LpPhoneInput-Bxg7a_qD.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 _49 } from "./chunks/LpPhoneInput-CZrpVxla.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _50 } from "./chunks/LpPopover-DCKeqiVn.js";
 import { _ as _51 } from "./chunks/LpProgress-CBU1iI69.js";
@@ -77,38 +77,38 @@ import { _ as _52 } from "./chunks/LpRadio-CWA5Eb3M.js";
 import { _ as _53 } from "./chunks/LpRadioGroup-CCn-Q2_c.js";
 import { _ as _54 } from "./chunks/LpRollingText-DB7upf-5.js";
 import { _ as _55 } from "./chunks/LpScrollArea-Hz3-JWUG.js";
-import { _ as _56 } from "./chunks/LpSegmented-DbrUjuSA.js";
-import { _ as _57 } from "./chunks/LpSection-B19VPYmr.js";
-import { _ as _58 } from "./chunks/LpSelect-DynjWK1A.js";
+import { _ as _56 } from "./chunks/LpSegmented-DslFku0N.js";
+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 { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _61 } from "./chunks/LpSidebar-CKamWtPo.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 { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop.js";
 import { _ as _66 } from "./chunks/LpSparkline-CB80N8SJ.js";
-import { _ as _67 } from "./chunks/LpStat-BS2TEXYK.js";
-import { _ as _68 } from "./chunks/LpStepper-BSglWF45.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 { 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-D01b8jBI.js";
-import { _ as _72 } from "./chunks/LpTagsInput-CHbQoAAA.js";
+import { _ as _71 } from "./chunks/LpTabs-00v3VQx4.js";
+import { _ as _72 } from "./chunks/LpTagsInput-Sc56iy_j.js";
 import { addTags, splitTags } from "./components/tags.js";
-import { _ as _73 } from "./chunks/LpTextarea-Bz2IWhTH.js";
-import { _ as _74 } from "./chunks/LpThemeSwitcher-CbzL6ipO.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-C9EacEfR.js";
+import { _ as _76 } from "./chunks/LpToaster-BcKs7vX7.js";
 import { _ as _77 } from "./chunks/LpTooltip-suFCM34F.js";
-import { _ as _78 } from "./chunks/LpTour-D7m9ZxNk.js";
+import { _ as _78 } from "./chunks/LpTour-C29-1wha.js";
 import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
-import { _ as _79 } from "./chunks/LpHintLayer-B5-6FyEf.js";
-import { _ as _80 } from "./chunks/LpHints-BqoZXHZk.js";
-import { createHintSystem, hintKey, hintSummary, localHintStorage, provideHintSystem, useHintSystem } from "./composables/useHintSystem.js";
+import { _ as _79 } from "./chunks/LpHintLayer-DsclGYcD.js";
+import { _ as _80 } from "./chunks/LpHints-BTpvisgP.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";
@@ -184,6 +184,7 @@ export {
   DEFAULT_SWATCHES,
   FIELD_NOTICE_MS,
   G as GLASS_BACKDROP_ATTR,
+  HINT_SIGNALS,
   LP_CONFIG,
   LP_FIELD,
   _ as LayoutCanvas,
@@ -314,6 +315,7 @@ export {
   compareValues,
   computeStats,
   confirm,
+  contextMenuTip,
   countBlocks,
   countLeaves,
   countLevels,
@@ -388,6 +390,7 @@ export {
   k as normalizeTheme,
   opaqueCss,
   openContextMenu,
+  paletteTip,
   panelsAround,
   parseColor,
   parseCommandQuery,
@@ -424,6 +427,7 @@ export {
   rgbToHsv,
   ringWindow,
   o as rose,
+  runningHintSystem,
   sameRange,
   scrollParent,
   scrollToElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

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 } 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,14 @@ function keepContextMenu(event: Event) {
   if (enabled.value) event.stopPropagation()
 }
 
+function opened(open: boolean) {
+  if (open) hints.use(HINT_SIGNALS.contextMenu)
+}
+
+function leftClick() {
+  if (hinted.value) hints.use(HINT_SIGNALS.contextTarget)
+}
+
 function returnFocus(event: Event) {
   const saved = field
   field = null
@@ -106,10 +122,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/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

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()
 })