@aceshooting/lyra-ui 1.2.0 → 2.0.0

package/dist/components/tool-call-chip/tool-call-chip.styles.js

@@ -0,0 +1,203 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    max-inline-size: 100%;
+    /* Per-status accent -- one custom property swapped by the :host([status])
+       rules below rather than repeating background/color per part per status.
+       Defaults to the 'pending' tone so an unset/unknown status still reads
+       as neutral instead of unstyled. */
+    --lyra-tool-call-chip-accent: var(--lyra-color-text-quiet);
+    --lyra-tool-call-chip-bg: var(--lyra-color-surface);
+    --lyra-tool-call-chip-border: var(--lyra-color-border);
+  }
+
+  :host([status='running']) {
+    --lyra-tool-call-chip-accent: var(--lyra-color-brand);
+    --lyra-tool-call-chip-bg: var(--lyra-color-brand-quiet);
+    --lyra-tool-call-chip-border: transparent;
+  }
+  :host([status='success']) {
+    --lyra-tool-call-chip-accent: var(--lyra-color-success);
+    --lyra-tool-call-chip-bg: var(--lyra-color-success-quiet);
+    --lyra-tool-call-chip-border: transparent;
+  }
+  :host([status='error']) {
+    --lyra-tool-call-chip-accent: var(--lyra-color-danger);
+    --lyra-tool-call-chip-bg: var(--lyra-color-danger-quiet);
+    --lyra-tool-call-chip-border: transparent;
+  }
+  /* 'denied' reads as a policy rejection, not a runtime failure -- the
+     warning (not danger) tint keeps it visually distinct from 'error',
+     matching lyra-tool-result-dialog's identical status vocabulary/tone so
+     the two components agree on what "denied" looks like. */
+  :host([status='denied']) {
+    --lyra-tool-call-chip-accent: var(--lyra-color-warning);
+    --lyra-tool-call-chip-bg: var(--lyra-color-warning-quiet);
+    --lyra-tool-call-chip-border: transparent;
+  }
+
+  [part='base'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    padding: 0.25rem var(--lyra-space-s);
+    border: 1px solid var(--lyra-tool-call-chip-border);
+    border-radius: 999px;
+    background: var(--lyra-tool-call-chip-bg);
+    color: var(--lyra-color-text);
+    font: inherit;
+    font-size: 0.8125rem;
+    line-height: 1.3;
+    text-align: start;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      background-color var(--lyra-transition-fast),
+      border-color var(--lyra-transition-fast);
+  }
+  [part='base']:hover {
+    border-color: var(--lyra-color-brand);
+  }
+  [part='base']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+
+  [part='icon'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    color: var(--lyra-tool-call-chip-accent);
+  }
+  [part='icon'] svg {
+    display: block;
+  }
+  /* A three-quarter arc (not a full ring) is what actually reads as
+     spinning once rotated -- a full circle looks identical at every
+     rotation frame. */
+  :host([status='running']) [part='icon'] svg {
+    animation: lyra-tool-call-chip-spin 1s linear infinite;
+  }
+  /* Subtler than the spin -- a slow opacity breathe, so a list of several
+     still-queued chips doesn't compete visually with any 'running' ones
+     next to it. */
+  :host([status='pending']) [part='icon'] svg {
+    animation: lyra-tool-call-chip-pulse 1.5s ease-in-out infinite;
+  }
+
+  [part='label'] {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.3em;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  [part='category'] {
+    flex: 0 0 auto;
+    /* Full-strength text, not --lyra-color-text-quiet -- this sits on top of
+       the per-status *-quiet tint backgrounds above (e.g. success-quiet),
+       and text-quiet's gray fails WCAG AA contrast against several of those
+       tints even though it comfortably passes against the plain surface
+       background used by the resting/denied states. */
+    color: var(--lyra-color-text);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  [part='category']::after {
+    content: '·';
+    margin-inline-start: 0.3em;
+  }
+  [part='name'] {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 600;
+  }
+  [part='summary'] {
+    flex: 1 1 auto;
+    min-inline-size: 3ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    /* See [part='category']'s comment above -- same contrast rationale. */
+    color: var(--lyra-color-text);
+  }
+  [part='summary']::before {
+    content: ': ';
+  }
+
+  [part='meta'] {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: baseline;
+    gap: 0.4em;
+    margin-inline-start: auto;
+    font-size: 0.6875rem;
+  }
+  [part='status-text'] {
+    color: var(--lyra-tool-call-chip-accent);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    white-space: nowrap;
+  }
+  [part='duration'] {
+    /* See [part='category']'s comment above -- same contrast rationale. */
+    color: var(--lyra-color-text);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /* Positioned by internal/positioner.js's place() -- see combobox's
+     [part='listbox'] for the identical fixed/z-index/max-size shape. Unlike
+     that popup this one has no open/close transition: a tooltip that
+     tracks the pointer/focus target benefits from appearing instantly, not
+     chasing a fade. */
+  [part='tooltip'] {
+    position: fixed;
+    z-index: 900;
+    box-sizing: border-box;
+    max-inline-size: min(90vw, 24rem);
+    padding: var(--lyra-space-s) var(--lyra-space-m);
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: var(--lyra-color-text);
+  }
+
+  @keyframes lyra-tool-call-chip-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes lyra-tool-call-chip-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.35;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='base'] {
+      transition: none !important;
+    }
+    :host([status='running']) [part='icon'] svg,
+    :host([status='pending']) [part='icon'] svg {
+      animation: none !important;
+    }
+  }
+`;

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

@@ -0,0 +1,145 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../select/select.js';
+import '../combobox/option.js';
+import '../checkbox/checkbox.js';
+/** The four leaf property types this phase's flat-schema renderer understands. */
+export type ToolParamFormPropertyType = 'string' | 'number' | 'integer' | 'boolean';
+/**
+ * One `schema.properties` entry. Deliberately shallow — see the class doc for
+ * the full scope limitation this type encodes.
+ */
+export interface ToolParamFormProperty {
+    type: ToolParamFormPropertyType;
+    /** A closed set of string choices, rendered as a `<lyra-select>`. Only meaningful when `type` is `'string'`. */
+    enum?: string[];
+    /** Helper text rendered under the field. */
+    description?: string;
+    /** Display label. Falls back to the property key itself when omitted. */
+    title?: string;
+    /** Pre-filled value used whenever `value` doesn't already have this key. */
+    default?: unknown;
+}
+/**
+ * The (intentionally flat) JSON Schema subset this component can render:
+ * a plain object whose every property is a string, number/integer, boolean,
+ * or string enum. See the class doc for what's out of scope.
+ */
+export interface ToolParamFormSchema {
+    type: 'object';
+    properties: Record<string, ToolParamFormProperty>;
+    required?: string[];
+}
+/**
+ * `<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 declare class LyraToolParamForm extends LyraElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResultGroup[];
+    schema: ToolParamFormSchema;
+    value: Record<string, unknown>;
+    /** Submission key for the optional native `<form>` participation — see the class doc. */
+    name: string;
+    disabled: boolean;
+    private _errors;
+    private touchedFields;
+    private internals;
+    private baseId;
+    private lastValidityKey;
+    constructor();
+    connectedCallback(): void;
+    /** `value`, with any property missing from it filled in from `schema`'s own `default` — see the class doc. */
+    get effectiveValue(): Record<string, unknown>;
+    /**
+     * 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(): Record<string, string>;
+    /** The current per-field validation errors (required-and-empty only), independent of `touchedFields`. */
+    private computeErrors;
+    /** Non-mutating validity check — unlike `reportValidity()`, never reveals inline errors. */
+    checkValidity(): boolean;
+    /**
+     * 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(): boolean;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    protected willUpdate(changed: PropertyValues): void;
+    /** Pushes `effectiveValue`/`errors` into `ElementInternals` — see the class doc's form-participation note. */
+    private syncInternals;
+    protected updated(changed: PropertyValues): void;
+    private setFieldValue;
+    private markTouched;
+    private onTextInput;
+    private onNumberInput;
+    private onSelectChange;
+    private onCheckboxChange;
+    private renderControl;
+    private renderField;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tool-param-form': LyraToolParamForm;
+    }
+}