@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/tool-approval-dialog/tool-approval-dialog.js

@@ -0,0 +1,403 @@
+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, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { lockScroll } from '../../internal/scroll-lock.js';
+import { nextId } from '../../internal/a11y.js';
+import { styles } from './tool-approval-dialog.styles.js';
+import '../json-viewer/json-viewer.js';
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+// Shadow-piercing so a slotted custom element's real focusable target, and
+// this component's own directly-rendered <lyra-json-viewer>'s internal
+// toggle/copy buttons, are found even though neither the slotted host tag
+// nor <lyra-json-viewer> itself matches FOCUSABLE_SELECTOR. Deliberately
+// duplicated from lyra-dialog's/lyra-tool-select-dialog's identical helper
+// rather than imported/shared -- this component is its own standalone
+// overlay and must not depend on either (see this file's class doc).
+function collectFocusable(el) {
+    const result = [];
+    if (el.matches(FOCUSABLE_SELECTOR)) {
+        result.push(el);
+    }
+    if (el instanceof HTMLSlotElement) {
+        for (const assigned of el.assignedElements({ flatten: true })) {
+            result.push(...collectFocusable(assigned));
+        }
+        return result;
+    }
+    const container = el.shadowRoot ?? el;
+    for (const child of Array.from(container.children)) {
+        result.push(...collectFocusable(child));
+    }
+    return result;
+}
+/** Whether `el` is actually laid out/paintable -- `checkVisibility()` (falling
+ *  back to `getClientRects().length` where unsupported) correctly follows
+ *  flattened-tree/slot assignment, unlike `offsetParent`. Mirrors
+ *  lyra-dialog's/lyra-tool-select-dialog's identical helper. */
+function isRendered(el) {
+    return el.checkVisibility ? el.checkVisibility() : el.getClientRects().length > 0;
+}
+/**
+ * `<lyra-tool-approval-dialog>` — a human-in-the-loop gate: presents one
+ * proposed tool/function call (`toolName` + `args`) and blocks an agent from
+ * executing it until a person explicitly approves or denies it, with an
+ * optional inline "edit the arguments before approving" step.
+ *
+ * This is its own standalone overlay implementation (`role="dialog"`,
+ * focus-trapped, Escape/backdrop-dismissible, scroll-locking) rather than
+ * nesting a `<lyra-dialog>` in its shadow template — see `<lyra-dialog>`'s
+ * own header comment for why a new overlay component in this library
+ * duplicates that pattern locally instead of composing the previous one.
+ *
+ * Approve/Deny/Edit are built-in chrome (not a `footer` slot a consumer must
+ * assemble) — this component's interaction shape is fixed enough (there is
+ * exactly one correct set of actions for "approve this call") that requiring
+ * every consumer to re-build it would just be boilerplate. A `footer` slot is
+ * still offered for *supplementary* content a consumer wants alongside those
+ * buttons (e.g. a "remember this choice for this tool" checkbox) — its
+ * content renders to the start of the action row, before Deny/Edit/Approve.
+ *
+ * Editing: while `editable`, an Edit button swaps the read-only
+ * `<lyra-json-viewer>` for a plain `<textarea>` pre-filled with
+ * `JSON.stringify(args, null, 2)`. Every keystroke is re-validated with
+ * `JSON.parse` — the Approve button is `disabled` for as long as the current
+ * textarea content fails to parse, so a malformed edit can never be silently
+ * approved as either the broken text or a stale copy of the original args.
+ * The same button relabels to "Cancel" while editing; clicking it discards
+ * the draft entirely and returns to the read-only view of the *original*
+ * `args` — there is no separate "save" step independent of Approve itself.
+ * Both `editing` and any in-progress draft reset back to the read-only view
+ * every time the dialog transitions from closed to open, so a reused
+ * instance never leaks one proposal's half-finished edit into the next.
+ *
+ * Initial focus deliberately does *not* land on Approve (see `updated()`):
+ * approving a tool call is a consequential, potentially irreversible action,
+ * so a user who opens this dialog and reflexively presses Enter/Space before
+ * reading anything should deny, not approve. Deny gets the initial focus
+ * instead — the same "focus the safe action" convention a native destructive-
+ * confirmation dialog (delete, discard, etc.) typically follows for its own
+ * Cancel button — rather than the inert dialog panel, which would need an
+ * extra Tab press before *any* action is reachable at all.
+ *
+ * @customElement lyra-tool-approval-dialog
+ * @slot footer - Optional supplementary content (e.g. a "remember this
+ * choice" checkbox), rendered before the built-in Deny/Edit/Approve buttons.
+ * @event lyra-approve - The call was approved. `detail: { args }` — the
+ * current, already-parsed arguments object: the original `args` prop, or (if
+ * an edit was in progress) the user's edited-and-validated version. Always
+ * followed by `lyra-close` with reason `'approve'`.
+ * @event lyra-deny - The call was denied (no detail). Always followed by
+ * `lyra-close` with reason `'deny'`.
+ * @event lyra-close - `detail: ToolApprovalDialogCloseReason`. Fired exactly
+ * once per dismissal — via Escape, a backdrop click, the Approve/Deny
+ * buttons, or a `close()` call — so there is one consistent "this dialog is
+ * now closed" signal regardless of which path triggered it.
+ * @csspart backdrop - The full-viewport scrim behind the panel.
+ * @csspart panel - The dialog panel itself (`role="dialog"` while open).
+ * @csspart header - The wrapper around the heading.
+ * @csspart tool-name - The `toolName` text within the heading.
+ * @csspart body - The wrapper around the args view/editor.
+ * @csspart args-view - The read-only `<lyra-json-viewer>` shown while not editing.
+ * @csspart args-editor - The raw-JSON `<textarea>` shown while editing.
+ * @csspart error - The inline "invalid JSON" message, shown only while editing with unparseable content.
+ * @csspart footer - The action row wrapping the `footer` slot and the built-in buttons.
+ * @csspart deny-button - The built-in Deny button.
+ * @csspart edit-button - The built-in Edit/Cancel toggle button (only rendered while `editable`).
+ * @csspart approve-button - The built-in Approve button — `disabled` while an in-progress edit is invalid JSON.
+ */
+export class LyraToolApprovalDialog extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
+        this.open = false;
+        /** The proposed tool/function's name, e.g. `web_search`. Drives the heading and the dialog's accessible name. */
+        this.toolName = '';
+        /** The proposed call's arguments — any JSON-serializable value, rendered via `<lyra-json-viewer>` (or, while editing, stringified into the textarea). */
+        this.args = {};
+        /** Whether an "Edit" affordance is offered at all. When `false`, `args` is always shown read-only and can never be changed before approval. */
+        this.editable = true;
+        this.editing = false;
+        /** The textarea's current raw text while editing — deliberately independent of `args` until Approve is pressed, so a malformed in-progress edit never overwrites it. */
+        this.draftText = '';
+        /** `JSON.parse` failure message for `draftText`, or `''` while it parses cleanly. Empty string (not `undefined`) so it can drive `?hidden` directly. */
+        this.draftError = '';
+        this.titleId = nextId('tool-approval-dialog-title');
+        this.errorId = nextId('tool-approval-dialog-error');
+        this.onBackdropClick = () => {
+            this.close('backdrop');
+        };
+        this.onDocKeyDown = (e) => {
+            if (!this.open)
+                return;
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.close('escape');
+                return;
+            }
+            if (e.key !== 'Tab')
+                return;
+            const focusable = this.getFocusableElements();
+            if (focusable.length === 0) {
+                e.preventDefault();
+                return;
+            }
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            const active = this.getActiveElement();
+            if (e.shiftKey && active === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && active === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        this.toggleEdit = () => {
+            if (this.editing) {
+                this.editing = false;
+                this.draftText = '';
+                this.draftError = '';
+            }
+            else {
+                this.editing = true;
+                this.draftText = this.stringifyArgs();
+                this.draftError = '';
+            }
+        };
+        this.onDraftInput = (e) => {
+            const value = e.target.value;
+            this.draftText = value;
+            try {
+                JSON.parse(value);
+                this.draftError = '';
+            }
+            catch (err) {
+                this.draftError = err instanceof Error ? err.message : 'Invalid JSON.';
+            }
+        };
+        this.onApprove = () => {
+            let currentArgs = this.args;
+            if (this.editing) {
+                // The Approve button is disabled whenever draftError is non-empty, so
+                // this should always succeed -- the try/catch is defense-in-depth
+                // against a state desync rather than an expected path.
+                try {
+                    currentArgs = JSON.parse(this.draftText);
+                }
+                catch {
+                    return;
+                }
+            }
+            this.emit('lyra-approve', { args: currentArgs });
+            this.close('approve');
+        };
+        this.onDeny = () => {
+            this.emit('lyra-deny');
+            this.close('deny');
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate(changed) {
+        if (changed.has('open')) {
+            if (this.open) {
+                // Captured here (before render) rather than from a click event on
+                // some specific internal control -- like lyra-dialog, a trigger
+                // typically lives *outside* this component entirely, so "whatever
+                // had focus right before open" is the only generally correct
+                // definition of "the trigger".
+                const active = this.getActiveElement();
+                this.lastTrigger = active instanceof HTMLElement ? active : undefined;
+                this.releaseScrollLock = lockScroll();
+                document.addEventListener('keydown', this.onDocKeyDown);
+                // Every open starts fresh in the read-only view -- a reused instance
+                // must never carry a half-finished edit (or its error state) over
+                // from whatever the previous proposal was.
+                this.editing = false;
+                this.draftText = '';
+                this.draftError = '';
+            }
+            else {
+                this.releaseScrollLock?.();
+                this.releaseScrollLock = undefined;
+                document.removeEventListener('keydown', this.onDocKeyDown);
+            }
+        }
+        // A consumer flipping editable off mid-edit (e.g. a policy change
+        // pushed while this dialog happens to be open) must not leave an
+        // unreachable edit UI on screen with no Edit/Cancel button left to
+        // dismiss it.
+        if (changed.has('editable') && !this.editable && this.editing) {
+            this.editing = false;
+            this.draftText = '';
+            this.draftError = '';
+        }
+    }
+    // Runs after render (not willUpdate) so [part="panel"]/[part="deny-button"]
+    // have already landed in the DOM before the focus calls below can rely on
+    // them -- mirrors lyra-dialog's identical ordering rationale.
+    updated(changed) {
+        if (changed.has('open') && this.open) {
+            // Deliberately the Deny button, not "the first focusable element" --
+            // see the class doc's focus-management paragraph.
+            const deny = this.shadowRoot?.querySelector('[part="deny-button"]');
+            if (deny) {
+                deny.focus();
+            }
+            else {
+                this.shadowRoot?.querySelector('[part="panel"]')?.focus();
+            }
+            return;
+        }
+        if (changed.has('editing') && this.editing) {
+            // Entering edit mode is a deliberate request to start typing --
+            // steering focus into the textarea beats leaving it on the Edit
+            // button the click already left it on.
+            this.shadowRoot?.querySelector('[part="args-editor"]')?.focus();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // A reconnect (e.g. a drag-and-drop reparent keeping this same element
+        // instance) fires disconnectedCallback then connectedCallback
+        // synchronously with no update in between, so willUpdate never reruns to
+        // notice `open` is still true -- restore the scroll lock/trap it dropped.
+        if (this.hasUpdated && this.open && !this.releaseScrollLock) {
+            this.releaseScrollLock = lockScroll();
+            document.addEventListener('keydown', this.onDocKeyDown);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        document.removeEventListener('keydown', this.onDocKeyDown);
+    }
+    /**
+     * Close the dialog and return focus to whatever had it before the dialog
+     * opened. `reason` is forwarded as the `lyra-close` detail — built-in
+     * triggers pass `'escape'`/`'backdrop'`/`'approve'`/`'deny'`; a consumer's
+     * own close affordance (e.g. a footer-slotted button) should call this
+     * directly with its own reason string, so every dismissal path funnels
+     * through the same event instead of the consumer having to also toggle
+     * `open` itself.
+     */
+    close(reason = 'api') {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.emit('lyra-close', reason);
+        this.lastTrigger?.focus();
+    }
+    // Bounds Tab/Shift+Tab to the panel while open. Order follows the body
+    // (the json-viewer's own toggle/copy buttons, or the textarea, depending
+    // on `editing`), then the footer row (the footer slot, then Deny/Edit/
+    // Approve) -- the same order the flattened tree already tabs through.
+    // collectFocusable()'s own FOCUSABLE_SELECTOR check excludes the Approve
+    // button for free while it's `disabled`, so an invalid in-progress edit
+    // can't be Tab-trapped into.
+    getFocusableElements() {
+        const root = this.shadowRoot;
+        if (!root)
+            return [];
+        const body = root.querySelector('[part="body"]');
+        const footer = root.querySelector('[part="footer"]');
+        return [...(body ? collectFocusable(body) : []), ...(footer ? collectFocusable(footer) : [])].filter(isRendered);
+    }
+    getActiveElement() {
+        let active = document.activeElement;
+        while (active) {
+            const inner = active.shadowRoot?.activeElement ?? null;
+            if (!inner)
+                break;
+            active = inner;
+        }
+        return active;
+    }
+    stringifyArgs() {
+        try {
+            // JSON.stringify(undefined, ...) returns the *value* undefined, not a
+            // string -- the ?? covers that alongside the try/catch's circular-
+            // reference case, so the textarea always opens with real text.
+            return JSON.stringify(this.args, null, 2) ?? 'null';
+        }
+        catch {
+            return 'null';
+        }
+    }
+    render() {
+        const hasError = this.editing && this.draftError.length > 0;
+        return html `
+      <div part="backdrop" @click=${this.onBackdropClick}></div>
+      <div
+        part="panel"
+        role=${this.open ? 'dialog' : nothing}
+        aria-modal=${this.open ? 'true' : nothing}
+        aria-labelledby=${this.titleId}
+        tabindex="-1"
+      >
+        <div part="header">
+          <h2 id=${this.titleId}>Approve <span part="tool-name">${this.toolName || 'tool'}</span> call?</h2>
+        </div>
+        <div part="body">
+          ${this.editing
+            ? html `
+                <textarea
+                  part="args-editor"
+                  spellcheck="false"
+                  autocomplete="off"
+                  aria-label="Tool call arguments (JSON)"
+                  aria-invalid=${hasError ? 'true' : 'false'}
+                  aria-describedby=${hasError ? this.errorId : nothing}
+                  .value=${this.draftText}
+                  @input=${this.onDraftInput}
+                ></textarea>
+                <p part="error" id=${this.errorId} role="alert" ?hidden=${!hasError}>${this.draftError}</p>
+              `
+            : html `<lyra-json-viewer part="args-view" .data=${this.args}></lyra-json-viewer>`}
+        </div>
+        <div part="footer">
+          <slot name="footer"></slot>
+          <button part="deny-button" type="button" @click=${this.onDeny}>Deny</button>
+          ${this.editable
+            ? html `<button part="edit-button" type="button" @click=${this.toggleEdit}>
+                ${this.editing ? 'Cancel' : 'Edit'}
+              </button>`
+            : nothing}
+          <button part="approve-button" type="button" ?disabled=${hasError} @click=${this.onApprove}>
+            Approve
+          </button>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraToolApprovalDialog.prototype, "open", void 0);
+__decorate([
+    property({ attribute: 'tool-name' })
+], LyraToolApprovalDialog.prototype, "toolName", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraToolApprovalDialog.prototype, "args", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraToolApprovalDialog.prototype, "editable", void 0);
+__decorate([
+    state()
+], LyraToolApprovalDialog.prototype, "editing", void 0);
+__decorate([
+    state()
+], LyraToolApprovalDialog.prototype, "draftText", void 0);
+__decorate([
+    state()
+], LyraToolApprovalDialog.prototype, "draftError", void 0);
+defineElement('tool-approval-dialog', LyraToolApprovalDialog);

package/dist/components/tool-approval-dialog/tool-approval-dialog.styles.d.ts

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

package/dist/components/tool-approval-dialog/tool-approval-dialog.styles.js

@@ -0,0 +1,160 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    /* Backdrop scrim color -- component-specific so a host can retheme it
+       without a raw literal leaking into the public API (no shared
+       --wa-*-overlay token exists in the design system to resolve through,
+       same rationale as lyra-dialog's --lyra-dialog-overlay-color and
+       lyra-tool-select-dialog's --lyra-tool-select-dialog-overlay-color). */
+    --lyra-tool-approval-dialog-overlay-color: rgb(0 0 0 / 0.5);
+    /* Contained here (rather than a bare font-family literal on the
+       textarea) so a host page can retheme it -- same rationale as
+       lyra-json-viewer's --lyra-json-viewer-font; raw args are code, not
+       prose, so the editor gets the same monospace treatment as that
+       viewer's own tree rendering. */
+    --lyra-tool-approval-dialog-mono-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+    padding: var(--lyra-space-l);
+  }
+  :host([open]) {
+    display: flex;
+  }
+  [part='backdrop'] {
+    position: absolute;
+    inset: 0;
+    background: var(--lyra-tool-approval-dialog-overlay-color);
+  }
+  [part='panel'] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    inline-size: min(32rem, 100%);
+    max-block-size: min(36rem, 100%);
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+    overflow: hidden;
+  }
+  [part='header'] {
+    padding: var(--lyra-space-l) var(--lyra-space-l) 0;
+  }
+  [part='header'] h2 {
+    margin: 0;
+    font-size: 1.0625rem;
+    font-weight: 600;
+  }
+  [part='tool-name'] {
+    font-family: var(--lyra-tool-approval-dialog-mono-font);
+    font-weight: 700;
+    color: var(--lyra-color-brand);
+    word-break: break-word;
+  }
+
+  [part='body'] {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+    padding: var(--lyra-space-m) var(--lyra-space-l) var(--lyra-space-l);
+    overflow: auto;
+  }
+  [part='args-view'] {
+    /* lyra-json-viewer grows with its content by default (its own
+       max-height is 'none'); this component's [part='body'] is what caps
+       and scrolls it instead, so it stays consistent with the plain
+       [part='args-editor'] textarea below, which has no scroll cap of its
+       own either. */
+    flex: 1 1 auto;
+    min-block-size: 0;
+  }
+  [part='args-editor'] {
+    flex: 1 1 auto;
+    min-block-size: 10rem;
+    box-sizing: border-box;
+    resize: vertical;
+    padding: var(--lyra-space-s) var(--lyra-space-m);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: inherit;
+    font-family: var(--lyra-tool-approval-dialog-mono-font);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+  }
+  [part='args-editor']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='args-editor'][aria-invalid='true'] {
+    border-color: var(--lyra-color-danger);
+  }
+  [part='error'] {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--lyra-color-danger);
+  }
+  [part='error'][hidden] {
+    display: none;
+  }
+
+  [part='footer'] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--lyra-space-s);
+    padding: var(--lyra-space-m) var(--lyra-space-l);
+    border-block-start: 1px solid var(--lyra-color-border);
+  }
+  [part='footer'] ::slotted(*) {
+    /* Any consumer-supplied footer content sits ahead of the built-in
+       buttons and soaks up the row's remaining space, so it reads as
+       start-aligned while Deny/Edit/Approve stay pinned to the end (the
+       row itself is justify-content: flex-end for the empty-slot case). */
+    margin-inline-end: auto;
+  }
+
+  [part='deny-button'],
+  [part='edit-button'],
+  [part='approve-button'] {
+    font: inherit;
+    font-size: 0.875rem;
+    padding: var(--lyra-space-xs) var(--lyra-space-m);
+    border-radius: var(--lyra-radius);
+    cursor: pointer;
+    border: 1px solid var(--lyra-color-border);
+  }
+  [part='deny-button'],
+  [part='edit-button'] {
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+  }
+  [part='deny-button']:hover,
+  [part='edit-button']:hover {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='approve-button'] {
+    background: var(--lyra-color-brand);
+    color: var(--lyra-color-on-brand);
+    border-color: var(--lyra-color-brand);
+  }
+  [part='approve-button']:hover:not(:disabled) {
+    filter: brightness(1.1);
+  }
+  [part='approve-button']:disabled {
+    cursor: not-allowed;
+    opacity: var(--lyra-opacity-disabled);
+  }
+  [part='deny-button']:focus-visible,
+  [part='edit-button']:focus-visible,
+  [part='approve-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+`;

package/dist/components/tool-call-chip/tool-call-chip.d.ts

@@ -0,0 +1,89 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/** Same status vocabulary as `<lyra-tool-result-dialog>`, so a call's chip
+ *  and its detail dialog always agree on icon/label/tone. */
+export type ToolCallStatus = 'pending' | 'running' | 'success' | 'error' | 'denied';
+export interface ToolChipSelectDetail {
+    name: string;
+    callId: string;
+}
+/**
+ * `<lyra-tool-call-chip>` — a compact inline pill representing one tool/
+ * function call an agent made mid-conversation, e.g.
+ * `web_search: Searching web…` with a `running` spinner. It owns no detail
+ * surface of its own: clicking (or Enter/Space-activating) it only fires
+ * `lyra-tool-chip-select` — a consumer wires that to opening a
+ * `<lyra-tool-result-dialog>` (or anything else) at the call site. Keeping
+ * the two decoupled means a chip can be reused wherever a compact call
+ * summary is useful, with or without a detail surface behind it.
+ *
+ * The default slot is *not* the chip's visible content — the chip's own
+ * label is always built from `name`/`summary`/`status`/`duration-ms`. It's
+ * reserved for optional rich detail content (e.g. the tool's raw arguments,
+ * a short preview) shown in a floating tooltip on hover/focus, positioned
+ * with `internal/positioner.js`'s `place()` the same way `<lyra-combobox>`
+ * positions its listbox. No tooltip is shown at all when the slot carries no
+ * content — hovering an empty chip does nothing.
+ *
+ * The `icon` slot overrides the built-in per-status glyph entirely via the
+ * platform's own slot-fallback-content mechanism (`<slot
+ * name="icon">${fallback}</slot>` — the same pattern `<lyra-stat>`'s
+ * `caption` slot and `<lyra-file-input>`'s default slot already use):
+ * whatever is assigned to `slot="icon"` wins; otherwise the `icon` prop is
+ * rendered as a literal hint (e.g. an emoji); otherwise the built-in glyph
+ * for the current `status` is used.
+ *
+ * @customElement lyra-tool-call-chip
+ * @slot - Rich tooltip/detail content, shown on hover/focus. Nothing renders
+ * (no hover affordance at all) when this slot is empty.
+ * @slot icon - Overrides the built-in status glyph entirely.
+ * @event lyra-tool-chip-select - The chip was activated (click or Enter/Space
+ * while focused). `detail: { name, callId }`.
+ * @csspart base - The clickable pill (`<button>`).
+ * @csspart icon - Wrapper around the status glyph / `icon` slot.
+ * @csspart label - Wrapper around `category`, `name` and `summary`.
+ * @csspart category - The optional grouping label.
+ * @csspart name - The tool/function name.
+ * @csspart summary - The short status text.
+ * @csspart meta - Wrapper around `status-text` and `duration`.
+ * @csspart status-text - The visible text twin of the status glyph/color — carries the state in text, not just color.
+ * @csspart duration - The formatted `duration-ms`, when set.
+ * @csspart tooltip - The floating detail popup (only meaningful while open).
+ */
+export declare class LyraToolCallChip extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The tool/function name, e.g. `web_search`. */
+    name: string;
+    /** Optional grouping label, e.g. `research`. */
+    category: string;
+    /** The call's current lifecycle state — drives the glyph, color, and `status-text`. */
+    status: ToolCallStatus;
+    /** Short human-readable status text, e.g. `Searching web…`. */
+    summary: string;
+    /** How long the call took, in milliseconds. Omitted from the chip entirely when unset. */
+    durationMs?: number;
+    /** Literal icon hint (e.g. an emoji) used when the `icon` slot is empty — see the class doc's
+     *  icon-precedence note. Ignored once anything is assigned to `slot="icon"`. */
+    icon: string;
+    /** Unique identifier for this specific invocation — echoed back in `lyra-tool-chip-select`'s
+     *  detail so a listener can correlate the click with the call it fired for. */
+    callId: string;
+    private hasDetailSlot;
+    private tooltipOpen;
+    private cleanupPositioner?;
+    protected willUpdate(): void;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private onDetailSlotChange;
+    private showTooltip;
+    private hideTooltip;
+    private onKeyDown;
+    private onClick;
+    private get accessibleLabel();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tool-call-chip': LyraToolCallChip;
+    }
+}