@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/gauge/gauge.js

@@ -1,179 +1,5 @@
-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, svg } from 'lit';
-import { property } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './gauge.class.js';
+import { LyraGauge } from './gauge.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { finiteNumber } from '../../internal/numbers.js';
-import { styles } from './gauge.styles.js';
-// Radial gauge sweeps 270° (like a speedometer), leaving a 90° gap at the bottom.
-const SWEEP_DEG = 270;
-const START_DEG = 135; // rotate so the gap is centered at the bottom
-const RADIUS = 40;
-const CENTER = 50;
-const STROKE = 10;
-// Linear gauge: keep the bar thin and low in the 0..20 viewBox so the top
-// ~12 units are free for a value/label text row above it.
-const LINEAR_STROKE = 6;
-const LINEAR_BAR_Y = 15;
-const LINEAR_TEXT_Y = 8;
-// Length of the x1=0 -> x2=100 horizontal fill/track line (Euclidean, y1==y2).
-const LINEAR_LENGTH = 100;
-function polarToCartesian(angleDeg) {
-    const rad = (angleDeg * Math.PI) / 180;
-    return [CENTER + RADIUS * Math.cos(rad), CENTER + RADIUS * Math.sin(rad)];
-}
-function arcPath(startDeg, endDeg) {
-    const [sx, sy] = polarToCartesian(startDeg);
-    const [ex, ey] = polarToCartesian(endDeg);
-    const largeArc = endDeg - startDeg > 180 ? 1 : 0;
-    return `M ${sx} ${sy} A ${RADIUS} ${RADIUS} 0 ${largeArc} 1 ${ex} ${ey}`;
-}
-// The radial fill's `d` is fixed geometry (the full 270° sweep), built once —
-// a `d` rebuilt from `ratio` on every render is not reliably CSS-transitionable
-// across browsers. Animated progress instead rides stroke-dasharray/
-// stroke-dashoffset (always transitionable) over this constant path, the same
-// technique used for the linear variant's fill line below.
-const RADIAL_ARC_D = arcPath(START_DEG, START_DEG + SWEEP_DEG);
-const RADIAL_ARC_LENGTH = (SWEEP_DEG / 360) * 2 * Math.PI * RADIUS;
-/**
- * `<lyra-gauge>` — a radial or linear meter. First-party invention; no
- * generic gauge widget exists in Web Awesome.
- *
- * @customElement lyra-gauge
- * @csspart base - The root `<svg>`.
- * @csspart track - The background track arc/line.
- * @csspart fill - The animated fill arc/line.
- * @csspart value - The value text.
- * @csspart label - The label text.
- */
-export class LyraGauge extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.value = 0;
-        this.min = 0;
-        this.max = 100;
-        this.type = 'radial';
-        this.label = '';
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    // Normalizes a reversed min > max domain by swapping lo/hi, but only once
-    // both bounds are finite -- shared by `ratio` (fill geometry) and
-    // `willUpdate` (aria-value* trio) so the two can never silently diverge.
-    get domain() {
-        const min = finiteNumber(this.min, 0);
-        const max = finiteNumber(this.max, 100);
-        return { lo: Math.min(min, max), hi: Math.max(min, max) };
-    }
-    get ratio() {
-        if (!Number.isFinite(this.value))
-            return 0;
-        const { lo, hi } = this.domain;
-        if (!Number.isFinite(lo) || !Number.isFinite(hi))
-            return 0;
-        const span = hi - lo || 1;
-        return Math.min(1, Math.max(0, (this.value - lo) / span));
-    }
-    /** The text rendered/announced for the current value: `valueLabel` when set,
-     * else the numeric `value`, blanked (like the ARIA attributes and fill) when
-     * `value` is non-finite (NaN/undefined/Infinity/-Infinity). */
-    get displayText() {
-        return this.valueLabel || (!Number.isFinite(this.value) ? '' : String(this.value));
-    }
-    willUpdate() {
-        this.setAttribute('role', 'meter');
-        // 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, hi } = this.domain;
-        const finiteTrio = Number.isFinite(this.value) && Number.isFinite(lo) && Number.isFinite(hi);
-        if (finiteTrio) {
-            const clamped = Math.min(hi, Math.max(lo, this.value));
-            this.setAttribute('aria-valuenow', String(clamped));
-        }
-        else {
-            this.removeAttribute('aria-valuenow');
-        }
-        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.removeAttribute('aria-valuemax');
-        if (this.label)
-            this.setAttribute('aria-label', this.label);
-        else
-            this.removeAttribute('aria-label');
-        if (this.valueLabel)
-            this.setAttribute('aria-valuetext', this.valueLabel);
-        else
-            this.removeAttribute('aria-valuetext');
-    }
-    renderRadial() {
-        const text = this.displayText;
-        // Dashoffset counts down from the full arc length (nothing revealed) to 0
-        // (whole sweep revealed) as ratio goes 0 -> 1 — the classic "draw an SVG
-        // path" technique, which transitions smoothly via plain CSS.
-        const dashoffset = RADIAL_ARC_LENGTH * (1 - this.ratio);
-        return html `<svg part="base" viewBox="0 0 100 100">
-      <path part="track" stroke-width=${STROKE} d=${RADIAL_ARC_D}></path>
-      <path
-        part="fill"
-        stroke-width=${STROKE}
-        d=${RADIAL_ARC_D}
-        stroke-dasharray=${RADIAL_ARC_LENGTH}
-        stroke-dashoffset=${dashoffset}
-      ></path>
-      <text part="value" x="50" y="52" aria-hidden="true">${text}</text>
-      ${this.label ? svg `<text part="label" x="50" y="68" aria-hidden="true">${this.label}</text>` : ''}
-    </svg>`;
-    }
-    renderLinear() {
-        const text = this.displayText;
-        const dashoffset = LINEAR_LENGTH * (1 - this.ratio);
-        return html `<svg part="base" viewBox="0 0 100 20" preserveAspectRatio="none">
-      <line part="track" x1="0" y1=${LINEAR_BAR_Y} x2="100" y2=${LINEAR_BAR_Y} stroke-width=${LINEAR_STROKE}></line>
-      <line
-        part="fill"
-        x1="0"
-        y1=${LINEAR_BAR_Y}
-        x2="100"
-        y2=${LINEAR_BAR_Y}
-        stroke-width=${LINEAR_STROKE}
-        stroke-dasharray=${LINEAR_LENGTH}
-        stroke-dashoffset=${dashoffset}
-      ></line>
-      ${this.label ? svg `<text part="label" x="0" y=${LINEAR_TEXT_Y} aria-hidden="true">${this.label}</text>` : ''}
-      <text part="value" x="100" y=${LINEAR_TEXT_Y} aria-hidden="true">${text}</text>
-    </svg>`;
-    }
-    render() {
-        return this.type === 'linear' ? this.renderLinear() : this.renderRadial();
-    }
-}
-__decorate([
-    property({ type: Number })
-], LyraGauge.prototype, "value", void 0);
-__decorate([
-    property({ type: Number })
-], LyraGauge.prototype, "min", void 0);
-__decorate([
-    property({ type: Number })
-], LyraGauge.prototype, "max", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraGauge.prototype, "type", void 0);
-__decorate([
-    property()
-], LyraGauge.prototype, "label", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraGauge.prototype, "valueLabel", void 0);
 defineElement('gauge', LyraGauge);
