@aceshooting/lyra-ui 2.0.0 → 2.2.0

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

@@ -1,393 +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-result-dialog.class.js';
+import { LyraToolResultDialog } from './tool-result-dialog.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { lockScroll } from '../../internal/scroll-lock.js';
-import { nextId } from '../../internal/a11y.js';
-import { closeIcon, expandIcon } from '../../internal/icons.js';
-import { styles } from './tool-result-dialog.styles.js';
-const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-// Shadow-piercing so a slotted custom element's real focusable target (e.g.
-// an <input> inside its own shadow root) is found even though the host tag
-// itself doesn't match FOCUSABLE_SELECTOR. Deliberately duplicated from
-// lyra-dialog's identical helper rather than imported/shared -- this
-// component is its own standalone overlay with its own header chrome and
-// must not depend on lyra-dialog (see this file's authoring notes).
-function collectFocusable(el) {
-    const result = [];
-    if (el.matches(FOCUSABLE_SELECTOR)) {
-        result.push(el);
-    }
-    if (el instanceof HTMLSlotElement) {
-        for (const assigned of el.assignedElements({ flatten: true })) {
-            result.push(...collectFocusable(assigned));
-        }
-        return result;
-    }
-    const container = el.shadowRoot ?? el;
-    for (const child of Array.from(container.children)) {
-        result.push(...collectFocusable(child));
-    }
-    return result;
-}
-/** Whether `el` is actually laid out/paintable -- `checkVisibility()` (falling
- *  back to `getClientRects().length` where unsupported) correctly follows
- *  flattened-tree/slot assignment, unlike `offsetParent`. Mirrors
- *  lyra-dialog's/lyra-widget's identical helper. */
-function isRendered(el) {
-    return el.checkVisibility ? el.checkVisibility() : el.getClientRects().length > 0;
-}
-// 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',
-};
-/** `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.
- *
- * @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. */
-        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. */
-        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.close('backdrop');
-        };
-        this.onCloseButtonClick = () => {
-            this.close('close-button');
-        };
-        this.toggleMaximized = () => {
-            this.maximized = !this.maximized;
-            this.emit('lyra-maximize-change', this.maximized);
-        };
-        this.onDocKeyDown = (e) => {
-            if (!this.open)
-                return;
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                this.close('escape');
-                return;
-            }
-            if (e.key !== 'Tab')
-                return;
-            const focusable = this.getFocusableElements();
-            if (focusable.length === 0) {
-                e.preventDefault();
-                return;
-            }
-            const first = focusable[0];
-            const last = focusable[focusable.length - 1];
-            const active = this.getActiveElement();
-            if (e.shiftKey && active === first) {
-                e.preventDefault();
-                last.focus();
-            }
-            else if (!e.shiftKey && active === last) {
-                e.preventDefault();
-                first.focus();
-            }
-        };
-    }
-    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) {
-                // Captured here (before render) rather than from a click event on
-                // some specific internal control -- like lyra-dialog, a trigger
-                // typically lives *outside* this component entirely, so "whatever
-                // had focus right before open" is the only generally correct
-                // definition of "the trigger".
-                const active = this.getActiveElement();
-                this.lastTrigger = active instanceof HTMLElement ? active : undefined;
-                this.releaseScrollLock = lockScroll();
-                document.addEventListener('keydown', this.onDocKeyDown);
-            }
-            else {
-                this.releaseScrollLock?.();
-                this.releaseScrollLock = undefined;
-                document.removeEventListener('keydown', this.onDocKeyDown);
-            }
-        }
-    }
-    // Runs after render (not willUpdate) so [part="panel"] has already landed
-    // in the DOM before the fallback .focus() call below can rely on it --
-    // mirrors lyra-dialog's identical ordering rationale.
-    updated(changed) {
-        if (changed.has('open') && this.open) {
-            const first = this.getFocusableElements()[0];
-            if (first) {
-                first.focus();
-            }
-            else {
-                this.shadowRoot?.querySelector('[part="panel"]')?.focus();
-            }
-        }
-    }
-    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 && !this.releaseScrollLock) {
-            this.releaseScrollLock = lockScroll();
-            document.addEventListener('keydown', this.onDocKeyDown);
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.releaseScrollLock?.();
-        this.releaseScrollLock = undefined;
-        document.removeEventListener('keydown', this.onDocKeyDown);
-    }
-    /**
-     * 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 = 'api') {
-        if (!this.open)
-            return;
-        this.open = false;
-        this.emit('lyra-dialog-close', reason);
-        this.lastTrigger?.focus();
-    }
-    // Bounds Tab/Shift+Tab to the panel while open. Order follows the header's
-    // own maximize/close buttons, then the body slot, then the footer slot --
-    // the same order the flattened tree already tabs through (mirrors
-    // lyra-widget's identical actions-before-body ordering for its fullscreen
-    // mode).
-    getFocusableElements() {
-        const root = this.shadowRoot;
-        if (!root)
-            return [];
-        const fromSlot = (selector) => {
-            const slot = root.querySelector(selector);
-            return slot ? slot.assignedElements({ flatten: true }).flatMap(collectFocusable) : [];
-        };
-        const headerButtons = Array.from(root.querySelectorAll('[part="maximize-button"], [part="close-button"]'));
-        return [...headerButtons, ...fromSlot('slot[name="body"]'), ...fromSlot('slot[name="footer"]')].filter(isRendered);
-    }
-    getActiveElement() {
-        let active = document.activeElement;
-        while (active) {
-            const inner = active.shadowRoot?.activeElement ?? null;
-            if (!inner)
-                break;
-            active = inner;
-        }
-        return active;
-    }
-    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]()}<span>${STATUS_LABEL[this.status]}</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="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 })
-], 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);
 defineElement('tool-result-dialog', LyraToolResultDialog);
+//# sourceMappingURL=tool-result-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool-result-dialog.js","sourceRoot":"","sources":["../../../src/components/tool-result-dialog/tool-result-dialog.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC"}

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

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

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

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

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

@@ -6,18 +6,25 @@ 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-widget's --lyra-widget-overlay-color). */
-    --lyra-tool-result-dialog-overlay-color: rgb(0 0 0 / 0.5);
+    --lyra-tool-result-dialog-overlay-color: var(--lyra-color-overlay);
     /* Inset applied to the panel while [maximized] -- overridable the same
        way lyra-widget's --lyra-widget-fullscreen-inset is, e.g. to leave a
        persistent app rail visible. */
