@leavepulse/ui 0.57.0 → 0.58.0

package/dist/composables/useHintSystem.js

@@ -0,0 +1,334 @@
+import { provide, reactive, computed, inject, watch } from "vue";
+import { anyModalOpen } from "../components/modalDepth.js";
+import { hints } from "./useHints.js";
+const RANK = { seen: 0, explained: 1, used: 2 };
+const DAY = 24 * 3600 * 1e3;
+const DEFAULT_TIMING = {
+  settle: 2500,
+  offerAgain: 3 * DAY,
+  offersMax: 2,
+  freshLimit: 3,
+  nudgeAgain: 7 * DAY,
+  flush: 2e3
+};
+function localHintStorage(key = "lp-hints") {
+  const read = () => {
+    try {
+      return JSON.parse(localStorage.getItem(key) || "{}");
+    } catch {
+      return {};
+    }
+  };
+  return {
+    load: read,
+    save(deltas) {
+      const all = read();
+      for (const d of deltas) all[d.key] = merge(all[d.key], d);
+      try {
+        localStorage.setItem(key, JSON.stringify(all));
+      } catch {
+        return;
+      }
+    }
+  };
+}
+function merge(record, delta) {
+  const base = record ?? { state: "seen", dismissed: false, count: 0, updatedAt: "" };
+  return {
+    ...base,
+    state: delta.state && RANK[delta.state] > RANK[base.state] ? delta.state : base.state,
+    dismissed: delta.dismissed ?? base.dismissed,
+    count: base.count + (delta.add ?? 0),
+    updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+}
+const hintKey = {
+  feature: (id, rev = 1) => `f:${id}:${rev}`,
+  page: (page) => `t:${page}`,
+  news: (id) => `c:${id}`,
+  nudge: (id) => `n:${id}`
+};
+function hintSummary(records, features, page) {
+  const own = Object.entries(features).filter(([, f]) => f.page === page);
+  const knows = (id, f) => RANK[records.get(hintKey.feature(id, f.rev))?.state ?? "seen"] >= RANK.explained;
+  const tour = records.get(hintKey.page(page));
+  return {
+    tour: tour && RANK[tour.state] >= RANK.explained ? "done" : tour?.assigned ? "assigned" : tour?.dismissed ? "declined" : tour ? "offered" : "never",
+    offers: tour?.count ?? 0,
+    known: own.filter(([id, f]) => knows(id, f)).length,
+    total: own.length,
+    missing: own.filter(([id, f]) => f.required && !knows(id, f)).map(([, f]) => f.title)
+  };
+}
+function typing() {
+  const el = document.activeElement;
+  return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLElement && el.isContentEditable;
+}
+function createHintSystem(options) {
+  const timing = { ...DEFAULT_TIMING, ...options.timing };
+  const features = options.features;
+  const pages = options.pages ?? {};
+  const news = options.news ?? [];
+  const storage = options.storage ?? localHintStorage();
+  const sessionKey = options.sessionKey ?? "lp-hints:interrupted";
+  const state = reactive({
+    records: /* @__PURE__ */ new Map(),
+    loaded: false,
+    page: "",
+    tour: { open: false, step: 0, steps: [], ids: [], page: "" },
+    offer: null,
+    candidate: null,
+    settledAt: 0,
+    intent: false
+  });
+  const pending = /* @__PURE__ */ new Map();
+  let flushTimer;
+  const featureKey = (id) => hintKey.feature(id, features[id]?.rev);
+  const pageKey = hintKey.page;
+  const newsKey = hintKey.news;
+  const nudgeKey = hintKey.nudge;
+  function interrupted() {
+    try {
+      return sessionStorage.getItem(sessionKey) === "1";
+    } catch {
+      return false;
+    }
+  }
+  function spend() {
+    try {
+      sessionStorage.setItem(sessionKey, "1");
+    } catch {
+      return;
+    }
+  }
+  async function flush() {
+    clearTimeout(flushTimer);
+    flushTimer = void 0;
+    if (!pending.size) return;
+    const deltas = [...pending.values()];
+    pending.clear();
+    try {
+      await storage.save(deltas);
+    } catch {
+      for (const d of deltas) if (!pending.has(d.key)) pending.set(d.key, d);
+    }
+  }
+  function flushOnLeave() {
+    if (!pending.size) return;
+    const deltas = [...pending.values()];
+    pending.clear();
+    if (storage.saveOnLeave) storage.saveOnLeave(deltas);
+    else void storage.save(deltas);
+  }
+  function record(key, delta) {
+    state.records.set(key, merge(state.records.get(key), delta));
+    const queued = pending.get(key);
+    pending.set(key, {
+      key,
+      state: delta.state ?? queued?.state,
+      dismissed: delta.dismissed ?? queued?.dismissed,
+      add: (queued?.add ?? 0) + (delta.add ?? 0)
+    });
+    flushTimer ??= setTimeout(() => void flush(), timing.flush);
+  }
+  const present = (page) => Object.keys(features).filter((id) => features[id].page === page && hints.present(id));
+  function knownBefore(page) {
+    const marker = pages[page]?.known;
+    if (!marker) return false;
+    try {
+      return Object.keys(localStorage).some((key) => key.startsWith(marker));
+    } catch {
+      return false;
+    }
+  }
+  function baseline(page) {
+    for (const id of present(page)) if (!state.records.has(featureKey(id))) record(featureKey(id), { state: "seen" });
+  }
+  const fresh = computed(() => {
+    const page = state.page;
+    if (!page || !state.loaded || state.tour.open || !state.records.has(pageKey(page))) return [];
+    return present(page).filter((id) => {
+      const f = features[id];
+      const rec = state.records.get(featureKey(id));
+      if (!rec) return !f.conditional || (f.rev ?? 1) > 1;
+      return !!f.required && RANK[rec.state] < RANK.explained && !rec.dismissed;
+    }).sort((a, b) => Number(!!features[b].required) - Number(!!features[a].required) || (features[a].order ?? 0) - (features[b].order ?? 0)).slice(0, timing.freshLimit);
+  });
+  const notes = computed(
+    () => Object.fromEntries(Object.entries(features).map(([id, f]) => [id, { title: f.title, text: f.text }]))
+  );
+  const hasTour = (page = state.page) => Object.values(features).some((f) => f.page === page);
+  function startTour(page = state.page, only) {
+    const entries = Object.entries(features).filter(([id, f]) => f.page === page && (!only || only.includes(id))).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
+    if (!entries.length) return;
+    state.offer = null;
+    Object.assign(state.tour, {
+      open: true,
+      step: 0,
+      page,
+      ids: entries.map(([id]) => id),
+      steps: entries.map(([id, f]) => ({
+        target: f.target ?? id,
+        title: f.title,
+        text: f.text,
+        keys: f.keys,
+        try: f.try,
+        side: f.side,
+        enter: f.enter
+      }))
+    });
+  }
+  const unread = (page) => news.filter((n) => (!page || n.page === page) && !state.records.has(newsKey(n.id)) && (!page || !n.feature || hints.present(n.feature)));
+  function readNews(page) {
+    for (const n of unread(page)) record(newsKey(n.id), { state: "explained" });
+  }
+  function considerOffer() {
+    const page = state.page;
+    const ready = state.loaded && !state.tour.open && !state.offer && !anyModalOpen() && !typing() && Date.now() - state.settledAt > timing.settle;
+    if (!page || !ready) return;
+    const rec = state.records.get(pageKey(page));
+    if (rec?.assigned && RANK[rec.state] < RANK.explained && hasTour(page)) {
+      state.offer = { kind: "assigned", page };
+      return;
+    }
+    if (state.intent || interrupted()) return;
+    if (!rec && knownBefore(page)) {
+      record(pageKey(page), { state: "seen" });
+      baseline(page);
+    } else if (!rec || !rec.dismissed && RANK[rec.state] < RANK.explained && rec.count < timing.offersMax && Date.now() - Date.parse(rec.updatedAt || "0") > timing.offerAgain) {
+      if (!hasTour(page)) return;
+      spend();
+      if (!rec) {
+        record(pageKey(page), { state: "seen" });
+        baseline(page);
+        readNews(page);
+      }
+      state.offer = { kind: "tour", page };
+      return;
+    }
+    const items = unread(page);
+    if (items.length) {
+      spend();
+      state.offer = { kind: "news", page, items: items.slice(0, 3) };
+      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 };
+  }
+  let stops = [];
+  function start() {
+    if (stops.length) return;
+    const stopPage = watch(
+      options.page,
+      (page) => {
+        state.page = page;
+        state.settledAt = Date.now();
+        if (state.offer && state.offer.page !== page) state.offer = null;
+        if (state.candidate && state.candidate.page !== page) state.candidate = null;
+        setTimeout(() => state.intent = false, timing.settle * 2);
+      },
+      { immediate: true }
+    );
+    const poll = setInterval(() => {
+      try {
+        considerOffer();
+      } catch (error) {
+        console.warn("[hints] disabled after an error:", error);
+        stop();
+      }
+    }, 1e3);
+    window.addEventListener("pagehide", flushOnLeave);
+    stops = [
+      stopPage,
+      hints.on("used", (id) => {
+        if (features[id]) record(featureKey(id), { state: "used", add: 1 });
+      }),
+      () => clearInterval(poll),
+      () => window.removeEventListener("pagehide", flushOnLeave)
+    ];
+  }
+  function stop() {
+    for (const s of stops.splice(0)) s();
+    flushOnLeave();
+  }
+  return {
+    state,
+    fresh,
+    notes,
+    start,
+    stop,
+    hasTour,
+    startTour,
+    async load() {
+      state.records.clear();
+      try {
+        for (const [key, rec] of Object.entries(await storage.load())) state.records.set(key, rec);
+        state.loaded = true;
+      } catch {
+        state.loaded = false;
+      }
+    },
+    /** Ask for a nudge; it shows when the budget and the page allow. */
+    nudge(n) {
+      state.candidate = { ...n, page: state.page };
+    },
+    /** The user navigated on purpose (palette, notification): do not interrupt this arrival. */
+    markIntent() {
+      state.intent = true;
+    },
+    unreadNews: (page) => unread(page),
+    readNews,
+    pageTitle: (page) => pages[page]?.title ?? page,
+    readFresh(id) {
+      record(featureKey(id), { state: "explained" });
+    },
+    tourShown(index) {
+      const id = state.tour.ids[index];
+      if (id) record(featureKey(id), { state: "explained" });
+    },
+    tourEnded(finished) {
+      record(pageKey(state.tour.page), finished ? { state: "explained" } : { add: 1 });
+      baseline(state.tour.page);
+    },
+    answer(choice) {
+      const offer = state.offer;
+      state.offer = null;
+      if (!offer) return;
+      if (offer.kind === "news") {
+        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 === "nudge") {
+        if (choice === "show") startTour(features[offer.nudge.feature].page, [offer.nudge.feature]);
+        else record(nudgeKey(offer.nudge.id), { dismissed: true });
+      } else if (choice === "show") {
+        startTour(offer.page);
+      } else {
+        record(pageKey(offer.page), { add: 1, dismissed: choice === "never" });
+        baseline(offer.page);
+      }
+    }
+  };
+}
+const HINT_SYSTEM = /* @__PURE__ */ Symbol.for("lp-hint-system");
+function provideHintSystem(system) {
+  provide(HINT_SYSTEM, system);
+}
+function useHintSystem() {
+  return inject(HINT_SYSTEM, null);
+}
+export {
+  createHintSystem,
+  hintKey,
+  hintSummary,
+  localHintStorage,
+  provideHintSystem,
+  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-CkA0njzm.js";
+import { a as registerIconCollection } from "./chunks/icons-QqBscG5I.js";
 registerIconCollection(lucide);

package/dist/index.d.ts

@@ -161,6 +161,9 @@ export { default as LpTour } from "./components/LpTour.vue";
 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 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-BkaGXTjx.js";
-import { _ as _2 } from "./chunks/LpAddressInput-NUHmplCd.js";
-import { _ as _3 } from "./chunks/LpMapPicker-Cc84LaM3.js";
+import { _ } from "./chunks/LayoutCanvas-BcGLJVBq.js";
+import { _ as _2 } from "./chunks/LpAddressInput-Dio6Sqed.js";
+import { _ as _3 } from "./chunks/LpMapPicker-BH5csaBt.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
-import { _ as _4 } from "./chunks/LpActionBar-C3hkVsFz.js";
-import { _ as _5 } from "./chunks/LpAlert-B6ilrM7T.js";
-import { _ as _6 } from "./chunks/LpAppShell-Bl1Ch68N.js";
-import { _ as _7 } from "./chunks/LpAutocomplete-C8IgSMsi.js";
-import { _ as _8 } from "./chunks/LpAvatar-LTvy0OkE.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 _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
-import { _ as _10 } from "./chunks/LpBreadcrumbs-D4TsoFju.js";
-import { _ as _11 } from "./chunks/LpButton-BdfZFNqi.js";
-import { _ as _12 } from "./chunks/LpCalendar-DrA2McTU.js";
-import { _ as _13 } from "./chunks/LpCard-DbjO5yaF.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 { 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-DvVYeOD-.js";
-import { _ as _15 } from "./chunks/LpCodeBlock-ca7ANFyW.js";
+import { _ as _14 } from "./chunks/LpCheckbox-B_C8sOoT.js";
+import { _ as _15 } from "./chunks/LpCodeBlock-CXsqJwDy.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
-import { _ as _16 } from "./chunks/LpColorPicker-D1sQqtXS.js";
+import { _ as _16 } from "./chunks/LpColorPicker-DQ88niXq.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-CrbUZgJE.js";
-import { _ as _19 } from "./chunks/LpConfirmHost-BgMIV8r9.js";
+import { _ as _18 } from "./chunks/LpConfirmDialog-DxlSdjmk.js";
+import { _ as _19 } from "./chunks/LpConfirmHost-BcrmTNu_.js";
 import { confirm, useConfirm } from "./components/confirm.js";
-import { _ as _20 } from "./chunks/LpContextMenu-EF_90u3g.js";
-import { _ as _21 } from "./chunks/LpDatePicker-BrdFtSTy.js";
-import { _ as _22 } from "./chunks/LpDateRangePicker-CxV5jW7p.js";
-import { _ as _23 } from "./chunks/LpRangeCalendar-DZuaRV0W.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 { clampRange, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
-import { _ as _24 } from "./chunks/LpDisclosure-Cc23-JOT.js";
+import { _ as _24 } from "./chunks/LpDisclosure-Ct-VBHxt.js";
 import { _ as _25 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _26 } from "./chunks/LpDrawer-D9lLOC0C.js";
-import { _ as _27 } from "./chunks/LpDropdownMenu-DrpJJBp0.js";
+import { _ as _26 } from "./chunks/LpDrawer-DSknigxH.js";
+import { _ as _27 } from "./chunks/LpDropdownMenu-C7oHVlKY.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
-import { _ as _28 } from "./chunks/LpEmptyState-BJbZXC8D.js";
-import { _ as _29 } from "./chunks/LpFileTree-3E4w4Rjr.js";
+import { _ as _28 } from "./chunks/LpEmptyState-CBwwkkdA.js";
+import { _ as _29 } from "./chunks/LpFileTree-CMA0_rsB.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
-import { _ as _30 } from "./chunks/LpFieldNotice-wtieLUTj.js";
-import { _ as _31 } from "./chunks/LpFormField-CtVYj6tO.js";
-import { _ as _32 } from "./chunks/LpIcon-DYtaid0K.js";
-import { i, b, a, c } from "./chunks/icons-CkA0njzm.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 { default as default10 } from "./components/LpImageEditor.vue.js";
 import { _ as _33 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
-import { _ as _34 } from "./chunks/LpInput-D-YGQbEv.js";
-import { _ as _35 } from "./chunks/LpLightbox-EVXzAq62.js";
+import { _ as _34 } from "./chunks/LpInput-WvyP02ID.js";
+import { _ as _35 } from "./chunks/LpLightbox-Dq-e36uT.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _37 } from "./chunks/LpLogViewer-BfgtXVKm.js";
+import { _ as _37 } from "./chunks/LpLogViewer-DwiYE32z.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
-import { _ as _38 } from "./chunks/LpMediaGallery-BnlkN_1f.js";
-import { _ as _39 } from "./chunks/LpModal-JNa3B_Lr.js";
-import { _ as _40 } from "./chunks/LpModalNav-DXyAyhQl.js";
-import { _ as _41 } from "./chunks/LpNotificationBell-DEL-RoHS.js";
-import { _ as _42 } from "./chunks/LpNumberField-B77O-z28.js";
-import { _ as _43 } from "./chunks/LpTimeField-Cqe7fXnh.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 _44 } from "./chunks/LpNumberFlow-z4WPZcZu.js";
 import { _ as _45 } from "./chunks/LpOtpInput-PbeNJ5In.js";
-import { _ as _46 } from "./chunks/LpPagination-BcDlo3r_.js";
-import { _ as _47 } from "./chunks/LpPasswordInput-eKzQhbQP.js";
-import { _ as _48 } from "./chunks/LpPie-CXka8Jvx.js";
-import { _ as _49 } from "./chunks/LpPhoneInput-BCbrrhgE.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 { 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,39 +77,41 @@ 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-C09EEam2.js";
-import { _ as _57 } from "./chunks/LpSection-tKEH0jYf.js";
-import { _ as _58 } from "./chunks/LpSelect-DNIL6MB9.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 _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-hZ8D1cVr.js";
+import { _ as _61 } from "./chunks/LpSidebar-CshW0fqC.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-B-7udBRP.js";
-import { _ as _68 } from "./chunks/LpStepper-C7XiVKZj.js";
+import { _ as _67 } from "./chunks/LpStat-BS2TEXYK.js";
+import { _ as _68 } from "./chunks/LpStepper-BSglWF45.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-BMSBB78h.js";
-import { _ as _72 } from "./chunks/LpTagsInput-D1SuqbhB.js";
+import { _ as _71 } from "./chunks/LpTabs-BBGRHY38.js";
+import { _ as _72 } from "./chunks/LpTagsInput-CHbQoAAA.js";
 import { addTags, splitTags } from "./components/tags.js";
-import { _ as _73 } from "./chunks/LpTextarea-uuScWo6-.js";
-import { _ as _74 } from "./chunks/LpThemeSwitcher-Fz85BCRS.js";
+import { _ as _73 } from "./chunks/LpTextarea-Bz2IWhTH.js";
+import { _ as _74 } from "./chunks/LpThemeSwitcher-B_qhSl7q.js";
 import { _ as _75 } from "./chunks/LpTilt-B7KHX1zH.js";
-import { _ as _76 } from "./chunks/LpToaster-DTtWuKvq.js";
+import { _ as _76 } from "./chunks/LpToaster-Bo9Q4QBP.js";
 import { _ as _77 } from "./chunks/LpTooltip-suFCM34F.js";
-import { _ as _78 } from "./chunks/LpTour-C1TC2GyY.js";
+import { _ as _78 } from "./chunks/LpTour-D7m9ZxNk.js";
 import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
-import { _ as _79 } from "./chunks/LpHintLayer-CI1oZ9Pd.js";
-import { _ as _80 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _81 } from "./chunks/LpTopologyCanvas-6ozNrQKh.js";
-import { _ as _82 } from "./chunks/LpUptimeBar-B4ltCfno.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 _81 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
+import { _ as _82 } from "./chunks/LpTopologyCanvas-6ozNrQKh.js";
+import { _ as _83 } 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";
@@ -143,7 +145,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 _83 } from "./chunks/LpThemeProvider-CQ2jC9TA.js";
+import { _ as _84 } from "./chunks/LpThemeProvider-CQ2jC9TA.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
 function defineTheme(base, overrides = {}) {
   const src = typeof base === "string" ? presets[base] : base;
@@ -216,6 +218,7 @@ export {
   _29 as LpFileTree,
   _31 as LpFormField,
   _79 as LpHintLayer,
+  _80 as LpHints,
   _32 as LpIcon,
   default10 as LpImageEditor,
   _33 as LpInfraNode,
@@ -267,16 +270,16 @@ export {
   _71 as LpTabs,
   _72 as LpTagsInput,
   _73 as LpTextarea,
-  _83 as LpThemeProvider,
+  _84 as LpThemeProvider,
   _74 as LpThemeSwitcher,
   _75 as LpTilt,
   _43 as LpTimeField,
   _76 as LpToaster,
   _77 as LpTooltip,
-  _80 as LpTooltipProvider,
-  _81 as LpTopologyCanvas,
+  _81 as LpTooltipProvider,
+  _82 as LpTopologyCanvas,
   _78 as LpTour,
-  _82 as LpUptimeBar,
+  _83 as LpUptimeBar,
   _65 as LpVideoBackdrop,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
@@ -314,6 +317,7 @@ export {
   countBlocks,
   countLeaves,
   countLevels,
+  createHintSystem,
   createNominatimProvider,
   csvField,
   g as dark,
@@ -344,6 +348,8 @@ export {
   formatSize,
   formatTick,
   highlightParts,
+  hintKey,
+  hintSummary,
   hints,
   holeOf,
   hotkeyConflicts,
@@ -361,6 +367,7 @@ export {
   l as light,
   j as lime,
   loadCountries,
+  localHintStorage,
   lpConfig,
   makeLayout,
   markerIndex,
@@ -397,6 +404,7 @@ export {
   project,
   provideField,
   provideGlass,
+  provideHintSystem,
   provideLpConfig,
   pushRecent,
   rankCommandItems,
@@ -455,6 +463,7 @@ export {
   useFormDraft,
   useGamepadNav,
   useGlass,
+  useHintSystem,
   useHotkeys,
   useInputFilter,
   useInputMask,

package/package.json

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

package/src/component-names.ts

@@ -34,6 +34,7 @@ export const COMPONENT_NAMES = [
   "LpFileTree",
   "LpFormField",
   "LpHintLayer",
+  "LpHints",
   "LpIcon",
   "LpImageEditor",
   "LpInfraNode",