@aceshooting/lyra-ui 2.0.0 → 2.2.0

package/dist/components/model-settings-panel/model-settings-panel.js

@@ -1,145 +1,7 @@
-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 } from 'lit';
-import { property } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './model-settings-panel.class.js';
+import { LyraModelSettingsPanel } from './model-settings-panel.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './model-settings-panel.styles.js';
-import '../model-select/model-select.js';
-import '../slider/slider.js';
-const DEFAULT_TEMPERATURE_MIN = 0;
-const DEFAULT_TEMPERATURE_MAX = 2;
-const DEFAULT_TEMPERATURE_STEP = 0.1;
-// Midpoint of the default [0, 2] range -- a reasonable provider-agnostic
-// starting point. Reassign `temperature` yourself if your provider's own
-// default differs (OpenAI and Anthropic both default to 1, which this matches).
-const DEFAULT_TEMPERATURE = 1;
-/**
- * `<lyra-model-settings-panel>` — a fixed composition of `<lyra-model-select>`
- * and `<lyra-slider>` into one agent-configuration card: pick a provider's
- * model, then tune its sampling temperature. Not a generic layout shell (no
- * slots) — it exists so a consumer doesn't have to re-wire the same two
- * child `lyra-change` events into one combined settings object by hand every
- * time this pairing comes up.
- *
- * Every prop here is a plain pass-through to (or mirror of) the matching
- * child control's own prop of the same/similar name; see the child
- * components themselves for the exact semantics of `catalog`/`allowCustom`
- * and `temperatureMin`/`temperatureMax`/`temperatureStep`.
- *
- * @customElement lyra-model-settings-panel
- * @event lyra-change - Either child control changed. `detail: { modelValue: string; inCatalog: boolean; temperature: number }` — always the full current settings, not just whatever changed.
- * @csspart base - The outermost wrapping container.
- * @csspart model-row - The row wrapping the internal `lyra-model-select`.
- * @csspart temperature-row - The row wrapping the temperature label/slider/value.
- * @csspart temperature-label - The visible "Temperature" caption.
- * @csspart temperature-value - The visible current temperature readout.
- */
-export class LyraModelSettingsPanel extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Informational provider badge, passed straight through to the internal `lyra-model-select`. */
-        this.provider = '';
-        /** The current model id. */
-        this.modelValue = '';
-        /** Let the model control accept a value outside `catalog`; passed straight through. */
-        this.allowCustom = false;
-        /** The current sampling temperature. */
-        this.temperature = DEFAULT_TEMPERATURE;
-        this.temperatureMin = DEFAULT_TEMPERATURE_MIN;
-        this.temperatureMax = DEFAULT_TEMPERATURE_MAX;
-        this.temperatureStep = DEFAULT_TEMPERATURE_STEP;
-        /** `vertical` stacks full-width rows with visible labels; `compact` runs
-         *  the same two rows side by side with a smaller temperature caption, for
-         *  toolbars/sidebars where the vertical layout's height doesn't fit. */
-        this.layout = 'vertical';
-        this.onModelChange = (e) => {
-            this.modelValue = e.detail.value;
-            this.emitChange();
-        };
-        this.onTemperatureChange = (e) => {
-            this.temperature = e.detail.value;
-            this.emitChange();
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    /** Whether `modelValue` is present in `catalog` — recomputed fresh from
-     *  scratch (like `lyra-model-select`'s own `effectiveEntries`) rather than
-     *  cached from the last child event, so it's still correct when
-     *  `modelValue` was assigned directly instead of via the child's own
-     *  `lyra-change`. */
-    get inCatalog() {
-        const catalog = this.catalog;
-        if (!catalog || catalog.length === 0)
-            return false;
-        return catalog.some((entry) => (typeof entry === 'string' ? entry === this.modelValue : entry.id === this.modelValue));
-    }
-    emitChange() {
-        this.emit('lyra-change', {
-            modelValue: this.modelValue,
-            inCatalog: this.inCatalog,
-            temperature: this.temperature,
-        });
-    }
-    render() {
-        return html `
-      <div part="base">
-        <div part="model-row">
-          <lyra-model-select
-            .provider=${this.provider}
-            .catalog=${this.catalog}
-            .value=${this.modelValue}
-            .allowCustom=${this.allowCustom}
-            placeholder="Select a model…"
-            @lyra-change=${this.onModelChange}
-          ></lyra-model-select>
-        </div>
-        <div part="temperature-row">
-          <span part="temperature-label">Temperature</span>
-          <lyra-slider
-            .label=${'Temperature'}
-            .min=${this.temperatureMin}
-            .max=${this.temperatureMax}
-            .step=${this.temperatureStep}
-            .valueAsNumber=${this.temperature}
-            .showValue=${false}
-            @lyra-change=${this.onTemperatureChange}
-          ></lyra-slider>
-          <span part="temperature-value">${this.temperature}</span>
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property()
-], LyraModelSettingsPanel.prototype, "provider", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraModelSettingsPanel.prototype, "catalog", void 0);
-__decorate([
-    property({ attribute: 'model-value' })
-], LyraModelSettingsPanel.prototype, "modelValue", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'allow-custom' })
-], LyraModelSettingsPanel.prototype, "allowCustom", void 0);
-__decorate([
-    property({ type: Number })
-], LyraModelSettingsPanel.prototype, "temperature", void 0);
-__decorate([
-    property({ type: Number, attribute: 'temperature-min' })
-], LyraModelSettingsPanel.prototype, "temperatureMin", void 0);
-__decorate([
-    property({ type: Number, attribute: 'temperature-max' })
-], LyraModelSettingsPanel.prototype, "temperatureMax", void 0);
-__decorate([
-    property({ type: Number, attribute: 'temperature-step' })
-], LyraModelSettingsPanel.prototype, "temperatureStep", void 0);
-__decorate([
-    property({ reflect: true })
-], LyraModelSettingsPanel.prototype, "layout", void 0);
+import "../model-select/model-select.js";
+import "../slider/slider.js";
 defineElement('model-settings-panel', LyraModelSettingsPanel);
+//# sourceMappingURL=model-settings-panel.js.map

package/dist/components/model-settings-panel/model-settings-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-settings-panel.js","sourceRoot":"","sources":["../../../src/components/model-settings-panel/model-settings-panel.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,iCAAiC,CAAC;AACzC,OAAO,qBAAqB,CAAC;AAC7B,aAAa,CAAC,sBAAsB,EAAE,sBAAsB,CAAC,CAAC"}

package/dist/components/model-settings-panel/model-settings-panel.styles.d.ts

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

package/dist/components/model-settings-panel/model-settings-panel.styles.d.ts.map

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

package/dist/components/model-settings-panel/model-settings-panel.styles.js

@@ -3,7 +3,7 @@ export const styles = css `
   :host {
     display: block;
     inline-size: 100%;
-    max-inline-size: 28rem;
+    max-inline-size: var(--lyra-size-28rem);
   }
   [part='base'] {
     display: flex;
@@ -11,7 +11,7 @@ export const styles = css `
     gap: var(--lyra-space-l);
     box-sizing: border-box;
     padding: var(--lyra-space-l);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
   }
@@ -40,16 +40,16 @@ export const styles = css `
     min-inline-size: 0;
   }
   [part='temperature-label'] {
-    font-size: 0.8125rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-sm);
+    font-weight: var(--lyra-font-weight-semibold);
     color: var(--lyra-color-text);
     white-space: nowrap;
   }
   [part='temperature-value'] {
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-text-quiet);
     font-variant-numeric: tabular-nums;
-    min-inline-size: 2.5ch;
+    min-inline-size: var(--lyra-size-2-5ch);
     text-align: end;
   }
 
