@aceshooting/lyra-ui 1.2.0 → 2.0.0

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;
+    }
+}

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

@@ -0,0 +1,288 @@
+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 { defineElement } from '../../internal/prefix.js';
+import { place } from '../../internal/positioner.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',
+};
+/** `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.
+ *
+ * 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`. */
+        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.onDetailSlotChange = (e) => {
+            this.hasDetailSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.showTooltip = () => {
+            if (!this.hasDetailSlot || this.tooltipOpen)
+                return;
+            this.tooltipOpen = true;
+        };
+        // Unconditional on blur/mouseleave, with no "did the pointer move into the
+        // tooltip itself" check -- 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 this stays as simple as a
+        // native `title` attribute's show/hide instead of adding a second
+        // pointer-tracking region.
+        this.hideTooltip = () => {
+            if (!this.tooltipOpen)
+                return;
+            this.tooltipOpen = false;
+        };
+        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).
+            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?.();
+    }
+    get accessibleLabel() {
+        const parts = [this.name || 'Tool call'];
+        if (this.summary)
+            parts.push(this.summary);
+        parts.push(STATUS_LABEL[this.status]);
+        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);
+        return html `
+      <button
+        part="base"
+        type="button"
+        aria-label=${this.getAttribute('aria-label') || this.accessibleLabel}
+        @click=${this.onClick}
+        @mouseenter=${this.showTooltip}
+        @mouseleave=${this.hideTooltip}
+        @focus=${this.showTooltip}
+        @blur=${this.hideTooltip}
+        @keydown=${this.onKeyDown}
+      >
+        <span part="icon" aria-hidden="true">
+          <slot name="icon">${this.icon ? this.icon : STATUS_ICON[this.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[this.status]}</span>
+          <span part="duration" ?hidden=${!hasDuration}>${hasDuration ? formatDuration(this.durationMs) : nothing}</span>
+        </span>
+      </button>
+      <div part="tooltip" 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 })
+], 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);
+defineElement('tool-call-chip', LyraToolCallChip);

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

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