@aceshooting/lyra-ui 2.0.0 → 2.1.0

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

@@ -4,11 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { 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 { place } from '../../internal/positioner.js';
+import { nextId } from '../../internal/a11y.js';
 import { styles } from './tool-call-chip.styles.js';
 // Mirrors the shared icon set's viewBox/stroke conventions
 // (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding
@@ -74,6 +75,15 @@ const STATUS_LABEL = {
     error: 'Error',
     denied: 'Denied',
 };
+const STATUS_VALUES = new Set(Object.keys(STATUS_LABEL));
+const statusConverter = {
+    fromAttribute(value) {
+        return value !== null && STATUS_VALUES.has(value) ? value : 'pending';
+    },
+    toAttribute(value) {
+        return value;
+    },
+};
 /** `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
@@ -107,7 +117,12 @@ function formatDuration(ms) {
  * a short preview) shown in a floating tooltip on hover/focus, positioned
  * with `internal/positioner.js`'s `place()` the same way `<lyra-combobox>`
  * positions its listbox. No tooltip is shown at all when the slot carries no
- * content — hovering an empty chip does nothing.
+ * content — hovering an empty chip does nothing. Hover and keyboard focus are
+ * tracked as independent reasons to keep the tooltip open (mirrors
+ * `<lyra-citation-badge>`'s popover), so releasing one modality while the
+ * other is still active doesn't close it, and the trigger button's
+ * `aria-describedby` points at the tooltip's id whenever it's open and has
+ * content, so the association reaches assistive tech too.
  *
  * The `icon` slot overrides the built-in per-status glyph entirely via the
  * platform's own slot-fallback-content mechanism (`<slot
@@ -141,7 +156,10 @@ export class LyraToolCallChip extends LyraElement {
         this.name = '';
         /** Optional grouping label, e.g. `research`. */
         this.category = '';
-        /** The call's current lifecycle state — drives the glyph, color, and `status-text`. */
+        /**
+         * The call's current lifecycle state — drives the glyph, color, and
+         * `status-text`. Invalid runtime values use the pending presentation.
+         */
         this.status = 'pending';
         /** Short human-readable status text, e.g. `Searching web…`. */
         this.summary = '';
@@ -159,30 +177,50 @@ export class LyraToolCallChip extends LyraElement {
         // expected to be markup, not a bare text node.
         this.hasDetailSlot = false;
         this.tooltipOpen = false;
+        this.tooltipId = nextId('tool-call-chip-tooltip');
+        // Hover and focus are tracked as independent "keep it open" reasons --
+        // mirrors lyra-citation-badge's identical hovering/focused pair for the
+        // same hover/focus preview-popover pattern -- so releasing one (e.g. the
+        // pointer leaving while the chip still has keyboard focus) doesn't close a
+        // tooltip the other modality is still holding open.
+        this.hovering = false;
+        this.focused = false;
         this.onDetailSlotChange = (e) => {
             this.hasDetailSlot = e.target.assignedElements({ flatten: true }).length > 0;
+            // The slot can be emptied out from under an already-open tooltip (e.g. a
+            // consumer clearing streamed/async preview content) -- nothing left to
+            // show, so don't leave an empty tooltip floating open regardless of
+            // whether hover/focus is still active.
+            if (!this.hasDetailSlot)
+                this.hideTooltip();
         };
-        this.showTooltip = () => {
-            if (!this.hasDetailSlot || this.tooltipOpen)
+        this.onMouseEnter = () => {
+            this.hovering = true;
+            this.showTooltip();
+        };
+        this.onMouseLeave = () => {
+            this.hovering = false;
+            if (this.focused)
                 return;
-            this.tooltipOpen = true;
+            this.hideTooltip();
+        };
+        this.onFocus = () => {
+            this.focused = true;
+            this.showTooltip();
         };
-        // Unconditional on blur/mouseleave, with no "did the pointer move into the
-        // tooltip itself" check -- the default slot is documented as read-only
-        // preview content (raw args, a short snippet), not an interactive surface
-        // meant to retain focus/hover of its own, so this stays as simple as a
-        // native `title` attribute's show/hide instead of adding a second
-        // pointer-tracking region.
-        this.hideTooltip = () => {
-            if (!this.tooltipOpen)
+        this.onBlur = () => {
+            this.focused = false;
+            if (this.hovering)
                 return;
-            this.tooltipOpen = false;
+            this.hideTooltip();
         };
         this.onKeyDown = (e) => {
             // The native <button> already handles Enter/Space activation on its
             // own -- this only needs to cover dismissing the (non-native) tooltip,
             // the same Escape-to-close convention every other popup in this library
-            // follows (see lyra-combobox's onKeyDown).
+            // follows (see lyra-combobox's onKeyDown). Unconditional close (not
+            // gated on hovering/focused) since Escape is a deliberate dismissal, not
+            // transient pointer/focus travel.
             if (e.key === 'Escape' && this.tooltipOpen) {
                 e.stopPropagation();
                 this.hideTooltip();
@@ -214,11 +252,32 @@ export class LyraToolCallChip extends LyraElement {
         super.disconnectedCallback();
         this.cleanupPositioner?.();
     }
+    showTooltip() {
+        if (!this.hasDetailSlot || this.tooltipOpen)
+            return;
+        this.tooltipOpen = true;
+    }
+    // Called both as the actual (unconditional) close -- from onDetailSlotChange
+    // and the Escape handler below, where the tooltip must close regardless of
+    // hover/focus state -- and from onMouseLeave/onBlur once each has already
+    // confirmed the *other* modality isn't still holding the tooltip open. The
+    // default slot is documented as read-only preview content (raw args, a
+    // short snippet), not an interactive surface meant to retain focus/hover of
+    // its own, so there's no "did the pointer move into the tooltip itself"
+    // check needed beyond the hovering/focused pair.
+    hideTooltip() {
+        if (!this.tooltipOpen)
+            return;
+        this.tooltipOpen = false;
+    }
+    get effectiveStatus() {
+        return STATUS_VALUES.has(this.status) ? this.status : 'pending';
+    }
     get accessibleLabel() {
         const parts = [this.name || 'Tool call'];
         if (this.summary)
             parts.push(this.summary);
-        parts.push(STATUS_LABEL[this.status]);
+        parts.push(STATUS_LABEL[this.effectiveStatus]);
         if (this.durationMs != null && Number.isFinite(this.durationMs))
             parts.push(formatDuration(this.durationMs));
         return parts.join(' — ');
@@ -227,20 +286,22 @@ export class LyraToolCallChip extends LyraElement {
         const hasCategory = this.category.length > 0;
         const hasSummary = this.summary.length > 0;
         const hasDuration = this.durationMs != null && Number.isFinite(this.durationMs);
+        const status = this.effectiveStatus;
         return html `
       <button
         part="base"
         type="button"
         aria-label=${this.getAttribute('aria-label') || this.accessibleLabel}
+        aria-describedby=${this.hasDetailSlot && this.tooltipOpen ? this.tooltipId : nothing}
         @click=${this.onClick}
-        @mouseenter=${this.showTooltip}
-        @mouseleave=${this.hideTooltip}
-        @focus=${this.showTooltip}
-        @blur=${this.hideTooltip}
+        @mouseenter=${this.onMouseEnter}
+        @mouseleave=${this.onMouseLeave}
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
         @keydown=${this.onKeyDown}
       >
         <span part="icon" aria-hidden="true">
-          <slot name="icon">${this.icon ? this.icon : STATUS_ICON[this.status]()}</slot>
+          <slot name="icon">${this.icon ? this.icon : STATUS_ICON[status]()}</slot>
         </span>
         <span part="label">
           <span part="category" ?hidden=${!hasCategory}>${this.category}</span>
@@ -248,11 +309,11 @@ export class LyraToolCallChip extends LyraElement {
           <span part="summary" ?hidden=${!hasSummary}>${this.summary}</span>
         </span>
         <span part="meta">
-          <span part="status-text">${STATUS_LABEL[this.status]}</span>
+          <span part="status-text">${STATUS_LABEL[status]}</span>
           <span part="duration" ?hidden=${!hasDuration}>${hasDuration ? formatDuration(this.durationMs) : nothing}</span>
         </span>
       </button>
-      <div part="tooltip" role="tooltip" ?hidden=${!this.tooltipOpen}>
+      <div part="tooltip" id=${this.tooltipId} role="tooltip" ?hidden=${!this.tooltipOpen}>
         <slot @slotchange=${this.onDetailSlotChange}></slot>
       </div>
     `;
@@ -265,7 +326,7 @@ __decorate([
     property()
 ], LyraToolCallChip.prototype, "category", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, converter: statusConverter })
 ], LyraToolCallChip.prototype, "status", void 0);
 __decorate([
     property()

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

@@ -5,6 +5,7 @@ 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';
+export type ToolParamFormPrimitive = string | number | boolean;
 /**
  * One `schema.properties` entry. Deliberately shallow — see the class doc for
  * the full scope limitation this type encodes.
@@ -19,6 +20,8 @@ export interface ToolParamFormProperty {
     title?: string;
     /** Pre-filled value used whenever `value` doesn't already have this key. */
     default?: unknown;
+    /** Exact primitive value required when the property is present. */
+    const?: ToolParamFormPrimitive;
 }
 /**
  * The (intentionally flat) JSON Schema subset this component can render:
@@ -38,18 +41,21 @@ export interface ToolParamFormSchema {
  *
  * **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
+ * `'string'`, `'number'`, `'integer'`, `'boolean'`, or a string `enum`;
+ * primitive `const` is also enforced. Nested objects, arrays,
+ * `oneOf`/`anyOf`/`allOf`, `$ref`, constraints such as `minLength`/`minimum`,
+ * and schema-valued `additionalProperties` 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.
+ * four above renders a visible "Unsupported field type" note and marks the
+ * form invalid 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.
+ * the control; a key listed in `required` gets a visible `*`. The outer
+ * component owns validation because JSON Schema `required` means property
+ * presence, unlike HTML controls' nonempty/must-check semantics.
  *
  * This component owns no Submit/Cancel/Approve chrome — a consumer composes
  * it inside their own dialog (e.g. a tool-approval dialog) and reads
@@ -64,7 +70,9 @@ export interface ToolParamFormSchema {
  * 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.
+ * after one edit. JSON Schema defines `default` as an annotation; this form
+ * renderer deliberately materializes it before validation and submission,
+ * so a valid default can satisfy `required` here.
  *
  * Optional native `<form>` participation is implemented via `ElementInternals`
  * attached directly (this component's value is a whole object, not a plain
@@ -78,55 +86,108 @@ export interface ToolParamFormSchema {
  * @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> }`.
+ * @event lyra-validity-change - Overall validity or field errors changed.
+ * `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).
+ * @csspart error - A field-level or form-level validation message.
  */
 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;
+    static properties: {
+        name: {
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        schema: {
+            attribute: boolean;
+            noAccessor: boolean;
+        };
+        value: {
+            attribute: boolean;
+            noAccessor: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+    };
     private _errors;
+    private _formError;
+    private showFormError;
     private touchedFields;
     private internals;
+    private validityController;
     private baseId;
+    private _fieldsetDisabled;
+    private _name;
+    private _schema;
+    private _value;
+    private _effectiveValue;
+    private _validityFlags;
+    private _disabled;
     private lastValidityKey;
     constructor();
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    private firstInvalidField;
     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>;
+    private get schemaProperties();
+    private get requiredKeys();
+    private resolveEffectiveValue;
+    get schema(): ToolParamFormSchema;
+    set schema(next: ToolParamFormSchema);
+    get value(): Record<string, unknown>;
+    set value(next: Record<string, unknown>);
+    /** Submission key for the optional native `<form>` participation, reflected synchronously. */
+    get name(): string;
+    set name(next: string);
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    /** Whether the form is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled(): boolean;
     /**
-     * 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.
+     * The current per-field validation errors (`{ [propertyKey]: message }`) —
+     * required presence, primitive type, integer, enum, const, or unsupported
+     * type — 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. */
+    /** A schema-wide or JSON-serialization error that cannot be assigned to one field. */
+    get formError(): string;
+    /**
+     * Computes the supported flat JSON Schema subset against the exact value
+     * that will be submitted. Defaults are already materialized in `effective`.
+     */
+    private computeValidation;
+    /** Resynchronizes validity without revealing 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
+     * Reveals every current field/root error (as if each field 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;
+    formStateRestoreCallback(state: string | File | FormData | null, _mode?: 'restore' | 'autocomplete'): void;
     formDisabledCallback(disabled: boolean): void;
-    protected willUpdate(changed: PropertyValues): void;
-    /** Pushes `effectiveValue`/`errors` into `ElementInternals` — see the class doc's form-participation note. */
+    private schemaShapeError;
+    private serializeEffectiveValue;
+    /** Pushes the already-computed snapshot into `ElementInternals`. */
     private syncInternals;
+    private syncFormState;
     protected updated(changed: PropertyValues): void;
     private setFieldValue;
     private markTouched;