@wssto2/vue-core 0.9.4 → 0.11.0

package/dist/shell/offlineNotice.d.ts

@@ -0,0 +1,3 @@
+import { type Feature } from "../app/feature";
+/** The offline notice as an opt-in feature: mounts in the shell's `host` slot (on every page, signed in or not). */
+export declare function offlineNotice(): Feature;

package/dist/shell/quickSearch.d.ts

@@ -0,0 +1,14 @@
+import { type Feature } from "../app/feature";
+import type { QuickSearchOptions } from "./quickSearchControl";
+/**
+ * The quick search (Ctrl or ⌘ + K): one field that finds records from anywhere, as an opt-in feature.
+ * It puts a search field in the shell's `search` slot (the sidebar, the phone drawer) and mounts the
+ * palette once in the `host` slot; the shortcut is listed in the shortcut help.
+ *
+ *   createApplication({ platform, features: [identity, quickSearch({ search: (query, signal) => api.search(query, signal) })], shell: backofficeShell() })
+ *
+ * The app maps its server's answer to groups of rows and decides where a row goes (`to`). Typing is
+ * debounced; an answer to an older query is dropped and the previous results stay until the new ones
+ * arrive, so the list does not flicker. ↑ ↓ move, ↵ opens, Ctrl or ⌘ + ↵ opens in a new tab, Esc closes.
+ */
+export declare function quickSearch(options: QuickSearchOptions): Feature;

package/dist/shell/quickSearchControl.d.ts

@@ -0,0 +1,69 @@
+import { type MaybeRefOrGetter, type Ref } from "vue";
+import type { RouteLocationRaw } from "vue-router";
+import type { IconName } from "../icon";
+import type { Tone } from "../state";
+/** One result the palette can open. */
+export interface QuickSearchRow {
+    /** Unique among the rows shown; a test hook too (`data-test="quick-search-row-<key>"`). */
+    readonly key: string;
+    readonly title: string;
+    /** A second line (an identifier, a status text). */
+    readonly meta?: string;
+    /** Draws `meta` in a monospace face: a VIN, a plate. */
+    readonly mono?: boolean;
+    readonly icon: IconName;
+    /** The icon tile: `neutral` (default), `accent` (the kind of record people look for most) or `action` (something to do, not a record). */
+    readonly tile?: "neutral" | "accent" | "action";
+    readonly badge?: {
+        readonly label: string;
+        readonly tone: Tone;
+    };
+    readonly to: RouteLocationRaw;
+}
+/** Rows under one heading. */
+export interface QuickSearchGroup {
+    readonly key: string;
+    /** The heading, in the app's language. */
+    readonly label: string;
+    readonly rows: readonly QuickSearchRow[];
+}
+/** What the server answered for one query. */
+export interface QuickSearchAnswer {
+    readonly groups: readonly QuickSearchGroup[];
+    /** Names of the groups that could not be searched this time (already translated): the palette says some results are missing. */
+    readonly unavailable?: readonly string[];
+}
+export interface QuickSearchOptions {
+    /** Looks `query` up (trimmed, at least `minLength` characters). Latest query wins: `signal` is aborted when a newer one starts or the palette closes. */
+    search: (query: string, signal: AbortSignal) => Promise<QuickSearchAnswer>;
+    /** Groups the app derives from the query alone, shown under the results at once (a VIN's "enter this vehicle"). They never count as results: with only these, "nothing found" still shows. */
+    suggest?: (query: string) => readonly QuickSearchGroup[];
+    /** The rows to show before anything is typed (recently opened ones). Read each time the palette opens. */
+    recent?: () => readonly QuickSearchRow[];
+    /** A row was chosen: remember it as recent. */
+    onChoose?: (row: QuickSearchRow) => void;
+    /**
+     * The field's placeholder ("Search a vehicle, VIN, customer…"). The three texts are read each time the palette renders, so an
+     * application whose messages load lazily passes a getter that follows the language: `placeholder: () => t("search.placeholder")`.
+     */
+    placeholder?: MaybeRefOrGetter<string>;
+    /** Shown before anything is typed and no recent rows exist: what can be searched. */
+    hint?: MaybeRefOrGetter<string>;
+    /** Shown under "Nothing for …": what the search covers. */
+    noneHint?: MaybeRefOrGetter<string>;
+    /** Characters before a search runs. Default 2. */
+    minLength?: number;
+    /** Milliseconds of quiet after typing before a search runs. Default 180. */
+    delayMs?: number;
+}
+export interface QuickSearchControl {
+    readonly isOpen: Readonly<Ref<boolean>>;
+    open(): void;
+    close(): void;
+}
+/**
+ * Opens and closes the quick-search palette: for a trigger of your own (a phone top-bar button). The
+ * state belongs to the document, like the dialog stack, so the button, the shortcut and the palette
+ * share it wherever they are mounted.
+ */
+export declare function useQuickSearch(): QuickSearchControl;

