@aceshooting/lyra-ui 1.2.0 → 2.0.0

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

@@ -0,0 +1,393 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, svg, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { 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);

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

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

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

@@ -0,0 +1,176 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    /* Backdrop scrim color -- component-specific so a host can retheme it
+       without a raw literal leaking into the public API (no shared
+       --wa-*-overlay token exists in the design system to resolve through,
+       same rationale as lyra-dialog's --lyra-dialog-overlay-color and
+       lyra-widget's --lyra-widget-overlay-color). */
+    --lyra-tool-result-dialog-overlay-color: rgb(0 0 0 / 0.5);
+    /* 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);
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+    padding: var(--lyra-space-l);
+  }
+  :host([open]) {
+    display: flex;
+  }
+  [part='backdrop'] {
+    position: absolute;
+    inset: 0;
+    background: var(--lyra-tool-result-dialog-overlay-color);
+  }
+  [part='panel'] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    inline-size: min(48rem, 100%);
+    max-block-size: 100%;
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+    overflow: hidden;
+    transition:
+      inline-size var(--lyra-transition-base),
+      block-size var(--lyra-transition-base);
+  }
+  :host([maximized]) [part='panel'] {
+    position: fixed;
+    inset: var(--lyra-tool-result-dialog-maximized-inset);
+    inline-size: auto;
+    max-block-size: none;
+  }
+  [part='header'] {
+    display: flex;
+    flex-wrap: wrap;
+    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);
+  }
+  [part='title'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  [part='tool-name'] {
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [part='status'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem var(--lyra-space-xs);
+    border-radius: var(--lyra-radius);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--lyra-color-text-quiet);
+    background: transparent;
+  }
+  [part='status'] svg {
+    inline-size: 1em;
+    block-size: 1em;
+  }
+  /* pending stays the neutral/quiet treatment above -- it's the resting
+     state before a tool call has done anything worth calling out. */
+  :host([status='running']) [part='status'] {
+    color: var(--lyra-color-brand);
+    background: var(--lyra-color-brand-quiet);
+  }
+  :host([status='success']) [part='status'] {
+    color: var(--lyra-color-success);
+    background: var(--lyra-color-success-quiet);
+  }
+  :host([status='error']) [part='status'] {
+    color: var(--lyra-color-danger);
+    background: var(--lyra-color-danger-quiet);
+  }
+  /* 'denied' is a policy rejection, not a runtime failure -- the warning
+     (not danger) tinted-background reads that distinction without relying on
+     the status text alone. */
+  :host([status='denied']) [part='status'] {
+    color: var(--lyra-color-warning);
+    background: var(--lyra-color-warning-quiet);
+  }
+  :host([status='running']) [part='status'] svg {
+    animation: lyra-tool-result-dialog-spin 1s linear infinite;
+  }
+  [part='duration'] {
+    font-size: 0.75rem;
+    color: var(--lyra-color-text-quiet);
+    white-space: nowrap;
+  }
+  [part='header-actions'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    flex: 0 0 auto;
+  }
+  [part='maximize-button'],
+  [part='close-button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
+    border: none;
+    background: transparent;
+    color: var(--lyra-color-text-quiet);
+    border-radius: var(--lyra-radius);
+    cursor: pointer;
+  }
+  [part='maximize-button']:hover,
+  [part='close-button']:hover {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='maximize-button']:focus-visible,
+  [part='close-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='body'] {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    padding: var(--lyra-space-l);
+    overflow: auto;
+  }
+  [part='footer'] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--lyra-space-s);
+    padding: var(--lyra-space-m) var(--lyra-space-l);
+    border-block-start: 1px solid var(--lyra-color-border);
+  }
+  [part='footer'][hidden] {
+    display: none;
+  }
+  @keyframes lyra-tool-result-dialog-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='panel'] {
+      transition: none !important;
+    }
+    :host([status='running']) [part='status'] svg {
+      animation: none !important;
+    }
+  }
+`;

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

@@ -0,0 +1,81 @@
+/**
+ * A type-keyed dispatch registry for tool-result renderers -- a tiny plugin
+ * system so a host app can teach `<lyra-tool-result-view>` how to draw the
+ * result of e.g. a `get_weather` or `run_query` tool call without this
+ * library knowing anything about either. Dispatch is a two-step lookup
+ * (elipa-inspired): an exact match on the tool's name first, falling back to
+ * a facade/shape-based `matches(payload)` scan when no name matches --
+ * useful when several tool names share one result shape (e.g. every
+ * "*_search" tool returning `{ results: [...] }`) or when the caller doesn't
+ * reliably know the tool name at all.
+ */
+/**
+ * One registered renderer. Either `render` is present directly, or `load` is
+ * -- a definition registered purely as `{ load }` is expected to resolve (via
+ * dynamic `import()`, typically) to the real `render`/`matches` pair on
+ * first use, so a host app can code-split a rarely-used or heavy renderer
+ * (e.g. one pulling in a charting library) instead of paying for it on every
+ * page that merely registers it.
+ *
+ * `matches` is only ever consulted *before* `load` resolves when it's
+ * supplied inline at registration time -- a definition that needs
+ * shape-based dispatch and also wants to lazy-load its `render` should
+ * register a lightweight synchronous `matches` up front alongside `load`;
+ * one that dispatches purely by exact tool-name key doesn't need `matches`
+ * at all, loaded or not.
+ */
+export interface ToolRendererDefinition {
+    /**
+     * Renders `result` (and the tool-call `args` that produced it, when
+     * available) as UI. Typed loosely as `unknown` rather than Lit's
+     * `TemplateResult` so any lit-html-renderable value works too (a plain
+     * string, a DOM node, an array of templates) -- consumers already own
+     * their own Lit import and don't need this module to add one.
+     */
+    render?: (result: unknown, args: unknown) => unknown;
+    /** Facade/shape-based dispatch predicate -- see the module doc's dispatch order. */
+    matches?: (payload: unknown) => boolean;
+    /**
+     * Lazy loader for a code-split renderer. Resolves to either a definition
+     * directly, or a `{ default }`-shaped module namespace object (so
+     * `load: () => import('./my-renderer.js')` works unmodified when that
+     * module's default export is itself a `ToolRendererDefinition`).
+     */
+    load?: () => Promise<ToolRendererDefinition | {
+        default: ToolRendererDefinition;
+    }>;
+}
+/** A tool-name -> renderer-definition registry, as consulted by `findToolRenderer()`. */
+export type ToolRendererRegistry = Map<string, ToolRendererDefinition>;
+/** Registers (or overwrites) the renderer for `name` in the default registry. */
+export declare function registerToolRenderer(name: string, def: ToolRendererDefinition): void;
+/** The module-level default registry `registerToolRenderer()` writes to and `<lyra-tool-result-view>` reads from when no `registry` prop is set. */
+export declare function getDefaultToolRendererRegistry(): ToolRendererRegistry;
+/**
+ * Finds the renderer definition for `toolName`/`payload` in `registry`
+ * (the default registry when omitted), in dispatch order:
+ *   1. An exact `toolName` key match.
+ *   2. Failing that, the first entry (in registration order -- a `Map`
+ *      already iterates that way) whose `matches(payload)` returns `true`.
+ *   3. `undefined` -- the caller falls back to `<lyra-json-viewer>`.
+ */
+export declare function findToolRenderer(toolName: string, payload: unknown, registry?: ToolRendererRegistry): ToolRendererDefinition | undefined;
+/**
+ * Resolves `def` to a definition guaranteed to carry a real `render` --
+ * awaiting and unwrapping `def.load()` (caching the result so a lazy
+ * definition's `load()` runs at most once no matter how many times it's
+ * dispatched to) when `def.load` is present, or returning `def` as-is
+ * otherwise. A rejected `load()` is *not* cached -- the definition stays
+ * registered, so a later resolution attempt (e.g. after a transient network
+ * failure) gets a fresh `load()` call rather than being stuck replaying one
+ * 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;