@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/stat/stat.js

@@ -1,250 +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, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './stat.class.js';
+import { LyraStat } from './stat.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { chevronIcon } from '../../internal/icons.js';
-import { nextId, srOnly } from '../../internal/a11y.js';
-import { styles } from './stat.styles.js';
-/**
- * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
- * "metric row" / "KPI card" pattern common to dashboard UIs.
- *
- * @customElement lyra-stat
- * @slot - Leading icon.
- * @slot caption - Rich caption content (overrides the `caption` attribute).
- * @slot spark - A sparkline (e.g. `<lyra-sparkline>`) or other compact trend
- *   visual. `lyra-stat` only reserves the slot; it doesn't render one itself.
- * @slot sub - Rich sub-line content (overrides the `sub` attribute).
- * @csspart base - The component's root wrapper.
- * @csspart icon - Container for the leading icon slot.
- * @csspart label - The label text.
- * @csspart value-row - Wrapper around the value and unit.
- * @csspart value - The value text. Accessibly labelled by the `label` part (via
- *   `aria-labelledby`) whenever `label` is set, so tabbing directly to this
- *   (focusable when `exactValue` is set) control still announces which metric it is.
- * @csspart unit - The unit text.
- * @csspart trend - The trend pill.
- * @csspart sub - Container for the `sub` attribute/slot.
- * @csspart spark - Container for the `spark` slot.
- * @csspart caption - Container for the caption attribute/slot.
- * @csspart rows - Container for the `rows` breakdown list.
- * @csspart row - A single breakdown row (one per `rows` entry).
- * @csspart row-label - The label text of a breakdown row.
- * @csspart row-value - The value text of a breakdown row. Shows the row's `exactValue` (if any) as
- *   a hover/focus tooltip, same as the headline `value`, and is accessibly labelled by its
- *   `row-label` (via `aria-labelledby`) the same way the headline `value` is.
- */
-export class LyraStat extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.label = '';
-        this.value = '';
-        this.unit = '';
-        this.variant = 'neutral';
-        this.trend = NaN;
-        this.caption = '';
-        /** Which trend direction counts as "good" — inverts arrow/color polarity for
-         *  cost/latency/error-rate-style metrics where a decrease is the win. */
-        this.goodDirection = 'up';
-        /** Breakdown rows rendered as a simple label/value list beneath the caption. */
-        this.rows = [];
-        /** Visual emphasis (e.g. for a "headline" stat in a group) — orthogonal to
-         *  the status `variant`; see the `[part='value']` selector below for how
-         *  the two combine. */
-        this.emphasis = false;
-        /** Exact value shown as a hover/focus tooltip on the headline `value` (e.g. `value="$1.2K"
-         *  exact-value="$1,204.37"`). Also makes `[part='value']` keyboard-focusable so the tooltip is
-         *  reachable without a pointer. */
-        this.exactValue = '';
-        /** A secondary line distinct from `caption` (e.g. a comparison-period label), rendered between the
-         *  trend pill and the caption. */
-        this.sub = '';
-        /** Renders `value` as smaller/lighter prose (e.g. a loading/status message) instead of the bold
-         *  numeric headline style, and hides `unit`. */
-        this.prose = false;
-        /** Tighter padding for constrained spaces — same convention as `lyra-empty`'s `compact`. */
-        this.compact = false;
-        // Same fix `lyra-empty` already established: `[part]:empty` never matches
-        // because the part always contains a literal `<slot>` child. Track real
-        // slot assignment in JS instead.
-        this.hasIcon = false;
-        this.hasCaptionSlot = false;
-        this.hasSparkSlot = false;
-        this.hasSubSlot = false;
-        // Stable id pairing `[part='label']` with `[part='value']` via
-        // aria-labelledby, so a keyboard user tabbing straight to the (focusable,
-        // tooltip-bearing) value still gets an accessible name like "Revenue
-        // $1.2K" instead of the bare value.
-        this.labelId = nextId('stat-label');
-        this.valueId = `${this.labelId}-value`;
-        // One id per `rows` entry, regenerated only when the `rows` array itself is
-        // reassigned (not on every render) so `aria-labelledby` references stay
-        // stable across unrelated re-renders.
-        this.rowLabelIds = [];
-        this.onIconSlotChange = (e) => {
-            this.hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onCaptionSlotChange = (e) => {
-            this.hasCaptionSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onSparkSlotChange = (e) => {
-            this.hasSparkSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onSubSlotChange = (e) => {
-            this.hasSubSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles, srOnly]; }
-    willUpdate(changed) {
-        if (!this.hasUpdated) {
-            this.hasIcon = Array.from(this.children).some((el) => !el.hasAttribute('slot'));
-            this.hasCaptionSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'caption');
-            this.hasSparkSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'spark');
-            this.hasSubSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'sub');
-        }
-        if (changed.has('rows')) {
-            this.rowLabelIds = this.rows.map(() => nextId('stat-row-label'));
-        }
-    }
-    render() {
-        // Lit's built-in Number converter maps a removed/absent attribute to
-        // `null`, not NaN, even though the property is typed `number` — so
-        // `isNaN(this.trend)` alone is false for a cleared attribute and the pill
-        // would reappear showing a fabricated "unchanged, 0%". Treat null/undefined
-        // the same as NaN here instead of trusting the static type.
-        const hasTrend = this.trend != null && !isNaN(this.trend);
-        const rawDirection = this.trend > 0 ? 'up' : this.trend < 0 ? 'down' : 'flat';
-        const isGood = rawDirection === 'flat' ? null : rawDirection === this.goodDirection;
-        // The trend pill previously rendered literal ▲/▼ glyphs — font-dependent
-        // and inconsistent with the rest of the icon set — swapped for the
-        // shared chevronIcon(), rotated per direction via CSS on the wrapping
-        // [part='trend'].
-        const arrow = rawDirection === 'flat' ? '–' : chevronIcon();
-        const hasCaption = this.hasCaptionSlot || this.caption.length > 0;
-        const hasSub = this.hasSubSlot || this.sub.length > 0;
-        // The visible pill only ever shows the icon rotation + color to convey
-        // direction and good/bad polarity; both are invisible to screen readers,
-        // so mirror them into a plain-language sr-only announcement.
-        const trendAnnouncement = rawDirection === 'flat'
-            ? 'unchanged'
-            : `${rawDirection === 'up' ? 'increased' : 'decreased'} ${Math.abs(this.trend)}%${isGood == null ? '' : isGood ? ', good' : ', bad'}`;
-        return html `
-      <div part="base">
-        <span part="icon" ?hidden=${!this.hasIcon}
-          ><slot @slotchange=${this.onIconSlotChange}></slot
-        ></span>
-        <span part="label" id=${this.labelId}>${this.label}</span>
-        <div part="value-row">
-          <span
-            part="value"
-            id=${this.valueId}
-            title=${this.exactValue || nothing}
-            tabindex=${this.exactValue ? '0' : nothing}
-            aria-labelledby=${this.label ? `${this.labelId} ${this.valueId}` : nothing}
-            >${this.value}</span
-          >
-          <span part="unit">${this.unit}</span>
-        </div>
-        ${hasTrend
-            ? html `<span
-              part="trend"
-              data-direction=${rawDirection}
-              data-polarity=${isGood == null ? nothing : isGood ? 'good' : 'bad'}
-            >
-              <span aria-hidden="true">${arrow} ${Math.abs(this.trend)}%</span>
-              <span class="sr-only">${trendAnnouncement}</span>
-            </span>`
-            : nothing}
-        <div part="sub" ?hidden=${!hasSub}>
-          <slot name="sub" @slotchange=${this.onSubSlotChange}>${this.sub}</slot>
-        </div>
-        <div part="spark" ?hidden=${!this.hasSparkSlot}>
-          <slot name="spark" @slotchange=${this.onSparkSlotChange}></slot>
-        </div>
-        <div part="caption" ?hidden=${!hasCaption}>
-          <slot name="caption" @slotchange=${this.onCaptionSlotChange}>${this.caption}</slot>
-        </div>
-        <div part="rows" ?hidden=${this.rows.length === 0}>
-          ${this.rows.map((row, i) => {
-            const rowLabelId = this.rowLabelIds[i];
-            const rowValueId = `${rowLabelId}-value`;
-            return html `
-              <div part="row">
-                <span part="row-label" id=${rowLabelId}>${row.label}</span>
-                <span
-                  part="row-value"
-                  id=${rowValueId}
-                  title=${row.exactValue || nothing}
-                  tabindex=${row.exactValue ? '0' : nothing}
-                  aria-labelledby=${row.label ? `${rowLabelId} ${rowValueId}` : nothing}
-                  >${row.value}</span
-                >
-              </div>
-            `;
-        })}
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property()
-], LyraStat.prototype, "label", void 0);
-__decorate([
-    property()
-], LyraStat.prototype, "value", void 0);
-__decorate([
-    property()
-], LyraStat.prototype, "unit", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraStat.prototype, "variant", void 0);
-__decorate([
-    property({ type: Number })
-], LyraStat.prototype, "trend", void 0);
-__decorate([
-    property()
-], LyraStat.prototype, "caption", void 0);
-__decorate([
-    property({ attribute: 'good-direction' })
-], LyraStat.prototype, "goodDirection", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraStat.prototype, "rows", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraStat.prototype, "emphasis", void 0);
-__decorate([
-    property({ attribute: 'exact-value' })
-], LyraStat.prototype, "exactValue", void 0);
-__decorate([
-    property()
-], LyraStat.prototype, "sub", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraStat.prototype, "prose", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraStat.prototype, "compact", void 0);
-__decorate([
-    state()
-], LyraStat.prototype, "hasIcon", void 0);
-__decorate([
-    state()
-], LyraStat.prototype, "hasCaptionSlot", void 0);
-__decorate([
-    state()
-], LyraStat.prototype, "hasSparkSlot", void 0);
-__decorate([
-    state()
-], LyraStat.prototype, "hasSubSlot", void 0);
-__decorate([
-    state()
-], LyraStat.prototype, "rowLabelIds", void 0);
 defineElement('stat', LyraStat);
+//# sourceMappingURL=stat.js.map

package/dist/components/stat/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","sourceRoot":"","sources":["../../../src/components/stat/stat.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC"}

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

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

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

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

package/dist/components/stat/stat.styles.js

@@ -8,7 +8,7 @@ export const styles = css `
     flex-direction: column;
     gap: var(--lyra-space-xs);
     padding: var(--lyra-space-m);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
   }
