@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/context-meter/context-meter.d.ts

@@ -0,0 +1,53 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type ContextMeterTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
+export type ContextMeterVariant = 'ring' | 'bar';
+export interface ContextMeterSegment {
+    label: string;
+    /** Absolute quantity (e.g. tokens), not a pre-computed percentage. */
+    value: number;
+    tone?: ContextMeterTone;
+}
+/**
+ * `<lyra-context-meter>` — a segmented occupancy meter (bar or ring) for
+ * showing how a fixed capacity (a model's context window, a token budget,
+ * any consumable quota) is divided across labeled categories. First-party
+ * invention; no equivalent exists in Web Awesome.
+ *
+ * Pure data visualization: it renders `segments`/`total` as given and never
+ * computes token counts, costs, or any other domain-specific estimate
+ * itself — the one exception is the plain arithmetic sum of the segment
+ * values used to build the accessible "X of Y used" summary below.
+ *
+ * @customElement lyra-context-meter
+ * @csspart base - The component's root wrapper (a `<div>` for `bar`, an `<svg>` for `ring`).
+ * @csspart track - The unfilled/empty capacity track.
+ * @csspart segment - One occupied segment. Carries `data-tone` for styling.
+ * @csspart label - The visible caption, when `label` is set.
+ */
+export declare class LyraContextMeter extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Occupied segments, each an absolute quantity against `total` — never a percentage. */
+    segments: ContextMeterSegment[];
+    /** The full capacity segments are measured against (e.g. a model's context window size). */
+    total: number;
+    variant: ContextMeterVariant;
+    /** Overall accessible label/caption, e.g. `"128K context window"`. */
+    label: string;
+    /** Sum of segment values, clamped so a negative/NaN entry can't produce a negative total. */
+    private get usedTotal();
+    /** Per-segment ratio of `value` to `total`, clamped to [0,1] and capped so the
+     *  running sum across all segments never overflows past 1 — a `segments` array
+     *  that sums to more than `total` still renders a fully (not over-) filled meter. */
+    private ratios;
+    private get summary();
+    protected willUpdate(): void;
+    private renderBar;
+    private renderRing;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-context-meter': LyraContextMeter;
+    }
+}

package/dist/components/context-meter/context-meter.js

