@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/flag/flag.js

@@ -28,6 +28,22 @@ export async function loadFlagUrl(importFlags = () => import('@aceshooting/lyra-
         return null;
     }
 }
+/**
+ * Resolves an ISO 3166-1 alpha-2 region code to a human-readable, localized
+ * display name (e.g. `'FR'` -> `'France'`) via `Intl.DisplayNames`, for use as
+ * the default accessible name (`alt`) instead of a bare code read
+ * letter-by-letter by most screen readers. Falls back to the uppercase code
+ * itself if `Intl.DisplayNames` throws (unrecognized region) or isn't
+ * available in the current runtime.
+ */
+function displayNameFor(code) {
+    try {
+        return new Intl.DisplayNames([navigator.language], { type: 'region' }).of(code.toUpperCase()) ?? code.toUpperCase();
+    }
+    catch {
+        return code.toUpperCase();
+    }
+}
 let flagUrlResolver;
 /**
  * Lazily loads the optional peer dependency '@aceshooting/lyra-flags' once per
@@ -40,6 +56,17 @@ function loadFlagUrlResolver() {
     }
     return flagUrlResolver;
 }
+/**
+ * @internal Test-only seam: overrides (or, with `undefined`, clears) the module-level cache that
+ * `willUpdate()` reads through `loadFlagUrlResolver()`. The real `@aceshooting/lyra-flags` peer's
+ * `flagUrl(code)` never actually rejects (unknown codes just resolve `undefined`), so this is the
+ * only way to exercise a resolver-function rejection — e.g. a network failure fetching a flag
+ * asset — without uninstalling the real package. Not part of the public API; not re-exported from
+ * the root barrel.
+ */
+export function __setFlagUrlResolverForTesting(value) {
+    flagUrlResolver = value;
+}
 /**
  * `<lyra-flag>` — a country/language flag.
  *
@@ -59,10 +86,19 @@ function loadFlagUrlResolver() {
  * `src` instead to skip the peer-package round trip (and its loading-skeleton
  * flash) entirely.
  *
+ * The ~65 flags whose design includes a detailed coat of arms/seal/emblem (e.g. `es`, `pt`) ship
+ * three fidelity tiers; choose one with `variant`: `"compact"` (a tiny WebP raster for icon-scale
+ * use — menu items, language selectors, dense lists), the default `"standard"` (icon-optimized
+ * vector for card/row sizes), or `"detailed"` (the pristine full-detail vector for hero-scale
+ * display). A no-op for every other code — all tiers resolve to the same file. See `variant`'s own
+ * doc.
+ *
  * @customElement lyra-flag
  * @example <lyra-flag country="fr"></lyra-flag>
  * @example <lyra-flag language="en" label="English"></lyra-flag>
  * @example <lyra-flag src=${frUrl} label="French"></lyra-flag>
+ * @example <lyra-flag country="es" variant="compact"></lyra-flag>
+ * @example <lyra-flag country="es" variant="detailed"></lyra-flag>
  * @csspart image - The underlying <img>.
  */
 export class LyraFlag extends LyraElement {
@@ -70,6 +106,11 @@ export class LyraFlag extends LyraElement {
         super(...arguments);
         /** Render as a circular flag. */
         this.round = false;
+        /**
+         * @deprecated Use `variant="detailed"` instead. Kept as an alias for one minor cycle; when
+         * `variant` is unset, `detailed` still maps to the detailed tier. Removed in the next major.
+         */
+        this.detailed = false;
         /** True while the lazy-loaded `@aceshooting/lyra-flags` peer resolver is in flight. */
         this.loading = true;
         /**
@@ -81,6 +122,11 @@ export class LyraFlag extends LyraElement {
         this.resolveToken = 0;
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    /** The effective tier to request: an explicit `variant` wins; otherwise the deprecated
+     *  `detailed` boolean is honored; otherwise `"standard"`. */
+    get effectiveVariant() {
+        return this.variant ?? (this.detailed ? 'detailed' : 'standard');
+    }
     get code() {
         if (this.country) {
             return ALPHA2_RE.test(this.country) ? this.country.toLowerCase() : undefined;
@@ -96,8 +142,14 @@ export class LyraFlag extends LyraElement {
         // undefined -> undefined (no-op to Lit), so none of `changed.has(...)`
         // would otherwise ever become true for a `<lyra-flag>` that never
         // receives one, leaving `loading` stuck at its initial `true` forever.
-        if (this.hasUpdated && !changed.has('country') && !changed.has('language') && !changed.has('src'))
+        if (this.hasUpdated &&
+            !changed.has('country') &&
+            !changed.has('language') &&
+            !changed.has('src') &&
+            !changed.has('variant') &&
+            !changed.has('detailed')) {
             return;
+        }
         const token = ++this.resolveToken; // invalidates any in-flight peer resolution either way
         if (this.src) {
             this.resolvedSrc = undefined;
@@ -111,13 +163,21 @@ export class LyraFlag extends LyraElement {
             return;
         }
         this.loading = true;
+        const variant = this.effectiveVariant;
         void loadFlagUrlResolver()
-            .then((resolve) => resolve?.(code))
+            .then((resolve) => resolve?.(code, variant === 'standard' ? undefined : { variant }))
             .then((url) => {
             if (token !== this.resolveToken)
                 return; // superseded by a later country/language/src change
             this.resolvedSrc = url;
             this.loading = false;
+        })
+            .catch((err) => {
+            if (token !== this.resolveToken)
+                return; // superseded by a later country/language/src change
+            console.warn(`<lyra-flag> failed to resolve a flag URL for "${code}":`, err);
+            this.resolvedSrc = undefined;
+            this.loading = false;
         });
     }
     updated() {
@@ -132,7 +192,8 @@ export class LyraFlag extends LyraElement {
         const url = this.src ?? this.resolvedSrc;
         if (!url)
             return html ``;
-        const alt = this.label ?? (this.code ?? '').toUpperCase();
+        const code = this.code;
+        const alt = this.label ?? (code ? displayNameFor(code) : '');
         return html `<img part="image" src=${url} alt=${alt} loading="lazy" decoding="async" />`;
     }
 }
@@ -151,6 +212,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraFlag.prototype, "round", void 0);
+__decorate([
+    property()
+], LyraFlag.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraFlag.prototype, "detailed", void 0);
 __decorate([
     state()
 ], LyraFlag.prototype, "resolvedSrc", void 0);

package/dist/components/gauge/gauge.js

@@ -57,28 +57,37 @@ export class LyraGauge extends LyraElement {
     }
     static { this.styles = [LyraElement.styles, styles]; }
     get ratio() {
-        if (isNaN(this.value) || isNaN(this.min) || isNaN(this.max))
+        if (!Number.isFinite(this.value) || !Number.isFinite(this.min) || !Number.isFinite(this.max))
             return 0;
-        const span = this.max - this.min || 1;
-        return Math.min(1, Math.max(0, (this.value - this.min) / span));
+        const lo = Math.min(this.min, this.max);
+        const hi = Math.max(this.min, this.max);
+        const span = hi - lo || 1;
+        return Math.min(1, Math.max(0, (this.value - lo) / span));
     }
     willUpdate() {
         this.setAttribute('role', 'meter');
-        if (!isNaN(this.value) && !isNaN(this.min) && !isNaN(this.max)) {
-            const clamped = Math.min(this.max, Math.max(this.min, this.value));
+        const finiteTrio = Number.isFinite(this.value) && Number.isFinite(this.min) && Number.isFinite(this.max);
+        // Normalize a reversed min > max domain the same way `ratio` does, so the
+        // announced aria-value* trio always agrees with the visual fill instead
+        // of aria-valuenow pinning to one bound regardless of `value` (and
+        // aria-valuemin/valuemax reporting an inverted, invalid ARIA range).
+        const lo = Number.isFinite(this.min) && Number.isFinite(this.max) ? Math.min(this.min, this.max) : this.min;
+        const hi = Number.isFinite(this.min) && Number.isFinite(this.max) ? Math.max(this.min, this.max) : this.max;
+        if (finiteTrio) {
+            const clamped = Math.min(hi, Math.max(lo, this.value));
             this.setAttribute('aria-valuenow', String(clamped));
         }
         else {
             this.removeAttribute('aria-valuenow');
         }
-        if (isNaN(this.min))
+        if (Number.isFinite(lo))
+            this.setAttribute('aria-valuemin', String(lo));
+        else
             this.removeAttribute('aria-valuemin');
+        if (Number.isFinite(hi))
+            this.setAttribute('aria-valuemax', String(hi));
         else
-            this.setAttribute('aria-valuemin', String(this.min));
-        if (isNaN(this.max))
             this.removeAttribute('aria-valuemax');
-        else
-            this.setAttribute('aria-valuemax', String(this.max));
         if (this.label)
             this.setAttribute('aria-label', this.label);
         else

package/dist/components/generation-status/generation-status.d.ts

@@ -0,0 +1,109 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-generation-status>` — a compact, ticking status readout shown
+ * alongside an in-progress AI response: elapsed time, token count, and
+ * token-throughput, plus a built-in Stop button. Renders as e.g.
+ * `12.3s · 340 tokens · 27 tok/s [Stop]`.
+ *
+ * This is deliberately a *different* concern than the already-landed
+ * `<lyra-stream-status>`: that component is about transport/connection
+ * health (idle/connecting/streaming/stalled, heartbeat-aware stall
+ * detection), while this one is a user-facing metrics readout for a
+ * generation that both components' hosts typically already know is
+ * healthily in progress. Neither imports or depends on the other, and a
+ * consumer building a full generation UI is expected to compose both side by
+ * side rather than pick one.
+ *
+ * `active` drives an internal ~1s `setInterval` ticker that recomputes the
+ * elapsed-time display (a plain interval is sufficient here -- unlike
+ * `<lyra-stream-status>`'s stall timer, this never needs to be armed with a
+ * precise deadline, only to refresh a display roughly once a second). The
+ * elapsed clock's start instant is `started-at` when set (an epoch-ms
+ * timestamp -- lets a host that already knows exactly when generation began,
+ * e.g. from its own request-dispatch timestamp, feed that in directly and
+ * survive this component being created slightly later than that instant);
+ * when `started-at` is unset, this component falls back to capturing
+ * `Date.now()` itself at the moment `active` flips from `false`/unset to
+ * `true`, so the ticker still starts from a sensible instant with zero
+ * required host bookkeeping. The ticker is cleared whenever `active` becomes
+ * `false` and on disconnect; the display is left at whatever it last showed
+ * (frozen, not reset to zero) -- a static "Generated in 12.3s" reads better
+ * as a completed-state summary than the readout blanking out the instant
+ * generation ends.
+ *
+ * `tokens-per-second`, when the host supplies it directly (e.g. from its own
+ * smoothed/windowed rate calculation), is always used as-is. When omitted,
+ * this component derives a live figure itself from `token-count` divided by
+ * elapsed seconds -- but only once at least one full second of elapsed time
+ * has accumulated, since dividing by a sub-second elapsed window can produce
+ * wildly-swinging, misleading early readings (e.g. 3 tokens in 40ms reading
+ * as "75 tok/s"). A host that wants a stable figure from the very first tick
+ * should supply `tokens-per-second` itself. The tokens segment and the
+ * throughput segment are independently optional: either, both, or neither
+ * may render depending on what's available, per each property's own doc.
+ *
+ * Accessibility: this readout ticks roughly once per second while active,
+ * which is exactly the kind of high-frequency update
+ * `<lyra-live-region>`/`Announcer` (`../../internal/announcer.js`) exists to
+ * *prevent* from being read aloud verbatim -- routing a per-second numeric
+ * tick through even a throttled announcer would still narrate a new number
+ * to a screen-reader user roughly once every throttle window for as long as
+ * generation runs, which is noise, not information. This component
+ * therefore carries no `role="status"`/`aria-live` of its own and never
+ * announces anything; a host that wants generation-start/-end announced
+ * should pair this with something that announces state *transitions* (e.g.
+ * `<lyra-typing-indicator>`'s mount-time announcement), not this ticking
+ * readout. The one genuinely actionable, infrequent control here -- the Stop
+ * button -- gets a normal, always-present `aria-label`, no different from
+ * any other icon-only button in this library.
+ *
+ * @customElement lyra-generation-status
+ * @event lyra-stop - The built-in Stop button was clicked. No detail payload.
+ * @csspart base - The root inline layout container.
+ * @csspart elapsed - The elapsed-time segment, e.g. `"12.3s"`. Always rendered (reads `"0.0s"` before the component has ever been active).
+ * @csspart tokens - The token-count segment, e.g. `"340 tokens"`. Only rendered when `token-count` is set.
+ * @csspart throughput - The throughput segment, e.g. `"27 tok/s"`. Only rendered when a value is available (host-supplied or derived; see the class doc).
+ * @csspart stop-button - The built-in Stop button. Only rendered while `show-stop` is true.
+ */
+export declare class LyraGenerationStatus extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether generation is currently in progress. The elapsed-time ticker
+     *  runs only while this is `true` (see the class doc). */
+    active: boolean;
+    /** Epoch-ms timestamp of when generation began. Optional -- when unset
+     *  while `active` is `true`, this component captures the current time
+     *  itself the moment `active` becomes `true` and counts from there instead
+     *  (see the class doc). */
+    startedAt?: number;
+    /** Running token count so far. Omitted from the readout entirely (no
+     *  `tokens` segment) while unset. */
+    tokenCount?: number;
+    /** Host-computed tokens/sec figure, used as-is when set. When unset, this
+     *  component derives a live figure from `token-count` and elapsed time
+     *  itself once one is available -- see the class doc for the exact rule
+     *  and why. */
+    tokensPerSecond?: number;
+    /** Whether the built-in Stop button renders at all. */
+    showStop: boolean;
+    private elapsedMs;
+    private tickTimer?;
+    private fallbackStartMs?;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private startTicker;
+    private stopTicker;
+    private computeElapsedMs;
+    /** `tokens-per-second` when set; otherwise a derived figure once enough
+     *  elapsed time has accumulated for it to be meaningful; otherwise
+     *  `undefined` (the throughput segment doesn't render at all). */
+    private get effectiveTokensPerSecond();
+    private onStopClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-generation-status': LyraGenerationStatus;
+    }
+}

package/dist/components/generation-status/generation-status.js

@@ -0,0 +1,273 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, svg } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './generation-status.styles.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding a
+// stop glyph to that module -- it's off limits here -- so this one-off icon
+// still reads as part of the same visual language as the rest of the
+// library's inline icons. Identical shape to `<lyra-chat-composer>`'s own
+// local `stopIcon()` (the conventional filled-square "stop generating"
+// glyph), duplicated rather than imported since these are two independently
+// consumable components with no dependency between them.
+function stopIcon() {
+    return svg `
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="none"
+      aria-hidden="true"
+      focusable="false"
+    ><rect x="6" y="6" width="12" height="12" rx="1.5"></rect></svg>
+  `;
+}
+/** `4200` -> `"4.2s"`; `65000` -> `"1m 5s"`. Sub-minute durations get one
+ *  decimal place of seconds (the common case: most single generations finish
+ *  in single-digit seconds, where whole-second precision would look static
+ *  between ticks); once a full minute is reached, `"Xm Ys"` reads better than
+ *  a fractional-minute or a 3-4 digit seconds count. The `59.95` cutoff (not
+ *  a plain `60`) exists so a value that *rounds* to `"60.0s"` at one-decimal
+ *  precision is displayed as `"1m 0s"` instead -- without it, the two
+ *  branches could each independently round the same instant to a different
+ *  minute. */
+function formatElapsed(ms) {
+    const totalSeconds = Math.max(0, ms) / 1000;
+    if (totalSeconds < 59.95) {
+        return `${(Math.round(totalSeconds * 10) / 10).toFixed(1)}s`;
+    }
+    const wholeSeconds = Math.round(totalSeconds);
+    const minutes = Math.floor(wholeSeconds / 60);
+    const seconds = wholeSeconds % 60;
+    return `${minutes}m ${seconds}s`;
+}
+/** `340` -> `"340 tokens"`; `1` -> `"1 token"`. Same plain singular/plural
+ *  ternary `<lyra-json-viewer>`'s array/object summary already uses -- this
+ *  library has no general i18n/pluralization system (see
+ *  `<lyra-source-list>`'s class doc for that stance), but a two-way English
+ *  ternary for one fixed noun is a different, much smaller thing than a
+ *  general pluralization engine, and reads better than an unconditional
+ *  "1 tokens". */
+function formatTokenCount(count) {
+    const rounded = Math.max(0, Math.round(count));
+    return `${rounded} ${rounded === 1 ? 'token' : 'tokens'}`;
+}
+/** `27.4` -> `"27 tok/s"`; `3.2` -> `"3.2 tok/s"`. Same shape as this file's
+ *  `formatElapsed`/`<lyra-tool-call-chip>`'s `formatDuration`: the low end of
+ *  the range (where a whole-number rounding would flatten every early
+ *  reading to the same "0" or "1") gets one decimal place, while anything at
+ *  or above 10 tok/s rounds to a whole number, which is plenty precise for a
+ *  live-updating throughput figure. */
+function formatThroughput(value) {
+    const clamped = Math.max(0, value);
+    const rounded = clamped < 10 ? Math.round(clamped * 10) / 10 : Math.round(clamped);
+    return `${rounded} tok/s`;
+}
+/**
+ * `<lyra-generation-status>` — a compact, ticking status readout shown
+ * alongside an in-progress AI response: elapsed time, token count, and
+ * token-throughput, plus a built-in Stop button. Renders as e.g.
+ * `12.3s · 340 tokens · 27 tok/s [Stop]`.
+ *
+ * This is deliberately a *different* concern than the already-landed
+ * `<lyra-stream-status>`: that component is about transport/connection
+ * health (idle/connecting/streaming/stalled, heartbeat-aware stall
+ * detection), while this one is a user-facing metrics readout for a
+ * generation that both components' hosts typically already know is
+ * healthily in progress. Neither imports or depends on the other, and a
+ * consumer building a full generation UI is expected to compose both side by
+ * side rather than pick one.
+ *
+ * `active` drives an internal ~1s `setInterval` ticker that recomputes the
+ * elapsed-time display (a plain interval is sufficient here -- unlike
+ * `<lyra-stream-status>`'s stall timer, this never needs to be armed with a
+ * precise deadline, only to refresh a display roughly once a second). The
+ * elapsed clock's start instant is `started-at` when set (an epoch-ms
+ * timestamp -- lets a host that already knows exactly when generation began,
+ * e.g. from its own request-dispatch timestamp, feed that in directly and
+ * survive this component being created slightly later than that instant);
+ * when `started-at` is unset, this component falls back to capturing
+ * `Date.now()` itself at the moment `active` flips from `false`/unset to
+ * `true`, so the ticker still starts from a sensible instant with zero
+ * required host bookkeeping. The ticker is cleared whenever `active` becomes
+ * `false` and on disconnect; the display is left at whatever it last showed
+ * (frozen, not reset to zero) -- a static "Generated in 12.3s" reads better
+ * as a completed-state summary than the readout blanking out the instant
+ * generation ends.
+ *
+ * `tokens-per-second`, when the host supplies it directly (e.g. from its own
+ * smoothed/windowed rate calculation), is always used as-is. When omitted,
+ * this component derives a live figure itself from `token-count` divided by
+ * elapsed seconds -- but only once at least one full second of elapsed time
+ * has accumulated, since dividing by a sub-second elapsed window can produce
+ * wildly-swinging, misleading early readings (e.g. 3 tokens in 40ms reading
+ * as "75 tok/s"). A host that wants a stable figure from the very first tick
+ * should supply `tokens-per-second` itself. The tokens segment and the
+ * throughput segment are independently optional: either, both, or neither
+ * may render depending on what's available, per each property's own doc.
+ *
+ * Accessibility: this readout ticks roughly once per second while active,
+ * which is exactly the kind of high-frequency update
+ * `<lyra-live-region>`/`Announcer` (`../../internal/announcer.js`) exists to
+ * *prevent* from being read aloud verbatim -- routing a per-second numeric
+ * tick through even a throttled announcer would still narrate a new number
+ * to a screen-reader user roughly once every throttle window for as long as
+ * generation runs, which is noise, not information. This component
+ * therefore carries no `role="status"`/`aria-live` of its own and never
+ * announces anything; a host that wants generation-start/-end announced
+ * should pair this with something that announces state *transitions* (e.g.
+ * `<lyra-typing-indicator>`'s mount-time announcement), not this ticking
+ * readout. The one genuinely actionable, infrequent control here -- the Stop
+ * button -- gets a normal, always-present `aria-label`, no different from
+ * any other icon-only button in this library.
+ *
+ * @customElement lyra-generation-status
+ * @event lyra-stop - The built-in Stop button was clicked. No detail payload.
+ * @csspart base - The root inline layout container.
+ * @csspart elapsed - The elapsed-time segment, e.g. `"12.3s"`. Always rendered (reads `"0.0s"` before the component has ever been active).
+ * @csspart tokens - The token-count segment, e.g. `"340 tokens"`. Only rendered when `token-count` is set.
+ * @csspart throughput - The throughput segment, e.g. `"27 tok/s"`. Only rendered when a value is available (host-supplied or derived; see the class doc).
+ * @csspart stop-button - The built-in Stop button. Only rendered while `show-stop` is true.
+ */
+export class LyraGenerationStatus extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Whether generation is currently in progress. The elapsed-time ticker
+         *  runs only while this is `true` (see the class doc). */
+        this.active = false;
+        /** Whether the built-in Stop button renders at all. */
+        this.showStop = true;
+        // Recomputed on activation and on every ~1s tick; frozen (not reset) once
+        // `active` goes false -- see the class doc's "ticker" paragraph.
+        this.elapsedMs = 0;
+        this.onStopClick = () => {
+            this.emit('lyra-stop');
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopTicker();
+    }
+    // Recomputing `elapsedMs` here (rather than in `updated()`) matters: Lit
+    // runs `willUpdate()` *before* render, as part of the same update pass, so
+    // a property set here is picked up by this same render with no extra
+    // cycle. Setting a reactive property from inside `updated()` instead would
+    // schedule a *second* update after the first has already completed (Lit
+    // warns about exactly this in dev mode) -- meaning a caller doing
+    // `el.active = true; await el.updateComplete;` would still observe the
+    // stale pre-activation `elapsedMs` once that first promise resolves.
+    //
+    // `changed.has('active')` fires on the very first update too when the
+    // element mounts already `active` (the parsed-attribute/property value
+    // differs from the `false` field-initializer default that was seen first)
+    // -- same mechanism `<lyra-stream-status>`'s `onPhaseChanged` relies on to
+    // arm its stall timer on a `phase="streaming"` mount, so mounting this
+    // component already active correctly seeds `elapsedMs` with no separate
+    // first-update special case needed.
+    willUpdate(changed) {
+        if (changed.has('active') && this.active) {
+            if (this.startedAt == null)
+                this.fallbackStartMs = Date.now();
+            this.elapsedMs = this.computeElapsedMs();
+        }
+        else if (this.active && changed.has('startedAt')) {
+            // A `started-at` that arrives (or changes) mid-generation should
+            // immediately re-baseline the displayed elapsed time rather than wait
+            // up to ~1s for the next tick.
+            this.elapsedMs = this.computeElapsedMs();
+        }
+    }
+    // Starting/stopping the interval is a genuine side effect (not a reactive-
+    // property write), so it belongs in `updated()`, unlike the `elapsedMs`
+    // computation above.
+    updated(changed) {
+        if (changed.has('active')) {
+            if (this.active)
+                this.startTicker();
+            else
+                this.stopTicker();
+        }
+    }
+    startTicker() {
+        this.stopTicker();
+        // Setting `elapsedMs` here (unlike inside `updated()`, see that method's
+        // doc) is fine: an interval callback is a wholly separate future task,
+        // not a continuation of an in-progress Lit update, so this starts a
+        // normal, self-contained update cycle rather than a same-tick "second
+        // update" scheduled mid-render.
+        this.tickTimer = setInterval(() => {
+            this.elapsedMs = this.computeElapsedMs();
+        }, 1000);
+    }
+    stopTicker() {
+        if (this.tickTimer !== undefined) {
+            clearInterval(this.tickTimer);
+            this.tickTimer = undefined;
+        }
+    }
+    computeElapsedMs() {
+        const start = this.startedAt ?? this.fallbackStartMs;
+        return start == null ? 0 : Math.max(0, Date.now() - start);
+    }
+    /** `tokens-per-second` when set; otherwise a derived figure once enough
+     *  elapsed time has accumulated for it to be meaningful; otherwise
+     *  `undefined` (the throughput segment doesn't render at all). */
+    get effectiveTokensPerSecond() {
+        if (this.tokensPerSecond != null && Number.isFinite(this.tokensPerSecond)) {
+            return this.tokensPerSecond;
+        }
+        if (this.tokenCount != null && Number.isFinite(this.tokenCount)) {
+            const elapsedSeconds = this.elapsedMs / 1000;
+            if (elapsedSeconds >= 1)
+                return this.tokenCount / elapsedSeconds;
+        }
+        return undefined;
+    }
+    render() {
+        const hasTokens = this.tokenCount != null && Number.isFinite(this.tokenCount);
+        const throughput = this.effectiveTokensPerSecond;
+        const hasThroughput = throughput !== undefined;
+        return html `
+      <div part="base">
+        <span part="elapsed">${formatElapsed(this.elapsedMs)}</span>
+        ${hasTokens ? html `<span part="tokens">${formatTokenCount(this.tokenCount)}</span>` : nothing}
+        ${hasThroughput ? html `<span part="throughput">${formatThroughput(throughput)}</span>` : nothing}
+        ${this.showStop
+            ? html `
+              <button part="stop-button" type="button" aria-label="Stop generating" @click=${this.onStopClick}>
+                ${stopIcon()}
+              </button>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraGenerationStatus.prototype, "active", void 0);
+__decorate([
+    property({ type: Number, attribute: 'started-at' })
+], LyraGenerationStatus.prototype, "startedAt", void 0);
+__decorate([
+    property({ type: Number, attribute: 'token-count' })
+], LyraGenerationStatus.prototype, "tokenCount", void 0);
+__decorate([
+    property({ type: Number, attribute: 'tokens-per-second' })
+], LyraGenerationStatus.prototype, "tokensPerSecond", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-stop' })
+], LyraGenerationStatus.prototype, "showStop", void 0);
+__decorate([
+    state()
+], LyraGenerationStatus.prototype, "elapsedMs", void 0);
+defineElement('generation-status', LyraGenerationStatus);

package/dist/components/generation-status/generation-status.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/generation-status/generation-status.styles.js

@@ -0,0 +1,84 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    vertical-align: middle;
+    max-inline-size: 100%;
+  }
+
+  [part='base'] {
+    display: inline-flex;
+    align-items: center;
+    max-inline-size: 100%;
+    font-size: 0.8125rem;
+    line-height: 1.3;
+    color: var(--lyra-color-text-quiet);
+  }
+
+  [part='elapsed'] {
+    /* Full-strength text, not the quieter --lyra-color-text-quiet the rest
+       of the readout uses -- elapsed time is the one figure this component
+       always shows (tokens/throughput are optional), so it gets the higher-
+       contrast treatment to read as the primary value at a glance. */
+    color: var(--lyra-color-text);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+  [part='tokens'],
+  [part='throughput'] {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /* Segments are joined with a middot rather than a flex gap + separate
+     separator element, so a segment that doesn't render (tokens/throughput
+     are both optional, see the class doc) never leaves a dangling
+     double-gap -- the dot only ever appears immediately before a segment
+     that's actually present. */
+  [part='tokens']::before,
+  [part='throughput']::before {
+    content: '·';
+    margin-inline: 0.4em;
+    opacity: 0.6;
+  }
+
+  [part='stop-button'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* Same "shrink the shared icon-button token for a compact inline
+       control" idiom as lyra-attachment-chip's retry-/remove-button. */
+    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
+    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
+    margin-inline-start: var(--lyra-space-s);
+    padding: 0;
+    border: 1px solid var(--lyra-color-border);
+    border-radius: 50%;
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      background-color var(--lyra-transition-fast),
+      border-color var(--lyra-transition-fast),
+      color var(--lyra-transition-fast);
+  }
+  [part='stop-button']:hover {
+    border-color: var(--lyra-color-brand);
+    color: var(--lyra-color-brand);
+  }
+  [part='stop-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='stop-button'] svg {
+    display: block;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='stop-button'] {
+      transition: none !important;
+    }
+  }
+`;