+//# sourceMappingURL=gauge.js.map

package/dist/components/gauge/gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.js","sourceRoot":"","sources":["../../../src/components/gauge/gauge.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC"}

package/dist/components/gauge/gauge.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=gauge.styles.d.ts.map

package/dist/components/gauge/gauge.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/gauge/gauge.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA0DlB,CAAC"}

package/dist/components/gauge/gauge.styles.js

@@ -2,12 +2,12 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: inline-block;
-    inline-size: 8em;
-    block-size: 8em;
+    inline-size: var(--lyra-size-8em);
+    block-size: var(--lyra-size-8em);
   }
   :host([type='linear']) {
-    inline-size: 12em;
-    block-size: 1.5em;
+    inline-size: var(--lyra-size-12em);
+    block-size: var(--lyra-size-1-5em);
   }
   svg {
     display: block;
@@ -26,14 +26,14 @@ export const styles = css `
     transition: stroke-dashoffset var(--lyra-transition-base);
   }
   [part='value'] {
-    font-size: 1rem;
-    font-weight: 700;
+    font-size: var(--lyra-font-size-md);
+    font-weight: var(--lyra-font-weight-bold);
     text-anchor: middle;
     fill: var(--lyra-color-text);
     font-family: var(--lyra-font);
   }
   [part='label'] {
-    font-size: 0.625rem;
+    font-size: var(--lyra-font-size-2xs);
     text-anchor: middle;
     fill: var(--lyra-color-text-quiet);
     font-family: var(--lyra-font);
@@ -44,7 +44,7 @@ export const styles = css `
   }
   :host([type='linear']) [part='value'],
   :host([type='linear']) [part='label'] {
-    font-size: 0.5rem;
+    font-size: var(--lyra-size-0-5rem);
   }
   :host([type='linear']) [part='value'] {
     text-anchor: end;
@@ -58,3 +58,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=gauge.styles.js.map

package/dist/components/gauge/gauge.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.styles.js","sourceRoot":"","sources":["../../../src/components/gauge/gauge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0DxB,CAAC"}

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

@@ -0,0 +1,121 @@
+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 interface LyraGenerationStatusEventMap {
+    'lyra-stop': CustomEvent<undefined>;
+}
+export declare class LyraGenerationStatus extends LyraElement<LyraGenerationStatusEventMap> {
+    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 (or
+     *  when set to a value that fails to parse as a finite number, e.g. an
+     *  ISO-8601 date string) 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. Defaults to `true`.
+     *  Uses {@link showStopConverter} rather than Lit's default presence-based
+     *  `type: Boolean` handling, so a plain-HTML consumer with no way to write
+     *  a `.showStop` property binding can still turn this off with
+     *  `show-stop="false"`; a Lit template can do the same with either that
+     *  attribute string or a `.showStop=${false}` property binding. */
+    showStop: boolean;
+    private elapsedMs;
+    private tickTimer?;
+    private fallbackStartMs?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private startTicker;
+    private stopTicker;
+    private get validStartedAt();
+    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;
+    }
+}
+//# sourceMappingURL=generation-status.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generation-status.class.d.ts","sourceRoot":"","sources":["../../../src/components/generation-status/generation-status.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEpB,MAAM,KAAK,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AA6F7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACrC;AACD,qBAAa,oBAAqB,SAAQ,WAAW,CAAC,4BAA4B,CAAC;IACjF,MAAM,CAAC,MAAM,iCAAgC;IAE7C;8DAC0D;IACd,MAAM,UAAS;IAE3D;;;;kDAI8C;IACO,SAAS,CAAC,EAAE,MAAM,CAAC;IAExE;yCACqC;IACiB,UAAU,CAAC,EAAE,MAAM,CAAC;IAE1E;;;mBAGe;IAC6C,eAAe,CAAC,EAAE,MAAM,CAAC;IAErF;;;;;uEAKmE;IACC,QAAQ,UAAQ;IAI3E,OAAO,CAAC,SAAS,CAAK;IAE/B,OAAO,CAAC,SAAS,CAAC,CAAiC;IAGnD,OAAO,CAAC,eAAe,CAAC,CAAS;IAUjC,iBAAiB,IAAI,IAAI,CAMxB;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAkBD,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAUlD;IAKD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAK/C;IAED,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,UAAU;IAelB,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,CAAC,gBAAgB;IAKxB;;sEAEkE;IAClE,OAAO,KAAK,wBAAwB,GASnC;IAED,OAAO,CAAC,WAAW,CAEjB;IAEF,MAAM,IAAI,cAAc,CAmBvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}

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

