@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/generation-status/generation-status.d.ts

@@ -1,117 +1,2 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-/**
- * `<lyra-generation-status>` — a compact, ticking status readout shown
- * alongside an in-progress AI response: elapsed time, token count, and
- * token-throughput, plus a built-in Stop button. Renders as e.g.
- * `12.3s · 340 tokens · 27 tok/s [Stop]`.
- *
- * This is deliberately a *different* concern than the already-landed
- * `<lyra-stream-status>`: that component is about transport/connection
- * health (idle/connecting/streaming/stalled, heartbeat-aware stall
- * detection), while this one is a user-facing metrics readout for a
- * generation that both components' hosts typically already know is
- * healthily in progress. Neither imports or depends on the other, and a
- * consumer building a full generation UI is expected to compose both side by
- * side rather than pick one.
- *
- * `active` drives an internal ~1s `setInterval` ticker that recomputes the
- * elapsed-time display (a plain interval is sufficient here -- unlike
- * `<lyra-stream-status>`'s stall timer, this never needs to be armed with a
- * precise deadline, only to refresh a display roughly once a second). The
- * elapsed clock's start instant is `started-at` when set (an epoch-ms
- * timestamp -- lets a host that already knows exactly when generation began,
- * e.g. from its own request-dispatch timestamp, feed that in directly and
- * survive this component being created slightly later than that instant);
- * when `started-at` is unset, this component falls back to capturing
- * `Date.now()` itself at the moment `active` flips from `false`/unset to
- * `true`, so the ticker still starts from a sensible instant with zero
- * required host bookkeeping. The ticker is cleared whenever `active` becomes
- * `false` and on disconnect; the display is left at whatever it last showed
- * (frozen, not reset to zero) -- a static "Generated in 12.3s" reads better
- * as a completed-state summary than the readout blanking out the instant
- * generation ends.
- *
- * `tokens-per-second`, when the host supplies it directly (e.g. from its own
- * smoothed/windowed rate calculation), is always used as-is. When omitted,
- * this component derives a live figure itself from `token-count` divided by
- * elapsed seconds -- but only once at least one full second of elapsed time
- * has accumulated, since dividing by a sub-second elapsed window can produce
- * wildly-swinging, misleading early readings (e.g. 3 tokens in 40ms reading
- * as "75 tok/s"). A host that wants a stable figure from the very first tick
- * should supply `tokens-per-second` itself. The tokens segment and the
- * throughput segment are independently optional: either, both, or neither
- * may render depending on what's available, per each property's own doc.
- *
- * Accessibility: this readout ticks roughly once per second while active,
- * which is exactly the kind of high-frequency update
- * `<lyra-live-region>`/`Announcer` (`../../internal/announcer.js`) exists to
- * *prevent* from being read aloud verbatim -- routing a per-second numeric
- * tick through even a throttled announcer would still narrate a new number
- * to a screen-reader user roughly once every throttle window for as long as
- * generation runs, which is noise, not information. This component
- * therefore carries no `role="status"`/`aria-live` of its own and never
- * announces anything; a host that wants generation-start/-end announced
- * should pair this with something that announces state *transitions* (e.g.
- * `<lyra-typing-indicator>`'s mount-time announcement), not this ticking
- * readout. The one genuinely actionable, infrequent control here -- the Stop
- * button -- gets a normal, always-present `aria-label`, no different from
- * any other icon-only button in this library.
- *
- * @customElement lyra-generation-status
- * @event lyra-stop - The built-in Stop button was clicked. No detail payload.
- * @csspart base - The root inline layout container.
- * @csspart elapsed - The elapsed-time segment, e.g. `"12.3s"`. Always rendered (reads `"0.0s"` before the component has ever been active).
- * @csspart tokens - The token-count segment, e.g. `"340 tokens"`. Only rendered when `token-count` is set.
- * @csspart throughput - The throughput segment, e.g. `"27 tok/s"`. Only rendered when a value is available (host-supplied or derived; see the class doc).
- * @csspart stop-button - The built-in Stop button. Only rendered while `show-stop` is true.
- */
-export declare class LyraGenerationStatus extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** Whether generation is currently in progress. The elapsed-time ticker
-     *  runs only while this is `true` (see the class doc). */
-    active: boolean;
-    /** Epoch-ms timestamp of when generation began. Optional -- when unset (or
-     *  when set to a value that fails to parse as a finite number, e.g. an
-     *  ISO-8601 date string) while `active` is `true`, this component captures
-     *  the current time itself the moment `active` becomes `true` and counts
-     *  from there instead (see the class doc). */
-    startedAt?: number;
-    /** Running token count so far. Omitted from the readout entirely (no
-     *  `tokens` segment) while unset. */
-    tokenCount?: number;
-    /** Host-computed tokens/sec figure, used as-is when set. When unset, this
-     *  component derives a live figure from `token-count` and elapsed time
-     *  itself once one is available -- see the class doc for the exact rule
-     *  and why. */
-    tokensPerSecond?: number;
-    /** Whether the built-in Stop button renders at all. Defaults to `true`.
-     *  Uses {@link showStopConverter} rather than Lit's default presence-based
-     *  `type: Boolean` handling, so a plain-HTML consumer with no way to write
-     *  a `.showStop` property binding can still turn this off with
-     *  `show-stop="false"`; a Lit template can do the same with either that
-     *  attribute string or a `.showStop=${false}` property binding. */
-    showStop: boolean;
-    private elapsedMs;
-    private tickTimer?;
-    private fallbackStartMs?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected willUpdate(changed: PropertyValues): void;
-    protected updated(changed: PropertyValues): void;
-    private startTicker;
-    private stopTicker;
-    private get validStartedAt();
-    private computeElapsedMs;
-    /** `tokens-per-second` when set; otherwise a derived figure once enough
-     *  elapsed time has accumulated for it to be meaningful; otherwise
-     *  `undefined` (the throughput segment doesn't render at all). */
-    private get effectiveTokensPerSecond();
-    private onStopClick;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-generation-status': LyraGenerationStatus;
-    }
-}
+export * from './generation-status.class.js';
+//# sourceMappingURL=generation-status.d.ts.map