@@ -0,0 +1,159 @@
+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, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { finiteNumber } from '../../internal/numbers.js';
+import { styles } from './context-meter.styles.js';
+// Ring geometry: RADIUS/CENTER match lyra-gauge's radial numbers, so both
+// components' rings sit on the same circle within their viewBox. STROKE is
+// intentionally heavier than the gauge's (12 vs. 10) -- tightly-packed
+// multi-tone arcs need more width to stay visually distinct than a gauge's
+// single fill arc, so it isn't shared.
+const RADIUS = 40;
+const CENTER = 50;
+const STROKE = 12;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+function formatCount(n) {
+    return Math.round(finiteNumber(n, 0)).toLocaleString();
+}
+/**
+ * `<lyra-context-meter>` — a segmented occupancy meter (bar or ring) for
+ * showing how a fixed capacity (a model's context window, a token budget,
+ * any consumable quota) is divided across labeled categories. First-party
+ * invention; no equivalent exists in Web Awesome.
+ *
+ * Pure data visualization: it renders `segments`/`total` as given and never
+ * computes token counts, costs, or any other domain-specific estimate
+ * itself — the one exception is the plain arithmetic sum of the segment
+ * values used to build the accessible "X of Y used" summary below.
+ *
+ * @customElement lyra-context-meter
+ * @csspart base - The component's root wrapper (a `<div>` for `bar`, an `<svg>` for `ring`).
+ * @csspart track - The unfilled/empty capacity track.
+ * @csspart segment - One occupied segment. Carries `data-tone` for styling.
+ * @csspart label - The visible caption, when `label` is set.
+ */
+export class LyraContextMeter extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Occupied segments, each an absolute quantity against `total` — never a percentage. */
+        this.segments = [];
+        /** The full capacity segments are measured against (e.g. a model's context window size). */
+        this.total = 0;
+        this.variant = 'bar';
+        /** Overall accessible label/caption, e.g. `"128K context window"`. */
+        this.label = '';
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    /** Sum of segment values, clamped so a negative/NaN entry can't produce a negative total. */
+    get usedTotal() {
+        return this.segments.reduce((sum, s) => sum + Math.max(0, finiteNumber(s.value, 0)), 0);
+    }
+    /** Per-segment ratio of `value` to `total`, clamped to [0,1] and capped so the
+     *  running sum across all segments never overflows past 1 — a `segments` array
+     *  that sums to more than `total` still renders a fully (not over-) filled meter. */
+    ratios() {
+        const total = Math.max(0, finiteNumber(this.total, 0));
+        if (total <= 0)
+            return [];
+        const out = [];
+        let cumulative = 0;
+        for (const segment of this.segments) {
+            const raw = Math.max(0, finiteNumber(segment.value, 0));
+            const available = Math.max(0, 1 - cumulative);
+            const ratio = Math.min(raw / total, available);
+            cumulative += ratio;
+            out.push({ segment, ratio });
+        }
+        return out;
+    }
+    get summary() {
+        // Clamp the announced figure the same way ratios() clamps the visual fill --
+        // a segments array that sums past total must not report an impossible
+        // "160 of 100 used" to assistive tech while the bar/ring visibly caps at 100%.
+        const totalValue = Math.max(0, finiteNumber(this.total, 0));
+        const usedForSummary = totalValue > 0 ? Math.min(this.usedTotal, totalValue) : this.usedTotal;
+        const used = formatCount(usedForSummary);
+        const total = totalValue > 0 ? formatCount(totalValue) : null;
+        const phrase = total ? `${used} of ${total} used` : `${used} used`;
+        return this.label ? `${this.label} — ${phrase}` : phrase;
+    }
+    willUpdate() {
+        // role="img" + aria-label (rather than exposing the SVG/bar internals to
+        // the accessibility tree) mirrors lyra-gauge's "meter" role convention:
+        // one computed string carries the whole occupancy summary, so a screen
+        // reader gets meaningful text instead of silence or a bare "graphic".
+        this.setAttribute('role', 'img');
+        this.setAttribute('aria-label', this.summary);
+    }
+    renderBar() {
+        const ratios = this.ratios();
+        return html `
+      <div part="base">
+        ${this.label ? html `<div part="label" aria-hidden="true">${this.label}</div>` : nothing}
+        <div part="track" aria-hidden="true">
+          ${ratios.map(({ segment, ratio }) => html `
+              <span
+                part="segment"
+                data-tone=${segment.tone ?? 'neutral'}
+                title=${`${segment.label}: ${formatCount(segment.value)}`}
+                style=${styleMap({ flexBasis: `${(ratio * 100).toFixed(4)}%` })}
+              ></span>
+            `)}
+        </div>
+      </div>
+    `;
+    }
+    renderRing() {
+        const ratios = this.ratios();
+        let cumulative = 0;
+        const arcs = ratios.map(({ segment, ratio }) => {
+            const segLen = ratio * CIRCUMFERENCE;
+            const dashoffset = -cumulative * CIRCUMFERENCE;
+            cumulative += ratio;
+            return svg `
+        <circle
+          part="segment"
+          data-tone=${segment.tone ?? 'neutral'}
+          cx=${CENTER}
+          cy=${CENTER}
+          r=${RADIUS}
+          stroke-width=${STROKE}
+          stroke-dasharray=${`${segLen} ${CIRCUMFERENCE - segLen}`}
+          stroke-dashoffset=${dashoffset}
+          transform="rotate(-90 ${CENTER} ${CENTER})"
+        ><title>${`${segment.label}: ${formatCount(segment.value)}`}</title></circle>
+      `;
+        });
+        return html `
+      <svg part="base" viewBox="0 0 100 100" aria-hidden="true">
+        <circle part="track" cx=${CENTER} cy=${CENTER} r=${RADIUS} stroke-width=${STROKE}></circle>
+        ${arcs}
+        ${this.label ? svg `<text part="label" x=${CENTER} y=${CENTER + 4} aria-hidden="true">${this.label}</text>` : nothing}
+      </svg>
+    `;
+    }
+    render() {
+        return this.variant === 'ring' ? this.renderRing() : this.renderBar();
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraContextMeter.prototype, "segments", void 0);
+__decorate([
+    property({ type: Number })
+], LyraContextMeter.prototype, "total", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraContextMeter.prototype, "variant", void 0);
+__decorate([
+    property()
+], LyraContextMeter.prototype, "label", void 0);
+defineElement('context-meter', LyraContextMeter);

package/dist/components/context-meter/context-meter.styles.d.ts

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

package/dist/components/context-meter/context-meter.styles.js

