@elle96/ng-json-schema-manager 0.0.15 → 0.1.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { FormGroup, FormArray, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import Ajv from 'ajv';
@@ -471,6 +471,39 @@ class JsonSchemaValidationService {
         }
         return validate.errors ?? [];
     }
+    /**
+     * Validates the schema itself against its JSON Schema meta-schema.
+     * Returns a list of SchemaError describing what is wrong in the schema definition.
+     */
+    validateSchema(schema) {
+        const draft = this.detectDraft(schema);
+        const ajv = this.getAjv(draft);
+        try {
+            const valid = ajv.validateSchema(schema);
+            if (valid)
+                return [];
+            return (ajv.errors ?? []).map((e) => ({
+                path: e.instancePath || '/',
+                message: e.message ?? e.keyword,
+                keyword: e.keyword,
+            }));
+        }
+        catch (e) {
+            // ajv.validateSchema throws when the schema is so broken it cannot be compiled.
+            // The error message contains comma-separated individual violations — split them.
+            const raw = e instanceof Error ? e.message : String(e);
+            // Strip the "schema is invalid: " prefix if present
+            const body = raw.replace(/^schema is invalid:\s*/i, '');
+            // Each violation looks like "data/some/path must ..." — extract path and message
+            return body.split(', ').map((msg) => {
+                const trimmed = msg.trim();
+                const match = trimmed.match(/^(data[^\s]*)\s+(.+)$/);
+                return match
+                    ? { path: match[1].replace(/^data/, '') || '/', message: match[2], keyword: 'schema' }
+                    : { path: '/', message: trimmed, keyword: 'schema' };
+            });
+        }
+    }
     detectDraft(schema) {
         const schemaId = schema.$schema ?? '';
         if (schemaId.includes('draft-04')) {
@@ -557,6 +590,7 @@ class JsonSchemaNodeComponent {
     errorsMap = new Map();
     parent;
     controlKey;
+    allowAdditionalProperties = false;
     controlReplaced = new EventEmitter();
     selectedOneOf = 0;
     selectedAnyOf = new Set();
@@ -571,133 +605,121 @@ class JsonSchemaNodeComponent {
             this.selectedAnyOf.add(0);
         }
     }
+    /**
+     * Determina se un figlio di un object è "semplice" (primitive/enum/bool),
+     * quindi può stare in griglia 2-col, oppure "complesso" (object/array/combinator)
+     * che deve occupare la larghezza piena.
+     */
+    isSimpleChild(key) {
+        const childSchema = this.schemaForKey(key);
+        if (childSchema.oneOf?.length || childSchema.anyOf?.length || childSchema.allOf?.length)
+            return false;
+        const t = this.schemaService.resolveType(childSchema);
+        return t !== 'object' && t !== 'array';
+    }
+    badgeClass(badge) {
+        return {
+            'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400': badge === 'Deprecated',
+            'bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400': badge === 'Read-only' || badge === 'Nullable',
+            'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': badge === 'Write-only',
+            'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400': badge === 'Not constraint',
+        };
+    }
     get nodeKind() {
-        if (this.schema.oneOf?.length) {
+        if (this.schema.oneOf?.length)
             return 'oneOf';
-        }
-        if (this.schema.anyOf?.length) {
+        if (this.schema.anyOf?.length)
             return 'anyOf';
-        }
-        if (this.schema.allOf?.length) {
+        if (this.schema.allOf?.length)
             return 'allOf';
-        }
         const resolved = this.resolvedType;
-        if (resolved === 'object') {
+        if (resolved === 'object')
             return 'object';
-        }
-        if (resolved === 'array') {
+        if (resolved === 'array')
             return 'array';
-        }
         return 'primitive';
     }
     get resolvedType() {
         return this.schemaService.resolveType(this.effectiveSchema) ?? 'string';
     }
     get inputKind() {
-        if (this.effectiveSchema.enum) {
+        if (this.effectiveSchema.enum)
             return 'select';
-        }
-        if (this.resolvedType === 'boolean') {
+        if (this.resolvedType === 'boolean')
             return 'checkbox';
-        }
-        if (this.effectiveSchema.format === 'textarea' || (this.effectiveSchema.maxLength ?? 0) > 200) {
+        if (this.effectiveSchema.format === 'textarea' || (this.effectiveSchema.maxLength ?? 0) > 200)
             return 'textarea';
-        }
         return 'text';
     }
     get inputType() {
-        if (this.effectiveSchema.format === 'email') {
+        if (this.effectiveSchema.format === 'email')
             return 'email';
-        }
-        if (this.effectiveSchema.format === 'date') {
+        if (this.effectiveSchema.format === 'date')
             return 'date';
-        }
-        if (this.effectiveSchema.format === 'time') {
+        if (this.effectiveSchema.format === 'time')
             return 'time';
-        }
-        if (this.effectiveSchema.format === 'date-time') {
+        if (this.effectiveSchema.format === 'date-time')
             return 'datetime-local';
-        }
-        if (this.resolvedType === 'number' || this.resolvedType === 'integer') {
+        if (this.resolvedType === 'number' || this.resolvedType === 'integer')
             return 'number';
-        }
-        if (this.effectiveSchema.format === 'password') {
+        if (this.effectiveSchema.format === 'password')
             return 'password';
-        }
         return 'text';
     }
-    get controlAsGroup() {
-        return this.control;
+    get controlAsGroup() { return this.control; }
+    get controlAsFormControl() { return this.control; }
+    get controlAsArray() { return this.control; }
+    get arrayControls() { return this.controlAsArray.controls; }
+    get objectKeys() { return Object.keys(this.controlAsGroup.controls); }
+    get simpleKeys() {
+        return this.objectKeys.filter(k => this.isSimpleChild(k));
     }
-    get controlAsFormControl() {
-        return this.control;
-    }
-    get controlAsArray() {
-        return this.control;
-    }
-    get arrayControls() {
-        return this.controlAsArray.controls;
-    }
-    get objectKeys() {
-        return Object.keys(this.controlAsGroup.controls);
+    get complexKeys() {
+        return this.objectKeys.filter(k => !this.isSimpleChild(k));
     }
     get canAddProperty() {
+        if (!this.allowAdditionalProperties)
+            return false;
         return this.effectiveSchema.additionalProperties !== false || !!this.effectiveSchema.patternProperties;
     }
-    get errorsForPath() {
-        return this.errorsMap.get(this.path) ?? [];
-    }
+    get errorsForPath() { return this.errorsMap.get(this.path) ?? []; }
     get metaBadges() {
         const badges = [];
-        if (this.effectiveSchema.deprecated) {
+        if (this.effectiveSchema.deprecated)
             badges.push('Deprecated');
-        }
-        if (this.effectiveSchema.readOnly) {
+        if (this.effectiveSchema.readOnly)
             badges.push('Read-only');
-        }
-        if (this.effectiveSchema.writeOnly) {
+        if (this.effectiveSchema.writeOnly)
             badges.push('Write-only');
-        }
-        if (this.effectiveSchema.nullable) {
+        if (this.effectiveSchema.nullable)
             badges.push('Nullable');
-        }
-        if (this.effectiveSchema.not) {
+        if (this.effectiveSchema.not)
             badges.push('Not constraint');
-        }
         return badges;
     }
     get activeVariant() {
-        if (this.schema.oneOf?.length) {
+        if (this.schema.oneOf?.length)
             return this.schema.oneOf[this.selectedOneOf] ?? null;
-        }
         if (this.schema.anyOf?.length) {
-            const selections = Array.from(this.selectedAnyOf).map((index) => this.schema.anyOf[index]);
+            const selections = Array.from(this.selectedAnyOf).map((i) => this.schema.anyOf[i]);
             return selections.length ? this.mergeSchemas(selections) : this.schema.anyOf[0] ?? null;
         }
-        if (this.schema.allOf?.length) {
+        if (this.schema.allOf?.length)
             return this.mergeSchemas([this.schema, ...this.schema.allOf]);
-        }
         return this.effectiveSchema;
     }
     get mergedAllOf() {
         return this.schema.allOf?.length ? [this.schema, ...this.schema.allOf] : [this.schema];
     }
-    isRequired(key) {
-        return this.effectiveSchema.required?.includes(key) ?? false;
-    }
+    isRequired(key) { return this.effectiveSchema.required?.includes(key) ?? false; }
     schemaForKey(key) {
         return (this.effectiveSchema.properties?.[key] ??
             this.schemaService.resolveDynamicSchema(this.effectiveSchema, key) ??
             {});
     }
-    isDynamicKey(key) {
-        return !this.effectiveSchema.properties?.[key];
-    }
+    isDynamicKey(key) { return !this.effectiveSchema.properties?.[key]; }
     pathForChild(key) {
-        if (this.path === '') {
-            return `/${key}`;
-        }
-        return `${this.path}/${key}`;
+        return this.path === '' ? `/${key}` : `${this.path}/${key}`;
     }
     addDynamicProperty() {
         this.propertyError = '';
@@ -726,135 +748,107 @@ class JsonSchemaNodeComponent {
         this.controlAsGroup.addControl(key, control);
         this.newPropertyKey = '';
     }
-    removeDynamicKey(key) {
-        this.controlAsGroup.removeControl(key);
-    }
+    removeDynamicKey(key) { this.controlAsGroup.removeControl(key); }
     schemaForIndex(index) {
         const prefixItems = this.effectiveSchema.prefixItems ?? [];
-        if (prefixItems[index]) {
+        if (prefixItems[index])
             return prefixItems[index];
-        }
-        if (this.effectiveSchema.items && this.effectiveSchema.items !== true) {
+        if (this.effectiveSchema.items && this.effectiveSchema.items !== true)
             return this.effectiveSchema.items;
-        }
-        if (this.effectiveSchema.additionalItems && this.effectiveSchema.additionalItems !== true) {
+        if (this.effectiveSchema.additionalItems && this.effectiveSchema.additionalItems !== true)
             return this.effectiveSchema.additionalItems;
-        }
-        if (this.effectiveSchema.unevaluatedItems && this.effectiveSchema.unevaluatedItems !== true) {
+        if (this.effectiveSchema.unevaluatedItems && this.effectiveSchema.unevaluatedItems !== true)
             return this.effectiveSchema.unevaluatedItems;
-        }
         return {};
     }
     get canAddArrayItem() {
-        if (this.effectiveSchema.items === false ||
+        return !(this.effectiveSchema.items === false ||
             this.effectiveSchema.additionalItems === false ||
-            this.effectiveSchema.unevaluatedItems === false) {
-            return false;
-        }
-        return true;
+            this.effectiveSchema.unevaluatedItems === false);
     }
     addArrayItem() {
-        if (!this.canAddArrayItem) {
+        if (!this.canAddArrayItem)
             return;
-        }
         const formArray = this.controlAsArray;
         const index = formArray.length;
-        const schemaForItem = this.schemaForIndex(index);
-        formArray.push(this.schemaService.buildControl(schemaForItem, undefined, false));
+        formArray.push(this.schemaService.buildControl(this.schemaForIndex(index), undefined, false));
         formArray.markAsDirty();
     }
     removeArrayItem(index) {
-        const formArray = this.controlAsArray;
-        formArray.removeAt(index);
-        formArray.markAsDirty();
+        this.controlAsArray.removeAt(index);
+        this.controlAsArray.markAsDirty();
     }
     onOneOfChange() {
-        if (!this.activeVariant) {
+        if (!this.activeVariant)
             return;
-        }
         this.replaceControl(this.schemaService.buildControl(this.activeVariant, this.control.value, this.required));
     }
     toggleAnyOf(index) {
-        if (this.selectedAnyOf.has(index)) {
+        if (this.selectedAnyOf.has(index))
             this.selectedAnyOf.delete(index);
-        }
-        else {
+        else
             this.selectedAnyOf.add(index);
-        }
         const variant = this.activeVariant;
-        if (variant) {
+        if (variant)
             this.replaceControl(this.schemaService.buildControl(variant, this.control.value, this.required));
-        }
     }
     replaceControl(control) {
         if (this.parent) {
-            if (this.parent instanceof FormGroup && typeof this.controlKey === 'string') {
+            if (this.parent instanceof FormGroup && typeof this.controlKey === 'string')
                 this.parent.setControl(this.controlKey, control);
-            }
-            if (this.parent instanceof FormArray && typeof this.controlKey === 'number') {
+            if (this.parent instanceof FormArray && typeof this.controlKey === 'number')
                 this.parent.setControl(this.controlKey, control);
-            }
             this.control = control;
             return;
         }
         this.control = control;
         this.controlReplaced.emit(control);
     }
-    childControl(key) {
-        return this.controlAsGroup.get(key);
-    }
+    childControl(key) { return this.controlAsGroup.get(key); }
     get effectiveSchema() {
         let schema = this.schema;
-        if (schema.allOf?.length) {
+        if (schema.allOf?.length)
             schema = this.mergeSchemas([schema, ...schema.allOf]);
-        }
         schema = this.applyConditional(schema);
         schema = this.applyDependencies(schema);
         return schema;
     }
     applyConditional(schema) {
-        if (!schema.if) {
+        if (!schema.if)
             return schema;
-        }
         const errors = this.validation.validate(schema.if, this.control.value);
         const branch = errors.length === 0 ? schema.then : schema.else;
-        if (!branch) {
+        if (!branch)
             return schema;
-        }
         return this.mergeSchemas([schema, branch]);
     }
     applyDependencies(schema) {
         const value = this.control.value;
-        if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        if (!value || typeof value !== 'object' || Array.isArray(value))
             return schema;
-        }
         let merged = { ...schema };
         const valueKeys = Object.keys(value);
         if (schema.dependentRequired) {
             for (const key of valueKeys) {
                 const required = schema.dependentRequired[key];
-                if (required?.length) {
+                if (required?.length)
                     merged = this.mergeSchemas([merged, { required }]);
-                }
             }
         }
         if (schema.dependentSchemas) {
             for (const key of valueKeys) {
                 const depSchema = schema.dependentSchemas[key];
-                if (depSchema) {
+                if (depSchema)
                     merged = this.mergeSchemas([merged, depSchema]);
-                }
             }
         }
         if (schema.dependencies) {
             for (const key of valueKeys) {
                 const dep = schema.dependencies[key];
-                if (Array.isArray(dep)) {
+                if (Array.isArray(dep))
                     merged = this.mergeSchemas([merged, { required: dep }]);
-                }
-                else if (dep) {
+                else if (dep)
                     merged = this.mergeSchemas([merged, dep]);
-                }
             }
         }
         return merged;
@@ -877,306 +871,377 @@ class JsonSchemaNodeComponent {
         }, {});
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaNodeComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaValidationService }], 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" }, outputs: { controlReplaced: "controlReplaced" }, ngImport: i0, template: `
-    <ng-container [ngSwitch]="nodeKind">
-      <div *ngSwitchCase="'oneOf'" class="space-y-3">
-        <div class="flex items-center justify-between">
-          <div>
-            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
-            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
-          </div>
-          <span class="text-xs text-slate-400">oneOf</span>
-        </div>
-
-        <select
-          class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900"
-          [(ngModel)]="selectedOneOf"
-          (ngModelChange)="onOneOfChange()"
-        >
-          <option *ngFor="let option of schema.oneOf; let i = index" [ngValue]="i">
-            {{ option.title || ('Option ' + (i + 1)) }}
-          </option>
-        </select>
-
-        <jsm-schema-node
-          *ngIf="activeVariant"
-          [schema]="activeVariant"
-          [control]="control"
-          [parent]="parent"
-          [controlKey]="controlKey"
-          [path]="path"
-          [errorsMap]="errorsMap"
-          [label]="label"
-          [required]="required"
-          (controlReplaced)="controlReplaced.emit($event)"
-        ></jsm-schema-node>
-      </div>
-
-      <div *ngSwitchCase="'anyOf'" class="space-y-3">
-        <div class="flex items-center justify-between">
-          <div>
-            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
-            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
-          </div>
-          <span class="text-xs text-slate-400">anyOf</span>
-        </div>
-
-        <div class="flex flex-col gap-2">
-          <label
-            *ngFor="let option of schema.anyOf; let i = index"
-            class="inline-flex items-center gap-2 text-sm text-slate-700"
-          >
-            <input
-              type="checkbox"
-              class="h-4 w-4 rounded border-slate-300 text-slate-900"
-              [checked]="selectedAnyOf.has(i)"
-              (change)="toggleAnyOf(i)"
-            />
-            {{ option.title || ('Option ' + (i + 1)) }}
-          </label>
-        </div>
-
-        <jsm-schema-node
-          *ngIf="activeVariant"
-          [schema]="activeVariant"
-          [control]="control"
-          [parent]="parent"
-          [controlKey]="controlKey"
-          [path]="path"
-          [errorsMap]="errorsMap"
-          [label]="label"
-          [required]="required"
-          (controlReplaced)="controlReplaced.emit($event)"
-        ></jsm-schema-node>
-      </div>
-
-      <div *ngSwitchCase="'allOf'" class="space-y-4">
-        <div class="flex items-center justify-between">
-          <div>
-            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
-            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
-          </div>
-          <span class="text-xs text-slate-400">allOf</span>
-        </div>
-
-        <div *ngFor="let subSchema of mergedAllOf; let i = index" class="rounded-xl border border-slate-200 p-3">
-          <jsm-schema-node
-            [schema]="subSchema"
-            [control]="control"
-            [parent]="parent"
-            [controlKey]="controlKey"
-            [path]="path"
-            [errorsMap]="errorsMap"
-            [label]="subSchema.title || ('Section ' + (i + 1))"
-            [required]="required"
-            (controlReplaced)="controlReplaced.emit($event)"
-          ></jsm-schema-node>
-        </div>
-      </div>
-
-      <fieldset *ngSwitchCase="'object'" class="group border border-slate-200 rounded-2xl p-4 bg-white/70 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
-        <legend class="px-2 text-sm font-semibold text-slate-700">{{ schema.title || label }}</legend>
-        <p *ngIf="schema.description" class="text-xs text-slate-500 mb-4">{{ schema.description }}</p>
-        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2 mb-4">
-          <span
-            *ngFor="let badge of metaBadges"
-            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
-          >
-            {{ badge }}
-          </span>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4" [formGroup]="controlAsGroup">
-          <ng-container *ngFor="let key of objectKeys">
-            <div class="flex flex-col gap-2">
-              <div class="flex items-center justify-between" *ngIf="isDynamicKey(key)">
-                <span class="text-xs font-semibold text-slate-500">{{ key }}</span>
-                <button
-                  type="button"
-                  class="text-xs font-semibold text-rose-600 transition hover:text-rose-700"
-                  (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)"
-                (controlReplaced)="controlReplaced.emit($event)"
-              ></jsm-schema-node>
-            </div>
-          </ng-container>
-        </div>
-
-        <div class="mt-4 space-y-2" *ngIf="canAddProperty">
-          <div class="text-xs font-semibold text-slate-500">Add property</div>
-          <div class="flex flex-col md:flex-row gap-2">
-            <input
-              class="flex-1 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
-              [(ngModel)]="newPropertyKey"
-              placeholder="propertyName"
-            />
-            <button
-              type="button"
-              class="px-3 py-2 rounded-lg text-sm font-medium bg-slate-900 text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-slate-800 hover:shadow-md"
-              (click)="addDynamicProperty()"
-            >
-              Add
-            </button>
-          </div>
-          <div *ngIf="propertyError" class="text-xs text-rose-600">{{ propertyError }}</div>
-        </div>
-
-        <div *ngIf="errorsForPath.length" class="mt-3 text-xs text-rose-600 space-y-1">
-          <div *ngFor="let error of errorsForPath">{{ error }}</div>
-        </div>
-      </fieldset>
-
-      <div *ngSwitchCase="'array'" class="space-y-3">
-        <div class="flex items-center justify-between">
-          <div>
-            <div class="text-sm font-semibold text-slate-700">{{ schema.title || label }}</div>
-            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
-          </div>
-          <button
-            type="button"
-            class="px-3 py-1.5 rounded-full text-sm font-medium bg-slate-900 text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-slate-800 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
-            (click)="addArrayItem()"
-            [disabled]="!canAddArrayItem"
-          >
-            Add
-          </button>
-        </div>
-
-        <div class="text-xs text-slate-500" *ngIf="effectiveSchema.contains">
-          Must contain item(s) that match the contains schema.
-          <span *ngIf="effectiveSchema.minContains">Min: {{ effectiveSchema.minContains }}</span>
-          <span *ngIf="effectiveSchema.maxContains">Max: {{ effectiveSchema.maxContains }}</span>
-        </div>
-
-        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2">
-          <span
-            *ngFor="let badge of metaBadges"
-            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
-          >
-            {{ badge }}
-          </span>
-        </div>
-
-        <div class="space-y-3" *ngIf="arrayControls.length > 0; else emptyArray">
-          <div
-            *ngFor="let item of arrayControls; let i = index"
-            class="rounded-2xl border border-slate-200 p-3 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md"
-          >
-            <div class="flex items-center justify-between mb-2">
-              <span class="text-xs font-semibold text-slate-500">Item {{ i + 1 }}</span>
-              <button
-                type="button"
-                class="text-xs font-semibold text-rose-600 transition hover:text-rose-700"
-                (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'"
-              (controlReplaced)="controlReplaced.emit($event)"
-            ></jsm-schema-node>
-          </div>
-        </div>
-
-        <ng-template #emptyArray>
-          <div class="text-xs text-slate-400 italic">No items yet.</div>
-        </ng-template>
-
-        <div *ngIf="errorsForPath.length" class="text-xs text-rose-600 space-y-1">
-          <div *ngFor="let error of errorsForPath">{{ error }}</div>
-        </div>
-      </div>
-
-      <div *ngSwitchDefault class="space-y-2">
-        <ng-container *ngIf="inputKind !== 'checkbox'">
-          <label class="text-sm font-medium text-slate-700">
-            {{ schema.title || label }}
-            <span *ngIf="required" class="text-rose-500">*</span>
-          </label>
-          <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
-        </ng-container>
-
-        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2">
-          <span
-            *ngFor="let badge of metaBadges"
-            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
-          >
-            {{ badge }}
-          </span>
-        </div>
-
-        <ng-container [ngSwitch]="inputKind">
-          <input
-            *ngSwitchCase="'text'"
-            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
-            [attr.type]="inputType"
-            [attr.placeholder]="schema.title || label"
-            [formControl]="controlAsFormControl"
-          />
-
-          <textarea
-            *ngSwitchCase="'textarea'"
-            rows="4"
-            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
-            [attr.placeholder]="schema.title || label"
-            [formControl]="controlAsFormControl"
-          ></textarea>
-
-          <select
-            *ngSwitchCase="'select'"
-            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
-            [formControl]="controlAsFormControl"
-          >
-            <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
-          </select>
-
-          <label *ngSwitchCase="'checkbox'" class="inline-flex items-center gap-2 text-sm text-slate-700">
-            <input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-slate-900 transition" [formControl]="controlAsFormControl" />
-            <span>
-              {{ schema.title || label }}
-              <span *ngIf="required" class="text-rose-500">*</span>
-            </span>
-          </label>
-        </ng-container>
-
-        <p *ngIf="inputKind === 'checkbox' && schema.description" class="text-xs text-slate-500">
-          {{ schema.description }}
-        </p>
-
-        <div *ngIf="effectiveSchema.examples?.length" class="text-xs text-slate-400">
-          Example: {{ effectiveSchema.examples?.[0] }}
-        </div>
-
-        <div *ngIf="effectiveSchema.contentMediaType" class="text-xs text-slate-400">
-          Content type: {{ effectiveSchema.contentMediaType }}
-          <span *ngIf="effectiveSchema.contentEncoding">({{ effectiveSchema.contentEncoding }})</span>
-        </div>
-
-        <div *ngIf="errorsForPath.length" class="text-xs text-rose-600 space-y-1">
-          <div *ngFor="let error of errorsForPath">{{ error }}</div>
-        </div>
-      </div>
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey"], outputs: ["controlReplaced"] }, { 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: "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 });
+    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 — tab bar: ogni opzione è una tab, nessuna icona
+           ═══════════════════════════════════════════════════════════ -->
+      <div *ngSwitchCase="'oneOf'" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
+        <div class="flex items-start justify-between px-4 py-3 bg-slate-50 dark:bg-slate-800/60 border-b border-slate-200 dark:border-slate-700">
+          <div>
+            <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ schema.description }}</p>
+          </div>
+          <span class="ml-3 shrink-0 rounded-full bg-blue-100 dark:bg-blue-900/40 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-blue-700 dark:text-blue-400">oneOf</span>
+        </div>
+        <div class="flex overflow-x-auto border-b border-slate-200 dark:border-slate-700">
+          <button
+            *ngFor="let option of schema.oneOf; let i = index"
+            type="button"
+            class="px-4 py-2.5 text-xs font-medium whitespace-nowrap border-b-2 transition-colors"
+            [class.border-indigo-500]="selectedOneOf === i"
+            [class.text-indigo-600]="selectedOneOf === i"
+            [class.dark:text-indigo-400]="selectedOneOf === i"
+            [class.font-semibold]="selectedOneOf === i"
+            [class.border-transparent]="selectedOneOf !== i"
+            [class.text-slate-500]="selectedOneOf !== i"
+            [class.dark:text-slate-400]="selectedOneOf !== i"
+            (click)="selectedOneOf = i; onOneOfChange()"
+          >{{ option.title || ('Option ' + (i + 1)) }}</button>
+        </div>
+        <div class="p-4" *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 — pill toggle, nessuna icona
+           ═══════════════════════════════════════════════════════════ -->
+      <div *ngSwitchCase="'anyOf'" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
+        <div class="flex items-start justify-between px-4 py-3 bg-slate-50 dark:bg-slate-800/60 border-b border-slate-200 dark:border-slate-700">
+          <div>
+            <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ schema.description }}</p>
+          </div>
+          <span class="ml-3 shrink-0 rounded-full bg-violet-100 dark:bg-violet-900/40 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-violet-700 dark:text-violet-400">anyOf</span>
+        </div>
+        <div class="flex flex-wrap gap-2 px-4 py-3 border-b border-slate-200 dark:border-slate-700">
+          <label
+            *ngFor="let option of schema.anyOf; let i = index"
+            class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium cursor-pointer transition-colors select-none"
+            [class.border-indigo-400]="selectedAnyOf.has(i)"
+            [class.bg-indigo-50]="selectedAnyOf.has(i)"
+            [class.dark:bg-indigo-900/30]="selectedAnyOf.has(i)"
+            [class.text-indigo-700]="selectedAnyOf.has(i)"
+            [class.dark:text-indigo-400]="selectedAnyOf.has(i)"
+            [class.border-slate-200]="!selectedAnyOf.has(i)"
+            [class.dark:border-slate-600]="!selectedAnyOf.has(i)"
+            [class.text-slate-600]="!selectedAnyOf.has(i)"
+            [class.dark:text-slate-400]="!selectedAnyOf.has(i)"
+          >
+            <input type="checkbox" class="h-3.5 w-3.5 accent-indigo-600" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </label>
+        </div>
+        <div class="p-4" *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 — sezioni in colonna con bordo sinistro
+           ═══════════════════════════════════════════════════════════ -->
+      <div *ngSwitchCase="'allOf'" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
+        <div class="flex items-start justify-between px-4 py-3 bg-slate-50 dark:bg-slate-800/60 border-b border-slate-200 dark:border-slate-700">
+          <div>
+            <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ schema.description }}</p>
+          </div>
+          <span class="ml-3 shrink-0 rounded-full bg-teal-100 dark:bg-teal-900/40 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-teal-700 dark:text-teal-400">allOf</span>
+        </div>
+        <div class="p-4 space-y-4">
+          <div *ngFor="let subSchema of mergedAllOf; let i = index" class="border-l-2 border-indigo-200 dark:border-indigo-700 pl-4">
+            <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 con griglia SOLO per campi primitivi.
+           Logica layout:
+           - I figli vengono classificati come "semplici" (primitive/enum/bool)
+             o "complessi" (object/array/oneOf/anyOf/allOf).
+           - I semplici vanno in griglia 2 colonne (sm:grid-cols-2).
+           - I complessi vanno sempre in colonna piena (col-span-2).
+           ═══════════════════════════════════════════════════════════ -->
+      <fieldset *ngSwitchCase="'object'" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-4 transition-shadow focus-within:border-indigo-300 dark:focus-within:border-indigo-600 focus-within:ring-2 focus-within:ring-indigo-100 dark:focus-within:ring-indigo-900/40">
+        <legend class="px-2 text-sm font-bold text-slate-800 dark:text-slate-200">{{ schema.title || label }}</legend>
+
+        <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 mb-3 mt-1">{{ schema.description }}</p>
+
+        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-1.5 mb-3">
+          <span *ngFor="let badge of metaBadges"
+            class="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+            [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <!-- campi semplici (string/number/bool/enum) → griglia 2 colonne -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4" [formGroup]="controlAsGroup">
+          <ng-container *ngFor="let key of simpleKeys">
+            <div class="flex flex-col gap-1">
+              <div *ngIf="isDynamicKey(key)"
+                class="flex items-center justify-between rounded-md border border-dashed border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/50 px-2 py-1 mb-1">
+                <span class="font-mono text-xs text-slate-500 dark:text-slate-400">{{ key }}</span>
+                <button type="button"
+                  class="rounded px-1.5 py-0.5 text-xs font-semibold text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                  (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>
+
+        <!-- campi complessi (object/array/combinator) → colonna piena -->
+        <div class="space-y-4 mt-4" *ngIf="complexKeys.length > 0" [formGroup]="controlAsGroup">
+          <ng-container *ngFor="let key of complexKeys">
+            <div class="flex flex-col gap-1">
+              <div *ngIf="isDynamicKey(key)"
+                class="flex items-center justify-between rounded-md border border-dashed border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/50 px-2 py-1 mb-1">
+                <span class="font-mono text-xs text-slate-500 dark:text-slate-400">{{ key }}</span>
+                <button type="button"
+                  class="rounded px-1.5 py-0.5 text-xs font-semibold text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                  (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>
+
+        <!-- add dynamic property -->
+        <div *ngIf="canAddProperty" class="mt-4 rounded-lg border border-dashed border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/40 p-3 space-y-2">
+          <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500">Add property</p>
+          <div class="flex gap-2">
+            <input
+              class="flex-1 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 px-3 py-1.5 text-sm shadow-sm outline-none transition hover:border-slate-400 dark:hover:border-slate-500 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 dark:focus:ring-indigo-900/40"
+              [(ngModel)]="newPropertyKey" placeholder="propertyName" />
+            <button type="button"
+              class="rounded-lg bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 active:scale-95"
+              (click)="addDynamicProperty()">Add</button>
+          </div>
+          <p *ngIf="propertyError" class="flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
+            <!-- icona errore: unico caso in cui ha senso, segnala un problema -->
+            <svg class="w-3.5 h-3.5 shrink-0" 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="mt-3 space-y-1">
+          <p *ngFor="let error of errorsForPath" class="flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
+            <svg class="w-3.5 h-3.5 shrink-0" 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 — sempre in colonna piena, items in colonna
+           ═══════════════════════════════════════════════════════════ -->
+      <div *ngSwitchCase="'array'" class="space-y-3">
+        <div class="flex items-start justify-between gap-2">
+          <div>
+            <p class="text-sm font-semibold text-slate-800">
+              {{ schema.title || label }}<span *ngIf="required" class="ml-0.5 text-red-500">*</span>
+            </p>
+            <p *ngIf="schema.description" class="text-xs text-slate-500 mt-0.5">{{ schema.description }}</p>
+          </div>
+          <!-- icona + nel bottone: indica l'azione "aggiungi", non decorativa -->
+          <button type="button"
+            class="shrink-0 flex items-center gap-1 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-indigo-700 active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed"
+            (click)="addArrayItem()" [disabled]="!canAddArrayItem">
+            <svg class="w-3.5 h-3.5" 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="rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-3 py-1.5 text-xs text-indigo-700 dark:text-indigo-400">
+          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="flex flex-wrap gap-1.5">
+          <span *ngFor="let badge of metaBadges"
+            class="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+            [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <div class="space-y-2" *ngIf="arrayControls.length > 0; else emptyArray">
+          <div *ngFor="let item of arrayControls; let i = index"
+            class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-3 shadow-sm transition focus-within:border-indigo-300 dark:focus-within:border-indigo-600 focus-within:ring-2 focus-within:ring-indigo-100 dark:focus-within:ring-indigo-900/40">
+            <div class="flex items-center justify-between mb-3">
+              <span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-[11px] font-bold text-indigo-600 dark:text-indigo-400">{{ i + 1 }}</span>
+              <button type="button"
+                class="rounded-md border border-red-200 dark:border-red-800 px-2 py-0.5 text-xs font-semibold text-red-600 dark:text-red-400 transition hover:bg-red-50 dark:hover:bg-red-900/20"
+                (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="flex flex-col items-center gap-2 rounded-xl border border-dashed border-slate-200 dark:border-slate-700 py-8 text-slate-400 dark:text-slate-500 text-xs">
+            No items yet — click "Add item" to start.
+          </div>
+        </ng-template>
+
+        <div *ngIf="errorsForPath.length" class="space-y-1">
+          <p *ngFor="let error of errorsForPath" class="flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
+            <svg class="w-3.5 h-3.5 shrink-0" 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 — sempre in colonna, nessuna icona decorativa.
+           Icona errore solo nei messaggi di validazione.
+           Icona chevron nel select: funzionale (indica dropdown).
+           ═══════════════════════════════════════════════════════════ -->
+      <div *ngSwitchDefault class="space-y-1.5">
+        <ng-container *ngIf="inputKind !== 'checkbox'">
+          <label class="block text-[13px] font-semibold text-slate-700 dark:text-slate-300">
+            {{ schema.title || label }}<span *ngIf="required" class="ml-0.5 text-red-500">*</span>
+          </label>
+          <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 -mt-0.5">{{ schema.description }}</p>
+        </ng-container>
+
+        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-1.5">
+          <span *ngFor="let badge of metaBadges"
+            class="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+            [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <ng-container [ngSwitch]="inputKind">
+
+          <input *ngSwitchCase="'text'"
+            class="w-full rounded-lg border bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm shadow-sm outline-none transition hover:border-slate-400 dark:hover:border-slate-500 focus:ring-2"
+            [class.border-slate-300]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.dark:border-slate-600]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.focus:border-indigo-400]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.focus:ring-indigo-100]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.dark:focus:ring-indigo-900/40]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.border-red-300]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.dark:border-red-700]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.bg-red-50]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.dark:bg-red-900/20]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.focus:border-red-400]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.focus:ring-red-100]="errorsForPath.length && controlAsFormControl.dirty"
+            [attr.type]="inputType"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+          />
+
+          <textarea *ngSwitchCase="'textarea'" rows="4"
+            class="w-full resize-y rounded-lg border bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm shadow-sm outline-none transition hover:border-slate-400 dark:hover:border-slate-500 focus:ring-2"
+            [class.border-slate-300]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.dark:border-slate-600]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.focus:border-indigo-400]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.focus:ring-indigo-100]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.dark:focus:ring-indigo-900/40]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.border-red-300]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.dark:border-red-700]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.bg-red-50]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.dark:bg-red-900/20]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.focus:border-red-400]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.focus:ring-red-100]="errorsForPath.length && controlAsFormControl.dirty"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+          ></textarea>
+
+          <!-- select: il chevron SVG è funzionale, indica che è un dropdown -->
+          <div *ngSwitchCase="'select'" class="relative">
+            <select
+              class="w-full appearance-none rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 px-3 py-2 pr-8 text-sm shadow-sm outline-none transition hover:border-slate-400 dark:hover:border-slate-500 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 dark:focus:ring-indigo-900/40"
+              [class.border-red-300]="errorsForPath.length && controlAsFormControl.dirty"
+              [class.dark:border-red-700]="errorsForPath.length && controlAsFormControl.dirty"
+              [class.bg-red-50]="errorsForPath.length && controlAsFormControl.dirty"
+              [class.dark:bg-red-900/20]="errorsForPath.length && controlAsFormControl.dirty"
+              [formControl]="controlAsFormControl">
+              <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
+            </select>
+            <svg class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-slate-500"
+              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>
+
+          <!-- checkbox come toggle switch -->
+          <label *ngSwitchCase="'checkbox'" class="inline-flex cursor-pointer items-center gap-2.5">
+            <span class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors"
+              [class.bg-indigo-600]="controlAsFormControl.value"
+              [class.bg-slate-300]="!controlAsFormControl.value"
+              [class.dark:bg-slate-600]="!controlAsFormControl.value">
+              <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
+              <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
+                [class.translate-x-4]="controlAsFormControl.value"
+                [class.translate-x-0.5]="!controlAsFormControl.value"></span>
+            </span>
+            <span class="text-sm font-medium text-slate-700 dark:text-slate-300">
+              {{ schema.title || label }}<span *ngIf="required" class="ml-0.5 text-red-500">*</span>
+            </span>
+          </label>
+
+        </ng-container>
+
+        <p *ngIf="inputKind === 'checkbox' && schema.description" class="text-xs text-slate-500 dark:text-slate-400">{{ schema.description }}</p>
+
+        <p *ngIf="effectiveSchema.examples?.length" class="text-[11px] text-slate-400 dark:text-slate-500">
+          e.g. {{ effectiveSchema.examples?.[0] }}
+        </p>
+
+        <p *ngIf="effectiveSchema.contentMediaType" class="text-[11px] text-slate-400 dark:text-slate-500">
+          {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
+        </p>
+
+        <!-- icona errore: funzionale, segnala un problema di validazione -->
+        <div *ngIf="errorsForPath.length && controlAsFormControl.dirty" class="space-y-1 pt-0.5">
+          <p *ngFor="let error of errorsForPath" class="flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
+            <svg class="w-3.5 h-3.5 shrink-0" 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, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaNodeComponent, decorators: [{
             type: Component,
@@ -1184,305 +1249,377 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     selector: 'jsm-schema-node',
                     standalone: true,
                     imports: [CommonModule, FormsModule, ReactiveFormsModule],
-                    template: `
-    <ng-container [ngSwitch]="nodeKind">
-      <div *ngSwitchCase="'oneOf'" class="space-y-3">
-        <div class="flex items-center justify-between">
-          <div>
-            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
-            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
-          </div>
-          <span class="text-xs text-slate-400">oneOf</span>
-        </div>
-
-        <select
-          class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-slate-900"
-          [(ngModel)]="selectedOneOf"
-          (ngModelChange)="onOneOfChange()"
-        >
-          <option *ngFor="let option of schema.oneOf; let i = index" [ngValue]="i">
-            {{ option.title || ('Option ' + (i + 1)) }}
-          </option>
-        </select>
-
-        <jsm-schema-node
-          *ngIf="activeVariant"
-          [schema]="activeVariant"
-          [control]="control"
-          [parent]="parent"
-          [controlKey]="controlKey"
-          [path]="path"
-          [errorsMap]="errorsMap"
-          [label]="label"
-          [required]="required"
-          (controlReplaced)="controlReplaced.emit($event)"
-        ></jsm-schema-node>
-      </div>
-
-      <div *ngSwitchCase="'anyOf'" class="space-y-3">
-        <div class="flex items-center justify-between">
-          <div>
-            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
-            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
-          </div>
-          <span class="text-xs text-slate-400">anyOf</span>
-        </div>
-
-        <div class="flex flex-col gap-2">
-          <label
-            *ngFor="let option of schema.anyOf; let i = index"
-            class="inline-flex items-center gap-2 text-sm text-slate-700"
-          >
-            <input
-              type="checkbox"
-              class="h-4 w-4 rounded border-slate-300 text-slate-900"
-              [checked]="selectedAnyOf.has(i)"
-              (change)="toggleAnyOf(i)"
-            />
-            {{ option.title || ('Option ' + (i + 1)) }}
-          </label>
-        </div>
-
-        <jsm-schema-node
-          *ngIf="activeVariant"
-          [schema]="activeVariant"
-          [control]="control"
-          [parent]="parent"
-          [controlKey]="controlKey"
-          [path]="path"
-          [errorsMap]="errorsMap"
-          [label]="label"
-          [required]="required"
-          (controlReplaced)="controlReplaced.emit($event)"
-        ></jsm-schema-node>
-      </div>
-
-      <div *ngSwitchCase="'allOf'" class="space-y-4">
-        <div class="flex items-center justify-between">
-          <div>
-            <div class="text-sm font-semibold text-slate-800">{{ schema.title || label }}</div>
-            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
-          </div>
-          <span class="text-xs text-slate-400">allOf</span>
-        </div>
-
-        <div *ngFor="let subSchema of mergedAllOf; let i = index" class="rounded-xl border border-slate-200 p-3">
-          <jsm-schema-node
-            [schema]="subSchema"
-            [control]="control"
-            [parent]="parent"
-            [controlKey]="controlKey"
-            [path]="path"
-            [errorsMap]="errorsMap"
-            [label]="subSchema.title || ('Section ' + (i + 1))"
-            [required]="required"
-            (controlReplaced)="controlReplaced.emit($event)"
-          ></jsm-schema-node>
-        </div>
-      </div>
-
-      <fieldset *ngSwitchCase="'object'" class="group border border-slate-200 rounded-2xl p-4 bg-white/70 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
-        <legend class="px-2 text-sm font-semibold text-slate-700">{{ schema.title || label }}</legend>
-        <p *ngIf="schema.description" class="text-xs text-slate-500 mb-4">{{ schema.description }}</p>
-        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2 mb-4">
-          <span
-            *ngFor="let badge of metaBadges"
-            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
-          >
-            {{ badge }}
-          </span>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4" [formGroup]="controlAsGroup">
-          <ng-container *ngFor="let key of objectKeys">
-            <div class="flex flex-col gap-2">
-              <div class="flex items-center justify-between" *ngIf="isDynamicKey(key)">
-                <span class="text-xs font-semibold text-slate-500">{{ key }}</span>
-                <button
-                  type="button"
-                  class="text-xs font-semibold text-rose-600 transition hover:text-rose-700"
-                  (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)"
-                (controlReplaced)="controlReplaced.emit($event)"
-              ></jsm-schema-node>
-            </div>
-          </ng-container>
-        </div>
-
-        <div class="mt-4 space-y-2" *ngIf="canAddProperty">
-          <div class="text-xs font-semibold text-slate-500">Add property</div>
-          <div class="flex flex-col md:flex-row gap-2">
-            <input
-              class="flex-1 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
-              [(ngModel)]="newPropertyKey"
-              placeholder="propertyName"
-            />
-            <button
-              type="button"
-              class="px-3 py-2 rounded-lg text-sm font-medium bg-slate-900 text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-slate-800 hover:shadow-md"
-              (click)="addDynamicProperty()"
-            >
-              Add
-            </button>
-          </div>
-          <div *ngIf="propertyError" class="text-xs text-rose-600">{{ propertyError }}</div>
-        </div>
-
-        <div *ngIf="errorsForPath.length" class="mt-3 text-xs text-rose-600 space-y-1">
-          <div *ngFor="let error of errorsForPath">{{ error }}</div>
-        </div>
-      </fieldset>
-
-      <div *ngSwitchCase="'array'" class="space-y-3">
-        <div class="flex items-center justify-between">
-          <div>
-            <div class="text-sm font-semibold text-slate-700">{{ schema.title || label }}</div>
-            <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
-          </div>
-          <button
-            type="button"
-            class="px-3 py-1.5 rounded-full text-sm font-medium bg-slate-900 text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-slate-800 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
-            (click)="addArrayItem()"
-            [disabled]="!canAddArrayItem"
-          >
-            Add
-          </button>
-        </div>
-
-        <div class="text-xs text-slate-500" *ngIf="effectiveSchema.contains">
-          Must contain item(s) that match the contains schema.
-          <span *ngIf="effectiveSchema.minContains">Min: {{ effectiveSchema.minContains }}</span>
-          <span *ngIf="effectiveSchema.maxContains">Max: {{ effectiveSchema.maxContains }}</span>
-        </div>
-
-        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2">
-          <span
-            *ngFor="let badge of metaBadges"
-            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
-          >
-            {{ badge }}
-          </span>
-        </div>
-
-        <div class="space-y-3" *ngIf="arrayControls.length > 0; else emptyArray">
-          <div
-            *ngFor="let item of arrayControls; let i = index"
-            class="rounded-2xl border border-slate-200 p-3 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-md"
-          >
-            <div class="flex items-center justify-between mb-2">
-              <span class="text-xs font-semibold text-slate-500">Item {{ i + 1 }}</span>
-              <button
-                type="button"
-                class="text-xs font-semibold text-rose-600 transition hover:text-rose-700"
-                (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'"
-              (controlReplaced)="controlReplaced.emit($event)"
-            ></jsm-schema-node>
-          </div>
-        </div>
-
-        <ng-template #emptyArray>
-          <div class="text-xs text-slate-400 italic">No items yet.</div>
-        </ng-template>
-
-        <div *ngIf="errorsForPath.length" class="text-xs text-rose-600 space-y-1">
-          <div *ngFor="let error of errorsForPath">{{ error }}</div>
-        </div>
-      </div>
-
-      <div *ngSwitchDefault class="space-y-2">
-        <ng-container *ngIf="inputKind !== 'checkbox'">
-          <label class="text-sm font-medium text-slate-700">
-            {{ schema.title || label }}
-            <span *ngIf="required" class="text-rose-500">*</span>
-          </label>
-          <p *ngIf="schema.description" class="text-xs text-slate-500">{{ schema.description }}</p>
-        </ng-container>
-
-        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-2">
-          <span
-            *ngFor="let badge of metaBadges"
-            class="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-semibold text-slate-600"
-          >
-            {{ badge }}
-          </span>
-        </div>
-
-        <ng-container [ngSwitch]="inputKind">
-          <input
-            *ngSwitchCase="'text'"
-            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
-            [attr.type]="inputType"
-            [attr.placeholder]="schema.title || label"
-            [formControl]="controlAsFormControl"
-          />
-
-          <textarea
-            *ngSwitchCase="'textarea'"
-            rows="4"
-            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
-            [attr.placeholder]="schema.title || label"
-            [formControl]="controlAsFormControl"
-          ></textarea>
-
-          <select
-            *ngSwitchCase="'select'"
-            class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-900 hover:border-slate-400"
-            [formControl]="controlAsFormControl"
-          >
-            <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
-          </select>
-
-          <label *ngSwitchCase="'checkbox'" class="inline-flex items-center gap-2 text-sm text-slate-700">
-            <input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-slate-900 transition" [formControl]="controlAsFormControl" />
-            <span>
-              {{ schema.title || label }}
-              <span *ngIf="required" class="text-rose-500">*</span>
-            </span>
-          </label>
-        </ng-container>
-
-        <p *ngIf="inputKind === 'checkbox' && schema.description" class="text-xs text-slate-500">
-          {{ schema.description }}
-        </p>
-
-        <div *ngIf="effectiveSchema.examples?.length" class="text-xs text-slate-400">
-          Example: {{ effectiveSchema.examples?.[0] }}
-        </div>
-
-        <div *ngIf="effectiveSchema.contentMediaType" class="text-xs text-slate-400">
-          Content type: {{ effectiveSchema.contentMediaType }}
-          <span *ngIf="effectiveSchema.contentEncoding">({{ effectiveSchema.contentEncoding }})</span>
-        </div>
-
-        <div *ngIf="errorsForPath.length" class="text-xs text-rose-600 space-y-1">
-          <div *ngFor="let error of errorsForPath">{{ error }}</div>
-        </div>
-      </div>
-    </ng-container>
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    <ng-container [ngSwitch]="nodeKind">
+
+      <!-- ═══════════════════════════════════════════════════════════
+           oneOf — tab bar: ogni opzione è una tab, nessuna icona
+           ═══════════════════════════════════════════════════════════ -->
+      <div *ngSwitchCase="'oneOf'" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
+        <div class="flex items-start justify-between px-4 py-3 bg-slate-50 dark:bg-slate-800/60 border-b border-slate-200 dark:border-slate-700">
+          <div>
+            <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ schema.description }}</p>
+          </div>
+          <span class="ml-3 shrink-0 rounded-full bg-blue-100 dark:bg-blue-900/40 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-blue-700 dark:text-blue-400">oneOf</span>
+        </div>
+        <div class="flex overflow-x-auto border-b border-slate-200 dark:border-slate-700">
+          <button
+            *ngFor="let option of schema.oneOf; let i = index"
+            type="button"
+            class="px-4 py-2.5 text-xs font-medium whitespace-nowrap border-b-2 transition-colors"
+            [class.border-indigo-500]="selectedOneOf === i"
+            [class.text-indigo-600]="selectedOneOf === i"
+            [class.dark:text-indigo-400]="selectedOneOf === i"
+            [class.font-semibold]="selectedOneOf === i"
+            [class.border-transparent]="selectedOneOf !== i"
+            [class.text-slate-500]="selectedOneOf !== i"
+            [class.dark:text-slate-400]="selectedOneOf !== i"
+            (click)="selectedOneOf = i; onOneOfChange()"
+          >{{ option.title || ('Option ' + (i + 1)) }}</button>
+        </div>
+        <div class="p-4" *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 — pill toggle, nessuna icona
+           ═══════════════════════════════════════════════════════════ -->
+      <div *ngSwitchCase="'anyOf'" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
+        <div class="flex items-start justify-between px-4 py-3 bg-slate-50 dark:bg-slate-800/60 border-b border-slate-200 dark:border-slate-700">
+          <div>
+            <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ schema.description }}</p>
+          </div>
+          <span class="ml-3 shrink-0 rounded-full bg-violet-100 dark:bg-violet-900/40 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-violet-700 dark:text-violet-400">anyOf</span>
+        </div>
+        <div class="flex flex-wrap gap-2 px-4 py-3 border-b border-slate-200 dark:border-slate-700">
+          <label
+            *ngFor="let option of schema.anyOf; let i = index"
+            class="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium cursor-pointer transition-colors select-none"
+            [class.border-indigo-400]="selectedAnyOf.has(i)"
+            [class.bg-indigo-50]="selectedAnyOf.has(i)"
+            [class.dark:bg-indigo-900/30]="selectedAnyOf.has(i)"
+            [class.text-indigo-700]="selectedAnyOf.has(i)"
+            [class.dark:text-indigo-400]="selectedAnyOf.has(i)"
+            [class.border-slate-200]="!selectedAnyOf.has(i)"
+            [class.dark:border-slate-600]="!selectedAnyOf.has(i)"
+            [class.text-slate-600]="!selectedAnyOf.has(i)"
+            [class.dark:text-slate-400]="!selectedAnyOf.has(i)"
+          >
+            <input type="checkbox" class="h-3.5 w-3.5 accent-indigo-600" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </label>
+        </div>
+        <div class="p-4" *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 — sezioni in colonna con bordo sinistro
+           ═══════════════════════════════════════════════════════════ -->
+      <div *ngSwitchCase="'allOf'" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
+        <div class="flex items-start justify-between px-4 py-3 bg-slate-50 dark:bg-slate-800/60 border-b border-slate-200 dark:border-slate-700">
+          <div>
+            <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ schema.description }}</p>
+          </div>
+          <span class="ml-3 shrink-0 rounded-full bg-teal-100 dark:bg-teal-900/40 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-teal-700 dark:text-teal-400">allOf</span>
+        </div>
+        <div class="p-4 space-y-4">
+          <div *ngFor="let subSchema of mergedAllOf; let i = index" class="border-l-2 border-indigo-200 dark:border-indigo-700 pl-4">
+            <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 con griglia SOLO per campi primitivi.
+           Logica layout:
+           - I figli vengono classificati come "semplici" (primitive/enum/bool)
+             o "complessi" (object/array/oneOf/anyOf/allOf).
+           - I semplici vanno in griglia 2 colonne (sm:grid-cols-2).
+           - I complessi vanno sempre in colonna piena (col-span-2).
+           ═══════════════════════════════════════════════════════════ -->
+      <fieldset *ngSwitchCase="'object'" class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-4 transition-shadow focus-within:border-indigo-300 dark:focus-within:border-indigo-600 focus-within:ring-2 focus-within:ring-indigo-100 dark:focus-within:ring-indigo-900/40">
+        <legend class="px-2 text-sm font-bold text-slate-800 dark:text-slate-200">{{ schema.title || label }}</legend>
+
+        <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 mb-3 mt-1">{{ schema.description }}</p>
+
+        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-1.5 mb-3">
+          <span *ngFor="let badge of metaBadges"
+            class="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+            [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <!-- campi semplici (string/number/bool/enum) → griglia 2 colonne -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4" [formGroup]="controlAsGroup">
+          <ng-container *ngFor="let key of simpleKeys">
+            <div class="flex flex-col gap-1">
+              <div *ngIf="isDynamicKey(key)"
+                class="flex items-center justify-between rounded-md border border-dashed border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/50 px-2 py-1 mb-1">
+                <span class="font-mono text-xs text-slate-500 dark:text-slate-400">{{ key }}</span>
+                <button type="button"
+                  class="rounded px-1.5 py-0.5 text-xs font-semibold text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                  (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>
+
+        <!-- campi complessi (object/array/combinator) → colonna piena -->
+        <div class="space-y-4 mt-4" *ngIf="complexKeys.length > 0" [formGroup]="controlAsGroup">
+          <ng-container *ngFor="let key of complexKeys">
+            <div class="flex flex-col gap-1">
+              <div *ngIf="isDynamicKey(key)"
+                class="flex items-center justify-between rounded-md border border-dashed border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/50 px-2 py-1 mb-1">
+                <span class="font-mono text-xs text-slate-500 dark:text-slate-400">{{ key }}</span>
+                <button type="button"
+                  class="rounded px-1.5 py-0.5 text-xs font-semibold text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                  (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>
+
+        <!-- add dynamic property -->
+        <div *ngIf="canAddProperty" class="mt-4 rounded-lg border border-dashed border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-800/40 p-3 space-y-2">
+          <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500">Add property</p>
+          <div class="flex gap-2">
+            <input
+              class="flex-1 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 px-3 py-1.5 text-sm shadow-sm outline-none transition hover:border-slate-400 dark:hover:border-slate-500 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 dark:focus:ring-indigo-900/40"
+              [(ngModel)]="newPropertyKey" placeholder="propertyName" />
+            <button type="button"
+              class="rounded-lg bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 active:scale-95"
+              (click)="addDynamicProperty()">Add</button>
+          </div>
+          <p *ngIf="propertyError" class="flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
+            <!-- icona errore: unico caso in cui ha senso, segnala un problema -->
+            <svg class="w-3.5 h-3.5 shrink-0" 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="mt-3 space-y-1">
+          <p *ngFor="let error of errorsForPath" class="flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
+            <svg class="w-3.5 h-3.5 shrink-0" 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 — sempre in colonna piena, items in colonna
+           ═══════════════════════════════════════════════════════════ -->
+      <div *ngSwitchCase="'array'" class="space-y-3">
+        <div class="flex items-start justify-between gap-2">
+          <div>
+            <p class="text-sm font-semibold text-slate-800">
+              {{ schema.title || label }}<span *ngIf="required" class="ml-0.5 text-red-500">*</span>
+            </p>
+            <p *ngIf="schema.description" class="text-xs text-slate-500 mt-0.5">{{ schema.description }}</p>
+          </div>
+          <!-- icona + nel bottone: indica l'azione "aggiungi", non decorativa -->
+          <button type="button"
+            class="shrink-0 flex items-center gap-1 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-indigo-700 active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed"
+            (click)="addArrayItem()" [disabled]="!canAddArrayItem">
+            <svg class="w-3.5 h-3.5" 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="rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-3 py-1.5 text-xs text-indigo-700 dark:text-indigo-400">
+          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="flex flex-wrap gap-1.5">
+          <span *ngFor="let badge of metaBadges"
+            class="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+            [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <div class="space-y-2" *ngIf="arrayControls.length > 0; else emptyArray">
+          <div *ngFor="let item of arrayControls; let i = index"
+            class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-3 shadow-sm transition focus-within:border-indigo-300 dark:focus-within:border-indigo-600 focus-within:ring-2 focus-within:ring-indigo-100 dark:focus-within:ring-indigo-900/40">
+            <div class="flex items-center justify-between mb-3">
+              <span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900/50 text-[11px] font-bold text-indigo-600 dark:text-indigo-400">{{ i + 1 }}</span>
+              <button type="button"
+                class="rounded-md border border-red-200 dark:border-red-800 px-2 py-0.5 text-xs font-semibold text-red-600 dark:text-red-400 transition hover:bg-red-50 dark:hover:bg-red-900/20"
+                (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="flex flex-col items-center gap-2 rounded-xl border border-dashed border-slate-200 dark:border-slate-700 py-8 text-slate-400 dark:text-slate-500 text-xs">
+            No items yet — click "Add item" to start.
+          </div>
+        </ng-template>
+
+        <div *ngIf="errorsForPath.length" class="space-y-1">
+          <p *ngFor="let error of errorsForPath" class="flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
+            <svg class="w-3.5 h-3.5 shrink-0" 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 — sempre in colonna, nessuna icona decorativa.
+           Icona errore solo nei messaggi di validazione.
+           Icona chevron nel select: funzionale (indica dropdown).
+           ═══════════════════════════════════════════════════════════ -->
+      <div *ngSwitchDefault class="space-y-1.5">
+        <ng-container *ngIf="inputKind !== 'checkbox'">
+          <label class="block text-[13px] font-semibold text-slate-700 dark:text-slate-300">
+            {{ schema.title || label }}<span *ngIf="required" class="ml-0.5 text-red-500">*</span>
+          </label>
+          <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 -mt-0.5">{{ schema.description }}</p>
+        </ng-container>
+
+        <div *ngIf="metaBadges.length" class="flex flex-wrap gap-1.5">
+          <span *ngFor="let badge of metaBadges"
+            class="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+            [ngClass]="badgeClass(badge)">{{ badge }}</span>
+        </div>
+
+        <ng-container [ngSwitch]="inputKind">
+
+          <input *ngSwitchCase="'text'"
+            class="w-full rounded-lg border bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm shadow-sm outline-none transition hover:border-slate-400 dark:hover:border-slate-500 focus:ring-2"
+            [class.border-slate-300]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.dark:border-slate-600]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.focus:border-indigo-400]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.focus:ring-indigo-100]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.dark:focus:ring-indigo-900/40]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.border-red-300]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.dark:border-red-700]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.bg-red-50]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.dark:bg-red-900/20]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.focus:border-red-400]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.focus:ring-red-100]="errorsForPath.length && controlAsFormControl.dirty"
+            [attr.type]="inputType"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+          />
+
+          <textarea *ngSwitchCase="'textarea'" rows="4"
+            class="w-full resize-y rounded-lg border bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 px-3 py-2 text-sm shadow-sm outline-none transition hover:border-slate-400 dark:hover:border-slate-500 focus:ring-2"
+            [class.border-slate-300]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.dark:border-slate-600]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.focus:border-indigo-400]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.focus:ring-indigo-100]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.dark:focus:ring-indigo-900/40]="!(errorsForPath.length && controlAsFormControl.dirty)"
+            [class.border-red-300]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.dark:border-red-700]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.bg-red-50]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.dark:bg-red-900/20]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.focus:border-red-400]="errorsForPath.length && controlAsFormControl.dirty"
+            [class.focus:ring-red-100]="errorsForPath.length && controlAsFormControl.dirty"
+            [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl"
+          ></textarea>
+
+          <!-- select: il chevron SVG è funzionale, indica che è un dropdown -->
+          <div *ngSwitchCase="'select'" class="relative">
+            <select
+              class="w-full appearance-none rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 px-3 py-2 pr-8 text-sm shadow-sm outline-none transition hover:border-slate-400 dark:hover:border-slate-500 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 dark:focus:ring-indigo-900/40"
+              [class.border-red-300]="errorsForPath.length && controlAsFormControl.dirty"
+              [class.dark:border-red-700]="errorsForPath.length && controlAsFormControl.dirty"
+              [class.bg-red-50]="errorsForPath.length && controlAsFormControl.dirty"
+              [class.dark:bg-red-900/20]="errorsForPath.length && controlAsFormControl.dirty"
+              [formControl]="controlAsFormControl">
+              <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
+            </select>
+            <svg class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-slate-500"
+              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>
+
+          <!-- checkbox come toggle switch -->
+          <label *ngSwitchCase="'checkbox'" class="inline-flex cursor-pointer items-center gap-2.5">
+            <span class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors"
+              [class.bg-indigo-600]="controlAsFormControl.value"
+              [class.bg-slate-300]="!controlAsFormControl.value"
+              [class.dark:bg-slate-600]="!controlAsFormControl.value">
+              <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
+              <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
+                [class.translate-x-4]="controlAsFormControl.value"
+                [class.translate-x-0.5]="!controlAsFormControl.value"></span>
+            </span>
+            <span class="text-sm font-medium text-slate-700 dark:text-slate-300">
+              {{ schema.title || label }}<span *ngIf="required" class="ml-0.5 text-red-500">*</span>
+            </span>
+          </label>
+
+        </ng-container>
+
+        <p *ngIf="inputKind === 'checkbox' && schema.description" class="text-xs text-slate-500 dark:text-slate-400">{{ schema.description }}</p>
+
+        <p *ngIf="effectiveSchema.examples?.length" class="text-[11px] text-slate-400 dark:text-slate-500">
+          e.g. {{ effectiveSchema.examples?.[0] }}
+        </p>
+
+        <p *ngIf="effectiveSchema.contentMediaType" class="text-[11px] text-slate-400 dark:text-slate-500">
+          {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
+        </p>
+
+        <!-- icona errore: funzionale, segnala un problema di validazione -->
+        <div *ngIf="errorsForPath.length && controlAsFormControl.dirty" class="space-y-1 pt-0.5">
+          <p *ngFor="let error of errorsForPath" class="flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
+            <svg class="w-3.5 h-3.5 shrink-0" 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,
                 }]
@@ -1504,6 +1641,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], controlKey: [{
                 type: Input
+            }], allowAdditionalProperties: [{
+                type: Input
             }], controlReplaced: [{
                 type: Output
             }] } });
@@ -1515,13 +1654,16 @@ class JsonSchemaFormComponent {
     schema;
     value;
     data;
+    allowAdditionalProperties = false;
     formReady = new EventEmitter();
     valueChange = new EventEmitter();
     schemaReady = new EventEmitter();
+    schemaErrors = new EventEmitter();
     form;
     rootControl;
     resolvedSchema;
     errorsMap = new Map();
+    schemaErrorList = [];
     loading = false;
     valueSub;
     constructor(schemaService, resolver, validation) {
@@ -1541,7 +1683,17 @@ class JsonSchemaFormComponent {
         this.valueSub?.unsubscribe();
         this.loading = true;
         this.resolvedSchema = await this.resolver.resolve(this.schema, this.schema?.$id);
+        // Validate the schema itself and emit any structural errors
+        const schemaErrs = this.validation.validateSchema(this.resolvedSchema);
+        this.schemaErrorList = schemaErrs;
+        this.schemaErrors.emit(schemaErrs);
         this.schemaReady.emit(this.resolvedSchema);
+        // If the schema has structural errors, stop here — don't try to build the form
+        if (schemaErrs.length > 0) {
+            this.form = undefined;
+            this.loading = false;
+            return;
+        }
         const initialData = this.value !== undefined ? this.value : this.data;
         this.rootControl = this.schemaService.buildControl(this.resolvedSchema, initialData);
         this.form = this.rootControl instanceof FormGroup ? this.rootControl : new FormGroup({ value: this.rootControl });
@@ -1588,61 +1740,121 @@ class JsonSchemaFormComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaResolverService }, { token: JsonSchemaValidationService }], 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" }, outputs: { formReady: "formReady", valueChange: "valueChange", schemaReady: "schemaReady" }, usesOnChanges: true, ngImport: i0, template: `
-    <form class="w-full max-w-4xl mx-auto p-4 md:p-6 space-y-6">
-      <div class="space-y-1">
-        <h2 class="text-xl font-semibold text-slate-900">{{ resolvedSchema?.title || 'Generated Form' }}</h2>
-        <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500">
-          {{ resolvedSchema?.description }}
-        </p>
-      </div>
-
-      <div *ngIf="loading" class="text-sm text-slate-500">Resolving schema...</div>
-
-      <div *ngIf="form && resolvedSchema" class="space-y-6" [formGroup]="form">
-        <jsm-schema-node
-          [schema]="resolvedSchema"
-          [control]="rootControl"
-          [path]="''"
-          [errorsMap]="errorsMap"
-          label="Root"
-          (controlReplaced)="onRootReplaced($event)"
-        ></jsm-schema-node>
-      </div>
-    </form>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"], outputs: ["controlReplaced"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'jsm-json-schema-form',
-                    standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule, JsonSchemaNodeComponent],
-                    template: `
-    <form class="w-full max-w-4xl mx-auto p-4 md:p-6 space-y-6">
-      <div class="space-y-1">
-        <h2 class="text-xl font-semibold text-slate-900">{{ resolvedSchema?.title || 'Generated Form' }}</h2>
-        <p *ngIf="resolvedSchema?.description" class="text-sm text-slate-500">
-          {{ resolvedSchema?.description }}
-        </p>
-      </div>
-
-      <div *ngIf="loading" class="text-sm text-slate-500">Resolving schema...</div>
-
-      <div *ngIf="form && resolvedSchema" class="space-y-6" [formGroup]="form">
-        <jsm-schema-node
-          [schema]="resolvedSchema"
-          [control]="rootControl"
-          [path]="''"
-          [errorsMap]="errorsMap"
-          label="Root"
-          (controlReplaced)="onRootReplaced($event)"
-        ></jsm-schema-node>
-      </div>
-    </form>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
+            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>
+  `, 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 }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1650,12 +1862,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], data: [{
                 type: Input
+            }], allowAdditionalProperties: [{
+                type: Input
             }], formReady: [{
                 type: Output
             }], valueChange: [{
                 type: Output
             }], schemaReady: [{
                 type: Output
+            }], schemaErrors: [{
+                type: Output
             }] } });
 
 class JsonSchemaFormModule {