@@ -69,14 +69,15 @@ export const styles = css `
   }
   :host([layout='compact']) [part='model-row'],
   :host([layout='compact']) [part='temperature-row'] {
-    flex: 1 1 12rem;
-    min-inline-size: 10rem;
+    flex: 1 1 var(--lyra-size-12rem);
+    min-inline-size: var(--lyra-size-10rem);
   }
   :host([layout='compact']) [part='temperature-label'] {
-    font-size: 0.6875rem;
-    font-weight: 700;
+    font-size: var(--lyra-size-0-6875rem);
+    font-weight: var(--lyra-font-weight-bold);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: var(--lyra-size-0-04em);
     color: var(--lyra-color-text-quiet);
   }
 `;
+//# sourceMappingURL=model-settings-panel.styles.js.map

package/dist/components/model-settings-panel/model-settings-panel.styles.js.map

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

package/dist/components/playback/playback.class.d.ts

@@ -0,0 +1,79 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-playback>` — steps an index through `[0, length)` on a fixed
+ * interval (play/pause), the common building block behind ad-hoc
+ * play-timers in time-series dashboards.
+ *
+ * @customElement lyra-playback
+ * @event lyra-play - Fired when playback starts.
+ * @event lyra-pause - Fired when playback stops (including auto-pause).
+ * @event lyra-step - `detail: { index }`, fired on every tick and manual step.
+ * @csspart base - The playback controls wrapper.
+ * @csspart play-button - The play/pause button.
+ * @csspart slider - The playback position slider.
+ */
+export interface LyraPlaybackEventMap {
+    'lyra-play': CustomEvent<undefined>;
+    'lyra-pause': CustomEvent<undefined>;
+    'lyra-step': CustomEvent<{
+        index: number;
+    }>;
+}
+export declare class LyraPlayback extends LyraElement<LyraPlaybackEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        playing: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        loop: {
+            type: BooleanConstructor;
+        };
+    };
+    length: number;
+    index: number;
+    intervalMs: number;
+    loop: boolean;
+    /**
+     * Re-declared as a Lit reactive property (shadowing the inherited plain
+     * `HTMLElement.hidden` IDL property) so that setting `el.hidden = true` —
+     * or the `hidden` attribute — actually enters Lit's change-tracking system
+     * and the `willUpdate` auto-pause guard below can see it via `changed`.
+     * `reflect: true` preserves the native attribute-reflection behavior.
+     */
+    hidden: boolean;
+    private timer?;
+    private _playing;
+    get playing(): boolean;
+    set playing(next: boolean);
+    /** Largest index reachable at the current `length` (never negative, and
+     * never NaN — a non-finite `length` falls back to 0 rather than leaking a
+     * literal "NaN" into the rendered slider's `max` attribute). */
+    private get maxIndex();
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    /** Start playback; no-op if there's nothing to advance through. */
+    play(): void;
+    /** Stop playback. */
+    pause(): void;
+    /** Toggle between playing and paused. */
+    toggle(): void;
+    private scheduleTick;
+    private tick;
+    private setIndex;
+    /** Advance one step without starting playback. */
+    next(): void;
+    /** Go back one step without starting playback. */
+    previous(): void;
+    /** Jump to an explicit index, pausing playback. */
+    goTo(index: number): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-playback': LyraPlayback;
+    }
+}
+//# sourceMappingURL=playback.class.d.ts.map

package/dist/components/playback/playback.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback.class.d.ts","sourceRoot":"","sources":["../../../src/components/playback/playback.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AA4B7D;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACpC,YAAY,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACrC,WAAW,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC7C;AACD,qBAAa,YAAa,SAAQ,WAAW,CAAC,oBAAoB,CAAC;IACjE,MAAM,CAAC,MAAM,iCAAgC;IAE7C,MAAM,CAAC,UAAU;QACf,OAAO;YAAI,IAAI;YAAW,OAAO;YAAQ,UAAU;;QACnD,IAAI;YAAI,IAAI;;MACZ;IAE0B,MAAM,SAAK;IACX,KAAK,SAAK;IACgB,UAAU,SAAO;IAKvE,IAAI,UAAQ;IAEZ;;;;;;OAMG;IACyC,MAAM,UAAS;IAE3D,OAAO,CAAC,KAAK,CAAC,CAAS;IACvB,OAAO,CAAC,QAAQ,CAAS;IAEzB,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,IAAI,EAAE,OAAO,EAiBxB;IAED;;oEAEgE;IAChE,OAAO,KAAK,QAAQ,GAEnB;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAuBlD;IAED,mEAAmE;IACnE,IAAI,IAAI,IAAI,CAGX;IAED,qBAAqB;IACrB,KAAK,IAAI,IAAI,CAGZ;IAED,yCAAyC;IACzC,MAAM,IAAI,IAAI,CAEb;IAOD,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,IAAI;IAcZ,OAAO,CAAC,QAAQ;IAKhB,kDAAkD;IAClD,IAAI,IAAI,IAAI,CAGX;IAED,kDAAkD;IAClD,QAAQ,IAAI,IAAI,CAGf;IAED,mDAAmD;IACnD,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAGxB;IAED,MAAM,IAAI,cAAc,CA2BvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/components/playback/playback.class.js

@@ -0,0 +1,238 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { playIcon, pauseIcon } from '../../internal/icons.js';
+import { finiteCount, finiteDuration, MAX_TIMEOUT_MS } from '../../internal/numbers.js';
+import { styles } from './playback.styles.js';
+const MIN_INTERVAL_MS = 16; // ~one animation frame; prevents a near-zero-delay tick loop
+// Deduplicated per distinct bad value (like the analogous one-time warnings
+// in lyra-heatmap/lyra-word-cloud) rather than a single once-ever flag, so a
+// later, genuinely different bad value is never silently swallowed by an
+// earlier, unrelated one.
+const warnedInvalidIntervals = new Set();
+function warnInvalidInterval(value) {
+    if (warnedInvalidIntervals.has(value))
+        return;
+    warnedInvalidIntervals.add(value);
+    // The clamp fires for any value outside the timer-safe range, so report the
+    // reason that actually applies instead of collapsing every bad value into
+    // one misleading "non-finite or non-positive" message.
+    const reason = !Number.isFinite(value)
+        ? 'non-finite'
+        : value < MIN_INTERVAL_MS
+            ? `below the ${MIN_INTERVAL_MS}ms floor`
+            : `above the ${MAX_TIMEOUT_MS}ms ceiling`;
+    console.warn(`<lyra-playback> interval-ms (${value}) is ${reason}; clamping to ${MIN_INTERVAL_MS}ms.`);
+}
+export class LyraPlayback extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.length = 0;
+        this.index = 0;
+        this.intervalMs = 900;
+        // `playing` is declared via `static properties` above (noAccessor) with a
+        // hand-written accessor below, so a direct `el.playing = true/false`
+        // assignment always drives the real timer — not just calls through
+        // play()/pause().
+        this.loop = true;
+        /**
+         * Re-declared as a Lit reactive property (shadowing the inherited plain
+         * `HTMLElement.hidden` IDL property) so that setting `el.hidden = true` —
+         * or the `hidden` attribute — actually enters Lit's change-tracking system
+         * and the `willUpdate` auto-pause guard below can see it via `changed`.
+         * `reflect: true` preserves the native attribute-reflection behavior.
+         */
+        this.hidden = false;
+        this._playing = false;
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        playing: { type: Boolean, reflect: true, noAccessor: true },
+        loop: { type: Boolean },
+    }; }
+    get playing() {
+        return this._playing;
+    }
+    set playing(next) {
+        const old = this._playing;
+        if (next === old)
+            return;
+        this._playing = next;
+        if (next) {
+            if (finiteCount(this.length) <= 1) {
+                this._playing = false;
+                return;
+            }
+            this.emit('lyra-play');
+            this.scheduleTick();
+        }
+        else {
+            window.clearTimeout(this.timer);
+            this.timer = undefined;
+            this.emit('lyra-pause');
+        }
+        this.requestUpdate('playing', old);
+    }
+    /** Largest index reachable at the current `length` (never negative, and
+     * never NaN — a non-finite `length` falls back to 0 rather than leaking a
+     * literal "NaN" into the rendered slider's `max` attribute). */
+    get maxIndex() {
+        return Math.max(0, finiteCount(this.length) - 1);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.pause();
+    }
+    willUpdate(changed) {
+        if (changed.has('hidden') && this.hidden)
+            this.pause();
+        // A non-finite `length`/`index` (e.g. externally assigned NaN) must not
+        // linger: `maxIndex` already falls back to a safe value for rendering,
+        // but `next()`/`previous()` compare `index`/`length` directly and would
+        // otherwise stay permanently bricked (NaN comparisons are always
+        // false). Checked unconditionally — not just under the `length` branch
+        // below — so a corrupted `index` alone still self-heals on the very next
+        // update, without requiring `length` to also change.
+        const length = finiteCount(this.length);
+        const index = finiteCount(this.index);
+        if (length !== this.length)
+            this.length = length;
+        if (index !== this.index)
+            this.index = index;
+        if (changed.has('length')) {
+            // If length is externally reduced to <= 1 while playing, the timer
+            // would otherwise keep firing forever — and the play button (the only
+            // control that could stop it) becomes ?disabled at that point, leaving
+            // no way to stop it from the rendered UI.
+            if (this.length <= 1)
+                this.pause();
+            // Re-clamp `index` into the new `[0, length)` range on any shrink, not
+            // just the <= 1 case above, so it never lingers out of bounds.
+            if (this.index > this.maxIndex)
+                this.index = this.maxIndex;
+        }
+    }
+    /** Start playback; no-op if there's nothing to advance through. */
+    play() {
+        if (this.playing || finiteCount(this.length) <= 1)
+            return;
+        this.playing = true;
+    }
+    /** Stop playback. */
+    pause() {
+        if (!this.playing)
+            return;
+        this.playing = false;
+    }
+    /** Toggle between playing and paused. */
+    toggle() {
+        this.playing = !this.playing;
+    }
+    // A self-rescheduling `setTimeout` (rather than one long-lived
+    // `setInterval`) so `intervalMs` is re-read fresh before every tick, the
+    // same way `tick()` already re-reads `this.loop` on every fire — changing
+    // `interval-ms` live takes effect on the very next step instead of only
+    // after a pause/play cycle.
+    scheduleTick() {
+        const rawDelay = this.intervalMs;
+        const delay = finiteDuration(rawDelay, MIN_INTERVAL_MS, MIN_INTERVAL_MS);
+        if (delay !== rawDelay)
+            warnInvalidInterval(rawDelay);
+        // Self-identifying: a synchronous pause()+play() (or a synchronous
+        // play() from a 'lyra-pause'/'lyra-step' listener) invoked while this
+        // callback is running schedules its own new timer and overwrites
+        // `this.timer` before this callback resumes. Only the timer that is
+        // still the current one is allowed to reschedule itself — every other,
+        // now-superseded chain quietly stops instead of spawning a second,
+        // untracked chain that pause()/disconnectedCallback() can never reach.
+        const id = window.setTimeout(() => {
+            this.tick();
+            if (this.playing && this.timer === id)
+                this.scheduleTick();
+        }, delay);
+        this.timer = id;
+    }
+    tick() {
+        const length = finiteCount(this.length);
+        const next = finiteCount(this.index) + 1;
+        if (next >= length) {
+            if (this.loop)
+                this.setIndex(0);
+            else {
+                this.setIndex(length - 1);
+                this.pause();
+            }
+        }
+        else {
+            this.setIndex(next);
+        }
+    }
+    setIndex(i) {
+        this.index = finiteCount(i, 0, this.maxIndex);
+        this.emit('lyra-step', { index: this.index });
+    }
+    /** Advance one step without starting playback. */
+    next() {
+        const index = finiteCount(this.index);
+        if (index + 1 < finiteCount(this.length))
+            this.setIndex(index + 1);
+    }
+    /** Go back one step without starting playback. */
+    previous() {
+        const index = finiteCount(this.index);
+        if (index > 0)
+            this.setIndex(index - 1);
+    }
+    /** Jump to an explicit index, pausing playback. */
+    goTo(index) {
+        this.pause();
+        this.setIndex(finiteCount(index, 0, this.maxIndex));
+    }
+    render() {
+        const maxIndex = this.maxIndex;
+        const index = finiteCount(this.index, 0, maxIndex);
+        const disabled = finiteCount(this.length) <= 1;
+        return html `
+      <div part="base">
+        <button
+          part="play-button"
+          type="button"
+          aria-label=${this.playing ? 'Pause' : 'Play'}
+          ?disabled=${disabled}
+          @click=${() => this.toggle()}
+        >
+          ${this.playing ? pauseIcon() : playIcon()}
+        </button>
+        <input
+          part="slider"
+          type="range"
+          min="0"
+          max=${maxIndex}
+          .value=${String(index)}
+          aria-label="Playback position"
+          ?disabled=${disabled}
+          @input=${(e) => this.goTo(Number(e.target.value))}
+        />
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Number })
+], LyraPlayback.prototype, "length", void 0);
+__decorate([
+    property({ type: Number })
+], LyraPlayback.prototype, "index", void 0);
+__decorate([
+    property({ type: Number, attribute: 'interval-ms' })
+], LyraPlayback.prototype, "intervalMs", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraPlayback.prototype, "hidden", void 0);
+//# sourceMappingURL=playback.class.js.map

