@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/chat-composer/chat-composer.js

@@ -1,366 +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, svg } from 'lit';
-import { property, state, query } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
-import { FormAssociated } from '../../internal/form-associated.js';
+export * from './chat-composer.class.js';
+import { LyraChatComposer } from './chat-composer.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './chat-composer.styles.js';
-// Mirrors the shared icon set's viewBox/stroke conventions
-// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding
-// send/stop glyphs to that module -- it's off limits here -- so these
-// one-off icons still read as part of the same visual language as the rest
-// of the library's inline icons. Same approach lyra-checkbox's and
-// lyra-chat-message's own local glyphs take for the identical reason.
-const ICON_VIEW_BOX = '0 0 24 24';
-const ICON_STROKE_WIDTH = '1.75';
-function sendIcon() {
-    return svg `
-    <svg
-      width="1em"
-      height="1em"
-      viewBox=${ICON_VIEW_BOX}
-      fill="none"
-      stroke="currentColor"
-      stroke-width=${ICON_STROKE_WIDTH}
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-      focusable="false"
-    ><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-  `;
-}
-/** A filled square -- the conventional "stop generating" glyph. */
-function stopIcon() {
-    return svg `
-    <svg
-      width="1em"
-      height="1em"
-      viewBox=${ICON_VIEW_BOX}
-      fill="currentColor"
-      stroke="none"
-      aria-hidden="true"
-      focusable="false"
-    ><rect x="6" y="6" width="12" height="12" rx="1.5"></rect></svg>
-  `;
-}
-/**
- * `<lyra-chat-composer>` — the message input for a chat/agent conversation
- * surface: an auto-resizing textarea plus a send/stop button. Form-
- * associated via the `FormAssociated` mixin (see `<lyra-date-input>` for the
- * same shape), so it participates in native `<form>` submission/validation/
- * reset like any other text control — `name`/`value`/`disabled`/`required`/
- * `checkValidity()`/`reportValidity()` all come from that mixin.
- *
- * Auto-resize reads the textarea's own *computed* line-height/padding/
- * border at runtime (`resizeTextarea()`) rather than assuming a fixed
- * px-per-row constant, so it stays correct under a consumer's own font-size/
- * line-height overrides. It grows between `min-rows` and `max-rows`, then
- * switches to internal scrolling. A `ResizeObserver` on the textarea itself
- * re-runs the same fit whenever its *width* changes (a responsive
- * breakpoint, a sidebar toggling, a window resize, an orientation change)
- * even though `value`/`min-rows`/`max-rows` never did -- a narrower box
- * wraps the same text across more lines, so the previously-fitted height
- * would otherwise go stale and clip content with no scrollbar to reveal it.
- *
- * Enter-to-send (only active while `submit-on-enter` is true, the default):
- * plain Enter submits and is prevented from inserting a newline; Shift+Enter
- * always inserts a newline no matter what; an IME composition step (checked
- * via `isComposing`, with `keyCode === 229` as a defense-in-depth fallback
- * for browsers that report `isComposing` inconsistently on the
- * compositionend-adjacent keydown) is never treated as a submit trigger;
- * and while `status` isn't `"idle"` Enter is left alone to insert a newline
- * too, rather than trying to submit again -- there is nothing meaningful to
- * submit while a previous message is still sending/streaming, and the
- * textarea deliberately stays interactive (see `disabled` below) so a user
- * can keep composing their next message in the meantime.
- *
- * `lyra-submit`'s `detail.value` is always the exact, untrimmed current
- * value (`detail.value === value` at the moment it fires) -- trimming is
- * left to the consumer so it never silently diverges from what `value`
- * itself reports. Submitting does not clear `value`; the consumer clears it
- * once the submission has actually been accepted (so e.g. a failed send can
- * leave the text in place for retry).
- *
- * @customElement lyra-chat-composer
- * @slot leading - Content rendered before the textarea (e.g. an attach-file trigger button).
- * @slot chips - An attachment tray rendered above the input row (e.g. files queued for this message).
- * @slot trailing - Overrides the built-in send/stop button entirely when it has assigned content.
- * @event lyra-input - Fired on every user-driven edit of the textarea (not a programmatic `.value` assignment). `detail: { value }`.
- * @event lyra-submit - Fired by Enter (per `submit-on-enter`) or the built-in button while `status="idle"`. `detail: { value }`.
- * @event lyra-stop - Fired by the built-in button while `status` is `"sending"` or `"streaming"`. No detail.
- * @csspart base - The bordered root container.
- * @csspart chips - The wrapper around the `chips` slot. Hidden entirely when the slot is empty.
- * @csspart row - The row holding the leading slot, textarea, and trailing slot/button.
- * @csspart leading - The wrapper around the `leading` slot. Hidden entirely when the slot is empty.
- * @csspart textarea - The auto-resizing `<textarea>` itself.
- * @csspart trailing - The wrapper around the `trailing` slot and the built-in `action-button`.
- * @csspart action-button - The built-in send/stop button. Absent from the accessibility tree's meaningful content whenever `trailing` has assigned content. Style its busy treatment via `:host([status='sending'])`/`:host([status='streaming'])`.
- */
-export class LyraChatComposer extends FormAssociated(LyraElement) {
-    static { this.styles = [LyraElement.styles, styles]; }
-    constructor() {
-        super();
-        this.placeholder = '';
-        this.minRows = 1;
-        this.maxRows = 8;
-        this.status = 'idle';
-        this.submitOnEnter = true;
-        this.hasLeadingSlot = false;
-        this.hasChipsSlot = false;
-        this.hasTrailingSlot = false;
-        this.touched = false;
-        this.onTextareaInput = (e) => {
-            this.value = e.target.value;
-            this.emit('lyra-input', { value: this.value });
-        };
-        this.onTextareaKeyDown = (e) => {
-            if (e.key !== 'Enter')
-                return;
-            // Shift+Enter always inserts a newline, regardless of submit-on-enter --
-            // leave the browser's own default action alone.
-            if (e.shiftKey)
-                return;
-            // submit-on-enter="false": Enter always inserts a newline too.
-            if (!this.submitOnEnter)
-                return;
-            // An IME composition step (e.g. confirming a Japanese/Chinese/Korean
-            // candidate) must never be treated as "the user pressed Enter to send" --
-            // keyCode 229 is a defense-in-depth fallback for browsers that report
-            // isComposing inconsistently on the compositionend-adjacent keydown.
-            if (e.isComposing || e.keyCode === 229)
-                return;
-            // Nothing meaningful to (re-)submit while already sending/streaming --
-            // fall through to the default newline insertion instead, so the
-            // textarea stays a normal place to keep composing the next message.
-            if (this.status !== 'idle')
-                return;
-            e.preventDefault();
-            this.submit();
-        };
-        this.onActionClick = () => {
-            if (this.effectiveDisabled)
-                return;
-            if (this.status === 'idle') {
-                this.submit();
-            }
-            else {
-                this.emit('lyra-stop');
-            }
-        };
-        this.onLeadingSlotChange = (e) => {
-            this.hasLeadingSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onChipsSlotChange = (e) => {
-            this.hasChipsSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onTrailingSlotChange = (e) => {
-            this.hasTrailingSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onTextareaBlur = () => {
-            this.touched = true;
-        };
-        this.addEventListener('invalid', () => {
-            this.touched = true;
-        });
-    }
-    willUpdate() {
-        if (!this.hasUpdated) {
-            this.hasLeadingSlot = this.hasSlotted('leading');
-            this.hasChipsSlot = this.hasSlotted('chips');
-            this.hasTrailingSlot = this.hasSlotted('trailing');
-        }
-    }
-    firstUpdated(changed) {
-        super.firstUpdated(changed);
-        this.resizeTextarea();
-        this.armTextareaResizeObserver();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.textareaResizeObserver?.disconnect();
-        if (this.textareaResizeRaf !== undefined)
-            cancelAnimationFrame(this.textareaResizeRaf);
-        this.textareaResizeRaf = undefined;
-    }
-    updated(changed) {
-        super.updated(changed);
-        if (changed.has('value') || changed.has('minRows') || changed.has('maxRows')) {
-            this.resizeTextarea();
-        }
-    }
-    formResetCallback() {
-        super.formResetCallback();
-        this.touched = false;
-    }
-    hasSlotted(name) {
-        return Array.from(this.children).some((el) => el.getAttribute('slot') === name);
-    }
-    /**
-     * Grows/shrinks the textarea between `min-rows` and `max-rows`, reading
-     * the *computed* line-height/padding/border back out of the element at
-     * call time instead of assuming a fixed px-per-row figure -- correct
-     * whatever font-size/line-height a consumer's own CSS ends up applying.
-     * Past `max-rows` the box stops growing and switches to internal
-     * scrolling (`overflow-y: auto`).
-     */
-    resizeTextarea() {
-        const ta = this.textareaEl;
-        if (!ta)
-            return;
-        const cs = getComputedStyle(ta);
-        const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.2;
-        const paddingBlock = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
-        const borderBlock = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
-        const minRows = Math.max(1, this.minRows || 1);
-        const maxRows = Math.max(minRows, this.maxRows || minRows);
-        const minHeight = lineHeight * minRows + paddingBlock + borderBlock;
-        const maxHeight = lineHeight * maxRows + paddingBlock + borderBlock;
-        // Collapse first so a shrinking edit (e.g. deleting a wrapped line)
-        // reports its true scrollHeight rather than the previous, taller,
-        // explicitly-set height.
-        ta.style.height = 'auto';
-        // scrollHeight never includes border, so it's added back in to compare
-        // apples-to-apples against min/maxHeight, both of which are border-box
-        // figures (this component inherits box-sizing: border-box from
-        // LyraElement's tokens.styles.ts).
-        const contentHeight = ta.scrollHeight + borderBlock;
-        const next = Math.min(Math.max(contentHeight, minHeight), maxHeight);
-        ta.style.height = `${next}px`;
-        ta.style.overflowY = contentHeight > maxHeight ? 'auto' : 'hidden';
-    }
-    /**
-     * Re-fits the textarea whenever its own box *width* changes, independent
-     * of any `value`/`min-rows`/`max-rows` update -- `updated()` above only
-     * reacts to those, so a pure layout change (a responsive breakpoint, a
-     * sidebar collapsing/expanding, a window resize, an orientation change)
-     * would otherwise leave the height pinned at whatever it last was, even
-     * though the same text now wraps across a different number of lines.
-     * Mirrors split.ts's `collapseResizeObserver`/virtual-list.ts's
-     * `containerResizeObserver`/lite-chart.ts's `resizeObserver`.
-     *
-     * Only reacts to an actual inline-size change rather than calling
-     * `resizeTextarea()` unconditionally on every callback: `resizeTextarea()`
-     * itself sets `ta.style.height`, a *block*-size change on the very element
-     * being observed, which would otherwise re-trigger this same observer
-     * every tick. Diffing against the last-seen width (same technique as
-     * split.ts keying its collapse state off `contentBoxSize[0].inlineSize`)
-     * keeps a same-width, height-only callback from doing anything.
-     *
-     * The actual recompute is deferred one animation frame rather than run
-     * synchronously inside the callback: `ResizeObserver`'s spec re-delivers,
-     * within the same notification pass, to any observed element resized by
-     * its own callback -- mutating `ta.style.height` synchronously here would
-     * do exactly that to the very box just observed, and the browser reports
-     * it as "ResizeObserver loop completed with undelivered notifications"
-     * (a real, user-visible console error, not just noise). Deferring the
-     * mutation to the next frame -- outside that notification pass -- avoids
-     * ever resizing the observed element from inside its own callback.
-     */
-    armTextareaResizeObserver() {
-        const ta = this.textareaEl;
-        if (!ta || this.textareaResizeObserver)
-            return;
-        let lastWidth = ta.getBoundingClientRect().width;
-        this.textareaResizeObserver = new ResizeObserver((entries) => {
-            const box = entries[0]?.contentBoxSize?.[0];
-            const width = box ? box.inlineSize : (entries[0]?.contentRect.width ?? lastWidth);
-            // A sub-pixel-only difference (common with fractional layout/zoom)
-            // isn't worth a recompute.
-            if (Math.abs(width - lastWidth) < 0.5)
-                return;
-            lastWidth = width;
-            if (this.textareaResizeRaf !== undefined)
-                cancelAnimationFrame(this.textareaResizeRaf);
-            this.textareaResizeRaf = requestAnimationFrame(() => {
-                this.textareaResizeRaf = undefined;
-                this.resizeTextarea();
-            });
-        });
-        this.textareaResizeObserver.observe(ta);
-    }
-    submit() {
-        this.emit('lyra-submit', { value: this.value });
-    }
-    renderActionButton() {
-        const busy = this.status !== 'idle';
-        return html `
-      <button
-        part="action-button"
-        type="button"
-        aria-label=${busy ? 'Stop generating' : 'Send message'}
-        ?disabled=${this.effectiveDisabled}
-        @click=${this.onActionClick}
-      >
-        ${busy ? stopIcon() : sendIcon()}
-      </button>
-    `;
-    }
-    render() {
-        return html `
-      <div part="base">
-        <div part="chips" ?hidden=${!this.hasChipsSlot}>
-          <slot name="chips" @slotchange=${this.onChipsSlotChange}></slot>
-        </div>
-        <div part="row">
-          <span part="leading" ?hidden=${!this.hasLeadingSlot}>
-            <slot name="leading" @slotchange=${this.onLeadingSlotChange}></slot>
-          </span>
-          <textarea
-            part="textarea"
-            aria-label=${this.placeholder || 'Message'}
-            aria-required=${this.required ? 'true' : 'false'}
-            aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
-            .value=${this.value}
-            placeholder=${this.placeholder}
-            rows=${Math.max(1, this.minRows || 1)}
-            ?required=${this.required}
-            ?disabled=${this.effectiveDisabled}
-            @input=${this.onTextareaInput}
-            @keydown=${this.onTextareaKeyDown}
-            @blur=${this.onTextareaBlur}
-          ></textarea>
-          <span part="trailing">
-            <slot name="trailing" @slotchange=${this.onTrailingSlotChange}></slot>
-            ${this.hasTrailingSlot ? nothing : this.renderActionButton()}
-          </span>
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property()
-], LyraChatComposer.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: Number, attribute: 'min-rows' })
-], LyraChatComposer.prototype, "minRows", void 0);
-__decorate([
-    property({ type: Number, attribute: 'max-rows' })
-], LyraChatComposer.prototype, "maxRows", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraChatComposer.prototype, "status", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'submit-on-enter' })
-], LyraChatComposer.prototype, "submitOnEnter", void 0);
-__decorate([
-    state()
-], LyraChatComposer.prototype, "hasLeadingSlot", void 0);
-__decorate([
-    state()
-], LyraChatComposer.prototype, "hasChipsSlot", void 0);
-__decorate([
-    state()
-], LyraChatComposer.prototype, "hasTrailingSlot", void 0);
-__decorate([
-    state()
-], LyraChatComposer.prototype, "touched", void 0);
-__decorate([
-    query('textarea')
-], LyraChatComposer.prototype, "textareaEl", void 0);
 defineElement('chat-composer', LyraChatComposer);
+//# sourceMappingURL=chat-composer.js.map

package/dist/components/chat-composer/chat-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-composer.js","sourceRoot":"","sources":["../../../src/components/chat-composer/chat-composer.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC"}

package/dist/components/chat-composer/chat-composer.styles.d.ts

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

package/dist/components/chat-composer/chat-composer.styles.d.ts.map

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

package/dist/components/chat-composer/chat-composer.styles.js

@@ -8,7 +8,7 @@ export const styles = css `
     flex-direction: column;
     gap: var(--lyra-space-xs);
     box-sizing: border-box;
-    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);
     padding: var(--lyra-space-s);
@@ -81,7 +81,7 @@ export const styles = css `
        (chat-composer.ts's resizeTextarea()) can read a real pixel value
        back out of getComputedStyle() -- the UA default of "normal" has no
        single resolved px figure to measure rows against. */
-    line-height: 1.5;
+    line-height: var(--lyra-line-height-normal);
     padding-block: var(--lyra-space-xs);
     overflow-y: hidden;
   }
@@ -111,8 +111,8 @@ export const styles = css `
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-brand);
     color: var(--lyra-color-on-brand);
-    font-size: 1.125rem;
-    line-height: 1;
+    font-size: var(--lyra-font-size-lg);
+    line-height: var(--lyra-line-height-none);
     cursor: pointer;
     transition: background-color var(--lyra-transition-fast);
   }
@@ -143,3 +143,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=chat-composer.styles.js.map

package/dist/components/chat-composer/chat-composer.styles.js.map

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

package/dist/components/chat-message/chat-message.class.d.ts

@@ -0,0 +1,145 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../live-region/live-region.class.js';
+export type ChatMessageRole = 'user' | 'assistant' | 'system';
+export type ChatMessageStatus = 'sending' | 'sent' | 'failed' | 'streaming';
+/**
+ * `<lyra-chat-message>` — a role-based message bubble *shell* for a chat/
+ * agent conversation surface. It renders none of the message content itself:
+ * the default slot carries whatever a consumer wants to display (plain
+ * text, a `<lyra-markdown>`, a custom template, anything at all) and this
+ * component only supplies the surrounding chrome — alignment/coloring by
+ * `role`, an avatar/badges header row, an optional collapse toggle, an
+ * attachments strip, and a status-aware footer (a live-updating status dot +
+ * text, the formatted `timestamp`, a built-in retry affordance for
+ * `status="failed"`, and an `actions` slot for everything else).
+ *
+ * No built-in copy button is rendered. Deciding what "the copyable text" of
+ * an arbitrary slotted message even means (plain text? the rendered
+ * markdown source? something else?) is exactly the kind of content
+ * interpretation this shell deliberately stays out of — slot a copy control
+ * into `actions` instead. Firing `lyra-copy` (`detail: { text }`) from that
+ * control keeps the event name consistent with `<lyra-json-viewer>`'s own
+ * copy affordance, for anything listening at the conversation-surface level.
+ *
+ * Accessibility of `status`: the current status is always available as
+ * plain visible text (`[part="status-text"]`), never color alone. A
+ * transition *to* `"failed"`, or *from* `"streaming"` to `"sent"` (a stream
+ * finishing), is additionally announced through an internal
+ * `<lyra-live-region>` (see that component's header for the throttled-
+ * announcement wiring this composes) so a screen-reader user who isn't
+ * currently focused on this message still learns about it. This differs
+ * from `<lyra-typing-indicator>`'s deliberately simpler `role="status"`
+ * approach — that component only ever has one thing to announce (its own
+ * mount); this one has a `status` that can flip between several values
+ * across a single element's lifetime, which is exactly the coalescing job
+ * `<lyra-live-region>` exists for.
+ *
+ * `role` is a message-author role (`user`/`assistant`/`system`, matching
+ * the vocabulary of every chat/completion API), *not* a WAI-ARIA role, so
+ * it reflects to a `data-role` attribute rather than the bare `role`
+ * attribute — `role="user"` would collide with `Element`'s own ARIA `role`
+ * accessor and is not a valid ARIA role token to begin with.
+ *
+ * @customElement lyra-chat-message
+ * @slot - The message body.
+ * @slot avatar - An avatar/icon for the message author.
+ * @slot badges - Small status/metric chips (e.g. token count, latency, model name) — entirely app-supplied; this component computes none of that itself.
+ * @slot actions - Action controls (e.g. copy, retry), rendered at the end of the footer.
+ * @slot attachments - File/image attachment chips, rendered below the message body.
+ * @event lyra-retry - Fired by the built-in retry button, only rendered when `status="failed"`.
+ * @event lyra-collapse-toggle - `detail: boolean` (the new `collapsed` state) — fired when the user activates the built-in collapse button.
+ * @csspart bubble - The message bubble root. Programmatically focusable (`tabindex="-1"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lyra-retry` listener flipping `status` away from `"failed"`).
+ * @csspart header - The row above the message body — avatar, badges, and the collapse toggle. Hidden entirely when none of those have anything to show.
+ * @csspart avatar - The wrapper around the `avatar` slot.
+ * @csspart badges - The wrapper around the `badges` slot.
+ * @csspart collapse-button - The built-in collapse/expand toggle (only rendered when `collapsible`).
+ * @csspart body - The wrapper around the default slot (the message content). Hidden while `collapsed`.
+ * @csspart attachments - The wrapper around the `attachments` slot.
+ * @csspart footer - The row below the message body — status, timestamp, retry, and actions. Hidden entirely when none of those have anything to show.
+ * @csspart status-indicator - A small decorative (`aria-hidden`) dot reflecting `status`; absent while `status="sent"`.
+ * @csspart status-text - The visible text twin of `status-indicator` — carries the state in text, not just color.
+ * @csspart timestamp - The formatted `timestamp`, rendered in a `<time>` element.
+ * @csspart retry-button - The built-in retry button (only rendered when `status="failed"`).
+ * @csspart actions - The wrapper around the `actions` slot.
+ */
+export interface LyraChatMessageEventMap {
+    'lyra-retry': CustomEvent<undefined>;
+}
+export declare class LyraChatMessage extends LyraElement<LyraChatMessageEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        status: {
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+    };
+    /** Who authored the message. Reflects to `data-role` — see the class doc. */
+    role: ChatMessageRole;
+    /** When the message was sent/received. Accepts a `Date` or anything
+     *  `new Date()` can parse (e.g. an ISO 8601 string); invalid input is
+     *  treated the same as unset (no timestamp rendered). */
+    timestamp?: Date | string;
+    /** Overrides the default `hour:minute` rendering of `timestamp` — this
+     *  library has no i18n system of its own, so an overridable formatter is
+     *  the established way to hand locale-sensitive display back to the
+     *  consumer (mirrors `lyra-heatmap`'s `cellText`). */
+    formatTimestamp?: (date: Date) => string;
+    /** Shows the built-in collapse/expand toggle in the header. */
+    collapsible: boolean;
+    /** Whether the message body is currently hidden. Effective whenever set,
+     *  independent of `collapsible` — `collapsible` only controls whether the
+     *  built-in toggle button is rendered, mirroring `lyra-widget`'s identical
+     *  `collapsible`/`collapsed` pair. */
+    collapsed: boolean;
+    private hasAvatarSlot;
+    private hasBadgesSlot;
+    private hasAttachmentsSlot;
+    private hasActionsSlot;
+    private liveRegion?;
+    private bubbleEl?;
+    private readonly bodyId;
+    private _status;
+    /** The value `status` held immediately before its current one, recorded
+     *  at the point of assignment in the setter below -- *not* derived from
+     *  Lit's `changed`/`changedProperties`, which only ever remembers the
+     *  single oldest value seen since the last completed update. Without this,
+     *  setting `status` to `"streaming"` and then immediately overwriting it
+     *  (e.g. to `"sent"`) within the same task, with no render in between,
+     *  would silently lose the `"streaming"` intermediate value before
+     *  `announceStatusChange` ever gets to see it. */
+    private previousStatus;
+    /** True only until the component's first completed update -- gates the
+     *  status-change announcement below so a message never announces
+     *  whatever status it happens to mount with (mirrors the same "not on
+     *  first paint" intent `willUpdate`'s `!this.hasUpdated` check has for the
+     *  slot-presence flags, except `this.hasUpdated` itself is already `true`
+     *  by the time `updated()` runs for the first time, so it can't be reused
+     *  here). */
+    private isMounting;
+    /** Delivery/generation state. Drives the footer's status dot/text and,
+     *  for `"failed"`, the bubble's danger treatment and the built-in retry
+     *  button. Declared via `static properties` above with a hand-written
+     *  accessor (see `previousStatus`). */
+    get status(): ChatMessageStatus;
+    set status(value: ChatMessageStatus);
+    protected willUpdate(): void;
+    protected updated(changed: PropertyValues): void;
+    private hasSlotted;
+    private get normalizedTimestamp();
+    private get statusText();
+    private announceStatusChange;
+    private onAvatarSlotChange;
+    private onBadgesSlotChange;
+    private onAttachmentsSlotChange;
+    private onActionsSlotChange;
+    private toggleCollapsed;
+    private onRetryClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-chat-message': LyraChatMessage;
+    }
+}
+//# sourceMappingURL=chat-message.class.d.ts.map

