@aceshooting/lyra-ui 2.0.0 → 2.2.0

package/dist/components/tool-result-dialog/tool-result-dialog.class.d.ts

@@ -0,0 +1,123 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/** Same status vocabulary as `<lyra-tool-call-chip>`. */
+export type ToolResultStatus = 'pending' | 'running' | 'success' | 'error' | 'denied';
+/**
+ * Reason the dialog was dismissed, forwarded as the `lyra-dialog-close` event
+ * detail -- mirrors `<lyra-dialog>`'s own `DialogCloseReason` shape.
+ * `'escape'`/`'backdrop'` come from the dialog's own built-in dismiss
+ * triggers, `'close-button'` from the built-in header close button, and any
+ * other string is whatever a caller passes to `close()` directly (e.g. a
+ * consumer's own footer action).
+ */
+export type ToolResultDialogCloseReason = 'escape' | 'backdrop' | 'close-button' | 'api' | (string & Record<never, never>);
+/**
+ * `<lyra-tool-result-dialog>` — a full tool-call detail overlay: a status/
+ * duration header plus a `body` slot where a consumer typically places a
+ * `<lyra-tabs>` with Input/Preview/JSON/Raw panels. This component knows
+ * nothing about what's inside that slot — it only supplies the modal chrome
+ * around it.
+ *
+ * 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:
+ * slot-forwarding into a nested `<lyra-dialog>` would put a forwarding
+ * `<slot>` where a light-DOM-scanning descendant (e.g. a slotted
+ * `<lyra-tabs>`'s own `Array.from(this.children)` scan) expects real
+ * projected content.
+ *
+ * `maximized` toggles between a constrained modal size and a near-fullscreen
+ * size within the same open dialog and open/close lifecycle — unlike
+ * `<lyra-widget>`'s fullscreen mode, there's no non-modal resting state to
+ * return to, so no separate scroll-lock/focus-trap bookkeeping is needed for
+ * the transition itself.
+ *
+ * Stacking: opening more than one of these dialogs at once is supported --
+ * Escape and the Tab focus trap only ever act on the topmost open instance,
+ * so instances beneath it stay open and untouched until the one on top closes.
+ *
+ * @customElement lyra-tool-result-dialog
+ * @slot body - The dialog's main content — typically a `<lyra-tabs>` with
+ * Input/Preview/JSON/Raw panels, entirely consumer-assembled.
+ * @slot footer - Optional action buttons, rendered in a bottom row.
+ * @event lyra-dialog-close - `detail: ToolResultDialogCloseReason`. Fired
+ * exactly once per dismissal, via Escape, a backdrop click, the built-in
+ * close button, or a `close()` call.
+ * @event lyra-maximize-change - `detail: boolean` (the new `maximized`
+ * state), fired when the header's maximize/restore toggle is clicked.
+ * @csspart backdrop - The full-viewport scrim behind the panel.
+ * @csspart panel - The dialog panel itself (`role="dialog"` while open).
+ * @csspart header - The row containing the tool name, status, duration, and toggle/close buttons.
+ * @csspart title - The wrapper around the tool name, status, and duration.
+ * @csspart tool-name - The `tool-name` text.
+ * @csspart status - The status badge (icon + text).
+ * @csspart duration - The formatted `duration-ms` text.
+ * @csspart header-actions - The wrapper around the maximize and close buttons.
+ * @csspart maximize-button - The built-in maximize/restore toggle button.
+ * @csspart close-button - The built-in close button.
+ * @csspart body - The wrapper around the `body` slot.
+ * @csspart footer - The wrapper around the `footer` slot.
+ */
+export declare class LyraToolResultDialog extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Whether the dialog is open. Set this (or call `close()`) — there is no
+     * separate `show()`/`hide()` pair. Both paths restore focus to the trigger
+     * element identically; only `close()` additionally fires
+     * `lyra-dialog-close`, since a direct assignment carries no reason string
+     * to attach to that event.
+     */
+    open: boolean;
+    /** The tool's name, rendered prominently in the header. */
+    toolName: string;
+    /**
+     * The tool call's current lifecycle state — drives the header's status
+     * badge. An out-of-union value (e.g. a stray `status` attribute, or a
+     * direct property assignment from an untyped caller) is treated as
+     * `'pending'` rather than crashing render.
+     */
+    status: ToolResultStatus;
+    /** How long the call took, in milliseconds. Omitted from the header entirely when unset. */
+    durationMs?: number;
+    /** Near-fullscreen presentation of the same open dialog. */
+    maximized: boolean;
+    private hasFooterSlot;
+    private releaseScrollLock?;
+    private overlay?;
+    private readonly titleId;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onFooterSlotChange;
+    /**
+     * Close the dialog and return focus to whatever had it before the dialog
+     * opened. `reason` is forwarded as the `lyra-dialog-close` detail --
+     * built-in triggers pass `'escape'`/`'backdrop'`/`'close-button'`; a
+     * consumer's own close affordance (e.g. a footer action 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.
+     *
+     * Focus restoration follows the `open` lifecycle, so a direct `.open =
+     * false` assignment restores focus identically to calling `close()` -- the
+     * one thing a direct assignment still can't do is fire
+     * `lyra-dialog-close`, since there's no reason string to attach without
+     * going through this method.
+     */
+    close(reason?: ToolResultDialogCloseReason): void;
+    private onBackdropClick;
+    private onCloseButtonClick;
+    private toggleMaximized;
+    private activateOverlay;
+    private deactivateOverlay;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tool-result-dialog': LyraToolResultDialog;
+    }
+}
+//# sourceMappingURL=tool-result-dialog.class.d.ts.map

