@aceshooting/lyra-ui 2.1.0 → 2.2.0

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

@@ -0,0 +1,158 @@
+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 { 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);
+//# sourceMappingURL=context-meter.class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context-meter.class.js","sourceRoot":"","sources":["../../../src/components/context-meter/context-meter.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAA+C,MAAM,KAAK,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAmBnD,0EAA0E;AAC1E,2EAA2E;AAC3E,uEAAuE;AACvE,2EAA2E;AAC3E,uCAAuC;AACvC,MAAM,MAAM,GAAG,EAAE,CAAC;AAClB,MAAM,MAAM,GAAG,EAAE,CAAC;AAClB,MAAM,MAAM,GAAG,EAAE,CAAC;AAClB,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;AAE3C,SAAS,WAAW,CAAC,CAAS;IAC5B,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;AACzD,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IAAjD;;QAGE,yFAAyF;QACzD,aAAQ,GAA0B,EAAE,CAAC;QAErE,4FAA4F;QAChE,UAAK,GAAG,CAAC,CAAC;QAET,YAAO,GAAwB,KAAK,CAAC;QAElE,sEAAsE;QAC1D,UAAK,GAAG,EAAE,CAAC;IAoGzB,CAAC;aA/GQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;IAa7C,6FAA6F;IAC7F,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1F,CAAC;IAED;;yFAEqF;IAC7E,MAAM;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;QACvD,IAAI,KAAK,IAAI,CAAC;YAAE,OAAO,EAAE,CAAC;QAC1B,MAAM,GAAG,GAAmB,EAAE,CAAC;QAC/B,IAAI,UAAU,GAAG,CAAC,CAAC;QACnB,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;YACxD,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,CAAC;YAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,KAAK,EAAE,SAAS,CAAC,CAAC;YAC/C,UAAU,IAAI,KAAK,CAAC;YACpB,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/B,CAAC;QACD,OAAO,GAAG,CAAC;IACb,CAAC;IAED,IAAY,OAAO;QACjB,6EAA6E;QAC7E,sEAAsE;QACtE,+EAA+E;QAC/E,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;QAC5D,MAAM,cAAc,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QAC9F,MAAM,IAAI,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;QACzC,MAAM,KAAK,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9D,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,OAAO,CAAC;QACnE,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,MAAM,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;IAC3D,CAAC;IAES,UAAU;QAClB,yEAAyE;QACzE,wEAAwE;QACxE,uEAAuE;QACvE,sEAAsE;QACtE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC;IAEO,SAAS;QACf,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,wCAAwC,IAAI,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO;;YAEnF,MAAM,CAAC,GAAG,CACV,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;;4BAGZ,OAAO,CAAC,IAAI,IAAI,SAAS;wBAC7B,GAAG,OAAO,CAAC,KAAK,KAAK,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;wBACjD,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;;aAElE,CACF;;;KAGN,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,IAAI,UAAU,GAAG,CAAC,CAAC;QACnB,MAAM,IAAI,GAAwB,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;YAClE,MAAM,MAAM,GAAG,KAAK,GAAG,aAAa,CAAC;YACrC,MAAM,UAAU,GAAG,CAAC,UAAU,GAAG,aAAa,CAAC;YAC/C,UAAU,IAAI,KAAK,CAAC;YACpB,OAAO,GAAG,CAAA;;;sBAGM,OAAO,CAAC,IAAI,IAAI,SAAS;eAChC,MAAM;eACN,MAAM;cACP,MAAM;yBACK,MAAM;6BACF,GAAG,MAAM,IAAI,aAAa,GAAG,MAAM,EAAE;8BACpC,UAAU;kCACN,MAAM,IAAI,MAAM;kBAChC,GAAG,OAAO,CAAC,KAAK,KAAK,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;OAC5D,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAA;;kCAEmB,MAAM,OAAO,MAAM,MAAM,MAAM,iBAAiB,MAAM;UAC9E,IAAI;UACJ,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAA,wBAAwB,MAAM,MAAM,MAAM,GAAG,CAAC,uBAAuB,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO;;KAEvH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;IACxE,CAAC;CACF;AA5GiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDAAsC;AAGzC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAW;AAET;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAsC;AAGtD;IAAX,QAAQ,EAAE;+CAAY"}

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

