@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/tabs/tabs.js

@@ -0,0 +1,190 @@
+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, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { isRtl } from '../../internal/rtl.js';
+import { nextId } from '../../internal/a11y.js';
+import { styles } from './tabs.styles.js';
+/**
+ * `<lyra-tabs>` — a tab strip whose panels are direct light-DOM children,
+ * each carrying `slot="<id>"` (the panel's stable id) and `label="<text>"`
+ * (the tab button's text). One named `<slot>` is rendered per distinct
+ * `slot` name found among the current children — a child with no `label`,
+ * or a name with no matching child, simply never produces a tab.
+ *
+ * Implements the WAI-ARIA APG tabs pattern with automatic activation:
+ * Left/Right (swapped under RTL) move focus *and* selection together,
+ * Home/End jump to the first/last enabled tab, and a roving `tabindex`
+ * follows whichever tab is currently selected.
+ *
+ * @customElement lyra-tabs
+ * @slot - Direct children with `slot="<id>" label="<text>"` (and optionally `disabled`); one becomes each tab's panel.
+ * @event lyra-tabs-change - `detail: { tabId }`, fired when the active tab changes via click or keyboard.
+ * @csspart base - The root wrapper around the tablist and panels.
+ * @csspart tablist - The `role="tablist"` row of tab buttons.
+ * @csspart tab - A single tab button.
+ * @csspart panel - A single `role="tabpanel"` wrapper (one per tab, hidden unless active).
+ */
+export class LyraTabs extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The active tab's `slot`/id. Falls back to the first enabled tab whenever the current value doesn't resolve to one. */
+        this.active = '';
+        this.tabs = [];
+        this.baseId = nextId('tabs');
+        /** Rebuilds `tabs` from the current direct children. First child wins when two share a `slot` name (matches native slot assignment: both would render into the one panel, but only one label can back the button). */
+        this.syncTabs = () => {
+            const seen = new Set();
+            const next = [];
+            for (const child of Array.from(this.children)) {
+                const slotName = child.getAttribute('slot');
+                const label = child.getAttribute('label');
+                if (!slotName || !label || seen.has(slotName))
+                    continue;
+                seen.add(slotName);
+                next.push({ slotName, label, disabled: child.hasAttribute('disabled') });
+            }
+            this.tabs = next;
+        };
+        this.onTabListKeyDown = (e) => {
+            const navigable = this.tabs.filter((t) => !t.disabled);
+            if (navigable.length === 0)
+                return;
+            const currentIndex = navigable.findIndex((t) => t.slotName === this.active);
+            // Horizontal strip -- Up/Down aren't used. Left/Right swap under RTL,
+            // matching lyra-split/lyra-tree's physical-direction handling.
+            const rtl = isRtl(this);
+            const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+            const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+            let targetIndex;
+            switch (e.key) {
+                case forwardKey:
+                    targetIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % navigable.length;
+                    break;
+                case backwardKey:
+                    targetIndex = currentIndex < 0 ? navigable.length - 1 : (currentIndex - 1 + navigable.length) % navigable.length;
+                    break;
+                case 'Home':
+                    targetIndex = 0;
+                    break;
+                case 'End':
+                    targetIndex = navigable.length - 1;
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            const target = navigable[targetIndex];
+            this.selectTab(target);
+            this.focusTab(target.slotName);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncTabs();
+        // Each child carries its own individual `slot` attribute (one named slot
+        // per tab, unlike lyra-split's single default-slot-of-many-panels) -- a
+        // brand-new tab's name has no matching `<slot>` to fire `slotchange` on
+        // until *this* component has already rendered one for it, and neither
+        // `slotchange` nor any Lit lifecycle hook observes a plain attribute
+        // edit (label/disabled) on a light-DOM child at all. A mutation observer
+        // on the host is the only thing that sees either case.
+        this.mutationObserver = new MutationObserver(this.syncTabs);
+        this.mutationObserver.observe(this, {
+            childList: true,
+            attributes: true,
+            attributeFilter: ['slot', 'label', 'disabled'],
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.mutationObserver?.disconnect();
+        this.mutationObserver = undefined;
+    }
+    /** Keeps `active` resolved to a real, enabled tab -- covers the initial default, a tab disappearing/becoming disabled underneath the current selection, and a consumer assigning `.active` directly. Silent (no `lyra-tabs-change`): this corrects *invalid* state rather than responding to a user picking a different tab. */
+    willUpdate(changed) {
+        if (!changed.has('tabs') && !changed.has('active'))
+            return;
+        const current = this.tabs.find((t) => t.slotName === this.active);
+        if (current && !current.disabled)
+            return;
+        this.active = this.tabs.find((t) => !t.disabled)?.slotName ?? '';
+    }
+    /** Activates `tab` (no-op for a disabled tab or one that's already active) and emits `lyra-tabs-change`. */
+    selectTab(tab) {
+        if (tab.disabled || tab.slotName === this.active)
+            return;
+        this.active = tab.slotName;
+        this.emit('lyra-tabs-change', { tabId: tab.slotName });
+    }
+    /** Moves real DOM focus to tab `slotName`'s button. Safe to call immediately (no `updateComplete` wait): every tab button already exists in the DOM regardless of its current `tabindex`, and `tabindex="-1"` elements are still focusable via script. */
+    focusTab(slotName) {
+        const buttons = this.renderRoot.querySelectorAll('[part="tab"]');
+        for (const button of Array.from(buttons)) {
+            if (button.dataset.slot === slotName) {
+                button.focus();
+                return;
+            }
+        }
+    }
+    tabId(slotName) {
+        return `${this.baseId}-tab-${slotName}`;
+    }
+    panelId(slotName) {
+        return `${this.baseId}-panel-${slotName}`;
+    }
+    renderTab(tab) {
+        const selected = tab.slotName === this.active;
+        return html `<button
+      type="button"
+      part="tab"
+      id=${this.tabId(tab.slotName)}
+      data-slot=${tab.slotName}
+      role="tab"
+      aria-selected=${selected ? 'true' : 'false'}
+      aria-disabled=${tab.disabled ? 'true' : 'false'}
+      aria-controls=${this.panelId(tab.slotName)}
+      tabindex=${selected ? '0' : '-1'}
+      @click=${() => this.selectTab(tab)}
+    >
+      ${tab.label}
+    </button>`;
+    }
+    renderPanel(tab) {
+        const selected = tab.slotName === this.active;
+        return html `<div
+      part="panel"
+      id=${this.panelId(tab.slotName)}
+      role="tabpanel"
+      aria-labelledby=${this.tabId(tab.slotName)}
+      tabindex="0"
+      ?hidden=${!selected}
+    >
+      <slot name=${tab.slotName}></slot>
+    </div>`;
+    }
+    render() {
+        return html `
+      <div part="base">
+        <div part="tablist" role="tablist" aria-orientation="horizontal" @keydown=${this.onTabListKeyDown}>
+          ${this.tabs.map((tab) => this.renderTab(tab))}
+        </div>
+        ${this.tabs.map((tab) => this.renderPanel(tab))}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LyraTabs.prototype, "active", void 0);
+__decorate([
+    state()
+], LyraTabs.prototype, "tabs", void 0);
+defineElement('tabs', LyraTabs);

package/dist/components/tabs/tabs.styles.d.ts

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

package/dist/components/tabs/tabs.styles.js

@@ -0,0 +1,63 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-s);
+  }
+  [part='tablist'] {
+    display: flex;
+    align-items: stretch;
+    gap: var(--lyra-space-m);
+    border-block-end: 1px solid var(--lyra-color-border);
+    overflow-x: auto;
+  }
+  [part='tab'] {
+    appearance: none;
+    background: none;
+    border: none;
+    /* Sits directly over the tablist's own border-block-end so the accent
+       underline below replaces it, pixel for pixel, when selected. */
+    border-block-end: 2px solid transparent;
+    margin-block-end: -1px;
+    padding: var(--lyra-space-s) var(--lyra-space-xs);
+    font: inherit;
+    font-weight: 500;
+    color: var(--lyra-color-text-quiet);
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      color var(--lyra-transition-fast),
+      border-color var(--lyra-transition-fast);
+  }
+  [part='tab']:hover:not([aria-disabled='true']) {
+    color: var(--lyra-color-text);
+  }
+  [part='tab'][aria-selected='true'] {
+    color: var(--lyra-color-brand);
+    border-block-end-color: var(--lyra-color-brand);
+  }
+  [part='tab'][aria-disabled='true'] {
+    cursor: not-allowed;
+    /* No :hover color change and no pointer feedback -- the click handler
+       already no-ops on a disabled tab, this just matches it visually. */
+    pointer-events: none;
+    opacity: var(--lyra-opacity-disabled);
+  }
+  [part='tab']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: calc(var(--lyra-focus-ring-offset) * -1);
+    border-radius: var(--lyra-radius);
+  }
+  [part='panel'] {
+    padding-block-start: var(--lyra-space-xs);
+  }
+  [part='panel']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+    border-radius: var(--lyra-radius);
+  }
+`;

package/dist/components/thinking-panel/thinking-panel.d.ts

@@ -0,0 +1,121 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type ThinkingPanelMode = 'live' | 'post-hoc';
+export interface ThinkingPanelToggleDetail {
+    expanded: boolean;
+}
+/**
+ * `<lyra-thinking-panel>` — a collapsible panel for an AI agent's
+ * intermediate reasoning/"thinking" transcript, kept visually and
+ * semantically distinct from its final response. Same collapsible
+ * header-button-plus-region shape as `<lyra-source-list>`; the default slot
+ * is entirely free-form (a consumer-composed `<lyra-streaming-text>`,
+ * `<lyra-markdown>`, or plain text) — this component has no dependency on
+ * either and imposes no structure on what's slotted.
+ *
+ * `mode` (`'live'` while reasoning is actively streaming in, `'post-hoc'`
+ * once it's complete and being reviewed after the fact) drives two concrete
+ * behavior differences, not just a styling hook:
+ * - **Header hint.** While `duration-ms` is unset, `'live'` shows a pulsing
+ *   "Thinking…" placeholder in `[part="duration"]`; `'post-hoc'` shows
+ *   nothing there instead (a finished review with no known duration has
+ *   nothing useful to say in that slot). Once `duration-ms` is set, both
+ *   modes show the same static `"Thought for …"` text — a `'post-hoc'`
+ *   consumer that captured a duration is free to supply it too.
+ * - **Auto-scroll.** Only `'live'` mode auto-follows new content appended to
+ *   the default slot while `expanded` (see below); `'post-hoc'` never
+ *   scrolls on its own, since reviewing finished reasoning is expected to
+ *   start from the top like reading any other completed document. This
+ *   library otherwise defaults to *not* editorializing about a host's data
+ *   (see `<lyra-empty>`'s plain-`description` stance), but scroll position
+ *   is presentation, not data, so this one behavior difference earns its
+ *   keep rather than being left as a bare visual/semantic hint the host
+ *   would have to reimplement identically itself.
+ *
+ * Live-mode auto-scroll ("stick to bottom") is the classic chat-transcript
+ * convention: while `mode="live"` and `expanded`, new content keeps the
+ * panel scrolled to its latest line — *unless* the user has manually
+ * scrolled up to (re-)read earlier content, in which case their position is
+ * never yanked away from them. This is tracked continuously via a `scroll`
+ * listener on `[part="body"]` (not recomputed from the mutation itself,
+ * which necessarily observes the DOM only *after* it has already changed):
+ * every user-driven scroll records whether the body was left within
+ * `NEAR_BOTTOM_PX` of its own max scroll position, and only a mutation that
+ * arrives while that's still true triggers a follow-up scroll-to-bottom.
+ * Opening an already-`'live'` panel (or one that later becomes `'live'`)
+ * always resets this to "anchored" and jumps to the latest content, the same
+ * way a chat app's own transcript does when you re-open it.
+ *
+ * New content is detected via a `MutationObserver` on this element's own
+ * light DOM (`childList`+`subtree`+`characterData`) rather than the default
+ * slot's `slotchange` event, because `slotchange` only fires when the set of
+ * top-level assigned nodes changes — never for a text node mutating *inside*
+ * an already-slotted element, which is the more likely shape for streamed
+ * reasoning (a consumer appending chunks to an existing node's `textContent`
+ * rather than re-slotting a whole new element per token). The one thing this
+ * can't see is a mutation entirely inside a slotted custom element's own
+ * shadow root (e.g. a `<lyra-markdown>` re-rendering its shadow tree after a
+ * `content` property change) — Shadow DOM encapsulation blocks that by
+ * design, and there is no way for this component to reach across that
+ * boundary. A slotted element whose *own* internal updates should drive this
+ * panel's auto-scroll needs to append/mutate visible light-DOM text itself
+ * (as `<lyra-streaming-text>` is expected to), or the host can call this
+ * panel's own `scrollToBottom()` directly.
+ *
+ * `aria-controls` linking the header to the body region uses `nextId()`
+ * (`../../internal/a11y.js`) for a collision-safe id, the same convention
+ * `<lyra-source-list>` and `<lyra-widget>` already establish for every
+ * toggle-controls-region pairing in this library.
+ *
+ * @customElement lyra-thinking-panel
+ * @slot - The reasoning/thinking content.
+ * @event lyra-toggle - The header was activated, expanding or collapsing the
+ * panel. `detail: { expanded }` — same event name and shape as
+ * `<lyra-source-list>`'s own `lyra-toggle`.
+ * @csspart base - The outer container.
+ * @csspart header - The clickable header (`<button>`) toggling `expanded`.
+ * @csspart label - The `label` text.
+ * @csspart duration - The formatted duration / "Thinking…" placeholder, when shown.
+ * @csspart toggle - The chevron indicator inside the header.
+ * @csspart body - The wrapper around the default slot, `hidden` while collapsed.
+ */
+export declare class LyraThinkingPanel extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Header text. */
+    label: string;
+    /** Whether the reasoning transcript is currently shown. Starts collapsed,
+     *  matching `<lyra-source-list>`'s default -- a consumer running `'live'`
+     *  reasoning sets this `true` itself to stream it in view as it arrives. */
+    expanded: boolean;
+    /** `'live'` while reasoning is actively streaming in right now; `'post-hoc'`
+     *  once it's complete and being reviewed after the fact. See the class doc
+     *  for the concrete behavior differences this drives. */
+    mode: ThinkingPanelMode;
+    /** How long the reasoning took, in milliseconds, once known. Omitted
+     *  entirely (nothing rendered in `'post-hoc'`, a pulsing placeholder in
+     *  `'live'`) while unset. */
+    durationMs?: number;
+    private readonly bodyId;
+    private contentObserver?;
+    private scrollRafId?;
+    private stickToBottom;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /** Scrolls the body to its current bottom immediately (no smooth-scroll
+     *  animation, deliberately -- see onContentMutated()'s rAF-coalescing
+     *  comment for why an instant jump reads better than a stack of competing
+     *  smooth scrolls under a fast token stream). Safe to call directly, e.g.
+     *  from a host that wants to force a jump-to-latest action of its own. */
+    scrollToBottom(): void;
+    private onScroll;
+    private onContentMutated;
+    private toggle;
+    private get durationDisplay();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-thinking-panel': LyraThinkingPanel;
+    }
+}

package/dist/components/thinking-panel/thinking-panel.js

@@ -0,0 +1,235 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { nextId } from '../../internal/a11y.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { styles } from './thinking-panel.styles.js';
+/** "Close enough to the body's own max scroll position to count as anchored
+ *  there" -- comfortably larger than one line of streamed text, so a user
+ *  who has barely nudged the scrollbar while reading the latest line isn't
+ *  mistaken for having deliberately scrolled away to read earlier content. */
+const NEAR_BOTTOM_PX = 48;
+/** `820` -> `"820ms"`; `1500` -> `"1.5s"`; `2000` -> `"2s"`. Identical
+ *  algorithm to lyra-tool-call-chip's and lyra-tool-result-dialog's own
+ *  `formatDuration` -- duplicated rather than imported (three independent,
+ *  separately-consumable components) but kept in lockstep so the same
+ *  elapsed time reads identically everywhere it's shown in this library. */
+function formatDuration(ms) {
+    if (!Number.isFinite(ms) || ms < 1000) {
+        return `${Math.round(Math.max(0, ms))}ms`;
+    }
+    const seconds = ms / 1000;
+    const rounded = Math.round(seconds * 10) / 10;
+    return `${Number.isInteger(rounded) ? rounded.toFixed(0) : rounded.toFixed(1)}s`;
+}
+/**
+ * `<lyra-thinking-panel>` — a collapsible panel for an AI agent's
+ * intermediate reasoning/"thinking" transcript, kept visually and
+ * semantically distinct from its final response. Same collapsible
+ * header-button-plus-region shape as `<lyra-source-list>`; the default slot
+ * is entirely free-form (a consumer-composed `<lyra-streaming-text>`,
+ * `<lyra-markdown>`, or plain text) — this component has no dependency on
+ * either and imposes no structure on what's slotted.
+ *
+ * `mode` (`'live'` while reasoning is actively streaming in, `'post-hoc'`
+ * once it's complete and being reviewed after the fact) drives two concrete
+ * behavior differences, not just a styling hook:
+ * - **Header hint.** While `duration-ms` is unset, `'live'` shows a pulsing
+ *   "Thinking…" placeholder in `[part="duration"]`; `'post-hoc'` shows
+ *   nothing there instead (a finished review with no known duration has
+ *   nothing useful to say in that slot). Once `duration-ms` is set, both
+ *   modes show the same static `"Thought for …"` text — a `'post-hoc'`
+ *   consumer that captured a duration is free to supply it too.
+ * - **Auto-scroll.** Only `'live'` mode auto-follows new content appended to
+ *   the default slot while `expanded` (see below); `'post-hoc'` never
+ *   scrolls on its own, since reviewing finished reasoning is expected to
+ *   start from the top like reading any other completed document. This
+ *   library otherwise defaults to *not* editorializing about a host's data
+ *   (see `<lyra-empty>`'s plain-`description` stance), but scroll position
+ *   is presentation, not data, so this one behavior difference earns its
+ *   keep rather than being left as a bare visual/semantic hint the host
+ *   would have to reimplement identically itself.
+ *
+ * Live-mode auto-scroll ("stick to bottom") is the classic chat-transcript
+ * convention: while `mode="live"` and `expanded`, new content keeps the
+ * panel scrolled to its latest line — *unless* the user has manually
+ * scrolled up to (re-)read earlier content, in which case their position is
+ * never yanked away from them. This is tracked continuously via a `scroll`
+ * listener on `[part="body"]` (not recomputed from the mutation itself,
+ * which necessarily observes the DOM only *after* it has already changed):
+ * every user-driven scroll records whether the body was left within
+ * `NEAR_BOTTOM_PX` of its own max scroll position, and only a mutation that
+ * arrives while that's still true triggers a follow-up scroll-to-bottom.
+ * Opening an already-`'live'` panel (or one that later becomes `'live'`)
+ * always resets this to "anchored" and jumps to the latest content, the same
+ * way a chat app's own transcript does when you re-open it.
+ *
+ * New content is detected via a `MutationObserver` on this element's own
+ * light DOM (`childList`+`subtree`+`characterData`) rather than the default
+ * slot's `slotchange` event, because `slotchange` only fires when the set of
+ * top-level assigned nodes changes — never for a text node mutating *inside*
+ * an already-slotted element, which is the more likely shape for streamed
+ * reasoning (a consumer appending chunks to an existing node's `textContent`
+ * rather than re-slotting a whole new element per token). The one thing this
+ * can't see is a mutation entirely inside a slotted custom element's own
+ * shadow root (e.g. a `<lyra-markdown>` re-rendering its shadow tree after a
+ * `content` property change) — Shadow DOM encapsulation blocks that by
+ * design, and there is no way for this component to reach across that
+ * boundary. A slotted element whose *own* internal updates should drive this
+ * panel's auto-scroll needs to append/mutate visible light-DOM text itself
+ * (as `<lyra-streaming-text>` is expected to), or the host can call this
+ * panel's own `scrollToBottom()` directly.
+ *
+ * `aria-controls` linking the header to the body region uses `nextId()`
+ * (`../../internal/a11y.js`) for a collision-safe id, the same convention
+ * `<lyra-source-list>` and `<lyra-widget>` already establish for every
+ * toggle-controls-region pairing in this library.
+ *
+ * @customElement lyra-thinking-panel
+ * @slot - The reasoning/thinking content.
+ * @event lyra-toggle - The header was activated, expanding or collapsing the
+ * panel. `detail: { expanded }` — same event name and shape as
+ * `<lyra-source-list>`'s own `lyra-toggle`.
+ * @csspart base - The outer container.
+ * @csspart header - The clickable header (`<button>`) toggling `expanded`.
+ * @csspart label - The `label` text.
+ * @csspart duration - The formatted duration / "Thinking…" placeholder, when shown.
+ * @csspart toggle - The chevron indicator inside the header.
+ * @csspart body - The wrapper around the default slot, `hidden` while collapsed.
+ */
+export class LyraThinkingPanel extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Header text. */
+        this.label = 'Thinking';
+        /** Whether the reasoning transcript is currently shown. Starts collapsed,
+         *  matching `<lyra-source-list>`'s default -- a consumer running `'live'`
+         *  reasoning sets this `true` itself to stream it in view as it arrives. */
+        this.expanded = false;
+        /** `'live'` while reasoning is actively streaming in right now; `'post-hoc'`
+         *  once it's complete and being reviewed after the fact. See the class doc
+         *  for the concrete behavior differences this drives. */
+        this.mode = 'live';
+        this.bodyId = nextId('thinking-panel-body');
+        // Whether the body was left within NEAR_BOTTOM_PX of its own max scroll
+        // position the last time a real (user-driven) scroll was recorded -- see
+        // onScroll(). Starts `true` so a panel that mounts already `expanded` and
+        // `mode="live"` follows its very first streamed content by default,
+        // before any scroll event has ever fired.
+        this.stickToBottom = true;
+        this.onScroll = (e) => {
+            const body = e.currentTarget;
+            this.stickToBottom = body.scrollHeight - body.scrollTop - body.clientHeight <= NEAR_BOTTOM_PX;
+        };
+        this.onContentMutated = () => {
+            if (this.mode !== 'live' || !this.expanded || !this.stickToBottom)
+                return;
+            // Coalesce to at most one scroll-to-bottom per animation frame -- a fast
+            // token stream can otherwise fire many mutation records in quick
+            // succession, each individually cheap to react to but wasteful (and
+            // visually janky) to lay out for separately.
+            if (this.scrollRafId !== undefined)
+                return;
+            this.scrollRafId = requestAnimationFrame(() => {
+                this.scrollRafId = undefined;
+                this.scrollToBottom();
+            });
+        };
+        this.toggle = () => {
+            this.expanded = !this.expanded;
+            this.emit('lyra-toggle', { expanded: this.expanded });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        // Watches this element's own light-DOM subtree, not the shadow-DOM
+        // [part="body"] wrapper -- the slotted reasoning content actually lives
+        // here, as this element's children. See the class doc for why this
+        // (rather than `slotchange`) is what detects streamed-in content.
+        this.contentObserver = new MutationObserver(this.onContentMutated);
+        this.contentObserver.observe(this, { childList: true, subtree: true, characterData: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.contentObserver?.disconnect();
+        this.contentObserver = undefined;
+        if (this.scrollRafId !== undefined) {
+            cancelAnimationFrame(this.scrollRafId);
+            this.scrollRafId = undefined;
+        }
+    }
+    updated(changed) {
+        if (changed.has('expanded') && this.expanded && this.mode === 'live') {
+            // Opening a live panel always jumps straight to the newest content and
+            // resets the sticky-bottom flag, so it starts following again
+            // regardless of wherever the body happened to be scrolled the last
+            // time it was collapsed. `'post-hoc'` deliberately skips this -- see
+            // the class doc's Auto-scroll section.
+            this.stickToBottom = true;
+            this.scrollToBottom();
+        }
+    }
+    /** Scrolls the body to its current bottom immediately (no smooth-scroll
+     *  animation, deliberately -- see onContentMutated()'s rAF-coalescing
+     *  comment for why an instant jump reads better than a stack of competing
+     *  smooth scrolls under a fast token stream). Safe to call directly, e.g.
+     *  from a host that wants to force a jump-to-latest action of its own. */
+    scrollToBottom() {
+        const body = this.renderRoot.querySelector('[part="body"]');
+        if (!body)
+            return;
+        body.scrollTop = body.scrollHeight;
+    }
+    get durationDisplay() {
+        if (this.durationMs != null && Number.isFinite(this.durationMs)) {
+            return { text: `Thought for ${formatDuration(this.durationMs)}`, pending: false };
+        }
+        return this.mode === 'live' ? { text: 'Thinking…', pending: true } : null;
+    }
+    render() {
+        const duration = this.durationDisplay;
+        return html `
+      <div part="base">
+        <button
+          part="header"
+          type="button"
+          aria-expanded=${this.expanded ? 'true' : 'false'}
+          aria-controls=${this.bodyId}
+          @click=${this.toggle}
+        >
+          <span part="toggle" aria-hidden="true">${chevronIcon()}</span>
+          <span part="label">${this.label}</span>
+          ${duration
+            ? html `<span part="duration" ?data-pending=${duration.pending}
+                >${duration.pending ? html `<span class="pending-dot" aria-hidden="true"></span>` : nothing}${duration.text}</span
+              >`
+            : nothing}
+        </button>
+        <div part="body" id=${this.bodyId} ?hidden=${!this.expanded} @scroll=${this.onScroll}>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraThinkingPanel.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraThinkingPanel.prototype, "expanded", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraThinkingPanel.prototype, "mode", void 0);
+__decorate([
+    property({ type: Number, attribute: 'duration-ms' })
+], LyraThinkingPanel.prototype, "durationMs", void 0);
+defineElement('thinking-panel', LyraThinkingPanel);

package/dist/components/thinking-panel/thinking-panel.styles.d.ts

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