package/dist/components/tool-result-dialog/tool-result-dialog.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-result-dialog.class.d.ts","sourceRoot":"","sources":["../../../src/components/tool-result-dialog/tool-result-dialog.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEpB,MAAM,KAAK,CAAC;AAEb,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAO7D,yDAAyD;AACzD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEtF;;;;;;;GAOG;AACH,MAAM,MAAM,2BAA2B,GACnC,QAAQ,GACR,UAAU,GACV,cAAc,GACd,KAAK,GACL,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;AA4HpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBAAa,oBAAqB,SAAQ,WAAW;IACnD,MAAM,CAAC,MAAM,iCAAgC;IAE7C;;;;;;OAMG;IACyC,IAAI,UAAS;IAEzD,2DAA2D;IACrB,QAAQ,SAAM;IAEpD;;;;;OAKG;IACsD,MAAM,EAAE,gBAAgB,CAAa;IAE9F,4FAA4F;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IAE1E,4DAA4D;IAChB,SAAS,UAAS;IAErD,OAAO,CAAC,aAAa,CAAS;IAEvC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,OAAO,CAAC,CAAgB;IAChC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAsC;IAE9D,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAWlD;IAID,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAI/C;IAED,iBAAiB,IAAI,IAAI,CAexB;IAED,oBAAoB,IAAI,IAAI,CAK3B;IAED,OAAO,CAAC,kBAAkB,CAExB;IAEF;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,MAAM,GAAE,2BAAmC,GAAG,IAAI,CAIvD;IAED,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,iBAAiB;IAOzB,MAAM,IAAI,cAAc,CA4CvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}

package/dist/components/tool-result-dialog/tool-result-dialog.class.js