-    --lyra-tool-result-dialog-maximized-inset: var(--lyra-space-l);
+    --lyra-tool-result-dialog-maximized-inset:
+      max(var(--lyra-space-l), var(--lyra-safe-area-top))
+      max(var(--lyra-space-l), var(--lyra-safe-area-inline-end))
+      max(var(--lyra-space-l), var(--lyra-safe-area-bottom))
+      max(var(--lyra-space-l), var(--lyra-safe-area-inline-start));
     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;
@@ -31,10 +38,10 @@ export const styles = css `
     position: relative;
     display: flex;
     flex-direction: column;
-    inline-size: min(48rem, 100%);
+    inline-size: min(var(--lyra-size-48rem), 100%);
     max-block-size: 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;
@@ -54,7 +61,7 @@ export const styles = css `
     align-items: center;
     gap: var(--lyra-space-s);
     padding: var(--lyra-space-m) var(--lyra-space-l);
-    border-block-end: 1px solid var(--lyra-color-border);
+    border-block-end: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='title'] {
     display: flex;
@@ -65,7 +72,7 @@ export const styles = css `
     min-inline-size: 0;
   }
   [part='tool-name'] {
-    font-weight: 600;
+    font-weight: var(--lyra-font-weight-semibold);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -73,17 +80,17 @@ export const styles = css `
   [part='status'] {
     display: inline-flex;
     align-items: center;
-    gap: 0.25rem;
-    padding: 0.125rem var(--lyra-space-xs);
+    gap: var(--lyra-size-0-25rem);
+    padding: var(--lyra-size-0-125rem) var(--lyra-space-xs);
     border-radius: var(--lyra-radius);
-    font-size: 0.75rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-xs);
+    font-weight: var(--lyra-font-weight-semibold);
     color: var(--lyra-color-text-quiet);
     background: transparent;
   }
   [part='status'] svg {
-    inline-size: 1em;
-    block-size: 1em;
+    inline-size: var(--lyra-size-1em);
+    block-size: var(--lyra-size-1em);
   }
   /* pending stays the neutral/quiet treatment above -- it's the resting
      state before a tool call has done anything worth calling out. */
