@leavepulse/ui 0.79.0 → 0.80.1

package/dist/assets/{LpCommandPalette-DDJKICKh.css → LpCommandPalette-C1LRFzbN.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-63099a19] {
   --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-63099a19] {
   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-63099a19] {
     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-63099a19] {
     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-63099a19] {
   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-63099a19] {
   width: 100%;
 }
-.lp-cmd-dialog[data-editing][data-v-04518689] {
+.lp-cmd-dialog[data-editing][data-v-63099a19] {
   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-63099a19],
+.lp-cmd-pane-leave-active[data-v-63099a19] {
   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-63099a19],
+.lp-cmd-pane-leave-to[data-v-63099a19] {
   opacity: 0;
   transform: translateX(40%);
 }
-.lp-cmd-para[data-v-04518689] {
+.lp-cmd-para[data-v-63099a19] {
   --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-63099a19],
+  .lp-cmd-pane-enter-active[data-v-63099a19],
+  .lp-cmd-pane-leave-active[data-v-63099a19] {
     transition: none;
 }
-.lp-cmd-para[data-v-04518689] {
+.lp-cmd-para[data-v-63099a19] {
     animation: none;
 }
 }
-.lp-cmd-excerpt[data-v-04518689] {
+.lp-cmd-excerpt[data-v-63099a19] {
   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-63099a19] {
   --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-63099a19] {
     animation: none;
 }
 }

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-C1LRFzbN.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,
@@ -1164,7 +1184,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 +1363,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-63099a19"]]);
 export {
   LpCommandPalette 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.79.0",
+  "version": "0.80.1",
   "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"
@@ -1733,7 +1783,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/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/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)