package/dist/components/generation-status/generation-status.d.ts.map

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

package/dist/components/generation-status/generation-status.js

@@ -1,327 +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 } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './generation-status.class.js';
+import { LyraGenerationStatus } from './generation-status.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './generation-status.styles.js';
-// Mirrors the shared icon set's viewBox/stroke conventions
-// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding a
-// stop 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. Identical shape to `<lyra-chat-composer>`'s own
-// local `stopIcon()` (the conventional filled-square "stop generating"
-// glyph), duplicated rather than imported since these are two independently
-// consumable components with no dependency between them.
-function stopIcon() {
-    return svg `
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      stroke="none"
-      aria-hidden="true"
-      focusable="false"
-    ><rect x="6" y="6" width="12" height="12" rx="1.5"></rect></svg>
-  `;
-}
-/** `4200` -> `"4.2s"`; `65000` -> `"1m 5s"`. Sub-minute durations get one
- *  decimal place of seconds (the common case: most single generations finish
- *  in single-digit seconds, where whole-second precision would look static
- *  between ticks); once a full minute is reached, `"Xm Ys"` reads better than
- *  a fractional-minute or a 3-4 digit seconds count. The `59.95` cutoff (not
- *  a plain `60`) exists so a value that *rounds* to `"60.0s"` at one-decimal
- *  precision is displayed as `"1m 0s"` instead -- without it, the two
- *  branches could each independently round the same instant to a different
- *  minute. */
-function formatElapsed(ms) {
-    const totalSeconds = Math.max(0, ms) / 1000;
-    if (totalSeconds < 59.95) {
-        return `${(Math.round(totalSeconds * 10) / 10).toFixed(1)}s`;
-    }
-    const wholeSeconds = Math.round(totalSeconds);
-    const minutes = Math.floor(wholeSeconds / 60);
-    const seconds = wholeSeconds % 60;
-    return `${minutes}m ${seconds}s`;
-}
-/** `340` -> `"340 tokens"`; `1` -> `"1 token"`. Same plain singular/plural
- *  ternary `<lyra-json-viewer>`'s array/object summary already uses -- this
- *  library has no general i18n/pluralization system (see
- *  `<lyra-source-list>`'s class doc for that stance), but a two-way English
- *  ternary for one fixed noun is a different, much smaller thing than a
- *  general pluralization engine, and reads better than an unconditional
- *  "1 tokens". */
-function formatTokenCount(count) {
-    const rounded = Math.max(0, Math.round(count));
-    return `${rounded} ${rounded === 1 ? 'token' : 'tokens'}`;
-}
-/** `27.4` -> `"27 tok/s"`; `3.2` -> `"3.2 tok/s"`. Same shape as this file's
- *  `formatElapsed`/`<lyra-tool-call-chip>`'s `formatDuration`: the low end of
- *  the range (where a whole-number rounding would flatten every early
- *  reading to the same "0" or "1") gets one decimal place, while anything at
- *  or above 10 tok/s rounds to a whole number, which is plenty precise for a
- *  live-updating throughput figure. */
-function formatThroughput(value) {
-    const clamped = Math.max(0, value);
-    const rounded = clamped < 10 ? Math.round(clamped * 10) / 10 : Math.round(clamped);
-    return `${rounded} tok/s`;
-}
-/**
- * String-aware boolean attribute converter for `show-stop`. Lit's built-in
- * `type: Boolean` converter is presence-based -- the attribute's mere
- * presence (regardless of its string value) maps to `true`, so a plain-
- * markup consumer writing the literal `show-stop="false"` would actually get
- * the button *shown*, the opposite of what that string reads as (the same
- * bug class `<lyra-streaming-text>`'s `optionalBooleanConverter` and
- * `<lyra-line-chart>`'s `WithoutBeginAtZero` story both document). Unlike
- * `<lyra-streaming-text>`'s tri-state converter, this property's default is
- * `true`, not "unset" -- so this one only needs two states: attribute absent
- * (or removed) -> `true` (the default); `show-stop="false"` -> `false`;
- * anything else present (no value, `="true"`, ...) -> `true`.
- */
-const showStopConverter = {
-    fromAttribute(value) {
-        return value !== 'false';
-    },
-    toAttribute(value) {
-        // `true` is this property's default, so there's nothing worth reflecting
-        // for it; only the non-default `false` needs an attribute at all.
-        return value ? null : 'false';
-    },
-};
-/**
- * `<lyra-generation-status>` — a compact, ticking status readout shown
- * alongside an in-progress AI response: elapsed time, token count, and
- * token-throughput, plus a built-in Stop button. Renders as e.g.
- * `12.3s · 340 tokens · 27 tok/s [Stop]`.
- *
- * This is deliberately a *different* concern than the already-landed
- * `<lyra-stream-status>`: that component is about transport/connection
- * health (idle/connecting/streaming/stalled, heartbeat-aware stall
- * detection), while this one is a user-facing metrics readout for a
- * generation that both components' hosts typically already know is
- * healthily in progress. Neither imports or depends on the other, and a
- * consumer building a full generation UI is expected to compose both side by
- * side rather than pick one.
- *
- * `active` drives an internal ~1s `setInterval` ticker that recomputes the
- * elapsed-time display (a plain interval is sufficient here -- unlike
- * `<lyra-stream-status>`'s stall timer, this never needs to be armed with a
- * precise deadline, only to refresh a display roughly once a second). The
- * elapsed clock's start instant is `started-at` when set (an epoch-ms
- * timestamp -- lets a host that already knows exactly when generation began,
- * e.g. from its own request-dispatch timestamp, feed that in directly and
- * survive this component being created slightly later than that instant);
- * when `started-at` is unset, this component falls back to capturing
- * `Date.now()` itself at the moment `active` flips from `false`/unset to
- * `true`, so the ticker still starts from a sensible instant with zero
- * required host bookkeeping. The ticker is cleared whenever `active` becomes
- * `false` and on disconnect; the display is left at whatever it last showed
- * (frozen, not reset to zero) -- a static "Generated in 12.3s" reads better
- * as a completed-state summary than the readout blanking out the instant
- * generation ends.
- *
- * `tokens-per-second`, when the host supplies it directly (e.g. from its own
- * smoothed/windowed rate calculation), is always used as-is. When omitted,
- * this component derives a live figure itself from `token-count` divided by
- * elapsed seconds -- but only once at least one full second of elapsed time
- * has accumulated, since dividing by a sub-second elapsed window can produce
- * wildly-swinging, misleading early readings (e.g. 3 tokens in 40ms reading
- * as "75 tok/s"). A host that wants a stable figure from the very first tick
- * should supply `tokens-per-second` itself. The tokens segment and the
- * throughput segment are independently optional: either, both, or neither
- * may render depending on what's available, per each property's own doc.
- *
- * Accessibility: this readout ticks roughly once per second while active,
- * which is exactly the kind of high-frequency update
- * `<lyra-live-region>`/`Announcer` (`../../internal/announcer.js`) exists to
- * *prevent* from being read aloud verbatim -- routing a per-second numeric
- * tick through even a throttled announcer would still narrate a new number
- * to a screen-reader user roughly once every throttle window for as long as
- * generation runs, which is noise, not information. This component
- * therefore carries no `role="status"`/`aria-live` of its own and never
- * announces anything; a host that wants generation-start/-end announced
- * should pair this with something that announces state *transitions* (e.g.
- * `<lyra-typing-indicator>`'s mount-time announcement), not this ticking
- * readout. The one genuinely actionable, infrequent control here -- the Stop
- * button -- gets a normal, always-present `aria-label`, no different from
- * any other icon-only button in this library.
- *
- * @customElement lyra-generation-status
- * @event lyra-stop - The built-in Stop button was clicked. No detail payload.
- * @csspart base - The root inline layout container.
- * @csspart elapsed - The elapsed-time segment, e.g. `"12.3s"`. Always rendered (reads `"0.0s"` before the component has ever been active).
- * @csspart tokens - The token-count segment, e.g. `"340 tokens"`. Only rendered when `token-count` is set.
- * @csspart throughput - The throughput segment, e.g. `"27 tok/s"`. Only rendered when a value is available (host-supplied or derived; see the class doc).
- * @csspart stop-button - The built-in Stop button. Only rendered while `show-stop` is true.
- */
-export class LyraGenerationStatus extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Whether generation is currently in progress. The elapsed-time ticker
-         *  runs only while this is `true` (see the class doc). */
-        this.active = false;
-        /** Whether the built-in Stop button renders at all. Defaults to `true`.
-         *  Uses {@link showStopConverter} rather than Lit's default presence-based
-         *  `type: Boolean` handling, so a plain-HTML consumer with no way to write
-         *  a `.showStop` property binding can still turn this off with
-         *  `show-stop="false"`; a Lit template can do the same with either that
-         *  attribute string or a `.showStop=${false}` property binding. */
-        this.showStop = true;
-        // Recomputed on activation and on every ~1s tick; frozen (not reset) once
-        // `active` goes false -- see the class doc's "ticker" paragraph.
-        this.elapsedMs = 0;
-        this.onStopClick = () => {
-            this.emit('lyra-stop');
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    // A re-parenting host (e.g. a virtualized/reordering list) disconnects and
-    // reconnects this element without ever toggling `active` -- `willUpdate`/
-    // `updated` only react to *changes* of `active`, so with no override here
-    // a still-active element would come back with `disconnectedCallback`'s
-    // cleared ticker never restarted, freezing the readout even though
-    // `active` (still `true`) says generation is ongoing. Restarting from
-    // `computeElapsedMs()` (rather than resuming a stale in-flight interval)
-    // matches how `startTicker()` already re-baselines on every fresh start.
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.active) {
-            this.elapsedMs = this.computeElapsedMs();
-            this.startTicker();
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.stopTicker();
-    }
-    // Recomputing `elapsedMs` here (rather than in `updated()`) matters: Lit
-    // runs `willUpdate()` *before* render, as part of the same update pass, so
-    // a property set here is picked up by this same render with no extra
-    // cycle. Setting a reactive property from inside `updated()` instead would
-    // schedule a *second* update after the first has already completed (Lit
-    // warns about exactly this in dev mode) -- meaning a caller doing
-    // `el.active = true; await el.updateComplete;` would still observe the
-    // stale pre-activation `elapsedMs` once that first promise resolves.
-    //
-    // `changed.has('active')` fires on the very first update too when the
-    // element mounts already `active` (the parsed-attribute/property value
-    // differs from the `false` field-initializer default that was seen first)
-    // -- same mechanism `<lyra-stream-status>`'s `onPhaseChanged` relies on to
-    // arm its stall timer on a `phase="streaming"` mount, so mounting this
-    // component already active correctly seeds `elapsedMs` with no separate
-    // first-update special case needed.
-    willUpdate(changed) {
-        if (changed.has('active') && this.active) {
-            if (this.validStartedAt == null)
-                this.fallbackStartMs = Date.now();
-            this.elapsedMs = this.computeElapsedMs();
-        }
-        else if (this.active && changed.has('startedAt')) {
-            // A `started-at` that arrives (or changes) mid-generation should
-            // immediately re-baseline the displayed elapsed time rather than wait
-            // up to ~1s for the next tick.
-            this.elapsedMs = this.computeElapsedMs();
-        }
-    }
-    // Starting/stopping the interval is a genuine side effect (not a reactive-
-    // property write), so it belongs in `updated()`, unlike the `elapsedMs`
-    // computation above.
-    updated(changed) {
-        if (changed.has('active')) {
-            if (this.active)
-                this.startTicker();
-            else
-                this.stopTicker();
-        }
-    }
-    startTicker() {
-        this.stopTicker();
-        // Setting `elapsedMs` here (unlike inside `updated()`, see that method's
-        // doc) is fine: an interval callback is a wholly separate future task,
-        // not a continuation of an in-progress Lit update, so this starts a
-        // normal, self-contained update cycle rather than a same-tick "second
-        // update" scheduled mid-render.
-        this.tickTimer = setInterval(() => {
-            this.elapsedMs = this.computeElapsedMs();
-        }, 1000);
-    }
-    stopTicker() {
-        if (this.tickTimer !== undefined) {
-            clearInterval(this.tickTimer);
-            this.tickTimer = undefined;
-        }
-    }
-    // `startedAt` is host-supplied and, unlike `tokenCount`/`tokensPerSecond`
-    // (both already guarded at their read sites), had no `Number.isFinite`
-    // check of its own -- a non-numeric `started-at` attribute (e.g. an
-    // ISO-8601 date string that failed the `type: Number` conversion, landing
-    // as `NaN`) would flow straight into `Date.now() - start`, permanently
-    // rendering the literal text "NaNm NaNs" with no fallback or recovery.
-    // Treating an invalid value the same as "unset" here restores this
-    // property's own documented fallback-clock behavior instead.
-    get validStartedAt() {
-        return this.startedAt != null && Number.isFinite(this.startedAt) ? this.startedAt : undefined;
-    }
-    computeElapsedMs() {
-        const start = this.validStartedAt ?? this.fallbackStartMs;
-        return start == null ? 0 : Math.max(0, Date.now() - start);
-    }
-    /** `tokens-per-second` when set; otherwise a derived figure once enough
-     *  elapsed time has accumulated for it to be meaningful; otherwise
-     *  `undefined` (the throughput segment doesn't render at all). */
-    get effectiveTokensPerSecond() {
-        if (this.tokensPerSecond != null && Number.isFinite(this.tokensPerSecond)) {
-            return this.tokensPerSecond;
-        }
-        if (this.tokenCount != null && Number.isFinite(this.tokenCount)) {
-            const elapsedSeconds = this.elapsedMs / 1000;
-            if (elapsedSeconds >= 1)
-                return this.tokenCount / elapsedSeconds;
-        }
-        return undefined;
-    }
-    render() {
-        const hasTokens = this.tokenCount != null && Number.isFinite(this.tokenCount);
-        const throughput = this.effectiveTokensPerSecond;
-        const hasThroughput = throughput !== undefined;
-        return html `
-      <div part="base">
-        <span part="elapsed">${formatElapsed(this.elapsedMs)}</span>
-        ${hasTokens ? html `<span part="tokens">${formatTokenCount(this.tokenCount)}</span>` : nothing}
-        ${hasThroughput ? html `<span part="throughput">${formatThroughput(throughput)}</span>` : nothing}
-        ${this.showStop
-            ? html `
-              <button part="stop-button" type="button" aria-label="Stop generating" @click=${this.onStopClick}>
-                ${stopIcon()}
-              </button>
-            `
-            : nothing}
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraGenerationStatus.prototype, "active", void 0);
-__decorate([
-    property({ type: Number, attribute: 'started-at' })
-], LyraGenerationStatus.prototype, "startedAt", void 0);
-__decorate([
-    property({ type: Number, attribute: 'token-count' })
-], LyraGenerationStatus.prototype, "tokenCount", void 0);
-__decorate([
-    property({ type: Number, attribute: 'tokens-per-second' })
-], LyraGenerationStatus.prototype, "tokensPerSecond", void 0);
-__decorate([
-    property({ attribute: 'show-stop', converter: showStopConverter })
-], LyraGenerationStatus.prototype, "showStop", void 0);
-__decorate([
-    state()
-], LyraGenerationStatus.prototype, "elapsedMs", void 0);
 defineElement('generation-status', LyraGenerationStatus);
+//# sourceMappingURL=generation-status.js.map

package/dist/components/generation-status/generation-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generation-status.js","sourceRoot":"","sources":["../../../src/components/generation-status/generation-status.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC"}

package/dist/components/generation-status/generation-status.styles.d.ts

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

package/dist/components/generation-status/generation-status.styles.d.ts.map

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

package/dist/components/generation-status/generation-status.styles.js

@@ -10,8 +10,8 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     max-inline-size: 100%;
-    font-size: 0.8125rem;
-    line-height: 1.3;
+    font-size: var(--lyra-font-size-sm);
+    line-height: var(--lyra-line-height-snug);
     color: var(--lyra-color-text-quiet);
   }
 
@@ -38,7 +38,7 @@ export const styles = css `
   [part='tokens']::before,
   [part='throughput']::before {
     content: '·';
-    margin-inline: 0.4em;
+    margin-inline: var(--lyra-size-0-4em);
     opacity: 0.6;
   }
 
@@ -49,11 +49,11 @@ export const styles = css `
     justify-content: center;
     /* Same "shrink the shared icon-button token for a compact inline
        control" idiom as lyra-attachment-chip's retry-/remove-button. */
-    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
-    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
+    min-inline-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-75rem));
+    min-block-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-75rem));
     margin-inline-start: var(--lyra-space-s);
     padding: 0;
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: 50%;
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text);
@@ -82,3 +82,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=generation-status.styles.js.map

package/dist/components/generation-status/generation-status.styles.js.map

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

package/dist/components/graph/graph-loader.d.ts

@@ -1,16 +1,14 @@
-import type * as ForceModule from 'd3-force';
-import type * as DragModule from 'd3-drag';
-import type * as ZoomModule from 'd3-zoom';
-import type * as SelectionModule from 'd3-selection';
+import type { OptionalPeerApi } from '../../internal/optional-peer-types.js';
+type D3Module = OptionalPeerApi;
 export interface D3Modules {
-    forceSimulation: typeof ForceModule.forceSimulation;
-    forceLink: typeof ForceModule.forceLink;
-    forceManyBody: typeof ForceModule.forceManyBody;
-    forceCenter: typeof ForceModule.forceCenter;
-    forceCollide: typeof ForceModule.forceCollide;
-    drag: typeof DragModule.drag;
-    zoom: typeof ZoomModule.zoom;
-    select: typeof SelectionModule.select;
+    forceSimulation: <Node extends D3Module = D3Module>(nodes?: Iterable<Node>) => D3Module;
+    forceLink: <Node extends D3Module = D3Module, Link extends D3Module = D3Module>(links?: Iterable<Link>) => D3Module;
+    forceManyBody: <Node extends D3Module = D3Module>() => D3Module;
+    forceCenter: (x?: number, y?: number) => D3Module;
+    forceCollide: <Node extends D3Module = D3Module>(radius?: number | ((node: Node) => number)) => D3Module;
+    drag: <Element extends D3Module = D3Module, Datum extends D3Module = D3Module>() => D3Module;
+    zoom: <Element extends D3Module = D3Module, Datum extends D3Module = D3Module>() => D3Module;
+    select: <Element extends D3Module = D3Module, Datum extends D3Module = D3Module>(node?: Element) => D3Module;
 }
 /**
  * Resolves the optional peer dependencies `d3-force`/`d3-drag`/`d3-zoom`/
@@ -19,10 +17,12 @@ export interface D3Modules {
  * caught-error warning path are directly testable without needing to
  * actually uninstall any of the four packages.
  */
-export declare function loadD3Modules(importForce?: () => Promise<typeof ForceModule>, importDrag?: () => Promise<typeof DragModule>, importZoom?: () => Promise<typeof ZoomModule>, importSelection?: () => Promise<typeof SelectionModule>): Promise<D3Modules | null>;
+export declare function loadD3Modules(importForce?: () => Promise<D3Module>, importDrag?: () => Promise<D3Module>, importZoom?: () => Promise<D3Module>, importSelection?: () => Promise<D3Module>): Promise<D3Modules | null>;
 /**
  * Lazily loads the d3 peer dependencies (see `loadD3Modules()`) once per
  * page. Resolves to `null` if they aren't installed — mirrors
  * `<lyra-flag>`'s peer-dependency pattern.
  */
 export declare function loadD3(): Promise<D3Modules | null>;
+export {};
+//# sourceMappingURL=graph-loader.d.ts.map

package/dist/components/graph/graph-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-loader.d.ts","sourceRoot":"","sources":["../../../src/components/graph/graph-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAE7E,KAAK,QAAQ,GAAG,eAAe,CAAC;AAEhC,MAAM,WAAW,SAAS;IACxB,eAAe,EAAE,CAAC,IAAI,SAAS,QAAQ,GAAG,QAAQ,EAAE,KAAK,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,QAAQ,CAAC;IACxF,SAAS,EAAE,CAAC,IAAI,SAAS,QAAQ,GAAG,QAAQ,EAAE,IAAI,SAAS,QAAQ,GAAG,QAAQ,EAC5E,KAAK,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,KACnB,QAAQ,CAAC;IACd,aAAa,EAAE,CAAC,IAAI,SAAS,QAAQ,GAAG,QAAQ,OAAO,QAAQ,CAAC;IAChE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,QAAQ,CAAC;IAClD,YAAY,EAAE,CAAC,IAAI,SAAS,QAAQ,GAAG,QAAQ,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,KAAK,QAAQ,CAAC;IACzG,IAAI,EAAE,CAAC,OAAO,SAAS,QAAQ,GAAG,QAAQ,EAAE,KAAK,SAAS,QAAQ,GAAG,QAAQ,OAAO,QAAQ,CAAC;IAC7F,IAAI,EAAE,CAAC,OAAO,SAAS,QAAQ,GAAG,QAAQ,EAAE,KAAK,SAAS,QAAQ,GAAG,QAAQ,OAAO,QAAQ,CAAC;IAC7F,MAAM,EAAE,CAAC,OAAO,SAAS,QAAQ,GAAG,QAAQ,EAAE,KAAK,SAAS,QAAQ,GAAG,QAAQ,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,QAAQ,CAAC;CAC9G;AAED;;;;;;GAMG;AACH,wBAAsB,aAAa,CACjC,WAAW,GAAE,MAAM,OAAO,CAAC,QAAQ,CAAiD,EACpF,UAAU,GAAE,MAAM,OAAO,CAAC,QAAQ,CAAgD,EAClF,UAAU,GAAE,MAAM,OAAO,CAAC,QAAQ,CAAgD,EAClF,eAAe,GAAE,MAAM,OAAO,CAAC,QAAQ,CAAqD,GAC3F,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CA0B3B;AAID;;;;GAIG;AACH,wBAAgB,MAAM,IAAI,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAKlD"}

package/dist/components/graph/graph-loader.js

@@ -42,3 +42,4 @@ export function loadD3() {
     }
     return d3Modules;
 }
+//# sourceMappingURL=graph-loader.js.map

package/dist/components/graph/graph-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-loader.js","sourceRoot":"","sources":["../../../src/components/graph/graph-loader.ts"],"names":[],"mappings":"AAiBA;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CACjC,WAAW,GAA4B,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,CAAsB,EACpF,UAAU,GAA4B,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,CAAsB,EAClF,UAAU,GAA4B,GAAG,EAAE,CAAC,MAAM,CAAC,SAAS,CAAsB,EAClF,eAAe,GAA4B,GAAG,EAAE,CAAC,MAAM,CAAC,cAAc,CAAsB;IAE5F,IAAI,CAAC;QACH,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAChE,WAAW,EAAE;YACb,UAAU,EAAE;YACZ,UAAU,EAAE;YACZ,eAAe,EAAE;SAClB,CAAC,CAAC;QACH,OAAO;YACL,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,aAAa,EAAE,KAAK,CAAC,aAAa;YAClC,WAAW,EAAE,KAAK,CAAC,WAAW;YAC9B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,MAAM,EAAE,YAAY,CAAC,MAAM;SAC5B,CAAC;IACJ,CAAC;IAAC,OAAO,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,IAAI,CACV,2EAA2E;YACzE,qGAAqG,EACvG,GAAG,CACJ,CAAC;QACF,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED,IAAI,SAAgD,CAAC;AAErD;;;;GAIG;AACH,MAAM,UAAU,MAAM;IACpB,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,SAAS,GAAG,aAAa,EAAE,CAAC;IAC9B,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC"}