@@ -19,10 +19,10 @@ export const styles = css `
     display: none;
   }
   [part='label'] {
-    font-size: 0.75rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-xs);
+    font-weight: var(--lyra-font-weight-semibold);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: var(--lyra-size-0-04em);
     color: var(--lyra-color-text-quiet);
   }
   [part='value-row'] {
@@ -31,26 +31,26 @@ export const styles = css `
     gap: var(--lyra-space-xs);
   }
   [part='value'] {
-    font-size: 1.75rem;
-    font-weight: 700;
-    font-family: ui-monospace, SFMono-Regular, monospace;
+    font-size: var(--lyra-font-size-2xl);
+    font-weight: var(--lyra-font-weight-bold);
+    font-family: var(--lyra-font-mono);
   }
   [part='unit'] {
-    font-size: 0.875rem;
+    font-size: var(--lyra-font-size-md-sm);
     color: var(--lyra-color-text-quiet);
   }
   [part='trend'] {
     display: inline-flex;
     align-items: center;
     gap: var(--lyra-space-xs);
-    font-size: 0.8125rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-sm);
+    font-weight: var(--lyra-font-weight-semibold);
     border-radius: var(--lyra-radius);
     /* 0.05rem/0.4rem don't cleanly map to any --lyra-space-* step (the
        smallest, --lyra-space-xs, is 0.25rem): rounding the vertical value
        up to xs would 5x this chip's padding and blow out the compact
        trend-chip look, so both stay literal here. */
