@elle96/ng-json-schema-manager 0.1.3 → 0.2.0

package/fesm2022/elle96-ng-json-schema-manager.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, PLATFORM_ID, Inject, NgModule } from '@angular/core';
-import * as i4 from '@angular/forms';
-import { FormGroup, FormArray, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Injectable, forwardRef, Input, Directive, EventEmitter, Output, Optional, ChangeDetectionStrategy, ViewEncapsulation, Component, PLATFORM_ID, Inject, NgModule } from '@angular/core';
+import * as i5 from '@angular/forms';
+import { FormGroup, FormArray, FormControl, Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import Ajv from 'ajv';
 import Ajv2019 from 'ajv/dist/2019';
 import Ajv2020 from 'ajv/dist/2020';
 import addFormats from 'ajv-formats';
 import AjvDraft04 from 'ajv-draft-04';
-import * as i3 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 
 class JsonSchemaFormService {
@@ -274,10 +274,10 @@ class JsonSchemaFormService {
             return merged;
         }, {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -449,10 +449,10 @@ class JsonSchemaResolverService {
         }
         return current;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaResolverService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaResolverService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaResolverService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaResolverService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -569,20 +569,159 @@ class JsonSchemaValidationService {
         this.ajvCache.set(draft, ajv);
         return ajv;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaValidationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaValidationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaValidationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaValidationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
+/**
+ * Options shared by every node of a form. Provided by `jsm-json-schema-form`, so each form instance has its own.
+ */
+class JsonSchemaFormOptions {
+    decimalSeparator = '.';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormOptions, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormOptions });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormOptions, decorators: [{
+            type: Injectable
+        }] });
+const COMPLETE_NUMBER = /^-?(\d+[.,]?\d*|[.,]\d+)$/;
+/**
+ * Keeps digits, a leading minus and a single decimal separator (written with `separator`);
+ * `,` and `.` are both accepted as input.
+ */
+function sanitizeNumericText(text, separator) {
+    let result = '';
+    let hasDecimal = false;
+    for (const char of text) {
+        if (char >= '0' && char <= '9') {
+            result += char;
+        }
+        else if (char === '-' && result === '') {
+            result += char;
+        }
+        else if ((char === ',' || char === '.') && !hasDecimal) {
+            hasDecimal = true;
+            result += separator;
+        }
+    }
+    return result;
+}
+/** Text → model: empty → `null`, a complete number → number, anything else stays a string (validation reports it). */
+function parseNumericText(text) {
+    const trimmed = text.trim();
+    if (trimmed === '') {
+        return null;
+    }
+    if (COMPLETE_NUMBER.test(trimmed)) {
+        return Number(trimmed.replace(',', '.'));
+    }
+    return trimmed;
+}
+/** Model → text shown in the input. */
+function formatNumeric(value, separator) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    return typeof value === 'number' ? String(value).replace('.', separator) : String(value);
+}
+/** Shows decimals with the configured separator inside messages ("must be >= 0.1" → "must be >= 0,1"). */
+function localizeNumbers(message, separator) {
+    return separator === ',' ? message.replace(/(\d)\.(\d)/g, '$1,$2') : message;
+}
+const toParsed = (value) => (typeof value === 'string' ? parseNumericText(value) : (value ?? null));
+/**
+ * `ControlValueAccessor` for `number`/`integer` fields. The input is a text field (`inputmode="decimal"`), so the
+ * decimal comma is accepted, and the model always holds a JSON number once the text is a complete number.
+ * It never writes to the control while rendering or when the text is unchanged.
+ */
+class NumericInputDirective {
+    _el;
+    _renderer;
+    jsmDecimalSeparator = '.';
+    _model = null;
+    _onChange = () => undefined;
+    _onTouched = () => undefined;
+    constructor(_el, _renderer) {
+        this._el = _el;
+        this._renderer = _renderer;
+    }
+    _show(text) {
+        this._renderer.setProperty(this._el.nativeElement, 'value', text);
+    }
+    ngOnChanges(changes) {
+        if (changes['jsmDecimalSeparator'] && !changes['jsmDecimalSeparator'].firstChange && typeof this._model === 'number') {
+            this._show(formatNumeric(this._model, this.jsmDecimalSeparator));
+        }
+    }
+    writeValue(value) {
+        this._model = value ?? null;
+        this._show(formatNumeric(value, this.jsmDecimalSeparator));
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._renderer.setProperty(this._el.nativeElement, 'disabled', isDisabled);
+    }
+    onInput() {
+        const input = this._el.nativeElement;
+        const raw = input.value;
+        const cleaned = sanitizeNumericText(raw, this.jsmDecimalSeparator);
+        if (cleaned !== raw) {
+            const caret = Math.max(0, (input.selectionStart ?? raw.length) - (raw.length - cleaned.length));
+            input.value = cleaned;
+            input.setSelectionRange(caret, caret);
+        }
+        this._model = parseNumericText(cleaned);
+        this._onChange(this._model);
+    }
+    onBlur() {
+        const input = this._el.nativeElement;
+        let text = input.value.trim();
+        if (text.endsWith(',') || text.endsWith('.')) {
+            text = text.slice(0, -1);
+        }
+        if (text === '-') {
+            text = '';
+        }
+        const parsed = parseNumericText(text);
+        this._show(typeof parsed === 'number' ? formatNumeric(parsed, this.jsmDecimalSeparator) : text);
+        // Update the model only when the value really changed ("13" and 13 are the same value).
+        if (parsed !== toParsed(this._model)) {
+            this._model = parsed;
+            this._onChange(parsed);
+        }
+        this._onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NumericInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: NumericInputDirective, isStandalone: true, selector: "input[jsmNumeric]", inputs: { jsmDecimalSeparator: "jsmDecimalSeparator" }, host: { listeners: { "input": "onInput()", "blur": "onBlur()" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericInputDirective), multi: true }], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NumericInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[jsmNumeric]',
+                    standalone: true,
+                    host: { '(input)': 'onInput()', '(blur)': 'onBlur()' },
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericInputDirective), multi: true }],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { jsmDecimalSeparator: [{
+                type: Input
+            }] } });
+
 class JsonSchemaNodeComponent {
     schemaService;
     validation;
     cdr;
+    options;
     schema;
     control;
     label = '';
@@ -592,26 +731,37 @@ class JsonSchemaNodeComponent {
     parent;
     controlKey;
     allowAdditionalProperties = false;
+    /** When true, errors are shown regardless of touched/dirty state (e.g. triggered by an external save button). */
+    showErrors = false;
     controlReplaced = new EventEmitter();
     selectedOneOf = 0;
     selectedAnyOf = new Set();
     newPropertyKey = '';
     propertyError = '';
+    /** Tracks whether this primitive control has been touched (for OnPush CD). */
+    isTouched = false;
     valueSub;
-    constructor(schemaService, validation, cdr) {
+    constructor(schemaService, validation, cdr, options) {
         this.schemaService = schemaService;
         this.validation = validation;
         this.cdr = cdr;
+        this.options = options;
     }
     ngOnInit() {
         if (this.schema.anyOf?.length)
             this.selectedAnyOf.add(0);
-        // Subscribe to value changes to trigger CD for OnPush (needed for toggle visual state)
+        // markForCheck is enough for value changes — Angular will re-render in the next CD cycle
+        // without recreating DOM nodes, so the focused input keeps its focus.
         this.valueSub = this.control.valueChanges.subscribe(() => this.cdr.markForCheck());
     }
     ngOnDestroy() {
         this.valueSub?.unsubscribe();
     }
+    /** Called on blur of primitive inputs to trigger CD after Angular marks the control as touched. */
+    onBlur() {
+        this.isTouched = true;
+        this.cdr.markForCheck();
+    }
     isSimpleChild(key) {
         const s = this.schemaForKey(key);
         if (s.oneOf?.length || s.anyOf?.length || s.allOf?.length)
@@ -647,11 +797,20 @@ class JsonSchemaNodeComponent {
     get resolvedType() {
         return this.schemaService.resolveType(this.effectiveSchema) ?? 'string';
     }
+    get decimalSeparator() {
+        return this.options?.decimalSeparator ?? '.';
+    }
+    /** `multipleOf` of this node's own schema, exposed as step metadata. */
+    get numericStep() {
+        return this.effectiveSchema.multipleOf ? String(this.effectiveSchema.multipleOf) : 'any';
+    }
     get inputKind() {
         if (this.effectiveSchema.enum)
             return 'select';
         if (this.resolvedType === 'boolean')
             return 'checkbox';
+        if (this.resolvedType === 'number' || this.resolvedType === 'integer')
+            return 'number';
         if (this.effectiveSchema.format === 'textarea' || (this.effectiveSchema.maxLength ?? 0) > 200)
             return 'textarea';
         return 'text';
@@ -684,6 +843,46 @@ class JsonSchemaNodeComponent {
         return this.effectiveSchema.additionalProperties !== false || !!this.effectiveSchema.patternProperties;
     }
     get errorsForPath() { return this.errorsMap.get(this.path) ?? []; }
+    /** Combined errors: Ajv errors from errorsMap + Angular validator errors on the control. */
+    get allErrors() {
+        const ajvErrors = this.errorsForPath;
+        const ctrl = this.control;
+        if (!ctrl.errors)
+            return ajvErrors;
+        const angularErrors = [];
+        const errs = ctrl.errors;
+        if (errs['required'])
+            angularErrors.push('This field is required');
+        if (errs['minlength'])
+            angularErrors.push(`Minimum length is ${errs['minlength'].requiredLength}`);
+        if (errs['maxlength'])
+            angularErrors.push(`Maximum length is ${errs['maxlength'].requiredLength}`);
+        if (errs['min'])
+            angularErrors.push(`Minimum value is ${errs['min'].min}`);
+        if (errs['max'])
+            angularErrors.push(`Maximum value is ${errs['max'].max}`);
+        if (errs['email'])
+            angularErrors.push('Invalid email address');
+        if (errs['pattern'])
+            angularErrors.push('Value does not match the required pattern');
+        if (errs['integer'])
+            angularErrors.push('Value must be an integer');
+        if (errs['exclusiveMinimum'])
+            angularErrors.push('Value must be greater than the minimum');
+        if (errs['exclusiveMaximum'])
+            angularErrors.push('Value must be less than the maximum');
+        if (errs['multipleOf'])
+            angularErrors.push('Value must be a multiple of the required number');
+        if (errs['minItems'])
+            angularErrors.push(`Minimum ${errs['minItems'].requiredLength ?? ''} items required`);
+        if (errs['maxItems'])
+            angularErrors.push(`Maximum ${errs['maxItems'].requiredLength ?? ''} items allowed`);
+        if (errs['uniqueItems'])
+            angularErrors.push('Items must be unique');
+        // Merge: prefer Ajv messages, fall back to Angular messages for errors not covered by Ajv
+        const messages = ajvErrors.length > 0 ? ajvErrors : angularErrors;
+        return messages.map((message) => localizeNumbers(message, this.decimalSeparator));
+    }
     get metaBadges() {
         const b = [];
         if (this.effectiveSchema.deprecated)
@@ -861,499 +1060,521 @@ class JsonSchemaNodeComponent {
             } : {}),
         }), {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaNodeComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaValidationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: JsonSchemaNodeComponent, isStandalone: true, selector: "jsm-schema-node", inputs: { schema: "schema", control: "control", label: "label", required: "required", path: "path", errorsMap: "errorsMap", parent: "parent", controlKey: "controlKey", allowAdditionalProperties: "allowAdditionalProperties" }, outputs: { controlReplaced: "controlReplaced" }, ngImport: i0, template: `
-    <ng-container [ngSwitch]="nodeKind">
-
-      <!-- ═══ oneOf ═══ -->
-      <div *ngSwitchCase="'oneOf'" class="jsm-combinator">
-        <div class="jsm-combinator-header">
-          <div>
-            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
-            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
-          </div>
-          <span class="jsm-combinator-badge jsm-badge--oneof">oneOf</span>
-        </div>
-        <div class="jsm-oneof-tabs">
-          <button *ngFor="let option of schema.oneOf; let i = index" type="button"
-            class="jsm-tab" [class.jsm-tab--active]="selectedOneOf === i"
-            (click)="selectedOneOf = i; onOneOfChange()">
-            {{ option.title || ('Option ' + (i + 1)) }}
-          </button>
-        </div>
-        <div class="jsm-combinator-body" *ngIf="activeVariant">
-          <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
-            [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
-            [allowAdditionalProperties]="allowAdditionalProperties"
-            (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-        </div>
-      </div>
-
-      <!-- ═══ anyOf ═══ -->
-      <div *ngSwitchCase="'anyOf'" class="jsm-combinator">
-        <div class="jsm-combinator-header">
-          <div>
-            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
-            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
-          </div>
-          <span class="jsm-combinator-badge jsm-badge--anyof">anyOf</span>
-        </div>
-        <div class="jsm-anyof-options">
-          <label *ngFor="let option of schema.anyOf; let i = index"
-            class="jsm-anyof-option" [class.jsm-anyof-option--active]="selectedAnyOf.has(i)">
-            <input type="checkbox" class="sr-only" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
-            {{ option.title || ('Option ' + (i + 1)) }}
-          </label>
-        </div>
-        <div class="jsm-combinator-body" *ngIf="activeVariant">
-          <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
-            [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
-            [allowAdditionalProperties]="allowAdditionalProperties"
-            (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-        </div>
-      </div>
-
-      <!-- ═══ allOf ═══ -->
-      <div *ngSwitchCase="'allOf'" class="jsm-combinator">
-        <div class="jsm-combinator-header">
-          <div>
-            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
-            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
-          </div>
-          <span class="jsm-combinator-badge jsm-badge--allof">allOf</span>
-        </div>
-        <div class="jsm-combinator-body">
-          <div *ngFor="let subSchema of mergedAllOf; let i = index" class="jsm-allof-section">
-            <jsm-schema-node [schema]="subSchema" [control]="control" [parent]="parent" [controlKey]="controlKey"
-              [path]="path" [errorsMap]="errorsMap" [label]="subSchema.title || ('Section ' + (i + 1))" [required]="required"
-              [allowAdditionalProperties]="allowAdditionalProperties"
-              (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-          </div>
-        </div>
-      </div>
-
-      <!-- ═══ object ═══ -->
-      <fieldset *ngSwitchCase="'object'" class="jsm-fieldset">
-        <legend class="jsm-legend">{{ schema.title || label }}</legend>
-        <p *ngIf="schema.description" class="jsm-field-hint" style="margin-bottom:.75rem;margin-top:.25rem;">{{ schema.description }}</p>
-
-        <div *ngIf="metaBadges.length" class="jsm-badge-row" style="margin-bottom:.75rem;">
-          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
-        </div>
-
-        <div class="jsm-obj-grid" [formGroup]="controlAsGroup">
-          <ng-container *ngFor="let key of simpleKeys">
-            <div style="display:flex;flex-direction:column;gap:.25rem;">
-              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
-                <span class="jsm-dynamic-key-label">{{ key }}</span>
-                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
-              </div>
-              <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
-                [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
-                [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties"
-                (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-            </div>
-          </ng-container>
-        </div>
-
-        <div class="jsm-obj-complex" *ngIf="complexKeys.length > 0" [formGroup]="controlAsGroup">
-          <ng-container *ngFor="let key of complexKeys">
-            <div style="display:flex;flex-direction:column;gap:.25rem;">
-              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
-                <span class="jsm-dynamic-key-label">{{ key }}</span>
-                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
-              </div>
-              <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
-                [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
-                [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties"
-                (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-            </div>
-          </ng-container>
-        </div>
-
-        <div *ngIf="canAddProperty" class="jsm-add-prop">
-          <p class="jsm-add-prop-label">Add property</p>
-          <div class="jsm-add-prop-row">
-            <input class="jsm-input jsm-input--sm" style="flex:1;" [(ngModel)]="newPropertyKey" placeholder="propertyName" />
-            <button type="button" class="jsm-btn-primary" (click)="addDynamicProperty()">Add</button>
-          </div>
-          <p *ngIf="propertyError" class="jsm-error-msg">
-            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-            {{ propertyError }}
-          </p>
-        </div>
-
-        <div *ngIf="errorsForPath.length" class="jsm-error-list" style="margin-top:.75rem;">
-          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
-            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-            {{ error }}
-          </p>
-        </div>
-      </fieldset>
-
-      <!-- ═══ array ═══ -->
-      <div *ngSwitchCase="'array'" class="jsm-array-block">
-        <div class="jsm-array-header">
-          <div>
-            <p class="jsm-array-title">
-              {{ schema.title || label }}<span *ngIf="required" style="color:#ef4444;margin-left:.125rem;">*</span>
-            </p>
-            <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
-          </div>
-          <button type="button" class="jsm-btn-primary" (click)="addArrayItem()" [disabled]="!canAddArrayItem">
-            <svg style="width:.875rem;height:.875rem;flex-shrink:0;" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-            Add item
-          </button>
-        </div>
-
-        <div *ngIf="effectiveSchema.contains" class="jsm-contains-hint">
-          Must contain matching item(s)
-          <span *ngIf="effectiveSchema.minContains"> · min {{ effectiveSchema.minContains }}</span>
-          <span *ngIf="effectiveSchema.maxContains"> · max {{ effectiveSchema.maxContains }}</span>
-        </div>
-
-        <div *ngIf="metaBadges.length" class="jsm-badge-row">
-          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
-        </div>
-
-        <div class="jsm-array-items" *ngIf="arrayControls.length > 0; else emptyArray">
-          <div *ngFor="let item of arrayControls; let i = index" class="jsm-array-item">
-            <div class="jsm-array-item-header">
-              <span class="jsm-array-index">{{ i + 1 }}</span>
-              <button type="button" class="jsm-btn-danger" (click)="removeArrayItem(i)">Remove</button>
-            </div>
-            <jsm-schema-node [schema]="schemaForIndex(i)" [control]="item" [parent]="controlAsArray"
-              [controlKey]="i" [path]="pathForChild(i)" [errorsMap]="errorsMap" [label]="label + ' item'"
-              [allowAdditionalProperties]="allowAdditionalProperties"
-              (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-          </div>
-        </div>
-
-        <ng-template #emptyArray>
-          <div class="jsm-empty-array">No items yet — click "Add item" to start.</div>
-        </ng-template>
-
-        <div *ngIf="errorsForPath.length" class="jsm-error-list">
-          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
-            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-            {{ error }}
-          </p>
-        </div>
-      </div>
-
-      <!-- ═══ primitive ═══ -->
-      <div *ngSwitchDefault class="jsm-field">
-        <ng-container *ngIf="inputKind !== 'checkbox'">
-          <label class="jsm-field-label">
-            {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
-          </label>
-          <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
-        </ng-container>
-
-        <div *ngIf="metaBadges.length" class="jsm-badge-row">
-          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
-        </div>
-
-        <ng-container [ngSwitch]="inputKind">
-          <input *ngSwitchCase="'text'" class="jsm-input"
-            [class.jsm-input--error]="errorsForPath.length && controlAsFormControl.dirty"
-            [attr.type]="inputType" [attr.placeholder]="schema.title || label"
-            [formControl]="controlAsFormControl" />
-
-          <textarea *ngSwitchCase="'textarea'" rows="4" class="jsm-textarea"
-            [class.jsm-textarea--error]="errorsForPath.length && controlAsFormControl.dirty"
-            [attr.placeholder]="schema.title || label"
-            [formControl]="controlAsFormControl"></textarea>
-
-          <div *ngSwitchCase="'select'" class="jsm-select-wrap">
-            <select class="jsm-select"
-              [class.jsm-select--error]="errorsForPath.length && controlAsFormControl.dirty"
-              [formControl]="controlAsFormControl">
-              <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
-            </select>
-            <svg class="jsm-select-chevron" viewBox="0 0 16 16" fill="none">
-              <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </div>
-
-          <label *ngSwitchCase="'checkbox'" class="jsm-toggle-label">
-            <span class="jsm-toggle-track" [class.jsm-on]="controlAsFormControl.value">
-              <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
-              <span class="jsm-toggle-thumb"></span>
-            </span>
-            <span class="jsm-toggle-text">
-              {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
-            </span>
-          </label>
-        </ng-container>
-
-        <p *ngIf="inputKind === 'checkbox' && schema.description" class="jsm-field-hint">{{ schema.description }}</p>
-        <p *ngIf="effectiveSchema.examples?.length" class="jsm-example">e.g. {{ effectiveSchema.examples?.[0] }}</p>
-        <p *ngIf="effectiveSchema.contentMediaType" class="jsm-example">
-          {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
-        </p>
-
-        <div *ngIf="errorsForPath.length && controlAsFormControl.dirty" class="jsm-error-list">
-          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
-            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none">
-              <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
-              <path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-            </svg>
-            {{ error }}
-          </p>
-        </div>
-      </div>
-
-    </ng-container>
-  `, isInline: true, styles: [".jsm-field{display:flex;flex-direction:column;gap:.375rem}.jsm-field-label{display:block;font-size:.8125rem;font-weight:600;color:#374151}.jsm-field-hint{font-size:.75rem;color:#6b7280;margin:0;line-height:1.4}.jsm-required{color:#ef4444;margin-left:.125rem}.jsm-example{font-size:.6875rem;color:#9ca3af}.jsm-input,.jsm-textarea,.jsm-select{width:100%;border-radius:.5rem;border:1.5px solid #d1d5db;background:Canvas;padding:.5rem .75rem;font-size:.875rem;color:CanvasText;outline:none;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s;font-family:inherit;box-sizing:border-box}.jsm-input:hover,.jsm-textarea:hover,.jsm-select:hover{border-color:#9ca3af}.jsm-input:focus,.jsm-textarea:focus,.jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.jsm-input--error,.jsm-textarea--error,.jsm-select--error{border-color:#f87171!important;background:#fff5f5}.jsm-input--error:focus,.jsm-textarea--error:focus,.jsm-select--error:focus{box-shadow:0 0 0 3px #f8717133!important}.jsm-textarea{resize:vertical;min-height:6rem}.jsm-select-wrap{position:relative}.jsm-select{appearance:none;padding-right:2.25rem;cursor:pointer}.jsm-select-chevron{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#9ca3af;pointer-events:none}.jsm-toggle-label{display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none}.jsm-toggle-track{position:relative;display:inline-flex;align-items:center;width:2.25rem;height:1.25rem;border-radius:9999px;flex-shrink:0;background:#d1d5db;transition:background .2s}.jsm-toggle-track.jsm-on{background:#4f46e5}.jsm-toggle-thumb{display:inline-block;width:1rem;height:1rem;border-radius:9999px;background:#fff;box-shadow:0 1px 3px #0003;transform:translate(.125rem);transition:transform .2s}.jsm-toggle-track.jsm-on .jsm-toggle-thumb{transform:translate(1.125rem)}.jsm-toggle-text{font-size:.875rem;font-weight:500;color:#374151}.jsm-btn-primary{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;border-radius:.5rem;font-size:.8125rem;font-weight:600;background:#4f46e5;color:#fff;border:none;cursor:pointer;box-shadow:0 1px 2px #4f46e54d;transition:background .15s,transform .1s,box-shadow .15s;white-space:nowrap;font-family:inherit}.jsm-btn-primary:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 3px 8px #4f46e54d}.jsm-btn-primary:active{transform:translateY(0)}.jsm-btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.jsm-btn-danger{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:.375rem;font-size:.75rem;font-weight:600;background:transparent;color:#dc2626;border:1.5px solid #fca5a5;cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit}.jsm-btn-danger:hover{background:#fee2e2;border-color:#f87171}.jsm-error-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.jsm-error-msg{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#dc2626;font-weight:500}.jsm-error-icon{width:.875rem;height:.875rem;flex-shrink:0}.jsm-badge-row{display:flex;flex-wrap:wrap;gap:.375rem}.jsm-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.jsm-badge--deprecated{background:#fef3c7;color:#92400e}.jsm-badge--readonly{background:#f1f5f9;color:#475569}.jsm-badge--writeonly{background:#dbeafe;color:#1e40af}.jsm-badge--not{background:#fee2e2;color:#991b1b}.jsm-badge--nullable{background:#f3f4f6;color:#6b7280}.jsm-fieldset{border:1.5px solid #e5e7eb;border-radius:.875rem;padding:1.25rem;background:transparent;box-shadow:0 1px 3px #0000000f;transition:box-shadow .2s;box-sizing:border-box}.jsm-fieldset:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114,0 1px 3px #0000000f}.jsm-legend{display:inline-flex;align-items:center;gap:.375rem;padding:0 .5rem;font-size:.875rem;font-weight:700;color:#1f2937}.jsm-obj-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width:640px){.jsm-obj-grid{grid-template-columns:repeat(2,1fr)}}.jsm-obj-complex{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.jsm-dynamic-key-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;background:#f9fafb;border-radius:.375rem;border:1px dashed #d1d5db;margin-bottom:.25rem}.jsm-dynamic-key-label{font-size:.75rem;font-weight:600;color:#6b7280;font-family:monospace}.jsm-add-prop{margin-top:1rem;padding:.875rem;background:#f9fafb;border-radius:.625rem;border:1.5px dashed #d1d5db;display:flex;flex-direction:column;gap:.5rem}.jsm-add-prop-label{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.jsm-add-prop-row{display:flex;gap:.5rem;align-items:center}.jsm-input--sm{padding:.375rem .625rem;font-size:.8125rem}.jsm-array-block{display:flex;flex-direction:column;gap:.75rem}.jsm-array-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.jsm-array-title{font-size:.875rem;font-weight:700;color:#1f2937;display:flex;align-items:center;gap:.375rem}.jsm-array-items{display:flex;flex-direction:column;gap:.75rem}.jsm-array-item{border:1.5px solid #e5e7eb;border-radius:.75rem;padding:.875rem;background:transparent;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s}.jsm-array-item:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114}.jsm-array-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.jsm-array-index{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:9999px;background:#eef2ff;color:#4f46e5;font-size:.6875rem;font-weight:700}.jsm-empty-array{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;border:1.5px dashed #e5e7eb;border-radius:.75rem;color:#9ca3af;font-size:.8125rem;text-align:center}.jsm-contains-hint{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#6366f1;background:#eef2ff;border-radius:.375rem;padding:.375rem .625rem}.jsm-combinator{border:1.5px solid #e5e7eb;border-radius:.875rem;overflow:hidden;background:transparent;box-shadow:0 1px 3px #0000000f}.jsm-combinator-header{display:flex;align-items:flex-start;justify-content:space-between;padding:.875rem 1rem;background:#00000008;border-bottom:1.5px solid #e5e7eb}.jsm-combinator-title{font-size:.875rem;font-weight:700;color:#1f2937}.jsm-combinator-body{padding:1rem}.jsm-combinator-hint{font-size:.75rem;color:#6b7280;margin:.25rem 0 0}.jsm-oneof-tabs{display:flex;overflow-x:auto;border-bottom:1.5px solid #e5e7eb}.jsm-tab{padding:.5rem 1rem;font-size:.8125rem;font-weight:500;color:#6b7280;border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit}.jsm-tab:hover{color:#4f46e5}.jsm-tab--active{color:#4f46e5;border-bottom-color:#4f46e5;font-weight:600}.jsm-anyof-options{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem;border-bottom:1.5px solid #e5e7eb}.jsm-anyof-option{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:9999px;border:1.5px solid #e5e7eb;font-size:.8125rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s;background:transparent}.jsm-anyof-option:hover{border-color:#a5b4fc;color:#4f46e5}.jsm-anyof-option--active{border-color:#6366f1;background:#eef2ff;color:#4f46e5}.jsm-allof-section{border-left:3px solid #e0e7ff;padding-left:1rem}.jsm-combinator-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;margin-left:.75rem}.jsm-badge--oneof{background:#dbeafe;color:#1e40af}.jsm-badge--anyof{background:#ede9fe;color:#5b21b6}.jsm-badge--allof{background:#ccfbf1;color:#065f46}.dark .jsm-field-label{color:#d1d5db}.dark .jsm-field-hint{color:#9ca3af}.dark .jsm-toggle-track{background:#475569}.dark .jsm-toggle-track.jsm-on{background:#4f46e5}.dark .jsm-toggle-text{color:#d1d5db}.dark .jsm-input,.dark .jsm-textarea,.dark .jsm-select{border-color:#475569;color:#f1f5f9}.dark .jsm-input:focus,.dark .jsm-textarea:focus,.dark .jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.dark .jsm-input--error,.dark .jsm-textarea--error,.dark .jsm-select--error{border-color:#f87171!important;background:#f871711a}.dark .jsm-fieldset{border-color:#334155}.dark .jsm-fieldset:focus-within{border-color:#6366f1}.dark .jsm-legend{color:#f1f5f9}.dark .jsm-combinator{border-color:#334155}.dark .jsm-combinator-header{background:#ffffff0a;border-color:#334155}.dark .jsm-combinator-title{color:#f1f5f9}.dark .jsm-oneof-tabs{border-color:#334155}.dark .jsm-tab{color:#94a3b8}.dark .jsm-tab--active{color:#818cf8;border-bottom-color:#818cf8}.dark .jsm-anyof-options{border-color:#334155}.dark .jsm-anyof-option{border-color:#334155;color:#94a3b8;background:#0f172a}.dark .jsm-anyof-option--active{border-color:#6366f1;background:#6366f126;color:#818cf8}.dark .jsm-allof-section{border-left-color:#3730a3}.dark .jsm-array-item{border-color:#334155}.dark .jsm-array-item:focus-within{border-color:#6366f1}.dark .jsm-array-index{background:#6366f133;color:#818cf8}.dark .jsm-empty-array{border-color:#334155;color:#64748b}.dark .jsm-contains-hint{background:#6366f126;color:#818cf8}.dark .jsm-add-prop{background:#1e293b66;border-color:#475569}.dark .jsm-add-prop-label{color:#64748b}.dark .jsm-dynamic-key-header{background:#1e293b80;border-color:#475569}.dark .jsm-dynamic-key-label{color:#94a3b8}.dark .jsm-error-msg{color:#f87171}.dark .jsm-array-title{color:#f1f5f9}.dark .jsm-badge--deprecated{background:#d9770633;color:#fbbf24}.dark .jsm-badge--readonly{background:#1e293b;color:#94a3b8}.dark .jsm-badge--writeonly{background:#2563eb33;color:#60a5fa}.dark .jsm-badge--not{background:#dc262633;color:#f87171}.dark .jsm-badge--nullable{background:#1e293b;color:#94a3b8}.dark .jsm-select-chevron{color:#64748b}\n"], dependencies: [{ kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey", "allowAdditionalProperties"], outputs: ["controlReplaced"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaNodeComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaValidationService }, { token: i0.ChangeDetectorRef }, { token: JsonSchemaFormOptions, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: JsonSchemaNodeComponent, isStandalone: true, selector: "jsm-schema-node", inputs: { schema: "schema", control: "control", label: "label", required: "required", path: "path", errorsMap: "errorsMap", parent: "parent", controlKey: "controlKey", allowAdditionalProperties: "allowAdditionalProperties", showErrors: "showErrors" }, outputs: { controlReplaced: "controlReplaced" }, ngImport: i0, template: `
+    <ng-container [ngSwitch]="nodeKind">
+
+      <!-- ═══ oneOf ═══ -->
+      <div *ngSwitchCase="'oneOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
+          <div>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
+          </div>
+          <span class="jsm-combinator-badge jsm-badge--oneof">oneOf</span>
+        </div>
+        <div class="jsm-oneof-tabs">
+          <button *ngFor="let option of schema.oneOf; let i = index" type="button"
+            class="jsm-tab" [class.jsm-tab--active]="selectedOneOf === i"
+            (click)="selectedOneOf = i; onOneOfChange()">
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </button>
+        </div>
+        <div class="jsm-combinator-body" *ngIf="activeVariant">
+          <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
+            [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
+            [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+            (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+        </div>
+      </div>
+
+      <!-- ═══ anyOf ═══ -->
+      <div *ngSwitchCase="'anyOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
+          <div>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
+          </div>
+          <span class="jsm-combinator-badge jsm-badge--anyof">anyOf</span>
+        </div>
+        <div class="jsm-anyof-options">
+          <label *ngFor="let option of schema.anyOf; let i = index"
+            class="jsm-anyof-option" [class.jsm-anyof-option--active]="selectedAnyOf.has(i)">
+            <input type="checkbox" class="sr-only" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </label>
+        </div>
+        <div class="jsm-combinator-body" *ngIf="activeVariant">
+          <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
+            [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
+            [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+            (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+        </div>
+      </div>
+
+      <!-- ═══ allOf ═══ -->
+      <div *ngSwitchCase="'allOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
+          <div>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
+          </div>
+          <span class="jsm-combinator-badge jsm-badge--allof">allOf</span>
+        </div>
+        <div class="jsm-combinator-body">
+          <div *ngFor="let subSchema of mergedAllOf; let i = index" class="jsm-allof-section">
+            <jsm-schema-node [schema]="subSchema" [control]="control" [parent]="parent" [controlKey]="controlKey"
+              [path]="path" [errorsMap]="errorsMap" [label]="subSchema.title || ('Section ' + (i + 1))" [required]="required"
+              [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+              (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══ object ═══ -->
+      <fieldset *ngSwitchCase="'object'" class="jsm-fieldset">
+        <legend class="jsm-legend">{{ schema.title || label }}</legend>
+        <p *ngIf="schema.description" class="jsm-field-hint" style="margin-bottom:.75rem;margin-top:.25rem;">{{ schema.description }}</p>
+
+        <div *ngIf="metaBadges.length" class="jsm-badge-row" style="margin-bottom:.75rem;">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <div class="jsm-obj-grid" [formGroup]="controlAsGroup">
+          <ng-container *ngFor="let key of simpleKeys">
+            <div style="display:flex;flex-direction:column;gap:.25rem;">
+              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
+                <span class="jsm-dynamic-key-label">{{ key }}</span>
+                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
+              </div>
+              <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
+                [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
+                [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+                (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+            </div>
+          </ng-container>
+        </div>
+
+        <div class="jsm-obj-complex" *ngIf="complexKeys.length > 0" [formGroup]="controlAsGroup">
+          <ng-container *ngFor="let key of complexKeys">
+            <div style="display:flex;flex-direction:column;gap:.25rem;">
+              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
+                <span class="jsm-dynamic-key-label">{{ key }}</span>
+                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
+              </div>
+              <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
+                [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
+                [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+                (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+            </div>
+          </ng-container>
+        </div>
+
+        <div *ngIf="canAddProperty" class="jsm-add-prop">
+          <p class="jsm-add-prop-label">Add property</p>
+          <div class="jsm-add-prop-row">
+            <input class="jsm-input jsm-input--sm" style="flex:1;" [(ngModel)]="newPropertyKey" placeholder="propertyName" />
+            <button type="button" class="jsm-btn-primary" (click)="addDynamicProperty()">Add</button>
+          </div>
+          <p *ngIf="propertyError" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+            {{ propertyError }}
+          </p>
+        </div>
+
+        <div *ngIf="errorsForPath.length" class="jsm-error-list" style="margin-top:.75rem;">
+          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+            {{ error }}
+          </p>
+        </div>
+      </fieldset>
+
+      <!-- ═══ array ═══ -->
+      <div *ngSwitchCase="'array'" class="jsm-array-block">
+        <div class="jsm-array-header">
+          <div>
+            <p class="jsm-array-title">
+              {{ schema.title || label }}<span *ngIf="required" style="color:#ef4444;margin-left:.125rem;">*</span>
+            </p>
+            <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
+          </div>
+          <button type="button" class="jsm-btn-primary" (click)="addArrayItem()" [disabled]="!canAddArrayItem">
+            <svg style="width:.875rem;height:.875rem;flex-shrink:0;" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+            Add item
+          </button>
+        </div>
+
+        <div *ngIf="effectiveSchema.contains" class="jsm-contains-hint">
+          Must contain matching item(s)
+          <span *ngIf="effectiveSchema.minContains"> · min {{ effectiveSchema.minContains }}</span>
+          <span *ngIf="effectiveSchema.maxContains"> · max {{ effectiveSchema.maxContains }}</span>
+        </div>
+
+        <div *ngIf="metaBadges.length" class="jsm-badge-row">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <div class="jsm-array-items" *ngIf="arrayControls.length > 0; else emptyArray">
+          <div *ngFor="let item of arrayControls; let i = index" class="jsm-array-item">
+            <div class="jsm-array-item-header">
+              <span class="jsm-array-index">{{ i + 1 }}</span>
+              <button type="button" class="jsm-btn-danger" (click)="removeArrayItem(i)">Remove</button>
+            </div>
+            <jsm-schema-node [schema]="schemaForIndex(i)" [control]="item" [parent]="controlAsArray"
+              [controlKey]="i" [path]="pathForChild(i)" [errorsMap]="errorsMap" [label]="label + ' item'"
+              [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+              (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+          </div>
+        </div>
+
+        <ng-template #emptyArray>
+          <div class="jsm-empty-array">No items yet — click "Add item" to start.</div>
+        </ng-template>
+
+        <div *ngIf="errorsForPath.length" class="jsm-error-list">
+          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+            {{ error }}
+          </p>
+        </div>
+      </div>
+
+      <!-- ═══ primitive ═══ -->
+      <div *ngSwitchDefault class="jsm-field">
+        <ng-container *ngIf="inputKind !== 'checkbox'">
+          <label class="jsm-field-label">
+            {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
+          </label>
+          <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
+        </ng-container>
+
+        <div *ngIf="metaBadges.length" class="jsm-badge-row">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <ng-container>
+          <input *ngIf="inputKind === 'number'" jsmNumeric type="text" inputmode="decimal" class="jsm-input"
+            [class.jsm-input--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
+            [jsmDecimalSeparator]="decimalSeparator" [attr.data-step]="numericStep"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+            (blur)="onBlur()" />
+
+          <input *ngIf="inputKind === 'text'" class="jsm-input"
+            [class.jsm-input--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
+            [attr.type]="inputType" [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+            (blur)="onBlur()" />
+
+          <textarea *ngIf="inputKind === 'textarea'" rows="4" class="jsm-textarea"
+            [class.jsm-textarea--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+            (blur)="onBlur()"></textarea>
+
+          <div *ngIf="inputKind === 'select'" class="jsm-select-wrap">
+            <select class="jsm-select"
+              [class.jsm-select--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
+              [formControl]="controlAsFormControl"
+              (blur)="onBlur()">
+              <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
+            </select>
+            <svg class="jsm-select-chevron" viewBox="0 0 16 16" fill="none">
+              <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+
+          <label *ngIf="inputKind === 'checkbox'" class="jsm-toggle-label">
+            <span class="jsm-toggle-track" [class.jsm-on]="controlAsFormControl.value">
+              <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
+              <span class="jsm-toggle-thumb"></span>
+            </span>
+            <span class="jsm-toggle-text">
+              {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
+            </span>
+          </label>
+        </ng-container>
+
+        <p *ngIf="inputKind === 'checkbox' && schema.description" class="jsm-field-hint">{{ schema.description }}</p>
+        <p *ngIf="effectiveSchema.examples?.length" class="jsm-example">e.g. {{ effectiveSchema.examples?.[0] }}</p>
+        <p *ngIf="effectiveSchema.contentMediaType" class="jsm-example">
+          {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
+        </p>
+
+        <div *ngIf="allErrors.length && (controlAsFormControl.dirty || isTouched || showErrors)" class="jsm-error-list">
+          <p *ngFor="let error of allErrors" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none">
+              <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
+              <path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+            {{ error }}
+          </p>
+        </div>
+      </div>
+
+    </ng-container>
+  `, isInline: true, styles: [".jsm-field{display:flex;flex-direction:column;gap:.375rem}.jsm-field-label{display:block;font-size:.8125rem;font-weight:600;color:#374151}.jsm-field-hint{font-size:.75rem;color:#6b7280;margin:0;line-height:1.4}.jsm-required{color:#ef4444;margin-left:.125rem}.jsm-example{font-size:.6875rem;color:#9ca3af}.jsm-input,.jsm-textarea,.jsm-select{width:100%;border-radius:.5rem;border:1.5px solid #d1d5db;background:Canvas;padding:.5rem .75rem;font-size:.875rem;color:CanvasText;outline:none;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s;font-family:inherit;box-sizing:border-box}.jsm-input:hover,.jsm-textarea:hover,.jsm-select:hover{border-color:#9ca3af}.jsm-input:focus,.jsm-textarea:focus,.jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.jsm-input--error,.jsm-textarea--error,.jsm-select--error{border-color:#f87171!important;background:#fff5f5}.jsm-input--error:focus,.jsm-textarea--error:focus,.jsm-select--error:focus{box-shadow:0 0 0 3px #f8717133!important}.jsm-textarea{resize:vertical;min-height:6rem}.jsm-select-wrap{position:relative}.jsm-select{appearance:none;padding-right:2.25rem;cursor:pointer}.jsm-select-chevron{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#9ca3af;pointer-events:none}.jsm-toggle-label{display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none}.jsm-toggle-track{position:relative;display:inline-flex;align-items:center;width:2.25rem;height:1.25rem;border-radius:9999px;flex-shrink:0;background:#d1d5db;transition:background .2s}.jsm-toggle-track.jsm-on{background:#4f46e5}.jsm-toggle-thumb{display:inline-block;width:1rem;height:1rem;border-radius:9999px;background:#fff;box-shadow:0 1px 3px #0003;transform:translate(.125rem);transition:transform .2s}.jsm-toggle-track.jsm-on .jsm-toggle-thumb{transform:translate(1.125rem)}.jsm-toggle-text{font-size:.875rem;font-weight:500;color:#374151}.jsm-btn-primary{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;border-radius:.5rem;font-size:.8125rem;font-weight:600;background:#4f46e5;color:#fff;border:none;cursor:pointer;box-shadow:0 1px 2px #4f46e54d;transition:background .15s,transform .1s,box-shadow .15s;white-space:nowrap;font-family:inherit}.jsm-btn-primary:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 3px 8px #4f46e54d}.jsm-btn-primary:active{transform:translateY(0)}.jsm-btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.jsm-btn-danger{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:.375rem;font-size:.75rem;font-weight:600;background:transparent;color:#dc2626;border:1.5px solid #fca5a5;cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit}.jsm-btn-danger:hover{background:#fee2e2;border-color:#f87171}.jsm-error-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.jsm-error-msg{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#dc2626;font-weight:500}.jsm-error-icon{width:.875rem;height:.875rem;flex-shrink:0}.jsm-badge-row{display:flex;flex-wrap:wrap;gap:.375rem}.jsm-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.jsm-badge--deprecated{background:#fef3c7;color:#92400e}.jsm-badge--readonly{background:#f1f5f9;color:#475569}.jsm-badge--writeonly{background:#dbeafe;color:#1e40af}.jsm-badge--not{background:#fee2e2;color:#991b1b}.jsm-badge--nullable{background:#f3f4f6;color:#6b7280}.jsm-fieldset{border:1.5px solid #e5e7eb;border-radius:.875rem;padding:1.25rem;background:transparent;box-shadow:0 1px 3px #0000000f;transition:box-shadow .2s;box-sizing:border-box}.jsm-fieldset:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114,0 1px 3px #0000000f}.jsm-legend{display:inline-flex;align-items:center;gap:.375rem;padding:0 .5rem;font-size:.875rem;font-weight:700;color:#1f2937}.jsm-obj-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width:640px){.jsm-obj-grid{grid-template-columns:repeat(2,1fr)}}.jsm-obj-complex{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.jsm-dynamic-key-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;background:#f9fafb;border-radius:.375rem;border:1px dashed #d1d5db;margin-bottom:.25rem}.jsm-dynamic-key-label{font-size:.75rem;font-weight:600;color:#6b7280;font-family:monospace}.jsm-add-prop{margin-top:1rem;padding:.875rem;background:#f9fafb;border-radius:.625rem;border:1.5px dashed #d1d5db;display:flex;flex-direction:column;gap:.5rem}.jsm-add-prop-label{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.jsm-add-prop-row{display:flex;gap:.5rem;align-items:center}.jsm-input--sm{padding:.375rem .625rem;font-size:.8125rem}.jsm-array-block{display:flex;flex-direction:column;gap:.75rem}.jsm-array-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.jsm-array-title{font-size:.875rem;font-weight:700;color:#1f2937;display:flex;align-items:center;gap:.375rem}.jsm-array-items{display:flex;flex-direction:column;gap:.75rem}.jsm-array-item{border:1.5px solid #e5e7eb;border-radius:.75rem;padding:.875rem;background:transparent;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s}.jsm-array-item:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114}.jsm-array-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.jsm-array-index{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:9999px;background:#eef2ff;color:#4f46e5;font-size:.6875rem;font-weight:700}.jsm-empty-array{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;border:1.5px dashed #e5e7eb;border-radius:.75rem;color:#9ca3af;font-size:.8125rem;text-align:center}.jsm-contains-hint{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#6366f1;background:#eef2ff;border-radius:.375rem;padding:.375rem .625rem}.jsm-combinator{border:1.5px solid #e5e7eb;border-radius:.875rem;overflow:hidden;background:transparent;box-shadow:0 1px 3px #0000000f}.jsm-combinator-header{display:flex;align-items:flex-start;justify-content:space-between;padding:.875rem 1rem;background:#00000008;border-bottom:1.5px solid #e5e7eb}.jsm-combinator-title{font-size:.875rem;font-weight:700;color:#1f2937}.jsm-combinator-body{padding:1rem}.jsm-combinator-hint{font-size:.75rem;color:#6b7280;margin:.25rem 0 0}.jsm-oneof-tabs{display:flex;overflow-x:auto;border-bottom:1.5px solid #e5e7eb}.jsm-tab{padding:.5rem 1rem;font-size:.8125rem;font-weight:500;color:#6b7280;border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit}.jsm-tab:hover{color:#4f46e5}.jsm-tab--active{color:#4f46e5;border-bottom-color:#4f46e5;font-weight:600}.jsm-anyof-options{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem;border-bottom:1.5px solid #e5e7eb}.jsm-anyof-option{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:9999px;border:1.5px solid #e5e7eb;font-size:.8125rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s;background:transparent}.jsm-anyof-option:hover{border-color:#a5b4fc;color:#4f46e5}.jsm-anyof-option--active{border-color:#6366f1;background:#eef2ff;color:#4f46e5}.jsm-allof-section{border-left:3px solid #e0e7ff;padding-left:1rem}.jsm-combinator-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;margin-left:.75rem}.jsm-badge--oneof{background:#dbeafe;color:#1e40af}.jsm-badge--anyof{background:#ede9fe;color:#5b21b6}.jsm-badge--allof{background:#ccfbf1;color:#065f46}.dark .jsm-field-label{color:#d1d5db}.dark .jsm-field-hint{color:#9ca3af}.dark .jsm-toggle-track{background:#475569}.dark .jsm-toggle-track.jsm-on{background:#4f46e5}.dark .jsm-toggle-text{color:#d1d5db}.dark .jsm-input,.dark .jsm-textarea,.dark .jsm-select{border-color:#475569;color:#f1f5f9}.dark .jsm-input:focus,.dark .jsm-textarea:focus,.dark .jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.dark .jsm-input--error,.dark .jsm-textarea--error,.dark .jsm-select--error{border-color:#f87171!important;background:#f871711a}.dark .jsm-fieldset{border-color:#334155}.dark .jsm-fieldset:focus-within{border-color:#6366f1}.dark .jsm-legend{color:#f1f5f9}.dark .jsm-combinator{border-color:#334155}.dark .jsm-combinator-header{background:#ffffff0a;border-color:#334155}.dark .jsm-combinator-title{color:#f1f5f9}.dark .jsm-oneof-tabs{border-color:#334155}.dark .jsm-tab{color:#94a3b8}.dark .jsm-tab--active{color:#818cf8;border-bottom-color:#818cf8}.dark .jsm-anyof-options{border-color:#334155}.dark .jsm-anyof-option{border-color:#334155;color:#94a3b8;background:#0f172a}.dark .jsm-anyof-option--active{border-color:#6366f1;background:#6366f126;color:#818cf8}.dark .jsm-allof-section{border-left-color:#3730a3}.dark .jsm-array-item{border-color:#334155}.dark .jsm-array-item:focus-within{border-color:#6366f1}.dark .jsm-array-index{background:#6366f133;color:#818cf8}.dark .jsm-empty-array{border-color:#334155;color:#64748b}.dark .jsm-contains-hint{background:#6366f126;color:#818cf8}.dark .jsm-add-prop{background:#1e293b66;border-color:#475569}.dark .jsm-add-prop-label{color:#64748b}.dark .jsm-dynamic-key-header{background:#1e293b80;border-color:#475569}.dark .jsm-dynamic-key-label{color:#94a3b8}.dark .jsm-error-msg{color:#f87171}.dark .jsm-array-title{color:#f1f5f9}.dark .jsm-badge--deprecated{background:#d9770633;color:#fbbf24}.dark .jsm-badge--readonly{background:#1e293b;color:#94a3b8}.dark .jsm-badge--writeonly{background:#2563eb33;color:#60a5fa}.dark .jsm-badge--not{background:#dc262633;color:#f87171}.dark .jsm-badge--nullable{background:#1e293b;color:#94a3b8}.dark .jsm-select-chevron{color:#64748b}\n"], dependencies: [{ kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey", "allowAdditionalProperties", "showErrors"], outputs: ["controlReplaced"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NumericInputDirective, selector: "input[jsmNumeric]", inputs: ["jsmDecimalSeparator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jsm-schema-node', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], encapsulation: ViewEncapsulation.None, template: `
-    <ng-container [ngSwitch]="nodeKind">
-
-      <!-- ═══ oneOf ═══ -->
-      <div *ngSwitchCase="'oneOf'" class="jsm-combinator">
-        <div class="jsm-combinator-header">
-          <div>
-            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
-            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
-          </div>
-          <span class="jsm-combinator-badge jsm-badge--oneof">oneOf</span>
-        </div>
-        <div class="jsm-oneof-tabs">
-          <button *ngFor="let option of schema.oneOf; let i = index" type="button"
-            class="jsm-tab" [class.jsm-tab--active]="selectedOneOf === i"
-            (click)="selectedOneOf = i; onOneOfChange()">
-            {{ option.title || ('Option ' + (i + 1)) }}
-          </button>
-        </div>
-        <div class="jsm-combinator-body" *ngIf="activeVariant">
-          <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
-            [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
-            [allowAdditionalProperties]="allowAdditionalProperties"
-            (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-        </div>
-      </div>
-
-      <!-- ═══ anyOf ═══ -->
-      <div *ngSwitchCase="'anyOf'" class="jsm-combinator">
-        <div class="jsm-combinator-header">
-          <div>
-            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
-            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
-          </div>
-          <span class="jsm-combinator-badge jsm-badge--anyof">anyOf</span>
-        </div>
-        <div class="jsm-anyof-options">
-          <label *ngFor="let option of schema.anyOf; let i = index"
-            class="jsm-anyof-option" [class.jsm-anyof-option--active]="selectedAnyOf.has(i)">
-            <input type="checkbox" class="sr-only" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
-            {{ option.title || ('Option ' + (i + 1)) }}
-          </label>
-        </div>
-        <div class="jsm-combinator-body" *ngIf="activeVariant">
-          <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
-            [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
-            [allowAdditionalProperties]="allowAdditionalProperties"
-            (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-        </div>
-      </div>
-
-      <!-- ═══ allOf ═══ -->
-      <div *ngSwitchCase="'allOf'" class="jsm-combinator">
-        <div class="jsm-combinator-header">
-          <div>
-            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
-            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
-          </div>
-          <span class="jsm-combinator-badge jsm-badge--allof">allOf</span>
-        </div>
-        <div class="jsm-combinator-body">
-          <div *ngFor="let subSchema of mergedAllOf; let i = index" class="jsm-allof-section">
-            <jsm-schema-node [schema]="subSchema" [control]="control" [parent]="parent" [controlKey]="controlKey"
-              [path]="path" [errorsMap]="errorsMap" [label]="subSchema.title || ('Section ' + (i + 1))" [required]="required"
-              [allowAdditionalProperties]="allowAdditionalProperties"
-              (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-          </div>
-        </div>
-      </div>
-
-      <!-- ═══ object ═══ -->
-      <fieldset *ngSwitchCase="'object'" class="jsm-fieldset">
-        <legend class="jsm-legend">{{ schema.title || label }}</legend>
-        <p *ngIf="schema.description" class="jsm-field-hint" style="margin-bottom:.75rem;margin-top:.25rem;">{{ schema.description }}</p>
-
-        <div *ngIf="metaBadges.length" class="jsm-badge-row" style="margin-bottom:.75rem;">
-          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
-        </div>
-
-        <div class="jsm-obj-grid" [formGroup]="controlAsGroup">
-          <ng-container *ngFor="let key of simpleKeys">
-            <div style="display:flex;flex-direction:column;gap:.25rem;">
-              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
-                <span class="jsm-dynamic-key-label">{{ key }}</span>
-                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
-              </div>
-              <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
-                [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
-                [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties"
-                (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-            </div>
-          </ng-container>
-        </div>
-
-        <div class="jsm-obj-complex" *ngIf="complexKeys.length > 0" [formGroup]="controlAsGroup">
-          <ng-container *ngFor="let key of complexKeys">
-            <div style="display:flex;flex-direction:column;gap:.25rem;">
-              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
-                <span class="jsm-dynamic-key-label">{{ key }}</span>
-                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
-              </div>
-              <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
-                [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
-                [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties"
-                (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-            </div>
-          </ng-container>
-        </div>
-
-        <div *ngIf="canAddProperty" class="jsm-add-prop">
-          <p class="jsm-add-prop-label">Add property</p>
-          <div class="jsm-add-prop-row">
-            <input class="jsm-input jsm-input--sm" style="flex:1;" [(ngModel)]="newPropertyKey" placeholder="propertyName" />
-            <button type="button" class="jsm-btn-primary" (click)="addDynamicProperty()">Add</button>
-          </div>
-          <p *ngIf="propertyError" class="jsm-error-msg">
-            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-            {{ propertyError }}
-          </p>
-        </div>
-
-        <div *ngIf="errorsForPath.length" class="jsm-error-list" style="margin-top:.75rem;">
-          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
-            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-            {{ error }}
-          </p>
-        </div>
-      </fieldset>
-
-      <!-- ═══ array ═══ -->
-      <div *ngSwitchCase="'array'" class="jsm-array-block">
-        <div class="jsm-array-header">
-          <div>
-            <p class="jsm-array-title">
-              {{ schema.title || label }}<span *ngIf="required" style="color:#ef4444;margin-left:.125rem;">*</span>
-            </p>
-            <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
-          </div>
-          <button type="button" class="jsm-btn-primary" (click)="addArrayItem()" [disabled]="!canAddArrayItem">
-            <svg style="width:.875rem;height:.875rem;flex-shrink:0;" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-            Add item
-          </button>
-        </div>
-
-        <div *ngIf="effectiveSchema.contains" class="jsm-contains-hint">
-          Must contain matching item(s)
-          <span *ngIf="effectiveSchema.minContains"> · min {{ effectiveSchema.minContains }}</span>
-          <span *ngIf="effectiveSchema.maxContains"> · max {{ effectiveSchema.maxContains }}</span>
-        </div>
-
-        <div *ngIf="metaBadges.length" class="jsm-badge-row">
-          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
-        </div>
-
-        <div class="jsm-array-items" *ngIf="arrayControls.length > 0; else emptyArray">
-          <div *ngFor="let item of arrayControls; let i = index" class="jsm-array-item">
-            <div class="jsm-array-item-header">
-              <span class="jsm-array-index">{{ i + 1 }}</span>
-              <button type="button" class="jsm-btn-danger" (click)="removeArrayItem(i)">Remove</button>
-            </div>
-            <jsm-schema-node [schema]="schemaForIndex(i)" [control]="item" [parent]="controlAsArray"
-              [controlKey]="i" [path]="pathForChild(i)" [errorsMap]="errorsMap" [label]="label + ' item'"
-              [allowAdditionalProperties]="allowAdditionalProperties"
-              (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
-          </div>
-        </div>
-
-        <ng-template #emptyArray>
-          <div class="jsm-empty-array">No items yet — click "Add item" to start.</div>
-        </ng-template>
-
-        <div *ngIf="errorsForPath.length" class="jsm-error-list">
-          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
-            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-            {{ error }}
-          </p>
-        </div>
-      </div>
-
-      <!-- ═══ primitive ═══ -->
-      <div *ngSwitchDefault class="jsm-field">
-        <ng-container *ngIf="inputKind !== 'checkbox'">
-          <label class="jsm-field-label">
-            {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
-          </label>
-          <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
-        </ng-container>
-
-        <div *ngIf="metaBadges.length" class="jsm-badge-row">
-          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
-        </div>
-
-        <ng-container [ngSwitch]="inputKind">
-          <input *ngSwitchCase="'text'" class="jsm-input"
-            [class.jsm-input--error]="errorsForPath.length && controlAsFormControl.dirty"
-            [attr.type]="inputType" [attr.placeholder]="schema.title || label"
-            [formControl]="controlAsFormControl" />
-
-          <textarea *ngSwitchCase="'textarea'" rows="4" class="jsm-textarea"
-            [class.jsm-textarea--error]="errorsForPath.length && controlAsFormControl.dirty"
-            [attr.placeholder]="schema.title || label"
-            [formControl]="controlAsFormControl"></textarea>
-
-          <div *ngSwitchCase="'select'" class="jsm-select-wrap">
-            <select class="jsm-select"
-              [class.jsm-select--error]="errorsForPath.length && controlAsFormControl.dirty"
-              [formControl]="controlAsFormControl">
-              <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
-            </select>
-            <svg class="jsm-select-chevron" viewBox="0 0 16 16" fill="none">
-              <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </div>
-
-          <label *ngSwitchCase="'checkbox'" class="jsm-toggle-label">
-            <span class="jsm-toggle-track" [class.jsm-on]="controlAsFormControl.value">
-              <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
-              <span class="jsm-toggle-thumb"></span>
-            </span>
-            <span class="jsm-toggle-text">
-              {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
-            </span>
-          </label>
-        </ng-container>
-
-        <p *ngIf="inputKind === 'checkbox' && schema.description" class="jsm-field-hint">{{ schema.description }}</p>
-        <p *ngIf="effectiveSchema.examples?.length" class="jsm-example">e.g. {{ effectiveSchema.examples?.[0] }}</p>
-        <p *ngIf="effectiveSchema.contentMediaType" class="jsm-example">
-          {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
-        </p>
-
-        <div *ngIf="errorsForPath.length && controlAsFormControl.dirty" class="jsm-error-list">
-          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
-            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none">
-              <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
-              <path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-            </svg>
-            {{ error }}
-          </p>
-        </div>
-      </div>
-
-    </ng-container>
+            args: [{ selector: 'jsm-schema-node', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, NumericInputDirective], encapsulation: ViewEncapsulation.None, template: `
+    <ng-container [ngSwitch]="nodeKind">
+
+      <!-- ═══ oneOf ═══ -->
+      <div *ngSwitchCase="'oneOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
+          <div>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
+          </div>
+          <span class="jsm-combinator-badge jsm-badge--oneof">oneOf</span>
+        </div>
+        <div class="jsm-oneof-tabs">
+          <button *ngFor="let option of schema.oneOf; let i = index" type="button"
+            class="jsm-tab" [class.jsm-tab--active]="selectedOneOf === i"
+            (click)="selectedOneOf = i; onOneOfChange()">
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </button>
+        </div>
+        <div class="jsm-combinator-body" *ngIf="activeVariant">
+          <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
+            [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
+            [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+            (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+        </div>
+      </div>
+
+      <!-- ═══ anyOf ═══ -->
+      <div *ngSwitchCase="'anyOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
+          <div>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
+          </div>
+          <span class="jsm-combinator-badge jsm-badge--anyof">anyOf</span>
+        </div>
+        <div class="jsm-anyof-options">
+          <label *ngFor="let option of schema.anyOf; let i = index"
+            class="jsm-anyof-option" [class.jsm-anyof-option--active]="selectedAnyOf.has(i)">
+            <input type="checkbox" class="sr-only" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </label>
+        </div>
+        <div class="jsm-combinator-body" *ngIf="activeVariant">
+          <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
+            [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
+            [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+            (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+        </div>
+      </div>
+
+      <!-- ═══ allOf ═══ -->
+      <div *ngSwitchCase="'allOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
+          <div>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ schema.description }}</p>
+          </div>
+          <span class="jsm-combinator-badge jsm-badge--allof">allOf</span>
+        </div>
+        <div class="jsm-combinator-body">
+          <div *ngFor="let subSchema of mergedAllOf; let i = index" class="jsm-allof-section">
+            <jsm-schema-node [schema]="subSchema" [control]="control" [parent]="parent" [controlKey]="controlKey"
+              [path]="path" [errorsMap]="errorsMap" [label]="subSchema.title || ('Section ' + (i + 1))" [required]="required"
+              [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+              (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══ object ═══ -->
+      <fieldset *ngSwitchCase="'object'" class="jsm-fieldset">
+        <legend class="jsm-legend">{{ schema.title || label }}</legend>
+        <p *ngIf="schema.description" class="jsm-field-hint" style="margin-bottom:.75rem;margin-top:.25rem;">{{ schema.description }}</p>
+
+        <div *ngIf="metaBadges.length" class="jsm-badge-row" style="margin-bottom:.75rem;">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <div class="jsm-obj-grid" [formGroup]="controlAsGroup">
+          <ng-container *ngFor="let key of simpleKeys">
+            <div style="display:flex;flex-direction:column;gap:.25rem;">
+              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
+                <span class="jsm-dynamic-key-label">{{ key }}</span>
+                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
+              </div>
+              <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
+                [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
+                [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+                (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+            </div>
+          </ng-container>
+        </div>
+
+        <div class="jsm-obj-complex" *ngIf="complexKeys.length > 0" [formGroup]="controlAsGroup">
+          <ng-container *ngFor="let key of complexKeys">
+            <div style="display:flex;flex-direction:column;gap:.25rem;">
+              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
+                <span class="jsm-dynamic-key-label">{{ key }}</span>
+                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
+              </div>
+              <jsm-schema-node [schema]="schemaForKey(key)" [control]="childControl(key)" [parent]="controlAsGroup"
+                [controlKey]="key" [path]="pathForChild(key)" [errorsMap]="errorsMap" [label]="key"
+                [required]="isRequired(key)" [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+                (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+            </div>
+          </ng-container>
+        </div>
+
+        <div *ngIf="canAddProperty" class="jsm-add-prop">
+          <p class="jsm-add-prop-label">Add property</p>
+          <div class="jsm-add-prop-row">
+            <input class="jsm-input jsm-input--sm" style="flex:1;" [(ngModel)]="newPropertyKey" placeholder="propertyName" />
+            <button type="button" class="jsm-btn-primary" (click)="addDynamicProperty()">Add</button>
+          </div>
+          <p *ngIf="propertyError" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+            {{ propertyError }}
+          </p>
+        </div>
+
+        <div *ngIf="errorsForPath.length" class="jsm-error-list" style="margin-top:.75rem;">
+          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+            {{ error }}
+          </p>
+        </div>
+      </fieldset>
+
+      <!-- ═══ array ═══ -->
+      <div *ngSwitchCase="'array'" class="jsm-array-block">
+        <div class="jsm-array-header">
+          <div>
+            <p class="jsm-array-title">
+              {{ schema.title || label }}<span *ngIf="required" style="color:#ef4444;margin-left:.125rem;">*</span>
+            </p>
+            <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
+          </div>
+          <button type="button" class="jsm-btn-primary" (click)="addArrayItem()" [disabled]="!canAddArrayItem">
+            <svg style="width:.875rem;height:.875rem;flex-shrink:0;" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+            Add item
+          </button>
+        </div>
+
+        <div *ngIf="effectiveSchema.contains" class="jsm-contains-hint">
+          Must contain matching item(s)
+          <span *ngIf="effectiveSchema.minContains"> · min {{ effectiveSchema.minContains }}</span>
+          <span *ngIf="effectiveSchema.maxContains"> · max {{ effectiveSchema.maxContains }}</span>
+        </div>
+
+        <div *ngIf="metaBadges.length" class="jsm-badge-row">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <div class="jsm-array-items" *ngIf="arrayControls.length > 0; else emptyArray">
+          <div *ngFor="let item of arrayControls; let i = index" class="jsm-array-item">
+            <div class="jsm-array-item-header">
+              <span class="jsm-array-index">{{ i + 1 }}</span>
+              <button type="button" class="jsm-btn-danger" (click)="removeArrayItem(i)">Remove</button>
+            </div>
+            <jsm-schema-node [schema]="schemaForIndex(i)" [control]="item" [parent]="controlAsArray"
+              [controlKey]="i" [path]="pathForChild(i)" [errorsMap]="errorsMap" [label]="label + ' item'"
+              [allowAdditionalProperties]="allowAdditionalProperties" [showErrors]="showErrors"
+              (controlReplaced)="controlReplaced.emit($event)"></jsm-schema-node>
+          </div>
+        </div>
+
+        <ng-template #emptyArray>
+          <div class="jsm-empty-array">No items yet — click "Add item" to start.</div>
+        </ng-template>
+
+        <div *ngIf="errorsForPath.length" class="jsm-error-list">
+          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+            {{ error }}
+          </p>
+        </div>
+      </div>
+
+      <!-- ═══ primitive ═══ -->
+      <div *ngSwitchDefault class="jsm-field">
+        <ng-container *ngIf="inputKind !== 'checkbox'">
+          <label class="jsm-field-label">
+            {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
+          </label>
+          <p *ngIf="schema.description" class="jsm-field-hint">{{ schema.description }}</p>
+        </ng-container>
+
+        <div *ngIf="metaBadges.length" class="jsm-badge-row">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <ng-container>
+          <input *ngIf="inputKind === 'number'" jsmNumeric type="text" inputmode="decimal" class="jsm-input"
+            [class.jsm-input--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
+            [jsmDecimalSeparator]="decimalSeparator" [attr.data-step]="numericStep"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+            (blur)="onBlur()" />
+
+          <input *ngIf="inputKind === 'text'" class="jsm-input"
+            [class.jsm-input--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
+            [attr.type]="inputType" [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+            (blur)="onBlur()" />
+
+          <textarea *ngIf="inputKind === 'textarea'" rows="4" class="jsm-textarea"
+            [class.jsm-textarea--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+            (blur)="onBlur()"></textarea>
+
+          <div *ngIf="inputKind === 'select'" class="jsm-select-wrap">
+            <select class="jsm-select"
+              [class.jsm-select--error]="controlAsFormControl.invalid && (controlAsFormControl.dirty || isTouched || showErrors)"
+              [formControl]="controlAsFormControl"
+              (blur)="onBlur()">
+              <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
+            </select>
+            <svg class="jsm-select-chevron" viewBox="0 0 16 16" fill="none">
+              <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+
+          <label *ngIf="inputKind === 'checkbox'" class="jsm-toggle-label">
+            <span class="jsm-toggle-track" [class.jsm-on]="controlAsFormControl.value">
+              <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
+              <span class="jsm-toggle-thumb"></span>
+            </span>
+            <span class="jsm-toggle-text">
+              {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
+            </span>
+          </label>
+        </ng-container>
+
+        <p *ngIf="inputKind === 'checkbox' && schema.description" class="jsm-field-hint">{{ schema.description }}</p>
+        <p *ngIf="effectiveSchema.examples?.length" class="jsm-example">e.g. {{ effectiveSchema.examples?.[0] }}</p>
+        <p *ngIf="effectiveSchema.contentMediaType" class="jsm-example">
+          {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
+        </p>
+
+        <div *ngIf="allErrors.length && (controlAsFormControl.dirty || isTouched || showErrors)" class="jsm-error-list">
+          <p *ngFor="let error of allErrors" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none">
+              <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
+              <path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+            {{ error }}
+          </p>
+        </div>
+      </div>
+
+    </ng-container>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".jsm-field{display:flex;flex-direction:column;gap:.375rem}.jsm-field-label{display:block;font-size:.8125rem;font-weight:600;color:#374151}.jsm-field-hint{font-size:.75rem;color:#6b7280;margin:0;line-height:1.4}.jsm-required{color:#ef4444;margin-left:.125rem}.jsm-example{font-size:.6875rem;color:#9ca3af}.jsm-input,.jsm-textarea,.jsm-select{width:100%;border-radius:.5rem;border:1.5px solid #d1d5db;background:Canvas;padding:.5rem .75rem;font-size:.875rem;color:CanvasText;outline:none;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s;font-family:inherit;box-sizing:border-box}.jsm-input:hover,.jsm-textarea:hover,.jsm-select:hover{border-color:#9ca3af}.jsm-input:focus,.jsm-textarea:focus,.jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.jsm-input--error,.jsm-textarea--error,.jsm-select--error{border-color:#f87171!important;background:#fff5f5}.jsm-input--error:focus,.jsm-textarea--error:focus,.jsm-select--error:focus{box-shadow:0 0 0 3px #f8717133!important}.jsm-textarea{resize:vertical;min-height:6rem}.jsm-select-wrap{position:relative}.jsm-select{appearance:none;padding-right:2.25rem;cursor:pointer}.jsm-select-chevron{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#9ca3af;pointer-events:none}.jsm-toggle-label{display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none}.jsm-toggle-track{position:relative;display:inline-flex;align-items:center;width:2.25rem;height:1.25rem;border-radius:9999px;flex-shrink:0;background:#d1d5db;transition:background .2s}.jsm-toggle-track.jsm-on{background:#4f46e5}.jsm-toggle-thumb{display:inline-block;width:1rem;height:1rem;border-radius:9999px;background:#fff;box-shadow:0 1px 3px #0003;transform:translate(.125rem);transition:transform .2s}.jsm-toggle-track.jsm-on .jsm-toggle-thumb{transform:translate(1.125rem)}.jsm-toggle-text{font-size:.875rem;font-weight:500;color:#374151}.jsm-btn-primary{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;border-radius:.5rem;font-size:.8125rem;font-weight:600;background:#4f46e5;color:#fff;border:none;cursor:pointer;box-shadow:0 1px 2px #4f46e54d;transition:background .15s,transform .1s,box-shadow .15s;white-space:nowrap;font-family:inherit}.jsm-btn-primary:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 3px 8px #4f46e54d}.jsm-btn-primary:active{transform:translateY(0)}.jsm-btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.jsm-btn-danger{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:.375rem;font-size:.75rem;font-weight:600;background:transparent;color:#dc2626;border:1.5px solid #fca5a5;cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit}.jsm-btn-danger:hover{background:#fee2e2;border-color:#f87171}.jsm-error-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.jsm-error-msg{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#dc2626;font-weight:500}.jsm-error-icon{width:.875rem;height:.875rem;flex-shrink:0}.jsm-badge-row{display:flex;flex-wrap:wrap;gap:.375rem}.jsm-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.jsm-badge--deprecated{background:#fef3c7;color:#92400e}.jsm-badge--readonly{background:#f1f5f9;color:#475569}.jsm-badge--writeonly{background:#dbeafe;color:#1e40af}.jsm-badge--not{background:#fee2e2;color:#991b1b}.jsm-badge--nullable{background:#f3f4f6;color:#6b7280}.jsm-fieldset{border:1.5px solid #e5e7eb;border-radius:.875rem;padding:1.25rem;background:transparent;box-shadow:0 1px 3px #0000000f;transition:box-shadow .2s;box-sizing:border-box}.jsm-fieldset:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114,0 1px 3px #0000000f}.jsm-legend{display:inline-flex;align-items:center;gap:.375rem;padding:0 .5rem;font-size:.875rem;font-weight:700;color:#1f2937}.jsm-obj-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width:640px){.jsm-obj-grid{grid-template-columns:repeat(2,1fr)}}.jsm-obj-complex{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.jsm-dynamic-key-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;background:#f9fafb;border-radius:.375rem;border:1px dashed #d1d5db;margin-bottom:.25rem}.jsm-dynamic-key-label{font-size:.75rem;font-weight:600;color:#6b7280;font-family:monospace}.jsm-add-prop{margin-top:1rem;padding:.875rem;background:#f9fafb;border-radius:.625rem;border:1.5px dashed #d1d5db;display:flex;flex-direction:column;gap:.5rem}.jsm-add-prop-label{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.jsm-add-prop-row{display:flex;gap:.5rem;align-items:center}.jsm-input--sm{padding:.375rem .625rem;font-size:.8125rem}.jsm-array-block{display:flex;flex-direction:column;gap:.75rem}.jsm-array-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.jsm-array-title{font-size:.875rem;font-weight:700;color:#1f2937;display:flex;align-items:center;gap:.375rem}.jsm-array-items{display:flex;flex-direction:column;gap:.75rem}.jsm-array-item{border:1.5px solid #e5e7eb;border-radius:.75rem;padding:.875rem;background:transparent;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s}.jsm-array-item:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114}.jsm-array-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.jsm-array-index{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:9999px;background:#eef2ff;color:#4f46e5;font-size:.6875rem;font-weight:700}.jsm-empty-array{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;border:1.5px dashed #e5e7eb;border-radius:.75rem;color:#9ca3af;font-size:.8125rem;text-align:center}.jsm-contains-hint{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#6366f1;background:#eef2ff;border-radius:.375rem;padding:.375rem .625rem}.jsm-combinator{border:1.5px solid #e5e7eb;border-radius:.875rem;overflow:hidden;background:transparent;box-shadow:0 1px 3px #0000000f}.jsm-combinator-header{display:flex;align-items:flex-start;justify-content:space-between;padding:.875rem 1rem;background:#00000008;border-bottom:1.5px solid #e5e7eb}.jsm-combinator-title{font-size:.875rem;font-weight:700;color:#1f2937}.jsm-combinator-body{padding:1rem}.jsm-combinator-hint{font-size:.75rem;color:#6b7280;margin:.25rem 0 0}.jsm-oneof-tabs{display:flex;overflow-x:auto;border-bottom:1.5px solid #e5e7eb}.jsm-tab{padding:.5rem 1rem;font-size:.8125rem;font-weight:500;color:#6b7280;border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit}.jsm-tab:hover{color:#4f46e5}.jsm-tab--active{color:#4f46e5;border-bottom-color:#4f46e5;font-weight:600}.jsm-anyof-options{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem;border-bottom:1.5px solid #e5e7eb}.jsm-anyof-option{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:9999px;border:1.5px solid #e5e7eb;font-size:.8125rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s;background:transparent}.jsm-anyof-option:hover{border-color:#a5b4fc;color:#4f46e5}.jsm-anyof-option--active{border-color:#6366f1;background:#eef2ff;color:#4f46e5}.jsm-allof-section{border-left:3px solid #e0e7ff;padding-left:1rem}.jsm-combinator-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;margin-left:.75rem}.jsm-badge--oneof{background:#dbeafe;color:#1e40af}.jsm-badge--anyof{background:#ede9fe;color:#5b21b6}.jsm-badge--allof{background:#ccfbf1;color:#065f46}.dark .jsm-field-label{color:#d1d5db}.dark .jsm-field-hint{color:#9ca3af}.dark .jsm-toggle-track{background:#475569}.dark .jsm-toggle-track.jsm-on{background:#4f46e5}.dark .jsm-toggle-text{color:#d1d5db}.dark .jsm-input,.dark .jsm-textarea,.dark .jsm-select{border-color:#475569;color:#f1f5f9}.dark .jsm-input:focus,.dark .jsm-textarea:focus,.dark .jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.dark .jsm-input--error,.dark .jsm-textarea--error,.dark .jsm-select--error{border-color:#f87171!important;background:#f871711a}.dark .jsm-fieldset{border-color:#334155}.dark .jsm-fieldset:focus-within{border-color:#6366f1}.dark .jsm-legend{color:#f1f5f9}.dark .jsm-combinator{border-color:#334155}.dark .jsm-combinator-header{background:#ffffff0a;border-color:#334155}.dark .jsm-combinator-title{color:#f1f5f9}.dark .jsm-oneof-tabs{border-color:#334155}.dark .jsm-tab{color:#94a3b8}.dark .jsm-tab--active{color:#818cf8;border-bottom-color:#818cf8}.dark .jsm-anyof-options{border-color:#334155}.dark .jsm-anyof-option{border-color:#334155;color:#94a3b8;background:#0f172a}.dark .jsm-anyof-option--active{border-color:#6366f1;background:#6366f126;color:#818cf8}.dark .jsm-allof-section{border-left-color:#3730a3}.dark .jsm-array-item{border-color:#334155}.dark .jsm-array-item:focus-within{border-color:#6366f1}.dark .jsm-array-index{background:#6366f133;color:#818cf8}.dark .jsm-empty-array{border-color:#334155;color:#64748b}.dark .jsm-contains-hint{background:#6366f126;color:#818cf8}.dark .jsm-add-prop{background:#1e293b66;border-color:#475569}.dark .jsm-add-prop-label{color:#64748b}.dark .jsm-dynamic-key-header{background:#1e293b80;border-color:#475569}.dark .jsm-dynamic-key-label{color:#94a3b8}.dark .jsm-error-msg{color:#f87171}.dark .jsm-array-title{color:#f1f5f9}.dark .jsm-badge--deprecated{background:#d9770633;color:#fbbf24}.dark .jsm-badge--readonly{background:#1e293b;color:#94a3b8}.dark .jsm-badge--writeonly{background:#2563eb33;color:#60a5fa}.dark .jsm-badge--not{background:#dc262633;color:#f87171}.dark .jsm-badge--nullable{background:#1e293b;color:#94a3b8}.dark .jsm-select-chevron{color:#64748b}\n"] }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaValidationService }, { type: i0.ChangeDetectorRef }], propDecorators: { schema: [{
+        }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaValidationService }, { type: i0.ChangeDetectorRef }, { type: JsonSchemaFormOptions, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
             }], control: [{
@@ -1373,10 +1594,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], allowAdditionalProperties: [{
                 type: Input
+            }], showErrors: [{
+                type: Input
             }], controlReplaced: [{
                 type: Output
             }] } });
 
+const OMIT = Symbol('omit');
+/** Complete decimal numbers only: "13", "-0.5", "0,5", "3," (comma or dot as separator). */
+const NUMERIC_STRING = /^[+-]?(\d+([.,]\d*)?|[.,]\d+)$/;
+const isSchema = (schema) => !!schema && typeof schema === 'object';
+const isRecord = (value) => !!value && typeof value === 'object' && !Array.isArray(value);
+const primaryType = (schema) => {
+    const type = schema.type;
+    if (Array.isArray(type)) {
+        return type.find((item) => item !== 'null') ?? type[0];
+    }
+    return type;
+};
+const isNumericType = (type) => type === 'number' || type === 'integer';
+/** Converts a numeric string to a number; empty values are omitted; anything else is left as typed. */
+function normalizeNumber(value) {
+    if (value === null || value === undefined) {
+        return OMIT;
+    }
+    if (typeof value !== 'string') {
+        return value;
+    }
+    const text = value.trim();
+    if (text === '') {
+        return OMIT;
+    }
+    if (NUMERIC_STRING.test(text)) {
+        return Number(text.replace(',', '.'));
+    }
+    return value;
+}
+/** Picks the oneOf/anyOf variant that declares the most of the object's keys. */
+function pickVariant(variants, value) {
+    let best;
+    let bestScore = 0;
+    for (const variant of variants) {
+        const declared = Object.keys(variant.properties ?? {});
+        const score = declared.filter((key) => key in value).length;
+        if (score > bestScore) {
+            best = variant;
+            bestScore = score;
+        }
+    }
+    return best;
+}
+function normalizeObject(schema, value) {
+    const result = { ...value };
+    const patterns = Object.entries(schema.patternProperties ?? {}).map(([pattern, sub]) => [new RegExp(pattern), sub]);
+    for (const key of Object.keys(result)) {
+        let sub = schema.properties?.[key];
+        if (sub === undefined) {
+            sub = patterns.find(([regex]) => regex.test(key))?.[1];
+        }
+        if (sub === undefined && isSchema(schema.additionalProperties)) {
+            sub = schema.additionalProperties;
+        }
+        if (sub === undefined) {
+            continue;
+        }
+        const next = normalizeNode(sub, result[key]);
+        if (next === OMIT) {
+            delete result[key];
+        }
+        else {
+            result[key] = next;
+        }
+    }
+    return result;
+}
+function normalizeArray(schema, value) {
+    const prefixItems = schema.prefixItems ?? [];
+    return value.map((item, index) => {
+        const sub = (prefixItems[index] ?? schema.items);
+        const next = normalizeNode(sub, item);
+        // Array positions cannot be dropped without shifting the others.
+        return next === OMIT ? null : next;
+    });
+}
+function normalizeNode(schema, value) {
+    if (!isSchema(schema)) {
+        return value;
+    }
+    const type = primaryType(schema);
+    if (isNumericType(type)) {
+        return normalizeNumber(value);
+    }
+    let result = value;
+    for (const sub of schema.allOf ?? []) {
+        if (result === OMIT) {
+            return OMIT;
+        }
+        result = normalizeNode(sub, result);
+    }
+    if (result === OMIT) {
+        return OMIT;
+    }
+    const variants = [...(schema.oneOf ?? []), ...(schema.anyOf ?? [])];
+    if (variants.length > 0 && type === undefined) {
+        if (isRecord(result)) {
+            const variant = pickVariant(variants, result);
+            if (variant) {
+                result = normalizeNode(variant, result);
+            }
+        }
+        else if (!Array.isArray(result)) {
+            // Primitive: convert only when the variants are numeric and none accepts a string.
+            const types = variants.map((variant) => primaryType(variant));
+            if (types.some(isNumericType) && !types.includes('string')) {
+                result = normalizeNumber(result);
+            }
+        }
+    }
+    if (isRecord(result)) {
+        return normalizeObject(schema, result);
+    }
+    if (Array.isArray(result)) {
+        return normalizeArray(schema, result);
+    }
+    return result;
+}
+/**
+ * Coerces values to the types declared by the schema so that the emitted value respects it:
+ * - `number`/`integer` numeric strings become JSON numbers (comma or dot as separator);
+ * - empty numeric values (`""`, whitespace, `null`) leave the key absent, never `""` or `0`;
+ * - integers with decimals are converted to their number but never truncated (validation reports them);
+ * - non-numeric strings are left unchanged (validation reports them).
+ * Descends into properties, patternProperties, additionalProperties, items, prefixItems and combinators.
+ * The same function feeds both the Ajv validation and the emitted value.
+ */
+function normalizeValue(schema, value) {
+    const normalized = normalizeNode(schema, value);
+    return normalized === OMIT ? null : normalized;
+}
+
 // AUTO-GENERATED — do not edit manually. Run: node scripts/generate-lib-styles.mjs
 const JSM_CSS = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-50: oklch(97.1% 0.013 17.38);\n    --color-red-300: oklch(80.8% 0.114 19.571);\n    --color-red-700: oklch(50.5% 0.213 27.518);\n    --color-red-900: oklch(39.6% 0.141 25.723);\n    --color-amber-50: oklch(98.7% 0.022 95.277);\n    --color-amber-200: oklch(92.4% 0.12 95.746);\n    --color-amber-300: oklch(87.9% 0.169 91.605);\n    --color-amber-400: oklch(82.8% 0.189 84.429);\n    --color-amber-600: oklch(66.6% 0.179 58.318);\n    --color-amber-700: oklch(55.5% 0.163 48.998);\n    --color-amber-800: oklch(47.3% 0.137 46.201);\n    --color-amber-900: oklch(41.4% 0.112 45.904);\n    --color-emerald-50: oklch(97.9% 0.021 166.113);\n    --color-emerald-400: oklch(76.5% 0.177 163.223);\n    --color-emerald-700: oklch(50.8% 0.118 165.612);\n    --color-emerald-900: oklch(37.8% 0.077 168.94);\n    --color-indigo-100: oklch(93% 0.034 272.788);\n    --color-indigo-300: oklch(78.5% 0.115 274.713);\n    --color-indigo-400: oklch(67.3% 0.182 276.935);\n    --color-indigo-500: oklch(58.5% 0.233 277.117);\n    --color-indigo-600: oklch(51.1% 0.262 276.966);\n    --color-indigo-700: oklch(45.7% 0.24 277.023);\n    --color-indigo-900: oklch(35.9% 0.144 278.697);\n    --color-rose-50: oklch(96.9% 0.015 12.422);\n    --color-rose-400: oklch(71.2% 0.194 13.428);\n    --color-rose-500: oklch(64.5% 0.246 16.439);\n    --color-rose-600: oklch(58.6% 0.253 17.585);\n    --color-rose-700: oklch(51.4% 0.222 16.935);\n    --color-rose-900: oklch(41% 0.159 10.272);\n    --color-slate-50: oklch(98.4% 0.003 247.858);\n    --color-slate-100: oklch(96.8% 0.007 247.896);\n    --color-slate-200: oklch(92.9% 0.013 255.508);\n    --color-slate-300: oklch(86.9% 0.022 252.894);\n    --color-slate-400: oklch(70.4% 0.04 256.788);\n    --color-slate-500: oklch(55.4% 0.046 257.417);\n    --color-slate-600: oklch(44.6% 0.043 257.281);\n    --color-slate-700: oklch(37.2% 0.044 257.287);\n    --color-slate-800: oklch(27.9% 0.041 260.031);\n    --color-slate-900: oklch(20.8% 0.042 265.755);\n    --color-slate-950: oklch(12.9% 0.042 264.695);\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-2xl: 42rem;\n    --container-3xl: 48rem;\n    --container-6xl: 72rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --text-4xl: 2.25rem;\n    --text-4xl--line-height: calc(2.5 / 2.25);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-wide: 0.025em;\n    --radius-lg: 0.5rem;\n    --radius-xl: 0.75rem;\n    --radius-2xl: 1rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .relative {\n    position: relative;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-40 {\n    height: calc(var(--spacing) * 40);\n  }\n  .h-56 {\n    height: calc(var(--spacing) * 56);\n  }\n  .min-h-screen {\n    min-height: 100vh;\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-9 {\n    width: calc(var(--spacing) * 9);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-2xl {\n    max-width: var(--container-2xl);\n  }\n  .max-w-3xl {\n    max-width: var(--container-3xl);\n  }\n  .max-w-6xl {\n    max-width: var(--container-6xl);\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .translate-x-0 {\n    --tw-translate-x: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-0\\.5 {\n    --tw-translate-x: calc(var(--spacing) * 0.5);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-4 {\n    --tw-translate-x: calc(var(--spacing) * 4);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6);\n  }\n  .space-y-0 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-0\\.5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-1 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-10 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-2xl {\n    border-radius: var(--radius-2xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-xl {\n    border-radius: var(--radius-xl);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n  .border-amber-200 {\n    border-color: var(--color-amber-200);\n  }\n  .border-amber-300 {\n    border-color: var(--color-amber-300);\n  }\n  .border-red-300 {\n    border-color: var(--color-red-300);\n  }\n  .border-red-700 {\n    border-color: var(--color-red-700);\n  }\n  .border-slate-100 {\n    border-color: var(--color-slate-100);\n  }\n  .border-slate-200 {\n    border-color: var(--color-slate-200);\n  }\n  .border-slate-300 {\n    border-color: var(--color-slate-300);\n  }\n  .border-t-slate-900 {\n    border-top-color: var(--color-slate-900);\n  }\n  .bg-amber-50 {\n    background-color: var(--color-amber-50);\n  }\n  .bg-emerald-50 {\n    background-color: var(--color-emerald-50);\n  }\n  .bg-indigo-600 {\n    background-color: var(--color-indigo-600);\n  }\n  .bg-red-50 {\n    background-color: var(--color-red-50);\n  }\n  .bg-red-900 {\n    background-color: var(--color-red-900);\n  }\n  .bg-red-900\\/20 {\n    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);\n    }\n  }\n  .bg-rose-50 {\n    background-color: var(--color-rose-50);\n  }\n  .bg-slate-50 {\n    background-color: var(--color-slate-50);\n  }\n  .bg-slate-300 {\n    background-color: var(--color-slate-300);\n  }\n  .bg-slate-900 {\n    background-color: var(--color-slate-900);\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-white\\/70 {\n    background-color: color-mix(in srgb, #fff 70%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);\n    }\n  }\n  .bg-white\\/90 {\n    background-color: color-mix(in srgb, #fff 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n    }\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-5 {\n    padding: calc(var(--spacing) * 5);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(var(--spacing) * 2.5);\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n  .py-8 {\n    padding-block: calc(var(--spacing) * 8);\n  }\n  .py-10 {\n    padding-block: calc(var(--spacing) * 10);\n  }\n  .font-mono {\n    font-family: var(--font-mono);\n  }\n  .text-3xl {\n    font-size: var(--text-3xl);\n    line-height: var(--tw-leading, var(--text-3xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-\\[0\\.2em\\] {\n    --tw-tracking: 0.2em;\n    letter-spacing: 0.2em;\n  }\n  .tracking-tight {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  .tracking-wide {\n    --tw-tracking: var(--tracking-wide);\n    letter-spacing: var(--tracking-wide);\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-amber-600 {\n    color: var(--color-amber-600);\n  }\n  .text-amber-700 {\n    color: var(--color-amber-700);\n  }\n  .text-amber-800 {\n    color: var(--color-amber-800);\n  }\n  .text-emerald-700 {\n    color: var(--color-emerald-700);\n  }\n  .text-indigo-500 {\n    color: var(--color-indigo-500);\n  }\n  .text-rose-500 {\n    color: var(--color-rose-500);\n  }\n  .text-rose-600 {\n    color: var(--color-rose-600);\n  }\n  .text-rose-700 {\n    color: var(--color-rose-700);\n  }\n  .text-slate-400 {\n    color: var(--color-slate-400);\n  }\n  .text-slate-500 {\n    color: var(--color-slate-500);\n  }\n  .text-slate-600 {\n    color: var(--color-slate-600);\n  }\n  .text-slate-700 {\n    color: var(--color-slate-700);\n  }\n  .text-slate-800 {\n    color: var(--color-slate-800);\n  }\n  .text-slate-900 {\n    color: var(--color-slate-900);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .opacity-25 {\n    opacity: 25%;\n  }\n  .opacity-75 {\n    opacity: 75%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .backdrop-blur {\n    --tw-backdrop-blur: blur(8px);\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .backdrop-filter {\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .focus-within\\:border-indigo-300 {\n    &:focus-within {\n      border-color: var(--color-indigo-300);\n    }\n  }\n  .focus-within\\:ring-2 {\n    &:focus-within {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .hover\\:-translate-y-0\\.5 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-translate-y: calc(var(--spacing) * -0.5);\n        translate: var(--tw-translate-x) var(--tw-translate-y);\n      }\n    }\n  }\n  .hover\\:border-slate-300 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-slate-300);\n      }\n    }\n  }\n  .hover\\:border-slate-400 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-slate-400);\n      }\n    }\n  }\n  .hover\\:bg-slate-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-slate-50);\n      }\n    }\n  }\n  .hover\\:bg-slate-800 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-slate-800);\n      }\n    }\n  }\n  .hover\\:text-rose-700 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-rose-700);\n      }\n    }\n  }\n  .hover\\:shadow {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      }\n    }\n  }\n  .hover\\:shadow-lg {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      }\n    }\n  }\n  .hover\\:shadow-md {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      }\n    }\n  }\n  .focus\\:border-indigo-400 {\n    &:focus {\n      border-color: var(--color-indigo-400);\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-indigo-100 {\n    &:focus {\n      --tw-ring-color: var(--color-indigo-100);\n    }\n  }\n  .focus\\:ring-indigo-500 {\n    &:focus {\n      --tw-ring-color: var(--color-indigo-500);\n    }\n  }\n  .focus\\:ring-slate-900 {\n    &:focus {\n      --tw-ring-color: var(--color-slate-900);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .sm\\:grid-cols-2 {\n    @media (width >= 40rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:flex-row {\n    @media (width >= 48rem) {\n      flex-direction: row;\n    }\n  }\n  .md\\:items-center {\n    @media (width >= 48rem) {\n      align-items: center;\n    }\n  }\n  .md\\:justify-between {\n    @media (width >= 48rem) {\n      justify-content: space-between;\n    }\n  }\n  .md\\:p-6 {\n    @media (width >= 48rem) {\n      padding: calc(var(--spacing) * 6);\n    }\n  }\n  .md\\:text-4xl {\n    @media (width >= 48rem) {\n      font-size: var(--text-4xl);\n      line-height: var(--tw-leading, var(--text-4xl--line-height));\n    }\n  }\n  .lg\\:grid-cols-\\[360px\\,1fr\\] {\n    @media (width >= 64rem) {\n      grid-template-columns: 360px,1fr;\n    }\n  }\n  .dark\\:border-amber-700 {\n    &:where(.dark, .dark *) {\n      border-color: var(--color-amber-700);\n    }\n  }\n  .dark\\:border-amber-800 {\n    &:where(.dark, .dark *) {\n      border-color: var(--color-amber-800);\n    }\n  }\n  .dark\\:border-slate-600 {\n    &:where(.dark, .dark *) {\n      border-color: var(--color-slate-600);\n    }\n  }\n  .dark\\:border-slate-700 {\n    &:where(.dark, .dark *) {\n      border-color: var(--color-slate-700);\n    }\n  }\n  .dark\\:border-t-indigo-400 {\n    &:where(.dark, .dark *) {\n      border-top-color: var(--color-indigo-400);\n    }\n  }\n  .dark\\:bg-amber-900\\/20 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-amber-900) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-emerald-900\\/30 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 30%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-indigo-600 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-indigo-600);\n    }\n  }\n  .dark\\:bg-rose-900\\/30 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 30%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-rose-900) 30%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-600 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-slate-600);\n    }\n  }\n  .dark\\:bg-slate-700 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-slate-700);\n    }\n  }\n  .dark\\:bg-slate-800 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-slate-800);\n    }\n  }\n  .dark\\:bg-slate-800\\/50 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-800\\/60 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-900 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-slate-900);\n    }\n  }\n  .dark\\:bg-slate-900\\/90 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 90%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-slate-900) 90%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-950 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-slate-950);\n    }\n  }\n  .dark\\:text-amber-300 {\n    &:where(.dark, .dark *) {\n      color: var(--color-amber-300);\n    }\n  }\n  .dark\\:text-amber-400 {\n    &:where(.dark, .dark *) {\n      color: var(--color-amber-400);\n    }\n  }\n  .dark\\:text-emerald-400 {\n    &:where(.dark, .dark *) {\n      color: var(--color-emerald-400);\n    }\n  }\n  .dark\\:text-indigo-400 {\n    &:where(.dark, .dark *) {\n      color: var(--color-indigo-400);\n    }\n  }\n  .dark\\:text-rose-400 {\n    &:where(.dark, .dark *) {\n      color: var(--color-rose-400);\n    }\n  }\n  .dark\\:text-slate-100 {\n    &:where(.dark, .dark *) {\n      color: var(--color-slate-100);\n    }\n  }\n  .dark\\:text-slate-200 {\n    &:where(.dark, .dark *) {\n      color: var(--color-slate-200);\n    }\n  }\n  .dark\\:text-slate-300 {\n    &:where(.dark, .dark *) {\n      color: var(--color-slate-300);\n    }\n  }\n  .dark\\:text-slate-400 {\n    &:where(.dark, .dark *) {\n      color: var(--color-slate-400);\n    }\n  }\n  .dark\\:text-slate-500 {\n    &:where(.dark, .dark *) {\n      color: var(--color-slate-500);\n    }\n  }\n  .dark\\:text-white {\n    &:where(.dark, .dark *) {\n      color: var(--color-white);\n    }\n  }\n  .dark\\:hover\\:border-slate-500 {\n    &:where(.dark, .dark *) {\n      &:hover {\n        @media (hover: hover) {\n          border-color: var(--color-slate-500);\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:bg-indigo-700 {\n    &:where(.dark, .dark *) {\n      &:hover {\n        @media (hover: hover) {\n          background-color: var(--color-indigo-700);\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:bg-slate-700 {\n    &:where(.dark, .dark *) {\n      &:hover {\n        @media (hover: hover) {\n          background-color: var(--color-slate-700);\n        }\n      }\n    }\n  }\n  .dark\\:focus\\:ring-indigo-900\\/40 {\n    &:where(.dark, .dark *) {\n      &:focus {\n        --tw-ring-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 40%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--color-indigo-900) 40%, transparent);\n        }\n      }\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n    }\n  }\n}\n";
 
@@ -1402,10 +1758,10 @@ class JsonSchemaStylesService {
         document.head.appendChild(style);
         this.injected = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaStylesService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaStylesService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaStylesService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaStylesService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaStylesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaStylesService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -1417,10 +1773,17 @@ class JsonSchemaFormComponent {
     schemaService;
     resolver;
     validation;
+    cdr;
+    options;
     schema;
     value;
     data;
     allowAdditionalProperties = false;
+    /**
+     * Decimal separator of number/integer fields. `,` shows and accepts `0,5` (both `,` and `.` are accepted as input
+     * either way); the emitted value is always a JSON number.
+     */
+    decimalSeparator = '.';
     formReady = new EventEmitter();
     valueChange = new EventEmitter();
     schemaReady = new EventEmitter();
@@ -1431,21 +1794,52 @@ class JsonSchemaFormComponent {
     errorsMap = new Map();
     schemaErrorList = [];
     loading = false;
+    /** When true, all field errors are shown regardless of touched/dirty state. */
+    showErrors = false;
     valueSub;
-    constructor(schemaService, resolver, validation, stylesService) {
+    constructor(schemaService, resolver, validation, cdr, options, stylesService) {
         this.schemaService = schemaService;
         this.resolver = resolver;
         this.validation = validation;
+        this.cdr = cdr;
+        this.options = options;
         stylesService.inject();
     }
     ngOnChanges(changes) {
-        if (changes['schema'] || changes['value'] || changes['data']) {
+        if (changes['decimalSeparator']) {
+            this.options.decimalSeparator = this.decimalSeparator;
+        }
+        if (changes['schema']) {
+            // Schema changed — full rebuild required
+            void this.buildForm();
+        }
+        else if ((changes['value'] || changes['data']) && this.form) {
+            // Only data changed and form already exists — patch values without rebuilding
+            const newData = this.value !== undefined ? this.value : this.data;
+            this.form.patchValue(newData, { emitEvent: false });
+        }
+        else if (changes['value'] || changes['data']) {
+            // Form not built yet — build it
             void this.buildForm();
         }
     }
     ngOnDestroy() {
         this.valueSub?.unsubscribe();
     }
+    /**
+     * Marks all fields as touched and forces error display across the entire form.
+     * Call this from an external "Save" or "Submit" button to show all validation errors at once.
+     * Returns true if the form is valid, false otherwise.
+     */
+    validate() {
+        if (!this.form)
+            return false;
+        this.form.markAllAsTouched();
+        this.showErrors = true;
+        this.updateErrors();
+        this.cdr.detectChanges();
+        return this.form.valid;
+    }
     async buildForm() {
         this.valueSub?.unsubscribe();
         this.loading = true;
@@ -1473,12 +1867,13 @@ class JsonSchemaFormComponent {
             this.errorsMap = new Map();
             return;
         }
-        const errors = this.validation.validate(this.resolvedSchema, this.rootControl.value);
+        const normalized = normalizeValue(this.resolvedSchema, this.rootControl.value);
+        const errors = this.validation.validate(this.resolvedSchema, normalized);
         const map = new Map();
         for (const error of errors) {
             const path = error.instancePath ?? '';
             const messages = map.get(path) ?? [];
-            messages.push(error.message ?? error.keyword);
+            messages.push(localizeNumbers(error.message ?? error.keyword, this.decimalSeparator));
             map.set(path, messages);
         }
         this.errorsMap = map;
@@ -1503,126 +1898,128 @@ class JsonSchemaFormComponent {
         this.updateErrors();
         this.valueSub = this.form.valueChanges.subscribe(() => {
             this.updateErrors();
-            this.valueChange.emit(this.rootControl.value);
+            this.valueChange.emit(this.resolvedSchema ? normalizeValue(this.resolvedSchema, this.rootControl.value) : this.rootControl.value);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaResolverService }, { token: JsonSchemaValidationService }, { token: JsonSchemaStylesService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: JsonSchemaFormComponent, isStandalone: true, selector: "jsm-json-schema-form", inputs: { schema: "schema", value: "value", data: "data", allowAdditionalProperties: "allowAdditionalProperties" }, outputs: { formReady: "formReady", valueChange: "valueChange", schemaReady: "schemaReady", schemaErrors: "schemaErrors" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="jsm-root">
-    <form class="w-full space-y-5">
-      <div *ngIf="resolvedSchema?.title || resolvedSchema?.description" class="space-y-0.5">
-        <h2 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ resolvedSchema?.title || 'Form' }}</h2>
-        <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500 dark:text-slate-400">{{ resolvedSchema?.description }}</p>
-      </div>
-
-      <div *ngIf="loading" class="flex items-center gap-2 py-6 text-sm text-slate-500 dark:text-slate-400" aria-live="polite">
-        <svg class="h-4 w-4 animate-spin text-indigo-500 dark:text-indigo-400" viewBox="0 0 24 24" fill="none">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
-        </svg>
-        Resolving schema&hellip;
-      </div>
-
-      <!-- schema structural errors panel -->
-      <div *ngIf="schemaErrorList.length > 0 && !loading"
-        class="rounded-xl border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-4 space-y-3"
-        role="alert">
-        <div class="flex items-center gap-2">
-          <svg class="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" viewBox="0 0 16 16" fill="none">
-            <path d="M8 2L1.5 13.5h13L8 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-            <path d="M8 6v3.5M8 11.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          </svg>
-          <span class="text-sm font-semibold text-amber-800 dark:text-amber-300">
-            Schema errors ({{ schemaErrorList.length }})
-          </span>
-        </div>
-        <p class="text-xs text-amber-700 dark:text-amber-400">
-          The schema has structural issues. Fix them to get a valid form.
-        </p>
-        <div class="space-y-2">
-          <div *ngFor="let err of schemaErrorList"
-            class="rounded-lg border border-amber-200 dark:border-amber-800 bg-white dark:bg-slate-900 px-3 py-2 space-y-0.5">
-            <p class="font-mono text-[11px] font-semibold text-amber-700 dark:text-amber-400">{{ err.path }}</p>
-            <p class="text-xs text-slate-700 dark:text-slate-300">{{ err.message }}</p>
-            <p class="text-[10px] uppercase tracking-wide text-slate-400 dark:text-slate-500">keyword: {{ err.keyword }}</p>
-          </div>
-        </div>
-      </div>
-
-      <div *ngIf="form && resolvedSchema && !loading" class="space-y-5" [formGroup]="form">
-        <jsm-schema-node
-          [schema]="resolvedSchema"
-          [control]="rootControl"
-          [path]="''"
-          [errorsMap]="errorsMap"
-          [allowAdditionalProperties]="allowAdditionalProperties"
-          label="Root"
-          (controlReplaced)="onRootReplaced($event)"
-        ></jsm-schema-node>
-      </div>
-    </form>
-    </div>
-  `, isInline: true, styles: [".jsm-root *,.jsm-root *:before,.jsm-root *:after{box-sizing:border-box}.jsm-root input,.jsm-root textarea,.jsm-root select,.jsm-root button{font-family:inherit;font-size:inherit;line-height:inherit}.jsm-root input[type=number]::-webkit-inner-spin-button,.jsm-root input[type=number]::-webkit-outer-spin-button{opacity:1}.jsm-root input:not([type=checkbox]):not([type=radio]):not(.sr-only),.jsm-root textarea,.jsm-root select{border-width:1.5px!important;border-style:solid!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey", "allowAdditionalProperties"], outputs: ["controlReplaced"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaResolverService }, { token: JsonSchemaValidationService }, { token: i0.ChangeDetectorRef }, { token: JsonSchemaFormOptions }, { token: JsonSchemaStylesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: JsonSchemaFormComponent, isStandalone: true, selector: "jsm-json-schema-form", inputs: { schema: "schema", value: "value", data: "data", allowAdditionalProperties: "allowAdditionalProperties", decimalSeparator: "decimalSeparator" }, outputs: { formReady: "formReady", valueChange: "valueChange", schemaReady: "schemaReady", schemaErrors: "schemaErrors" }, providers: [JsonSchemaFormOptions], usesOnChanges: true, ngImport: i0, template: `
+    <div class="jsm-root">
+    <form class="w-full space-y-5">
+      <div *ngIf="resolvedSchema?.title || resolvedSchema?.description" class="space-y-0.5">
+        <h2 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ resolvedSchema?.title || 'Form' }}</h2>
+        <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500 dark:text-slate-400">{{ resolvedSchema?.description }}</p>
+      </div>
+
+      <div *ngIf="loading" class="flex items-center gap-2 py-6 text-sm text-slate-500 dark:text-slate-400" aria-live="polite">
+        <svg class="h-4 w-4 animate-spin text-indigo-500 dark:text-indigo-400" viewBox="0 0 24 24" fill="none">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
+        </svg>
+        Resolving schema&hellip;
+      </div>
+
+      <!-- schema structural errors panel -->
+      <div *ngIf="schemaErrorList.length > 0 && !loading"
+        class="rounded-xl border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-4 space-y-3"
+        role="alert">
+        <div class="flex items-center gap-2">
+          <svg class="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" viewBox="0 0 16 16" fill="none">
+            <path d="M8 2L1.5 13.5h13L8 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+            <path d="M8 6v3.5M8 11.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+          <span class="text-sm font-semibold text-amber-800 dark:text-amber-300">
+            Schema errors ({{ schemaErrorList.length }})
+          </span>
+        </div>
+        <p class="text-xs text-amber-700 dark:text-amber-400">
+          The schema has structural issues. Fix them to get a valid form.
+        </p>
+        <div class="space-y-2">
+          <div *ngFor="let err of schemaErrorList"
+            class="rounded-lg border border-amber-200 dark:border-amber-800 bg-white dark:bg-slate-900 px-3 py-2 space-y-0.5">
+            <p class="font-mono text-[11px] font-semibold text-amber-700 dark:text-amber-400">{{ err.path }}</p>
+            <p class="text-xs text-slate-700 dark:text-slate-300">{{ err.message }}</p>
+            <p class="text-[10px] uppercase tracking-wide text-slate-400 dark:text-slate-500">keyword: {{ err.keyword }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div *ngIf="form && resolvedSchema && !loading" class="space-y-5" [formGroup]="form">
+        <jsm-schema-node
+          [schema]="resolvedSchema"
+          [control]="rootControl"
+          [path]="''"
+          [errorsMap]="errorsMap"
+          [allowAdditionalProperties]="allowAdditionalProperties"
+          [showErrors]="showErrors"
+          label="Root"
+          (controlReplaced)="onRootReplaced($event)"
+        ></jsm-schema-node>
+      </div>
+    </form>
+    </div>
+  `, isInline: true, styles: [".jsm-root *,.jsm-root *:before,.jsm-root *:after{box-sizing:border-box}.jsm-root input,.jsm-root textarea,.jsm-root select,.jsm-root button{font-family:inherit;font-size:inherit;line-height:inherit}.jsm-root input[type=number]::-webkit-inner-spin-button,.jsm-root input[type=number]::-webkit-outer-spin-button{opacity:1}.jsm-root input:not([type=checkbox]):not([type=radio]):not(.sr-only),.jsm-root textarea,.jsm-root select{border-width:1.5px!important;border-style:solid!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey", "allowAdditionalProperties", "showErrors"], outputs: ["controlReplaced"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'jsm-json-schema-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, JsonSchemaNodeComponent], encapsulation: ViewEncapsulation.None, template: `
-    <div class="jsm-root">
-    <form class="w-full space-y-5">
-      <div *ngIf="resolvedSchema?.title || resolvedSchema?.description" class="space-y-0.5">
-        <h2 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ resolvedSchema?.title || 'Form' }}</h2>
-        <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500 dark:text-slate-400">{{ resolvedSchema?.description }}</p>
-      </div>
-
-      <div *ngIf="loading" class="flex items-center gap-2 py-6 text-sm text-slate-500 dark:text-slate-400" aria-live="polite">
-        <svg class="h-4 w-4 animate-spin text-indigo-500 dark:text-indigo-400" viewBox="0 0 24 24" fill="none">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
-        </svg>
-        Resolving schema&hellip;
-      </div>
-
-      <!-- schema structural errors panel -->
-      <div *ngIf="schemaErrorList.length > 0 && !loading"
-        class="rounded-xl border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-4 space-y-3"
-        role="alert">
-        <div class="flex items-center gap-2">
-          <svg class="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" viewBox="0 0 16 16" fill="none">
-            <path d="M8 2L1.5 13.5h13L8 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-            <path d="M8 6v3.5M8 11.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          </svg>
-          <span class="text-sm font-semibold text-amber-800 dark:text-amber-300">
-            Schema errors ({{ schemaErrorList.length }})
-          </span>
-        </div>
-        <p class="text-xs text-amber-700 dark:text-amber-400">
-          The schema has structural issues. Fix them to get a valid form.
-        </p>
-        <div class="space-y-2">
-          <div *ngFor="let err of schemaErrorList"
-            class="rounded-lg border border-amber-200 dark:border-amber-800 bg-white dark:bg-slate-900 px-3 py-2 space-y-0.5">
-            <p class="font-mono text-[11px] font-semibold text-amber-700 dark:text-amber-400">{{ err.path }}</p>
-            <p class="text-xs text-slate-700 dark:text-slate-300">{{ err.message }}</p>
-            <p class="text-[10px] uppercase tracking-wide text-slate-400 dark:text-slate-500">keyword: {{ err.keyword }}</p>
-          </div>
-        </div>
-      </div>
-
-      <div *ngIf="form && resolvedSchema && !loading" class="space-y-5" [formGroup]="form">
-        <jsm-schema-node
-          [schema]="resolvedSchema"
-          [control]="rootControl"
-          [path]="''"
-          [errorsMap]="errorsMap"
-          [allowAdditionalProperties]="allowAdditionalProperties"
-          label="Root"
-          (controlReplaced)="onRootReplaced($event)"
-        ></jsm-schema-node>
-      </div>
-    </form>
-    </div>
+            args: [{ selector: 'jsm-json-schema-form', standalone: true, imports: [CommonModule, ReactiveFormsModule, JsonSchemaNodeComponent], providers: [JsonSchemaFormOptions], encapsulation: ViewEncapsulation.None, template: `
+    <div class="jsm-root">
+    <form class="w-full space-y-5">
+      <div *ngIf="resolvedSchema?.title || resolvedSchema?.description" class="space-y-0.5">
+        <h2 class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">{{ resolvedSchema?.title || 'Form' }}</h2>
+        <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500 dark:text-slate-400">{{ resolvedSchema?.description }}</p>
+      </div>
+
+      <div *ngIf="loading" class="flex items-center gap-2 py-6 text-sm text-slate-500 dark:text-slate-400" aria-live="polite">
+        <svg class="h-4 w-4 animate-spin text-indigo-500 dark:text-indigo-400" viewBox="0 0 24 24" fill="none">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
+        </svg>
+        Resolving schema&hellip;
+      </div>
+
+      <!-- schema structural errors panel -->
+      <div *ngIf="schemaErrorList.length > 0 && !loading"
+        class="rounded-xl border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20 p-4 space-y-3"
+        role="alert">
+        <div class="flex items-center gap-2">
+          <svg class="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" viewBox="0 0 16 16" fill="none">
+            <path d="M8 2L1.5 13.5h13L8 2z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+            <path d="M8 6v3.5M8 11.5v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+          <span class="text-sm font-semibold text-amber-800 dark:text-amber-300">
+            Schema errors ({{ schemaErrorList.length }})
+          </span>
+        </div>
+        <p class="text-xs text-amber-700 dark:text-amber-400">
+          The schema has structural issues. Fix them to get a valid form.
+        </p>
+        <div class="space-y-2">
+          <div *ngFor="let err of schemaErrorList"
+            class="rounded-lg border border-amber-200 dark:border-amber-800 bg-white dark:bg-slate-900 px-3 py-2 space-y-0.5">
+            <p class="font-mono text-[11px] font-semibold text-amber-700 dark:text-amber-400">{{ err.path }}</p>
+            <p class="text-xs text-slate-700 dark:text-slate-300">{{ err.message }}</p>
+            <p class="text-[10px] uppercase tracking-wide text-slate-400 dark:text-slate-500">keyword: {{ err.keyword }}</p>
+          </div>
+        </div>
+      </div>
+
+      <div *ngIf="form && resolvedSchema && !loading" class="space-y-5" [formGroup]="form">
+        <jsm-schema-node
+          [schema]="resolvedSchema"
+          [control]="rootControl"
+          [path]="''"
+          [errorsMap]="errorsMap"
+          [allowAdditionalProperties]="allowAdditionalProperties"
+          [showErrors]="showErrors"
+          label="Root"
+          (controlReplaced)="onRootReplaced($event)"
+        ></jsm-schema-node>
+      </div>
+    </form>
+    </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".jsm-root *,.jsm-root *:before,.jsm-root *:after{box-sizing:border-box}.jsm-root input,.jsm-root textarea,.jsm-root select,.jsm-root button{font-family:inherit;font-size:inherit;line-height:inherit}.jsm-root input[type=number]::-webkit-inner-spin-button,.jsm-root input[type=number]::-webkit-outer-spin-button{opacity:1}.jsm-root input:not([type=checkbox]):not([type=radio]):not(.sr-only),.jsm-root textarea,.jsm-root select{border-width:1.5px!important;border-style:solid!important}\n"] }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaResolverService }, { type: JsonSchemaValidationService }, { type: JsonSchemaStylesService }], propDecorators: { schema: [{
+        }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaResolverService }, { type: JsonSchemaValidationService }, { type: i0.ChangeDetectorRef }, { type: JsonSchemaFormOptions }, { type: JsonSchemaStylesService }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
             }], value: [{
@@ -1631,6 +2028,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], allowAdditionalProperties: [{
                 type: Input
+            }], decimalSeparator: [{
+                type: Input
             }], formReady: [{
                 type: Output
             }], valueChange: [{
@@ -1642,11 +2041,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class JsonSchemaFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormModule, imports: [JsonSchemaFormComponent, JsonSchemaNodeComponent], exports: [JsonSchemaFormComponent, JsonSchemaNodeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormModule, imports: [JsonSchemaFormComponent, JsonSchemaNodeComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormModule, imports: [JsonSchemaFormComponent, JsonSchemaNodeComponent], exports: [JsonSchemaFormComponent, JsonSchemaNodeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormModule, imports: [JsonSchemaFormComponent, JsonSchemaNodeComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: JsonSchemaFormModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [JsonSchemaFormComponent, JsonSchemaNodeComponent],
@@ -1658,5 +2057,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonSchemaNodeComponent, JsonSchemaResolverService, JsonSchemaStylesService, JsonSchemaValidationService };
+export { JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormOptions, JsonSchemaFormService, JsonSchemaNodeComponent, JsonSchemaResolverService, JsonSchemaStylesService, JsonSchemaValidationService, NumericInputDirective, formatNumeric, localizeNumbers, normalizeValue, parseNumericText, sanitizeNumericText };
 //# sourceMappingURL=elle96-ng-json-schema-manager.mjs.map