@aceshooting/lyra-ui 2.0.0 → 2.2.0

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

@@ -6,20 +6,23 @@ export const styles = css `
        --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);
+    --lyra-tool-approval-dialog-overlay-color: var(--lyra-color-overlay);
     /* 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;
+    --lyra-tool-approval-dialog-mono-font: var(--lyra-font-mono);
     display: none;
     position: fixed;
     inset: 0;
-    z-index: 1000;
+    z-index: var(--lyra-overlay-stack-index, var(--lyra-layer-modal));
     align-items: center;
     justify-content: center;
-    padding: var(--lyra-space-l);
+    padding-block-start: max(var(--lyra-space-l), var(--lyra-safe-area-top));
+    padding-block-end: max(var(--lyra-space-l), var(--lyra-safe-area-bottom));
+    padding-inline-start: max(var(--lyra-space-l), var(--lyra-safe-area-inline-start));
+    padding-inline-end: max(var(--lyra-space-l), var(--lyra-safe-area-inline-end));
   }
   :host([open]) {
     display: flex;
@@ -33,10 +36,10 @@ export const styles = css `
     position: relative;
     display: flex;
     flex-direction: column;
-    inline-size: min(32rem, 100%);
-    max-block-size: min(36rem, 100%);
+    inline-size: min(var(--lyra-size-32rem), 100%);
+    max-block-size: min(var(--lyra-size-36rem), 100%);
     background: var(--lyra-color-surface);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     box-shadow: var(--lyra-shadow);
     overflow: hidden;
@@ -46,12 +49,12 @@ export const styles = css `
   }
   [part='header'] h2 {
     margin: 0;
-    font-size: 1.0625rem;
-    font-weight: 600;
+    font-size: var(--lyra-size-1-0625rem);
+    font-weight: var(--lyra-font-weight-semibold);
   }
   [part='tool-name'] {
     font-family: var(--lyra-tool-approval-dialog-mono-font);
-    font-weight: 700;
+    font-weight: var(--lyra-font-weight-bold);
     color: var(--lyra-color-brand);
     word-break: break-word;
   }
@@ -76,17 +79,17 @@ export const styles = css `
   }
   [part='args-editor'] {
     flex: 1 1 auto;
-    min-block-size: 10rem;
+    min-block-size: var(--lyra-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: var(--lyra-border-width-thin) 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;
+    font-size: var(--lyra-font-size-sm);
+    line-height: var(--lyra-line-height-normal);
   }
   [part='args-editor']:focus-visible {
     outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
@@ -97,7 +100,7 @@ export const styles = css `
   }
   [part='error'] {
     margin: 0;
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-danger);
   }
   [part='error'][hidden] {
@@ -110,7 +113,7 @@ export const styles = css `
     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);
+    border-block-start: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='footer'] ::slotted(*) {
     /* Any consumer-supplied footer content sits ahead of the built-in
@@ -124,11 +127,11 @@ export const styles = css `
   [part='edit-button'],
   [part='approve-button'] {
     font: inherit;
-    font-size: 0.875rem;
+    font-size: var(--lyra-font-size-md-sm);
     padding: var(--lyra-space-xs) var(--lyra-space-m);
     border-radius: var(--lyra-radius);
     cursor: pointer;
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='deny-button'],
   [part='edit-button'] {
@@ -158,3 +161,4 @@ export const styles = css `
     outline-offset: var(--lyra-focus-ring-offset);
   }
 `;
+//# sourceMappingURL=tool-approval-dialog.styles.js.map

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

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

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

@@ -0,0 +1,106 @@
+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. Hover and keyboard focus are
+ * tracked as independent reasons to keep the tooltip open (mirrors
+ * `<lyra-citation-badge>`'s popover), so releasing one modality while the
+ * other is still active doesn't close it, and the trigger button's
+ * `aria-describedby` points at the tooltip's id whenever it's open and has
+ * content, so the association reaches assistive tech too.
+ *
+ * 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`. Invalid runtime values use the pending presentation.
+     */
+    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 readonly tooltipId;
+    private cleanupPositioner?;
+    private hovering;
+    private focused;
+    protected willUpdate(): void;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private onDetailSlotChange;
+    private showTooltip;
+    private hideTooltip;
+    private onMouseEnter;
+    private onMouseLeave;
+    private onFocus;
+    private onBlur;
+    private onKeyDown;
+    private onClick;
+    private get effectiveStatus();
+    private get accessibleLabel();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tool-call-chip': LyraToolCallChip;
+    }
+}
+//# sourceMappingURL=tool-call-chip.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool-call-chip.class.d.ts","sourceRoot":"","sources":["../../../src/components/tool-call-chip/tool-call-chip.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EAEnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAM7D;6DAC6D;AAC7D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpF,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAwGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;IAC/C,MAAM,CAAC,MAAM,iCAAgC;IAE7C,iDAAiD;IACrC,IAAI,SAAM;IAEtB,gDAAgD;IACpC,QAAQ,SAAM;IAE1B;;;OAGG;IACsD,MAAM,EAAE,cAAc,CAAa;IAE5F,+DAA+D;IACnD,OAAO,SAAM;IAEzB,0FAA0F;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IAE1E;oFACgF;IACpE,IAAI,SAAM;IAEtB;mFAC+E;IAC3C,MAAM,SAAM;IAQvC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAC9D,OAAO,CAAC,iBAAiB,CAAC,CAAa;IAMvC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,OAAO,CAAS;IAExB,SAAS,CAAC,UAAU,IAAI,IAAI,CAI3B;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAU/C;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAED,OAAO,CAAC,kBAAkB,CAOxB;IAEF,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,MAAM,CAIZ;IAEF,OAAO,CAAC,SAAS,CAWf;IAEF,OAAO,CAAC,OAAO,CAEb;IAEF,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,eAAe,GAM1B;IAED,MAAM,IAAI,cAAc,CAoCvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}

