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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, PLATFORM_ID, Inject, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { FormGroup, FormArray, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import Ajv from 'ajv';
@@ -8,7 +8,7 @@ import Ajv2020 from 'ajv/dist/2020';
 import addFormats from 'ajv-formats';
 import AjvDraft04 from 'ajv-draft-04';
 import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 
 class JsonSchemaFormService {
     buildControl(schema, value, required = false) {
@@ -582,6 +582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class JsonSchemaNodeComponent {
     schemaService;
     validation;
+    cdr;
     schema;
     control;
     label = '';
@@ -596,34 +597,38 @@ class JsonSchemaNodeComponent {
     selectedAnyOf = new Set();
     newPropertyKey = '';
     propertyError = '';
-    constructor(schemaService, validation) {
+    valueSub;
+    constructor(schemaService, validation, cdr) {
         this.schemaService = schemaService;
         this.validation = validation;
+        this.cdr = cdr;
     }
     ngOnInit() {
-        if (this.schema.anyOf?.length) {
+        if (this.schema.anyOf?.length)
             this.selectedAnyOf.add(0);
-        }
+        // Subscribe to value changes to trigger CD for OnPush (needed for toggle visual state)
+        this.valueSub = this.control.valueChanges.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.valueSub?.unsubscribe();
     }
-    /**
-     * 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)
+        const s = this.schemaForKey(key);
+        if (s.oneOf?.length || s.anyOf?.length || s.allOf?.length)
             return false;
-        const t = this.schemaService.resolveType(childSchema);
+        const t = this.schemaService.resolveType(s);
         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',
-        };
+        if (badge === 'Deprecated')
+            return 'jsm-badge--deprecated';
+        if (badge === 'Read-only' || badge === 'Nullable')
+            return 'jsm-badge--readonly';
+        if (badge === 'Write-only')
+            return 'jsm-badge--writeonly';
+        if (badge === 'Not constraint')
+            return 'jsm-badge--not';
+        return 'jsm-badge--nullable';
     }
     get nodeKind() {
         if (this.schema.oneOf?.length)
@@ -632,10 +637,10 @@ class JsonSchemaNodeComponent {
             return 'anyOf';
         if (this.schema.allOf?.length)
             return 'allOf';
-        const resolved = this.resolvedType;
-        if (resolved === 'object')
+        const r = this.resolvedType;
+        if (r === 'object')
             return 'object';
-        if (resolved === 'array')
+        if (r === 'array')
             return 'array';
         return 'primitive';
     }
@@ -671,12 +676,8 @@ class JsonSchemaNodeComponent {
     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 complexKeys() {
-        return this.objectKeys.filter(k => !this.isSimpleChild(k));
-    }
+    get simpleKeys() { return this.objectKeys.filter(k => this.isSimpleChild(k)); }
+    get complexKeys() { return this.objectKeys.filter(k => !this.isSimpleChild(k)); }
     get canAddProperty() {
         if (!this.allowAdditionalProperties)
             return false;
@@ -684,25 +685,25 @@ class JsonSchemaNodeComponent {
     }
     get errorsForPath() { return this.errorsMap.get(this.path) ?? []; }
     get metaBadges() {
-        const badges = [];
+        const b = [];
         if (this.effectiveSchema.deprecated)
-            badges.push('Deprecated');
+            b.push('Deprecated');
         if (this.effectiveSchema.readOnly)
-            badges.push('Read-only');
+            b.push('Read-only');
         if (this.effectiveSchema.writeOnly)
-            badges.push('Write-only');
+            b.push('Write-only');
         if (this.effectiveSchema.nullable)
-            badges.push('Nullable');
+            b.push('Nullable');
         if (this.effectiveSchema.not)
-            badges.push('Not constraint');
-        return badges;
+            b.push('Not constraint');
+        return b;
     }
     get activeVariant() {
         if (this.schema.oneOf?.length)
             return this.schema.oneOf[this.selectedOneOf] ?? null;
         if (this.schema.anyOf?.length) {
-            const selections = Array.from(this.selectedAnyOf).map((i) => this.schema.anyOf[i]);
-            return selections.length ? this.mergeSchemas(selections) : this.schema.anyOf[0] ?? null;
+            const sel = Array.from(this.selectedAnyOf).map(i => this.schema.anyOf[i]);
+            return sel.length ? this.mergeSchemas(sel) : this.schema.anyOf[0] ?? null;
         }
         if (this.schema.allOf?.length)
             return this.mergeSchemas([this.schema, ...this.schema.allOf]);
@@ -713,9 +714,7 @@ class JsonSchemaNodeComponent {
     }
     isRequired(key) { return this.effectiveSchema.required?.includes(key) ?? false; }
     schemaForKey(key) {
-        return (this.effectiveSchema.properties?.[key] ??
-            this.schemaService.resolveDynamicSchema(this.effectiveSchema, key) ??
-            {});
+        return this.effectiveSchema.properties?.[key] ?? this.schemaService.resolveDynamicSchema(this.effectiveSchema, key) ?? {};
     }
     isDynamicKey(key) { return !this.effectiveSchema.properties?.[key]; }
     pathForChild(key) {
@@ -729,8 +728,7 @@ class JsonSchemaNodeComponent {
             return;
         }
         if (this.effectiveSchema.propertyNames) {
-            const nameErrors = this.validation.validate(this.effectiveSchema.propertyNames, key);
-            if (nameErrors.length) {
+            if (this.validation.validate(this.effectiveSchema.propertyNames, key).length) {
                 this.propertyError = 'Property name does not match schema constraints.';
                 return;
             }
@@ -739,20 +737,19 @@ class JsonSchemaNodeComponent {
             this.propertyError = 'Property already exists.';
             return;
         }
-        const schemaForKey = this.schemaService.resolveDynamicSchema(this.effectiveSchema, key);
-        if (!schemaForKey) {
+        const s = this.schemaService.resolveDynamicSchema(this.effectiveSchema, key);
+        if (!s) {
             this.propertyError = 'This property is not allowed by the schema.';
             return;
         }
-        const control = this.schemaService.buildControl(schemaForKey, undefined, false);
-        this.controlAsGroup.addControl(key, control);
+        this.controlAsGroup.addControl(key, this.schemaService.buildControl(s, undefined, false));
         this.newPropertyKey = '';
     }
     removeDynamicKey(key) { this.controlAsGroup.removeControl(key); }
     schemaForIndex(index) {
-        const prefixItems = this.effectiveSchema.prefixItems ?? [];
-        if (prefixItems[index])
-            return prefixItems[index];
+        const p = this.effectiveSchema.prefixItems ?? [];
+        if (p[index])
+            return p[index];
         if (this.effectiveSchema.items && this.effectiveSchema.items !== true)
             return this.effectiveSchema.items;
         if (this.effectiveSchema.additionalItems && this.effectiveSchema.additionalItems !== true)
@@ -762,17 +759,14 @@ class JsonSchemaNodeComponent {
         return {};
     }
     get canAddArrayItem() {
-        return !(this.effectiveSchema.items === false ||
-            this.effectiveSchema.additionalItems === false ||
-            this.effectiveSchema.unevaluatedItems === false);
+        return !(this.effectiveSchema.items === false || this.effectiveSchema.additionalItems === false || this.effectiveSchema.unevaluatedItems === false);
     }
     addArrayItem() {
         if (!this.canAddArrayItem)
             return;
-        const formArray = this.controlAsArray;
-        const index = formArray.length;
-        formArray.push(this.schemaService.buildControl(this.schemaForIndex(index), undefined, false));
-        formArray.markAsDirty();
+        const fa = this.controlAsArray;
+        fa.push(this.schemaService.buildControl(this.schemaForIndex(fa.length), undefined, false));
+        fa.markAsDirty();
     }
     removeArrayItem(index) {
         this.controlAsArray.removeAt(index);
@@ -788,9 +782,9 @@ class JsonSchemaNodeComponent {
             this.selectedAnyOf.delete(index);
         else
             this.selectedAnyOf.add(index);
-        const variant = this.activeVariant;
-        if (variant)
-            this.replaceControl(this.schemaService.buildControl(variant, this.control.value, this.required));
+        const v = this.activeVariant;
+        if (v)
+            this.replaceControl(this.schemaService.buildControl(v, this.control.value, this.required));
     }
     replaceControl(control) {
         if (this.parent) {
@@ -806,12 +800,12 @@ class JsonSchemaNodeComponent {
     }
     childControl(key) { return this.controlAsGroup.get(key); }
     get effectiveSchema() {
-        let schema = this.schema;
-        if (schema.allOf?.length)
-            schema = this.mergeSchemas([schema, ...schema.allOf]);
-        schema = this.applyConditional(schema);
-        schema = this.applyDependencies(schema);
-        return schema;
+        let s = this.schema;
+        if (s.allOf?.length)
+            s = this.mergeSchemas([s, ...s.allOf]);
+        s = this.applyConditional(s);
+        s = this.applyDependencies(s);
+        return s;
     }
     applyConditional(schema) {
         if (!schema.if)
@@ -827,80 +821,67 @@ class JsonSchemaNodeComponent {
         if (!value || typeof value !== 'object' || Array.isArray(value))
             return schema;
         let merged = { ...schema };
-        const valueKeys = Object.keys(value);
+        const keys = Object.keys(value);
         if (schema.dependentRequired) {
-            for (const key of valueKeys) {
-                const required = schema.dependentRequired[key];
-                if (required?.length)
-                    merged = this.mergeSchemas([merged, { required }]);
+            for (const k of keys) {
+                const r = schema.dependentRequired[k];
+                if (r?.length)
+                    merged = this.mergeSchemas([merged, { required: r }]);
             }
         }
         if (schema.dependentSchemas) {
-            for (const key of valueKeys) {
-                const depSchema = schema.dependentSchemas[key];
-                if (depSchema)
-                    merged = this.mergeSchemas([merged, depSchema]);
+            for (const k of keys) {
+                const d = schema.dependentSchemas[k];
+                if (d)
+                    merged = this.mergeSchemas([merged, d]);
             }
         }
         if (schema.dependencies) {
-            for (const key of valueKeys) {
-                const dep = schema.dependencies[key];
-                if (Array.isArray(dep))
-                    merged = this.mergeSchemas([merged, { required: dep }]);
-                else if (dep)
-                    merged = this.mergeSchemas([merged, dep]);
+            for (const k of keys) {
+                const d = schema.dependencies[k];
+                if (Array.isArray(d))
+                    merged = this.mergeSchemas([merged, { required: d }]);
+                else if (d)
+                    merged = this.mergeSchemas([merged, d]);
             }
         }
         return merged;
     }
     mergeSchemas(schemas) {
-        return schemas.reduce((acc, schema) => {
-            const merged = {
-                ...acc,
-                ...schema,
-                properties: { ...(acc.properties ?? {}), ...(schema.properties ?? {}) },
-                patternProperties: { ...(acc.patternProperties ?? {}), ...(schema.patternProperties ?? {}) },
-                required: Array.from(new Set([...(acc.required ?? []), ...(schema.required ?? [])])),
-            };
-            if (acc.type && schema.type) {
-                const accTypes = Array.isArray(acc.type) ? acc.type : [acc.type];
-                const schemaTypes = Array.isArray(schema.type) ? schema.type : [schema.type];
-                merged.type = Array.from(new Set([...accTypes, ...schemaTypes]));
-            }
-            return merged;
-        }, {});
+        return schemas.reduce((acc, s) => ({
+            ...acc, ...s,
+            properties: { ...(acc.properties ?? {}), ...(s.properties ?? {}) },
+            patternProperties: { ...(acc.patternProperties ?? {}), ...(s.patternProperties ?? {}) },
+            required: Array.from(new Set([...(acc.required ?? []), ...(s.required ?? [])])),
+            ...(acc.type && s.type ? {
+                type: Array.from(new Set([
+                    ...(Array.isArray(acc.type) ? acc.type : [acc.type]),
+                    ...(Array.isArray(s.type) ? s.type : [s.type]),
+                ]))
+            } : {}),
+        }), {});
     }
-    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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaNodeComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaValidationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: JsonSchemaNodeComponent, isStandalone: true, selector: "jsm-schema-node", inputs: { schema: "schema", control: "control", label: "label", required: "required", path: "path", errorsMap: "errorsMap", parent: "parent", controlKey: "controlKey", allowAdditionalProperties: "allowAdditionalProperties" }, outputs: { controlReplaced: "controlReplaced" }, ngImport: i0, template: `
     <ng-container [ngSwitch]="nodeKind">
 
-      <!-- ═══════════════════════════════════════════════════════════
-           oneOf — 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">
+      <!-- ═══ oneOf ═══ -->
+      <div *ngSwitchCase="'oneOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
           <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>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ 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>
+          <span class="jsm-combinator-badge jsm-badge--oneof">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 class="jsm-oneof-tabs">
+          <button *ngFor="let option of schema.oneOf; let i = index" type="button"
+            class="jsm-tab" [class.jsm-tab--active]="selectedOneOf === i"
+            (click)="selectedOneOf = i; onOneOfChange()">
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </button>
         </div>
-        <div class="p-4" *ngIf="activeVariant">
+        <div class="jsm-combinator-body" *ngIf="activeVariant">
           <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
             [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
             [allowAdditionalProperties]="allowAdditionalProperties"
@@ -908,36 +889,23 @@ class JsonSchemaNodeComponent {
         </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">
+      <!-- ═══ anyOf ═══ -->
+      <div *ngSwitchCase="'anyOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
           <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>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ 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>
+          <span class="jsm-combinator-badge jsm-badge--anyof">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)" />
+        <div class="jsm-anyof-options">
+          <label *ngFor="let option of schema.anyOf; let i = index"
+            class="jsm-anyof-option" [class.jsm-anyof-option--active]="selectedAnyOf.has(i)">
+            <input type="checkbox" class="sr-only" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
             {{ option.title || ('Option ' + (i + 1)) }}
           </label>
         </div>
-        <div class="p-4" *ngIf="activeVariant">
+        <div class="jsm-combinator-body" *ngIf="activeVariant">
           <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
             [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
             [allowAdditionalProperties]="allowAdditionalProperties"
@@ -945,19 +913,17 @@ class JsonSchemaNodeComponent {
         </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">
+      <!-- ═══ allOf ═══ -->
+      <div *ngSwitchCase="'allOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
           <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>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ 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>
+          <span class="jsm-combinator-badge jsm-badge--allof">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">
+        <div class="jsm-combinator-body">
+          <div *ngFor="let subSchema of mergedAllOf; let i = index" class="jsm-allof-section">
             <jsm-schema-node [schema]="subSchema" [control]="control" [parent]="parent" [controlKey]="controlKey"
               [path]="path" [errorsMap]="errorsMap" [label]="subSchema.title || ('Section ' + (i + 1))" [required]="required"
               [allowAdditionalProperties]="allowAdditionalProperties"
@@ -966,145 +932,95 @@ class JsonSchemaNodeComponent {
         </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>
+      <!-- ═══ object ═══ -->
+      <fieldset *ngSwitchCase="'object'" class="jsm-fieldset">
+        <legend class="jsm-legend">{{ schema.title || label }}</legend>
+        <p *ngIf="schema.description" class="jsm-field-hint" style="margin-bottom:.75rem;margin-top:.25rem;">{{ schema.description }}</p>
 
-        <div *ngIf="metaBadges.length" class="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 *ngIf="metaBadges.length" class="jsm-badge-row" style="margin-bottom:.75rem;">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
         </div>
 
-        <!-- campi semplici (string/number/bool/enum) → griglia 2 colonne -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4" [formGroup]="controlAsGroup">
+        <div class="jsm-obj-grid" [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 style="display:flex;flex-direction:column;gap:.25rem;">
+              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
+                <span class="jsm-dynamic-key-label">{{ key }}</span>
+                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
               </div>
-              <jsm-schema-node
-                [schema]="schemaForKey(key)"
-                [control]="childControl(key)"
-                [parent]="controlAsGroup"
-                [controlKey]="key"
-                [path]="pathForChild(key)"
-                [errorsMap]="errorsMap"
-                [label]="key"
-                [required]="isRequired(key)"
-                [allowAdditionalProperties]="allowAdditionalProperties"
-                (controlReplaced)="controlReplaced.emit($event)">
-              </jsm-schema-node>
+              <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">
+        <div class="jsm-obj-complex" *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 style="display:flex;flex-direction:column;gap:.25rem;">
+              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
+                <span class="jsm-dynamic-key-label">{{ key }}</span>
+                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
               </div>
-              <jsm-schema-node
-                [schema]="schemaForKey(key)"
-                [control]="childControl(key)"
-                [parent]="controlAsGroup"
-                [controlKey]="key"
-                [path]="pathForChild(key)"
-                [errorsMap]="errorsMap"
-                [label]="key"
-                [required]="isRequired(key)"
-                [allowAdditionalProperties]="allowAdditionalProperties"
-                (controlReplaced)="controlReplaced.emit($event)">
-              </jsm-schema-node>
+              <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 *ngIf="canAddProperty" class="jsm-add-prop">
+          <p class="jsm-add-prop-label">Add property</p>
+          <div class="jsm-add-prop-row">
+            <input class="jsm-input jsm-input--sm" style="flex:1;" [(ngModel)]="newPropertyKey" placeholder="propertyName" />
+            <button type="button" class="jsm-btn-primary" (click)="addDynamicProperty()">Add</button>
           </div>
-          <p *ngIf="propertyError" class="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>
+          <p *ngIf="propertyError" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
             {{ propertyError }}
           </p>
         </div>
 
-        <div *ngIf="errorsForPath.length" class="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>
+        <div *ngIf="errorsForPath.length" class="jsm-error-list" style="margin-top:.75rem;">
+          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
             {{ error }}
           </p>
         </div>
       </fieldset>
 
-      <!-- ═══════════════════════════════════════════════════════════
-           array — sempre in colonna piena, items in colonna
-           ═══════════════════════════════════════════════════════════ -->
-      <div *ngSwitchCase="'array'" class="space-y-3">
-        <div class="flex items-start justify-between gap-2">
+      <!-- ═══ array ═══ -->
+      <div *ngSwitchCase="'array'" class="jsm-array-block">
+        <div class="jsm-array-header">
           <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 class="jsm-array-title">
+              {{ schema.title || label }}<span *ngIf="required" style="color:#ef4444;margin-left:.125rem;">*</span>
             </p>
-            <p *ngIf="schema.description" class="text-xs text-slate-500 mt-0.5">{{ schema.description }}</p>
+            <p *ngIf="schema.description" class="jsm-field-hint">{{ 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>
+          <button type="button" class="jsm-btn-primary" (click)="addArrayItem()" [disabled]="!canAddArrayItem">
+            <svg style="width:.875rem;height:.875rem;flex-shrink:0;" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
             Add item
           </button>
         </div>
 
-        <div *ngIf="effectiveSchema.contains" class="rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-3 py-1.5 text-xs text-indigo-700 dark:text-indigo-400">
+        <div *ngIf="effectiveSchema.contains" class="jsm-contains-hint">
           Must contain matching item(s)
           <span *ngIf="effectiveSchema.minContains"> · min {{ effectiveSchema.minContains }}</span>
           <span *ngIf="effectiveSchema.maxContains"> · max {{ effectiveSchema.maxContains }}</span>
         </div>
 
-        <div *ngIf="metaBadges.length" class="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 *ngIf="metaBadges.length" class="jsm-badge-row">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [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 class="jsm-array-items" *ngIf="arrayControls.length > 0; else emptyArray">
+          <div *ngFor="let item of arrayControls; let i = index" class="jsm-array-item">
+            <div class="jsm-array-item-header">
+              <span class="jsm-array-index">{{ i + 1 }}</span>
+              <button type="button" class="jsm-btn-danger" (click)="removeArrayItem(i)">Remove</button>
             </div>
             <jsm-schema-node [schema]="schemaForIndex(i)" [control]="item" [parent]="controlAsArray"
               [controlKey]="i" [path]="pathForChild(i)" [errorsMap]="errorsMap" [label]="label + ' item'"
@@ -1114,119 +1030,72 @@ class JsonSchemaNodeComponent {
         </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>
+          <div class="jsm-empty-array">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>
+        <div *ngIf="errorsForPath.length" class="jsm-error-list">
+          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
             {{ error }}
           </p>
         </div>
       </div>
 
-      <!-- ═══════════════════════════════════════════════════════════
-           primitive — 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">
+      <!-- ═══ primitive ═══ -->
+      <div *ngSwitchDefault class="jsm-field">
         <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 class="jsm-field-label">
+            {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
           </label>
-          <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 -mt-0.5">{{ schema.description }}</p>
+          <p *ngIf="schema.description" class="jsm-field-hint">{{ 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 *ngIf="metaBadges.length" class="jsm-badge-row">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
         </div>
 
         <ng-container [ngSwitch]="inputKind">
+          <input *ngSwitchCase="'text'" class="jsm-input"
+            [class.jsm-input--error]="errorsForPath.length && controlAsFormControl.dirty"
+            [attr.type]="inputType" [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl" />
 
-          <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"
+          <textarea *ngSwitchCase="'textarea'" rows="4" class="jsm-textarea"
+            [class.jsm-textarea--error]="errorsForPath.length && controlAsFormControl.dirty"
             [attr.placeholder]="schema.title || label"
-            [formControl]="controlAsFormControl"
-          />
+            [formControl]="controlAsFormControl"></textarea>
 
-          <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"
+          <div *ngSwitchCase="'select'" class="jsm-select-wrap">
+            <select class="jsm-select"
+              [class.jsm-select--error]="errorsForPath.length && controlAsFormControl.dirty"
               [formControl]="controlAsFormControl">
               <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
             </select>
-            <svg class="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">
+            <svg class="jsm-select-chevron" viewBox="0 0 16 16" fill="none">
               <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
           </div>
 
-          <!-- checkbox come toggle switch -->
-          <label *ngSwitchCase="'checkbox'" class="inline-flex cursor-pointer items-center gap-2.5">
-            <span class="jsm-toggle-track" [class.jsm-toggle-on]="controlAsFormControl.value">
+          <label *ngSwitchCase="'checkbox'" class="jsm-toggle-label">
+            <span class="jsm-toggle-track" [class.jsm-on]="controlAsFormControl.value">
               <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
               <span class="jsm-toggle-thumb"></span>
             </span>
-            <span class="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 class="jsm-toggle-text">
+              {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
             </span>
           </label>
-
         </ng-container>
 
-        <p *ngIf="inputKind === 'checkbox' && schema.description" class="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">
+        <p *ngIf="inputKind === 'checkbox' && schema.description" class="jsm-field-hint">{{ schema.description }}</p>
+        <p *ngIf="effectiveSchema.examples?.length" class="jsm-example">e.g. {{ effectiveSchema.examples?.[0] }}</p>
+        <p *ngIf="effectiveSchema.contentMediaType" class="jsm-example">
           {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
         </p>
 
-        <!-- 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">
+        <div *ngIf="errorsForPath.length && controlAsFormControl.dirty" class="jsm-error-list">
+          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none">
               <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
               <path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
             </svg>
@@ -1236,40 +1105,30 @@ class JsonSchemaNodeComponent {
       </div>
 
     </ng-container>
-  `, isInline: true, styles: [".jsm-toggle-track{position:relative;display:inline-flex;align-items:center;width:2.25rem;height:1.25rem;border-radius:9999px;flex-shrink:0;transition:background-color .2s;background-color:#cbd5e1}.jsm-toggle-track.jsm-toggle-on{background-color:#4f46e5}.dark .jsm-toggle-track:not(.jsm-toggle-on){background-color:#475569}.jsm-toggle-thumb{display:inline-block;width:1rem;height:1rem;border-radius:9999px;background:#fff;box-shadow:0 1px 3px #0003;transform:translate(.125rem);transition:transform .2s}.jsm-toggle-track.jsm-toggle-on .jsm-toggle-thumb{transform:translate(1.125rem)}\n"], dependencies: [{ kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey", "allowAdditionalProperties"], outputs: ["controlReplaced"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".jsm-field{display:flex;flex-direction:column;gap:.375rem}.jsm-field-label{display:block;font-size:.8125rem;font-weight:600;color:#374151}.jsm-field-hint{font-size:.75rem;color:#6b7280;margin:0;line-height:1.4}.jsm-required{color:#ef4444;margin-left:.125rem}.jsm-example{font-size:.6875rem;color:#9ca3af}.jsm-input,.jsm-textarea,.jsm-select{width:100%;border-radius:.5rem;border:1.5px solid #d1d5db;background:Canvas;padding:.5rem .75rem;font-size:.875rem;color:CanvasText;outline:none;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s;font-family:inherit;box-sizing:border-box}.jsm-input:hover,.jsm-textarea:hover,.jsm-select:hover{border-color:#9ca3af}.jsm-input:focus,.jsm-textarea:focus,.jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.jsm-input--error,.jsm-textarea--error,.jsm-select--error{border-color:#f87171!important;background:#fff5f5}.jsm-input--error:focus,.jsm-textarea--error:focus,.jsm-select--error:focus{box-shadow:0 0 0 3px #f8717133!important}.jsm-textarea{resize:vertical;min-height:6rem}.jsm-select-wrap{position:relative}.jsm-select{appearance:none;padding-right:2.25rem;cursor:pointer}.jsm-select-chevron{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#9ca3af;pointer-events:none}.jsm-toggle-label{display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none}.jsm-toggle-track{position:relative;display:inline-flex;align-items:center;width:2.25rem;height:1.25rem;border-radius:9999px;flex-shrink:0;background:#d1d5db;transition:background .2s}.jsm-toggle-track.jsm-on{background:#4f46e5}.jsm-toggle-thumb{display:inline-block;width:1rem;height:1rem;border-radius:9999px;background:#fff;box-shadow:0 1px 3px #0003;transform:translate(.125rem);transition:transform .2s}.jsm-toggle-track.jsm-on .jsm-toggle-thumb{transform:translate(1.125rem)}.jsm-toggle-text{font-size:.875rem;font-weight:500;color:#374151}.jsm-btn-primary{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;border-radius:.5rem;font-size:.8125rem;font-weight:600;background:#4f46e5;color:#fff;border:none;cursor:pointer;box-shadow:0 1px 2px #4f46e54d;transition:background .15s,transform .1s,box-shadow .15s;white-space:nowrap;font-family:inherit}.jsm-btn-primary:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 3px 8px #4f46e54d}.jsm-btn-primary:active{transform:translateY(0)}.jsm-btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.jsm-btn-danger{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:.375rem;font-size:.75rem;font-weight:600;background:transparent;color:#dc2626;border:1.5px solid #fca5a5;cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit}.jsm-btn-danger:hover{background:#fee2e2;border-color:#f87171}.jsm-error-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.jsm-error-msg{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#dc2626;font-weight:500}.jsm-error-icon{width:.875rem;height:.875rem;flex-shrink:0}.jsm-badge-row{display:flex;flex-wrap:wrap;gap:.375rem}.jsm-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.jsm-badge--deprecated{background:#fef3c7;color:#92400e}.jsm-badge--readonly{background:#f1f5f9;color:#475569}.jsm-badge--writeonly{background:#dbeafe;color:#1e40af}.jsm-badge--not{background:#fee2e2;color:#991b1b}.jsm-badge--nullable{background:#f3f4f6;color:#6b7280}.jsm-fieldset{border:1.5px solid #e5e7eb;border-radius:.875rem;padding:1.25rem;background:transparent;box-shadow:0 1px 3px #0000000f;transition:box-shadow .2s;box-sizing:border-box}.jsm-fieldset:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114,0 1px 3px #0000000f}.jsm-legend{display:inline-flex;align-items:center;gap:.375rem;padding:0 .5rem;font-size:.875rem;font-weight:700;color:#1f2937}.jsm-obj-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width:640px){.jsm-obj-grid{grid-template-columns:repeat(2,1fr)}}.jsm-obj-complex{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.jsm-dynamic-key-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;background:#f9fafb;border-radius:.375rem;border:1px dashed #d1d5db;margin-bottom:.25rem}.jsm-dynamic-key-label{font-size:.75rem;font-weight:600;color:#6b7280;font-family:monospace}.jsm-add-prop{margin-top:1rem;padding:.875rem;background:#f9fafb;border-radius:.625rem;border:1.5px dashed #d1d5db;display:flex;flex-direction:column;gap:.5rem}.jsm-add-prop-label{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.jsm-add-prop-row{display:flex;gap:.5rem;align-items:center}.jsm-input--sm{padding:.375rem .625rem;font-size:.8125rem}.jsm-array-block{display:flex;flex-direction:column;gap:.75rem}.jsm-array-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.jsm-array-title{font-size:.875rem;font-weight:700;color:#1f2937;display:flex;align-items:center;gap:.375rem}.jsm-array-items{display:flex;flex-direction:column;gap:.75rem}.jsm-array-item{border:1.5px solid #e5e7eb;border-radius:.75rem;padding:.875rem;background:transparent;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s}.jsm-array-item:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114}.jsm-array-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.jsm-array-index{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:9999px;background:#eef2ff;color:#4f46e5;font-size:.6875rem;font-weight:700}.jsm-empty-array{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;border:1.5px dashed #e5e7eb;border-radius:.75rem;color:#9ca3af;font-size:.8125rem;text-align:center}.jsm-contains-hint{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#6366f1;background:#eef2ff;border-radius:.375rem;padding:.375rem .625rem}.jsm-combinator{border:1.5px solid #e5e7eb;border-radius:.875rem;overflow:hidden;background:transparent;box-shadow:0 1px 3px #0000000f}.jsm-combinator-header{display:flex;align-items:flex-start;justify-content:space-between;padding:.875rem 1rem;background:#00000008;border-bottom:1.5px solid #e5e7eb}.jsm-combinator-title{font-size:.875rem;font-weight:700;color:#1f2937}.jsm-combinator-body{padding:1rem}.jsm-combinator-hint{font-size:.75rem;color:#6b7280;margin:.25rem 0 0}.jsm-oneof-tabs{display:flex;overflow-x:auto;border-bottom:1.5px solid #e5e7eb}.jsm-tab{padding:.5rem 1rem;font-size:.8125rem;font-weight:500;color:#6b7280;border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit}.jsm-tab:hover{color:#4f46e5}.jsm-tab--active{color:#4f46e5;border-bottom-color:#4f46e5;font-weight:600}.jsm-anyof-options{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem;border-bottom:1.5px solid #e5e7eb}.jsm-anyof-option{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:9999px;border:1.5px solid #e5e7eb;font-size:.8125rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s;background:transparent}.jsm-anyof-option:hover{border-color:#a5b4fc;color:#4f46e5}.jsm-anyof-option--active{border-color:#6366f1;background:#eef2ff;color:#4f46e5}.jsm-allof-section{border-left:3px solid #e0e7ff;padding-left:1rem}.jsm-combinator-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;margin-left:.75rem}.jsm-badge--oneof{background:#dbeafe;color:#1e40af}.jsm-badge--anyof{background:#ede9fe;color:#5b21b6}.jsm-badge--allof{background:#ccfbf1;color:#065f46}.dark .jsm-field-label{color:#d1d5db}.dark .jsm-field-hint{color:#9ca3af}.dark .jsm-toggle-track{background:#475569}.dark .jsm-toggle-track.jsm-on{background:#4f46e5}.dark .jsm-toggle-text{color:#d1d5db}.dark .jsm-input,.dark .jsm-textarea,.dark .jsm-select{border-color:#475569;color:#f1f5f9}.dark .jsm-input:focus,.dark .jsm-textarea:focus,.dark .jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.dark .jsm-input--error,.dark .jsm-textarea--error,.dark .jsm-select--error{border-color:#f87171!important;background:#f871711a}.dark .jsm-fieldset{border-color:#334155}.dark .jsm-fieldset:focus-within{border-color:#6366f1}.dark .jsm-legend{color:#f1f5f9}.dark .jsm-combinator{border-color:#334155}.dark .jsm-combinator-header{background:#ffffff0a;border-color:#334155}.dark .jsm-combinator-title{color:#f1f5f9}.dark .jsm-oneof-tabs{border-color:#334155}.dark .jsm-tab{color:#94a3b8}.dark .jsm-tab--active{color:#818cf8;border-bottom-color:#818cf8}.dark .jsm-anyof-options{border-color:#334155}.dark .jsm-anyof-option{border-color:#334155;color:#94a3b8;background:#0f172a}.dark .jsm-anyof-option--active{border-color:#6366f1;background:#6366f126;color:#818cf8}.dark .jsm-allof-section{border-left-color:#3730a3}.dark .jsm-array-item{border-color:#334155}.dark .jsm-array-item:focus-within{border-color:#6366f1}.dark .jsm-array-index{background:#6366f133;color:#818cf8}.dark .jsm-empty-array{border-color:#334155;color:#64748b}.dark .jsm-contains-hint{background:#6366f126;color:#818cf8}.dark .jsm-add-prop{background:#1e293b66;border-color:#475569}.dark .jsm-add-prop-label{color:#64748b}.dark .jsm-dynamic-key-header{background:#1e293b80;border-color:#475569}.dark .jsm-dynamic-key-label{color:#94a3b8}.dark .jsm-error-msg{color:#f87171}.dark .jsm-array-title{color:#f1f5f9}.dark .jsm-badge--deprecated{background:#d9770633;color:#fbbf24}.dark .jsm-badge--readonly{background:#1e293b;color:#94a3b8}.dark .jsm-badge--writeonly{background:#2563eb33;color:#60a5fa}.dark .jsm-badge--not{background:#dc262633;color:#f87171}.dark .jsm-badge--nullable{background:#1e293b;color:#94a3b8}.dark .jsm-select-chevron{color:#64748b}\n"], dependencies: [{ kind: "component", type: JsonSchemaNodeComponent, selector: "jsm-schema-node", inputs: ["schema", "control", "label", "required", "path", "errorsMap", "parent", "controlKey", "allowAdditionalProperties"], outputs: ["controlReplaced"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'jsm-schema-node', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], encapsulation: ViewEncapsulation.None, template: `
     <ng-container [ngSwitch]="nodeKind">
 
-      <!-- ═══════════════════════════════════════════════════════════
-           oneOf — 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">
+      <!-- ═══ oneOf ═══ -->
+      <div *ngSwitchCase="'oneOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
           <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>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ 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>
+          <span class="jsm-combinator-badge jsm-badge--oneof">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 class="jsm-oneof-tabs">
+          <button *ngFor="let option of schema.oneOf; let i = index" type="button"
+            class="jsm-tab" [class.jsm-tab--active]="selectedOneOf === i"
+            (click)="selectedOneOf = i; onOneOfChange()">
+            {{ option.title || ('Option ' + (i + 1)) }}
+          </button>
         </div>
-        <div class="p-4" *ngIf="activeVariant">
+        <div class="jsm-combinator-body" *ngIf="activeVariant">
           <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
             [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
             [allowAdditionalProperties]="allowAdditionalProperties"
@@ -1277,36 +1136,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </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">
+      <!-- ═══ anyOf ═══ -->
+      <div *ngSwitchCase="'anyOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
           <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>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ 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>
+          <span class="jsm-combinator-badge jsm-badge--anyof">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)" />
+        <div class="jsm-anyof-options">
+          <label *ngFor="let option of schema.anyOf; let i = index"
+            class="jsm-anyof-option" [class.jsm-anyof-option--active]="selectedAnyOf.has(i)">
+            <input type="checkbox" class="sr-only" [checked]="selectedAnyOf.has(i)" (change)="toggleAnyOf(i)" />
             {{ option.title || ('Option ' + (i + 1)) }}
           </label>
         </div>
-        <div class="p-4" *ngIf="activeVariant">
+        <div class="jsm-combinator-body" *ngIf="activeVariant">
           <jsm-schema-node [schema]="activeVariant" [control]="control" [parent]="parent" [controlKey]="controlKey"
             [path]="path" [errorsMap]="errorsMap" [label]="label" [required]="required"
             [allowAdditionalProperties]="allowAdditionalProperties"
@@ -1314,19 +1160,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </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">
+      <!-- ═══ allOf ═══ -->
+      <div *ngSwitchCase="'allOf'" class="jsm-combinator">
+        <div class="jsm-combinator-header">
           <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>
+            <p class="jsm-combinator-title">{{ schema.title || label }}</p>
+            <p *ngIf="schema.description" class="jsm-combinator-hint">{{ 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>
+          <span class="jsm-combinator-badge jsm-badge--allof">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">
+        <div class="jsm-combinator-body">
+          <div *ngFor="let subSchema of mergedAllOf; let i = index" class="jsm-allof-section">
             <jsm-schema-node [schema]="subSchema" [control]="control" [parent]="parent" [controlKey]="controlKey"
               [path]="path" [errorsMap]="errorsMap" [label]="subSchema.title || ('Section ' + (i + 1))" [required]="required"
               [allowAdditionalProperties]="allowAdditionalProperties"
@@ -1335,145 +1179,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </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>
+      <!-- ═══ object ═══ -->
+      <fieldset *ngSwitchCase="'object'" class="jsm-fieldset">
+        <legend class="jsm-legend">{{ schema.title || label }}</legend>
+        <p *ngIf="schema.description" class="jsm-field-hint" style="margin-bottom:.75rem;margin-top:.25rem;">{{ schema.description }}</p>
 
-        <div *ngIf="metaBadges.length" class="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 *ngIf="metaBadges.length" class="jsm-badge-row" style="margin-bottom:.75rem;">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
         </div>
 
-        <!-- campi semplici (string/number/bool/enum) → griglia 2 colonne -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4" [formGroup]="controlAsGroup">
+        <div class="jsm-obj-grid" [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 style="display:flex;flex-direction:column;gap:.25rem;">
+              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
+                <span class="jsm-dynamic-key-label">{{ key }}</span>
+                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
               </div>
-              <jsm-schema-node
-                [schema]="schemaForKey(key)"
-                [control]="childControl(key)"
-                [parent]="controlAsGroup"
-                [controlKey]="key"
-                [path]="pathForChild(key)"
-                [errorsMap]="errorsMap"
-                [label]="key"
-                [required]="isRequired(key)"
-                [allowAdditionalProperties]="allowAdditionalProperties"
-                (controlReplaced)="controlReplaced.emit($event)">
-              </jsm-schema-node>
+              <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">
+        <div class="jsm-obj-complex" *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 style="display:flex;flex-direction:column;gap:.25rem;">
+              <div *ngIf="isDynamicKey(key)" class="jsm-dynamic-key-header">
+                <span class="jsm-dynamic-key-label">{{ key }}</span>
+                <button type="button" class="jsm-btn-danger" (click)="removeDynamicKey(key)">Remove</button>
               </div>
-              <jsm-schema-node
-                [schema]="schemaForKey(key)"
-                [control]="childControl(key)"
-                [parent]="controlAsGroup"
-                [controlKey]="key"
-                [path]="pathForChild(key)"
-                [errorsMap]="errorsMap"
-                [label]="key"
-                [required]="isRequired(key)"
-                [allowAdditionalProperties]="allowAdditionalProperties"
-                (controlReplaced)="controlReplaced.emit($event)">
-              </jsm-schema-node>
+              <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 *ngIf="canAddProperty" class="jsm-add-prop">
+          <p class="jsm-add-prop-label">Add property</p>
+          <div class="jsm-add-prop-row">
+            <input class="jsm-input jsm-input--sm" style="flex:1;" [(ngModel)]="newPropertyKey" placeholder="propertyName" />
+            <button type="button" class="jsm-btn-primary" (click)="addDynamicProperty()">Add</button>
           </div>
-          <p *ngIf="propertyError" class="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>
+          <p *ngIf="propertyError" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
             {{ propertyError }}
           </p>
         </div>
 
-        <div *ngIf="errorsForPath.length" class="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>
+        <div *ngIf="errorsForPath.length" class="jsm-error-list" style="margin-top:.75rem;">
+          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
             {{ error }}
           </p>
         </div>
       </fieldset>
 
-      <!-- ═══════════════════════════════════════════════════════════
-           array — sempre in colonna piena, items in colonna
-           ═══════════════════════════════════════════════════════════ -->
-      <div *ngSwitchCase="'array'" class="space-y-3">
-        <div class="flex items-start justify-between gap-2">
+      <!-- ═══ array ═══ -->
+      <div *ngSwitchCase="'array'" class="jsm-array-block">
+        <div class="jsm-array-header">
           <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 class="jsm-array-title">
+              {{ schema.title || label }}<span *ngIf="required" style="color:#ef4444;margin-left:.125rem;">*</span>
             </p>
-            <p *ngIf="schema.description" class="text-xs text-slate-500 mt-0.5">{{ schema.description }}</p>
+            <p *ngIf="schema.description" class="jsm-field-hint">{{ 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>
+          <button type="button" class="jsm-btn-primary" (click)="addArrayItem()" [disabled]="!canAddArrayItem">
+            <svg style="width:.875rem;height:.875rem;flex-shrink:0;" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
             Add item
           </button>
         </div>
 
-        <div *ngIf="effectiveSchema.contains" class="rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-3 py-1.5 text-xs text-indigo-700 dark:text-indigo-400">
+        <div *ngIf="effectiveSchema.contains" class="jsm-contains-hint">
           Must contain matching item(s)
           <span *ngIf="effectiveSchema.minContains"> · min {{ effectiveSchema.minContains }}</span>
           <span *ngIf="effectiveSchema.maxContains"> · max {{ effectiveSchema.maxContains }}</span>
         </div>
 
-        <div *ngIf="metaBadges.length" class="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 *ngIf="metaBadges.length" class="jsm-badge-row">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [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 class="jsm-array-items" *ngIf="arrayControls.length > 0; else emptyArray">
+          <div *ngFor="let item of arrayControls; let i = index" class="jsm-array-item">
+            <div class="jsm-array-item-header">
+              <span class="jsm-array-index">{{ i + 1 }}</span>
+              <button type="button" class="jsm-btn-danger" (click)="removeArrayItem(i)">Remove</button>
             </div>
             <jsm-schema-node [schema]="schemaForIndex(i)" [control]="item" [parent]="controlAsArray"
               [controlKey]="i" [path]="pathForChild(i)" [errorsMap]="errorsMap" [label]="label + ' item'"
@@ -1483,119 +1277,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </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>
+          <div class="jsm-empty-array">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>
+        <div *ngIf="errorsForPath.length" class="jsm-error-list">
+          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
             {{ error }}
           </p>
         </div>
       </div>
 
-      <!-- ═══════════════════════════════════════════════════════════
-           primitive — 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">
+      <!-- ═══ primitive ═══ -->
+      <div *ngSwitchDefault class="jsm-field">
         <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 class="jsm-field-label">
+            {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
           </label>
-          <p *ngIf="schema.description" class="text-xs text-slate-500 dark:text-slate-400 -mt-0.5">{{ schema.description }}</p>
+          <p *ngIf="schema.description" class="jsm-field-hint">{{ 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 *ngIf="metaBadges.length" class="jsm-badge-row">
+          <span *ngFor="let badge of metaBadges" class="jsm-badge" [ngClass]="badgeClass(badge)">{{ badge }}</span>
         </div>
 
         <ng-container [ngSwitch]="inputKind">
+          <input *ngSwitchCase="'text'" class="jsm-input"
+            [class.jsm-input--error]="errorsForPath.length && controlAsFormControl.dirty"
+            [attr.type]="inputType" [attr.placeholder]="schema.title || label"
+            [formControl]="controlAsFormControl" />
 
-          <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"
+          <textarea *ngSwitchCase="'textarea'" rows="4" class="jsm-textarea"
+            [class.jsm-textarea--error]="errorsForPath.length && controlAsFormControl.dirty"
             [attr.placeholder]="schema.title || label"
-            [formControl]="controlAsFormControl"
-          />
+            [formControl]="controlAsFormControl"></textarea>
 
-          <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"
+          <div *ngSwitchCase="'select'" class="jsm-select-wrap">
+            <select class="jsm-select"
+              [class.jsm-select--error]="errorsForPath.length && controlAsFormControl.dirty"
               [formControl]="controlAsFormControl">
               <option *ngFor="let option of effectiveSchema.enum" [ngValue]="option">{{ option }}</option>
             </select>
-            <svg class="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">
+            <svg class="jsm-select-chevron" viewBox="0 0 16 16" fill="none">
               <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
           </div>
 
-          <!-- checkbox come toggle switch -->
-          <label *ngSwitchCase="'checkbox'" class="inline-flex cursor-pointer items-center gap-2.5">
-            <span class="jsm-toggle-track" [class.jsm-toggle-on]="controlAsFormControl.value">
+          <label *ngSwitchCase="'checkbox'" class="jsm-toggle-label">
+            <span class="jsm-toggle-track" [class.jsm-on]="controlAsFormControl.value">
               <input type="checkbox" class="sr-only" [formControl]="controlAsFormControl" />
               <span class="jsm-toggle-thumb"></span>
             </span>
-            <span class="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 class="jsm-toggle-text">
+              {{ schema.title || label }}<span *ngIf="required" class="jsm-required">*</span>
             </span>
           </label>
-
         </ng-container>
 
-        <p *ngIf="inputKind === 'checkbox' && schema.description" class="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">
+        <p *ngIf="inputKind === 'checkbox' && schema.description" class="jsm-field-hint">{{ schema.description }}</p>
+        <p *ngIf="effectiveSchema.examples?.length" class="jsm-example">e.g. {{ effectiveSchema.examples?.[0] }}</p>
+        <p *ngIf="effectiveSchema.contentMediaType" class="jsm-example">
           {{ effectiveSchema.contentMediaType }}<span *ngIf="effectiveSchema.contentEncoding"> ({{ effectiveSchema.contentEncoding }})</span>
         </p>
 
-        <!-- 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">
+        <div *ngIf="errorsForPath.length && controlAsFormControl.dirty" class="jsm-error-list">
+          <p *ngFor="let error of errorsForPath" class="jsm-error-msg">
+            <svg class="jsm-error-icon" viewBox="0 0 16 16" fill="none">
               <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
               <path d="M8 5v3.5M8 11v.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
             </svg>
@@ -1605,8 +1352,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       </div>
 
     </ng-container>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".jsm-toggle-track{position:relative;display:inline-flex;align-items:center;width:2.25rem;height:1.25rem;border-radius:9999px;flex-shrink:0;transition:background-color .2s;background-color:#cbd5e1}.jsm-toggle-track.jsm-toggle-on{background-color:#4f46e5}.dark .jsm-toggle-track:not(.jsm-toggle-on){background-color:#475569}.jsm-toggle-thumb{display:inline-block;width:1rem;height:1rem;border-radius:9999px;background:#fff;box-shadow:0 1px 3px #0003;transform:translate(.125rem);transition:transform .2s}.jsm-toggle-track.jsm-toggle-on .jsm-toggle-thumb{transform:translate(1.125rem)}\n"] }]
-        }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaValidationService }], propDecorators: { schema: [{
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".jsm-field{display:flex;flex-direction:column;gap:.375rem}.jsm-field-label{display:block;font-size:.8125rem;font-weight:600;color:#374151}.jsm-field-hint{font-size:.75rem;color:#6b7280;margin:0;line-height:1.4}.jsm-required{color:#ef4444;margin-left:.125rem}.jsm-example{font-size:.6875rem;color:#9ca3af}.jsm-input,.jsm-textarea,.jsm-select{width:100%;border-radius:.5rem;border:1.5px solid #d1d5db;background:Canvas;padding:.5rem .75rem;font-size:.875rem;color:CanvasText;outline:none;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s;font-family:inherit;box-sizing:border-box}.jsm-input:hover,.jsm-textarea:hover,.jsm-select:hover{border-color:#9ca3af}.jsm-input:focus,.jsm-textarea:focus,.jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.jsm-input--error,.jsm-textarea--error,.jsm-select--error{border-color:#f87171!important;background:#fff5f5}.jsm-input--error:focus,.jsm-textarea--error:focus,.jsm-select--error:focus{box-shadow:0 0 0 3px #f8717133!important}.jsm-textarea{resize:vertical;min-height:6rem}.jsm-select-wrap{position:relative}.jsm-select{appearance:none;padding-right:2.25rem;cursor:pointer}.jsm-select-chevron{position:absolute;right:.625rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#9ca3af;pointer-events:none}.jsm-toggle-label{display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none}.jsm-toggle-track{position:relative;display:inline-flex;align-items:center;width:2.25rem;height:1.25rem;border-radius:9999px;flex-shrink:0;background:#d1d5db;transition:background .2s}.jsm-toggle-track.jsm-on{background:#4f46e5}.jsm-toggle-thumb{display:inline-block;width:1rem;height:1rem;border-radius:9999px;background:#fff;box-shadow:0 1px 3px #0003;transform:translate(.125rem);transition:transform .2s}.jsm-toggle-track.jsm-on .jsm-toggle-thumb{transform:translate(1.125rem)}.jsm-toggle-text{font-size:.875rem;font-weight:500;color:#374151}.jsm-btn-primary{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .75rem;border-radius:.5rem;font-size:.8125rem;font-weight:600;background:#4f46e5;color:#fff;border:none;cursor:pointer;box-shadow:0 1px 2px #4f46e54d;transition:background .15s,transform .1s,box-shadow .15s;white-space:nowrap;font-family:inherit}.jsm-btn-primary:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 3px 8px #4f46e54d}.jsm-btn-primary:active{transform:translateY(0)}.jsm-btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}.jsm-btn-danger{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:.375rem;font-size:.75rem;font-weight:600;background:transparent;color:#dc2626;border:1.5px solid #fca5a5;cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit}.jsm-btn-danger:hover{background:#fee2e2;border-color:#f87171}.jsm-error-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.jsm-error-msg{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#dc2626;font-weight:500}.jsm-error-icon{width:.875rem;height:.875rem;flex-shrink:0}.jsm-badge-row{display:flex;flex-wrap:wrap;gap:.375rem}.jsm-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.jsm-badge--deprecated{background:#fef3c7;color:#92400e}.jsm-badge--readonly{background:#f1f5f9;color:#475569}.jsm-badge--writeonly{background:#dbeafe;color:#1e40af}.jsm-badge--not{background:#fee2e2;color:#991b1b}.jsm-badge--nullable{background:#f3f4f6;color:#6b7280}.jsm-fieldset{border:1.5px solid #e5e7eb;border-radius:.875rem;padding:1.25rem;background:transparent;box-shadow:0 1px 3px #0000000f;transition:box-shadow .2s;box-sizing:border-box}.jsm-fieldset:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114,0 1px 3px #0000000f}.jsm-legend{display:inline-flex;align-items:center;gap:.375rem;padding:0 .5rem;font-size:.875rem;font-weight:700;color:#1f2937}.jsm-obj-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width:640px){.jsm-obj-grid{grid-template-columns:repeat(2,1fr)}}.jsm-obj-complex{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.jsm-dynamic-key-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;background:#f9fafb;border-radius:.375rem;border:1px dashed #d1d5db;margin-bottom:.25rem}.jsm-dynamic-key-label{font-size:.75rem;font-weight:600;color:#6b7280;font-family:monospace}.jsm-add-prop{margin-top:1rem;padding:.875rem;background:#f9fafb;border-radius:.625rem;border:1.5px dashed #d1d5db;display:flex;flex-direction:column;gap:.5rem}.jsm-add-prop-label{font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}.jsm-add-prop-row{display:flex;gap:.5rem;align-items:center}.jsm-input--sm{padding:.375rem .625rem;font-size:.8125rem}.jsm-array-block{display:flex;flex-direction:column;gap:.75rem}.jsm-array-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}.jsm-array-title{font-size:.875rem;font-weight:700;color:#1f2937;display:flex;align-items:center;gap:.375rem}.jsm-array-items{display:flex;flex-direction:column;gap:.75rem}.jsm-array-item{border:1.5px solid #e5e7eb;border-radius:.75rem;padding:.875rem;background:transparent;box-shadow:0 1px 2px #0000000a;transition:border-color .15s,box-shadow .15s}.jsm-array-item:focus-within{border-color:#c7d2fe;box-shadow:0 0 0 3px #6366f114}.jsm-array-item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.jsm-array-index{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:9999px;background:#eef2ff;color:#4f46e5;font-size:.6875rem;font-weight:700}.jsm-empty-array{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;border:1.5px dashed #e5e7eb;border-radius:.75rem;color:#9ca3af;font-size:.8125rem;text-align:center}.jsm-contains-hint{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:#6366f1;background:#eef2ff;border-radius:.375rem;padding:.375rem .625rem}.jsm-combinator{border:1.5px solid #e5e7eb;border-radius:.875rem;overflow:hidden;background:transparent;box-shadow:0 1px 3px #0000000f}.jsm-combinator-header{display:flex;align-items:flex-start;justify-content:space-between;padding:.875rem 1rem;background:#00000008;border-bottom:1.5px solid #e5e7eb}.jsm-combinator-title{font-size:.875rem;font-weight:700;color:#1f2937}.jsm-combinator-body{padding:1rem}.jsm-combinator-hint{font-size:.75rem;color:#6b7280;margin:.25rem 0 0}.jsm-oneof-tabs{display:flex;overflow-x:auto;border-bottom:1.5px solid #e5e7eb}.jsm-tab{padding:.5rem 1rem;font-size:.8125rem;font-weight:500;color:#6b7280;border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;white-space:nowrap;font-family:inherit}.jsm-tab:hover{color:#4f46e5}.jsm-tab--active{color:#4f46e5;border-bottom-color:#4f46e5;font-weight:600}.jsm-anyof-options{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 1rem;border-bottom:1.5px solid #e5e7eb}.jsm-anyof-option{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:9999px;border:1.5px solid #e5e7eb;font-size:.8125rem;font-weight:500;color:#6b7280;cursor:pointer;transition:all .15s;background:transparent}.jsm-anyof-option:hover{border-color:#a5b4fc;color:#4f46e5}.jsm-anyof-option--active{border-color:#6366f1;background:#eef2ff;color:#4f46e5}.jsm-allof-section{border-left:3px solid #e0e7ff;padding-left:1rem}.jsm-combinator-badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;margin-left:.75rem}.jsm-badge--oneof{background:#dbeafe;color:#1e40af}.jsm-badge--anyof{background:#ede9fe;color:#5b21b6}.jsm-badge--allof{background:#ccfbf1;color:#065f46}.dark .jsm-field-label{color:#d1d5db}.dark .jsm-field-hint{color:#9ca3af}.dark .jsm-toggle-track{background:#475569}.dark .jsm-toggle-track.jsm-on{background:#4f46e5}.dark .jsm-toggle-text{color:#d1d5db}.dark .jsm-input,.dark .jsm-textarea,.dark .jsm-select{border-color:#475569;color:#f1f5f9}.dark .jsm-input:focus,.dark .jsm-textarea:focus,.dark .jsm-select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f133}.dark .jsm-input--error,.dark .jsm-textarea--error,.dark .jsm-select--error{border-color:#f87171!important;background:#f871711a}.dark .jsm-fieldset{border-color:#334155}.dark .jsm-fieldset:focus-within{border-color:#6366f1}.dark .jsm-legend{color:#f1f5f9}.dark .jsm-combinator{border-color:#334155}.dark .jsm-combinator-header{background:#ffffff0a;border-color:#334155}.dark .jsm-combinator-title{color:#f1f5f9}.dark .jsm-oneof-tabs{border-color:#334155}.dark .jsm-tab{color:#94a3b8}.dark .jsm-tab--active{color:#818cf8;border-bottom-color:#818cf8}.dark .jsm-anyof-options{border-color:#334155}.dark .jsm-anyof-option{border-color:#334155;color:#94a3b8;background:#0f172a}.dark .jsm-anyof-option--active{border-color:#6366f1;background:#6366f126;color:#818cf8}.dark .jsm-allof-section{border-left-color:#3730a3}.dark .jsm-array-item{border-color:#334155}.dark .jsm-array-item:focus-within{border-color:#6366f1}.dark .jsm-array-index{background:#6366f133;color:#818cf8}.dark .jsm-empty-array{border-color:#334155;color:#64748b}.dark .jsm-contains-hint{background:#6366f126;color:#818cf8}.dark .jsm-add-prop{background:#1e293b66;border-color:#475569}.dark .jsm-add-prop-label{color:#64748b}.dark .jsm-dynamic-key-header{background:#1e293b80;border-color:#475569}.dark .jsm-dynamic-key-label{color:#94a3b8}.dark .jsm-error-msg{color:#f87171}.dark .jsm-array-title{color:#f1f5f9}.dark .jsm-badge--deprecated{background:#d9770633;color:#fbbf24}.dark .jsm-badge--readonly{background:#1e293b;color:#94a3b8}.dark .jsm-badge--writeonly{background:#2563eb33;color:#60a5fa}.dark .jsm-badge--not{background:#dc262633;color:#f87171}.dark .jsm-badge--nullable{background:#1e293b;color:#94a3b8}.dark .jsm-select-chevron{color:#64748b}\n"] }]
+        }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaValidationService }, { type: i0.ChangeDetectorRef }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
             }], control: [{
@@ -1630,6 +1377,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+// AUTO-GENERATED — do not edit manually. Run: node scripts/generate-lib-styles.mjs
+const JSM_CSS = "/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-50: oklch(97.1% 0.013 17.38);\n    --color-red-300: oklch(80.8% 0.114 19.571);\n    --color-red-700: oklch(50.5% 0.213 27.518);\n    --color-red-900: oklch(39.6% 0.141 25.723);\n    --color-amber-50: oklch(98.7% 0.022 95.277);\n    --color-amber-200: oklch(92.4% 0.12 95.746);\n    --color-amber-300: oklch(87.9% 0.169 91.605);\n    --color-amber-400: oklch(82.8% 0.189 84.429);\n    --color-amber-600: oklch(66.6% 0.179 58.318);\n    --color-amber-700: oklch(55.5% 0.163 48.998);\n    --color-amber-800: oklch(47.3% 0.137 46.201);\n    --color-amber-900: oklch(41.4% 0.112 45.904);\n    --color-emerald-50: oklch(97.9% 0.021 166.113);\n    --color-emerald-400: oklch(76.5% 0.177 163.223);\n    --color-emerald-700: oklch(50.8% 0.118 165.612);\n    --color-emerald-900: oklch(37.8% 0.077 168.94);\n    --color-indigo-100: oklch(93% 0.034 272.788);\n    --color-indigo-300: oklch(78.5% 0.115 274.713);\n    --color-indigo-400: oklch(67.3% 0.182 276.935);\n    --color-indigo-500: oklch(58.5% 0.233 277.117);\n    --color-indigo-600: oklch(51.1% 0.262 276.966);\n    --color-indigo-700: oklch(45.7% 0.24 277.023);\n    --color-indigo-900: oklch(35.9% 0.144 278.697);\n    --color-rose-50: oklch(96.9% 0.015 12.422);\n    --color-rose-400: oklch(71.2% 0.194 13.428);\n    --color-rose-500: oklch(64.5% 0.246 16.439);\n    --color-rose-600: oklch(58.6% 0.253 17.585);\n    --color-rose-700: oklch(51.4% 0.222 16.935);\n    --color-rose-900: oklch(41% 0.159 10.272);\n    --color-slate-50: oklch(98.4% 0.003 247.858);\n    --color-slate-100: oklch(96.8% 0.007 247.896);\n    --color-slate-200: oklch(92.9% 0.013 255.508);\n    --color-slate-300: oklch(86.9% 0.022 252.894);\n    --color-slate-400: oklch(70.4% 0.04 256.788);\n    --color-slate-500: oklch(55.4% 0.046 257.417);\n    --color-slate-600: oklch(44.6% 0.043 257.281);\n    --color-slate-700: oklch(37.2% 0.044 257.287);\n    --color-slate-800: oklch(27.9% 0.041 260.031);\n    --color-slate-900: oklch(20.8% 0.042 265.755);\n    --color-slate-950: oklch(12.9% 0.042 264.695);\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --container-2xl: 42rem;\n    --container-3xl: 48rem;\n    --container-6xl: 72rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --text-4xl: 2.25rem;\n    --text-4xl--line-height: calc(2.5 / 2.25);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-tight: -0.025em;\n    --tracking-wide: 0.025em;\n    --radius-lg: 0.5rem;\n    --radius-xl: 0.75rem;\n    --radius-2xl: 1rem;\n    --animate-spin: spin 1s linear infinite;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  .relative {\n    position: relative;\n  }\n  .col-span-2 {\n    grid-column: span 2 / span 2;\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .contents {\n    display: contents;\n  }\n  .flex {\n    display: flex;\n  }\n  .grid {\n    display: grid;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-3\\.5 {\n    height: calc(var(--spacing) * 3.5);\n  }\n  .h-4 {\n    height: calc(var(--spacing) * 4);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-40 {\n    height: calc(var(--spacing) * 40);\n  }\n  .h-56 {\n    height: calc(var(--spacing) * 56);\n  }\n  .min-h-screen {\n    min-height: 100vh;\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-3\\.5 {\n    width: calc(var(--spacing) * 3.5);\n  }\n  .w-4 {\n    width: calc(var(--spacing) * 4);\n  }\n  .w-9 {\n    width: calc(var(--spacing) * 9);\n  }\n  .w-full {\n    width: 100%;\n  }\n  .max-w-2xl {\n    max-width: var(--container-2xl);\n  }\n  .max-w-3xl {\n    max-width: var(--container-3xl);\n  }\n  .max-w-6xl {\n    max-width: var(--container-6xl);\n  }\n  .flex-shrink {\n    flex-shrink: 1;\n  }\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .translate-x-0 {\n    --tw-translate-x: calc(var(--spacing) * 0);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-0\\.5 {\n    --tw-translate-x: calc(var(--spacing) * 0.5);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .translate-x-4 {\n    --tw-translate-x: calc(var(--spacing) * 4);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .resize {\n    resize: both;\n  }\n  .grid-cols-1 {\n    grid-template-columns: repeat(1, minmax(0, 1fr));\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-6 {\n    gap: calc(var(--spacing) * 6);\n  }\n  .space-y-0 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-0\\.5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-1 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-2 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-4 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-5 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-6 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-10 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-2xl {\n    border-radius: var(--radius-2xl);\n  }\n  .rounded-full {\n    border-radius: calc(infinity * 1px);\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-xl {\n    border-radius: var(--radius-xl);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-2 {\n    border-style: var(--tw-border-style);\n    border-width: 2px;\n  }\n  .border-amber-200 {\n    border-color: var(--color-amber-200);\n  }\n  .border-amber-300 {\n    border-color: var(--color-amber-300);\n  }\n  .border-red-300 {\n    border-color: var(--color-red-300);\n  }\n  .border-red-700 {\n    border-color: var(--color-red-700);\n  }\n  .border-slate-100 {\n    border-color: var(--color-slate-100);\n  }\n  .border-slate-200 {\n    border-color: var(--color-slate-200);\n  }\n  .border-slate-300 {\n    border-color: var(--color-slate-300);\n  }\n  .border-t-slate-900 {\n    border-top-color: var(--color-slate-900);\n  }\n  .bg-amber-50 {\n    background-color: var(--color-amber-50);\n  }\n  .bg-emerald-50 {\n    background-color: var(--color-emerald-50);\n  }\n  .bg-indigo-600 {\n    background-color: var(--color-indigo-600);\n  }\n  .bg-red-50 {\n    background-color: var(--color-red-50);\n  }\n  .bg-red-900 {\n    background-color: var(--color-red-900);\n  }\n  .bg-red-900\\/20 {\n    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);\n    }\n  }\n  .bg-rose-50 {\n    background-color: var(--color-rose-50);\n  }\n  .bg-slate-50 {\n    background-color: var(--color-slate-50);\n  }\n  .bg-slate-300 {\n    background-color: var(--color-slate-300);\n  }\n  .bg-slate-900 {\n    background-color: var(--color-slate-900);\n  }\n  .bg-white {\n    background-color: var(--color-white);\n  }\n  .bg-white\\/70 {\n    background-color: color-mix(in srgb, #fff 70%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);\n    }\n  }\n  .bg-white\\/90 {\n    background-color: color-mix(in srgb, #fff 90%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n    }\n  }\n  .p-3 {\n    padding: calc(var(--spacing) * 3);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-5 {\n    padding: calc(var(--spacing) * 5);\n  }\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-2\\.5 {\n    padding-block: calc(var(--spacing) * 2.5);\n  }\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n  .py-8 {\n    padding-block: calc(var(--spacing) * 8);\n  }\n  .py-10 {\n    padding-block: calc(var(--spacing) * 10);\n  }\n  .font-mono {\n    font-family: var(--font-mono);\n  }\n  .text-3xl {\n    font-size: var(--text-3xl);\n    line-height: var(--tw-leading, var(--text-3xl--line-height));\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n  .text-\\[11px\\] {\n    font-size: 11px;\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .tracking-\\[0\\.2em\\] {\n    --tw-tracking: 0.2em;\n    letter-spacing: 0.2em;\n  }\n  .tracking-tight {\n    --tw-tracking: var(--tracking-tight);\n    letter-spacing: var(--tracking-tight);\n  }\n  .tracking-wide {\n    --tw-tracking: var(--tracking-wide);\n    letter-spacing: var(--tracking-wide);\n  }\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n  .text-amber-600 {\n    color: var(--color-amber-600);\n  }\n  .text-amber-700 {\n    color: var(--color-amber-700);\n  }\n  .text-amber-800 {\n    color: var(--color-amber-800);\n  }\n  .text-emerald-700 {\n    color: var(--color-emerald-700);\n  }\n  .text-indigo-500 {\n    color: var(--color-indigo-500);\n  }\n  .text-rose-500 {\n    color: var(--color-rose-500);\n  }\n  .text-rose-600 {\n    color: var(--color-rose-600);\n  }\n  .text-rose-700 {\n    color: var(--color-rose-700);\n  }\n  .text-slate-400 {\n    color: var(--color-slate-400);\n  }\n  .text-slate-500 {\n    color: var(--color-slate-500);\n  }\n  .text-slate-600 {\n    color: var(--color-slate-600);\n  }\n  .text-slate-700 {\n    color: var(--color-slate-700);\n  }\n  .text-slate-800 {\n    color: var(--color-slate-800);\n  }\n  .text-slate-900 {\n    color: var(--color-slate-900);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .uppercase {\n    text-transform: uppercase;\n  }\n  .italic {\n    font-style: italic;\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .opacity-25 {\n    opacity: 25%;\n  }\n  .opacity-75 {\n    opacity: 75%;\n  }\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .backdrop-blur {\n    --tw-backdrop-blur: blur(8px);\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .backdrop-filter {\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-transform {\n    transition-property: transform, translate, scale, rotate;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .focus-within\\:border-indigo-300 {\n    &:focus-within {\n      border-color: var(--color-indigo-300);\n    }\n  }\n  .focus-within\\:ring-2 {\n    &:focus-within {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .hover\\:-translate-y-0\\.5 {\n    &:hover {\n      @media (hover: hover) {\n        --tw-translate-y: calc(var(--spacing) * -0.5);\n        translate: var(--tw-translate-x) var(--tw-translate-y);\n      }\n    }\n  }\n  .hover\\:border-slate-300 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-slate-300);\n      }\n    }\n  }\n  .hover\\:border-slate-400 {\n    &:hover {\n      @media (hover: hover) {\n        border-color: var(--color-slate-400);\n      }\n    }\n  }\n  .hover\\:bg-slate-50 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-slate-50);\n      }\n    }\n  }\n  .hover\\:bg-slate-800 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-slate-800);\n      }\n    }\n  }\n  .hover\\:text-rose-700 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-rose-700);\n      }\n    }\n  }\n  .hover\\:shadow {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      }\n    }\n  }\n  .hover\\:shadow-lg {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      }\n    }\n  }\n  .hover\\:shadow-md {\n    &:hover {\n      @media (hover: hover) {\n        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n      }\n    }\n  }\n  .focus\\:border-indigo-400 {\n    &:focus {\n      border-color: var(--color-indigo-400);\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-indigo-100 {\n    &:focus {\n      --tw-ring-color: var(--color-indigo-100);\n    }\n  }\n  .focus\\:ring-indigo-500 {\n    &:focus {\n      --tw-ring-color: var(--color-indigo-500);\n    }\n  }\n  .focus\\:ring-slate-900 {\n    &:focus {\n      --tw-ring-color: var(--color-slate-900);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .sm\\:grid-cols-2 {\n    @media (width >= 40rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:grid-cols-2 {\n    @media (width >= 48rem) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n  }\n  .md\\:flex-row {\n    @media (width >= 48rem) {\n      flex-direction: row;\n    }\n  }\n  .md\\:items-center {\n    @media (width >= 48rem) {\n      align-items: center;\n    }\n  }\n  .md\\:justify-between {\n    @media (width >= 48rem) {\n      justify-content: space-between;\n    }\n  }\n  .md\\:p-6 {\n    @media (width >= 48rem) {\n      padding: calc(var(--spacing) * 6);\n    }\n  }\n  .md\\:text-4xl {\n    @media (width >= 48rem) {\n      font-size: var(--text-4xl);\n      line-height: var(--tw-leading, var(--text-4xl--line-height));\n    }\n  }\n  .lg\\:grid-cols-\\[360px\\,1fr\\] {\n    @media (width >= 64rem) {\n      grid-template-columns: 360px,1fr;\n    }\n  }\n  .dark\\:border-amber-700 {\n    &:where(.dark, .dark *) {\n      border-color: var(--color-amber-700);\n    }\n  }\n  .dark\\:border-amber-800 {\n    &:where(.dark, .dark *) {\n      border-color: var(--color-amber-800);\n    }\n  }\n  .dark\\:border-slate-600 {\n    &:where(.dark, .dark *) {\n      border-color: var(--color-slate-600);\n    }\n  }\n  .dark\\:border-slate-700 {\n    &:where(.dark, .dark *) {\n      border-color: var(--color-slate-700);\n    }\n  }\n  .dark\\:border-t-indigo-400 {\n    &:where(.dark, .dark *) {\n      border-top-color: var(--color-indigo-400);\n    }\n  }\n  .dark\\:bg-amber-900\\/20 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 20%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-amber-900) 20%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-emerald-900\\/30 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 30%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-indigo-600 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-indigo-600);\n    }\n  }\n  .dark\\:bg-rose-900\\/30 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 30%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-rose-900) 30%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-600 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-slate-600);\n    }\n  }\n  .dark\\:bg-slate-700 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-slate-700);\n    }\n  }\n  .dark\\:bg-slate-800 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-slate-800);\n    }\n  }\n  .dark\\:bg-slate-800\\/50 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 50%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-800\\/60 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-900 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-slate-900);\n    }\n  }\n  .dark\\:bg-slate-900\\/90 {\n    &:where(.dark, .dark *) {\n      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 90%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-slate-900) 90%, transparent);\n      }\n    }\n  }\n  .dark\\:bg-slate-950 {\n    &:where(.dark, .dark *) {\n      background-color: var(--color-slate-950);\n    }\n  }\n  .dark\\:text-amber-300 {\n    &:where(.dark, .dark *) {\n      color: var(--color-amber-300);\n    }\n  }\n  .dark\\:text-amber-400 {\n    &:where(.dark, .dark *) {\n      color: var(--color-amber-400);\n    }\n  }\n  .dark\\:text-emerald-400 {\n    &:where(.dark, .dark *) {\n      color: var(--color-emerald-400);\n    }\n  }\n  .dark\\:text-indigo-400 {\n    &:where(.dark, .dark *) {\n      color: var(--color-indigo-400);\n    }\n  }\n  .dark\\:text-rose-400 {\n    &:where(.dark, .dark *) {\n      color: var(--color-rose-400);\n    }\n  }\n  .dark\\:text-slate-100 {\n    &:where(.dark, .dark *) {\n      color: var(--color-slate-100);\n    }\n  }\n  .dark\\:text-slate-200 {\n    &:where(.dark, .dark *) {\n      color: var(--color-slate-200);\n    }\n  }\n  .dark\\:text-slate-300 {\n    &:where(.dark, .dark *) {\n      color: var(--color-slate-300);\n    }\n  }\n  .dark\\:text-slate-400 {\n    &:where(.dark, .dark *) {\n      color: var(--color-slate-400);\n    }\n  }\n  .dark\\:text-slate-500 {\n    &:where(.dark, .dark *) {\n      color: var(--color-slate-500);\n    }\n  }\n  .dark\\:text-white {\n    &:where(.dark, .dark *) {\n      color: var(--color-white);\n    }\n  }\n  .dark\\:hover\\:border-slate-500 {\n    &:where(.dark, .dark *) {\n      &:hover {\n        @media (hover: hover) {\n          border-color: var(--color-slate-500);\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:bg-indigo-700 {\n    &:where(.dark, .dark *) {\n      &:hover {\n        @media (hover: hover) {\n          background-color: var(--color-indigo-700);\n        }\n      }\n    }\n  }\n  .dark\\:hover\\:bg-slate-700 {\n    &:where(.dark, .dark *) {\n      &:hover {\n        @media (hover: hover) {\n          background-color: var(--color-slate-700);\n        }\n      }\n    }\n  }\n  .dark\\:focus\\:ring-indigo-900\\/40 {\n    &:where(.dark, .dark *) {\n      &:focus {\n        --tw-ring-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 40%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          --tw-ring-color: color-mix(in oklab, var(--color-indigo-900) 40%, transparent);\n        }\n      }\n    }\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-outline-style: solid;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n    }\n  }\n}\n";
+
+const STYLE_ID = 'jsm-tailwind-styles';
+class JsonSchemaStylesService {
+    platformId;
+    injected = false;
+    constructor(platformId) {
+        this.platformId = platformId;
+    }
+    inject() {
+        if (this.injected || !isPlatformBrowser(this.platformId))
+            return;
+        if (typeof document === 'undefined')
+            return;
+        if (document.getElementById(STYLE_ID)) {
+            this.injected = true;
+            return;
+        }
+        const style = document.createElement('style');
+        style.id = STYLE_ID;
+        style.textContent = JSM_CSS;
+        document.head.appendChild(style);
+        this.injected = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaStylesService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaStylesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaStylesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
 class JsonSchemaFormComponent {
     schemaService;
     resolver;
@@ -1649,10 +1432,11 @@ class JsonSchemaFormComponent {
     schemaErrorList = [];
     loading = false;
     valueSub;
-    constructor(schemaService, resolver, validation) {
+    constructor(schemaService, resolver, validation, stylesService) {
         this.schemaService = schemaService;
         this.resolver = resolver;
         this.validation = validation;
+        stylesService.inject();
     }
     ngOnChanges(changes) {
         if (changes['schema'] || changes['value'] || changes['data']) {
@@ -1722,7 +1506,7 @@ class JsonSchemaFormComponent {
             this.valueChange.emit(this.rootControl.value);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaResolverService }, { token: JsonSchemaValidationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: JsonSchemaFormComponent, deps: [{ token: JsonSchemaFormService }, { token: JsonSchemaResolverService }, { token: JsonSchemaValidationService }, { token: JsonSchemaStylesService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: JsonSchemaFormComponent, isStandalone: true, selector: "jsm-json-schema-form", inputs: { schema: "schema", value: "value", data: "data", allowAdditionalProperties: "allowAdditionalProperties" }, outputs: { formReady: "formReady", valueChange: "valueChange", schemaReady: "schemaReady", schemaErrors: "schemaErrors" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="jsm-root">
     <form class="w-full space-y-5">
@@ -1838,7 +1622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     </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: [{
+        }], ctorParameters: () => [{ type: JsonSchemaFormService }, { type: JsonSchemaResolverService }, { type: JsonSchemaValidationService }, { type: JsonSchemaStylesService }], propDecorators: { schema: [{
                 type: Input,
                 args: [{ required: true }]
             }], value: [{
@@ -1874,5 +1658,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonSchemaNodeComponent, JsonSchemaResolverService, JsonSchemaValidationService };
+export { JsonSchemaFormComponent, JsonSchemaFormModule, JsonSchemaFormService, JsonSchemaNodeComponent, JsonSchemaResolverService, JsonSchemaStylesService, JsonSchemaValidationService };
 //# sourceMappingURL=elle96-ng-json-schema-manager.mjs.map