@leavepulse/ui 0.79.0 → 0.81.0

package/dist/assets/{LpCommandPalette-DDJKICKh.css → LpCommandPalette-DCZB4EAf.css}

@@ -5,34 +5,34 @@
  * pane from its right edge as it grows. Animating the columns themselves made
  * every line of the list and the pane re-wrap on every frame.
  */
-.lp-cmd-dialog[data-v-04518689] {
+.lp-cmd-dialog[data-v-b72dc3e1] {
   --lp-cmd-list: min(92vw, 40rem);
   --lp-cmd-pane: max(0px, min(26rem, 96vw - var(--lp-cmd-list)));
   width: var(--lp-cmd-list);
 }
-.lp-cmd-split[data-v-04518689] {
+.lp-cmd-split[data-v-b72dc3e1] {
   transition:
     width 300ms var(--ease-emphasized, ease),
     min-height 300ms var(--ease-emphasized, ease);
 }
 @media (min-width: 768px) {
-.lp-cmd-split .lp-cmd-list[data-v-04518689] {
+.lp-cmd-split .lp-cmd-list[data-v-b72dc3e1] {
     flex: 0 0 auto;
     /* the dialog's 1px border on each side */
     width: calc(var(--lp-cmd-list) - 2px);
 }
-.lp-cmd-dialog[data-pane="open"][data-v-04518689] {
+.lp-cmd-dialog[data-pane="open"][data-v-b72dc3e1] {
     width: calc(var(--lp-cmd-list) + var(--lp-cmd-pane));
     min-height: min(76vh, 36rem);
 }
 }
-.lp-cmd-pane[data-v-04518689] {
+.lp-cmd-pane[data-v-b72dc3e1] {
   width: var(--lp-cmd-pane);
 }
-.lp-cmd-dialog[data-editing] .lp-cmd-pane[data-v-04518689] {
+.lp-cmd-dialog[data-editing] .lp-cmd-pane[data-v-b72dc3e1] {
   width: 100%;
 }
-.lp-cmd-dialog[data-editing][data-v-04518689] {
+.lp-cmd-dialog[data-editing][data-v-b72dc3e1] {
   width: var(--lp-cmd-list);
   min-height: 0;
 }
@@ -40,43 +40,43 @@
  * The pane rides in from the right edge while the dialog opens up to it, and
  * leaves the same way, for as long as the dialog takes to close over it.
  */
-.lp-cmd-pane-enter-active[data-v-04518689],
-.lp-cmd-pane-leave-active[data-v-04518689] {
+.lp-cmd-pane-enter-active[data-v-b72dc3e1],
+.lp-cmd-pane-leave-active[data-v-b72dc3e1] {
   transition:
     transform 300ms var(--ease-emphasized, ease),
     opacity 300ms ease;
 }
-.lp-cmd-pane-enter-from[data-v-04518689],
-.lp-cmd-pane-leave-to[data-v-04518689] {
+.lp-cmd-pane-enter-from[data-v-b72dc3e1],
+.lp-cmd-pane-leave-to[data-v-b72dc3e1] {
   opacity: 0;
   transform: translateX(40%);
 }
-.lp-cmd-para[data-v-04518689] {
+.lp-cmd-para[data-v-b72dc3e1] {
   --rise: 4px;
   animation: rise-in 260ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-split[data-v-04518689],
-  .lp-cmd-pane-enter-active[data-v-04518689],
-  .lp-cmd-pane-leave-active[data-v-04518689] {
+.lp-cmd-split[data-v-b72dc3e1],
+  .lp-cmd-pane-enter-active[data-v-b72dc3e1],
+  .lp-cmd-pane-leave-active[data-v-b72dc3e1] {
     transition: none;
 }
-.lp-cmd-para[data-v-04518689] {
+.lp-cmd-para[data-v-b72dc3e1] {
     animation: none;
 }
 }
-.lp-cmd-excerpt[data-v-04518689] {
+.lp-cmd-excerpt[data-v-b72dc3e1] {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 /* Each result eases in; honours reduced motion. */
-.lp-cmd-item[data-v-04518689] {
+.lp-cmd-item[data-v-b72dc3e1] {
   --rise: 3px;
   animation: rise-in 140ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-cmd-item[data-v-04518689] {
+.lp-cmd-item[data-v-b72dc3e1] {
     animation: none;
 }
 }

package/dist/chunks/{LpAppShell-InIK01Nn.js → LpAppShell-BBINfN1v.js}

@@ -10,7 +10,7 @@ import { _ as _sfc_main$9 } from "./LpBottomNav-4I89sPDZ.js";
 import { _ as _sfc_main$2 } from "./LpContextSwitcher-CGr6ZAuq.js";
 import { _ as _sfc_main$3 } from "./LpButton-DSHioIfD.js";
 import { _ as _sfc_main$4 } from "./LpIcon-BCQLuHSP.js";
-import { _ as _sfc_main$8 } from "./LpPageScrollbar-D2O0xhJw.js";
+import { _ as _sfc_main$8 } from "./LpPageScrollbar-C9sTeU-2.js";
 import { _ as _sfc_main$7 } from "./LpScrollArea-CqvwfZs2.js";
 import { _ as _sfc_main$5 } from "./LpShift-DAgS_d2x.js";
 import { _ as _sfc_main$1 } from "./LpSidebar-D3S8rYFf.js";

package/dist/chunks/{LpPageScrollbar-D2O0xhJw.js → LpPageScrollbar-C9sTeU-2.js}

@@ -29,13 +29,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function scroller() {
       return doc?.scrollingElement ?? null;
     }
-    function nativeBarWidth(d) {
-      const probe = d.createElement("div");
-      probe.style.cssText = "position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll";
-      d.body.append(probe);
-      const width = probe.offsetWidth - probe.clientWidth;
-      probe.remove();
-      return width;
+    function finePointer(d) {
+      return nodeWindow(d).matchMedia?.("(pointer: fine)").matches ?? false;
     }
     function measure() {
       frame = 0;
@@ -107,7 +102,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       const host = barEl.value ?? void 0;
       doc = host?.ownerDocument;
-      if (!doc || nativeBarWidth(doc) === 0) return;
+      if (!doc || !finePointer(doc)) return;
       active.value = true;
       releaseNative = hideNativeBar(doc);
       const win = nodeWindow(doc);

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-InIK01Nn.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-BBINfN1v.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpCommandPalette.vue.d.ts

@@ -188,8 +188,27 @@ export interface CommandPrompt {
  * after the palette closed, is discarded and never reaches the list, so a
  * fetcher does not need to check the signal itself. Checking it before an
  * expensive step is only a saving.
+ *
+ * A fetcher that gathers from sources of different speeds (a local index, a
+ * database, a slow remote) can return an async iterable instead — an async
+ * generator is the easy way — and yield as it goes, so the quick sources show
+ * without waiting for the slow one. Each batch is the whole list so far and
+ * replaces the one before; the last is the answer. The search keeps its
+ * loading bar until the iterable ends, the highlight stays on the row it was
+ * on as rows are added, and when the query moves on the signal aborts and the
+ * iterable is closed (`return()`) — a generator parked in an `await` only
+ * closes at its next `yield`, running its `finally` there, so pass the signal
+ * on to what it awaits. A throw after some batches keeps them on screen, with
+ * a line saying the rest could not be fetched:
+ *
+ *   async function* search(q, signal) {
+ *     const local = index.find(q)
+ *     yield local
+ *     const remote = await api.search(q, { signal })
+ *     yield [...local, ...remote]
+ *   }
  */
-export type CommandFetcher = (query: string, signal: AbortSignal, parsed: PaletteQuery) => Command[] | Promise<Command[]>;
+export type CommandFetcher = (query: string, signal: AbortSignal, parsed: PaletteQuery) => Command[] | Promise<Command[]> | AsyncIterable<Command[]>;
 /** Footer hints and the mode chip, spelled out so an app can translate them. */
 export type PaletteLabels = Partial<Record<PaletteMode, string>> & {
     navigate: string;
@@ -209,6 +228,8 @@ export type PaletteLabels = Partial<Record<PaletteMode, string>> & {
     searching: string;
     /** Shown when `search` (or a fetching mode) threw. */
     searchFailed: string;
+    /** Shown under streamed results when the fetcher threw after some of them; defaults to "Some results could not be loaded." */
+    searchIncomplete?: string;
     retry: string;
     /** The row that unfolds a group cut by `groupLimit`; `{count}` is how many are hidden. */
     showMore: string;

package/dist/components/LpCommandPalette.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, h, shallowRef, ref, watch, useId, useSlots, onBeforeUnmount, nextTick, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, withModifiers, createTextVNode, toDisplayString, createElementVNode, createElementBlock, Fragment, renderList, createCommentVNode, withDirectives, withKeys, vModelText, resolveDynamicComponent, vShow, Transition, renderSlot } from "vue";
+import { defineComponent, computed, h, shallowRef, ref, watch, useId, useSlots, onBeforeUnmount, nextTick, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, withModifiers, createTextVNode, toDisplayString, createElementVNode, createCommentVNode, createElementBlock, Fragment, renderList, withDirectives, withKeys, vModelText, resolveDynamicComponent, vShow, Transition, renderSlot } from "vue";
 import { useModelOverlayHistory } from "../composables/useOverlayHistory.js";
 import { nodeWindow } from "../composables/realm.js";
 import { clamp } from "../composables/clamp.js";
@@ -23,10 +23,10 @@ import { runningHintSystem, HINT_SIGNALS } from "../composables/useHintSystem.js
 import { useModalLayer } from "./modalDepth.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { parsePaletteQuery, parseCommandQuery, searchCommandItems, applyQueryFilters, highlightParts } from "./commandSearch.js";
-import { PALETTE_MODES, modeChipLabel, fallbackRows, readRecent, resolveRecentItems, recentVisible, commandHasPreview, matchModePrefix, isSafeHref, absoluteHref, commandKey, recentKey, pushRecent, moreRowId, toRecentItem } from "./commandPalette.js";
+import { PALETTE_MODES, modeChipLabel, settleFetched, fallbackRows, readRecent, resolveRecentItems, recentVisible, commandHasPreview, matchModePrefix, isSafeHref, absoluteHref, commandKey, recentKey, pushRecent, moreRowId, toRecentItem } from "./commandPalette.js";
 import { useView, usePortalTarget, useOutsideGuard, viewWindow } from "../composables/useView.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpCommandPalette-DDJKICKh.css';const _hoisted_1 = { class: "flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
+import '../assets/LpCommandPalette-DCZB4EAf.css';const _hoisted_1 = { class: "relative flex shrink-0 items-center gap-2.5 border-b border-line px-4" };
 const _hoisted_2 = ["title", "onClick"];
 const _hoisted_3 = ["readonly", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder", "onKeydown"];
 const _hoisted_4 = { class: "shrink-0 rounded-small border border-line px-1.5 py-0.5 text-[10px] text-muted" };
@@ -190,6 +190,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       back: "back",
       searching: "Searching…",
       searchFailed: "Search is unavailable right now.",
+      searchIncomplete: "Some results could not be loaded.",
       retry: "Retry",
       showMore: "Show {count} more",
       actions: "actions",
@@ -342,24 +343,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       task.cancel();
     }
     const failed = ref(false);
+    const incomplete = ref(false);
     function refresh(keepRows = false) {
       cancel();
       if (!keepRows) found.value = [];
       failed.value = false;
+      incomplete.value = false;
       const run2 = fetcher();
       if (!run2) return;
       const parsed = parsePaletteQuery(query.value.trim());
       const q = parsed.text;
       const inMode = mode.value !== null;
       if (!inMode && q.length < Math.max(1, props.minChars)) return;
-      task.run((signal) => run2(q, signal, parsed), {
-        delay: props.debounce,
-        apply: (hits) => found.value = hits,
-        fail: () => {
-          found.value = [];
-          failed.value = true;
+      let streamed = false;
+      task.run(
+        (signal, emit2) => settleFetched(run2(q, signal, parsed), signal, (rows) => {
+          streamed = true;
+          emit2(rows);
+        }),
+        {
+          delay: props.debounce,
+          apply: (hits) => found.value = hits,
+          fail: () => {
+            if (!streamed) found.value = [];
+            incomplete.value = streamed;
+            failed.value = true;
+          }
         }
-      });
+      );
     }
     const source = computed(() => mode.value ? modeItems.value : rootCommands.value);
     const local = computed(() => {
@@ -851,6 +862,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         modeItems.value = [];
         found.value = [];
         failed.value = false;
+        incomplete.value = false;
         if (o) {
           await nextTick();
           if (props.open) inputRef.value?.focus();
@@ -917,7 +929,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     _: 1
                   }),
                   createElementVNode("div", _hoisted_1, [
-                    !unref(searching) && !executing.value && !unref(validating) ? (openBlock(), createBlock(_sfc_main$1, {
+                    !executing.value && !unref(validating) ? (openBlock(), createBlock(_sfc_main$1, {
                       key: 0,
                       name: "lucide:search",
                       size: 18,
@@ -926,9 +938,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       key: 1,
                       size: "inline",
                       delay: 0,
-                      labels: { loading: executing.value || unref(validating) ? unref(text).running : unref(text).searching },
+                      labels: { loading: unref(text).running },
                       class: "shrink-0 text-[18px] text-muted"
                     }, null, 8, ["labels"])),
+                    unref(searching) ? (openBlock(), createBlock(_sfc_main$2, {
+                      key: 2,
+                      variant: "bar",
+                      size: "sm",
+                      tone: "brand",
+                      labels: { loading: unref(text).searching },
+                      class: "pointer-events-none absolute inset-x-0 -bottom-px"
+                    }, null, 8, ["labels"])) : createCommentVNode("", true),
                     (openBlock(true), createElementBlock(Fragment, null, renderList(trail.value, (step, i) => {
                       return openBlock(), createElementBlock("button", {
                         key: step.id,
@@ -1071,6 +1091,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   type: linkOf(c) ? void 0 : "button",
                                   role: "option",
                                   tabindex: "-1",
+                                  "aria-label": c.description ? `${c.label} ${c.description}` : c.label,
                                   "aria-selected": flatIndexOf(c) === selectedIndex.value,
                                   "aria-disabled": c.disabled || void 0,
                                   "data-cmd-index": flatIndexOf(c),
@@ -1149,7 +1170,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     })) : createCommentVNode("", true)
                                   ]),
                                   _: 2
-                                }, 1064, ["id", "href", "type", "aria-selected", "aria-disabled", "data-cmd-index", "disabled", "class", "onClick", "onPointerenter"]);
+                                }, 1064, ["id", "href", "type", "aria-label", "aria-selected", "aria-disabled", "data-cmd-index", "disabled", "class", "onClick", "onPointerenter"]);
                               }), 128))
                             ], 8, _hoisted_12);
                           }), 128))
@@ -1164,7 +1185,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             size: 15,
                             class: "shrink-0"
                           }),
-                          createElementVNode("span", null, toDisplayString(unref(text).searchFailed), 1),
+                          createElementVNode("span", null, toDisplayString(incomplete.value ? unref(text).searchIncomplete : unref(text).searchFailed), 1),
                           createElementVNode("button", {
                             type: "button",
                             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",
@@ -1343,7 +1364,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-04518689"]]);
+const LpCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b72dc3e1"]]);
 export {
   LpCommandPalette as default
 };

package/dist/components/LpPageScrollbar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPageScrollbar-D2O0xhJw.js";
+import { _ as _sfc_main } from "../chunks/LpPageScrollbar-C9sTeU-2.js";
 export {
   _sfc_main as default
 };

package/dist/components/commandPalette.d.ts

@@ -202,3 +202,17 @@ export declare function modeChipLabel(command: {
     label: string;
     modeLabel?: string;
 }): string;
+/** What a fetcher may hand back: the rows, a promise of them, or batches of them. */
+export type FetchedRows<T> = T[] | Promise<T[]> | AsyncIterable<T[]>;
+/**
+ * Settles a fetcher's answer into its final rows. A plain list or a promise is
+ * passed through; batches are walked one by one, each handed to `onBatch` as
+ * it lands (each is the whole list so far, replacing the one before), and the
+ * last is the result — no batches at all is an empty list.
+ *
+ * An abort stops the walk at once rather than at the next batch: the iterator
+ * is closed (`return()`; a generator parked in an `await` closes at its next
+ * `yield`, running its `finally` there) and the wait for the pending batch is
+ * dropped. A batch that lands afterwards is not handed on.
+ */
+export declare function settleFetched<T>(result: FetchedRows<T>, signal: AbortSignal, onBatch: (rows: T[]) => void): Promise<T[]>;

package/dist/components/commandPalette.js

@@ -138,6 +138,47 @@ function modeChipLabel(command) {
   if (!command.label.includes("{query}")) return command.label;
   return command.label.replace(/\s*["'“”«»]?\{query\}["'“”«»]?/g, "").replace(/\s+(for|in|on|:)$/i, "").trim();
 }
+function isAsyncIterable(value) {
+  return value != null && typeof value[Symbol.asyncIterator] === "function";
+}
+async function settleFetched(result, signal, onBatch) {
+  if (!isAsyncIterable(result)) return result;
+  const iterator = result[Symbol.asyncIterator]();
+  let closed = false;
+  const close = () => {
+    if (closed) return;
+    closed = true;
+    void Promise.resolve(iterator.return?.()).catch(() => {
+    });
+  };
+  let stop;
+  const aborted = new Promise((resolve) => {
+    stop = () => resolve({ done: true, value: void 0 });
+    if (signal.aborted) stop();
+    else signal.addEventListener("abort", stop, { once: true });
+  });
+  let rows = [];
+  try {
+    for (; ; ) {
+      const step = await Promise.race([iterator.next(), aborted]);
+      if (signal.aborted) {
+        close();
+        return rows;
+      }
+      if (step.done) {
+        closed = true;
+        return rows;
+      }
+      rows = step.value;
+      onBatch(rows);
+    }
+  } catch (error) {
+    closed = true;
+    throw error;
+  } finally {
+    if (stop) signal.removeEventListener("abort", stop);
+  }
+}
 export {
   PALETTE_MODES,
   absoluteHref,
@@ -154,5 +195,6 @@ export {
   recentKey,
   recentVisible,
   resolveRecentItems,
+  settleFetched,
   toRecentItem
 };

package/dist/components/relativeTime.js

@@ -26,6 +26,11 @@ function formatterFor(locale, style) {
   }
   return f;
 }
+const SIGNED = /^[-+\u2212]/;
+function say(fmt, locale, style, value, unit) {
+  const text = fmt.format(value, unit);
+  return style === "narrow" && SIGNED.test(text) ? formatterFor(locale, "short").format(value, unit) : text;
+}
 const MAX_REFRESH = HOUR;
 const MIN_REFRESH = SECOND;
 function formatRelativeTime(date, now = Date.now(), options = {}) {
@@ -47,7 +52,7 @@ function formatRelativeTime(date, now = Date.now(), options = {}) {
   const boundary = diff < 0 ? (Math.floor(units + 0.5) + 0.5) * step.ms : (Math.ceil(units - 0.5) - 0.5) * step.ms;
   const unitChange = diff < 0 ? step.until - abs : index > 0 ? abs - SCALE[index - 1].until : Infinity;
   const refreshIn = Math.min(diff < 0 ? boundary - abs : abs - boundary, unitChange);
-  return { text: fmt.format(value, step.unit), unit: step.unit, value, refreshIn: clampRefresh(refreshIn) };
+  return { text: say(fmt, locale, style, value, step.unit), unit: step.unit, value, refreshIn: clampRefresh(refreshIn) };
 }
 function clampRefresh(ms) {
   return clamp(Math.ceil(ms), MIN_REFRESH, MAX_REFRESH);

package/dist/composables/overlayHistory.js

@@ -205,7 +205,7 @@ function install() {
   window.addEventListener("popstate", afterPop);
   const push = history.pushState.bind(history);
   const replace = history.replaceState.bind(history);
-  history.pushState = function(data, unused, url) {
+  const pushed = (data, unused, url) => {
     const before = location.href;
     push(data, unused, url);
     s.href = location.href;
@@ -214,12 +214,26 @@ function install() {
     if (pathOf(before) !== pathOf(location.href)) leavePage();
     mute();
   };
-  history.replaceState = function(data, unused, url) {
+  const replaced = (data, unused, url) => {
     const mark = s.internal ? null : current();
     const keep = mark && data && typeof data === "object" && !markOf(data) ? { ...data, [KEY]: mark } : data;
     replace(keep, unused, url);
     s.href = location.href;
   };
+  history.pushState = function(data, unused, url) {
+    if (!s.internal && s.silent > 0) s.waiting.push(() => pushed(unmarked(data), unused, url));
+    else pushed(data, unused, url);
+  };
+  history.replaceState = function(data, unused, url) {
+    if (!s.internal && s.silent > 0) s.waiting.push(() => replaced(unmarked(data), unused, url));
+    else replaced(data, unused, url);
+  };
+}
+function unmarked(data) {
+  if (!markOf(data)) return data;
+  const copy = { ...data };
+  delete copy[KEY];
+  return copy;
 }
 function pushEntry(entry) {
   if (typeof window === "undefined") return;

package/dist/composables/useAsyncTask.d.ts

@@ -12,10 +12,15 @@
  * and an error from a superseded run is dropped unseen. It is also one slot:
  * a new `run` replaces the last, and `pending` speaks for the latest only, so
  * independent requests each need their own `useAsyncTask`.
+ *
+ * A task that has something to show before it is done (the command palette's
+ * streamed results) calls `emit` with it: that reaches `apply` at once, for
+ * the latest run only, while `pending` stays true until the task settles. The
+ * value the task finally resolves to is applied as well, after the last emit.
  */
 export declare function useAsyncTask<T>(): {
     pending: import("vue").Ref<boolean, boolean>;
-    run: (task: (signal: AbortSignal) => T | Promise<T>, options: {
+    run: (task: (signal: AbortSignal, emit: (value: T) => void) => T | Promise<T>, options: {
         delay?: number;
         apply: (value: T) => void;
         fail?: (error: unknown) => void;

package/dist/composables/useAsyncTask.js

@@ -19,7 +19,10 @@ function useAsyncTask() {
     timer = setTimeout(async () => {
       controller = new AbortController();
       try {
-        const value = await task(controller.signal);
+        const emit = (value2) => {
+          if (mine === token) options.apply(value2);
+        };
+        const value = await task(controller.signal, emit);
         if (mine === token) options.apply(value);
       } catch (error) {
         if (mine === token) options.fail?.(error);

package/dist/index.js

@@ -4,7 +4,7 @@ import { _ as _3 } from "./chunks/LpMapPicker-DW2EnrCJ.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-C7g52Cyo.js";
 import { _ as _5 } from "./chunks/LpAlert-DWFeR82L.js";
-import { _ as _6 } from "./chunks/LpAppShell-InIK01Nn.js";
+import { _ as _6 } from "./chunks/LpAppShell-BBINfN1v.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DY3LvpB9.js";
 import { _ as _8 } from "./chunks/LpAvatar-CEZmMcGh.js";
 import { _ as _9 } from "./chunks/LpBadge-C_VqLHtg.js";
@@ -83,7 +83,7 @@ import { _ as _54 } from "./chunks/LpRadio-CWA5Eb3M.js";
 import { _ as _55 } from "./chunks/LpRadioGroup-E3SP6j9h.js";
 import { _ as _56 } from "./chunks/LpRollingText-B54Pje7P.js";
 import { _ as _57 } from "./chunks/LpScrollArea-CqvwfZs2.js";
-import { _ as _58 } from "./chunks/LpPageScrollbar-D2O0xhJw.js";
+import { _ as _58 } from "./chunks/LpPageScrollbar-C9sTeU-2.js";
 import { _ as _59 } from "./chunks/LpSegmented-DjvrHL_G.js";
 import { _ as _60 } from "./chunks/LpSection-CghNNxIv.js";
 import { _ as _61 } from "./chunks/LpSelect-DYPimzAZ.js";

package/package.json

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

package/src/components/LpCommandPalette.vue

@@ -87,6 +87,7 @@ import {
   toRecentItem,
   type RecentEntry,
   type RecentItem,
+  settleFetched,
 } from "./commandPalette"
 import { useOutsideGuard, usePortalTarget, useView, viewWindow } from "../composables/useView"
 
@@ -279,12 +280,31 @@ export interface CommandPrompt {
  * after the palette closed, is discarded and never reaches the list, so a
  * fetcher does not need to check the signal itself. Checking it before an
  * expensive step is only a saving.
+ *
+ * A fetcher that gathers from sources of different speeds (a local index, a
+ * database, a slow remote) can return an async iterable instead — an async
+ * generator is the easy way — and yield as it goes, so the quick sources show
+ * without waiting for the slow one. Each batch is the whole list so far and
+ * replaces the one before; the last is the answer. The search keeps its
+ * loading bar until the iterable ends, the highlight stays on the row it was
+ * on as rows are added, and when the query moves on the signal aborts and the
+ * iterable is closed (`return()`) — a generator parked in an `await` only
+ * closes at its next `yield`, running its `finally` there, so pass the signal
+ * on to what it awaits. A throw after some batches keeps them on screen, with
+ * a line saying the rest could not be fetched:
+ *
+ *   async function* search(q, signal) {
+ *     const local = index.find(q)
+ *     yield local
+ *     const remote = await api.search(q, { signal })
+ *     yield [...local, ...remote]
+ *   }
  */
 export type CommandFetcher = (
   query: string,
   signal: AbortSignal,
   parsed: PaletteQuery,
-) => Command[] | Promise<Command[]>
+) => Command[] | Promise<Command[]> | AsyncIterable<Command[]>
 
 /** Footer hints and the mode chip, spelled out so an app can translate them. */
 export type PaletteLabels = Partial<Record<PaletteMode, string>> & {
@@ -305,6 +325,8 @@ export type PaletteLabels = Partial<Record<PaletteMode, string>> & {
   searching: string
   /** Shown when `search` (or a fetching mode) threw. */
   searchFailed: string
+  /** Shown under streamed results when the fetcher threw after some of them; defaults to "Some results could not be loaded." */
+  searchIncomplete?: string
   retry: string
   /** The row that unfolds a group cut by `groupLimit`; `{count}` is how many are hidden. */
   showMore: string
@@ -508,6 +530,7 @@ const DEFAULT_LABELS: Required<PaletteLabels> = {
   back: "back",
   searching: "Searching…",
   searchFailed: "Search is unavailable right now.",
+  searchIncomplete: "Some results could not be loaded.",
   retry: "Retry",
   showMore: "Show {count} more",
   actions: "actions",
@@ -762,11 +785,14 @@ function cancel() {
  * drops a superseded request before `fail` runs.
  */
 const failed = ref(false)
+/** The failure came after some batches had shown: those stay, the line says the rest is missing. */
+const incomplete = ref(false)
 
 function refresh(keepRows = false) {
   cancel()
   if (!keepRows) found.value = []
   failed.value = false
+  incomplete.value = false
   const run = fetcher()
   if (!run) return
   const parsed = parsePaletteQuery(query.value.trim())
@@ -778,14 +804,25 @@ function refresh(keepRows = false) {
   if (!inMode && q.length < Math.max(1, props.minChars)) return
   // A failing provider: the static commands still stand, with a line saying
   // that the rest could not be fetched.
-  task.run((signal) => run(q, signal, parsed), {
-    delay: props.debounce,
-    apply: (hits) => (found.value = hits),
-    fail: () => {
-      found.value = []
-      failed.value = true
+  // Streamed batches go through `emit`, which drops them once this request
+  // is superseded; `streamed` tells a failure after them from one before.
+  let streamed = false
+  task.run(
+    (signal, emit) =>
+      settleFetched(run(q, signal, parsed), signal, (rows) => {
+        streamed = true
+        emit(rows)
+      }),
+    {
+      delay: props.debounce,
+      apply: (hits) => (found.value = hits),
+      fail: () => {
+        if (!streamed) found.value = []
+        incomplete.value = streamed
+        failed.value = true
+      },
     },
-  })
+  )
 }
 
 // ── filtering + scoring ──────────────────────────────────────
@@ -1483,6 +1520,7 @@ watch(
     modeItems.value = []
     found.value = []
     failed.value = false
+    incomplete.value = false
     if (o) {
       await nextTick()
       // Closed again meanwhile: the box belongs to a dialog on its way out.
@@ -1547,22 +1585,34 @@ const guardOutside = useOutsideGuard()
         <!-- Filter. The trail sits inside the box as chips, the way a scoped
              search reads everywhere else: what you type is filtered by what is
              to its left. -->
-        <div class="flex shrink-0 items-center gap-2.5 border-b border-line px-4">
+        <div class="relative flex shrink-0 items-center gap-2.5 border-b border-line px-4">
           <LpIcon
-            v-if="!searching && !executing && !validating"
+            v-if="!executing && !validating"
             name="lucide:search"
             :size="18"
             class="shrink-0 text-muted"
           />
-          <!-- At once, since it takes the search icon's place. It is the only
-               thing that tells a screen reader a search went out, so it speaks. -->
+          <!-- At once, since it takes the search icon's place. -->
           <LpLoader
             v-else
             size="inline"
             :delay="0"
-            :labels="{ loading: executing || validating ? text.running : text.searching }"
+            :labels="{ loading: text.running }"
             class="shrink-0 text-[18px] text-muted"
           />
+          <!-- A search under way runs a bar along the box's lower edge, over
+               the border, for as long as it lasts: results that stream in
+               batches are already on screen by then, and the bar is what says
+               more may come. It is also what tells a screen reader a search
+               went out, so it speaks. -->
+          <LpLoader
+            v-if="searching"
+            variant="bar"
+            size="sm"
+            tone="brand"
+            :labels="{ loading: text.searching }"
+            class="pointer-events-none absolute inset-x-0 -bottom-px"
+          />
 
           <button
             v-for="(step, i) in trail"
@@ -1646,6 +1696,7 @@ const guardOutside = useOutsideGuard()
                   :type="linkOf(c) ? undefined : 'button'"
                   role="option"
                   tabindex="-1"
+                  :aria-label="c.description ? `${c.label} ${c.description}` : c.label"
                   :aria-selected="flatIndexOf(c) === selectedIndex"
                   :aria-disabled="c.disabled || undefined"
                   :data-cmd-index="flatIndexOf(c)"
@@ -1663,6 +1714,10 @@ const guardOutside = useOutsideGuard()
                   @pointerenter="onPointerEnter(c)"
                   @pointerleave="onPointerLeave"
                 >
+                  <!-- Named from label and description, not from content: split
+                       into <mark> parts, a row's text was not always read as its
+                       name (BotEco's palette showed nameless options), and the
+                       shortcut or prefix kbd is not part of what the row is. -->
                   <!-- A picture takes the icon's slot at the icon's footprint, with
                        a negative margin so a 20px avatar does not make its row
                        taller than its neighbours. -->
@@ -1733,7 +1788,7 @@ const guardOutside = useOutsideGuard()
               :class="flat.length ? 'pb-1 pt-3' : 'py-10'"
             >
               <LpIcon name="lucide:circle-alert" :size="15" class="shrink-0" />
-              <span>{{ text.searchFailed }}</span>
+              <span>{{ incomplete ? text.searchIncomplete : text.searchFailed }}</span>
               <button
                 type="button"
                 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"

package/src/components/LpPageScrollbar.vue

@@ -13,8 +13,10 @@
  * (the bar is not printed, and at rest it is not drawn). What the kit adds is
  * the drawing, a thumb that drags, and a press beside it that pages.
  *
- * Where the browser's bars already float over the content (phones, macOS set
- * to show them while scrolling) it draws nothing and leaves the browser's.
+ * With a mouse or touchpad it draws the bar, also where the browser's bars
+ * float over the content (macOS, GTK on Linux, Windows 11's overlay setting).
+ * With a finger as the main pointer (phones, tablets) it draws nothing and
+ * leaves the browser's.
  *
  * `top` and `bottom` keep the bar clear of what covers the window's edges: a
  * sticky header, a bottom bar. Any CSS length, a variable included, and a
@@ -51,14 +53,14 @@ function scroller(): HTMLElement | null {
   return (doc?.scrollingElement as HTMLElement | null) ?? null
 }
 
-/* The width the browser's bar takes from the layout: 0 where it floats over the content. */
-function nativeBarWidth(d: Document): number {
-  const probe = d.createElement("div")
-  probe.style.cssText = "position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll"
-  d.body.append(probe)
-  const width = probe.offsetWidth - probe.clientWidth
-  probe.remove()
-  return width
+/*
+ * Decided by the input, not by the browser's bar: desktop bars float over the
+ * content too (GTK's overlay bars on Linux, Windows 11's setting), and there the
+ * kit's bar is wanted beside the rest of the kit. A finger has no use for a thumb
+ * to drag, so a touch screen keeps the browser's.
+ */
+function finePointer(d: Document): boolean {
+  return nodeWindow(d).matchMedia?.("(pointer: fine)").matches ?? false
 }
 
 function measure() {
@@ -138,7 +140,7 @@ function onThumbPointerDown(event: PointerEvent) {
 onMounted(() => {
   const host = barEl.value ?? undefined
   doc = host?.ownerDocument
-  if (!doc || nativeBarWidth(doc) === 0) return
+  if (!doc || !finePointer(doc)) return
   active.value = true
   releaseNative = hideNativeBar(doc)
   const win = nodeWindow(doc)

package/src/components/commandPalette.ts

@@ -344,3 +344,65 @@ export function modeChipLabel(command: { label: string; modeLabel?: string }): s
     .replace(/\s+(for|in|on|:)$/i, "")
     .trim()
 }
+
+/** What a fetcher may hand back: the rows, a promise of them, or batches of them. */
+export type FetchedRows<T> = T[] | Promise<T[]> | AsyncIterable<T[]>
+
+function isAsyncIterable<T>(value: unknown): value is AsyncIterable<T> {
+  return value != null && typeof (value as AsyncIterable<T>)[Symbol.asyncIterator] === "function"
+}
+
+/**
+ * Settles a fetcher's answer into its final rows. A plain list or a promise is
+ * passed through; batches are walked one by one, each handed to `onBatch` as
+ * it lands (each is the whole list so far, replacing the one before), and the
+ * last is the result — no batches at all is an empty list.
+ *
+ * An abort stops the walk at once rather than at the next batch: the iterator
+ * is closed (`return()`; a generator parked in an `await` closes at its next
+ * `yield`, running its `finally` there) and the wait for the pending batch is
+ * dropped. A batch that lands afterwards is not handed on.
+ */
+export async function settleFetched<T>(
+  result: FetchedRows<T>,
+  signal: AbortSignal,
+  onBatch: (rows: T[]) => void,
+): Promise<T[]> {
+  if (!isAsyncIterable<T[]>(result)) return result
+  const iterator = result[Symbol.asyncIterator]()
+  let closed = false
+  const close = () => {
+    if (closed) return
+    closed = true
+    // A generator still awaiting inside rejects its queued return with the
+    // error it later throws; that is not ours to report.
+    void Promise.resolve(iterator.return?.()).catch(() => {})
+  }
+  let stop: (() => void) | undefined
+  const aborted = new Promise<IteratorResult<T[]>>((resolve) => {
+    stop = () => resolve({ done: true, value: undefined })
+    if (signal.aborted) stop()
+    else signal.addEventListener("abort", stop, { once: true })
+  })
+  let rows: T[] = []
+  try {
+    for (;;) {
+      const step = await Promise.race([iterator.next(), aborted])
+      if (signal.aborted) {
+        close()
+        return rows
+      }
+      if (step.done) {
+        closed = true
+        return rows
+      }
+      rows = step.value
+      onBatch(rows)
+    }
+  } catch (error) {
+    closed = true
+    throw error
+  } finally {
+    if (stop) signal.removeEventListener("abort", stop)
+  }
+}

package/src/components/relativeTime.ts

@@ -68,6 +68,18 @@ function formatterFor(locale: string | undefined, style: Intl.RelativeTimeFormat
   return f
 }
 
+/*
+ * Some locales' narrow form drops the words for past and future and keeps a
+ * bare sign: ru narrow is "-4 мин" and "+3 ч", where short says "4 мин. назад"
+ * and "через 3 ч". A sign reads as arithmetic, not as "ago", so such a text
+ * is said in the short form instead.
+ */
+const SIGNED = /^[-+\u2212]/
+function say(fmt: Intl.RelativeTimeFormat, locale: string | undefined, style: Intl.RelativeTimeFormatStyle, value: number, unit: Intl.RelativeTimeFormatUnit): string {
+  const text = fmt.format(value, unit)
+  return style === "narrow" && SIGNED.test(text) ? formatterFor(locale, "short").format(value, unit) : text
+}
+
 /** Never sleep longer than this: a laptop waking from sleep should not show "2 h ago" for an hour. */
 const MAX_REFRESH = HOUR
 const MIN_REFRESH = SECOND
@@ -111,7 +123,7 @@ export function formatRelativeTime(
   const unitChange = diff < 0 ? step.until - abs : index > 0 ? abs - SCALE[index - 1].until : Infinity
   const refreshIn = Math.min(diff < 0 ? boundary - abs : abs - boundary, unitChange)
 
-  return { text: fmt.format(value, step.unit), unit: step.unit, value, refreshIn: clampRefresh(refreshIn) }
+  return { text: say(fmt, locale, style, value, step.unit), unit: step.unit, value, refreshIn: clampRefresh(refreshIn) }
 }
 
 function clampRefresh(ms: number): number {

package/src/composables/overlayHistory.ts

@@ -31,6 +31,10 @@
  *    entries keep working once Back returns past it.
  *  - Someone else's `replaceState` on a kit entry keeps the kit's key, so a
  *    router saving its scroll position does not orphan the entry.
+ *  - Someone else's `pushState` or `replaceState` while a step the kit started
+ *    is on its way (closing an overlay and following a link in it in one tick)
+ *    is held until the step lands, then applied there: the address changes a
+ *    traversal later than the router's own route does.
  *  - An app that keeps an overlay in its query through `replace` rewrites the
  *    address of the kit's entry when the overlay closes, and the entry under it
  *    still holds the old one. Taking the entry out lands there, so the address
@@ -362,7 +366,7 @@ function install() {
 
   const push = history.pushState.bind(history)
   const replace = history.replaceState.bind(history)
-  history.pushState = function (data: unknown, unused: string, url?: string | URL | null) {
+  const pushed = (data: unknown, unused: string, url?: string | URL | null) => {
     const before = location.href
     push(data, unused, url)
     s.href = location.href
@@ -371,12 +375,35 @@ function install() {
     if (pathOf(before) !== pathOf(location.href)) leavePage()
     mute()
   }
-  history.replaceState = function (data: unknown, unused: string, url?: string | URL | null) {
+  const replaced = (data: unknown, unused: string, url?: string | URL | null) => {
     const mark = s.internal ? null : current()
     const keep = mark && data && typeof data === "object" && !markOf(data) ? { ...(data as object), [KEY]: mark } : data
     replace(keep, unused, url)
     s.href = location.href
   }
+  history.pushState = function (data: unknown, unused: string, url?: string | URL | null) {
+    if (!s.internal && s.silent > 0) s.waiting.push(() => pushed(unmarked(data), unused, url))
+    else pushed(data, unused, url)
+  }
+  history.replaceState = function (data: unknown, unused: string, url?: string | URL | null) {
+    if (!s.internal && s.silent > 0) s.waiting.push(() => replaced(unmarked(data), unused, url))
+    else replaced(data, unused, url)
+  }
+}
+
+/*
+ * A change written while a step the kit started is on its way (an overlay
+ * closed and a link inside it navigated in the same tick) waits for the step to
+ * land. Applied at once, the step would then go back from the new entry, and
+ * the page would end on the old path. A router builds its state from the entry
+ * it sat on, the kit's, so the kit's key is taken off: the entry it lands on is
+ * not the kit's any more.
+ */
+function unmarked(data: unknown): unknown {
+  if (!markOf(data)) return data
+  const copy = { ...(data as Record<string, unknown>) }
+  delete copy[KEY]
+  return copy
 }
 
 /** Record an entry on top of the history, under the current address. */

package/src/composables/useAsyncTask.ts

@@ -14,6 +14,11 @@ import { getCurrentScope, onScopeDispose, ref } from "vue"
  * and an error from a superseded run is dropped unseen. It is also one slot:
  * a new `run` replaces the last, and `pending` speaks for the latest only, so
  * independent requests each need their own `useAsyncTask`.
+ *
+ * A task that has something to show before it is done (the command palette's
+ * streamed results) calls `emit` with it: that reaches `apply` at once, for
+ * the latest run only, while `pending` stays true until the task settles. The
+ * value the task finally resolves to is applied as well, after the last emit.
  */
 export function useAsyncTask<T>() {
   const pending = ref(false)
@@ -31,7 +36,7 @@ export function useAsyncTask<T>() {
   }
 
   function run(
-    task: (signal: AbortSignal) => T | Promise<T>,
+    task: (signal: AbortSignal, emit: (value: T) => void) => T | Promise<T>,
     options: { delay?: number; apply: (value: T) => void; fail?: (error: unknown) => void },
   ) {
     cancel()
@@ -40,7 +45,10 @@ export function useAsyncTask<T>() {
     timer = setTimeout(async () => {
       controller = new AbortController()
       try {
-        const value = await task(controller.signal)
+        const emit = (value: T) => {
+          if (mine === token) options.apply(value)
+        }
+        const value = await task(controller.signal, emit)
         if (mine === token) options.apply(value)
       } catch (error) {
         if (mine === token) options.fail?.(error)