ranui/dist/components/tool-card/index.d.ts

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { EventManager } from '../../utils/builder';
import { RanElement } from '../../utils';
import '@/components/disclosure-row';
import '@/components/state-dot';
import type { DisclosureRow } from '../disclosure-row';
import type { StateDot } from '../state-dot';
import type { ToolCallView, ToolCardStatus, ToolResultView } from './types';
export type { ToolCallView, ToolCardStatus, ToolDiff, ToolLocation, ToolResultView } from './types';
/**
 * `<r-tool-card>` — one tool call, as a line you can skim and open.
 *
 * The tool says what its call *is* — a shell command, a file edit, something generic — and
 * this element decides what that looks like. Keeping the two apart is what lets the same
 * call render as a row here, a single line in a compact transcript, and a jump target in an
 * editor, without the tool knowing any of them exist.
 *
 * **It renders as a row, not a box.** A run of tool calls is a list: twelve bordered cards
 * down a transcript is twelve things competing with the answer, while twelve one-line rows
 * is something a reader skims past on the way to the reply. The name is about the render
 * intent — `ToolCallView.card` names *what the payload is* — not about the chrome.
 *
 * Everything starts collapsed for the same reason.
 *
 * ```ts
 * const card = document.querySelector('r-tool-card');
 * card.call = { card: 'terminal', title: 'pnpm test', cwd: '/repo' };
 * card.status = 'running';
 * // …later
 * card.result = { card: 'terminal', output: '2351 passed', exitCode: 0 };
 * card.status = 'success';
 * ```
 *
 * Attributes: `status` (`running` | `success` | `error`), `open`, `sheet`.
 * Fires `locationclick` with `detail.location` when a file reference is activated.
 */
export declare class ToolCard extends RanElement {
    _events: EventManager;
    _shadowDom: ShadowRoot;
    _row: DisclosureRow;
    _dot: StateDot;
    _body: HTMLElement;
    private _call;
    private _result;
    static get observedAttributes(): string[];
    constructor();
    /** The pending view, derived from the call's arguments. */
    get call(): ToolCallView | null;
    set call(value: ToolCallView | null);
    /** The completed view. Replaces the pending one once set. */
    get result(): ToolResultView | null;
    set result(value: ToolResultView | null);
    /** Lifecycle of the call, reflected so styling can key off it. */
    get status(): ToolCardStatus;
    set status(value: ToolCardStatus);
    /** Whether the body is expanded. */
    get open(): boolean;
    set open(value: boolean);
    get sheet(): string;
    set sheet(value: string);
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, old: string | null, next: string | null): void;
    handlerExternalCss: () => void;
    private _render;
    /**
     * Builds the IN/OUT card the generic body is shown in.
     *
     * Two gutter-labelled sections in one surface, each capped and scrolling on its own so a
     * long input never buries a short output. Either half may be absent.
     *
     * @param input What went in, or null.
     * @param output What came back, or null.
     * @param failed Whether the output describes a failure.
     * @returns The card, or null when there is nothing to show.
     */
    private _ioCard;
    private _renderGeneric;
    private _renderTerminal;
    private _renderDiff;
    private _renderFile;
    private _renderHunk;
    private _renderLocations;
    /**
     * Builds the monospaced block a result is shown in.
     *
     * @param text The text to show.
     * @param lines Whether long lines wrap. Terminal output is column-aligned and must not;
     *   arbitrary text must, or reading it means scrolling sideways per line.
     * @returns The block.
     */
    private _pre;
}
export default ToolCard;