@aceshooting/lyra-ui 1.1.0 → 2.0.0

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

@@ -0,0 +1,117 @@
+import { css } from 'lit';
+// Shares its collapsible-header shape (border/radius/hover/focus-ring, the
+// rotating chevron) with lyra-source-list's styles almost verbatim -- the two
+// are siblings in the same "collapsible region behind a header button"
+// family and are meant to sit comfortably next to each other in a message.
+export const styles = css `
+  :host {
+    display: block;
+    /* Consumer-overridable cap on how tall the reasoning transcript grows
+       before it scrolls internally, e.g. via ::part(body) or by overriding
+       this custom property directly -- not exposed as a component prop
+       since it's a pure layout knob, not something a template branches on. */
+    --lyra-thinking-panel-max-block-size: 16rem;
+  }
+  [part='base'] {
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    overflow: hidden;
+  }
+  [part='header'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    inline-size: 100%;
+    padding: var(--lyra-space-s) var(--lyra-space-m);
+    border: none;
+    background: none;
+    color: var(--lyra-color-text);
+    font: inherit;
+    font-weight: 600;
+    font-size: 0.875rem;
+    text-align: start;
+    cursor: pointer;
+  }
+  [part='header']:hover {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='header']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: calc(-1 * var(--lyra-focus-ring-offset));
+  }
+  [part='toggle'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    transition: transform var(--lyra-transition-fast);
+  }
+  :host([expanded]) [part='toggle'] {
+    transform: rotate(90deg);
+  }
+  [part='label'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [part='duration'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35em;
+    flex: 0 0 auto;
+    font-weight: 400;
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  /* Actively streaming with no duration yet -- a full-opacity brand-colored
+     label plus a separate decorative pulse dot, deliberately *not* animating
+     the text's own opacity the way lyra-typing-indicator's pulse variant
+     does: that dims it well below AA contrast for part of every cycle, fine
+     for a purely decorative shape but not for text carrying real content
+     ("Thinking…"). */
+  [part='duration'][data-pending] {
+    color: var(--lyra-color-brand);
+  }
+  .pending-dot {
+    inline-size: 0.375rem;
+    block-size: 0.375rem;
+    border-radius: 50%;
+    background: currentColor;
+    animation: lyra-thinking-panel-pulse var(--lyra-transition-base) infinite;
+  }
+  @keyframes lyra-thinking-panel-pulse {
+    0%,
+    100% {
+      opacity: 0.4;
+      transform: scale(0.85);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  [part='body'] {
+    max-block-size: var(--lyra-thinking-panel-max-block-size);
+    overflow-y: auto;
+    padding: var(--lyra-space-m);
+    border-block-start: 1px solid var(--lyra-color-border);
+    color: var(--lyra-color-text-quiet);
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+  [part='body'][hidden] {
+    display: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='toggle'] {
+      transition: none !important;
+    }
+    .pending-dot {
+      animation: none !important;
+      opacity: 1;
+      transform: none;
+    }
+  }
+`;

package/dist/components/toast/toast-item.d.ts