package/dist/shortcut-DUR6yPWA.js

@@ -0,0 +1,93 @@
+import { ref as c, watch as p, toValue as u, onScopeDispose as d, getCurrentInstance as w, watchEffect as K, computed as g, triggerRef as f, shallowRef as E } from "vue";
+import { p as v } from "./perDocument-DUuFrdGU.js";
+import { t as k } from "./dialogStack-B5G6xHq0.js";
+const h = 300, C = 600;
+function N(e, t = {}) {
+  const s = c(!1), o = c(0), a = c(!1);
+  let r = [], n = null;
+  function i() {
+    r.forEach((l) => clearTimeout(l)), r = [], n && clearInterval(n), n = null;
+  }
+  function y() {
+    i(), s.value = !1, o.value = 0, a.value = !1, r.push(setTimeout(() => s.value = !0, h)), t.slowAfterMs && r.push(setTimeout(() => a.value = !0, t.slowAfterMs)), n = setInterval(() => o.value += 1, 1e3);
+  }
+  return p(
+    () => u(e),
+    (l) => {
+      l ? y() : (i(), s.value = !1, a.value = !1);
+    },
+    { immediate: !0 }
+  ), d(i), { visible: s, elapsed: o, slow: a };
+}
+const S = /^[^\p{L}\p{N}\s]$/u;
+function b(e, t) {
+  const s = t.shiftKey === void 0 && S.test(t.key) || e.shiftKey === (t.shiftKey ?? !1), o = t.mod ? e.ctrlKey !== e.metaKey : e.ctrlKey === (t.ctrlKey ?? !1) && e.metaKey === (t.metaKey ?? !1);
+  return e.key.toLowerCase() === t.key.toLowerCase() && s && o && e.altKey === (t.altKey ?? !1);
+}
+function A(e) {
+  return e instanceof HTMLElement && (e.isContentEditable || /^(input|textarea|select)$/i.test(e.tagName));
+}
+function B(e, t) {
+  const s = w();
+  K((o) => {
+    const a = u(e);
+    if (!a) return;
+    if (a.label !== void 0) {
+      const n = L(a);
+      o(n.remove);
+    }
+    const r = (n) => {
+      n.repeat || !b(n, a) || !(a.mod || a.ctrlKey || a.altKey || a.metaKey) && A(n.target) || M(s) && t(n) !== !1 && n.preventDefault();
+    };
+    window.addEventListener("keydown", r), o(() => window.removeEventListener("keydown", r));
+  });
+}
+function M(e) {
+  const t = k();
+  if (t === void 0) return !0;
+  const s = e?.subTree.el;
+  return !!t && !!s && t.contains(s);
+}
+const T = Symbol("vue-core:shortcuts"), m = () => v(T, () => ({ items: [], changed: E(0) }));
+function L(e) {
+  const t = m();
+  return t.items = [...t.items, e], f(t.changed), {
+    remove() {
+      t.items = t.items.filter((s) => s !== e), f(t.changed);
+    }
+  };
+}
+function D(e) {
+  const t = typeof navigator < "u" && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent), s = t ? { ctrl: "⌃", alt: "⌥", shift: "⇧", meta: "⌘" } : { ctrl: "Ctrl", alt: "Alt", shift: "Shift", meta: "Meta" }, o = e.mod ? !t : e.ctrlKey, a = e.mod ? t : e.metaKey, r = R[e.key] ?? (e.key.length === 1 ? e.key.toUpperCase() : e.key);
+  return [
+    ...o ? [s.ctrl] : [],
+    ...e.altKey ? [s.alt] : [],
+    ...e.shiftKey ? [s.shift] : [],
+    ...a ? [s.meta] : [],
+    r
+  ];
+}
+const R = { ArrowLeft: "←", ArrowRight: "→", ArrowUp: "↑", ArrowDown: "↓", Escape: "Esc", " ": "Space" };
+function P() {
+  const e = m();
+  return g(() => {
+    e.changed.value;
+    const t = /* @__PURE__ */ new Map();
+    for (const s of e.items) {
+      const o = typeof s.label == "function" ? s.label() : s.label ?? "";
+      if (o === "") continue;
+      const a = s.group ?? null, r = t.get(`${a}\0${o}`) ?? { group: a, label: o, keys: [] }, n = D(s);
+      r.keys.some((i) => i.join("+") === n.join("+")) || r.keys.push(n), t.set(`${a}\0${o}`, r);
+    }
+    return [...t.values()];
+  });
+}
+export {
+  C as D,
+  h as W,
+  P as a,
+  N as b,
+  b as m,
+  D as s,
+  B as u
+};

