@leavepulse/ui 0.58.1 → 0.60.0

package/dist/composables/useHintSystem.js

@@ -1,6 +1,44 @@
-import { provide, reactive, computed, inject, watch } from "vue";
+import { shallowRef, provide, onBeforeUnmount, reactive, computed, inject, watch } from "vue";
 import { anyModalOpen } from "../components/modalDepth.js";
 import { hints } from "./useHints.js";
+const HINT_SIGNALS = {
+  /** A context menu was opened (right click or long press). */
+  contextMenu: "lp.context-menu",
+  /** A "…" menu marked `rightClickToo` was opened: its items were one right click away. */
+  menuButton: "lp.menu-button",
+  /** A left click on something that also has a context menu. */
+  contextTarget: "lp.context-target",
+  /** The command palette was opened. */
+  palette: "lp.palette",
+  /** The current hint page changed: a navigation. */
+  navigate: "lp.navigate",
+  /** An item's actions were opened in the palette (Tab). */
+  paletteActions: "lp.palette-actions"
+};
+function contextMenuTip(text = {}) {
+  return {
+    id: "lp.tip.context-menu",
+    title: text.title ?? "Right-click works here",
+    text: text.text ?? "Rows and cards open their actions on right-click, even where no … button shows it.",
+    when: (count) => 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;
+      });
+      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;
+    }
+  };
+}
+function paletteTip(keys = "Ctrl+K", text = {}) {
+  return {
+    id: "lp.tip.palette",
+    title: text.title ?? "Jump anywhere",
+    text: text.text ?? "Search pages, people and settings from anywhere instead of the menu.",
+    keys,
+    when: (count) => count(HINT_SIGNALS.navigate) >= 15 && count(HINT_SIGNALS.palette) === 0
+  };
+}
 const RANK = { seen: 0, explained: 1, used: 2 };
 const DAY = 24 * 3600 * 1e3;
 const DEFAULT_TIMING = {
@@ -69,12 +107,15 @@ function createHintSystem(options) {
   const features = options.features;
   const pages = options.pages ?? {};
   const news = options.news ?? [];
+  const tips = options.tips ?? [];
+  const TIP_MAX = 3;
   const storage = options.storage ?? localHintStorage();
   const sessionKey = options.sessionKey ?? "lp-hints:interrupted";
   const state = reactive({
     records: /* @__PURE__ */ new Map(),
     loaded: false,
     page: "",
+    overlay: null,
     tour: { open: false, step: 0, steps: [], ids: [], page: "" },
     offer: null,
     candidate: null,
@@ -87,6 +128,9 @@ function createHintSystem(options) {
   const pageKey = hintKey.page;
   const newsKey = hintKey.news;
   const nudgeKey = hintKey.nudge;
+  const signalKey = (name) => `u:${name}`;
+  const tipKey = (id) => `p:${id}`;
+  const count = (name) => state.records.get(signalKey(name))?.count ?? 0;
   function interrupted() {
     try {
       return sessionStorage.getItem(sessionKey) === "1";
@@ -213,21 +257,35 @@ function createHintSystem(options) {
       return;
     }
     const n = state.candidate;
-    if (!n || n.page !== page) return;
-    const seen = state.records.get(nudgeKey(n.id));
-    if (seen?.dismissed || state.records.get(featureKey(n.feature))?.state === "used" || !hints.present(n.feature)) return;
-    if (seen && Date.now() - Date.parse(seen.updatedAt) < timing.nudgeAgain) return;
-    state.candidate = null;
-    spend();
-    record(nudgeKey(n.id), { add: 1 });
-    state.offer = { kind: "nudge", page, nudge: n };
+    if (n && n.page === page) {
+      const seen = state.records.get(nudgeKey(n.id));
+      const f = features[n.feature];
+      const visible = !!f && (!!f.target || !!f.enter || hints.present(n.feature));
+      if (!seen?.dismissed && state.records.get(featureKey(n.feature))?.state !== "used" && visible && !(seen && Date.now() - Date.parse(seen.updatedAt) < timing.nudgeAgain)) {
+        state.candidate = null;
+        spend();
+        record(nudgeKey(n.id), { add: 1 });
+        state.offer = { kind: "nudge", page, nudge: n };
+        return;
+      }
+    }
+    for (const tip of tips) {
+      const seen = state.records.get(tipKey(tip.id));
+      if (seen?.dismissed || (seen?.count ?? 0) >= (tip.max ?? TIP_MAX)) continue;
+      if (seen && Date.now() - Date.parse(seen.updatedAt) < timing.nudgeAgain) continue;
+      if (!tip.when(count)) continue;
+      spend();
+      state.offer = { kind: "tip", page, tip };
+      return;
+    }
   }
   let stops = [];
   function start() {
     if (stops.length) return;
     const stopPage = watch(
-      options.page,
-      (page) => {
+      () => state.overlay ?? options.page(),
+      (page, previous) => {
+        if (previous !== void 0 && page !== previous && !state.overlay) record(signalKey(HINT_SIGNALS.navigate), { add: 1 });
         state.page = page;
         state.settledAt = Date.now();
         if (state.offer && state.offer.page !== page) state.offer = null;
@@ -249,6 +307,7 @@ function createHintSystem(options) {
       stopPage,
       hints.on("used", (id) => {
         if (features[id]) record(featureKey(id), { state: "used", add: 1 });
+        if (id.startsWith("lp.") || !features[id]) record(signalKey(id), { add: 1 });
       }),
       () => clearInterval(poll),
       () => window.removeEventListener("pagehide", flushOnLeave)
@@ -279,6 +338,16 @@ function createHintSystem(options) {
     nudge(n) {
       state.candidate = { ...n, page: state.page };
     },
+    /**
+     * A dialog acts as its own page while open (its dots and tour), then hands
+     * back. Pass null on close, and on unmount: a dialog left open by a route
+     * change would otherwise keep the page.
+     */
+    overlay(page) {
+      state.overlay = page;
+    },
+    /** How many times a signal was reported (for an app's own tips or reports). */
+    count,
     /** The user navigated on purpose (palette, notification): do not interrupt this arrival. */
     markIntent() {
       state.intent = true;
@@ -294,6 +363,7 @@ function createHintSystem(options) {
       if (id) record(featureKey(id), { state: "explained" });
     },
     tourEnded(finished) {
+      if (!state.tour.ids.length) return;
       record(pageKey(state.tour.page), finished ? { state: "explained" } : { add: 1 });
       baseline(state.tour.page);
     },
@@ -305,6 +375,10 @@ function createHintSystem(options) {
         const ids = offer.items.map((n) => n.feature).filter((id) => !!id);
         readNews(offer.page);
         if (choice === "show" && ids.length) startTour(offer.page, ids);
+      } else if (offer.kind === "tip") {
+        record(tipKey(offer.tip.id), { add: 1, dismissed: choice === "never" });
+        const step = choice === "show" ? offer.tip.step?.() : null;
+        if (step) Object.assign(state.tour, { open: true, step: 0, page: offer.page, ids: [], steps: [step] });
       } else if (offer.kind === "nudge") {
         if (choice === "show") startTour(features[offer.nudge.feature].page, [offer.nudge.feature]);
         else record(nudgeKey(offer.nudge.id), { dismissed: true });
@@ -318,17 +392,29 @@ function createHintSystem(options) {
   };
 }
 const HINT_SYSTEM = /* @__PURE__ */ Symbol.for("lp-hint-system");
+const running = shallowRef(null);
 function provideHintSystem(system) {
   provide(HINT_SYSTEM, system);
+  running.value = system;
+  onBeforeUnmount(() => {
+    if (running.value === system) running.value = null;
+  });
 }
 function useHintSystem() {
-  return inject(HINT_SYSTEM, null);
+  return inject(HINT_SYSTEM, null) ?? running.value;
+}
+function runningHintSystem() {
+  return running.value;
 }
 export {
+  HINT_SIGNALS,
+  contextMenuTip,
   createHintSystem,
   hintKey,
   hintSummary,
   localHintStorage,
+  paletteTip,
   provideHintSystem,
+  runningHintSystem,
   useHintSystem
 };

package/dist/icons-all.js

@@ -1,3 +1,3 @@
 import lucide from "@iconify-json/lucide/icons.json";
-import { a as registerIconCollection } from "./chunks/icons-QqBscG5I.js";
+import { a as registerIconCollection } from "./chunks/icons-CuO3W46H.js";
 registerIconCollection(lucide);

package/dist/index.d.ts

@@ -162,8 +162,8 @@ export type { TourContext, TourStep } from "./components/LpTour.vue";
 export { holeOf, openContextMenu, panelsAround } from "./components/tour";
 export { default as LpHintLayer } from "./components/LpHintLayer.vue";
 export { default as LpHints } from "./components/LpHints.vue";
-export { createHintSystem, hintKey, hintSummary, localHintStorage, provideHintSystem, useHintSystem } from "./composables/useHintSystem";
-export type { HintDelta, HintFeature, HintLevel, HintNews, HintNudge, HintOffer, HintPage, HintRecord, HintStorage, HintSummary, HintSystem, HintSystemOptions, HintTiming, } from "./composables/useHintSystem";
+export { HINT_SIGNALS, contextMenuTip, createHintSystem, hintKey, hintSummary, localHintStorage, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem";
+export type { HintDelta, HintFeature, HintLevel, HintNews, HintNudge, HintOffer, HintPage, HintRecord, HintStorage, HintSummary, HintSystem, HintTip, HintSystemOptions, HintTiming, } from "./composables/useHintSystem";
 export type { HintNote } from "./components/LpHintLayer.vue";
 export { default as LpTooltipProvider } from "./components/LpTooltipProvider.vue";
 export { default as LpTopologyCanvas } from "./components/LpTopologyCanvas.vue";

package/dist/index.js

@@ -1,24 +1,24 @@
-import { _ } from "./chunks/LayoutCanvas-BcGLJVBq.js";
-import { _ as _2 } from "./chunks/LpAddressInput-Dio6Sqed.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-Be6T96td.js";
-import { _ as _7 } from "./chunks/LpAutocomplete-hJ_6CHlh.js";
-import { _ as _8 } from "./chunks/LpAvatar-BxNs23Xu.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-DhR7u0d8.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-CXsqJwDy.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-DQ88niXq.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-DxlSdjmk.js";
-import { _ as _19 } from "./chunks/LpConfirmHost-BcrmTNu_.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-B1NGfpp1.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-DSknigxH.js";
-import { _ as _27 } from "./chunks/LpDropdownMenu-C7oHVlKY.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-CMA0_rsB.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-DwiYE32z.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-BxYssnXg.js";
-import { _ as _40 } from "./chunks/LpModalNav-Bn2ws64b.js";
-import { _ as _41 } from "./chunks/LpNotificationBell-DJfs4JjQ.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-Bg5uTZbx.js";
-import { _ as _48 } from "./chunks/LpPie-DeTkbbOK.js";
-import { _ as _49 } from "./chunks/LpPhoneInput-DStwcbnQ.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-D3Eam8sa.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-CshW0fqC.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-BBGRHY38.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-B_qhSl7q.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-Bo9Q4QBP.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.58.1",
+  "version": "0.60.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/ContextMenuItems.vue

@@ -23,7 +23,7 @@ defineProps<{
 }>()
 
 const ITEM =
-  "group/item flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft"
+  "group/item flex cursor-pointer select-none items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft"
 const ICON =
   "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[highlighted]/item:translate-x-0.5"
 </script>

package/src/components/LpChart.vue

@@ -1116,7 +1116,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         v-for="s in allSeries"
         :key="s.id"
         type="button"
-        class="group flex cursor-pointer items-center gap-1.5 rounded-md text-xs outline-none transition-opacity duration-fast focus-visible:ring-2 focus-visible:ring-ring"
+        class="group flex cursor-pointer items-center gap-1.5 rounded-inner text-xs outline-none transition-opacity duration-fast focus-visible:ring-2 focus-visible:ring-ring"
         :class="hidden.has(s.id) ? 'opacity-40' : ''"
         :aria-pressed="!hidden.has(s.id)"
         @click="toggleSeries(s.id)"

package/src/components/LpCodeBlock.vue

@@ -236,14 +236,14 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       class="flex items-center gap-2 border-b border-line bg-surface-soft px-3 py-1.5 text-muted"
     >
       <span v-if="title" class="truncate text-ink">{{ title }}</span>
-      <span v-if="lang !== 'plain'" class="rounded bg-surface px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
+      <span v-if="lang !== 'plain'" class="rounded-small bg-surface px-1.5 py-0.5 text-[10px] uppercase tracking-wide">
         {{ lang }}
       </span>
       <div class="ml-auto flex items-center gap-1">
         <button
           v-if="lockToggle"
           type="button"
-          class="group/lock flex items-center gap-1 rounded px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+          class="group/lock flex items-center gap-1 rounded-small px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
           :aria-label="locked ? text.unlock : text.lock"
           @click="toggleLock"
         >
@@ -256,7 +256,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         <button
           v-if="copyable"
           type="button"
-          class="group/copy flex items-center gap-1 rounded px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+          class="group/copy flex items-center gap-1 rounded-small px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
           :aria-label="copied ? text.copied : text.copy"
           @click="copy"
         >
@@ -314,7 +314,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
             v-else
           ><button
               type="button"
-              class="lp-fold-toggle flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+              class="lp-fold-toggle flex w-full items-center gap-1.5 rounded-small px-1 py-0.5 text-left text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
               :aria-expanded="openState[seg.id]"
               @click="toggleFold(seg.id)"
             ><LpIcon

package/src/components/LpColorPicker.vue

@@ -654,11 +654,11 @@ defineExpose({ open })
                would be painted over the checkerboard and, being translucent
                white, would show it through as a see-through outline. -->
           <span
-            class="relative size-5 shrink-0 overflow-hidden rounded-md"
+            class="relative size-5 shrink-0 overflow-hidden rounded-inner"
             :style="{ background: CHECKERBOARD }"
           >
             <span class="block size-full" :style="{ backgroundColor: previewCss }" />
-            <span class="pointer-events-none absolute inset-0 rounded-md ring-1 ring-inset ring-line" />
+            <span class="pointer-events-none absolute inset-0 rounded-inner ring-1 ring-inset ring-line" />
           </span>
           <span class="min-w-0 flex-1 truncate font-mono text-xs text-muted-strong">
             {{ label ?? current }}
@@ -814,7 +814,7 @@ defineExpose({ open })
                   :disabled="disabled"
                   :aria-label="c"
                   :aria-pressed="isActiveSwatch(c)"
-                  class="relative flex items-center justify-center overflow-hidden rounded-md outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed motion-reduce:hover:scale-100 motion-reduce:active:scale-95"
+                  class="relative flex items-center justify-center overflow-hidden rounded-inner outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed motion-reduce:hover:scale-100 motion-reduce:active:scale-95"
                   :class="row.size"
                   :style="{ background: CHECKERBOARD }"
                   @click="pickSwatch(c)"
@@ -826,7 +826,7 @@ defineExpose({ open })
                        inset ring painted OVER the colour instead, so it reads
                        as one fixed hairline rather than a translucent gap. -->
                   <span class="absolute inset-0" :style="{ backgroundColor: c }" />
-                  <span class="pointer-events-none absolute inset-0 rounded-md ring-1 ring-inset ring-line" />
+                  <span class="pointer-events-none absolute inset-0 rounded-inner ring-1 ring-inset ring-line" />
                   <LpIcon
                     v-if="isActiveSwatch(c)"
                     name="lucide:check"

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)
@@ -1239,7 +1254,7 @@ useHotkeys(() =>
             v-for="(step, i) in trail"
             :key="step.id"
             type="button"
-            class="flex shrink-0 items-center gap-1.5 rounded-md bg-brand-soft px-2 py-1 text-xs font-medium text-brand transition-opacity hover:opacity-80"
+            class="flex shrink-0 items-center gap-1.5 rounded-inner bg-brand-soft px-2 py-1 text-xs font-medium text-brand transition-opacity hover:opacity-80"
             :title="text.back"
             @click="popTo(i)"
           >
@@ -1264,7 +1279,7 @@ useHotkeys(() =>
             @keydown.esc="onEscape"
             @keydown.tab="onTab"
           />
-          <kbd class="shrink-0 rounded border border-line px-1.5 py-0.5 text-[10px] text-muted">{{ text.esc }}</kbd>
+          <kbd class="shrink-0 rounded-small border border-line px-1.5 py-0.5 text-[10px] text-muted">{{ text.esc }}</kbd>
         </div>
 
         <!-- Results -->
@@ -1305,7 +1320,7 @@ useHotkeys(() =>
                   :aria-disabled="c.disabled || undefined"
                   :data-cmd-index="flatIndexOf(c)"
                   :disabled="c.href ? undefined : c.disabled"
-                  class="lp-cmd-item flex w-full gap-3 rounded-md px-2.5 py-2 text-left text-sm outline-none transition-colors duration-[var(--duration-fast)] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45"
+                  class="lp-cmd-item flex w-full gap-3 rounded-inner px-2.5 py-2 text-left text-sm outline-none transition-colors duration-[var(--duration-fast)] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45"
                   :class="[
                     c.excerpt ? 'items-start' : 'items-center',
                     flatIndexOf(c) === selectedIndex
@@ -1365,7 +1380,7 @@ useHotkeys(() =>
                        shortcut is learned by seeing it rather than reading docs. -->
                   <kbd
                     v-else-if="c.prefix && c.children"
-                    class="shrink-0 rounded border border-line px-1.5 font-mono text-[11px] whitespace-pre text-muted"
+                    class="shrink-0 rounded-small border border-line px-1.5 font-mono text-[11px] whitespace-pre text-muted"
                   >{{ c.prefix }}</kbd>
                   <!-- Drills in rather than runs: worth saying before the click,
                        since the two look identical otherwise. -->
@@ -1390,7 +1405,7 @@ useHotkeys(() =>
               <span>{{ text.searchFailed }}</span>
               <button
                 type="button"
-                class="rounded-md px-1.5 py-0.5 font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:ring-2 focus-visible:ring-ring"
+                class="rounded-inner px-1.5 py-0.5 font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:ring-2 focus-visible:ring-ring"
                 @click="refresh(); inputRef?.focus()"
               >
                 {{ text.retry }}
@@ -1451,26 +1466,33 @@ useHotkeys(() =>
           class="flex shrink-0 items-center gap-4 border-t border-line px-4 py-2.5 text-[11px] text-muted [@media(hover:none)_and_(pointer:coarse)]:hidden"
         >
           <span class="flex items-center gap-1">
-            <kbd class="rounded border border-line px-1 text-[10px]">↑</kbd>
-            <kbd class="rounded border border-line px-1 text-[10px]">↓</kbd>
+            <kbd class="rounded-small border border-line px-1 text-[10px]">↑</kbd>
+            <kbd class="rounded-small border border-line px-1 text-[10px]">↓</kbd>
             {{ text.navigate }}
           </span>
           <span class="flex items-center gap-1">
-            <kbd class="rounded border border-line px-1 text-[10px]">↵</kbd>
+            <kbd class="rounded-small border border-line px-1 text-[10px]">↵</kbd>
             {{ text.select }}
           </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 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">
-            <kbd class="rounded border border-line px-1 text-[10px]">⌫</kbd>
+            <kbd class="rounded-small border border-line px-1 text-[10px]">⌫</kbd>
             {{ text.back }}
           </span>
           <span class="ml-auto flex items-center gap-1">
-            <kbd class="rounded border border-line px-1 text-[10px]">{{ text.esc }}</kbd>
+            <kbd class="rounded-small border border-line px-1 text-[10px]">{{ text.esc }}</kbd>
             {{ text.close }}
           </span>
         </div>