@@ -36,6 +36,7 @@ export declare class LyraToastItem extends LyraElement {
     private showRafId?;
     private showAnimTimer?;
     private hideAnimTimer?;
+    private resolvePendingHide?;
     private hovering;
     private focused;
     private hiding;

package/dist/components/toast/toast-item.js

@@ -76,8 +76,12 @@ export class LyraToastItem extends LyraElement {
             if (!isFinite(this.duration) || this.duration <= 0)
                 return;
             const remaining = this.duration - this.elapsedMs;
-            if (remaining <= 0)
+            // A duration shortened below the already-elapsed time must hide promptly,
+            // not silently never schedule anything.
+            if (remaining <= 0) {
+                void this.hide();
                 return;
+            }
             this.startedAt = performance.now();
             this.timer = window.setTimeout(() => this.hide(), remaining);
         };
@@ -124,11 +128,12 @@ export class LyraToastItem extends LyraElement {
         // `elapsedMs`/`duration` are re-read fresh every time the timer is
         // (re)scheduled, so a `duration` change while paused (hovering/focused)
         // or before the timer has ever started needs no action here -- the next
-        // resumeTimer()/startTimer() call already picks up the new value. Only a
-        // timer that's actively counting down right now is running against a
-        // setTimeout scheduled for the *old* duration, so that's the one case
-        // that needs an explicit reschedule.
-        if (changed.has('duration') && this.timerStarted && this.timer !== undefined) {
+        // resumeTimer()/startTimer() call already picks up the new value.
+        // Re-evaluate on any duration change once the show sequence has started,
+        // not only while a timer is already actively counting down -- this also
+        // covers duration flipping from disabled (0/Infinity) back to a positive
+        // value, which previously never had `this.timer !== undefined` to gate on.
+        if (changed.has('duration') && this.timerStarted && !this.hovering && !this.focused) {
             this.pauseTimer();
             this.resumeTimer();
         }
@@ -136,6 +141,11 @@ export class LyraToastItem extends LyraElement {
     firstUpdated() {
         this.showRafId = requestAnimationFrame(() => {
             this.showRafId = undefined;
+            // hide() may have already run synchronously before this frame fired
+            // (e.g. a caller creates the toast and immediately dismisses it) --
+            // don't resurrect the show sequence on top of an already-hiding item.
+            if (this.hiding)
+                return;
             this.setAttribute('data-visible', '');
             this.emit('lyra-show');
             this.showAnimTimer = window.setTimeout(() => {
@@ -158,6 +168,12 @@ export class LyraToastItem extends LyraElement {
         if (this.hideAnimTimer !== undefined) {
             clearTimeout(this.hideAnimTimer);
             this.hideAnimTimer = undefined;
+            // hide()'s own promise is awaiting this timer firing to resolve() --
+            // a disconnect (e.g. the toast's ancestor is removed from the DOM,
+            // bypassing this.remove()) must still let that promise settle instead
+            // of leaving it pending forever.
+            this.resolvePendingHide?.();
+            this.resolvePendingHide = undefined;
         }
         this.clearTimer();
     }
@@ -203,11 +219,20 @@ export class LyraToastItem extends LyraElement {
         this.emit('lyra-hide');
         this.removeAttribute('data-visible');
         await new Promise((resolve) => {
+            this.resolvePendingHide = resolve;
             this.hideAnimTimer = window.setTimeout(() => {
                 this.hideAnimTimer = undefined;
+                this.resolvePendingHide = undefined;
                 resolve();
             }, animMs());
         });
+        // An out-of-band disconnect (see disconnectedCallback) resolves this same
+        // promise so callers awaiting hide() never hang, but it does so *without*
+        // this having reached its normal completion -- guard against then still
+        // emitting a "finished hiding" event (and redundantly calling remove())
+        // for a node that's already been torn down some other way.
+        if (!this.isConnected)
+            return;
         this.emit('lyra-after-hide');
         this.remove();
     }

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

@@ -0,0 +1,130 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../json-viewer/json-viewer.js';
+/**
+ * Reason the dialog was dismissed, forwarded as the `lyra-close` event detail
+ * -- mirrors `<lyra-dialog>`'s own `DialogCloseReason` shape. `'escape'`/
+ * `'backdrop'` come from the dialog's own built-in dismiss triggers,
+ * `'approve'`/`'deny'` from the built-in action buttons (fired in addition
+ * to, and immediately after, their own dedicated `lyra-approve`/`lyra-deny`
+ * event -- see the class doc), and any other string is whatever a caller
+ * passes to `close()` directly.
+ */
+export type ToolApprovalDialogCloseReason = 'escape' | 'backdrop' | 'approve' | 'deny' | 'api' | string;
+/**
+ * `<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 declare class LyraToolApprovalDialog extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
+    open: boolean;
+    /** The proposed tool/function's name, e.g. `web_search`. Drives the heading and the dialog's accessible name. */
+    toolName: string;
+    /** The proposed call's arguments — any JSON-serializable value, rendered via `<lyra-json-viewer>` (or, while editing, stringified into the textarea). */
+    args: unknown;
+    /** Whether an "Edit" affordance is offered at all. When `false`, `args` is always shown read-only and can never be changed before approval. */
+    editable: boolean;
+    private editing;
+    /** 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. */
+    private draftText;
+    /** `JSON.parse` failure message for `draftText`, or `''` while it parses cleanly. Empty string (not `undefined`) so it can drive `?hidden` directly. */
+    private draftError;
+    private releaseScrollLock?;
+    private lastTrigger?;
+    private readonly titleId;
+    private readonly errorId;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * 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?: ToolApprovalDialogCloseReason): void;
+    private onBackdropClick;
+    private onDocKeyDown;
+    private getFocusableElements;
+    private getActiveElement;
+    private stringifyArgs;
+    private toggleEdit;
+    private onDraftInput;
+    private onApprove;
+    private onDeny;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tool-approval-dialog': LyraToolApprovalDialog;
+    }
+}