-    padding: 0.05rem 0.4rem;
+    padding: var(--lyra-size-0-05rem) var(--lyra-size-0-4rem);
     align-self: flex-start;
   }
   [part='trend'][data-direction='up'] svg {
@@ -85,14 +85,14 @@ export const styles = css `
     display: none;
   }
   [part='sub'] {
-    font-size: 0.8125rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-sm);
+    font-weight: var(--lyra-font-weight-semibold);
   }
   [part='sub'][hidden] {
     display: none;
   }
   [part='caption'] {
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-text-quiet);
   }
   [part='caption'][hidden] {
@@ -104,7 +104,7 @@ export const styles = css `
     /* Slightly tighter than the card's own --lyra-space-xs gap so the
        breakdown list reads as one nested group rather than siblings of
        equal weight with label/value/caption. */
-    gap: 0.125rem;
+    gap: var(--lyra-size-0-125rem);
   }
   [part='rows'][hidden] {
     display: none;
@@ -114,20 +114,20 @@ export const styles = css `
     align-items: baseline;
     justify-content: space-between;
     gap: var(--lyra-space-xs);
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
   }
   [part='row-label'] {
     color: var(--lyra-color-text-quiet);
   }
   [part='row-value'] {
-    font-family: ui-monospace, SFMono-Regular, monospace;
-    font-weight: 600;
+    font-family: var(--lyra-font-mono);
+    font-weight: var(--lyra-font-weight-semibold);
   }
   /* Orthogonal to the status variant: an accent edge that marks a stat as
      visually emphasized (e.g. the "headline" stat in a group) regardless of
      status color. */
   :host([emphasis]) [part='base'] {
-    border-inline-start: 3px solid var(--lyra-color-brand);
+    border-inline-start: var(--lyra-border-width-thick) solid var(--lyra-color-brand);
   }
   /* Status semantics win over visual emphasis: only tint the value with the
      brand color when there's no status variant already claiming it. */
@@ -135,8 +135,8 @@ export const styles = css `
     color: var(--lyra-color-brand);
   }
   :host([prose]) [part='value'] {
-    font-size: 0.9375rem;
-    font-weight: 400;
+    font-size: var(--lyra-size-0-9375rem);
+    font-weight: var(--lyra-font-weight-normal);
     font-family: inherit;
     color: var(--lyra-color-text-quiet);
   }