@@ -110,7 +117,7 @@ export const styles = css `
     animation: lyra-tool-result-dialog-spin 1s linear infinite;
   }
   [part='duration'] {
-    font-size: 0.75rem;
+    font-size: var(--lyra-font-size-xs);
     color: var(--lyra-color-text-quiet);
     white-space: nowrap;
   }
@@ -155,7 +162,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'][hidden] {
     display: none;
@@ -174,3 +181,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=tool-result-dialog.styles.js.map

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

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

package/dist/components/tool-result-view/registry.d.ts

@@ -71,11 +71,4 @@ export declare function findToolRenderer(toolName: string, payload: unknown, reg
  * failed promise forever.
  */
 export declare function loadToolRenderer(def: ToolRendererDefinition): Promise<ToolRendererDefinition>;
-/**
- * Test-only utility: empties the default registry and its `load()` cache so
- * one test's `registerToolRenderer()` calls can't leak into the next. Mirrors
- * the fact that this module (like `toaster.ts`'s per-placement region map) is
- * deliberately singleton, module-level state -- there is no per-instance
- * registry to construct fresh in a test's own `fixture()` call instead.
- */
-export declare function clearToolRenderers(): void;
+//# sourceMappingURL=registry.d.ts.map

package/dist/components/tool-result-view/registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../src/components/tool-result-view/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC;IACrD,oFAAoF;IACpF,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IACxC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,OAAO,CAAC,sBAAsB,GAAG;QAAE,OAAO,EAAE,sBAAsB,CAAA;KAAE,CAAC,CAAC;CACpF;AAED,yFAAyF;AACzF,MAAM,MAAM,oBAAoB,GAAG,GAAG,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;AAgBvE,iFAAiF;AACjF,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,sBAAsB,GAAG,IAAI,CAEpF;AAED,oJAAoJ;AACpJ,wBAAgB,8BAA8B,IAAI,oBAAoB,CAErE;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,GAAE,oBAAsC,GAC/C,sBAAsB,GAAG,SAAS,CAOpC;AAQD;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,sBAAsB,GAAG,OAAO,CAAC,sBAAsB,CAAC,CAQ7F"}

package/dist/components/tool-result-view/registry.js

@@ -72,13 +72,19 @@ export function loadToolRenderer(def) {
     return promise;
 }
 /**
- * Test-only utility: empties the default registry and its `load()` cache so
+ * @internal Test-only utility: empties the default registry and its `load()` cache so
  * one test's `registerToolRenderer()` calls can't leak into the next. Mirrors
  * the fact that this module (like `toaster.ts`'s per-placement region map) is
  * deliberately singleton, module-level state -- there is no per-instance
- * registry to construct fresh in a test's own `fixture()` call instead.
+ * registry to construct fresh in a test's own `fixture()` call instead. Not
+ * part of the public API; not re-exported from the root barrel -- a
+ * consuming app has no legitimate reason to wipe this page's entire
+ * registered-renderer registry at runtime, only a test suite resetting
+ * state between cases (import directly from this module, as the test suite
+ * already does).
  */
 export function clearToolRenderers() {
     defaultRegistry.clear();
     loadCache = new WeakMap();
 }
+//# sourceMappingURL=registry.js.map

package/dist/components/tool-result-view/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../src/components/tool-result-view/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAwCH,8KAA8K;AAC9K,MAAM,eAAe,GAAyB,IAAI,GAAG,EAAE,CAAC;AAExD;;;;;;;;GAQG;AACH,IAAI,SAAS,GAAG,IAAI,OAAO,EAA2D,CAAC;AAEvF,iFAAiF;AACjF,MAAM,UAAU,oBAAoB,CAAC,IAAY,EAAE,GAA2B;IAC5E,eAAe,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;AACjC,CAAC;AAED,oJAAoJ;AACpJ,MAAM,UAAU,8BAA8B;IAC5C,OAAO,eAAe,CAAC;AACzB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAC9B,QAAgB,EAChB,OAAgB,EAChB,QAAQ,GAAyB,eAAe;IAEhD,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACrC,IAAI,KAAK;QAAE,OAAO,KAAK,CAAC;IACxB,KAAK,MAAM,GAAG,IAAI,QAAQ,CAAC,MAAM,EAAE,EAAE,CAAC;QACpC,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC;YAAE,OAAO,GAAG,CAAC;IACzC,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,eAAe,CACtB,GAAiE;IAEjE,OAAO,SAAS,IAAI,GAAG,IAAI,OAAO,GAAG,CAAC,OAAO,KAAK,QAAQ,IAAI,GAAG,CAAC,OAAO,KAAK,IAAI,CAAC;AACrF,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAC,GAA2B;IAC1D,IAAI,CAAC,GAAG,CAAC,IAAI;QAAE,OAAO,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3C,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC;IAC1B,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACrF,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAC5B,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,kBAAkB;IAChC,eAAe,CAAC,KAAK,EAAE,CAAC;IACxB,SAAS,GAAG,IAAI,OAAO,EAAE,CAAC;AAC5B,CAAC"}

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

@@ -0,0 +1,65 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { type ToolRendererRegistry } from './registry.js';
+import '../skeleton/skeleton.class.js';
+import '../json-viewer/json-viewer.class.js';
+/**
+ * `<lyra-tool-result-view>` — renders a tool call's result via whichever
+ * custom renderer a host app has registered for it (see `registerToolRenderer()`
+ * in `registry.ts`), falling back to `<lyra-json-viewer>` whenever no
+ * renderer matches, a candidate renderer's `matches()` predicate throws during
+ * dispatch, a renderer's optional `load()` rejects, or its `render()` throws.
+ * This component owns none of the actual visual weight of a
+ * populated tool result — that's entirely whatever the registered renderer
+ * returns; this is just the dispatch + fallback + loading-state shell.
+ *
+ * Dispatch runs against `registry` when set, otherwise against the
+ * module-level default registry `registerToolRenderer()` writes to — see
+ * `findToolRenderer()`'s two-step (exact name, then shape-based `matches()`)
+ * lookup order for the full rule.
+ *
+ * `fallback` only implements `"json"` today (an unconditional
+ * `<lyra-json-viewer>`) but is still accepted/reflected as an attribute so a
+ * consumer's markup that already sets `fallback="…"` for some future value
+ * doesn't need to change again once more fallback kinds land.
+ *
+ * @customElement lyra-tool-result-view
+ * @event lyra-render-error - `detail: { toolName, error }` — fired immediately
+ * before falling back to `<lyra-json-viewer>`, whether because no renderer
+ * matched, a candidate renderer's `matches()` predicate threw during dispatch,
+ * a renderer's `load()` rejected, or its `render()` threw.
+ * @csspart base - The root wrapper around the resolved renderer's output (or the loading/fallback view).
+ */
+export interface LyraToolResultViewEventMap {
+    'lyra-render-error': CustomEvent<{
+        toolName: string;
+        error: unknown;
+    }>;
+}
+export declare class LyraToolResultView extends LyraElement<LyraToolResultViewEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** Custom registry to dispatch against instead of the module-level default one (see `registry.ts`). */
+    registry?: ToolRendererRegistry;
+    /** The tool's name — the primary dispatch key (see `findToolRenderer()`). */
+    toolName: string;
+    /** The tool call's result payload, handed to the matched renderer's `render()` (and to `matches()` for shape-based dispatch, and to the `<lyra-json-viewer>` fallback). */
+    result: unknown;
+    /** The tool call's original arguments, if available — handed to the matched renderer's `render()` alongside `result`. */
+    args: unknown;
+    /** Forward-compatible fallback-kind selector — see the class doc; only `"json"` is implemented today. */
+    fallback: string;
+    private renderState;
+    private generation;
+    private resolvedLazy?;
+    protected willUpdate(changed: PropertyValues): void;
+    private resolve;
+    private renderWith;
+    private fail;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tool-result-view': LyraToolResultView;
+    }
+}
+//# sourceMappingURL=tool-result-view.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool-result-view.class.d.ts","sourceRoot":"","sources":["../../../src/components/tool-result-view/tool-result-view.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAKL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAEvB,OAAO,+BAA+B,CAAC;AACvC,OAAO,qCAAqC,CAAC;AAU7C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,WAAW,0BAA0B;IACzC,mBAAmB,EAAE,WAAW,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CACxE;AACD,qBAAa,kBAAmB,SAAQ,WAAW,CAAC,0BAA0B,CAAC;IAC7E,MAAM,CAAC,MAAM,iCAAgC;IAE7C,uGAAuG;IACvE,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAEhE,6EAA6E;IACvC,QAAQ,SAAM;IAEpD,2KAA2K;IAC3I,MAAM,EAAE,OAAO,CAAC;IAEhD,yHAAyH;IACzF,IAAI,EAAE,OAAO,CAAC;IAE9C,yGAAyG;IAC5E,QAAQ,SAAU;IAEtC,OAAO,CAAC,WAAW,CAA+B;IAK3D,OAAO,CAAC,UAAU,CAAK;IAQvB,OAAO,CAAC,YAAY,CAAC,CAAoE;IAEzF,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAUlD;YAEa,OAAO;IAyCrB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,IAAI;IAKZ,MAAM,IAAI,cAAc,CAWvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"}