package/dist/components/chat-message/chat-message.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-message.class.d.ts","sourceRoot":"","sources":["../../../src/components/chat-message/chat-message.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAA0B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,OAAO,qCAAqC,CAAC;AAG7C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAC9D,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;AA2C5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACtC;AACD,qBAAa,eAAgB,SAAQ,WAAW,CAAC,uBAAuB,CAAC;IACvE,MAAM,CAAC,MAAM,iCAAgC;IAO7C,MAAM,CAAC,UAAU;QACf,MAAM;YAAI,OAAO;YAAQ,UAAU;;MACnC;IAEF,6EAA6E;IACxB,IAAI,EAAE,eAAe,CAAe;IAEzF;;6DAEyD;IACzB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAE1D;;;0DAGsD;IACtB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAEzE,+DAA+D;IACnB,WAAW,UAAS;IAEhE;;;0CAGsC;IACM,SAAS,UAAS;IAErD,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,cAAc,CAAS;IAEb,OAAO,CAAC,UAAU,CAAC,CAAiB;IACrC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAEzD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+B;IAEtD,OAAO,CAAC,OAAO,CAA6B;IAE5C;;;;;;;sDAOkD;IAClD,OAAO,CAAC,cAAc,CAA6B;IAEnD;;;;;;iBAMa;IACb,OAAO,CAAC,UAAU,CAAQ;IAE1B;;;2CAGuC;IACvC,IAAI,MAAM,IAAI,iBAAiB,CAE9B;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,iBAAiB,EAMlC;IAED,SAAS,CAAC,UAAU,IAAI,IAAI,CAO3B;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAM/C;IAED,OAAO,CAAC,UAAU;IAIlB,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,uBAAuB,CAE7B;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,YAAY,CAQlB;IAEF,MAAM,IAAI,cAAc,CA0DvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}