@@ -145,6 +145,7 @@ export const styles = css `
   }
   :host([compact]) [part='base'] {
     padding: var(--lyra-space-s);
-    gap: 0.125rem;
+    gap: var(--lyra-size-0-125rem);
   }
 `;
+//# sourceMappingURL=stat.styles.js.map

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

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

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

@@ -0,0 +1,131 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../live-region/live-region.class.js';
+export type StreamStatusPhase = 'idle' | 'connecting' | 'streaming' | 'stalled';
+/**
+ * `<lyra-stream-status>` — a compact status indicator for a single streaming
+ * connection (SSE, WebSocket, long-poll, …), with built-in heartbeat-aware
+ * stall detection.
+ *
+ * The host drives `phase` directly for `idle`/`connecting`/`streaming`, and
+ * calls `recordActivity()` on every *semantic* frame received while
+ * streaming — a real content chunk, never a transport-level keep-alive ping.
+ * This component has no payload-inspection logic of its own: "ignore
+ * heartbeats" is entirely a call-site discipline — the host simply never
+ * calls `recordActivity()` for a ping, so pings never reset the stall timer
+ * and a connection that's only sending keep-alives (no real content) for
+ * longer than `stall-threshold-ms` correctly reads as stalled.
+ *
+ * Internally, an inactivity timer runs only while `phase === 'streaming'`.
+ * It's (re)armed whenever the phase transitions to `'streaming'` (directly,
+ * or via `recordActivity()` recovering from `'stalled'`), on every
+ * subsequent `recordActivity()` call while already streaming, whenever
+ * `stall-threshold-ms` itself changes while already streaming (the new
+ * value takes effect immediately, the same way `<lyra-toast-item>`'s
+ * `duration` re-applies mid-flight, rather than waiting for the next
+ * `recordActivity()`/phase change), and whenever this element (re)connects
+ * to the DOM while `phase` is still `'streaming'` (a disconnect always
+ * disarms it, so moving the element elsewhere in the page — disconnect then
+ * reconnect with `phase` unchanged — must resume detection rather than
+ * silently disabling it for the rest of the streaming session). It's
+ * disarmed the instant `phase` becomes anything else, including a
+ * host-driven reassignment away from `'streaming'` — so a stale timer can
+ * never fire a stall transition after the host has already moved on. If it
+ * ever fires, `phase` becomes `'stalled'` and `lyra-stall` is dispatched.
+ *
+ * `phase` remains a fully public, directly settable property at all times —
+ * a host can assign `'stalled'` (or any other phase) itself as a manual
+ * override, and this component never fights that assignment. `lyra-stall`/
+ * `lyra-recover` fire on *any* transition into/out of `'stalled'`
+ * respectively, whether timer-driven or host-driven, and never for a
+ * reassignment to the same value (Lit's default `hasChanged` already skips a
+ * no-op set, same as every other reflected `@property` in this library).
+ * Like `<lyra-chat-message>`'s `status`, whatever phase this element happens
+ * to *mount* with is never itself treated as an eventful transition — only a
+ * later change fires an event or an announcement.
+ *
+ * Accessibility: phase transitions into/out of `'stalled'` are announced
+ * through an internal `<lyra-live-region>` (see that component for the
+ * throttled/coalesced-announcement machinery this composes) rather than a
+ * hand-rolled `aria-live` region. `recordActivity()` itself never announces
+ * anything, no matter how often the host calls it — only the *transition*
+ * announces, exactly once per transition, which is the entire point of
+ * routing through the throttled announcer instead of writing to a live
+ * region on every call. Entering `'stalled'` announces with `mode="assertive"`
+ * (a stall can need the user's attention, e.g. before they give up and
+ * navigate away); leaving `'stalled'` always announces with `mode="polite"`
+ * (good news doesn't need to interrupt), but the *wording* depends on where
+ * it lands: `"Connection restored."` only when the destination is
+ * `'streaming'` (a genuine recovery), or a neutral `"No longer stalled."`
+ * when the destination is `'idle'`/`'connecting'` instead — that's the host
+ * giving up on the stream, not the stream recovering, and a screen-reader
+ * user must never be told the opposite of what a sighted user sees on
+ * screen. The decorative indicator dot is `aria-hidden` — it's a
+ * color/motion cue only, never the sole carrier of state.
+ *
+ * Visual: `'stalled'` is styled as a warning, not a danger — a stall is
+ * usually recoverable (the stream may resume on its own, or the host's own
+ * retry logic may kick in), so treating it as an actionable warning rather
+ * than a hard failure keeps the tone proportionate. A host that wants to
+ * escalate to danger styling after N stalls can scope its own CSS off
+ * `[phase="stalled"]`, or simply stop rendering this component and show its
+ * own danger-styled error state instead.
+ *
+ * @customElement lyra-stream-status
+ * @slot - Custom copy shown only while `phase="stalled"` (e.g. "Taking longer than usual…"). A sensible built-in default is used when nothing is slotted.
+ * @slot actions - A stop/retry button row. Always present in the template regardless of `phase` — visibility is driven purely by whether anything is slotted, not by `phase`; what to put here, and when, is entirely the host's call.
+ * @event lyra-stall - Fired whenever `phase` transitions into `'stalled'` from anything else (timer-driven, or a direct host assignment).
+ * @event lyra-recover - Fired whenever `phase` transitions out of `'stalled'` to anything else (via `recordActivity()`, or a direct host assignment) — fired unconditionally regardless of destination phase, even though the accompanying announcement's wording varies (see the class doc's "Accessibility" section).
+ * @csspart base - The root layout container.
+ * @csspart indicator - The decorative (`aria-hidden`) status dot.
+ * @csspart message - Wrapper around the default slot; only rendered while `phase="stalled"`.
+ * @csspart actions - Wrapper around the `actions` slot.
+ */
+export interface LyraStreamStatusEventMap {
+    'lyra-stall': CustomEvent<undefined>;
+    'lyra-recover': CustomEvent<undefined>;
+}
+export declare class LyraStreamStatus extends LyraElement<LyraStreamStatusEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** Current connection phase. Settable directly by the host at any time —
+     *  see the class doc for how that interacts with the internal stall timer. */
+    phase: StreamStatusPhase;
+    /** How long `phase` may stay `'streaming'` with no `recordActivity()` call
+     *  before this component declares it stalled. */
+    stallThresholdMs: number;
+    private stallTimer?;
+    private hasActionsSlot;
+    private hasMessageContent;
+    private liveRegion?;
+    protected willUpdate(): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Call on every semantic (non-heartbeat) frame received while streaming.
+     * - While `phase === 'streaming'`: (re)arms the stall timer, pushing the
+     *   stall deadline `stall-threshold-ms` further out.
+     * - While `phase === 'stalled'`: recovers — `phase` becomes `'streaming'`
+     *   again, `lyra-recover` fires, and the stall timer is armed fresh (same
+     *   as the bullet above), all via the same `updated()` transition handling
+     *   a direct host assignment would also go through.
+     * - While `phase` is `'idle'` or `'connecting'`: a no-op. A host may call
+     *   this defensively before formally flipping to `'streaming'`; it must
+     *   never throw or start a timer early.
+     */
+    recordActivity(): void;
+    private onPhaseChanged;
+    private armStallTimer;
+    private disarmStallTimer;
+    private announceTransition;
+    private hasSlotted;
+    private onActionsSlotChange;
+    private onMessageSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-stream-status': LyraStreamStatus;
+    }
+}
+//# sourceMappingURL=stream-status.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stream-status.class.d.ts","sourceRoot":"","sources":["../../../src/components/stream-status/stream-status.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,OAAO,qCAAqC,CAAC;AAG7C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAC;AA2BhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,MAAM,WAAW,wBAAwB;IACvC,YAAY,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,cAAc,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACxC;AACD,qBAAa,gBAAiB,SAAQ,WAAW,CAAC,wBAAwB,CAAC;IACzE,MAAM,CAAC,MAAM,iCAAgC;IAE7C;kFAC8E;IACjD,KAAK,EAAE,iBAAiB,CAAU;IAE/D;qDACiD;IACY,gBAAgB,SAAS;IAGtF,OAAO,CAAC,UAAU,CAAC,CAAgC;IAE1C,OAAO,CAAC,cAAc,CAAS;IAM/B,OAAO,CAAC,iBAAiB,CAAS;IAEhB,OAAO,CAAC,UAAU,CAAC,CAAiB;IAE/D,SAAS,CAAC,UAAU,IAAI,IAAI,CAK3B;IAgBD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAW/C;IAED,iBAAiB,IAAI,IAAI,CAUxB;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAED;;;;;;;;;;;OAWG;IACH,cAAc,IAAI,IAAI,CAMrB;IAED,OAAO,CAAC,cAAc;IAyBtB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF,MAAM,IAAI,cAAc,CAiBvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}