package/dist/components/tool-call-chip/tool-call-chip.class.js

@@ -0,0 +1,348 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, svg, nothing, } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { place } from '../../internal/positioner.js';
+import { nextId } from '../../internal/a11y.js';
+import { styles } from './tool-call-chip.styles.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding
+// tool-call-specific glyphs to that module -- it's off limits here -- so
+// these still read as part of the same visual language as the rest of the
+// library's inline icons. Same approach lyra-checkbox's/lyra-chat-message's
+// own local glyphs take for the identical reason, and deliberately the same
+// shapes lyra-tool-result-dialog's own local glyphs use, so a call reads
+// identically whether it's shown as this inline chip or in that dialog.
+const ICON_VIEW_BOX = '0 0 24 24';
+const ICON_STROKE_WIDTH = '1.75';
+function icon(paths) {
+    return svg `
+    <svg
+      width="1em"
+      height="1em"
+      viewBox=${ICON_VIEW_BOX}
+      fill="none"
+      stroke="currentColor"
+      stroke-width=${ICON_STROKE_WIDTH}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >${paths}</svg>
+  `;
+}
+function pendingIcon() {
+    return icon(svg `<circle cx="12" cy="12" r="9"></circle><polyline points="12 7 12 12 15 14"></polyline>`);
+}
+/** A three-quarter arc, spun by the `:host([status="running"]) [part="icon"] svg`
+ *  CSS animation -- a full circle wouldn't visibly convey rotation. */
+function runningIcon() {
+    return icon(svg `<path d="M21 12a9 9 0 1 1-9-9"></path>`);
+}
+function successIcon() {
+    return icon(svg `<circle cx="12" cy="12" r="9"></circle><polyline points="8 12.5 11 15.5 16 9.5"></polyline>`);
+}
+function errorIcon() {
+    return icon(svg `
+    <circle cx="12" cy="12" r="9"></circle>
+    <line x1="9" y1="9" x2="15" y2="15"></line>
+    <line x1="15" y1="9" x2="9" y2="15"></line>
+  `);
+}
+/** A "blocked" glyph (circle + diagonal slash) -- distinct from `errorIcon()`
+ *  since a denial is a policy rejection, not a runtime failure. */
+function deniedIcon() {
+    return icon(svg `<circle cx="12" cy="12" r="9"></circle><line x1="6" y1="18" x2="18" y2="6"></line>`);
+}
+const STATUS_ICON = {
+    pending: pendingIcon,
+    running: runningIcon,
+    success: successIcon,
+    error: errorIcon,
+    denied: deniedIcon,
+};
+/** Visible (not just color-coded) text for every status. */
+const STATUS_LABEL = {
+    pending: 'Pending',
+    running: 'Running',
+    success: 'Success',
+    error: 'Error',
+    denied: 'Denied',
+};
+const STATUS_VALUES = new Set(Object.keys(STATUS_LABEL));
+const statusConverter = {
+    fromAttribute(value) {
+        return value !== null && STATUS_VALUES.has(value) ? value : 'pending';
+    },
+    toAttribute(value) {
+        return value;
+    },
+};
+/** `820` -> `"820ms"`; `1500` -> `"1.5s"`; `2000` -> `"2s"`. Sub-second
+ *  durations are the common case for a single tool call, so they get the
+ *  more precise unit; once a call runs a full second or longer, trimming to
+ *  (at most) one decimal place of seconds reads better than a 4-5 digit
+ *  millisecond count. Identical algorithm to lyra-tool-result-dialog's own
+ *  `formatDuration` -- duplicated rather than imported (these are two
+ *  independent, separately-consumable components; see this file's header
+ *  comment on the icon glyphs for the same rationale) but kept in lockstep
+ *  so the same call reports the same duration text in both places. */
+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-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. Hover and keyboard focus are
+ * tracked as independent reasons to keep the tooltip open (mirrors
+ * `<lyra-citation-badge>`'s popover), so releasing one modality while the
+ * other is still active doesn't close it, and the trigger button's
+ * `aria-describedby` points at the tooltip's id whenever it's open and has
+ * content, so the association reaches assistive tech too.
+ *
+ * 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 class LyraToolCallChip extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The tool/function name, e.g. `web_search`. */
+        this.name = '';
+        /** Optional grouping label, e.g. `research`. */
+        this.category = '';
+        /**
+         * The call's current lifecycle state — drives the glyph, color, and
+         * `status-text`. Invalid runtime values use the pending presentation.
+         */
+        this.status = 'pending';
+        /** Short human-readable status text, e.g. `Searching web…`. */
+        this.summary = '';
+        /** 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"`. */
+        this.icon = '';
+        /** 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. */
+        this.callId = '';
+        // Same fix lyra-stat's hasIcon/lyra-combobox's hasHintSlot etc. already
+        // establish: a `[part]` always contains a literal `<slot>` child regardless
+        // of assigned content, so `:empty` never matches -- real emptiness is
+        // tracked in JS instead. Only element children count (mirrors lyra-stat's
+        // identical default-slot check) since the tooltip's rich content is
+        // expected to be markup, not a bare text node.
+        this.hasDetailSlot = false;
+        this.tooltipOpen = false;
+        this.tooltipId = nextId('tool-call-chip-tooltip');
+        // Hover and focus are tracked as independent "keep it open" reasons --
+        // mirrors lyra-citation-badge's identical hovering/focused pair for the
+        // same hover/focus preview-popover pattern -- so releasing one (e.g. the
+        // pointer leaving while the chip still has keyboard focus) doesn't close a
+        // tooltip the other modality is still holding open.
+        this.hovering = false;
+        this.focused = false;
+        this.onDetailSlotChange = (e) => {
+            this.hasDetailSlot = e.target.assignedElements({ flatten: true }).length > 0;
+            // The slot can be emptied out from under an already-open tooltip (e.g. a
+            // consumer clearing streamed/async preview content) -- nothing left to
+            // show, so don't leave an empty tooltip floating open regardless of
+            // whether hover/focus is still active.
+            if (!this.hasDetailSlot)
+                this.hideTooltip();
+        };
+        this.onMouseEnter = () => {
+            this.hovering = true;
+            this.showTooltip();
+        };
+        this.onMouseLeave = () => {
+            this.hovering = false;
+            if (this.focused)
+                return;
+            this.hideTooltip();
+        };
+        this.onFocus = () => {
+            this.focused = true;
+            this.showTooltip();
+        };
+        this.onBlur = () => {
+            this.focused = false;
+            if (this.hovering)
+                return;
+            this.hideTooltip();
+        };
+        this.onKeyDown = (e) => {
+            // The native <button> already handles Enter/Space activation on its
+            // own -- this only needs to cover dismissing the (non-native) tooltip,
+            // the same Escape-to-close convention every other popup in this library
+            // follows (see lyra-combobox's onKeyDown). Unconditional close (not
+            // gated on hovering/focused) since Escape is a deliberate dismissal, not
+            // transient pointer/focus travel.
+            if (e.key === 'Escape' && this.tooltipOpen) {
+                e.stopPropagation();
+                this.hideTooltip();
+            }
+        };
+        this.onClick = () => {
+            this.emit('lyra-tool-chip-select', { name: this.name, callId: this.callId });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasDetailSlot = Array.from(this.children).some((el) => !el.hasAttribute('slot'));
+        }
+    }
+    updated(changed) {
+        if (changed.has('tooltipOpen')) {
+            this.cleanupPositioner?.();
+            this.cleanupPositioner = undefined;
+            if (this.tooltipOpen) {
+                const anchor = this.renderRoot.querySelector('[part="base"]');
+                const tooltip = this.renderRoot.querySelector('[part="tooltip"]');
+                if (anchor && tooltip)
+                    this.cleanupPositioner = place(anchor, tooltip, { placement: 'top-start' });
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupPositioner?.();
+    }
+    showTooltip() {
+        if (!this.hasDetailSlot || this.tooltipOpen)
+            return;
+        this.tooltipOpen = true;
+    }
+    // Called both as the actual (unconditional) close -- from onDetailSlotChange
+    // and the Escape handler below, where the tooltip must close regardless of
+    // hover/focus state -- and from onMouseLeave/onBlur once each has already
+    // confirmed the *other* modality isn't still holding the tooltip open. The
+    // default slot is documented as read-only preview content (raw args, a
+    // short snippet), not an interactive surface meant to retain focus/hover of
+    // its own, so there's no "did the pointer move into the tooltip itself"
+    // check needed beyond the hovering/focused pair.
+    hideTooltip() {
+        if (!this.tooltipOpen)
+            return;
+        this.tooltipOpen = false;
+    }
+    get effectiveStatus() {
+        return STATUS_VALUES.has(this.status) ? this.status : 'pending';
+    }
+    get accessibleLabel() {
+        const parts = [this.name || 'Tool call'];
+        if (this.summary)
+            parts.push(this.summary);
+        parts.push(STATUS_LABEL[this.effectiveStatus]);
+        if (this.durationMs != null && Number.isFinite(this.durationMs))
+            parts.push(formatDuration(this.durationMs));
+        return parts.join(' — ');
+    }
+    render() {
+        const hasCategory = this.category.length > 0;
+        const hasSummary = this.summary.length > 0;
+        const hasDuration = this.durationMs != null && Number.isFinite(this.durationMs);
+        const status = this.effectiveStatus;
+        return html `
+      <button
+        part="base"
+        type="button"
+        aria-label=${this.getAttribute('aria-label') || this.accessibleLabel}
+        aria-describedby=${this.hasDetailSlot && this.tooltipOpen ? this.tooltipId : nothing}
+        @click=${this.onClick}
+        @mouseenter=${this.onMouseEnter}
+        @mouseleave=${this.onMouseLeave}
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
+        @keydown=${this.onKeyDown}
+      >
+        <span part="icon" aria-hidden="true">
+          <slot name="icon">${this.icon ? this.icon : STATUS_ICON[status]()}</slot>
+        </span>
+        <span part="label">
+          <span part="category" ?hidden=${!hasCategory}>${this.category}</span>
+          <span part="name">${this.name || 'Tool call'}</span>
+          <span part="summary" ?hidden=${!hasSummary}>${this.summary}</span>
+        </span>
+        <span part="meta">
+          <span part="status-text">${STATUS_LABEL[status]}</span>
+          <span part="duration" ?hidden=${!hasDuration}>${hasDuration ? formatDuration(this.durationMs) : nothing}</span>
+        </span>
+      </button>
+      <div part="tooltip" id=${this.tooltipId} role="tooltip" ?hidden=${!this.tooltipOpen}>
+        <slot @slotchange=${this.onDetailSlotChange}></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraToolCallChip.prototype, "name", void 0);
+__decorate([
+    property()
+], LyraToolCallChip.prototype, "category", void 0);
+__decorate([
+    property({ reflect: true, converter: statusConverter })
+], LyraToolCallChip.prototype, "status", void 0);
+__decorate([
+    property()
+], LyraToolCallChip.prototype, "summary", void 0);
+__decorate([
+    property({ type: Number, attribute: 'duration-ms' })
+], LyraToolCallChip.prototype, "durationMs", void 0);
+__decorate([
+    property()
+], LyraToolCallChip.prototype, "icon", void 0);
+__decorate([
+    property({ attribute: 'call-id' })
+], LyraToolCallChip.prototype, "callId", void 0);
+__decorate([
+    state()
+], LyraToolCallChip.prototype, "hasDetailSlot", void 0);
+__decorate([
+    state()
+], LyraToolCallChip.prototype, "tooltipOpen", void 0);
+//# sourceMappingURL=tool-call-chip.class.js.map

package/dist/components/tool-call-chip/tool-call-chip.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-call-chip.class.js","sourceRoot":"","sources":["../../../src/components/tool-call-chip/tool-call-chip.class.ts"],"names":[],"mappings":"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"}