@@ -0,0 +1,357 @@
+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 { lockScroll } from '../../internal/scroll-lock.js';
+import { activateOverlay } from '../../internal/overlay-manager.js';
+import { nextId } from '../../internal/a11y.js';
+import { closeIcon, expandIcon } from '../../internal/icons.js';
+import { styles } from './tool-result-dialog.styles.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding
+// tool-result-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.
+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>
+  `;
+}
+/** A "restore from maximized" glyph -- the mirror image of `expandIcon()`,
+ *  arrows pointing inward toward the center instead of outward toward the
+ *  corners, same as lyra-widget's fullscreen-exit affordance reuses
+ *  `closeIcon()` for the analogous "undo the expanded state" action. A
+ *  distinct glyph (not `closeIcon()`) is used here because this dialog
+ *  already has its own, separate close button right next to it -- two
+ *  identical "x" icons side by side would be ambiguous about which one
+ *  dismisses the dialog and which one only un-maximizes it. */
+function shrinkIcon() {
+    return icon(svg `
+    <polyline points="4 14 10 14 10 20"></polyline>
+    <polyline points="20 10 14 10 14 4"></polyline>
+    <line x1="14" y1="10" x2="21" y2="3"></line>
+    <line x1="3" y1="21" x2="10" y2="14"></line>
+  `);
+}
+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 `[status="running"] [part="status"] 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));
+/**
+ * Normalizes `status` at the attribute boundary -- an out-of-union value
+ * (markup a caller doesn't fully control, or a raw string from an untyped
+ * consumer) falls back to `'pending'` here rather than reaching
+ * STATUS_ICON/STATUS_LABEL as a bad lookup key and crashing `render()`. This
+ * only covers attribute parsing; a `.status = ...` assignment made directly
+ * as a property bypasses converters entirely, which is why `render()` below
+ * also falls back at the STATUS_ICON/STATUS_LABEL lookup itself.
+ */
+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. */
+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-result-dialog>` — a full tool-call detail overlay: a status/
+ * duration header plus a `body` slot where a consumer typically places a
+ * `<lyra-tabs>` with Input/Preview/JSON/Raw panels. This component knows
+ * nothing about what's inside that slot — it only supplies the modal chrome
+ * around it.
+ *
+ * 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:
+ * slot-forwarding into a nested `<lyra-dialog>` would put a forwarding
+ * `<slot>` where a light-DOM-scanning descendant (e.g. a slotted
+ * `<lyra-tabs>`'s own `Array.from(this.children)` scan) expects real
+ * projected content.
+ *
+ * `maximized` toggles between a constrained modal size and a near-fullscreen
+ * size within the same open dialog and open/close lifecycle — unlike
+ * `<lyra-widget>`'s fullscreen mode, there's no non-modal resting state to
+ * return to, so no separate scroll-lock/focus-trap bookkeeping is needed for
+ * the transition itself.
+ *
+ * Stacking: opening more than one of these dialogs at once is supported --
+ * Escape and the Tab focus trap only ever act on the topmost open instance,
+ * so instances beneath it stay open and untouched until the one on top closes.
+ *
+ * @customElement lyra-tool-result-dialog
+ * @slot body - The dialog's main content — typically a `<lyra-tabs>` with
+ * Input/Preview/JSON/Raw panels, entirely consumer-assembled.
+ * @slot footer - Optional action buttons, rendered in a bottom row.
+ * @event lyra-dialog-close - `detail: ToolResultDialogCloseReason`. Fired
+ * exactly once per dismissal, via Escape, a backdrop click, the built-in
+ * close button, or a `close()` call.
+ * @event lyra-maximize-change - `detail: boolean` (the new `maximized`
+ * state), fired when the header's maximize/restore toggle is clicked.
+ * @csspart backdrop - The full-viewport scrim behind the panel.
+ * @csspart panel - The dialog panel itself (`role="dialog"` while open).
+ * @csspart header - The row containing the tool name, status, duration, and toggle/close buttons.
+ * @csspart title - The wrapper around the tool name, status, and duration.
+ * @csspart tool-name - The `tool-name` text.
+ * @csspart status - The status badge (icon + text).
+ * @csspart duration - The formatted `duration-ms` text.
+ * @csspart header-actions - The wrapper around the maximize and close buttons.
+ * @csspart maximize-button - The built-in maximize/restore toggle button.
+ * @csspart close-button - The built-in close button.
+ * @csspart body - The wrapper around the `body` slot.
+ * @csspart footer - The wrapper around the `footer` slot.
+ */
+export class LyraToolResultDialog extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the dialog is open. Set this (or call `close()`) — there is no
+         * separate `show()`/`hide()` pair. Both paths restore focus to the trigger
+         * element identically; only `close()` additionally fires
+         * `lyra-dialog-close`, since a direct assignment carries no reason string
+         * to attach to that event.
+         */
+        this.open = false;
+        /** The tool's name, rendered prominently in the header. */
+        this.toolName = '';
+        /**
+         * The tool call's current lifecycle state — drives the header's status
+         * badge. An out-of-union value (e.g. a stray `status` attribute, or a
+         * direct property assignment from an untyped caller) is treated as
+         * `'pending'` rather than crashing render.
+         */
+        this.status = 'pending';
+        /** Near-fullscreen presentation of the same open dialog. */
+        this.maximized = false;
+        this.hasFooterSlot = false;
+        this.titleId = nextId('tool-result-dialog-title');
+        this.onFooterSlotChange = (e) => {
+            this.hasFooterSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onBackdropClick = () => {
+            this.overlay?.dismissBackdrop();
+        };
+        this.onCloseButtonClick = () => {
+            this.close('close-button');
+        };
+        this.toggleMaximized = () => {
+            this.maximized = !this.maximized;
+            this.emit('lyra-maximize-change', this.maximized);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate(changed) {
+        if (!this.hasUpdated) {
+            this.hasFooterSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'footer');
+        }
+        if (changed.has('open')) {
+            if (this.open) {
+                this.activateOverlay();
+            }
+            else {
+                this.deactivateOverlay();
+            }
+        }
+    }
+    // Runs after render so the manager can resolve the panel and its composed
+    // focus targets, including controls projected through either slot.
+    updated(changed) {
+        if (changed.has('open') && this.open) {
+            this.overlay?.focusInitial();
+        }
+    }
+    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) {
+            if (this.overlay?.isActive()) {
+                this.overlay.resume();
+                this.releaseScrollLock ??= lockScroll(this.ownerDocument);
+            }
+            else {
+                this.activateOverlay();
+            }
+            queueMicrotask(() => this.overlay?.focusInitial());
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlay?.suspend();
+    }
+    /**
+     * Close the dialog and return focus to whatever had it before the dialog
+     * opened. `reason` is forwarded as the `lyra-dialog-close` detail --
+     * built-in triggers pass `'escape'`/`'backdrop'`/`'close-button'`; a
+     * consumer's own close affordance (e.g. a footer action 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.
+     *
+     * Focus restoration follows the `open` lifecycle, so a direct `.open =
+     * false` assignment restores focus identically to calling `close()` -- the
+     * one thing a direct assignment still can't do is fire
+     * `lyra-dialog-close`, since there's no reason string to attach without
+     * going through this method.
+     */
+    close(reason = 'api') {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.emit('lyra-dialog-close', reason);
+    }
+    activateOverlay() {
+        if (this.overlay?.isActive())
+            return;
+        this.releaseScrollLock ??= lockScroll(this.ownerDocument);
+        this.overlay = activateOverlay({
+            host: this,
+            panel: () => this.shadowRoot?.querySelector('[part="panel"]') ?? null,
+            onEscape: () => this.close('escape'),
+            onBackdrop: () => this.close('backdrop'),
+        });
+    }
+    deactivateOverlay() {
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlay?.deactivate();
+        this.overlay = undefined;
+    }
+    render() {
+        const hasDuration = this.durationMs != null;
+        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">
+          <div part="title">
+            <span part="tool-name" id=${this.titleId}>${this.toolName || 'Tool call'}</span>
+            <span part="status"
+              >${(STATUS_ICON[this.status] ?? STATUS_ICON.pending)()}<span
+                >${STATUS_LABEL[this.status] ?? STATUS_LABEL.pending}</span
+              ></span
+            >
+            ${hasDuration ? html `<span part="duration">${formatDuration(this.durationMs)}</span>` : nothing}
+          </div>
+          <div part="header-actions">
+            <button
+              part="maximize-button"
+              type="button"
+              aria-pressed=${this.maximized ? 'true' : 'false'}
+              aria-label=${this.maximized ? 'Restore' : 'Maximize'}
+              @click=${this.toggleMaximized}
+            >
+              ${this.maximized ? shrinkIcon() : expandIcon()}
+            </button>
+            <button part="close-button" type="button" aria-label=${this.localize('close')} @click=${this.onCloseButtonClick}>
+              ${closeIcon()}
+            </button>
+          </div>
+        </div>
+        <div part="body">
+          <slot name="body"></slot>
+        </div>
+        <div part="footer" ?hidden=${!this.hasFooterSlot}>
+          <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraToolResultDialog.prototype, "open", void 0);
+__decorate([
+    property({ attribute: 'tool-name' })
+], LyraToolResultDialog.prototype, "toolName", void 0);
+__decorate([
+    property({ reflect: true, converter: statusConverter })
+], LyraToolResultDialog.prototype, "status", void 0);
+__decorate([
+    property({ type: Number, attribute: 'duration-ms' })
+], LyraToolResultDialog.prototype, "durationMs", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraToolResultDialog.prototype, "maximized", void 0);
+__decorate([
+    state()
+], LyraToolResultDialog.prototype, "hasFooterSlot", void 0);
+//# sourceMappingURL=tool-result-dialog.class.js.map

package/dist/components/tool-result-dialog/tool-result-dialog.class.js.map

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

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

@@ -1,102 +1,2 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-/** Same status vocabulary as `<lyra-tool-call-chip>`. */
-export type ToolResultStatus = 'pending' | 'running' | 'success' | 'error' | 'denied';
-/**
- * Reason the dialog was dismissed, forwarded as the `lyra-dialog-close` event
- * detail -- mirrors `<lyra-dialog>`'s own `DialogCloseReason` shape.
- * `'escape'`/`'backdrop'` come from the dialog's own built-in dismiss
- * triggers, `'close-button'` from the built-in header close button, and any
- * other string is whatever a caller passes to `close()` directly (e.g. a
- * consumer's own footer action).
- */
-export type ToolResultDialogCloseReason = 'escape' | 'backdrop' | 'close-button' | 'api' | string;
-/**
- * `<lyra-tool-result-dialog>` — a full tool-call detail overlay: a status/
- * duration header plus a `body` slot where a consumer typically places a
- * `<lyra-tabs>` with Input/Preview/JSON/Raw panels. This component knows
- * nothing about what's inside that slot — it only supplies the modal chrome
- * around it.
- *
- * 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:
- * slot-forwarding into a nested `<lyra-dialog>` would put a forwarding
- * `<slot>` where a light-DOM-scanning descendant (e.g. a slotted
- * `<lyra-tabs>`'s own `Array.from(this.children)` scan) expects real
- * projected content.
- *
- * `maximized` toggles between a constrained modal size and a near-fullscreen
- * size within the same open dialog and open/close lifecycle — unlike
- * `<lyra-widget>`'s fullscreen mode, there's no non-modal resting state to
- * return to, so no separate scroll-lock/focus-trap bookkeeping is needed for
- * the transition itself.
- *
- * @customElement lyra-tool-result-dialog
- * @slot body - The dialog's main content — typically a `<lyra-tabs>` with
- * Input/Preview/JSON/Raw panels, entirely consumer-assembled.
- * @slot footer - Optional action buttons, rendered in a bottom row.
- * @event lyra-dialog-close - `detail: ToolResultDialogCloseReason`. Fired
- * exactly once per dismissal, via Escape, a backdrop click, the built-in
- * close button, or a `close()` call.
- * @event lyra-maximize-change - `detail: boolean` (the new `maximized`
- * state), fired when the header's maximize/restore toggle is clicked.
- * @csspart backdrop - The full-viewport scrim behind the panel.
- * @csspart panel - The dialog panel itself (`role="dialog"` while open).
- * @csspart header - The row containing the tool name, status, duration, and toggle/close buttons.
- * @csspart title - The wrapper around the tool name, status, and duration.
- * @csspart tool-name - The `tool-name` text.
- * @csspart status - The status badge (icon + text).
- * @csspart duration - The formatted `duration-ms` text.
- * @csspart header-actions - The wrapper around the maximize and close buttons.
- * @csspart maximize-button - The built-in maximize/restore toggle button.
- * @csspart close-button - The built-in close button.
- * @csspart body - The wrapper around the `body` slot.
- * @csspart footer - The wrapper around the `footer` slot.
- */
-export declare class LyraToolResultDialog 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 tool's name, rendered prominently in the header. */
-    toolName: string;
-    /** The tool call's current lifecycle state — drives the header's status badge. */
-    status: ToolResultStatus;
-    /** How long the call took, in milliseconds. Omitted from the header entirely when unset. */
-    durationMs?: number;
-    /** Near-fullscreen presentation of the same open dialog. */
-    maximized: boolean;
-    private hasFooterSlot;
-    private releaseScrollLock?;
-    private lastTrigger?;
-    private readonly titleId;
-    protected willUpdate(changed: PropertyValues): void;
-    protected updated(changed: PropertyValues): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private onFooterSlotChange;
-    /**
-     * Close the dialog and return focus to whatever had it before the dialog
-     * opened. `reason` is forwarded as the `lyra-dialog-close` detail --
-     * built-in triggers pass `'escape'`/`'backdrop'`/`'close-button'`; a
-     * consumer's own close affordance (e.g. a footer action 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?: ToolResultDialogCloseReason): void;
-    private onBackdropClick;
-    private onCloseButtonClick;
-    private toggleMaximized;
-    private onDocKeyDown;
-    private getFocusableElements;
-    private getActiveElement;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-tool-result-dialog': LyraToolResultDialog;
-    }
-}
+export * from './tool-result-dialog.class.js';
+//# sourceMappingURL=tool-result-dialog.d.ts.map

package/dist/components/tool-result-dialog/tool-result-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-result-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/tool-result-dialog/tool-result-dialog.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}