package/dist/components/playback/playback.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback.class.js","sourceRoot":"","sources":["../../../src/components/playback/playback.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,eAAe,GAAG,EAAE,CAAC,CAAC,6DAA6D;AAEzF,4EAA4E;AAC5E,6EAA6E;AAC7E,yEAAyE;AACzE,0BAA0B;AAC1B,MAAM,sBAAsB,GAAG,IAAI,GAAG,EAAU,CAAC;AACjD,SAAS,mBAAmB,CAAC,KAAa;IACxC,IAAI,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC;QAAE,OAAO;IAC9C,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAClC,4EAA4E;IAC5E,0EAA0E;IAC1E,uDAAuD;IACvD,MAAM,MAAM,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QACpC,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,KAAK,GAAG,eAAe;YACvB,CAAC,CAAC,aAAa,eAAe,UAAU;YACxC,CAAC,CAAC,aAAa,cAAc,YAAY,CAAC;IAC9C,OAAO,CAAC,IAAI,CACV,gCAAgC,KAAK,QAAQ,MAAM,iBAAiB,eAAe,KAAK,CACzF,CAAC;AACJ,CAAC;AAoBD,MAAM,OAAO,YAAa,SAAQ,WAAiC;IAAnE;;QAQ8B,WAAM,GAAG,CAAC,CAAC;QACX,UAAK,GAAG,CAAC,CAAC;QACgB,eAAU,GAAG,GAAG,CAAC;QACvE,0EAA0E;QAC1E,qEAAqE;QACrE,mEAAmE;QACnE,kBAAkB;QAClB,SAAI,GAAG,IAAI,CAAC;QAEZ;;;;;;WAMG;QACyC,WAAM,GAAG,KAAK,CAAC;QAGnD,aAAQ,GAAG,KAAK,CAAC;IAsK3B,CAAC;aAhMQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;aAEtC,eAAU,GAAG;QAClB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE;QAC3D,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KACxB,AAHgB,CAGf;IAuBF,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IACD,IAAI,OAAO,CAAC,IAAa;QACvB,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC1B,IAAI,IAAI,KAAK,GAAG;YAAE,OAAO;QACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;gBAClC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACtB,OAAO;YACT,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACvB,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAChC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1B,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;IAED;;oEAEgE;IAChE,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IACnD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAES,UAAU,CAAC,OAAuB;QAC1C,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,KAAK,EAAE,CAAC;QACvD,wEAAwE;QACxE,uEAAuE;QACvE,wEAAwE;QACxE,iEAAiE;QACjE,uEAAuE;QACvE,yEAAyE;QACzE,qDAAqD;QACrD,MAAM,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACxC,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,MAAM,KAAK,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACjD,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAC7C,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,mEAAmE;YACnE,sEAAsE;YACtE,uEAAuE;YACvE,0CAA0C;YAC1C,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC;gBAAE,IAAI,CAAC,KAAK,EAAE,CAAC;YACnC,uEAAuE;YACvE,+DAA+D;YAC/D,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC7D,CAAC;IACH,CAAC;IAED,mEAAmE;IACnE,IAAI;QACF,IAAI,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YAAE,OAAO;QAC1D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,qBAAqB;IACrB,KAAK;QACH,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,yCAAyC;IACzC,MAAM;QACJ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;IAED,+DAA+D;IAC/D,yEAAyE;IACzE,0EAA0E;IAC1E,wEAAwE;IACxE,4BAA4B;IACpB,YAAY;QAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC;QACjC,MAAM,KAAK,GAAG,cAAc,CAAC,QAAQ,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC;QACzE,IAAI,KAAK,KAAK,QAAQ;YAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtD,mEAAmE;QACnE,sEAAsE;QACtE,iEAAiE;QACjE,oEAAoE;QACpE,uEAAuE;QACvE,mEAAmE;QACnE,uEAAuE;QACvE,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAChC,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE;gBAAE,IAAI,CAAC,YAAY,EAAE,CAAC;QAC7D,CAAC,EAAE,KAAK,CAAC,CAAC;QACV,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IAEO,IAAI;QACV,MAAM,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACxC,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACzC,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;iBAC3B,CAAC;gBACJ,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC1B,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,QAAQ,CAAC,CAAS;QACxB,IAAI,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC9C,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,kDAAkD;IAClD,IAAI;QACF,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,KAAK,GAAG,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,kDAAkD;IAClD,QAAQ;QACN,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,KAAK,GAAG,CAAC;YAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,mDAAmD;IACnD,IAAI,CAAC,KAAa;QAChB,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;QACnD,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC/C,OAAO,IAAI,CAAA;;;;;uBAKQ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;sBAChC,QAAQ;mBACX,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;;YAE1B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE;;;;;;gBAMnC,QAAQ;mBACL,MAAM,CAAC,KAAK,CAAC;;sBAEV,QAAQ;mBACX,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;;;KAGnF,CAAC;IACJ,CAAC;CACF;AAzL6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAW;AACgB;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;gDAAkB;AAc3B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAgB"}

