@aceshooting/lyra-ui 2.1.0 → 2.3.0

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

@@ -1,349 +1,5 @@
-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';
+export * from './tool-call-chip.class.js';
+import { LyraToolCallChip } from './tool-call-chip.class.js';
 import { defineElement } from '../../internal/prefix.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);
 defineElement('tool-call-chip', LyraToolCallChip);
+//# sourceMappingURL=tool-call-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool-call-chip.js","sourceRoot":"","sources":["../../../src/components/tool-call-chip/tool-call-chip.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool-call-chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tool-call-chip/tool-call-chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyMlB,CAAC"}

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

@@ -43,14 +43,14 @@ export const styles = css `
     gap: var(--lyra-space-xs);
     max-inline-size: 100%;
     box-sizing: border-box;
-    padding: 0.25rem var(--lyra-space-s);
-    border: 1px solid var(--lyra-tool-call-chip-border);
-    border-radius: 999px;
+    padding: var(--lyra-size-0-25rem) var(--lyra-space-s);
+    border: var(--lyra-border-width-thin) solid var(--lyra-tool-call-chip-border);
+    border-radius: var(--lyra-radius-pill);
     background: var(--lyra-tool-call-chip-bg);
     color: var(--lyra-color-text);
     font: inherit;
-    font-size: 0.8125rem;
-    line-height: 1.3;
+    font-size: var(--lyra-font-size-sm);
+    line-height: var(--lyra-line-height-snug);
     text-align: start;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
@@ -92,7 +92,7 @@ export const styles = css `
   [part='label'] {
     display: inline-flex;
     align-items: baseline;
-    gap: 0.3em;
+    gap: var(--lyra-size-0-3em);
     flex: 1 1 auto;
     min-inline-size: 0;
     overflow: hidden;
@@ -105,14 +105,14 @@ export const styles = css `
        tints even though it comfortably passes against the plain surface
        background used by the resting/denied states. */
     color: var(--lyra-color-text);
-    font-size: 0.6875rem;
-    font-weight: 600;
+    font-size: var(--lyra-size-0-6875rem);
+    font-weight: var(--lyra-font-weight-semibold);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: var(--lyra-size-0-04em);
   }
   [part='category']::after {
     content: '·';
-    margin-inline-start: 0.3em;
+    margin-inline-start: var(--lyra-size-0-3em);
   }
   [part='name'] {
     flex: 0 1 auto;
@@ -120,11 +120,11 @@ export const styles = css `
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-weight: 600;
+    font-weight: var(--lyra-font-weight-semibold);
   }
   [part='summary'] {
     flex: 1 1 auto;
-    min-inline-size: 3ch;
+    min-inline-size: var(--lyra-size-3ch);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -139,15 +139,15 @@ export const styles = css `
     display: inline-flex;
     flex: 0 0 auto;
     align-items: baseline;
-    gap: 0.4em;
+    gap: var(--lyra-size-0-4em);
     margin-inline-start: auto;
-    font-size: 0.6875rem;
+    font-size: var(--lyra-size-0-6875rem);
   }
   [part='status-text'] {
     color: var(--lyra-tool-call-chip-accent);
-    font-weight: 600;
+    font-weight: var(--lyra-font-weight-semibold);
     text-transform: uppercase;
-    letter-spacing: 0.03em;
+    letter-spacing: var(--lyra-size-0-03em);
     white-space: nowrap;
   }
   [part='duration'] {
@@ -164,16 +164,16 @@ export const styles = css `
      chasing a fade. */
   [part='tooltip'] {
     position: fixed;
-    z-index: 900;
+    z-index: var(--lyra-layer-dropdown);
     box-sizing: border-box;
-    max-inline-size: min(90vw, 24rem);
+    max-inline-size: min(90vw, var(--lyra-size-24rem));
     padding: var(--lyra-space-s) var(--lyra-space-m);
     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);
-    font-size: 0.8125rem;
-    line-height: 1.4;
+    font-size: var(--lyra-font-size-sm);
+    line-height: var(--lyra-line-height-1-4);
     color: var(--lyra-color-text);
   }
 
@@ -201,3 +201,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=tool-call-chip.styles.js.map

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

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