@@ -0,0 +1,114 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    inline-size: 100%;
+  }
+  :host([variant='ring']) {
+    display: inline-block;
+    inline-size: 8em;
+    block-size: 8em;
+  }
+
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+  }
+  :host([variant='ring']) [part='base'] {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  [part='label'] {
+    font-size: 0.75rem;
+    color: var(--lyra-color-text-quiet);
+    font-family: var(--lyra-font);
+  }
+
+  /* --- bar variant ------------------------------------------------- */
+  [part='track'] {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    overflow: hidden;
+    block-size: 0.5rem;
+    border-radius: calc(var(--lyra-radius) * 0.5);
+    /* Quiet neutral fill for the unfilled remainder -- deliberately lighter
+       than a 'neutral'-tone segment (var(--lyra-color-border) at full
+       strength below) so "counted but uncolored" data still reads as
+       visually distinct from "not counted at all". */
+    background: color-mix(in srgb, var(--lyra-color-border) 30%, transparent);
+  }
+  [part='segment'] {
+    display: block;
+    flex: 0 0 auto;
+    block-size: 100%;
+    background: var(--lyra-color-border);
+    transition: flex-basis var(--lyra-transition-base);
+  }
+  /* A hairline seam between adjacent segments -- painted in the surface
+     color rather than as real gap spacing, so two same-tone segments next
+     to each other (e.g. two 'neutral' entries) still read as separate
+     quantities instead of merging into one block. Logical property keeps it
+     RTL-correct without extra math. */
+  [part='segment']:not(:first-of-type) {
+    border-inline-start: 1px solid var(--lyra-color-surface);
+  }
+  [part='segment'][data-tone='brand'] {
+    background: var(--lyra-color-brand);
+  }
+  [part='segment'][data-tone='success'] {
+    background: var(--lyra-color-success);
+  }
+  [part='segment'][data-tone='warning'] {
+    background: var(--lyra-color-warning);
+  }
+  [part='segment'][data-tone='danger'] {
+    background: var(--lyra-color-danger);
+  }
+
+  /* --- ring variant -------------------------------------------------- */
+  :host([variant='ring']) svg[part='base'] {
+    display: block;
+    overflow: visible;
+  }
+  :host([variant='ring']) [part='track'] {
+    fill: none;
+    stroke: color-mix(in srgb, var(--lyra-color-border) 30%, transparent);
+  }
+  :host([variant='ring']) [part='segment'] {
+    fill: none;
+    stroke: var(--lyra-color-border);
+    /* Butt (not round) caps -- round caps on tightly-packed segmented arcs
+       bleed past the exact boundary and overlap the next segment's color. */
+    stroke-linecap: butt;
+    transition:
+      stroke-dasharray var(--lyra-transition-base),
+      stroke-dashoffset var(--lyra-transition-base);
+  }
+  :host([variant='ring']) [part='segment'][data-tone='brand'] {
+    stroke: var(--lyra-color-brand);
+  }
+  :host([variant='ring']) [part='segment'][data-tone='success'] {
+    stroke: var(--lyra-color-success);
+  }
+  :host([variant='ring']) [part='segment'][data-tone='warning'] {
+    stroke: var(--lyra-color-warning);
+  }
+  :host([variant='ring']) [part='segment'][data-tone='danger'] {
+    stroke: var(--lyra-color-danger);
+  }
+  :host([variant='ring']) [part='label'] {
+    text-anchor: middle;
+    fill: var(--lyra-color-text-quiet);
+    font-size: 0.625rem;
+    text-transform: uppercase;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='segment'] {
+      transition: none !important;
+    }
+  }
+`;

package/dist/components/conversation-item/conversation-item.d.ts

@@ -0,0 +1,125 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface ConversationItemRenameDetail {
+    title: string;
+}
+/**
+ * `<lyra-conversation-item>` — a selectable row representing one chat
+ * session in a history sidebar list. Usable standalone or as the
+ * `renderItem()` payload of a sibling virtualized-list component; this
+ * module has no dependency on that (or any) other component.
+ *
+ * Takes `title`/`excerpt`/`timestamp` as individual primitive props rather
+ * than one opaque bound object, deliberately consistent with how
+ * `<lyra-chat-message>` takes individual props instead of a single
+ * `.message` blob -- every other component in this family follows that
+ * shape, so this one does too even though a single bound `.session` object
+ * would also have been a reasonable design.
+ *
+ * Identifying *which* session a `lyra-select` click/keypress was about: this
+ * reuses the platform's own `id` attribute (every element already has one)
+ * rather than inventing a second, differently-named id-carrying prop --
+ * consumers already have the event's `target`/`currentTarget` (and thus
+ * `.id`), the same reasoning `<lyra-attachment-chip>` documents for its own
+ * identically-shaped choice. `lyra-select` therefore carries no detail
+ * payload at all.
+ *
+ * `role="button"` on `[part="option"]` so the item has valid semantics both
+ * standalone and when placed in a larger history-list layout. A conversation
+ * row activates one current session; it is not itself a listbox option and
+ * therefore does not require a particular owner role.
+ *
+ * `role="button"` forbids focusable
+ * descendants -- verified against axe-core's `nested-interactive` rule,
+ * which flags it. That's why the rename button and the `actions` slot are
+ * rendered as DOM *siblings* of `[part="option"]` (both inside
+ * `[part="base"]`) rather than nested inside it: `[part="option"]` only ever
+ * contains plain text/`<time>` content. The in-place rename `<input>` is the
+ * same problem one level deeper -- it replaces the title *inside*
+ * `[part="option"]` while renaming -- so `[part="option"]` sheds its
+ * `role`/`tabindex`/`aria-current`/`aria-label` entirely for the duration
+ * of an edit. A row mid-edit is a text field, so suspending the button
+ * semantics is also the more accurate
+ * description of what's on screen.
+ *
+ * Inline rename is a dedicated pencil/edit icon button (not a double-click
+ * on the title) -- double-click has no keyboard/screen-reader equivalent
+ * and would silently swallow the row's own single-click `lyra-select`,
+ * whereas a button is independently focusable, has its own accessible name,
+ * and composes cleanly with click-to-select.
+ *
+ * @customElement lyra-conversation-item
+ * @slot actions - Overflow/icon-button controls (e.g. a future pin/delete
+ * button) rendered at the trailing edge of the row. `lyra-menu` doesn't
+ * exist yet in this phase, so this is a plain slot for whatever a consumer
+ * wants to put there today.
+ * @event lyra-select - The row was activated: a click on `[part="option"]`
+ * (i.e. outside the rename button and the `actions` slot), or Enter/Space
+ * while it's focused -- in both cases only while not currently renaming. No
+ * detail payload -- see the class doc's "Identifying which session" note.
+ * @event lyra-rename - An in-place rename was committed (Enter, or blur
+ * while editing). `detail: { title }`. Does not mutate `title` itself --
+ * this is a controlled component, the same convention
+ * `<lyra-chat-message>` follows by not clearing its own state on retry; the
+ * consumer applies the new title once it's actually persisted. Not fired
+ * when the trimmed draft is empty or unchanged from the original `title`
+ * (that's treated as an implicit cancel).
+ * @csspart base - The outer row wrapper (plain, no ARIA role) laying out `[part="option"]`, the rename button, and `actions`.
+ * @csspart option - The selectable region (`role="button"`, removed while renaming -- see the class doc). Wraps `content` and `timestamp`.
+ * @csspart content - Wrapper around the title and excerpt.
+ * @csspart title - The title text, shown while not renaming.
+ * @csspart title-input - The in-place rename `<input>`, shown only while renaming.
+ * @csspart rename-button - The pencil/edit affordance that starts a rename (only rendered while `editable` and not already renaming).
+ * @csspart excerpt - The last-message preview snippet. Only rendered when `excerpt` is non-empty.
+ * @csspart timestamp - The formatted `timestamp`, rendered in a `<time>` element. Only rendered when `timestamp` is set and valid.
+ * @csspart actions - The wrapper around the `actions` slot.
+ */
+export declare class LyraConversationItem extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The session's display title. */
+    title: string;
+    /** A short preview snippet of the last message. Omit for no excerpt line. */
+    excerpt: string;
+    /** When the session was last active. 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) -- mirrors
+     *  `<lyra-chat-message>`'s identical `timestamp` prop. */
+    timestamp?: Date | string;
+    /** Overrides the default absolute-time 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-chat-message>`'s identical `formatTimestamp`). */
+    formatTimestamp?: (date: Date) => string;
+    /** Whether this is the currently-selected/open session. Drives the
+     *  brand-quiet background treatment. */
+    active: boolean;
+    /** Whether inline-rename is available at all. When `false`, the rename
+     *  button never renders and the row can never enter its editing state. If
+     *  flipped to `false` while a rename is already open, the in-progress edit
+     *  is cancelled (discarded, like Escape) rather than left committable. */
+    editable: boolean;
+    private renaming;
+    private draftTitle;
+    private hasActionsSlot;
+    private titleInput?;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private get normalizedTimestamp();
+    private select;
+    private startRename;
+    private commitRename;
+    private cancelRename;
+    private onOptionClick;
+    private onOptionKeyDown;
+    private onRenameButtonClick;
+    private onTitleInputChange;
+    private onTitleInputKeyDown;
+    private onTitleInputBlur;
+    private onActionsSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-conversation-item': LyraConversationItem;
+    }
+}