package/dist/components/playback/playback.d.ts

@@ -1,67 +1,2 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-/**
- * `<lyra-playback>` — steps an index through `[0, length)` on a fixed
- * interval (play/pause), the common building block behind ad-hoc
- * play-timers in time-series dashboards.
- *
- * @customElement lyra-playback
- * @event lyra-play - Fired when playback starts.
- * @event lyra-pause - Fired when playback stops (including auto-pause).
- * @event lyra-step - `detail: { index }`, fired on every tick and manual step.
- * @csspart base, play-button, slider
- */
-export declare class LyraPlayback extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    static properties: {
-        playing: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            noAccessor: boolean;
-        };
-        loop: {
-            type: BooleanConstructor;
-        };
-    };
-    length: number;
-    index: number;
-    intervalMs: number;
-    loop: boolean;
-    /**
-     * Re-declared as a Lit reactive property (shadowing the inherited plain
-     * `HTMLElement.hidden` IDL property) so that setting `el.hidden = true` —
-     * or the `hidden` attribute — actually enters Lit's change-tracking system
-     * and the `willUpdate` auto-pause guard below can see it via `changed`.
-     * `reflect: true` preserves the native attribute-reflection behavior.
-     */
-    hidden: boolean;
-    private timer?;
-    private _playing;
-    get playing(): boolean;
-    set playing(next: boolean);
-    /** Largest index reachable at the current `length` (never negative). */
-    private get maxIndex();
-    disconnectedCallback(): void;
-    protected willUpdate(changed: PropertyValues): void;
-    /** Start playback; no-op if there's nothing to advance through. */
-    play(): void;
-    /** Stop playback. */
-    pause(): void;
-    /** Toggle between playing and paused. */
-    toggle(): void;
-    private scheduleTick;
-    private tick;
-    private setIndex;
-    /** Advance one step without starting playback. */
-    next(): void;
-    /** Go back one step without starting playback. */
-    previous(): void;
-    /** Jump to an explicit index, pausing playback. */
-    goTo(index: number): void;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-playback': LyraPlayback;
-    }
-}
+export * from './playback.class.js';
+//# sourceMappingURL=playback.d.ts.map

package/dist/components/playback/playback.d.ts.map

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