@aceshooting/lyra-ui 1.1.0 → 2.0.0

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

@@ -0,0 +1,291 @@
+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 { defineElement } from '../../internal/prefix.js';
+import { nextId } from '../../internal/a11y.js';
+import { chevronIcon } from '../../internal/icons.js';
+import '../live-region/live-region.js';
+import { styles } from './chat-message.styles.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding a
+// retry 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. Same approach lyra-checkbox's own local
+// checkmark/indeterminate glyphs take for the identical reason.
+const ICON_VIEW_BOX = '0 0 24 24';
+const ICON_STROKE_WIDTH = '1.75';
+function retryIcon() {
+    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"
+    ><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
+  `;
+}
+/** `hour:minute` in the runtime's default locale -- the sensible baseline
+ *  this library (with no i18n system of its own) can offer without
+ *  hardcoding English strings; `formatTimestamp` overrides it. */
+function defaultFormatTimestamp(date) {
+    return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(date);
+}
+/** Visible (not just color-coded) text for every non-resting status --
+ *  `'sent'` renders nothing here, it's the resting state. */
+const STATUS_TEXT = {
+    sending: 'Sending…',
+    streaming: 'Responding…',
+    failed: 'Failed to send',
+};
+/**
+ * `<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.
+ * @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 class LyraChatMessage extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Who authored the message. Reflects to `data-role` — see the class doc. */
+        this.role = 'assistant';
+        /** Delivery/generation state. Drives the footer's status dot/text and, for
+         *  `"failed"`, the bubble's danger treatment and the built-in retry button. */
+        this.status = 'sent';
+        /** Shows the built-in collapse/expand toggle in the header. */
+        this.collapsible = false;
+        /** 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. */
+        this.collapsed = false;
+        this.hasAvatarSlot = false;
+        this.hasBadgesSlot = false;
+        this.hasAttachmentsSlot = false;
+        this.hasActionsSlot = false;
+        this.bodyId = nextId('chat-message-body');
+        this.onAvatarSlotChange = (e) => {
+            this.hasAvatarSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onBadgesSlotChange = (e) => {
+            this.hasBadgesSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onAttachmentsSlotChange = (e) => {
+            this.hasAttachmentsSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onActionsSlotChange = (e) => {
+            this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.toggleCollapsed = () => {
+            this.collapsed = !this.collapsed;
+            this.emit('lyra-collapse-toggle', this.collapsed);
+        };
+        this.onRetryClick = () => {
+            this.emit('lyra-retry');
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasAvatarSlot = this.hasSlotted('avatar');
+            this.hasBadgesSlot = this.hasSlotted('badges');
+            this.hasAttachmentsSlot = this.hasSlotted('attachments');
+            this.hasActionsSlot = this.hasSlotted('actions');
+        }
+    }
+    // `changed.get('status')` is `undefined` on the very first update (Lit
+    // only records the *first* old value seen since the last completed
+    // update, and the constructor's own field-initializer assignment is that
+    // first change, from the truly-unset internal slot) -- so this naturally
+    // skips announcing whatever status a message happens to mount with, and
+    // only ever fires for a real, later transition.
+    updated(changed) {
+        if (changed.has('status')) {
+            this.announceStatusChange(changed.get('status'));
+        }
+    }
+    hasSlotted(name) {
+        return Array.from(this.children).some((el) => el.getAttribute('slot') === name);
+    }
+    get normalizedTimestamp() {
+        if (this.timestamp === undefined)
+            return undefined;
+        const date = this.timestamp instanceof Date ? this.timestamp : new Date(this.timestamp);
+        return Number.isNaN(date.getTime()) ? undefined : date;
+    }
+    get statusText() {
+        return this.status === 'sent' ? undefined : STATUS_TEXT[this.status];
+    }
+    announceStatusChange(previous) {
+        if (previous === undefined || previous === this.status)
+            return;
+        const region = this.liveRegion;
+        if (!region)
+            return;
+        if (this.status === 'failed') {
+            region.mode = 'assertive';
+            region.announce('Message failed to send.', { force: true });
+        }
+        else if (previous === 'streaming' && this.status === 'sent') {
+            region.mode = 'polite';
+            region.announce('Message complete.', { force: true });
+        }
+    }
+    render() {
+        const ts = this.normalizedTimestamp;
+        const formatter = this.formatTimestamp ?? defaultFormatTimestamp;
+        const statusText = this.statusText;
+        const showHeader = this.hasAvatarSlot || this.hasBadgesSlot || this.collapsible;
+        // `statusText` is already truthy whenever `status === 'failed'`, so it
+        // alone covers that case here too.
+        const showFooter = Boolean(statusText) || Boolean(ts) || this.hasActionsSlot;
+        return html `
+      <div part="bubble">
+        <div part="header" ?hidden=${!showHeader}>
+          <span part="avatar" ?hidden=${!this.hasAvatarSlot}
+            ><slot name="avatar" @slotchange=${this.onAvatarSlotChange}></slot
+          ></span>
+          <span part="badges" ?hidden=${!this.hasBadgesSlot}
+            ><slot name="badges" @slotchange=${this.onBadgesSlotChange}></slot
+          ></span>
+          ${this.collapsible
+            ? html `<button
+                part="collapse-button"
+                type="button"
+                aria-expanded=${this.collapsed ? 'false' : 'true'}
+                aria-controls=${this.bodyId}
+                aria-label=${this.collapsed ? 'Expand message' : 'Collapse message'}
+                @click=${this.toggleCollapsed}
+              >
+                <span class="chevron" style=${`transform:rotate(${this.collapsed ? '0deg' : '90deg'})`}
+                  >${chevronIcon()}</span
+                >
+              </button>`
+            : nothing}
+        </div>
+        <div part="body" id=${this.bodyId} ?hidden=${this.collapsed}>
+          <slot></slot>
+        </div>
+        <div part="attachments" ?hidden=${!this.hasAttachmentsSlot}>
+          <slot name="attachments" @slotchange=${this.onAttachmentsSlotChange}></slot>
+        </div>
+        <div part="footer" ?hidden=${!showFooter}>
+          ${statusText
+            ? html `<span part="status-indicator" aria-hidden="true"></span><span part="status-text"
+                  >${statusText}</span
+                >`
+            : nothing}
+          ${ts ? html `<time part="timestamp" datetime=${ts.toISOString()}>${formatter(ts)}</time>` : nothing}
+          ${this.status === 'failed'
+            ? html `<button part="retry-button" type="button" @click=${this.onRetryClick}>
+                ${retryIcon()}<span>Retry</span>
+              </button>`
+            : nothing}
+          <span part="actions" ?hidden=${!this.hasActionsSlot}
+            ><slot name="actions" @slotchange=${this.onActionsSlotChange}></slot
+          ></span>
+        </div>
+        <lyra-live-region></lyra-live-region>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true, attribute: 'data-role' })
+], LyraChatMessage.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraChatMessage.prototype, "status", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraChatMessage.prototype, "timestamp", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraChatMessage.prototype, "formatTimestamp", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraChatMessage.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraChatMessage.prototype, "collapsed", void 0);
+__decorate([
+    state()
+], LyraChatMessage.prototype, "hasAvatarSlot", void 0);
+__decorate([
+    state()
+], LyraChatMessage.prototype, "hasBadgesSlot", void 0);
+__decorate([
+    state()
+], LyraChatMessage.prototype, "hasAttachmentsSlot", void 0);
+__decorate([
+    state()
+], LyraChatMessage.prototype, "hasActionsSlot", void 0);
+__decorate([
+    query('lyra-live-region')
+], LyraChatMessage.prototype, "liveRegion", void 0);
+defineElement('chat-message', LyraChatMessage);

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

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

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

@@ -0,0 +1,203 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    /* Component-specific -- no shared --wa-*/--lyra-* "conversation bubble
+       width" token exists to resolve through, same rationale as
+       --lyra-json-viewer-max-height in json-viewer.styles.ts. */
+    --lyra-chat-message-max-width: 80%;
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+  [part='bubble'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+    max-inline-size: var(--lyra-chat-message-max-width);
+    padding: var(--lyra-space-m);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    overflow-wrap: anywhere;
+  }
+
+  /* -- role ---------------------------------------------------------------
+     The role property reflects to 'data-role' rather than the bare 'role'
+     attribute -- see the class doc for why -- so these selectors key off
+     'data-role'. */
+  :host([data-role='user']) [part='bubble'] {
+    margin-inline-start: auto;
+    background: var(--lyra-color-brand-quiet);
+    border-color: transparent;
+  }
+  :host([data-role='assistant']) [part='bubble'] {
+    margin-inline-end: auto;
+  }
+  :host([data-role='system']) [part='bubble'] {
+    margin-inline-end: auto;
+    color: var(--lyra-color-text-quiet);
+    font-style: italic;
+    border-style: dashed;
+  }
+
+  /* -- status ---------------------------------------------------------------
+     'failed' gets an unmistakable treatment that does not rely on color
+     alone (see [part='status-text']); 'streaming' is a quieter accent plus
+     the pulsing dot below. */
+  :host([status='failed']) [part='bubble'] {
+    border-color: var(--lyra-color-danger);
+    background: var(--lyra-color-danger-quiet);
+  }
+  :host([status='streaming']) [part='bubble'] {
+    border-color: var(--lyra-color-brand);
+  }
+
+  [part='header'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+  }
+  [part='header'][hidden],
+  [part='avatar'][hidden],
+  [part='badges'][hidden],
+  [part='attachments'][hidden],
+  [part='footer'][hidden],
+  [part='actions'][hidden],
+  [part='body'][hidden] {
+    display: none;
+  }
+  [part='avatar'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+  }
+  [part='badges'] {
+    flex: 1 1 auto;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    min-inline-size: 0;
+  }
+  [part='collapse-button'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
+    margin-inline-start: auto;
+    border: none;
+    background: transparent;
+    color: var(--lyra-color-text-quiet);
+    border-radius: var(--lyra-radius);
+    cursor: pointer;
+  }
+  [part='collapse-button']:hover {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='collapse-button']:focus-visible,
+  [part='retry-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='collapse-button'] .chevron {
+    display: inline-flex;
+    transition: transform var(--lyra-transition-fast);
+  }
+
+  [part='attachments'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--lyra-space-xs);
+  }
+
+  [part='footer'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    font-size: 0.75rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='actions'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    margin-inline-start: auto;
+  }
+  [part='timestamp'] {
+    white-space: nowrap;
+  }
+  /* [part='timestamp']/[part='actions'] inherit the footer's own quiet
+     text color by default; against the danger-quiet bubble background a
+     'failed' message gets underneath it, that muted color's contrast ratio
+     drops below 4.5:1 (verified via axe's color-contrast rule), so the
+     whole footer switches to the same --lyra-color-danger already used for
+     [part='status-text'] instead. */
+  :host([status='failed']) [part='footer'] {
+    color: var(--lyra-color-danger);
+  }
+
+  [part='status-indicator'] {
+    flex: 0 0 auto;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: 50%;
+    background: var(--lyra-color-text-quiet);
+  }
+  :host([status='streaming']) [part='status-indicator'] {
+    background: var(--lyra-color-brand);
+    animation: lyra-chat-message-pulse 1.5s ease-in-out infinite;
+  }
+  :host([status='failed']) [part='status-indicator'] {
+    background: var(--lyra-color-danger);
+  }
+  [part='status-text'] {
+    white-space: nowrap;
+  }
+  :host([status='failed']) [part='status-text'] {
+    color: var(--lyra-color-danger);
+    font-weight: 600;
+  }
+  @keyframes lyra-chat-message-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.35;
+    }
+  }
+
+  [part='retry-button'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    padding: 0.125rem var(--lyra-space-xs);
+    border: 1px solid var(--lyra-color-danger);
+    border-radius: var(--lyra-radius);
+    background: transparent;
+    color: var(--lyra-color-danger);
+    font: inherit;
+    font-size: 0.75rem;
+    cursor: pointer;
+  }
+  [part='retry-button']:hover {
+    background: var(--lyra-color-danger-quiet);
+  }
+  [part='retry-button'] svg {
+    inline-size: 0.875em;
+    block-size: 0.875em;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='status-indicator'] {
+      animation: none !important;
+      opacity: 1;
+    }
+    [part='collapse-button'] .chevron {
+      transition: none !important;
+    }
+  }
+`;

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,59 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-checkbox>` — a boolean form control. Structurally the same idea as
+ * `<lyra-switch>` (form-associated via `ElementInternals`, click and
+ * Space/Enter both toggle) but with checkbox semantics: `role="checkbox"` +
+ * an `aria-checked` that can also be `"mixed"`, and a visual box/checkmark
+ * instead of a track/thumb.
+ *
+ * `checked` is not a plain string, so this attaches `ElementInternals`
+ * directly and implements its own `updateValidity()` rather than using the
+ * `FormAssociated` mixin — see `<lyra-combobox>` for the same
+ * direct-`ElementInternals` shape with a non-string value.
+ *
+ * @customElement lyra-checkbox
+ * @slot - Label text, rendered next to the box. Clicking it toggles the
+ * checkbox, the same as clicking a native checkbox's associated `<label>`.
+ * If left empty, set `aria-label` on the host so the control still has an
+ * accessible name.
+ * @event lyra-change - The user toggled the checkbox (click or Space/Enter).
+ * `detail: { checked }`. Not fired for a programmatic `.checked` assignment.
+ * @csspart base - The whole interactive control (`role="checkbox"`); wraps the box and label.
+ * @csspart box - The small square that shows the checkmark/indeterminate dash.
+ * @csspart checkmark - The checkmark (or indeterminate dash) glyph inside the box.
+ * @csspart label - The wrapper around the default slot.
+ */
+export declare class LyraCheckbox extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    static formAssociated: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    value: string;
+    private hasLabelSlot;
+    private internals;
+    private _defaultChecked;
+    private _defaultCaptured;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(): void;
+    private updateValidity;
+    protected updated(changed: PropertyValues): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    private toggle;
+    private onClick;
+    private onKeyDown;
+    private onSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-checkbox': LyraCheckbox;
+    }
+}