@@ -0,0 +1,260 @@
+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 { 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`;
+}
+/**
+ * String-aware boolean attribute converter for `show-stop`. Lit's built-in
+ * `type: Boolean` converter is presence-based -- the attribute's mere
+ * presence (regardless of its string value) maps to `true`, so a plain-
+ * markup consumer writing the literal `show-stop="false"` would actually get
+ * the button *shown*, the opposite of what that string reads as (the same
+ * bug class `<lyra-streaming-text>`'s `optionalBooleanConverter` and
+ * `<lyra-line-chart>`'s `WithoutBeginAtZero` story both document). Unlike
+ * `<lyra-streaming-text>`'s tri-state converter, this property's default is
+ * `true`, not "unset" -- so this one only needs two states: attribute absent
+ * (or removed) -> `true` (the default); `show-stop="false"` -> `false`;
+ * anything else present (no value, `="true"`, ...) -> `true`.
+ */
+const showStopConverter = {
+    fromAttribute(value) {
+        return value !== 'false';
+    },
+    toAttribute(value) {
+        // `true` is this property's default, so there's nothing worth reflecting
+        // for it; only the non-default `false` needs an attribute at all.
+        return value ? null : 'false';
+    },
+};
+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. Defaults to `true`.
+         *  Uses {@link showStopConverter} rather than Lit's default presence-based
+         *  `type: Boolean` handling, so a plain-HTML consumer with no way to write
+         *  a `.showStop` property binding can still turn this off with
+         *  `show-stop="false"`; a Lit template can do the same with either that
+         *  attribute string or a `.showStop=${false}` property binding. */
+        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]; }
+    // A re-parenting host (e.g. a virtualized/reordering list) disconnects and
+    // reconnects this element without ever toggling `active` -- `willUpdate`/
+    // `updated` only react to *changes* of `active`, so with no override here
+    // a still-active element would come back with `disconnectedCallback`'s
+    // cleared ticker never restarted, freezing the readout even though
+    // `active` (still `true`) says generation is ongoing. Restarting from
+    // `computeElapsedMs()` (rather than resuming a stale in-flight interval)
+    // matches how `startTicker()` already re-baselines on every fresh start.
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.active) {
+            this.elapsedMs = this.computeElapsedMs();
+            this.startTicker();
+        }
+    }
+    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.validStartedAt == 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;
+        }
+    }
+    // `startedAt` is host-supplied and, unlike `tokenCount`/`tokensPerSecond`
+    // (both already guarded at their read sites), had no `Number.isFinite`
+    // check of its own -- a non-numeric `started-at` attribute (e.g. an
+    // ISO-8601 date string that failed the `type: Number` conversion, landing
+    // as `NaN`) would flow straight into `Date.now() - start`, permanently
+    // rendering the literal text "NaNm NaNs" with no fallback or recovery.
+    // Treating an invalid value the same as "unset" here restores this
+    // property's own documented fallback-clock behavior instead.
+    get validStartedAt() {
+        return this.startedAt != null && Number.isFinite(this.startedAt) ? this.startedAt : undefined;
+    }
+    computeElapsedMs() {
+        const start = this.validStartedAt ?? 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({ attribute: 'show-stop', converter: showStopConverter })
+], LyraGenerationStatus.prototype, "showStop", void 0);
+__decorate([
+    state()
+], LyraGenerationStatus.prototype, "elapsedMs", void 0);
+//# sourceMappingURL=generation-status.class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generation-status.class.js","sourceRoot":"","sources":["../../../src/components/generation-status/generation-status.class.ts"],"names":[],"mappings":"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"}