@aceshooting/lyra-ui 2.0.0 → 2.1.0

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

@@ -5,34 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { 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 { AnchoredValidityController, resolveValidityAnchor, VALIDITY_ANCHOR, } from '../../internal/anchored-validity.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
@@ -41,18 +23,21 @@ function isFieldEmpty(prop, v) {
  *
  * **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
@@ -67,7 +52,9 @@ function isFieldEmpty(prop, v) {
  * 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
@@ -81,37 +68,85 @@ function isFieldEmpty(prop, v) {
  * @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 class LyraToolParamForm extends LyraElement {
     static { this.formAssociated = true; }
     static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        name: { reflect: true, noAccessor: true },
+        schema: { attribute: false, noAccessor: true },
+        value: { attribute: false, noAccessor: true },
+        disabled: { type: Boolean, reflect: true, noAccessor: true },
+    }; }
     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.
+        // The true (touched-independent) per-field error set, recomputed by the
+        // synchronous schema/value accessors so native validity APIs and the next
+        // render observe the same state. Exposed publicly (read-only) via the
+        // `errors` getter below, under a leading underscore so the getter itself
+        // can be named plain `errors` without a collision.
         this._errors = {};
+        this._formError = '';
+        this.showFormError = false;
         // 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._fieldsetDisabled = false;
+        this._name = '';
+        this._schema = EMPTY_SCHEMA;
+        this._value = {};
+        this._effectiveValue = {};
+        this._validityFlags = {};
+        this._disabled = false;
         this.internals = this.attachInternals();
+        this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
+        this.syncFormState();
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get labels() {
+        return this.internals.labels;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    /** @internal */
+    [VALIDITY_ANCHOR]() {
+        const field = this.firstInvalidField();
+        if (!field)
+            return undefined;
+        const input = field.querySelector('input.control');
+        if (input)
+            return input;
+        for (const child of field.children) {
+            const anchor = resolveValidityAnchor(child);
+            if (anchor)
+                return anchor;
+        }
+        return undefined;
+    }
+    firstInvalidField() {
+        const firstInvalidKey = Object.keys(this._errors)[0];
+        if (!firstInvalidKey || !this.renderRoot)
+            return undefined;
+        return Array.from(this.renderRoot.querySelectorAll('[part="field"]')).find((candidate) => candidate.dataset.key === firstInvalidKey);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -120,12 +155,24 @@ export class LyraToolParamForm extends LyraElement {
         // 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();
+        this.syncFormState();
     }
     /** `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 ?? {};
+        return { ...this._effectiveValue };
+    }
+    get schemaProperties() {
+        const properties = this.schema?.properties;
+        return properties !== null && typeof properties === 'object' && !Array.isArray(properties)
+            ? properties
+            : {};
+    }
+    get requiredKeys() {
+        const required = this.schema?.required;
+        return Array.isArray(required) ? required.filter((key) => typeof key === 'string') : [];
+    }
+    resolveEffectiveValue() {
+        const props = this.schemaProperties;
         const out = { ...this.value };
         for (const key of Object.keys(props)) {
             // `hasOwnProperty`, not `out[key] === undefined` — a number field the
@@ -136,88 +183,282 @@ export class LyraToolParamForm extends LyraElement {
             // 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;
+                Object.defineProperty(out, key, {
+                    configurable: true,
+                    enumerable: true,
+                    writable: true,
+                    value: props[key].default,
+                });
             }
         }
         return out;
     }
+    get schema() {
+        return this._schema;
+    }
+    set schema(next) {
+        const old = this._schema;
+        this._schema = next ?? EMPTY_SCHEMA;
+        this.syncFormState();
+        this.requestUpdate('schema', old);
+    }
+    get value() {
+        return this._value;
+    }
+    set value(next) {
+        const old = this._value;
+        this._value = next ?? {};
+        this.syncFormState();
+        this.requestUpdate('value', old);
+    }
+    /** Submission key for the optional native `<form>` participation, reflected synchronously. */
+    get name() {
+        return this._name;
+    }
+    set name(next) {
+        const old = this._name;
+        this._name = next ?? '';
+        if (this._name) {
+            this.setAttribute('name', this._name);
+        }
+        else {
+            this.removeAttribute('name');
+        }
+        this.requestUpdate('name', old);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(next) {
+        const old = this._disabled;
+        this._disabled = Boolean(next);
+        this.toggleAttribute('disabled', this._disabled);
+        this.requestUpdate('disabled', old);
+    }
+    /** Whether the form is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled() {
+        return this.disabled || this._fieldsetDisabled;
+    }
     /**
-     * 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() {
         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;
+    /** A schema-wide or JSON-serialization error that cannot be assigned to one field. */
+    get formError() {
+        return this._formError;
+    }
+    /**
+     * Computes the supported flat JSON Schema subset against the exact value
+     * that will be submitted. Defaults are already materialized in `effective`.
+     */
+    computeValidation(effective) {
+        const props = this.schemaProperties;
+        const required = new Set(this.requiredKeys);
         const out = {};
+        const flags = {};
+        const addError = (key, message) => {
+            Object.defineProperty(out, key, {
+                configurable: true,
+                enumerable: true,
+                writable: true,
+                value: message,
+            });
+        };
         for (const key of Object.keys(props)) {
-            if (!required.has(key))
+            const prop = props[key];
+            const type = prop?.type;
+            if (type !== 'string' && type !== 'number' && type !== 'integer' && type !== 'boolean') {
+                addError(key, `Unsupported field type "${String(type)}".`);
+                flags.customError = true;
+                continue;
+            }
+            const present = Object.prototype.hasOwnProperty.call(effective, key) && effective[key] !== undefined;
+            if (!present) {
+                if (required.has(key)) {
+                    addError(key, 'This field is required.');
+                    flags.valueMissing = true;
+                }
+                continue;
+            }
+            const v = effective[key];
+            if (type === 'string' && typeof v !== 'string') {
+                addError(key, 'Must be a string.');
+                flags.typeMismatch = true;
+                continue;
+            }
+            if (type === 'number' && (typeof v !== 'number' || !Number.isFinite(v))) {
+                addError(key, 'Must be a finite number.');
+                flags.typeMismatch = true;
                 continue;
-            if (isFieldEmpty(props[key], effective[key])) {
-                out[key] = 'This field is required.';
+            }
+            if (type === 'integer' && (typeof v !== 'number' || !Number.isFinite(v))) {
+                addError(key, 'Must be a whole number.');
+                flags.typeMismatch = true;
+                continue;
+            }
+            if (type === 'integer' && !Number.isInteger(v)) {
+                addError(key, 'Must be a whole number.');
+                flags.stepMismatch = true;
+                continue;
+            }
+            if (type === 'boolean' && typeof v !== 'boolean') {
+                addError(key, 'Must be a boolean.');
+                flags.typeMismatch = true;
+                continue;
+            }
+            if (type === 'string' && Array.isArray(prop.enum) && !prop.enum.includes(v)) {
+                addError(key, `Must be one of: ${prop.enum.join(', ')}.`);
+                flags.customError = true;
+                continue;
+            }
+            if (prop.const !== undefined && v !== prop.const) {
+                addError(key, `Must equal ${JSON.stringify(prop.const)}.`);
+                flags.customError = true;
             }
         }
-        return out;
+        for (const key of required) {
+            if (Object.prototype.hasOwnProperty.call(props, key))
+                continue;
+            if (!Object.prototype.hasOwnProperty.call(effective, key) || effective[key] === undefined) {
+                addError(key, 'This field is required.');
+                flags.valueMissing = true;
+            }
+        }
+        return { errors: out, flags };
     }
-    /** Non-mutating validity check — unlike `reportValidity()`, never reveals inline errors. */
+    /** Resynchronizes validity without revealing inline errors. */
     checkValidity() {
+        this.syncFormState();
         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
+     * 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() {
-        const errors = this.computeErrors();
-        if (Object.keys(errors).length > 0) {
-            this.touchedFields = new Set([...this.touchedFields, ...Object.keys(errors)]);
+        this.syncFormState();
+        if (Object.keys(this._errors).length > 0) {
+            this.touchedFields = new Set([...this.touchedFields, ...Object.keys(this._errors)]);
         }
-        return this.internals.checkValidity();
+        if (this._formError)
+            this.showFormError = true;
+        return this.internals.reportValidity();
     }
     formResetCallback() {
         this.value = {};
         this.touchedFields = new Set();
+        this.showFormError = false;
+    }
+    formStateRestoreCallback(state, _mode) {
+        let restored = {};
+        if (typeof state === 'string') {
+            try {
+                const parsed = JSON.parse(state);
+                if (parsed !== null && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                    restored = parsed;
+                }
+            }
+            catch {
+                // Invalid persisted state restores the safe empty object.
+            }
+        }
+        this.value = restored;
     }
     formDisabledCallback(disabled) {
-        this.disabled = disabled;
+        this._fieldsetDisabled = disabled;
+        this.requestUpdate();
     }
-    willUpdate(changed) {
-        if (changed.has('value') || changed.has('schema') || !this.hasUpdated) {
-            this._errors = this.computeErrors();
+    schemaShapeError() {
+        const schema = this.schema;
+        if (schema === null || typeof schema !== 'object' || schema.type !== 'object') {
+            return 'Schema must describe an object.';
+        }
+        const properties = schema.properties;
+        if (properties === null || typeof properties !== 'object' || Array.isArray(properties)) {
+            return 'Schema properties must be a flat object.';
         }
+        return '';
     }
-    /** 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({});
+    serializeEffectiveValue(effective) {
+        const serialized = JSON.stringify(effective, (_key, value) => {
+            if (typeof value === 'number' && !Number.isFinite(value)) {
+                throw new TypeError('Non-finite numbers are not JSON values.');
+            }
+            return value;
+        });
+        if (typeof serialized !== 'string')
+            throw new TypeError('Value did not serialize to JSON.');
+        return serialized;
+    }
+    /** Pushes the already-computed snapshot into `ElementInternals`. */
+    syncInternals(formValue) {
+        this.internals.setFormValue(formValue, formValue);
+        if (Object.keys(this._validityFlags).length === 0) {
+            this.validityController.setValidity({});
         }
         else {
-            const firstMessage = Object.values(this._errors)[0] ?? 'Some required fields are empty.';
-            this.internals.setValidity({ valueMissing: true }, firstMessage);
+            const firstMessage = Object.values(this._errors)[0] ?? this._formError ?? 'The value is invalid.';
+            this.validityController.setValidity(this._validityFlags, firstMessage);
         }
     }
+    syncFormState() {
+        let effective = {};
+        let errors = {};
+        let flags = {};
+        let formError = '';
+        let formValue = null;
+        try {
+            formError = this.schemaShapeError();
+            effective = this.resolveEffectiveValue();
+            const validation = this.computeValidation(effective);
+            errors = validation.errors;
+            flags = validation.flags;
+            formValue = this.serializeEffectiveValue(effective);
+        }
+        catch {
+            formError = 'Value must be JSON-serializable.';
+            formValue = null;
+        }
+        if (formError) {
+            flags.customError = true;
+            formValue = null;
+        }
+        this._effectiveValue = effective;
+        if (JSON.stringify(this._errors) !== JSON.stringify(errors))
+            this._errors = errors;
+        this._formError = formError;
+        this._validityFlags = flags;
+        this.syncInternals(formValue);
+    }
     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 (changed.has('value') || changed.has('schema') || changed.has('_errors') || changed.has('_formError')) {
+            const valid = Object.keys(this._errors).length === 0 && this._formError === '';
+            const key = JSON.stringify({ valid, errors: this._errors, formError: this._formError });
             if (key !== this.lastValidityKey) {
                 this.lastValidityKey = key;
                 this.emit('lyra-validity-change', { valid, errors: { ...this._errors } });
             }
+            const nestedUpdates = Array.from(this.firstInvalidField()?.children ?? [])
+                .filter((element) => typeof element[VALIDITY_ANCHOR] === 'function')
+                .map((element) => element.updateComplete)
+                .filter((update) => update !== undefined);
+            if (nestedUpdates.length > 0) {
+                void Promise.all(nestedUpdates).then(() => this.validityController.refreshAnchor());
+            }
         }
     }
     setFieldValue(key, val) {
+        if (this.effectiveDisabled)
+            return;
         this.value = { ...this.value, [key]: val };
         this.emit('lyra-input', { value: this.effectiveValue });
     }
@@ -254,9 +495,9 @@ export class LyraToolParamForm extends LyraElement {
             return html `<lyra-select
         id=${fieldId}
         aria-label=${errorMessage ? `${label}. ${errorMessage}` : label}
+        aria-required=${required ? 'true' : nothing}
         .value=${typeof effective === 'string' ? effective : ''}
-        ?required=${required}
-        ?disabled=${this.disabled}
+        ?disabled=${this.effectiveDisabled}
         @change=${(e) => this.onSelectChange(key, e)}
       >
         ${prop.enum.map((v) => html `<lyra-option value=${v}>${v}</lyra-option>`)}
@@ -268,10 +509,10 @@ export class LyraToolParamForm extends LyraElement {
         type="text"
         id=${fieldId}
         aria-describedby=${describedBy || nothing}
+        aria-required=${required ? 'true' : nothing}
         aria-invalid=${errorMessage ? 'true' : nothing}
         .value=${typeof effective === 'string' ? effective : ''}
-        ?required=${required}
-        ?disabled=${this.disabled}
+        ?disabled=${this.effectiveDisabled}
         @input=${(e) => this.onTextInput(key, e)}
       />`;
         }
@@ -283,10 +524,10 @@ export class LyraToolParamForm extends LyraElement {
         id=${fieldId}
         step=${prop.type === 'integer' ? '1' : 'any'}
         aria-describedby=${describedBy || nothing}
+        aria-required=${required ? 'true' : nothing}
         aria-invalid=${errorMessage ? 'true' : nothing}
         .value=${numValue}
-        ?required=${required}
-        ?disabled=${this.disabled}
+        ?disabled=${this.effectiveDisabled}
         @input=${(e) => this.onNumberInput(key, e)}
       />`;
         }
@@ -295,12 +536,16 @@ export class LyraToolParamForm extends LyraElement {
             // 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.
+            // content, not an inert host attribute. Once there's an error, fold it
+            // into aria-label the same way the enum/select branch above does --
+            // an explicit aria-label overrides the slotted accessible name, so the
+            // normal (no error) case is left alone to keep deriving its name from
+            // the slot per lyra-checkbox's own documented contract.
             return html `<lyra-checkbox
         id=${fieldId}
+        aria-label=${errorMessage ? `${label}. ${errorMessage}` : nothing}
         ?checked=${effective === true}
-        ?required=${required}
-        ?disabled=${this.disabled}
+        ?disabled=${this.effectiveDisabled}
         @lyra-change=${(e) => this.onCheckboxChange(key, e)}
       >
         <span part="label">${label}</span>
@@ -308,11 +553,13 @@ export class LyraToolParamForm extends LyraElement {
         }
         // 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>`;
+        // dropping the field or throwing. Still carries id=fieldId like every
+        // other control-slot render, since renderField's shared, non-boolean
+        // branch above always renders a <label for=fieldId> pointing at it.
+        return html `<p class="unsupported" id=${fieldId}>Unsupported field type "${prop.type}".</p>`;
     }
     renderField(key, prop, index) {
-        const required = (this.schema.required ?? []).includes(key);
+        const required = this.requiredKeys.includes(key);
         const label = prop.title ?? key;
         const fieldId = `${this.baseId}-f${index}`;
         const descId = prop.description ? `${fieldId}-desc` : '';
@@ -320,7 +567,7 @@ export class LyraToolParamForm extends LyraElement {
         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 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}
@@ -338,28 +585,25 @@ export class LyraToolParamForm extends LyraElement {
     `;
     }
     render() {
-        const props = this.schema?.properties ?? {};
+        const props = this.schemaProperties;
         const keys = Object.keys(props);
         return html `<div part="base">
       ${keys.map((key, i) => this.renderField(key, props[key], i))}
+      ${this.showFormError && this._formError
+            ? html `<p part="error" class="form-error" role="alert">${this._formError}</p>`
+            : nothing}
     </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);
+    state()
+], LyraToolParamForm.prototype, "_errors", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], LyraToolParamForm.prototype, "disabled", void 0);
+    state()
+], LyraToolParamForm.prototype, "_formError", void 0);
 __decorate([
     state()
-], LyraToolParamForm.prototype, "_errors", void 0);
+], LyraToolParamForm.prototype, "showFormError", void 0);
 __decorate([
     state()
 ], LyraToolParamForm.prototype, "touchedFields", void 0);