@elle96/ng-json-schema-manager 0.2.1 → 0.4.0

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

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