@aceshooting/lyra-ui 1.2.0 → 2.0.0

package/dist/components/tool-param-form/tool-param-form.js

@@ -0,0 +1,366 @@
+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, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { nextId } from '../../internal/a11y.js';
+import { styles } from './tool-param-form.styles.js';
+import '../select/select.js';
+import '../combobox/option.js';
+import '../checkbox/checkbox.js';
+const EMPTY_SCHEMA = { type: 'object', properties: {} };
+/** `true` when `v` counts as "empty" for `prop`'s type, for the one validation rule this phase implements. */
+function isFieldEmpty(prop, v) {
+    if (prop.type === 'boolean') {
+        // A checkbox always holds a concrete true/false once rendered — there's
+        // no third "unset" visual state to represent JSON Schema's "key absent"
+        // meaning. Reusing <lyra-checkbox>'s own required semantics (must be
+        // checked) gives `required` on a boolean field an actually useful
+        // meaning here — e.g. a `confirmDestroy: boolean, required` param — and
+        // matches the control it's composed from instead of inventing a second,
+        // inconsistent definition of "required checkbox".
+        return v !== true;
+    }
+    if (v === undefined || v === null)
+        return true;
+    if (prop.type === 'string')
+        return typeof v !== 'string' || v.trim() === '';
+    // number / integer
+    return typeof v !== 'number' || Number.isNaN(v);
+}
+/**
+ * `<lyra-tool-param-form>` — renders one form control per top-level property
+ * of a JSON Schema object, for ad hoc tool invocation or approval-editing UIs
+ * (e.g. "the agent wants to call `create_event(title, attendees, allDay)` —
+ * let the user tweak the arguments before running it").
+ *
+ * **Scope limitation (intentional, not accidental):** this phase only
+ * understands a *flat* object schema — every `properties` entry must be
+ * `'string'`, `'number'`, `'integer'`, `'boolean'`, or a string `enum`.
+ * Nested objects, arrays, `oneOf`/`anyOf`/`allOf`, `$ref`, and any other
+ * JSON Schema keyword are not read. A full JSON-Schema-to-form renderer is
+ * out of scope for this component; a property whose `type` isn't one of the
+ * four above renders a visible "Unsupported field type" note instead of
+ * silently dropping it or throwing.
+ *
+ * Fields render in `Object.keys(schema.properties)` order (insertion order,
+ * which is reliable for a plain object's string keys). A field's label is
+ * `title ?? ` the property key; `description` renders as helper text below
+ * the control; a key listed in `required` gets a visible `*` and the
+ * underlying control's own `required` wiring.
+ *
+ * This component owns no Submit/Cancel/Approve chrome — a consumer composes
+ * it inside their own dialog (e.g. a tool-approval dialog) and reads
+ * `.value`/`.errors`/`checkValidity()` (or calls `reportValidity()` right
+ * before acting, which also reveals any inline errors that user interaction
+ * hasn't surfaced yet).
+ *
+ * `value` is exactly what the consumer last set it to — a field with no
+ * entry in `value` but a schema `default` displays (and is *emitted*, via
+ * `lyra-input`) as that default, but the `value` *property* itself is left
+ * alone until the user actually edits that field. This mirrors an
+ * uncontrolled `<input placeholder>` not writing to `.value`, and means the
+ * very first `lyra-input` a consumer receives already carries every default
+ * resolved, so round-tripping `e.detail.value` back into `.value` converges
+ * after one edit.
+ *
+ * Optional native `<form>` participation is implemented via `ElementInternals`
+ * attached directly (this component's value is a whole object, not a plain
+ * string, so the `FormAssociated` string-value mixin doesn't fit — same
+ * shape as `<lyra-combobox>`'s array-valued case). This is a nice-to-have
+ * layered on top of the primary integration contract (`value` +
+ * `lyra-input`/`lyra-validity-change`), not a requirement: a consumer that
+ * never puts this inside a `<form>` loses nothing.
+ *
+ * @customElement lyra-tool-param-form
+ * @event lyra-input - A field's value changed. `detail: { value }` — the
+ * full current value object (every property, defaults resolved), not just
+ * the field that changed.
+ * @event lyra-validity-change - Overall validity changed (a required field
+ * became empty/non-empty). `detail: { valid: boolean; errors: Record<string, string> }`.
+ * @csspart base - The outer wrapper around all fields.
+ * @csspart field - One property's wrapper (label + control + description + error).
+ * @csspart label - A field's label.
+ * @csspart description - A field's helper text, from `schema.description`.
+ * @csspart error - A field's inline validation message (only rendered once the field has been visited).
+ */
+export class LyraToolParamForm extends LyraElement {
+    static { this.formAssociated = true; }
+    static { this.styles = [LyraElement.styles, styles]; }
+    constructor() {
+        super();
+        this.schema = EMPTY_SCHEMA;
+        this.value = {};
+        /** Submission key for the optional native `<form>` participation — see the class doc. */
+        this.name = '';
+        this.disabled = false;
+        // The true (touched-independent) per-field error set, recomputed in
+        // willUpdate() so it's available to the very same render() pass rather
+        // than lagging a frame behind in updated(). Exposed publicly (read-only)
+        // via the `errors` getter below, under a leading underscore here so the
+        // getter itself can be named plain `errors` without a collision.
+        this._errors = {};
+        // Which fields have been visited (focusout'd) at least once — gates only
+        // the *visual* error/aria-invalid presentation, matching every other
+        // form control in this library (lyra-select/lyra-combobox/lyra-model-select
+        // all avoid flashing red before the user has touched anything).
+        this.touchedFields = new Set();
+        this.baseId = nextId('tool-param-form');
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Seed `errors`/`internals` validity synchronously at connect time —
+        // `checkValidity()`/a wrapping `<form>`'s own `reportValidity()` must
+        // see the correct answer even if called before Lit's first (async)
+        // update has run, mirroring lyra-select's/lyra-checkbox's identical
+        // connectedCallback -> updateValidity() call.
+        this._errors = this.computeErrors();
+        this.syncInternals();
+    }
+    /** `value`, with any property missing from it filled in from `schema`'s own `default` — see the class doc. */
+    get effectiveValue() {
+        const props = this.schema?.properties ?? {};
+        const out = { ...this.value };
+        for (const key of Object.keys(props)) {
+            // `hasOwnProperty`, not `out[key] === undefined` — a number field the
+            // user has explicitly cleared is `{ days: undefined }` (a real own
+            // property, via the `{...this.value, [key]: val}` spread in
+            // setFieldValue()), and must stay cleared rather than silently
+            // snapping back to its default just because its current value also
+            // happens to be `undefined`. Only a key genuinely absent from `value`
+            // (never touched, or reset back to `{}`) falls back to the default.
+            if (!Object.prototype.hasOwnProperty.call(this.value, key) && props[key].default !== undefined) {
+                out[key] = props[key].default;
+            }
+        }
+        return out;
+    }
+    /**
+     * The current per-field validation errors (`{ [propertyKey]: message }`),
+     * required-and-empty only — mirrors the last `lyra-validity-change`
+     * event's `errors`. Independent of which fields have been visited; a
+     * consumer wanting the visited-only, screen-reader-announced subset
+     * should read the rendered `[part="error"]` elements instead.
+     */
+    get errors() {
+        return { ...this._errors };
+    }
+    /** The current per-field validation errors (required-and-empty only), independent of `touchedFields`. */
+    computeErrors() {
+        const props = this.schema?.properties ?? {};
+        const required = new Set(this.schema?.required ?? []);
+        const effective = this.effectiveValue;
+        const out = {};
+        for (const key of Object.keys(props)) {
+            if (!required.has(key))
+                continue;
+            if (isFieldEmpty(props[key], effective[key])) {
+                out[key] = 'This field is required.';
+            }
+        }
+        return out;
+    }
+    /** Non-mutating validity check — unlike `reportValidity()`, never reveals inline errors. */
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /**
+     * Reveals inline errors for every currently-invalid required field (as if
+     * each had been visited) and returns overall validity — the hook a
+     * consumer's own Submit/Approve button should call right before acting,
+     * mirroring a native `<form>`'s `reportValidity()`.
+     */
+    reportValidity() {
+        const errors = this.computeErrors();
+        if (Object.keys(errors).length > 0) {
+            this.touchedFields = new Set([...this.touchedFields, ...Object.keys(errors)]);
+        }
+        return this.internals.checkValidity();
+    }
+    formResetCallback() {
+        this.value = {};
+        this.touchedFields = new Set();
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    willUpdate(changed) {
+        if (changed.has('value') || changed.has('schema') || !this.hasUpdated) {
+            this._errors = this.computeErrors();
+        }
+    }
+    /** Pushes `effectiveValue`/`errors` into `ElementInternals` — see the class doc's form-participation note. */
+    syncInternals() {
+        this.internals.setFormValue(JSON.stringify(this.effectiveValue));
+        if (Object.keys(this._errors).length === 0) {
+            this.internals.setValidity({});
+        }
+        else {
+            const firstMessage = Object.values(this._errors)[0] ?? 'Some required fields are empty.';
+            this.internals.setValidity({ valueMissing: true }, firstMessage);
+        }
+    }
+    updated(changed) {
+        if (changed.has('value') || changed.has('schema')) {
+            this.syncInternals();
+            const valid = Object.keys(this._errors).length === 0;
+            const key = JSON.stringify({ valid, errors: this._errors });
+            if (key !== this.lastValidityKey) {
+                this.lastValidityKey = key;
+                this.emit('lyra-validity-change', { valid, errors: { ...this._errors } });
+            }
+        }
+    }
+    setFieldValue(key, val) {
+        this.value = { ...this.value, [key]: val };
+        this.emit('lyra-input', { value: this.effectiveValue });
+    }
+    markTouched(key) {
+        if (this.touchedFields.has(key))
+            return;
+        this.touchedFields = new Set(this.touchedFields).add(key);
+    }
+    onTextInput(key, e) {
+        this.setFieldValue(key, e.target.value);
+    }
+    onNumberInput(key, e) {
+        const raw = e.target;
+        const n = raw.valueAsNumber;
+        this.setFieldValue(key, Number.isNaN(n) ? undefined : n);
+    }
+    onSelectChange(key, e) {
+        this.setFieldValue(key, e.target.value);
+    }
+    onCheckboxChange(key, e) {
+        this.setFieldValue(key, e.detail.checked);
+    }
+    renderControl(key, prop, fieldId, label, required, describedBy, errorMessage, effective) {
+        if (prop.type === 'string' && prop.enum && prop.enum.length > 0) {
+            // <lyra-select>/<lyra-checkbox> don't forward a host-level
+            // aria-describedby to their internal focusable element (neither
+            // reads it — and this component doesn't own either file to add that),
+            // so a plain aria-describedby here would silently do nothing for
+            // assistive tech. Fold the error into aria-label instead, which both
+            // select.ts and checkbox.ts *do* read from the host and thread
+            // through -- the description text still reads fine from its adjacent,
+            // DOM-order-following <p part="description"> even without a formal
+            // aria-describedby association.
+            return html `<lyra-select
+        id=${fieldId}
+        aria-label=${errorMessage ? `${label}. ${errorMessage}` : label}
+        .value=${typeof effective === 'string' ? effective : ''}
+        ?required=${required}
+        ?disabled=${this.disabled}
+        @change=${(e) => this.onSelectChange(key, e)}
+      >
+        ${prop.enum.map((v) => html `<lyra-option value=${v}>${v}</lyra-option>`)}
+      </lyra-select>`;
+        }
+        if (prop.type === 'string') {
+            return html `<input
+        class="control"
+        type="text"
+        id=${fieldId}
+        aria-describedby=${describedBy || nothing}
+        aria-invalid=${errorMessage ? 'true' : nothing}
+        .value=${typeof effective === 'string' ? effective : ''}
+        ?required=${required}
+        ?disabled=${this.disabled}
+        @input=${(e) => this.onTextInput(key, e)}
+      />`;
+        }
+        if (prop.type === 'number' || prop.type === 'integer') {
+            const numValue = typeof effective === 'number' && !Number.isNaN(effective) ? String(effective) : '';
+            return html `<input
+        class="control"
+        type="number"
+        id=${fieldId}
+        step=${prop.type === 'integer' ? '1' : 'any'}
+        aria-describedby=${describedBy || nothing}
+        aria-invalid=${errorMessage ? 'true' : nothing}
+        .value=${numValue}
+        ?required=${required}
+        ?disabled=${this.disabled}
+        @input=${(e) => this.onNumberInput(key, e)}
+      />`;
+        }
+        if (prop.type === 'boolean') {
+            // The label lives inside the slot rather than as a sibling <label> --
+            // that slot *is* lyra-checkbox's documented way to give it an
+            // accessible name (see checkbox.ts's own @slot doc), and unlike
+            // aria-describedby, this genuinely works since it's real slotted
+            // content, not an inert host attribute.
+            return html `<lyra-checkbox
+        id=${fieldId}
+        ?checked=${effective === true}
+        ?required=${required}
+        ?disabled=${this.disabled}
+        @lyra-change=${(e) => this.onCheckboxChange(key, e)}
+      >
+        <span part="label">${label}</span>
+      </lyra-checkbox>`;
+        }
+        // Defensive fallback for a schema property outside this phase's scope
+        // (see the class doc) — render a visible note instead of silently
+        // dropping the field or throwing.
+        return html `<p class="unsupported">Unsupported field type "${prop.type}".</p>`;
+    }
+    renderField(key, prop, index) {
+        const required = (this.schema.required ?? []).includes(key);
+        const label = prop.title ?? key;
+        const fieldId = `${this.baseId}-f${index}`;
+        const descId = prop.description ? `${fieldId}-desc` : '';
+        const errId = this._errors[key] ? `${fieldId}-err` : '';
+        const describedBy = [descId, this.touchedFields.has(key) ? errId : ''].filter(Boolean).join(' ');
+        const hasError = this.touchedFields.has(key) && Boolean(this._errors[key]);
+        const errorMessage = hasError ? this._errors[key] : '';
+        const effective = this.effectiveValue[key];
+        const isBoolean = prop.type === 'boolean';
+        return html `
+      <div part="field" class="field" data-key=${key} data-type=${prop.type} ?data-required=${required}
+        @focusout=${() => this.markTouched(key)}
+      >
+        ${isBoolean
+            ? nothing
+            : html `<label part="label" for=${fieldId}>${label}</label>`}
+        ${this.renderControl(key, prop, fieldId, label, required, describedBy, errorMessage, effective)}
+        ${prop.description
+            ? html `<p part="description" id=${descId}>${prop.description}</p>`
+            : nothing}
+        ${hasError ? html `<p part="error" id=${errId} role="alert">${this._errors[key]}</p>` : nothing}
+      </div>
+    `;
+    }
+    render() {
+        const props = this.schema?.properties ?? {};
+        const keys = Object.keys(props);
+        return html `<div part="base">
+      ${keys.map((key, i) => this.renderField(key, props[key], i))}
+    </div>`;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraToolParamForm.prototype, "schema", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraToolParamForm.prototype, "value", void 0);
+__decorate([
+    property()
+], LyraToolParamForm.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraToolParamForm.prototype, "disabled", void 0);
+__decorate([
+    state()
+], LyraToolParamForm.prototype, "_errors", void 0);
+__decorate([
+    state()
+], LyraToolParamForm.prototype, "touchedFields", void 0);
+defineElement('tool-param-form', LyraToolParamForm);

package/dist/components/tool-param-form/tool-param-form.styles.d.ts

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

package/dist/components/tool-param-form/tool-param-form.styles.js

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-l);
+  }
+  [part='field'] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--lyra-space-xs);
+  }
+  [part='label'] {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  /* Applies to a boolean field's slotted <span part="label"> (inside
+     <lyra-checkbox>) too -- see tool-param-form.ts's class doc for why that
+     span still belongs to *this* component's shadow tree for CSS purposes
+     even though it's visually projected into a child element's template. */
+  [part='field'][data-required] [part='label']::after {
+    content: ' *';
+    color: var(--lyra-color-danger);
+  }
+
+  [part='field'] > lyra-select,
+  [part='field'] > input.control {
+    inline-size: 100%;
+  }
+
+  input.control {
+    box-sizing: border-box;
+    min-block-size: 2.5rem;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: inherit;
+    font: inherit;
+    font-size: 1rem;
+  }
+  input.control:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  input.control[aria-invalid='true'] {
+    border-color: var(--lyra-color-danger);
+  }
+  input.control:disabled {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  [part='description'] {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='error'] {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--lyra-color-danger);
+  }
+  .unsupported {
+    margin: 0;
+    font-size: 0.8125rem;
+    font-style: italic;
+    color: var(--lyra-color-text-quiet);
+  }
+`;

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

@@ -0,0 +1,102 @@
+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;
+    }
+}