@@ -1,53 +1,2 @@
-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;
-    }
-}
+export * from './context-meter.class.js';
+//# sourceMappingURL=context-meter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context-meter.d.ts","sourceRoot":"","sources":["../../../src/components/context-meter/context-meter.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

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

@@ -1,159 +1,5 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, svg, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './context-meter.class.js';
+import { LyraContextMeter } from './context-meter.class.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);
+//# sourceMappingURL=context-meter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context-meter.js","sourceRoot":"","sources":["../../../src/components/context-meter/context-meter.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/context-meter/context-meter.styles.d.ts

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

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

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

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

@@ -6,8 +6,8 @@ export const styles = css `
   }
   :host([variant='ring']) {
     display: inline-block;
-    inline-size: 8em;
-    block-size: 8em;
+    inline-size: var(--lyra-size-8em);
+    block-size: var(--lyra-size-8em);
   }
 
   [part='base'] {
@@ -21,7 +21,7 @@ export const styles = css `
   }
 
   [part='label'] {
-    font-size: 0.75rem;
+    font-size: var(--lyra-font-size-xs);
     color: var(--lyra-color-text-quiet);
     font-family: var(--lyra-font);
   }
@@ -32,7 +32,7 @@ export const styles = css `
     display: flex;
     align-items: stretch;
     overflow: hidden;
-    block-size: 0.5rem;
+    block-size: var(--lyra-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
@@ -53,7 +53,7 @@ export const styles = css `
      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);
+    border-inline-start: var(--lyra-border-width-thin) solid var(--lyra-color-surface);
   }
   [part='segment'][data-tone='brand'] {
     background: var(--lyra-color-brand);
@@ -102,7 +102,7 @@ export const styles = css `
   :host([variant='ring']) [part='label'] {
     text-anchor: middle;
     fill: var(--lyra-color-text-quiet);
-    font-size: 0.625rem;
+    font-size: var(--lyra-font-size-2xs);
     text-transform: uppercase;
   }
 
@@ -112,3 +112,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=context-meter.styles.js.map

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

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

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

@@ -0,0 +1,127 @@
+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 (for example a pin/delete
+ * button or a `lyra-menu` trigger) rendered at the trailing edge of the row.
+ * @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 interface LyraConversationItemEventMap {
+    'lyra-select': CustomEvent<undefined>;
+}
+export declare class LyraConversationItem extends LyraElement<LyraConversationItemEventMap> {
+    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;
+    }
+}
+//# sourceMappingURL=conversation-item.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-item.class.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-item/conversation-item.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAA0B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG7D,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AAiDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,aAAa,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACvC;AACD,qBAAa,oBAAqB,SAAQ,WAAW,CAAC,4BAA4B,CAAC;IACjF,MAAM,CAAC,MAAM,iCAAgC;IAE7C,mCAAmC;IACvB,KAAK,SAAM;IAEvB,6EAA6E;IACjE,OAAO,SAAM;IAEzB;;;8DAG0D;IAC1B,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAE1D;;;kFAG8E;IAC9C,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IAEzE;4CACwC;IACI,MAAM,UAAS;IAE3D;;;8EAG0E;IAC9B,QAAQ,UAAQ;IAEnD,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,cAAc,CAAS;IAET,OAAO,CAAC,UAAU,CAAC,CAAmB;IAErE,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAWlD;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAM/C;IAED,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,aAAa,CAMnB;IAEF,OAAO,CAAC,eAAe,CAOrB;IAEF,OAAO,CAAC,mBAAmB,CAKzB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,mBAAmB,CAgBzB;IAEF,OAAO,CAAC,gBAAgB,CAOtB;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF,MAAM,IAAI,cAAc,CAqDvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}