package/dist/state/BackgroundTaskCapsule.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The capsule that follows work the user left (UI decision D23, MOTION_PLAN M2): pinned above the
+ * bottom edge (in the bottom dock), it shows a running task (spinner, what it is, what it is
+ * doing, the seconds) and, when it ends, turns into "… is ready · Open" (or the failure, with the
+ * same way back). It goes away on Open, on the close button, or by itself `hideAfterMs` after the
+ * end. A page that shows the task in place hides it (`useBackgroundTasks().watchTask`). Render it
+ * once in the shell, where `installBackgroundTasks(app)` has been called.
+ *
+ *   <BackgroundTaskCapsule />
+ */
+type __VLS_Props = {
+    /** How long an ended task stays, so it can be read and acted on. */
+    hideAfterMs?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    hideAfterMs: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/state/backgroundTasks.d.ts

@@ -0,0 +1,58 @@
+import { type App, type ComputedRef, type Ref } from "vue";
+import type { RouteLocationRaw } from "vue-router";
+/**
+ * Work that outlives the page it started on (UI decision D23, MOTION_PLAN M2): a slow request the
+ * user may walk away from. The request is owned here, not by the page, so leaving the page neither
+ * loses its answer nor hides that it is running: the page that shows the task in place `watchTask`s
+ * it, and while nobody does, the `BackgroundTaskCapsule` follows it and, when it ends, says so with
+ * a way back (`route`).
+ *
+ *   installBackgroundTasks(app);                                   // once, in the composition root
+ *   const tasks = useBackgroundTasks();                           // in setup
+ *   const quote = await tasks.run(
+ *     { id: `quote:${id}`, title: "Quote · Golf", detail: "Calculating…", doneTitle: "The quote is ready", failedTitle: "The quote failed", route: { name: "quote", params: { id } } },
+ *     () => api.quote(id),
+ *     (result) => `${result.total} €`,
+ *   );
+ */
+export type BackgroundTaskStatus = "running" | "done" | "failed";
+export type BackgroundTask = {
+    /** Stable per subject, e.g. "quote:42": one task per subject at a time (a second `run` replaces the first). */
+    id: string;
+    /** What it is, e.g. "Quote · VW Golf". */
+    title: string;
+    /** What it is doing, while running. */
+    detail: string;
+    /** Where the result is. */
+    route: RouteLocationRaw;
+    /** The capsule's words when it ends. */
+    doneTitle: string;
+    failedTitle: string;
+    /** `Date.now()` when it started. */
+    startedAt: number;
+    status: BackgroundTaskStatus;
+    /** A line about the outcome ("12,400 €", or the error's message). */
+    outcome?: string;
+};
+export type BackgroundTaskSpec = Omit<BackgroundTask, "startedAt" | "status" | "outcome">;
+export type BackgroundTasks = {
+    readonly tasks: Readonly<Ref<readonly BackgroundTask[]>>;
+    find(id: string): BackgroundTask | undefined;
+    isRunning(id: string): boolean;
+    /**
+     * Runs `work` as the task `spec.id` and resolves with its result (rejects with its error).
+     * `outcome` turns the result into the capsule's line.
+     */
+    run<T>(spec: BackgroundTaskSpec, work: () => Promise<T>, outcome?: (result: T) => string | undefined): Promise<T>;
+    /** A page shows this task in place: no capsule for it while the page is there. Returns the stop function. */
+    watchTask(id: string): () => void;
+    /** Takes the task off: a finished one stays until someone has (the page that shows it, or the capsule). */
+    dismiss(id: string): void;
+    /** The task the capsule follows: the latest one no page shows. */
+    readonly unwatched: ComputedRef<BackgroundTask | null>;
+};
+/** A set of background tasks of one application. Use `installBackgroundTasks` in an application; this is for tests and for a subtree. */
+export declare function createBackgroundTasks(): BackgroundTasks;
+export declare const backgroundTasksKey: import("vue").InjectionKey<BackgroundTasks>, useBackgroundTasks: () => BackgroundTasks;
+/** Installs the background tasks of an application (a new set unless one is given) and returns them, for code outside components. */
+export declare function installBackgroundTasks(app: App, tasks?: BackgroundTasks): BackgroundTasks;

package/dist/state/index.d.ts

@@ -12,3 +12,7 @@ export { default as StatusLine } from "./StatusLine.vue";
 export type { Tone } from "./tone";
 export { useLoad, type Load, type LoadContext, type LoadOptions } from "./useLoad";
 export { DONE_BEAT_MS, WAIT_VISIBLE_AFTER_MS, useWaitStatus } from "./useWaitStatus";
+export { default as BackgroundTaskCapsule } from "./BackgroundTaskCapsule.vue";
+export { backgroundTasksKey, createBackgroundTasks, installBackgroundTasks, useBackgroundTasks } from "./backgroundTasks";
+export type { BackgroundTask, BackgroundTasks, BackgroundTaskSpec, BackgroundTaskStatus } from "./backgroundTasks";
+export { useCountUp } from "./useCountUp";

package/dist/state/index.js

@@ -1,104 +1,218 @@
-import { _ as D, a as I, b as W, i as F, v as O } from "../AsyncSection.vue_vue_type_script_setup_true_lang-BdeOKqz_.js";
-import { _ as H } from "../Badge.vue_vue_type_script_setup_true_lang-DJyZc0C7.js";
-import { _ as R } from "../Banner.vue_vue_type_script_setup_true_lang-sv0phngk.js";
-import { _ } from "../ProgressTrack.vue_vue_type_script_setup_true_lang-B6Prw9hi.js";
-import { a as j } from "../ProgressTrack.vue_vue_type_script_setup_true_lang-B6Prw9hi.js";
-import { _ as G } from "../EmptyState.vue_vue_type_script_setup_true_lang-DbZiO2RF.js";
-import { defineComponent as m, computed as k, openBlock as e, createElementBlock as a, normalizeClass as p, createVNode as d, unref as i, createElementVNode as u, renderSlot as f, createBlock as S, toDisplayString as l, createCommentVNode as c } from "vue";
-import { _ as x } from "../Icon.vue_vue_type_script_lang-BhhsFYwp.js";
-import { useI18n as g } from "vue-i18n";
-import { u as K } from "../useLoad-M7V-AVwR.js";
-import { D as X, W as Y, u as Z } from "../useWaitStatus-fsacMl4W.js";
-const $ = ["amber", "lime", "teal", "cyan", "blue", "indigo", "violet", "fuchsia", "pink"], V = /* @__PURE__ */ m({
+import { _ as de, a as me, b as fe, i as pe, v as ve } from "../AsyncSection.vue_vue_type_script_setup_true_lang-DGzQ-Snp.js";
+import { _ as xe } from "../Badge.vue_vue_type_script_setup_true_lang-DJyZc0C7.js";
+import { _ as _e } from "../Banner.vue_vue_type_script_setup_true_lang-sv0phngk.js";
+import { _ as A } from "../DrawnCheck.vue_vue_type_script_setup_true_lang-9DzDJlIA.js";
+import { _ as ye } from "../EmptyState.vue_vue_type_script_setup_true_lang-DbZiO2RF.js";
+import { defineComponent as S, computed as w, openBlock as d, createElementBlock as f, normalizeClass as M, createVNode as h, unref as t, createElementVNode as p, renderSlot as C, ref as g, watch as B, onBeforeUnmount as E, createBlock as y, withCtx as b, Transition as F, toDisplayString as x, Fragment as z, createCommentVNode as D, toValue as T, onScopeDispose as $ } from "vue";
+import { _ } from "../Icon.vue_vue_type_script_lang-BhhsFYwp.js";
+import { _ as be } from "../ProgressTrack.vue_vue_type_script_setup_true_lang-DrOm8k--.js";
+import { _ as Se } from "../StatusLine.vue_vue_type_script_setup_true_lang-DsdQmLq6.js";
+import { u as Ae } from "../useLoad-M7V-AVwR.js";
+import { D as Ce, W as Ee, b as Fe } from "../shortcut-DUR6yPWA.js";
+import { useI18n as L } from "vue-i18n";
+import { useRouter as N } from "vue-router";
+import { _ as I } from "../BottomDockPortal.vue_vue_type_script_setup_true_lang-DmwR-2SP.js";
+import { d as V } from "../context-Ch1r4fdN.js";
+const se = ["amber", "lime", "teal", "cyan", "blue", "indigo", "violet", "fuchsia", "pink"], oe = /* @__PURE__ */ S({
   __name: "FieldNote",
   props: {
     tone: { default: "info" },
     icon: { default: void 0 }
   },
-  setup(s) {
-    const t = s, o = {
+  setup(a) {
+    const s = a, r = {
       info: { text: "text-content-muted", icon: "informationLine" },
       warning: { text: "text-status-warning-content", icon: "alertTriangle" },
       critical: { text: "text-status-danger-content", icon: "errorWarningLine" }
-    }, n = k(() => o[t.tone]);
-    return (r, B) => (e(), a("p", {
-      class: p(["mt-1 flex items-start gap-1.5 text-xs", n.value.text])
+    }, i = w(() => r[s.tone]);
+    return (u, e) => (d(), f("p", {
+      class: M(["mt-1 flex items-start gap-1.5 text-xs", i.value.text])
     }, [
-      d(i(x), {
-        name: t.icon ?? n.value.icon,
+      h(t(_), {
+        name: s.icon ?? i.value.icon,
         size: 14,
         class: "mt-px"
       }, null, 8, ["name"]),
-      u("span", null, [
-        f(r.$slots, "default")
+      p("span", null, [
+        C(u.$slots, "default")
       ])
     ], 2));
   }
-}), h = ["data-done"], y = {
-  class: "flex min-w-0 items-center gap-2.5 text-subheadline",
+});
+function W() {
+  const a = g([]), s = g({}), r = (n) => a.value.find((c) => c.id === n);
+  function i(n, c) {
+    a.value = a.value.map((l) => l.id === n ? { ...l, ...c } : l);
+  }
+  async function u(n, c, l) {
+    a.value = [...a.value.filter((o) => o.id !== n.id), { ...n, startedAt: Date.now(), status: "running" }];
+    try {
+      const o = await c();
+      return i(n.id, { status: "done", outcome: l?.(o) }), o;
+    } catch (o) {
+      throw i(n.id, { status: "failed", outcome: o instanceof Error ? o.message : void 0 }), o;
+    }
+  }
+  function e(n) {
+    return s.value = { ...s.value, [n]: (s.value[n] ?? 0) + 1 }, () => {
+      s.value = { ...s.value, [n]: Math.max(0, (s.value[n] ?? 1) - 1) };
+    };
+  }
+  return {
+    tasks: a,
+    find: r,
+    isRunning: (n) => r(n)?.status === "running",
+    run: u,
+    watchTask: e,
+    dismiss: (n) => {
+      a.value = a.value.filter((c) => c.id !== n);
+    },
+    unwatched: w(() => [...a.value].reverse().find((n) => !(s.value[n.id] ?? 0)) ?? null)
+  };
+}
+const [R, j] = V("vue-core.backgroundTasks");
+function re(a, s = W()) {
+  return a.provide(R, s), s;
+}
+const q = ["data-status"], O = {
+  class: "flex min-h-13 w-full max-w-md items-center gap-3 rounded-full bg-surface-inverse py-1.5 pr-1.5 pl-4 text-content-inverse shadow-float",
   role: "status",
   "aria-live": "polite"
-}, v = {
-  key: 0,
-  class: "text-content-link"
-}, E = {
-  key: 2,
-  class: "ml-auto shrink-0 pl-2 text-footnote tabular-nums text-content-muted",
-  "data-status-elapsed": ""
-}, w = {
-  key: 0,
-  class: "pl-6.5 text-footnote"
-}, z = /* @__PURE__ */ m({
-  __name: "StatusLine",
+}, U = {
+  key: 1,
+  class: "flex size-6 shrink-0 animate-pop items-center justify-center rounded-full bg-control-on text-white"
+}, H = { class: "flex min-w-0 flex-1 flex-col" }, K = {
+  class: "truncate text-subheadline font-semibold",
+  "data-test": "background-task-title"
+}, P = {
+  key: 3,
+  class: "shrink-0 pr-3 text-footnote tabular-nums opacity-80"
+}, G = ["aria-label"], ie = /* @__PURE__ */ S({
+  __name: "BackgroundTaskCapsule",
   props: {
-    text: {},
-    done: { type: Boolean },
-    elapsed: {}
+    hideAfterMs: { default: 12e3 }
   },
-  setup(s) {
-    const t = s, { t: o } = g();
-    return (n, r) => (e(), a("div", {
-      class: "flex min-w-0 flex-col gap-1",
-      "data-done": t.done || void 0
-    }, [
-      u("div", y, [
-        t.done ? (e(), a("span", v, [
-          d(_, { size: 16 })
-        ])) : (e(), S(i(x), {
-          key: 1,
-          name: "loader4Line",
-          size: 16,
-          class: "animate-spin text-content-link"
-        })),
-        (e(), a("span", {
-          key: t.text,
-          class: p(["min-w-0 animate-text-swap", t.done ? "font-semibold text-content-link" : "text-shimmer"]),
-          "data-status-text": ""
-        }, l(t.text), 3)),
-        t.elapsed != null ? (e(), a("span", E, l(i(o)("core.wait.seconds", { count: t.elapsed })), 1)) : c("", !0)
+  setup(a) {
+    const s = a, { t: r } = L(), i = N(), u = j(), e = u.unwatched, n = g(Date.now()), c = setInterval(() => n.value = Date.now(), 1e3), l = w(() => e.value ? Math.max(0, Math.floor((n.value - e.value.startedAt) / 1e3)) : 0);
+    let o = null;
+    B(() => [e.value?.id, e.value?.status], ([m, v]) => {
+      o && clearTimeout(o), o = null, m && v && v !== "running" && (o = setTimeout(() => u.dismiss(m), s.hideAfterMs));
+    }), E(() => {
+      clearInterval(c), o && clearTimeout(o);
+    });
+    function k() {
+      const m = e.value;
+      m && (u.dismiss(m.id), i.push(m.route));
+    }
+    return (m, v) => (d(), y(t(I), null, {
+      default: b(() => [
+        h(F, {
+          "enter-active-class": "transition duration-motion-sheet ease-motion-sheet",
+          "enter-from-class": "translate-y-6 scale-95 opacity-0",
+          "leave-active-class": "transition duration-motion-normal ease-motion-standard",
+          "leave-to-class": "translate-y-4 opacity-0"
+        }, {
+          default: b(() => [
+            t(e) ? (d(), f("div", {
+              key: 0,
+              class: "dock-safe-area pointer-events-auto order-first mb-3 flex justify-center px-3",
+              "data-test": "background-task",
+              "data-status": t(e).status
+            }, [
+              p("div", O, [
+                t(e).status === "running" ? (d(), y(t(_), {
+                  key: 0,
+                  name: "loader4Line",
+                  size: 18,
+                  class: "shrink-0 animate-spin text-content-inverse-accent"
+                })) : t(e).status === "done" ? (d(), f("span", U, [
+                  h(A, { size: 13 })
+                ])) : (d(), y(t(_), {
+                  key: 2,
+                  name: "errorWarningLine",
+                  size: 18,
+                  class: "shrink-0 text-content-inverse-danger"
+                })),
+                p("span", H, [
+                  p("span", K, x(t(e).status === "running" ? t(e).title : t(e).status === "done" ? t(e).doneTitle : t(e).failedTitle), 1),
+                  (d(), f("span", {
+                    key: `${t(e).status}:${t(e).outcome ?? t(e).detail}`,
+                    class: "truncate text-footnote opacity-80 animate-text-swap"
+                  }, x(t(e).status === "running" ? t(e).detail : t(e).outcome ?? t(e).title), 1))
+                ]),
+                t(e).status === "running" ? (d(), f("span", P, x(t(r)("core.wait.seconds", { count: l.value })), 1)) : (d(), f(z, { key: 4 }, [
+                  p("button", {
+                    type: "button",
+                    class: "hit-target shrink-0 cursor-pointer rounded-full bg-content-inverse-accent px-4 py-2 text-subheadline font-semibold text-surface-inverse",
+                    "data-test": "background-task-open",
+                    onClick: k
+                  }, x(t(r)("core.actions.open")), 1),
+                  p("button", {
+                    type: "button",
+                    class: "hit-target flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-content-inverse opacity-70",
+                    "aria-label": t(r)("core.actions.close"),
+                    "data-test": "background-task-dismiss",
+                    onClick: v[0] || (v[0] = (Q) => t(u).dismiss(t(e).id))
+                  }, [
+                    h(t(_), {
+                      name: "close",
+                      size: 14
+                    })
+                  ], 8, G)
+                ], 64))
+              ])
+            ], 8, q)) : D("", !0)
+          ]),
+          _: 1
+        })
       ]),
-      n.$slots.default ? (e(), a("div", w, [
-        f(n.$slots, "default")
-      ])) : c("", !0)
-    ], 8, h));
+      _: 1
+    }));
   }
 });
+function J() {
+  return typeof window < "u" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function ue(a, s = 700) {
+  const r = g(T(a));
+  let i = 0;
+  function u() {
+    i && cancelAnimationFrame(i), i = 0;
+  }
+  return B(() => T(a), (e, n) => {
+    if (u(), n !== 0 || e === 0 || J() || typeof requestAnimationFrame > "u") {
+      r.value = e;
+      return;
+    }
+    const c = performance.now(), l = (o) => {
+      const k = Math.min(1, (o - c) / s);
+      r.value = Math.round(e * (1 - Math.pow(1 - k, 3))), i = k < 1 ? requestAnimationFrame(l) : 0;
+    };
+    r.value = 0, i = requestAnimationFrame(l);
+  }), $(u), r;
+}
 export {
-  D as AsyncSection,
-  H as Badge,
-  R as Banner,
-  X as DONE_BEAT_MS,
-  _ as DrawnCheck,
-  G as EmptyState,
-  V as FieldNote,
-  $ as HUES,
-  j as ProgressTrack,
-  I as Skeleton,
-  z as StatusLine,
-  Y as WAIT_VISIBLE_AFTER_MS,
-  W as asyncState,
-  F as isEmptyValue,
-  K as useLoad,
-  Z as useWaitStatus,
-  O as valueOf
+  de as AsyncSection,
+  ie as BackgroundTaskCapsule,
+  xe as Badge,
+  _e as Banner,
+  Ce as DONE_BEAT_MS,
+  A as DrawnCheck,
+  ye as EmptyState,
+  oe as FieldNote,
+  se as HUES,
+  be as ProgressTrack,
+  me as Skeleton,
+  Se as StatusLine,
+  Ee as WAIT_VISIBLE_AFTER_MS,
+  fe as asyncState,
+  R as backgroundTasksKey,
+  W as createBackgroundTasks,
+  re as installBackgroundTasks,
+  pe as isEmptyValue,
+  j as useBackgroundTasks,
+  ue as useCountUp,
+  Ae as useLoad,
+  Fe as useWaitStatus,
+  ve as valueOf
 };

package/dist/state/useCountUp.d.ts

@@ -0,0 +1,9 @@
+import { type MaybeRefOrGetter } from "vue";
+/**
+ * A number that counts up to its value when the value arrives (UI decision D23: a result
+ * revealed, such as a price that was being calculated). Only a change from nothing (0) counts; a
+ * later change, and any change under reduced motion, shows at once.
+ *
+ *   const shown = useCountUp(() => quote.value?.total ?? 0);   // <span>{{ format.money(shown) }}</span>
+ */
+export declare function useCountUp(target: MaybeRefOrGetter<number>, durationMs?: number): import("vue").Ref<number, number>;